/* ==========================================================================
   0. RESET BASE — debe ir primero
   Las páginas internas no cargan la hoja de Astro (BaseLayout.css), que es la
   que traía este reset. Sin él, .container suma su padding a su ancho del
   100% y en celular la página queda 40px más ancha que la pantalla: el texto
   y el menú se salen por la derecha. Ya pasó; por eso vive acá y no depende
   de ninguna otra hoja.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#192128}
img,picture,video,iframe{max-width:100%}

/* ==========================================================================
   sebastianhenriquez.com.ar — prototipo de home
   Dirección de arte: las fotos son el fondo. Nunca un overlay parejo:
   el degradado ("scrim") es siempre direccional y vale 0 sobre la cara.

   Se apoya en /_astro/BaseLayout.css solo para la tipografía base y el
   contenedor. Todo el color y la escala tipográfica se definen acá.

   Índice
     1. Tokens
     2. Base y contenedor
     3. Tipografía
     4. Botones
     5. Aviso de prototipo
     6. Cabecera
     7. Hero con foto
     8. Franja de credenciales + escuchar
     9. Bloques limpios (crema / oscuro)
    10. Bloques con foto a sangre
    11. Piezas de Formación (tarjetas que la foto llena entera)
    12. Sesionista y producción
    13. Proyectos
    14. Quién soy + contacto
    15. Pie
    16. Compatibilidad con las subpáginas (curso y libro)
    17. Celular
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* El oscuro de marca. Todos los scrims salen de este rgb. */
  --oscuro:#192128;
  --oscuro-rgb:25,33,40;
  --oscuro-mas:#131A20;        /* franjas y pie: un escalón más abajo */

  --crema:#F4F1EA;             /* la sección limpia cálida. No es gris. */
  --amarillo:#FFD500;          /* solo sobre oscuro */
  --amarillo-tierra:#766200;   /* el mismo rol, pero legible sobre crema */
  --rojo:#B3261E;              /* botón primario: uno por pantalla */
  --rojo-oscuro:#8E1E18;
  --acento:#B3261E;            /* alias: lo usan los estilos de las subpáginas */
  --acento-oscuro:#8E1E18;
  --azul:#444F6C;              /* links, etiquetas y bordes sobre crema */
  --borde:#DDD9CF;             /* borde sobre crema */
  --borde-oscuro:rgba(255,255,255,.14);

  --texto-claro:rgba(255,255,255,.80);
  --texto-claro-fuerte:rgba(255,255,255,.92);

  --radio:2px;                 /* casi cero: nada de cajas redondeadas */
  --ancho:1200px;
}

/* ---------- 2. BASE Y CONTENEDOR ---------------------------------------- */
body{
  background:var(--oscuro);
  color:var(--oscuro);
  font-family:"Roboto",system-ui,sans-serif;
  font-size:16px;
}

.container{
  width:100%;max-width:var(--ancho);
  margin-inline:auto;
  padding-left:40px;padding-right:40px;   /* gutter de escritorio */
}

img{max-width:100%;display:block}

/* ---------- 3. TIPOGRAFÍA ------------------------------------------------
   Escala medida, no inventada. Sin text-shadow: si un texto no se lee,
   se sube el scrim, no se le pone sombra. Única excepción: el H1 del hero. */

/* Antetítulo / kicker */
.antetitulo{
  font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:12px;line-height:1.3;letter-spacing:.20em;
  color:var(--amarillo);margin:0 0 14px;
}
.antetitulo--hero{font-size:13px;line-height:1.2;letter-spacing:.18em;margin:16px 0 0}
.antetitulo--crema{color:var(--amarillo-tierra)}  /* el #FFD500 sobre crema es ilegible */

