/* ============================================================
   Rosa Music · Sistema de diseño
   Cada color tiene un papel fijo. No se usan por decoración.
   ============================================================ */

:root{
  /* --- Paleta de marca · navy (definitiva, julio 2026) --- */
  --granate:      #2F4156;   /* navy · marca, titulares, texto */
  --granate-osc:  #233343;   /* navy oscuro · hover */
  --crema:        #F5EFEB;   /* arena · SOLO fondo de secciones alternas */
  --rosa-emp:     #C8D9E6;   /* cielo · fondos suaves y citas */
  --topo:         #E4E9EE;   /* líneas, bordes, separadores */
  --verde-emp:    #C8D9E6;   /* cielo · etiquetas de sección */
  --azul:         #567C8D;   /* teal · enlaces y destacados */
  --azul-claro:   #C8D9E6;   /* cielo · fondo de bloques destacados */

  /* --- Neutros --- */
  --tinta:        #2F4156;   /* texto principal */
  --gris:         #6B7785;   /* texto secundario */
  --blanco:       #FFFFFF;

  /* --- Tipografía --- */
  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Medidas --- */
  --ancho:     1180px;
  --ancho-txt: 720px;        /* medida de lectura cómoda */
  --radio:     4px;          /* esquinas casi rectas: es una marca clásica */
  --sombra:    0 2px 16px -8px rgba(47,65,86,.22);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration:none;transition:color .2s}
a:hover{color:var(--granate)}

/* ===== Tipografía ===== */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;color:var(--granate)}
h1{font-size:clamp(2.1rem,4.5vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.35rem}
h4{font-size:1.1rem}

.antetitulo{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--azul);
}

.entradilla{font-size:1.15rem;color:var(--gris);line-height:1.7}

/* Filigrana: el separador ornamental del manual */
.filigrana{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1.4rem 0}
.filigrana::before,.filigrana::after{content:'';height:1px;width:60px;background:var(--topo)}
.filigrana span{color:var(--granate);font-size:1.1rem;line-height:1}

/* ===== Estructura ===== */
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 2rem}
.medida{max-width:var(--ancho-txt);margin:0 auto}
.seccion{padding:5rem 0}
.seccion-crema{background:var(--crema)}
.seccion-rosa{background:var(--crema)}
.seccion-blanca{background:var(--blanco)}
.centrado{text-align:center}

/* ===== Cabecera ===== */
.cabecera{
  background:var(--crema);border-bottom:1px solid var(--topo);
  position:sticky;top:0;z-index:100;transition:box-shadow .25s;
}
.cabecera.flotando{box-shadow:var(--sombra)}
.cabecera-in{
  max-width:var(--ancho);margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;gap:2rem;min-height:88px;
}
/* El logotipo es un SVG vectorizado del original, no texto compuesto:
   así se ve igual en cualquier equipo sin depender de fuentes instaladas. */
.marca{display:flex;align-items:center;flex:0 0 auto}
.marca img{height:50px;width:auto}

.nav{flex:1 1 auto;display:flex;justify-content:flex-end}
.nav ul{display:flex;gap:.4rem;list-style:none;align-items:center}
.nav a{
  font-size:.83rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta);padding:.6rem .9rem;border-radius:var(--radio);
  white-space:nowrap;transition:background .18s,color .18s;
}
.nav a:hover{background:var(--rosa-emp);color:var(--granate)}
.nav a.activo{color:var(--granate);background:var(--rosa-emp)}

.hamb{display:none;background:none;border:0;cursor:pointer;color:var(--granate);padding:.4rem}
.hamb svg{width:26px;height:26px}

/* ===== Menú móvil ===== */
.velo{position:fixed;inset:0;background:rgba(47,65,86,.45);opacity:0;visibility:hidden;transition:.3s;z-index:198}
.velo.abierto{opacity:1;visibility:visible}
.menu-movil{
  position:fixed;top:0;right:-330px;width:min(310px,86vw);height:100%;
  background:var(--crema);z-index:199;transition:right .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:-8px 0 30px -14px rgba(47,65,86,.4);display:flex;flex-direction:column;
}
.menu-movil.abierto{right:0}
.menu-movil-cab{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--topo)}
.menu-movil-cab img{height:42px}
.menu-movil ul{list-style:none;padding:.5rem 0;flex:1 1 auto;overflow-y:auto}
.menu-movil li+li{border-top:1px solid var(--topo)}
.menu-movil a{display:block;padding:1rem 1.5rem;font-size:.95rem;color:var(--tinta)}
.menu-movil a:hover{background:var(--rosa-emp);color:var(--granate)}
.cerrar{background:none;border:0;cursor:pointer;color:var(--granate);padding:.3rem}
.cerrar svg{width:20px;height:20px}

