/* ===== Clases a domicilio y venta de instrumentos (secciones separadas) ===== */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.split-rev .split-img{order:2}
.split-img{position:relative;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;aspect-ratio:4/3;background:var(--night)}
.split-img img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .9s}
.split:hover .split-img img{transform:scale(1.05)}
.split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(27,17,10,.5));pointer-events:none}
.split-tag{position:absolute;left:14px;bottom:12px;z-index:2;background:var(--sun);color:var(--night);font-weight:900;font-size:.9rem;padding:7px 16px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.split-text .lead{margin-bottom:20px}
@media (max-width:760px){
  .split{grid-template-columns:1fr;gap:18px}
  .split-rev .split-img{order:0}
  .split-img{aspect-ratio:16/10}
  .split-text .lead{margin-bottom:14px}
  .split-text .btn{width:100%}
  #clases .split-img img{object-position:center 40%}
}

/* Foto de los villancicos: más grande en el anuncio */
.anuncio-photo{width:210px;height:140px;border-radius:14px;object-position:center 28%}
.anuncio-in{gap:20px;padding:14px 0}
.anuncio-text{font-size:1.1rem}
@media (max-width:600px){
  .anuncio-in{display:grid;grid-template-columns:1fr;gap:10px;text-align:center;padding:14px 0}
  .anuncio-photo{width:100%;height:190px;border-radius:14px;object-position:center 30%}
  .anuncio-text{font-size:.95rem}
  .anuncio-btn{grid-column:auto}
}

/* foto de clases (vertical): enfocar arpa y manos */
.duo-card:first-child .duo-img img{object-position:center 42%}
@media (max-width:760px){
  .duo-card:first-child .duo-img{height:220px}
  .duo-card:first-child .duo-img img{object-position:center 38%}
}

/* foto de instrumentos: mostrar los instrumentos */
#instrumentos .split-img img{object-position:center 72%}
/* menú más compacto en pantallas medianas */
@media (min-width:861px) and (max-width:1180px){
  .nav{gap:12px}
  .nav a{font-size:.84rem}
  .brand-text{font-size:.9rem}
}