/* Títulos */
.titulo-hero{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:clamp(40px,5.2vw,68px);line-height:1.06;letter-spacing:-.015em;
  color:#fff;margin:0;text-wrap:balance;
  text-shadow:0 1px 24px rgba(0,0,0,.35);
}
.titulo-seccion{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em;
  color:var(--oscuro);margin:0 0 18px;text-wrap:balance;
}
.titulo-seccion--claro{color:#fff}

.subtitulo{
  font-family:"Roboto Slab",Georgia,serif;font-weight:600;
  font-size:22px;line-height:1.25;color:#fff;margin:0 0 10px;
}
.subtitulo--oscuro{color:var(--oscuro)}

/* Cuerpo */
.bajada-hero{
  font-size:19px;line-height:1.55;color:rgba(255,255,255,.82);
  max-width:52ch;margin:18px 0 30px;
}
.bajada-seccion{
  font-size:19px;line-height:1.55;color:#5A5F5E;
  max-width:60ch;margin:0 0 40px;
}
.bajada-seccion--claro{color:var(--texto-claro)}

.texto{font-size:17px;line-height:1.65;max-width:66ch;margin:0 0 16px;color:#3D3F3D}
.texto--claro{color:var(--texto-claro)}
.texto--claro strong{color:#fff;font-weight:700}

/* Metadatos: precios, duraciones, créditos. Nunca una etiqueta de color. */
.meta{
  font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:13px;letter-spacing:.06em;line-height:1.5;
  opacity:.70;margin:0 0 14px;
}
.meta--claro{color:#fff}

/* Link de texto sobre crema */
.link{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--oscuro)}
.link--claro{color:var(--amarillo);text-decoration:none;border-bottom:1px solid rgba(255,213,0,.4)}
.link--claro:hover{border-bottom-color:var(--amarillo)}

/* ---------- 4. BOTONES --------------------------------------------------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Roboto",sans-serif;font-weight:500;font-size:15px;letter-spacing:.04em;
  padding:14px 28px;border-radius:var(--radio);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
/* Primario: uno solo por pantalla. */
.boton--principal{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.boton--principal:hover{background:var(--rojo-oscuro);border-color:var(--rojo-oscuro)}

/* Secundario sobre oscuro o sobre foto */
.boton--fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.boton--fantasma:hover{background:rgba(255,255,255,.10);border-color:#fff}

/* Secundario sobre crema */
.boton--linea{background:transparent;color:var(--oscuro);border-color:rgba(var(--oscuro-rgb),.25)}
.boton--linea:hover{background:rgba(var(--oscuro-rgb),.06);border-color:rgba(var(--oscuro-rgb),.5)}

/* Oscuro sólido (segunda opción sobre crema) */
.boton--oscuro{background:var(--oscuro);color:#fff;border-color:var(--oscuro)}
.boton--oscuro:hover{background:#2A343C;border-color:#2A343C}

.cta-fila{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 5. AVISO DE PROTOTIPO --------------------------------------- */
.aviso{
  background:var(--rojo);color:#fff;text-align:center;
  padding:.6rem 1rem;font-size:13px;font-weight:500;letter-spacing:.02em;
  position:relative;z-index:60;
}
.aviso a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ---------- 6. CABECERA -------------------------------------------------
   En la home flota sobre el hero: el scrim superior del hero está calculado
   justamente para que el menú se lea sin barra de fondo. */
.cabecera-hero{position:relative}

.header-default{background:var(--oscuro-mas);border-bottom:1px solid rgba(255,255,255,.07)}
.header-default .navbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:64px;flex-wrap:wrap;
}
.header-default .navbar-brand{flex:none;display:flex;align-items:center}
.header-default .navbar-logo{width:158px;height:auto}
.header-default .navbar-nav{
  display:block;position:static;background:none;width:auto;height:auto;
  padding:0;transform:none;visibility:visible;opacity:1;
}
.header-default .nav-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.header-default .nav-item{margin:0}
.header-default .nav-link{
  display:block;padding:8px 14px;color:rgba(255,255,255,.78);text-decoration:none;
  font-size:14px;letter-spacing:.02em;border-radius:var(--radio);
  transition:color .25s ease,background .25s ease;
}
.header-default .nav-link:hover{color:#fff;background:rgba(255,255,255,.10)}

/* variante flotante (solo la home, solo escritorio) */
@media (min-width:761px){
  .header-default--flotante{
    position:absolute;top:0;left:0;right:0;z-index:30;
    background:transparent;border-bottom:0;
  }
}

/* ---------- 7. HERO CON FOTO --------------------------------------------
   01-Portada-ok. Sin filtro y sin blanco y negro: el calor de esa foto es
   el activo principal de la página. 88vh y no 100vh, para que se vea que
   la página sigue. */
.hero-foto{
  position:relative;overflow:hidden;
  height:88vh;min-height:620px;max-height:860px;
  display:flex;align-items:center;
  background:var(--oscuro);
}
.hero-foto__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 40%;
  z-index:0;
}
/* zoom lentísimo, casi imperceptible */
@media (prefers-reduced-motion:no-preference){
  .hero-foto__img{animation:respirar 20s ease-out forwards}
}
@keyframes respirar{from{transform:scale(1)}to{transform:scale(1.06)}}

/* Capa 1: scrim direccional. Vale 0 sobre la cara (a partir del 78%). */
.hero-foto__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(var(--oscuro-rgb),.92) 0%,
      rgba(var(--oscuro-rgb),.85) 34%,
      rgba(var(--oscuro-rgb),.35) 55%,
      rgba(var(--oscuro-rgb),0)   78%);
}
/* Capa 2: cierra arriba (para el menú flotante) y abajo (empalme con la franja) */
.hero-foto__scrim::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(var(--oscuro-rgb),.55) 0%,
      rgba(var(--oscuro-rgb),0)   22%,
      rgba(var(--oscuro-rgb),0)   62%,
      rgba(var(--oscuro-rgb),.78) 100%);
}
.hero-foto__contenido{position:relative;z-index:2;width:100%;padding-top:64px}
.hero-foto__texto{max-width:560px}

/* ---------- 8. FRANJA DE CREDENCIALES + ESCUCHAR ------------------------ */
.franja{background:var(--oscuro-mas);color:#fff}

.franja__credenciales{
  display:block;min-height:64px;padding:22px 0;margin:0;
  font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  color:rgba(255,255,255,.60);line-height:1.9;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.franja__credenciales .sep{color:var(--amarillo);opacity:.6;margin:0 .6em}

.franja__escuchar{
  display:grid;grid-template-columns:minmax(200px,300px) 1fr;
  gap:32px;align-items:center;padding:24px 0 28px;
}
.franja__escuchar h2{
  font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:12px;letter-spacing:.20em;color:var(--amarillo);margin:0 0 8px;
}
.franja__escuchar p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.65);margin:0}
.franja__escuchar iframe{width:100%;height:152px;border:0;border-radius:var(--radio);display:block}

/* ---------- 9. BLOQUES LIMPIOS ------------------------------------------
   Nunca dos secciones con foto pegadas. Y las limpias no son grises:
   una es crema cálido, la otra el oscuro de marca. */
.bloque{padding:96px 0}
.bloque--crema{background:var(--crema);color:#3D3F3D}
.bloque--oscuro{background:var(--oscuro);color:var(--texto-claro)}

/* ---------- 10. BLOQUES CON FOTO A SANGRE ------------------------------- */
.bloque-foto{position:relative;overflow:hidden;background:var(--oscuro);color:#fff}
.bloque-foto__contenido{position:relative;z-index:2;width:100%}
/* El texto sobre foto se alinea al MISMO contenedor de 1200px. Nunca centrado. */
.columna-texto{max-width:620px}

/* ---------- 11. PIEZAS DE FORMACIÓN -------------------------------------
   Tres piezas desiguales: el curso pago toma 7 de 12 columnas, el gratuito
   y el libro toman 5 y van apilados. La asimetría le saca el olor a góndola.
   La foto llena la tarjeta entera y el texto va encima: nada de "imagen
   arriba, caja blanca abajo". */
.piezas{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:stretch}
.piezas__columna{display:grid;grid-template-rows:1fr auto;gap:24px}

.pieza{
  position:relative;overflow:hidden;border-radius:var(--radio);
  background:var(--oscuro);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}
.pieza__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .4s ease-out;
}
.pieza__grad{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .4s ease-out}
.pieza__texto{position:relative;z-index:2;padding:28px}

/* hover: la foto escala, el gradiente sube. La tarjeta NO se levanta. */
.pieza:hover .pieza__foto{transform:scale(1.03)}
.pieza:hover .pieza__grad{transform:translateY(-6%);height:106%}
@media (prefers-reduced-motion:reduce){
  .pieza:hover .pieza__foto,.pieza:hover .pieza__grad{transform:none;height:100%}
}

/* Pieza grande: 3:2 largo, degradado de abajo hacia arriba */
.pieza--grande{min-height:520px}
/* La tarjeta es mucho mas alta que la proporcion de la foto, asi que la foto
   se recorta de costado. Se corre a la derecha para que quede el diapason y
   la mano, que es lo que la foto tiene para dar. */
.pieza--grande .pieza__foto{object-position:88% 50%}
.pieza--grande .pieza__grad{
  background:linear-gradient(0deg,
    rgba(var(--oscuro-rgb),.96) 0%,
    rgba(var(--oscuro-rgb),.55) 42%,
    rgba(var(--oscuro-rgb),0)   78%);
}
.pieza--grande .pieza__texto{padding:32px}

/* Piezas anchas: el degradado entra de costado para no tapar la cara,
   que en esas fotos está a la derecha. */
.pieza--ancha{min-height:250px}
.pieza--ancha .pieza__grad{
  background:linear-gradient(96deg,
    rgba(var(--oscuro-rgb),.97) 0%,
    rgba(var(--oscuro-rgb),.92) 34%,
    rgba(var(--oscuro-rgb),.50) 56%,
    rgba(var(--oscuro-rgb),.06) 82%,
    rgba(var(--oscuro-rgb),0)   96%);
}
.pieza--ancha .pieza__texto{max-width:74%}
.pieza--gratis .pieza__foto{object-position:62% 18%}

.pieza__titulo{
  font-family:"Roboto Slab",Georgia,serif;font-weight:600;
  font-size:22px;line-height:1.25;color:#fff;margin:0 0 10px;
}
.pieza--grande .pieza__titulo{font-size:28px}
.pieza__desc{font-size:16px;line-height:1.6;color:rgba(255,255,255,.80);margin:0 0 12px;max-width:56ch}
.pieza__lista{list-style:none;margin:0 0 14px;padding:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.80)}
.pieza__lista li{padding-left:18px;position:relative;margin-bottom:5px}
.pieza__lista li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--amarillo)}
.pieza__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* La única insignia permitida: texto sobre el degradado, sin píldora. */
.insignia{
  display:block;font-family:"Roboto",sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amarillo);margin:0 0 12px;
}