/* ===== Botones ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:.9rem 1.9rem;border-radius:var(--radio);
  border:1px solid transparent;cursor:pointer;transition:all .2s;text-align:center;
}
.btn-primario{background:var(--granate);color:var(--blanco)}
.btn-primario:hover{background:var(--granate-osc);color:var(--blanco)}
.btn-linea{background:transparent;color:var(--granate);border-color:var(--granate)}
.btn-linea:hover{background:var(--granate);color:var(--blanco)}
/* El azul se reserva para lo que debe destacar sobre lo demás */
.btn-azul{background:var(--azul);color:var(--blanco)}
.btn-azul:hover{background:#233343;color:var(--blanco)}
.btn-bloque{display:flex;width:100%}
.btn-sm{padding:.6rem 1.2rem;font-size:.72rem}

/* ===== Portada ===== */
.portada{
  background:var(--crema);padding:4.5rem 0 5rem;
  border-bottom:1px solid var(--topo);
}
.portada-grid{display:grid;grid-template-columns:1fr .85fr;gap:4rem;align-items:center}
.portada h1{margin:.8rem 0 1.2rem}
.portada .entradilla{margin-bottom:2rem}
.portada-acciones{display:flex;gap:1rem;flex-wrap:wrap}
.portada-emblema{display:flex;justify-content:center}
.portada-emblema img{width:100%;max-width:330px}

/* ===== Tarjetas de artículo ===== */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.rejilla-2{grid-template-columns:repeat(2,1fr)}

.tarjeta{
  background:var(--blanco);border:1px solid var(--topo);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;
}
.tarjeta:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.tarjeta-img{aspect-ratio:3/2;background:var(--rosa-emp);overflow:hidden}
.tarjeta-img img{width:100%;height:100%;object-fit:cover}
.tarjeta-cuerpo{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1 1 auto}
.tarjeta h3{font-size:1.25rem;line-height:1.3}
.tarjeta h3 a{color:var(--granate)}
.tarjeta p{font-size:.93rem;color:var(--gris);line-height:1.65;flex:1 1 auto}

.etiqueta{
  display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .7rem;border-radius:50px;
  background:var(--verde-emp);color:#2F4156;align-self:flex-start;
}
.meta{font-size:.78rem;color:var(--gris);letter-spacing:.04em}

/* ===== Artículo ===== */
.articulo-cab{background:var(--rosa-emp);padding:3.5rem 0;text-align:center}
.articulo-cab h1{margin:.8rem auto 1rem;max-width:800px}
.prosa{font-size:1.05rem;line-height:1.85}
.prosa > *+*{margin-top:1.5rem}
.prosa h2{margin-top:3rem;font-size:1.75rem}
.prosa h3{margin-top:2.2rem}
.prosa ul,.prosa ol{padding-left:1.4rem}
.prosa li+li{margin-top:.5rem}
.prosa img{border-radius:var(--radio);margin:2.5rem auto}
.prosa strong{font-weight:600;color:var(--tinta)}
.prosa a{text-decoration:underline;text-underline-offset:3px}

.prosa blockquote{
  font-family:var(--serif);font-size:1.4rem;line-height:1.5;font-style:italic;
  color:var(--granate);border-left:3px solid var(--granate);
  padding:.4rem 0 .4rem 1.6rem;margin:2.5rem 0;
}

/* Bloque destacado: aquí es donde trabaja el azul */
.destacado{
  background:var(--azul-claro);border-left:4px solid var(--azul);
  padding:1.4rem 1.6rem;border-radius:0 var(--radio) var(--radio) 0;margin:2.5rem 0;
}
.destacado .titulo{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.5rem;
}
.destacado p{font-size:.98rem;line-height:1.7}

/* ===== Formularios ===== */
.campo{margin-bottom:1.3rem}
.campo label{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.45rem;
}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.85rem 1rem;border:1px solid var(--topo);border-radius:var(--radio);
  font-family:var(--sans);font-size:.98rem;color:var(--tinta);background:var(--blanco);
  transition:border-color .2s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--azul)}
.campo textarea{resize:vertical;min-height:150px;line-height:1.7}
.pista{font-size:.78rem;color:var(--gris);margin-top:.35rem}