/* Pieza del libro: la tapa a sangre a la izquierda, sin margen ni sombra. */
.pieza--libro{display:grid;grid-template-columns:118px 1fr;min-height:0;align-items:stretch}
.pieza--libro .insignia{font-size:11px;letter-spacing:.13em;line-height:1.45;margin-bottom:10px}
.pieza--libro .pieza__titulo{font-size:21px}
.pieza--libro .pieza__tapa{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.pieza--libro .pieza__texto{padding:24px;display:flex;flex-direction:column;justify-content:center}

/* Nota al pie de la sección: los datos y las reseñas del libro. */
.nota-libro{
  margin-top:36px;padding-top:28px;border-top:1px solid var(--borde);
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start;
}
.nota-libro p{margin:0 0 10px;font-size:16px;line-height:1.65;color:#5A5F5E}
.nota-libro strong{color:var(--oscuro);font-weight:700}
.nota-libro__datos{font-size:15px !important}

/* ---------- 12. SESIONISTA Y PRODUCCIÓN ---------------------------------
   04-fondo-testimonios: pared verde oliva lisa a la izquierda, la cara
   entre el 55% y el 80%. El scrim entra de la izquierda y muere antes. */
.bloque-foto--sesion{
  min-height:64vh;padding:96px 0;
  background-image:
    linear-gradient(92deg,
      rgba(var(--oscuro-rgb),.90) 0%,
      rgba(var(--oscuro-rgb),.90) 30%,
      rgba(var(--oscuro-rgb),.55) 52%,
      rgba(var(--oscuro-rgb),0)   80%),
    url("/sitio/fotos/pared-verde.webp");
  background-size:cover;background-position:68% 45%;background-repeat:no-repeat;
}
/* El parallax solo donde tiene sentido y no molesta. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .bloque-foto--sesion{background-attachment:fixed}
}

.numeros{display:flex;gap:48px;flex-wrap:wrap;margin:0 0 26px}
.numero strong{
  display:block;font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:46px;line-height:1;color:var(--amarillo);letter-spacing:-.02em;
}
.numero span{
  display:block;margin-top:6px;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.70);
}

.creditos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.credito{
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radio);
  padding:7px 13px;font-size:14px;color:rgba(255,255,255,.88);
}

/* La producción cuelga de la misma columna, con una línea que la separa. */
.produccion{margin-top:44px;padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}
.produccion p{font-size:17px;line-height:1.6;color:var(--texto-claro);margin:0 0 14px;max-width:60ch}
.produccion p strong{color:#fff}

/* ---------- 13. PROYECTOS ----------------------------------------------- */
.proyectos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
/* Sin cajas: dos columnas editoriales separadas por una línea. Las cajas con
   borde y sombra son justo lo que se rechazó del prototipo anterior. */
.panel{
  border-top:1px solid rgba(255,255,255,.20);
  padding:26px 0 0;background:none;
  display:flex;flex-direction:column;align-items:flex-start;
}
.panel p{font-size:17px;line-height:1.65;color:var(--texto-claro);margin:0 0 24px;max-width:52ch}
.panel__tapa{width:200px;border-radius:var(--radio);margin:0 0 26px}

/* ---------- 14. QUIÉN SOY + CONTACTO ------------------------------------ */
.bloque-foto--bio{
  min-height:80vh;display:flex;align-items:center;padding:96px 0;
}
.bloque-foto--bio .foto-fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% 0%;z-index:0;
}
.bloque-foto--bio .scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--oscuro-rgb),.88) 0%,
    rgba(var(--oscuro-rgb),.72) 38%,
    rgba(var(--oscuro-rgb),.18) 66%,
    rgba(var(--oscuro-rgb),0)   88%);
}
/* Cierre inferior: empalma con el pie sin costura. */
.bloque-foto--bio .scrim::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(var(--oscuro-rgb),.62) 0%,
    rgba(var(--oscuro-rgb),0)   16%,
    rgba(var(--oscuro-rgb),0)   70%,
    var(--oscuro) 100%);
}

/* ---------- 15. PIE ------------------------------------------------------ */
.site-footer{background:var(--oscuro-mas);padding:28px 0;border-top:1px solid rgba(255,255,255,.07)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-copyright{margin:0;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.55)}

/* ==========================================================================
   16. COMPATIBILIDAD CON LAS SUBPÁGINAS (curso y libro)
   Esas páginas usan las clases del prototipo anterior. Se las mantiene, pero
   reescritas con la paleta y la escala nuevas, para que hereden el rediseño.
   ========================================================================== */
.seccion{padding:96px 0;background:#fff;color:#3D3F3D}
.seccion--clara{background:var(--crema)}
.seccion__titulo{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em;
  color:var(--oscuro);margin:0 0 18px;
}
.seccion__bajada{font-size:19px;line-height:1.55;color:#5A5F5E;max-width:60ch;margin:0 0 40px}

/* hero simple de las subpáginas (sin foto) */
.hero{background:var(--oscuro);color:#fff;padding:clamp(56px,8vw,96px) 0}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero__nombre{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;color:#fff;margin:0;
  font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.015em;
}
.hero__rol{
  font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:13px;letter-spacing:.18em;color:var(--amarillo);margin:14px 0 0;
}
.hero__bajada{font-size:19px;line-height:1.55;color:rgba(255,255,255,.82);max-width:52ch;margin:18px 0 30px}
.hero__audio{border:1px solid rgba(255,255,255,.16);border-radius:var(--radio);padding:20px;background:rgba(0,0,0,.25)}
.hero__audio h2{
  font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:12px;letter-spacing:.20em;color:var(--amarillo);margin:0 0 12px;
}
.hero__audio iframe{border-radius:var(--radio);width:100%;border:0;display:block}
.hero__audio p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.65);margin:12px 0 0}

.credenciales{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.credencial{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radio);
  font-size:13px;color:rgba(255,255,255,.85);
}
.credencial__punto{width:5px;height:5px;background:var(--amarillo);flex:none}