.aviso{padding:1rem 1.3rem;border-radius:var(--radio);margin-bottom:1.5rem;font-size:.93rem}
.aviso-ok{background:#DCEBE0;color:#2E6B4F}
.aviso-error{background:#F6E2E2;color:#9C3B3B}
.aviso-info{background:var(--azul-claro);color:#2F4156;border-left:4px solid var(--azul)}

/* ===== Pie ===== */
.pie{background:var(--granate);color:#C8D9E6;padding:4rem 0 2rem;margin-top:5rem}
.pie a{color:#C8D9E6}
.pie a:hover{color:var(--blanco)}
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.pie-marca img{height:80px;width:auto;margin-bottom:1.2rem}
.pie-marca p{font-size:.9rem;line-height:1.7;max-width:320px;color:#AFC3D3}
.pie h4{color:var(--blanco);font-size:.78rem;font-family:var(--sans);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.pie ul{list-style:none}
.pie li{margin-bottom:.6rem;font-size:.9rem}
.pie-abajo{
  border-top:1px solid rgba(255,255,255,.18);padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;color:#9FB4C6;
}

/* ===== Paginación ===== */
.paginacion{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:3.5rem}
.paginacion a,.paginacion span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--topo);border-radius:var(--radio);font-size:.9rem;color:var(--tinta);
  background:var(--blanco);transition:all .2s;
}
.paginacion a:hover{border-color:var(--granate);color:var(--granate)}
.paginacion .actual{background:var(--granate);color:var(--blanco);border-color:var(--granate)}

/* ===== Utilidades ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vacio{text-align:center;padding:4rem 1rem;color:var(--gris)}

/* ===== Responsive ===== */
@media(max-width:960px){
  .portada-grid{grid-template-columns:1fr;text-align:center;gap:2.5rem}
  .portada-acciones{justify-content:center}
  .portada-emblema{order:-1}
  .portada-emblema img{max-width:230px}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .pie-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .nav{display:none}
  .hamb{display:block}
  .cabecera-in{justify-content:space-between;min-height:76px}
}
@media(max-width:600px){
  body{font-size:16px}
  .contenedor{padding:0 1.3rem}
  .seccion{padding:3.5rem 0}
  .rejilla{grid-template-columns:1fr;gap:1.5rem}
  .pie-grid{grid-template-columns:1fr}
  .marca img{height:38px}
  .btn{width:100%}
  .portada-acciones{flex-direction:column}
}

/* ============================================================
   Componentes de las secciones
   ============================================================ */

/* --- Cabecera de sección --- */
.sec-hero{background:var(--rosa-emp);padding:3.5rem 0 3rem;text-align:center;border-bottom:1px solid var(--topo)}
.sec-hero h1{margin:.7rem 0 1rem}
.sec-hero .entradilla{max-width:660px;margin:0 auto}

/* --- Migas --- */
.migas{font-size:.8rem;color:var(--gris);margin-bottom:.6rem}
.migas a{color:var(--gris)}
.migas a:hover{color:var(--granate)}
.migas span{margin:0 .4rem;opacity:.5}

/* --- Filtros --- */
.filtros{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem}
.filtro{font-size:.78rem;font-weight:500;letter-spacing:.05em;padding:.5rem 1rem;
  border:1px solid var(--topo);border-radius:50px;background:var(--blanco);color:var(--tinta);
  cursor:pointer;transition:all .18s}
.filtro:hover{border-color:var(--granate);color:var(--granate)}
.filtro.activo{background:var(--granate);border-color:var(--granate);color:var(--blanco)}

/* --- Tarjeta de agrupación --- */
.ficha-card{background:var(--blanco);border:1px solid var(--topo);border-radius:var(--radio);
  padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;transition:box-shadow .25s,transform .25s}
.ficha-card:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.ficha-card .tipo{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.ficha-card h3{font-size:1.2rem;line-height:1.3}
.ficha-card .lugar{font-size:.83rem;color:var(--gris)}
.ficha-card p{font-size:.9rem;color:var(--gris);line-height:1.6}
.ficha-card .dato{font-size:.78rem;color:var(--gris);border-top:1px solid var(--topo);
  padding-top:.7rem;margin-top:.3rem;display:flex;gap:1.2rem;flex-wrap:wrap}
.ficha-card .dato b{color:var(--tinta);font-weight:600}

/* --- Ficha completa (agrupación / instrumento) --- */
.ficha-cab{background:var(--crema);padding:3rem 0 2.5rem;border-bottom:1px solid var(--topo)}
.ficha-grid{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}
@media(max-width:900px){.ficha-grid{grid-template-columns:1fr}}

.datos{background:var(--blanco);border:1px solid var(--topo);border-radius:var(--radio);
  padding:1.4rem;position:sticky;top:110px}
.datos h4{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-bottom:1rem}
.datos dl{display:flex;flex-direction:column;gap:.85rem}
.datos dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.datos dd{font-size:.93rem;color:var(--tinta);margin-top:.1rem}
.datos .sep{height:1px;background:var(--topo);margin:.3rem 0}

/* --- Lista de enlaces relacionados --- */
.enlaces-rel{display:flex;flex-direction:column;gap:.5rem}
.enlaces-rel a{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.7rem .9rem;border:1px solid var(--topo);border-radius:var(--radio);
  background:var(--blanco);font-size:.9rem;transition:all .18s}
.enlaces-rel a:hover{border-color:var(--granate);background:var(--rosa-emp)}
.enlaces-rel .flecha{color:var(--gris)}

/* --- Bloque de producto dentro del contenido --- */
.producto{display:flex;gap:1.2rem;align-items:center;background:var(--blanco);
  border:1px solid var(--topo);border-radius:var(--radio);padding:1.2rem;margin:2rem 0}
.producto .icono{width:52px;height:52px;border-radius:var(--radio);background:var(--rosa-emp);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--granate)}
.producto .txt{flex:1 1 auto}
.producto .etq{font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--azul)}
.producto h4{font-size:1.02rem;margin:.15rem 0 .2rem}
.producto p{font-size:.86rem;color:var(--gris);line-height:1.5}
.producto .precio{font-family:var(--serif);font-size:1.35rem;color:var(--granate);font-weight:600;white-space:nowrap}
@media(max-width:600px){.producto{flex-direction:column;align-items:flex-start}}

/* --- Aviso de afiliación --- */
.aviso-afiliado{font-size:.76rem;color:var(--gris);font-style:italic;margin-top:.5rem}

/* --- Rejilla de secciones en portada --- */
.secciones-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.secciones-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.secciones-grid{grid-template-columns:1fr}}
.seccion-card{background:var(--blanco);border:1px solid var(--topo);border-radius:var(--radio);
  padding:1.8rem 1.5rem;transition:all .25s;display:block}
.seccion-card:hover{border-color:var(--granate);box-shadow:var(--sombra);transform:translateY(-2px)}
.seccion-card .num{font-family:var(--serif);font-size:2.2rem;color:var(--rosa-emp);line-height:1;font-weight:600}
.seccion-card h3{margin:.5rem 0 .4rem;font-size:1.3rem}
.seccion-card p{font-size:.89rem;color:var(--gris);line-height:1.6}
.seccion-card .n{font-size:.76rem;color:var(--azul);margin-top:.8rem;letter-spacing:.05em}

/* --- Cifras --- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
@media(max-width:760px){.cifras{grid-template-columns:repeat(2,1fr)}}
.cifra .n{font-family:var(--serif);font-size:2.6rem;color:var(--granate);font-weight:600;line-height:1}
.cifra .l{font-size:.82rem;color:var(--gris);margin-top:.4rem;line-height:1.4}

/* --- Índice del artículo --- */
.indice-art{background:var(--blanco);border:1px solid var(--topo);border-left:3px solid var(--azul);
  border-radius:0 var(--radio) var(--radio) 0;padding:1.2rem 1.4rem;margin:2rem 0}
.indice-art h4{font-family:var(--sans);font-size:.71rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.7rem}
.indice-art ol{padding-left:1.2rem}
.indice-art li{font-size:.9rem;margin-bottom:.35rem}

/* --- Newsletter --- */
.news{background:var(--rosa-emp);padding:4rem 0;text-align:center}
.news-form{display:flex;gap:.6rem;max-width:460px;margin:1.8rem auto 0}
.news-form input{flex:1;padding:.85rem 1.2rem;border:1px solid var(--topo);border-radius:var(--radio);
  font-family:var(--sans);font-size:.95rem;background:var(--blanco)}
@media(max-width:600px){.news-form{flex-direction:column}}

/* --- Aviso de maqueta --- */
.maqueta-aviso{background:var(--azul);color:#fff;text-align:center;padding:.6rem 1rem;font-size:.8rem}
.maqueta-aviso a{color:#fff;text-decoration:underline}

/* ============================================================
   Cabecera con logotipo vertical centrado (portada)
   Al bajar se compacta sola para no comerse la pantalla.
   ============================================================ */

.cabecera-centrada{background:var(--crema);border-bottom:1px solid var(--topo);
  position:sticky;top:0;z-index:100;transition:box-shadow .25s}
.cabecera-centrada.flotando{box-shadow:var(--sombra)}

.cc-in{max-width:var(--ancho);margin:0 auto;padding:.5rem 2rem .45rem;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:1.4rem;transition:padding .3s}

.cc-marca{justify-self:center}
.cc-marca img{height:150px;width:auto;transition:height .3s}

.cc-nav ul{display:flex;list-style:none;gap:.3rem;align-items:center}
.cc-izq ul{justify-content:flex-end}
.cc-der ul{justify-content:flex-start}
.cc-nav a{font-size:.8rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta);padding:.55rem .85rem;border-radius:var(--radio);
  white-space:nowrap;transition:background .18s,color .18s}
.cc-nav a:hover{background:var(--rosa-emp);color:var(--granate)}
.cc-nav a.activo{background:var(--rosa-emp);color:var(--granate)}

/* Estado compacto: al bajar, el logo se encoge */
.cabecera-centrada.compacta .cc-in{padding:.35rem 2rem}
.cabecera-centrada.compacta .cc-marca img{height:52px}

/* Filete ornamental bajo el logo
   RETIRADO de la cabecera: pegado al logotipo no aportaba nada.
   El CSS se conserva porque el mismo recurso sí funciona como
   separador entre secciones (ver .filigrana). */
.cc-filete{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;
  gap:.7rem;margin-top:0;opacity:1;max-height:16px;overflow:hidden;transition:all .3s}
.cc-filete::before,.cc-filete::after{content:'';height:1px;width:46px;background:var(--topo)}
.cc-filete span{color:var(--granate);font-size:.85rem;line-height:1}
.cabecera-centrada.compacta .cc-filete{opacity:0;max-height:0;margin-top:0}

/* Portada sin emblema: el logotipo ya está arriba */
.portada-centrada{background:var(--crema);padding:3.2rem 0 3.6rem;
  border-bottom:1px solid var(--topo);text-align:center}
.portada-centrada h1{margin:.9rem auto 1.3rem;max-width:820px}
.portada-centrada .entradilla{max-width:640px;margin:0 auto 2.2rem}
.portada-centrada .portada-acciones{justify-content:center}

@media(max-width:1100px){
  .cc-nav{display:none}
  .cc-in{grid-template-columns:1fr auto 1fr;justify-content:stretch;padding:.45rem 1.5rem}
  .cc-marca img{height:110px}
  .cabecera-centrada .hamb{display:block;justify-self:start}
  .cc-acciones{justify-self:end}
}
@media(max-width:600px){
  .cc-marca img{height:88px}
  .cabecera-centrada.compacta .cc-marca img{height:44px}
}

/* ============================================================
   Barra de redes sociales
   ============================================================ */

.barra-redes{background:var(--granate);color:#C8D9E6}
.barra-redes-in{max-width:var(--ancho);margin:0 auto;padding:.45rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.barra-redes .lema{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}

.redes{display:flex;gap:.15rem;align-items:center;list-style:none}
.redes a{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#C8D9E6;transition:background .18s,color .18s}
.redes a:hover{background:rgba(255,255,255,.16);color:#fff}
.redes svg{width:17px;height:17px;display:block}

/* Versión para el pie, sobre fondo granate */
.pie .redes{margin-top:1.2rem}
.pie .redes a{width:36px;height:36px;border:1px solid rgba(255,255,255,.25)}
.pie .redes a:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.pie .redes svg{width:18px;height:18px}

@media(max-width:900px){
  .barra-redes .lema{display:none}
  .barra-redes-in{justify-content:center;padding:.35rem 1rem}
  .redes a{width:30px;height:30px}
}
@media(max-width:520px){
  .redes{flex-wrap:wrap;justify-content:center}
  .redes a{width:28px;height:28px}
  .redes svg{width:15px;height:15px}
}

/* ============================================================
   Actualidad · maqueta de periódico
   Apertura grande + secundarias + breves + columna "Lo último".
   Va DESPUÉS de la portada: el contenido propio se rastrea primero.
   Los enlaces salen siempre con rel="nofollow noopener".
   ============================================================ */
.diario{border-bottom:1px solid var(--topo);padding:1.8rem 0 2.6rem;background:var(--blanco)}
.diario-cab{display:flex;align-items:center;gap:1rem;border-bottom:2px solid var(--tinta);
  padding-bottom:.55rem;margin-bottom:1.6rem}
.diario-cab h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta);margin:0}
.diario-cab .fecha{margin-left:auto;font-size:.73rem;color:var(--gris);
  letter-spacing:.06em;text-transform:uppercase}

.diario-grid{display:grid;grid-template-columns:1fr 300px;gap:0 2.4rem}
.diario-col{border-right:1px solid var(--topo);padding-right:2.4rem}

/* apertura */
.dia-ap{padding-bottom:1.5rem;border-bottom:1px solid var(--topo);margin-bottom:1.5rem}
.dia-ap .kicker{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.5rem}
.dia-ap h3{font-family:var(--serif);font-size:2.15rem;font-weight:600;line-height:1.12;margin:0}
.dia-ap h3 a{color:var(--tinta)}
.dia-ap h3 a:hover{color:var(--azul)}
.dia-ap p{font-size:.95rem;color:var(--gris);line-height:1.65;margin-top:.7rem;max-width:60ch}

/* secundarias a tres columnas */
.dia-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--topo);margin-bottom:1.4rem}
.dia-sec article+article,.dia-sec article:not(:first-child){border-left:1px solid var(--topo);padding-left:1.6rem}
.dia-sec .kicker{display:block;font-size:.62rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.35rem}
.dia-sec h4{font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.22;margin:0}
.dia-sec h4 a{color:var(--tinta)}
.dia-sec h4 a:hover{color:var(--azul)}
.dia-sec p{font-size:.84rem;color:var(--gris);line-height:1.55;margin-top:.4rem}

/* breves a dos columnas */
.dia-breves{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.dia-breves article:last-child{border-left:1px solid var(--topo);padding-left:1.4rem}
.dia-breves .kicker{font-size:.62rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-right:.5rem}
.dia-breves h4{display:inline;font-family:var(--serif);font-size:1.05rem;font-weight:600;line-height:1.3}
.dia-breves h4 a{color:var(--tinta)}
.dia-breves h4 a:hover{color:var(--azul)}

/* columna lateral */
.dia-ultimo h3{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta);border-bottom:2px solid var(--tinta);
  padding-bottom:.45rem;margin-bottom:.9rem}
.dia-ultimo ul{list-style:none}
.dia-ultimo li{display:flex;gap:.7rem;padding:.62rem 0;border-bottom:1px solid var(--topo)}
.dia-ultimo li:last-child{border-bottom:none}
.dia-ultimo time{font-family:ui-monospace,monospace;font-size:.72rem;color:var(--azul);
  padding-top:.15rem;flex-shrink:0}
.dia-ultimo a{font-size:.86rem;line-height:1.42;color:var(--tinta)}
.dia-ultimo a:hover{color:var(--azul)}
.dia-mas{display:inline-block;margin-top:1rem;font-size:.72rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--azul)}
.dia-vacio{font-size:.9rem;color:var(--gris)}

@media(max-width:980px){
  .diario-grid{grid-template-columns:1fr;gap:2rem}
  .diario-col{border-right:none;padding-right:0}
  .dia-ap h3{font-size:1.8rem}
  .dia-sec{grid-template-columns:1fr;gap:1.1rem}
  .dia-sec article:not(:first-child){border-left:none;padding-left:0;
    border-top:1px solid var(--topo);padding-top:1.1rem}
  .dia-breves{grid-template-columns:1fr}
  .dia-breves article:last-child{border-left:none;padding-left:0;
    border-top:1px solid var(--topo);padding-top:1.1rem}
}

/* Familias de instrumentos */
.familias{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:860px){.familias{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.familias{grid-template-columns:1fr}}
.familia{border:1px solid var(--topo);border-radius:var(--radio);padding:1.5rem;
  background:var(--blanco);transition:border-color .25s,transform .25s;display:block}
.familia:hover{border-color:var(--azul);transform:translateY(-2px)}
.familia h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:.4rem;color:var(--tinta)}
.familia p{font-size:.9rem;color:var(--gris);line-height:1.6}
.familia .lista{font-size:.8rem;color:var(--azul);margin-top:.7rem;display:block}

/* ============================================================
   Ajuste de contraste sobre fondo arena
   El teal (#567C8D) y el gris (#6B7785) pasan sobre blanco, pero
   sobre arena se quedan en 3,95 y 4,00: por debajo del mínimo.
   Sobre ese fondo se oscurecen lo justo para llegar a 4,5.
   ============================================================ */
.seccion-crema .antetitulo,
.seccion-crema a:not(.btn),
.seccion-rosa  .antetitulo,
.seccion-rosa  a:not(.btn){color:#4E7183}

.seccion-crema p.entradilla,
.seccion-crema .meta,
.seccion-crema .familia p,
.seccion-rosa  p.entradilla,
.seccion-rosa  .meta{color:#646F7C}

/* ============================================================
   Ajuste de contraste sobre fondo arena
   El teal (#567C8D) y el gris (#6B7785) pasan sobre blanco, pero
   sobre arena se quedan en 3,95 y 4,00: por debajo del mínimo.
   Sobre ese fondo se oscurecen lo justo para llegar a 4,5.
   ============================================================ */
.seccion-crema .antetitulo,
.seccion-crema a:not(.btn),
.seccion-rosa  .antetitulo,
.seccion-rosa  a:not(.btn){color:#4E7183}

.seccion-crema p.entradilla,
.seccion-crema .meta,
.seccion-crema .familia p,
.seccion-rosa  p.entradilla,
.seccion-rosa  .meta{color:#646F7C}

/* ============================================================
   Imágenes del banner de actualidad
   Dos estados: foto propia o de licencia libre (.dia-foto), y
   placa tipográfica cuando no hay foto (.dia-placa).
   NUNCA se usan fotos de los medios de origen: son de agencia y
   el enlace a la noticia no da derecho a reproducirlas.
   ============================================================ */
.dia-media{position:relative;overflow:hidden;border-radius:var(--radio);
  background:var(--crema);margin-bottom:.9rem}
.dia-media img{width:100%;height:100%;object-fit:cover;display:block}
.dia-ap .dia-media{aspect-ratio:16/9}
.dia-sec .dia-media{aspect-ratio:4/3}
.dia-credito{position:absolute;right:.4rem;bottom:.4rem;background:rgba(47,65,86,.82);
  color:#fff;font-size:.6rem;letter-spacing:.04em;padding:.15rem .45rem;border-radius:2px}

/* placa tipográfica: el sustituto honesto de la foto */
.dia-placa{display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--topo);background:var(--crema)}
.dia-placa span{font-family:var(--serif);font-size:1.5rem;font-style:italic;
  color:var(--azul);line-height:1.2;padding:1rem}
.dia-sec .dia-placa span{font-size:1.05rem}
.dia-placa.t2{background:var(--azul-claro)}
.dia-placa.t2 span{color:var(--tinta)}
.dia-placa.t3{background:var(--granate);border-color:var(--granate)}
.dia-placa.t3 span{color:var(--azul-claro)}

/* ============================================================
   Efemérides
   ============================================================ */
.ef-lista{display:grid;gap:1.1rem}
.ef-item{display:grid;grid-template-columns:110px 1fr;gap:1.4rem;
  border:1px solid var(--topo);border-radius:var(--radio);padding:1.3rem 1.5rem;background:var(--blanco)}
.ef-marca{border-right:1px solid var(--topo);padding-right:1.2rem;text-align:right}
.ef-anio{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:600;
  color:var(--granate);line-height:1}
.ef-tipo{display:block;font-size:.6rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-top:.35rem}
.ef-fecha{display:block;font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.3rem}
.ef-cuerpo h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;
  line-height:1.25;margin-bottom:.45rem}
.ef-cuerpo p{font-size:.93rem;color:var(--gris);line-height:1.65}
.ef-hace{display:inline-block;margin-top:.6rem;font-size:.72rem;color:var(--azul)}
.ef-nada{font-size:.95rem;color:var(--gris);border:1px dashed var(--topo);
  border-radius:var(--radio);padding:1.6rem;text-align:center}
@media(max-width:620px){
  .ef-item{grid-template-columns:1fr;gap:.7rem}
  .ef-marca{border-right:none;border-bottom:1px solid var(--topo);
    padding-right:0;padding-bottom:.6rem;text-align:left;
    display:flex;align-items:baseline;gap:.8rem}
  .ef-tipo{margin-top:0}
}

/* ============================================================
   Buscador de conciertos
   ============================================================ */
.cn-filtros{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr auto;gap:.8rem;
  align-items:end;background:var(--crema);border:1px solid var(--topo);
  border-radius:var(--radio);padding:1.2rem 1.4rem;margin-bottom:1.8rem}
.cn-campo label{display:block;font-size:.64rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.35rem}
.cn-campo select,.cn-campo input{width:100%;font-family:var(--sans);font-size:.88rem;
  color:var(--tinta);background:var(--blanco);border:1px solid var(--topo);
  border-radius:var(--radio);padding:.55rem .7rem}
.cn-campo select:focus,.cn-campo input:focus{outline:2px solid var(--azul);outline-offset:-1px}
.cn-campo select:disabled{color:var(--gris);background:#F3F5F7}
#cn-limpiar{white-space:nowrap}
@media(max-width:900px){.cn-filtros{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cn-filtros{grid-template-columns:1fr}}

.cn-cab{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--tinta);padding-bottom:.5rem;margin-bottom:1.2rem}
.cn-cab h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin:0}
.cn-cab span{font-size:.78rem;color:var(--gris)}

.cn-lista{display:grid;gap:.9rem}
.cn-item{display:grid;grid-template-columns:74px 1fr auto;gap:1.3rem;align-items:center;
  border:1px solid var(--topo);border-radius:var(--radio);padding:1.1rem 1.4rem;
  background:var(--blanco);transition:border-color .2s}
.cn-item:hover{border-color:var(--azul)}
.cn-item-foto{grid-template-columns:74px 56px 1fr auto}
.cn-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 25%;border:1px solid var(--topo);background:var(--crema);display:block}
.cn-fecha{text-align:center;border-right:1px solid var(--topo);padding-right:1rem}
.cn-dia{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:600;
  color:var(--granate);line-height:1}
.cn-mes{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--azul)}
.cn-sem{display:block;font-size:.66rem;color:var(--gris);margin-top:.1rem}
.cn-cuerpo h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;
  line-height:1.25;margin:.45rem 0 .2rem}
.cn-grupo{font-size:.88rem;color:var(--tinta)}
.cn-sitio{font-size:.83rem;color:var(--gris);margin-top:.15rem}
.cn-extra{text-align:right}
.cn-hora{display:block;font-family:ui-monospace,monospace;font-size:.92rem;color:var(--tinta)}
.cn-precio{display:block;font-size:.78rem;color:var(--gris);margin-top:.25rem}
.cn-vacio{font-size:.95rem;color:var(--gris);border:1px dashed var(--topo);
  border-radius:var(--radio);padding:2rem;text-align:center}
@media(max-width:700px){
  .cn-item{grid-template-columns:64px 1fr;gap:1rem}
  .cn-extra{grid-column:2;text-align:left;display:flex;gap:1rem;align-items:baseline}
  .cn-precio{margin-top:0}
}
@media(max-width:700px){.cn-item-foto .cn-foto{display:none}}
.ef-aviso{font-size:.88rem;color:var(--gris);margin-bottom:1rem;text-align:center}


/* ============================================================
Preguntas frecuentes (fichas de instrumento)
============================================================ */
.faq{margin-top:3rem}
.faq h3{margin-bottom:1.1rem}
.faq details{border:1px solid var(--topo);border-radius:var(--radio);padding:1rem 1.3rem;margin-bottom:.7rem;background:var(--blanco)}
.faq summary{font-family:var(--serif);font-weight:600;color:var(--granate);cursor:pointer;font-size:1.05rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--azul);font-size:1.2rem}
.faq details[open] summary::after{content:'\2013'}
.faq details p{margin-top:.7rem;font-size:.93rem;color:var(--gris);line-height:1.65}

/* ============================================================
Compra rápida (cabecera de ficha de instrumento)
============================================================ */
.ficha-cab-grid{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}
@media(max-width:900px){.ficha-cab-grid{grid-template-columns:1fr}}

.compra-rapida{background:var(--blanco);border:1px solid var(--topo);border-radius:var(--radio);padding:1.3rem}
.compra-rapida .btn{margin-bottom:1.1rem}
.compra-rapida-opciones{display:flex;flex-direction:column;gap:.8rem}
.compra-rapida .ficha-card{padding:1rem 1.1rem;gap:.3rem}
.compra-rapida .ficha-card h3{font-size:1rem}
.compra-rapida .ficha-card p{font-size:.83rem}
.compra-mas{display:block;text-align:center;margin-top:1.1rem;font-size:.74rem;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.compra-mas:hover{color:var(--granate)}
@media(max-width:900px){.compra-rapida{margin-top:1.5rem}}

/* ============================================================
Compra rapida: foto de producto real dentro de la ficha
============================================================ */
.compra-rapida .ficha-card-prod{padding-top:.9rem}
.compra-rapida .ficha-card-prod img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--blanco);border:1px solid var(--topo);border-radius:calc(var(--radio) - 4px);margin-bottom:.6rem}
.compra-rapida .ficha-card-prod .precio-prod{font-weight:700;color:var(--granate)}
.tienda-cuerpo{padding:3rem 0 4rem;display:flex;flex-direction:column;gap:3.5rem}
.tienda-seccion h2{font-size:1.6rem;margin:.4rem 0 .8rem}
.tienda-lead{color:#4a4438;max-width:640px;margin:0 0 1.5rem;line-height:1.6}
.ficha-grid-tienda{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.ficha-card-prod img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--blanco);border:1px solid var(--topo);border-radius:calc(var(--radio) - 4px);margin-bottom:.6rem}
.ficha-card-prod .precio-prod{font-weight:700;color:var(--granate)}
.ficha-card-prod .desc-prod{font-size:.85rem;color:var(--gris);line-height:1.4;margin:.3rem 0}
.complementos-lead{color:#4a4438;max-width:640px;margin:.4rem 0 1.4rem;line-height:1.6}


#pie-newsletter .nl-form{max-width:540px;margin:1.2rem auto 0}
#pie-newsletter .nl-fila{display:flex;gap:.6rem;flex-wrap:wrap}
#pie-newsletter input[type=email]{flex:1 1 220px;padding:.65rem .9rem;border:1px solid var(--topo);border-radius:6px;font:inherit}
#pie-newsletter .nl-consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:#4a4438;text-align:left;max-width:460px;margin:.8rem auto 0}
#pie-newsletter .nl-msg{margin:.6rem 0 0;font-size:.85rem;color:var(--granate);min-height:1.2em}
#pie-newsletter form.enviando button{opacity:.6;pointer-events:none}

.cn-aviso-verificar{background:var(--crema);border-left:3px solid var(--granate);padding:.9rem 1.2rem;border-radius:var(--radio);margin-bottom:1.5rem;font-size:.93rem;line-height:1.5;color:var(--tinta)}


/* Bloque "un día como hoy" (efemérides) en la portada: dos tarjetas lado a lado, también en móvil */
.ef-hoy{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.ef-hoy .ef-aviso{grid-column:1/-1}
@media(max-width:620px){
  .ef-hoy{gap:.6rem}
  .ef-hoy .ef-item{padding:.9rem .8rem}
  .ef-hoy .ef-anio{font-size:1.25rem}
  .ef-hoy .ef-tipo{font-size:.55rem}
  .ef-hoy .ef-fecha{font-size:.6rem}
  .ef-hoy .ef-cuerpo h3{font-size:.95rem;line-height:1.25;margin-bottom:.3rem}
  .ef-hoy .ef-cuerpo p{font-size:.78rem;line-height:1.4}
  .ef-hoy .ef-hace{display:none}
}


/* Efemérides · fotos en las tarjetas (añadido 2026-09-04) */
.ef-foto{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin:0 0 .6rem auto;border:1px solid var(--topo);background:var(--crema)}
.ef-hoy .ef-foto{width:52px;height:52px}
@media(max-width:620px){
  .ef-marca{align-items:center}
  .ef-foto{width:44px;height:44px;margin:0}
  .ef-hoy .ef-foto{width:34px;height:34px}
}

.pie-social{display:flex;gap:.6rem;margin-top:1rem}
.pie-social-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--crema);color:var(--granate);flex:none;transition:background .2s,color .2s,transform .2s}
.pie-social-icon:hover{background:var(--blanco);transform:translateY(-2px)}

.hc-bloques{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:900px;margin:0 auto}
@media(max-width:700px){.hc-bloques{grid-template-columns:1fr}}
.hc-icono{width:56px;height:56px;border-radius:50%;background:var(--topo);display:flex;align-items:center;justify-content:center;color:var(--granate);margin-bottom:1rem}

.rm-social{background:var(--topo)}
.rm-social-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;max-width:1100px;margin:2.2rem auto 0;align-items:start}
.rm-social-col{background:var(--blanco);border-radius:var(--radio);padding:1.5rem;box-shadow:0 2px 10px rgba(47,65,86,.08)}
.rm-social-col h3{font-family:'Cormorant Garamond',serif;color:var(--granate);font-size:1.4rem;margin:0 0 1rem;text-align:center}
.rm-social-fb .fb-page,.rm-social-fb iframe,.rm-social-fb span{max-width:100%!important}
.rm-ig-callout{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:1.4rem 0}
.rm-ig-icon{width:64px;height:64px;border-radius:50%;background:var(--topo);display:flex;align-items:center;justify-content:center;color:var(--granate)}
.rm-ig-bio{margin:0;color:var(--gris);font-size:.95rem;max-width:340px}
.rm-ig-follow-btn{display:inline-block;background:var(--granate);color:var(--crema);font-weight:700;padding:.7rem 1.5rem;border-radius:30px;text-decoration:none;transition:transform .2s}
.rm-ig-follow-btn:hover{transform:scale(1.05)}
@media(max-width:820px){.rm-social-grid{grid-template-columns:1fr}}
@media(max-width:480px){.rm-ig-grid{grid-template-columns:1fr}}