.etiqueta{
  display:inline-block;font-family:"Roboto",sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amarillo-tierra);background:none;padding:0;
}
.etiqueta--destacada{color:var(--amarillo-tierra)}
.hero .etiqueta,.cierre .etiqueta{color:var(--amarillo)}
.etiqueta--gratis{color:var(--amarillo-tierra)}

.precio{
  display:block;font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  color:var(--oscuro);font-size:34px;line-height:1.1;
}
.precio small{
  display:block;font-family:"Roboto",sans-serif;font-weight:500;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-top:8px;
}
.precio__tachado{display:none}   /* sin precio tachado: no es una oferta */

/* bloque del libro en las subpáginas */
.libro{
  display:grid;grid-template-columns:190px 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:var(--oscuro);color:#fff;border-radius:var(--radio);padding:clamp(24px,4vw,40px);
  margin-top:40px;
}
.libro img{width:100%;border-radius:var(--radio)}
.libro__titulo{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:clamp(24px,2.8vw,32px);margin:0 0 12px;line-height:1.15;color:#fff}
.libro__meta{
  font-family:"Roboto",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:12px;letter-spacing:.20em;color:var(--amarillo);margin:0 0 12px;
}
.libro p{font-size:17px;line-height:1.65;color:var(--texto-claro);margin:0 0 14px}
.libro p strong{color:#fff}
.libro__datos{display:flex;gap:40px;flex-wrap:wrap;margin:20px 0}
.libro__dato strong{display:block;font-family:"Roboto Slab",Georgia,serif;font-size:34px;color:var(--amarillo);line-height:1}
.libro__dato span{font-size:13px;font-weight:500;color:rgba(255,255,255,.70);text-transform:uppercase;letter-spacing:.06em}
.resenas{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.resena{border:1px solid rgba(255,255,255,.22);border-radius:var(--radio);padding:7px 13px;font-size:14px;color:rgba(255,255,255,.88)}

.tarjeta{border:1px solid var(--borde);border-radius:var(--radio);padding:32px;background:#fff;height:100%}
.tarjeta h3{font-family:"Roboto Slab",Georgia,serif;font-weight:600;color:var(--oscuro);margin:0 0 12px;font-size:22px}
.tarjeta p{font-size:17px;line-height:1.65;color:#3D3F3D;margin:0 0 22px}
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}

.cierre{background:var(--oscuro);color:#fff}
.cierre .seccion__titulo{color:#fff}
.cierre p{color:var(--texto-claro);font-size:17px;line-height:1.65;max-width:66ch}

/* ==========================================================================
   17. CELULAR
   Se usa svh y no vh: la barra de iOS hace saltar los vh.
   background-attachment:fixed está prohibido acá.
   ========================================================================== */
@media (max-width:1024px){
  .bloque-foto--sesion{background-attachment:scroll !important}
}

@media (max-width:980px){
  .piezas{grid-template-columns:1fr}
  .piezas__columna{grid-template-rows:auto auto}

  /* En una sola columna las tarjetas son anchas y bajas: el degradado lateral
     deja de servir (el texto cruza hasta la parte clara de la foto). Pasa a
     subir desde abajo, y se reserva arriba una franja de foto limpia. */
  .pieza--grande{min-height:560px;padding-top:190px}
  .pieza--grande .pieza__grad{
    background:linear-gradient(0deg,
      rgba(var(--oscuro-rgb),.97) 0%,
      rgba(var(--oscuro-rgb),.80) 42%,
      rgba(var(--oscuro-rgb),.28) 74%,
      rgba(var(--oscuro-rgb),0)   96%);
  }
  .pieza--ancha{min-height:420px;padding-top:150px}
  .pieza--ancha .pieza__texto{max-width:100%}
  .pieza--ancha .pieza__grad{
    background:linear-gradient(0deg,
      rgba(var(--oscuro-rgb),.96) 0%,
      rgba(var(--oscuro-rgb),.70) 46%,
      rgba(var(--oscuro-rgb),.14) 82%,
      rgba(var(--oscuro-rgb),0)   98%);
  }
  .pieza--libro{padding-top:0;min-height:0}
  .nota-libro{grid-template-columns:1fr;gap:12px}
  .proyectos{grid-template-columns:1fr}
  .hero__grid,.dos-columnas{grid-template-columns:1fr}
  .franja__escuchar{grid-template-columns:1fr;gap:18px}
}

@media (max-width:767px){
  .container{padding-left:24px;padding-right:24px}
  .bloque{padding:56px 0}
  .seccion{padding:56px 0}

  /* --- HERO: el scrim rota a vertical y el texto se va abajo --- */
  .hero-foto{
    height:78vh;height:78svh;min-height:520px;max-height:none;
    align-items:flex-end;
  }
  .hero-foto__img{object-position:68% 35%}
  .hero-foto__scrim{
    background:linear-gradient(180deg,
      rgba(var(--oscuro-rgb),.35) 0%,
      rgba(var(--oscuro-rgb),.15) 30%,
      rgba(var(--oscuro-rgb),.92) 72%,
      rgba(var(--oscuro-rgb),.98) 100%);
  }
  .hero-foto__scrim::after{background:none}
  .hero-foto__contenido{padding-top:0;padding-bottom:40px}
  .bajada-hero{font-size:17px;margin:14px 0 24px}
  .cta-fila .boton{width:100%}

  /* --- franja --- */
  .franja__credenciales{line-height:2.1;letter-spacing:.14em}

  /* --- tarjetas: una por fila, 4:5, texto encima de la foto --- */
  .piezas{gap:16px}
  .piezas__columna{gap:16px}
  /* Proporción de referencia 4:5, pero como mínimo: si el texto pide más,
     la tarjeta crece. Con aspect-ratio fijo el contenido quedaba cortado. */
  /* padding-top reserva una franja de foto limpia arriba: sin eso el texto
     ocupa toda la tarjeta y la foto no se ve. */
  .pieza--grande{min-height:490px;aspect-ratio:auto;padding-top:190px}
  .pieza--grande .pieza__texto{padding:24px}
  .pieza--ancha{min-height:400px;aspect-ratio:auto;padding-top:150px}
  .pieza--ancha .pieza__texto{max-width:100%;padding:24px}
  /* en vertical el degradado vuelve a subir desde abajo */
  .pieza--ancha .pieza__grad{
    background:linear-gradient(0deg,
      rgba(var(--oscuro-rgb),.96) 0%,
      rgba(var(--oscuro-rgb),.62) 48%,
      rgba(var(--oscuro-rgb),.05) 84%);
  }
  .pieza--gratis .pieza__foto{object-position:58% 25%}
  /* En vertical la foto de manos se recorta de costado: se centra sobre la
     caja y la boca de la guitarra, no sobre el saco oscuro. */
  .pieza--grande .pieza__foto{object-position:56% 42%}
  .pieza--libro{grid-template-columns:1fr;aspect-ratio:auto;min-height:0;padding-top:0}
  .pieza--libro .pieza__texto{padding:24px}
  .pieza--libro .pieza__tapa{height:210px;object-position:50% 58%}
  .pieza__acciones{flex-direction:column;align-items:stretch}

  /* --- sesionista --- */
  /* En celular la sección es mucho más alta que la proporción de la foto:
     con `cover` quedaba una tira vertical de 20% del ancho (se veía un ojo).
     La foto va entonces a ancho completo arriba, sin deformar, y el texto
     empieza debajo, sobre el oscuro. Los topes van en px, no en %, porque
     la altura de la sección depende del largo del texto. */
  .bloque-foto--sesion{
    min-height:0;padding:270px 0 64px;
    background-image:
      linear-gradient(180deg,
        rgba(var(--oscuro-rgb),.20) 0px,
        rgba(var(--oscuro-rgb),.10) 110px,
        rgba(var(--oscuro-rgb),.60) 205px,
        rgba(var(--oscuro-rgb),.95) 262px,
        var(--oscuro) 300px),
      url("/sitio/fotos/pared-verde-mob.webp");
    background-size:100% 100%, 100% auto;
    background-position:50% 0, 50% 0;
    background-repeat:no-repeat,no-repeat;
  }
  .numeros{gap:32px}
  .numero strong{font-size:38px}

  /* --- quién soy: cambia a la vertical de la misma sesión --- */
  /* La vertical de la misma sesión tiene cielo claro arriba: el texto no
     puede arrancar ahí. Se lo baja y el scrim cierra antes, en px. */
  .bloque-foto--bio{min-height:0;padding:380px 0 56px}
  .bloque-foto--bio .foto-fondo{object-position:50% 12%}
  .bloque-foto--bio .scrim{
    background:linear-gradient(180deg,
      rgba(var(--oscuro-rgb),.22) 0px,
      rgba(var(--oscuro-rgb),.06) 120px,
      rgba(var(--oscuro-rgb),.45) 265px,
      rgba(var(--oscuro-rgb),.93) 360px,
      var(--oscuro) 440px);
  }
  .bloque-foto--bio .scrim::after{background:none}

  .libro{grid-template-columns:1fr}
  .libro img{max-width:180px}
}

@media (max-width:760px){
  /* la cabecera vuelve a ser sólida: el menú ocupa dos filas y taparía la foto */
  .header-default--flotante{position:static;background:var(--oscuro-mas);border-bottom:1px solid rgba(255,255,255,.07)}
  .header-default .navbar{justify-content:center;padding-top:10px;padding-bottom:10px}
  .header-default .nav-menu{justify-content:center}
  .header-default .navbar-logo{width:136px}
  .header-default .nav-link{padding:6px 10px;font-size:13px}
}

/* Nadie tiene que sufrir el parallax ni el zoom si pidió que no se mueva. */
@media (prefers-reduced-motion:reduce){
  .hero-foto__img{animation:none}
  .bloque-foto--sesion{background-attachment:scroll !important}
}

/* ==========================================================================
   AJUSTES 2026-09-13 — encuadres, tapa del libro y marca tipográfica
   ========================================================================== */

/* --- MARCA: tipografía en vez del PNG del logo -------------------------
   El PNG venía a baja resolución, con relieve, y se veía sucio sobre el
   fondo oscuro. Reemplazado por texto: nítido en cualquier pantalla, pesa
   cero y se ajusta solo. Roboto Slab, que ya es la tipografía de títulos. */
.marca{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;line-height:1}
.marca__nombre{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:21px;letter-spacing:.005em;color:#fff;white-space:nowrap
}
.marca:hover .marca__nombre{color:var(--dorado,#FFD500)}
@media (max-width:760px){
  .marca{align-items:center}
  .marca__nombre{font-size:19px}
}

/* --- TARJETA GRANDE: la guitarra tiene que verse ------------------------
   El problema no era el object-position: la tarjeta mostraba la foto entera
   y el degradado del texto tapaba la mitad de abajo, que es justo donde
   están la caja y las dos manos. Se recortó la foto a propósito para esta
   tarjeta (curso-grande.webp): la caja, la roseta y la mano derecha quedan
   en la mitad de arriba, que es la que se ve. */
.pieza--grande .pieza__foto{object-position:50% 50%}
@media (max-width:980px){ .pieza--grande .pieza__foto{object-position:50% 40%} }

/* --- TARJETA GRATIS: la cara con aire, no contra el borde --------------- */
/* Allá en el Bajo: recorte de guitarra (sin cara). La mano sobre el diapasón
   queda a la derecha, fuera del degradado del texto. */
.pieza--gratis .pieza__foto{object-position:78% 50%}
@media (max-width:980px){ .pieza--gratis .pieza__foto{object-position:62% 50%} }

/* --- TAPA DEL LIBRO: que se vea el libro --------------------------------
   Estaba con object-fit:cover dentro de una columna de 118px: de una tapa
   de 734x1024 se veía una tira vertical. Un libro es un objeto, no una
   textura: va CONTAIN, con aire alrededor y una sombra que lo despegue. */
.pieza--libro{grid-template-columns:186px 1fr;min-height:248px}
.pieza--libro .pieza__tapa{
  width:100%;height:100%;object-fit:contain;object-position:center;
  padding:20px 8px 20px 20px;
  background:linear-gradient(135deg,#20272E 0%,#171D23 100%);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55))
}
@media (max-width:760px){
  .pieza--libro{grid-template-columns:132px 1fr;min-height:210px}
  .pieza--libro .pieza__tapa{padding:14px 6px 14px 14px}
}

/* ==========================================================================
   17. PÁGINAS INTERNAS — bio, sesionista, productor, solo, contacto
   Mismo sistema que la home: foto a sangre arriba con scrim direccional,
   y después el ritmo crema / oscuro. Cada página tiene su foto, ninguna
   se repite entre páginas.
   ========================================================================== */

/* Hero más bajo que el de la home: 62vh. La home manda con 88vh; si las
   internas midieran lo mismo, ninguna sería la principal. */
.hero-foto--interna{height:62svh;min-height:420px;max-height:620px}
.titulo-hero--interna{font-size:clamp(34px,4.4vw,56px)}
.hero-foto--interna .bajada-hero{max-width:46ch}

/* Encuadre por página: cada foto tiene el sujeto en un lugar distinto y el
   texto entra siempre por la izquierda. */
.hero-foto__img--bio{object-position:52% 22%}
.hero-foto__img--sesionista{object-position:64% 58%}
.hero-foto__img--productor{object-position:70% 38%}
.hero-foto__img--solo{object-position:68% 30%}
.hero-foto__img--contacto{object-position:62% 26%}

/* Ítem activo del menú */
.nav-link--activo{color:#fff !important}
.nav-link--activo::after{
  content:"";display:block;height:2px;margin-top:5px;
  background:var(--amarillo);border-radius:1px
}

/* --- Texto corrido de las internas --- */
.columna-texto p{font-size:17px;line-height:1.7;color:#3D4442;margin:0 0 18px;max-width:66ch}
.columna-texto p:last-child{margin-bottom:0}
.columna-texto strong{color:var(--oscuro);font-weight:700}
.columna-texto .nota{font-size:15px;color:#5E6562}
.bloque--oscuro .columna-texto p{color:var(--texto-claro)}
.bloque--oscuro .columna-texto strong{color:#fff}
/* Las secciones con foto de la home usan la misma columna: texto claro.
   Sin esto, las dos reglas de arriba pintaban de oscuro sobre la foto oscura
   (bajada, párrafos, negritas y los números de Sesionista). */
.bloque-foto .columna-texto p{color:var(--texto-claro)}
.bloque-foto .columna-texto strong{color:#fff}
.bloque-foto .columna-texto .meta--claro{color:#fff}
.columna-texto .numero strong{color:var(--amarillo)}

/* --- BIO: los hitos --- */
.hitos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:32px}
.hito strong{
  display:block;font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:30px;color:var(--amarillo);line-height:1;margin-bottom:10px
}
.hito span{display:block;font-size:15px;line-height:1.55;color:var(--texto-claro)}
.hito em{font-style:italic}

/* --- PRODUCTOR: los discos --- */
.discos{display:grid;gap:2px;margin-top:30px;background:var(--borde-oscuro)}
.disco{background:var(--oscuro);padding:30px 28px}
.disco__premio{
  font-family:"Roboto",system-ui,sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo);margin:0 0 10px
}
.disco__titulo{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:26px;color:#fff;margin:0 0 6px;line-height:1.15}
.disco__meta{font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.60);margin:0 0 14px}
.disco__texto{font-size:16px;line-height:1.65;color:var(--texto-claro);margin:0;max-width:70ch}

/* --- SOLO: tapa + tracklist --- */
.disco-grid{display:grid;grid-template-columns:330px 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.disco-grid__tapa{width:100%;height:auto;display:block;box-shadow:0 20px 48px rgba(0,0,0,.28)}
.tracklist{list-style:none;margin:30px 0 0;padding:0;counter-reset:t;max-width:820px}
.tracklist li{
  display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--borde-oscuro)
}
.tracklist li:last-child{border-bottom:0}
.tracklist__n{font-family:"Roboto Mono",monospace;font-size:13px;color:rgba(255,255,255,.60)}
.tracklist__t{font-family:"Roboto Slab",Georgia,serif;font-weight:600;font-size:18px;color:#fff}
.tracklist__a{font-size:14px;color:rgba(255,255,255,.58);text-align:right}

/* --- SESIONISTA: el reproductor --- */
.spotify{width:100%;border:0;border-radius:var(--radio);display:block;margin-top:18px}

/* --- CONTACTO --- */
.mail-grande{margin:26px 0 !important;max-width:none !important}
.mail-grande a{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;
  font-size:clamp(20px,2.6vw,30px);color:var(--rojo);text-decoration:none;
  border-bottom:2px solid rgba(179,38,30,.28);padding-bottom:3px
}
.mail-grande a:hover{border-bottom-color:var(--rojo)}

/* --- Bloque de pendiente, integrado al diseño y no como parche --- */
.pendiente{
  background:#FBF6E6;border-left:3px solid #C9A227;padding:20px 22px;
  margin:28px 0 0;max-width:70ch;color:#6B5200;font-size:15px;line-height:1.6
}
.pendiente strong{display:block;margin-bottom:5px;color:#5A4500;font-weight:700}
.bloque--oscuro .pendiente{background:rgba(255,213,0,.07);border-left-color:var(--amarillo);color:rgba(255,255,255,.78)}
.bloque--oscuro .pendiente strong{color:var(--amarillo)}

/* --- Cierre de cada interna --- */
.cierre-interna .bajada-seccion{max-width:56ch}

@media (max-width:980px){
  .hitos{grid-template-columns:repeat(2,1fr);gap:22px}
  .disco-grid{grid-template-columns:1fr}
  .disco-grid__tapa{max-width:300px}
}
@media (max-width:640px){
  .hero-foto--interna{height:52svh;min-height:340px}
  .hitos{grid-template-columns:1fr}
  .tracklist li{grid-template-columns:34px 1fr;row-gap:2px}
  .tracklist__a{grid-column:2;text-align:left;font-size:13px}
  .disco{padding:24px 20px}
}

/* ==========================================================================
   18. AUDITORÍA DE ENCUADRES — 2026-09-13
   Se midió cada foto de las 8 páginas en escritorio (1440) y celular (375),
   se simuló qué porción exacta queda visible y se revisaron una por una.
   ========================================================================== */

/* 1. HOME, HERO, CELULAR — la cara quedaba cortada contra el borde izquierdo.
   En celular la caja es vertical y solo se ve el 39% del ancho de la foto.
   La cara ocupa del 33% al 68%: centrando en 50% entra entera. */
@media (max-width:767px){
  .hero-foto__img:not([class*="hero-foto__img--"]){object-position:50% 35%}
}

/* 2. HOME, TARJETA DEL CURSO, CELULAR — la foto llenaba una tarjeta de 807px
   de alto y quedaba una tira del 34% del ancho. En celular la foto ocupa
   solo la parte de arriba (300px) y el texto sigue sobre oscuro sólido. */
@media (max-width:767px){
  .pieza--grande{background:var(--oscuro)}
  .pieza--grande .pieza__foto{height:300px;bottom:auto;object-position:50% 45%}
  .pieza--grande .pieza__grad{
    height:300px;bottom:auto;
    background:linear-gradient(180deg,rgba(var(--oscuro-rgb),0) 35%,rgba(var(--oscuro-rgb),.85) 80%,var(--oscuro) 100%)
  }
}

/* 3. BIO, HERO, ESCRITORIO — la cara caía debajo del bloque de texto.
   La foto es vertical: a sangre en una caja apaisada solo se ve el 26% del
   alto y la cara queda centrada, justo donde va el texto. Solución: la foto
   ocupa el 64% derecho del hero y el texto queda solo, sobre oscuro. Además
   se ve más foto (41% del alto en vez de 26%). */
@media (min-width:768px){
  .hero-foto--interna:has(.hero-foto__img--bio){background:var(--oscuro)}
  .hero-foto__img--bio{left:36%;width:64%;object-position:50% 20%}
  .hero-foto--interna:has(.hero-foto__img--bio) .hero-foto__scrim{
    background:linear-gradient(90deg,var(--oscuro) 34%,rgba(var(--oscuro-rgb),.55) 44%,rgba(var(--oscuro-rgb),0) 62%)
  }
}

/* 4. SESIONISTA, HERO — la cara quedaba rebanada a la altura de los anteojos.
   Se reemplazó la foto por un recorte de la guitarra y las manos, sin la
   cara: mejor excluirla entera que cortarla. En celular, un recorte más
   cuadrado centrado en la caja y la roseta. */
.hero-foto__img--sesionista{object-position:50% 55%}
@media (max-width:767px){ .hero-foto__img--sesionista{object-position:42% 50%} }

/* Detalle: en la banda de sesionista en celular se notaba el borde donde
   termina la foto. El degradado ahora llega a sólido antes de ese borde. */
@media (max-width:767px){
  .bloque-foto--sesion{
    background-image:
      linear-gradient(180deg,
        rgba(var(--oscuro-rgb),.20) 0px,
        rgba(var(--oscuro-rgb),.10) 100px,
        rgba(var(--oscuro-rgb),.70) 190px,
        var(--oscuro) 236px),
      url("/sitio/fotos/pared-verde-mob.webp");
  }
}

/* Textos largos sin espacios (una URL, un mail) no cortan línea solos y en
   celular empujan la página hacia afuera: 3px en SOLO por la URL de Spotify
   dentro del aviso, 6px en Contacto por el mail. */
.pendiente code,.mail-grande a{overflow-wrap:anywhere;word-break:break-word}
.pendiente code{font-size:.9em}

/* ==========================================================================
   19. GUÍAS DE SEO (artículos de lectura larga, fuera del menú)
   Pensadas para leer: medida de 68 caracteres, interlineado amplio y sin
   fotos a sangre que distraigan del texto.
   ========================================================================== */
.articulo{background:var(--crema)}
.articulo__cabecera{padding-top:56px;padding-bottom:8px}
.articulo__cuerpo{padding-bottom:72px}
.articulo__cabecera,.articulo__cuerpo{max-width:760px}
.migas{font-size:13px;color:#5E6562;margin:0 0 22px}
.migas a{color:#5E6562;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.15)}
.migas span{margin:0 6px;color:#5E6562}
.articulo__titulo{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;color:var(--oscuro);
  font-size:clamp(32px,4.6vw,50px);line-height:1.1;letter-spacing:-.015em;margin:10px 0 16px
}
.articulo__bajada{font-size:20px;line-height:1.55;color:#4A504E;margin:0 0 18px}
.articulo__autor{font-size:14px;color:#5E6562;margin:0 0 8px;padding-bottom:26px;border-bottom:1px solid var(--borde)}
.articulo__autor strong{color:var(--oscuro)}
.articulo__cuerpo p,.articulo__cuerpo li{font-size:18px;line-height:1.75;color:#2E3432}
.articulo__cuerpo p{margin:0 0 20px}
.articulo__lead{font-size:21px !important;line-height:1.65 !important;color:var(--oscuro) !important;margin-top:30px !important}
.articulo__cuerpo h2{
  font-family:"Roboto Slab",Georgia,serif;font-weight:700;color:var(--oscuro);
  font-size:clamp(24px,3vw,31px);line-height:1.2;margin:46px 0 16px
}
.articulo__cuerpo h3{font-family:"Roboto Slab",Georgia,serif;font-weight:600;color:var(--oscuro);font-size:21px;margin:30px 0 10px}
.articulo__cuerpo ul,.articulo__cuerpo ol{margin:0 0 22px;padding-left:22px}
.articulo__cuerpo li{margin-bottom:10px}
.articulo__cuerpo strong{color:var(--oscuro)}
.articulo__cuerpo a{color:var(--rojo)}
.datos-libro{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0;padding:24px;background:var(--oscuro)}
.datos-libro strong{display:block;font-family:"Roboto Slab",Georgia,serif;font-size:30px;color:var(--amarillo);line-height:1}
.datos-libro span{font-size:13px;color:var(--texto-claro);line-height:1.4}
.cita-guia{margin:0 0 20px;padding:4px 0 4px 22px;border-left:3px solid var(--rojo);
  font-family:"Roboto Slab",Georgia,serif;font-size:19px;line-height:1.6;color:var(--oscuro);font-style:italic}
.cita-guia cite{display:block;margin-top:8px;font-family:"Roboto",sans-serif;font-style:normal;font-weight:700;font-size:14px;color:var(--rojo)}
.nota-fuente{font-size:14px !important;color:#5E6562 !important;margin-top:36px !important;padding-top:18px;border-top:1px solid var(--borde)}
.faq-guia{margin-top:52px;padding-top:8px;border-top:1px solid var(--borde)}
.faq-guia details{border-bottom:1px solid var(--borde);padding:18px 0}
.faq-guia summary{cursor:pointer;font-family:"Roboto Slab",Georgia,serif;font-weight:600;font-size:19px;color:var(--oscuro);list-style-position:outside}
.faq-guia details p{margin:12px 0 0 !important}
@media (max-width:640px){
  .articulo__cabecera{padding-top:36px}
  .articulo__cuerpo p,.articulo__cuerpo li{font-size:17px}
  .articulo__bajada{font-size:18px}
  .datos-libro{grid-template-columns:repeat(2,1fr)}
}

/* Pie con las guías: fuera del menú principal a propósito, pero enlazadas.
   Una página a la que no apunta ningún enlace casi no rankea. */
.footer-inner--guias{display:flex;flex-direction:column;gap:18px;padding-top:30px;padding-bottom:30px}
.pie-guias{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.pie-guias__titulo{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amarillo);margin-right:6px}
.pie-guias a{font-size:14px;color:rgba(255,255,255,.66);text-decoration:none}
.pie-guias a:hover{color:#fff}

/* Redes en el pie */
.pie-redes{display:flex;flex-wrap:wrap;gap:8px 20px}
.pie-redes a{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.55);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:1px}
.pie-redes a:hover{color:#fff;border-bottom-color:var(--amarillo)}

/* ==========================================================================
   20. PROYECTOS — carrusel con desplazamiento automático (2026-09-13)
   Reemplaza las dos columnas de la sección 13. Cada proyecto: tapa cuadrada
   como la del disco SOLO, tipo, título, texto y llamado a su subpágina.
   El movimiento lo hace carrusel.js; sin JS o con "reducir movimiento" queda
   como una fila que se desplaza a mano.
   ========================================================================== */
.proyectos-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px}
.proyectos-cabecera .titulo-seccion{margin:0}
.carrusel{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:30px 0 6px;outline-offset:-2px
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel:focus-visible{outline:2px solid var(--amarillo)}
.carrusel__pista{
  list-style:none;margin:0;display:flex;gap:clamp(22px,3vw,40px);width:max-content;
  /* alinea la primera tapa con el título (mismo borde que .container) */
  padding:0 max(40px,calc((100vw - var(--ancho)) / 2 + 40px))
}
.proyecto{flex:0 0 auto;width:clamp(240px,70vw,290px);display:flex;flex-direction:column}
.proyecto__tapa{
  display:block;width:100%;aspect-ratio:1;object-fit:cover;margin:0 0 20px;
  border-radius:var(--radio);background:var(--oscuro-mas);
  box-shadow:0 18px 40px rgba(0,0,0,.35)
}
.proyecto__tipo{margin:0 0 6px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo)}
.proyecto__titulo{margin:0 0 10px;font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:22px;line-height:1.2;color:#fff}
.proyecto__texto{flex:1;margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--texto-claro)}
.proyecto__cta{align-self:flex-start}
.carrusel__pausa{
  flex:0 0 auto;padding:9px 14px;border:1px solid rgba(255,255,255,.35);border-radius:var(--radio);
  background:transparent;color:#fff;font:500 13px/1 "Roboto",system-ui,sans-serif;letter-spacing:.04em;cursor:pointer
}
.carrusel__pausa:hover,.carrusel__pausa:focus-visible{border-color:#fff}
@media (max-width:767px){
  .carrusel__pista{padding:0 24px}
}

/* ==========================================================================
   21. SUBPÁGINAS DE PROYECTOS (Quinteto Bataraz, Zabalita, Bombómetro)
   ========================================================================== */
.hero-foto__img--quinteto-bataraz{object-position:50% 40%}
.hero-foto__img--zabalita{object-position:50% 45%}
.hero-foto__img--bombometro{object-position:62% 35%}

/* Discografía: tapas chicas en fila, cada una lleva a Spotify */
.discos-mini{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,32px)}
.disco-mini a{display:block;text-decoration:none;color:#fff}
.disco-mini img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radio);box-shadow:0 14px 32px rgba(0,0,0,.35);margin-bottom:14px;transition:transform .25s}
.disco-mini a:hover img,.disco-mini a:focus-visible img{transform:translateY(-3px)}
.disco-mini__titulo{display:block;font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:18px;line-height:1.25}
.disco-mini__dato{display:block;margin-top:4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* Lista de nombre + rol (formación, reconocimientos, funciones) */
.ficha-lista{list-style:none;margin:22px 0 0;padding:0;max-width:62ch}
.ficha-lista li{padding:14px 0;border-bottom:1px solid var(--borde)}
.ficha-lista li:last-child{border-bottom:0}
.ficha-lista strong{display:block;font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:18px;color:var(--oscuro)}
.ficha-lista span{display:block;margin-top:3px;font-size:16px;line-height:1.55;color:#3D4442}
.ficha-lista--oscura{max-width:820px}
.ficha-lista--oscura li{border-bottom-color:var(--borde-oscuro)}
.ficha-lista--oscura strong{color:#fff}
.ficha-lista--oscura span{color:var(--texto-claro)}

/* Video 16:9 */
.video-16x9{position:relative;aspect-ratio:16/9;margin-top:26px;background:#000;border-radius:var(--radio);overflow:hidden;max-width:980px}
.video-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nota-video{margin:14px 0 0;max-width:80ch;font-size:14px;line-height:1.6;color:rgba(255,255,255,.66)}

@media (max-width:980px){
  .discos-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.bloque--crema .nota{font-size:15px;line-height:1.6;color:#5E6562}

/* Correcciones tras la revisión visual (2026-09-13):
   - con width/height en el HTML, la altura fija le ganaba al aspect-ratio y
     las tapas de la discografía salían estiradas;
   - el texto junto a la tapa (Solo, Bataraz, Bombómetro) no tenía tamaño propio. */
.disco-mini img,.proyecto__tapa{height:auto}
.disco-grid p{font-size:17px;line-height:1.7;margin:0 0 16px;max-width:62ch}
.disco-grid p.nota{font-size:15px}
.bloque--crema .nota a{color:var(--azul)}
.pieza--libro .pieza__desc{font-size:15px;line-height:1.55;margin-bottom:12px}
.hero-foto__img--pedro-aznar{object-position:50% 30%}
.hero-foto__img--cesar-angeleri-cuarteto{object-position:62% 40%}
.hero-foto__img--pedro-aznar{object-position:58% 45%}
@media (max-width:767px){ .hero-foto__img--pedro-aznar{object-position:66% 50%} }

/* ==========================================================================
   22. MINI PÁGINAS DE PRODUCCIÓN y botones en la home
   ========================================================================== */
.disco-ficha__premio{margin:0 0 6px !important;font-size:12px !important;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--amarillo-tierra)}
.disco-ficha__rol{margin:0 0 14px !important}
.disco-ficha__escuchar{margin:22px 0 10px !important;font-size:12px !important;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5E6562}
.disco-grid .cta-fila{flex-wrap:wrap}
.disco-grid p a{color:var(--azul)}
.produccion__item{margin:0 0 18px}
.produccion__item p{margin:0 0 8px}
.produccion__boton{
  display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.4);border-radius:var(--radio);
  font-size:13px;font-weight:500;letter-spacing:.03em;color:#fff;text-decoration:none
}
.produccion__boton:hover,.produccion__boton:focus-visible{border-color:#fff;background:rgba(255,255,255,.10)}

/* ==========================================================================
   23. MENÚ SUPERIOR — opción B, «barra de vidrio» (elegida el 2026-09-14)
   Franja translúcida a lo ancho sobre la foto, secciones en texto con
   separadores finos; al pasar el mouse y en la página activa, amarillo.
   En celular la cabecera ya es sólida (sección 9), se conservan separadores.
   ========================================================================== */
@media (min-width:761px){
  .header-default--flotante{
    background:rgba(19,26,32,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.12)
  }
}
.header-default .nav-menu{gap:0}
.header-default .nav-item+.nav-item{border-left:1px solid rgba(255,255,255,.18)}
.header-default .nav-link{
  padding:6px 20px;border:0;border-radius:0;background:none;
  color:rgba(255,255,255,.9);font-weight:500;transition:color .2s ease
}
.header-default .nav-link:hover,.header-default .nav-link:focus-visible{color:var(--amarillo);background:none}
.header-default .nav-link:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}
.nav-link--activo{color:var(--amarillo) !important;background:none !important}
.nav-link--activo::after{display:none}
@media (max-width:760px){
  .header-default .nav-link{padding:6px 12px;font-size:14px}
}

/* «Ingresar» (sin sesión): botón discreto dentro de la barra de vidrio */
.header-default .nav-item:has(.nav-link--ingresar){border-left:0;margin-left:10px}
.header-default .nav-link.nav-link--ingresar{border:1px solid rgba(255,255,255,.55);border-radius:2px;padding:5px 16px}
.header-default .nav-link.nav-link--ingresar:hover{border-color:var(--amarillo)}
@media (max-width:760px){ .header-default .nav-item:has(.nav-link--ingresar){margin-left:6px} .header-default .nav-link.nav-link--ingresar{padding:4px 12px} }