/* ==========================================================================
   MARIACHI LINAJE — Sistema visual
   Adjetivos: Ceremonioso · Cálido · Orgulloso
   Paleta derivada del logo (oro / vinotinto / negro) y de la fotografía real
   del grupo (plata de la botonadura, luz cálida, humo).
   ========================================================================== */

:root{
  color-scheme:dark;

  /* --- Color -------------------------------------------------------- */
  --noche:        #0A0A09;   /* negro cálido, sesgo marrón: el fondo de las fotos */
  --noche-alta:   #121211;   /* superficie elevada */
  --noche-borde:  #1F1E1C;
  --vinotinto:    #4A1220;   /* del escudo del logo */
  --vinotinto-dp: #1C060B;
  --oro:          #D2A24C;   /* acento único */
  --oro-luz:      #F5E3AE;
  --oro-sombra:   #8C6420;
  --plata:        #C3C6C2;   /* botonadura y bordado del uniforme */
  --plata-dp:     #6E726D;
  --cal:          #F7F6F4;   /* blanco cálido, sat 16%: no compite con el oro */
  --cal-2:       rgba(247,246,244,.62);   /* secundario · 6.2:1 */
  --cal-3:       rgba(247,246,244,.52);   /* terciario  · 4.7:1 */
  --cal-filo:    rgba(247,246,244,.12);   /* sólo filetes */

  --metal-oro:   linear-gradient(180deg,var(--oro-luz) 0%,var(--oro) 46%,var(--oro-sombra) 100%);
  --metal-oro-luz: linear-gradient(180deg,#FDF3D2 0%,#E3B664 46%,#A87B31 100%);
  --metal-plata: radial-gradient(ellipse at 34% 24%,#F4F6F3 0%,var(--plata) 42%,var(--plata-dp) 100%);

  /* --- Tipografía --------------------------------------------------- */
  --display: "Marcellus", "Trajan Pro", "Times New Roman", serif;
  --inscrip: "Cinzel", "Trajan Pro", Georgia, serif;
  --texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-hero:  clamp(2.15rem, 5.5vw, 4.9rem);
  --t-h2:    clamp(2rem, 4.6vw, 3.5rem);
  --t-h3:    clamp(1.3rem, 2.2vw, 1.7rem);
  --t-lead:  clamp(1.05rem, 1.55vw, 1.28rem);
  --t-body:  1.0rem;
  --t-small: .875rem;
  --t-micro: .69rem;

  /* --- Ritmo -------------------------------------------------------- */
  --pad-y:   clamp(5rem, 11vw, 9.5rem);
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --medida:  68ch;
  --ancho:   1180px;
  --rail:    0px;
  --nav-h:   72px;

  /* --- Forma y luz --------------------------------------------------
     El filo recto de 2px hacía que todo pareciera recortado con tijera.
     Redondeamos, y la "luz" es siempre oro sobre negro: un aro fino y un
     halo difuso muy abierto. Nunca un resplandor de neón. */
  --radio:       16px;
  --radio-chico: 10px;
  --aro-oro:     0 0 0 1px rgba(210,162,76,.20);
  --halo-oro:    0 26px 60px -30px rgba(210,162,76,.34);
  --halo-negro:  0 22px 50px -28px rgba(0,0,0,.9);
}

@media (min-width:1100px){ :root{ --rail:84px; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  -webkit-tap-highlight-color:rgba(210,162,76,.18);
  background:var(--noche);
  color:var(--cal);
  font-family:var(--texto);
  font-size:var(--t-body);
  line-height:1.65;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

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

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--oro);
  outline-offset:3px;
  border-radius:var(--radio-chico);
}

::selection{ background:var(--oro-sombra); color:var(--cal); }

.saltar{
  position:absolute; left:.75rem; top:.75rem; z-index:200;
  clip-path:inset(50%); pointer-events:none;
  background:var(--oro); color:var(--noche); padding:.7rem 1.1rem;
  font:600 var(--t-small)/1 var(--texto);
}
.saltar:focus{ clip-path:none; pointer-events:auto; }

/* ==========================================================================
   Primitivas tipográficas
   ========================================================================== */

.rotulo{                       /* eyebrow — inscripcional, del logo */
  font-family:var(--inscrip);
  font-weight:600;
  font-size:var(--t-micro);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--oro);
  margin:0 0 1.35rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.rotulo::before{               /* una concha de plata, tamaño mínimo */
  content:"";
  flex:0 0 auto;
  width:8px; height:11px;
  border-radius:50%;
  background:var(--metal-plata);
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}

.display{
  font-family:var(--display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.004em;
  margin:0;
  text-wrap:balance;
}
.display em{ font-style:normal; color:var(--oro); }

h1.display{ font-size:var(--t-hero); }
h2.display{ font-size:var(--t-h2); }

.lead{
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--cal-2);
  max-width:52ch;
  margin:1.6rem 0 0;
  text-wrap:pretty;
}

.prosa p{ max-width:var(--medida); color:var(--cal-2); text-wrap:pretty; }
.prosa p strong{ color:var(--cal); font-weight:600; }
.prosa a{ color:var(--oro); text-underline-offset:.24em; text-decoration-thickness:1px; }
.prosa a:hover{ color:var(--oro-luz); }

.filete{                        /* regla de oro, del canto del escudo */
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,var(--oro-sombra),var(--oro) 22%,transparent 92%);
}

/* ==========================================================================
   Estructura
   ========================================================================== */

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.seccion{
  position:relative;
  padding-block:var(--pad-y);
  padding-left:var(--rail);
  scroll-margin-top:var(--nav-h);
}
.seccion + .seccion{ border-top:1px solid var(--noche-borde); }

.seccion--vino{
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(74,18,32,.38) 0%, transparent 64%),
    var(--vinotinto-dp);
}

.dupla{
  display:grid;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
@media (min-width:900px){
  .dupla{ grid-template-columns:1fr 1fr; }
  .dupla--texto-dcha > :first-child{ order:2; }
}

/* ==========================================================================
   Botonadura — el elemento firma
   Los conchos de plata que bajan por la costura del pantalón del uniforme.
   Aquí son el índice de secciones y el progreso de lectura.
   ========================================================================== */

.botonadura{
  position:fixed;
  left:26px; top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:0; margin:0;
  list-style:none;
}
@media (min-width:1100px){ .botonadura{ display:flex; } }

.botonadura__item{ position:relative; }

.botonadura__enlace{
  position:relative;
  display:flex;
  align-items:center;
  padding:7px 0;
  text-decoration:none;
}

.concha{
  flex:0 0 auto;
  width:11px; height:15px;
  border-radius:50%;
  background:var(--metal-plata);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.6);
  opacity:.5;
  transition:opacity .35s ease, transform .35s ease, background .35s ease;
}
.botonadura__enlace:hover .concha{ opacity:.9; }

.botonadura__texto{
  position:absolute;
  left:calc(100% + .85rem);
  top:50%;
  transform:translate(-6px,-50%);
  pointer-events:none;
  font-family:var(--inscrip);
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cal-3);
  white-space:nowrap;
  opacity:0;
  transition:opacity .35s ease, transform .35s ease, color .35s ease;
}
.botonadura__enlace:hover .botonadura__texto{ opacity:1; transform:translate(0,-50%); }

.botonadura__item.es-activo .concha{
  opacity:1;
  transform:scale(1.16);
  background:radial-gradient(ellipse at 34% 24%,var(--oro-luz) 0%,var(--oro) 44%,var(--oro-sombra) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 7px rgba(210,162,76,.22);
}
.botonadura__item.es-activo .botonadura__texto{ opacity:1; transform:translate(0,-50%); color:var(--oro); }

/* separador horizontal: la misma botonadura, acostada (móvil y cierres) */
.botonadura-h{
  display:flex; align-items:center; justify-content:center;
  gap:6px; margin:0; padding:0;
}
.botonadura-h span{
  width:9px; height:12px; border-radius:50%;
  background:var(--metal-plata); opacity:.42;
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.botonadura-h::before,.botonadura-h::after{
  content:""; height:1px; width:clamp(28px,10vw,76px);
  background:var(--cal-filo);
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.cabecera.es-fija{
  background:rgba(10,10,9,.9);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--noche-borde);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; width:100%;
}
.marca{ display:flex; align-items:center; gap:.7rem; min-height:44px; text-decoration:none; }
.marca img{ width:40px; height:40px; }
.marca__texto{
  font-family:var(--inscrip); font-weight:600;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cal); line-height:1.15;
}
.marca__texto b{ display:block; color:var(--oro); font-weight:600; }
@media (max-width:420px){ .marca__texto{ font-size:.68rem; } }

/* Los enlaces no se parten nunca: antes se encogían y "La agrupación"
   quedaba en dos líneas dentro del propio enlace. El hueco es elástico para
   que las seis entradas quepan desde 940px. */
.menu{ display:none; gap:clamp(1rem,1.6vw,2rem); align-items:center; }
@media (min-width:940px){ .menu{ display:flex; } }
.menu a{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--inscrip); font-size:.72rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--cal-2); text-decoration:none;
  transition:color .25s ease;
}
.menu a:hover,.menu a[aria-current="page"]{ color:var(--oro); }

.hamburguesa{
  touch-action:manipulation;
  display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--noche-borde); border-radius:var(--radio-chico);
  color:var(--cal); cursor:pointer;
}
@media (min-width:940px){ .hamburguesa{ display:none; } }
.hamburguesa span{ display:block; width:18px; height:1px; background:currentColor; }
.hamburguesa span + span{ margin-top:5px; }

.panel{
  position:fixed; inset:0; z-index:90;
  overscroll-behavior:contain;
  background:var(--noche);
  display:grid; align-content:center; justify-items:center; gap:.4rem;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.panel.es-abierto{ transform:none; }
.panel a{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem,8vw,2.6rem);
  color:var(--cal); text-decoration:none; padding:.3rem 1rem;
}
.panel a:hover{ color:var(--oro); }
.panel__cerrar{
  position:absolute; top:16px; right:var(--gutter);
  width:44px; height:44px;
  background:none; border:1px solid var(--noche-borde); border-radius:var(--radio-chico);
  color:var(--cal); font-size:1.3rem; cursor:pointer; line-height:1;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.boton{
  touch-action:manipulation;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.7rem;
  font-family:var(--texto); font-size:.82rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; border-radius:var(--radio-chico);
  cursor:pointer; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.boton:active{ transform:translateY(1px); }

/* El glifo de WhatsApp hereda el color del texto del botón: oscuro sobre el
   oro, crema sobre el contorno. El verde de marca chocaría con la paleta. */
.boton__wa{ width:1.15em; height:1.15em; flex:0 0 auto; }

/* En pantallas estrechas el botón sólo dispone del ancho del contenedor y
   "Consultar disponibilidad y precio" con icono se pasaba 35px, partiéndose en
   dos renglones. Recortamos relleno y prosa del tracking —no el cuerpo de la
   letra— para devolverlo a una sola línea. */
@media (max-width:559.98px){
  .boton{ padding-inline:1rem; letter-spacing:.05em; }
}

.boton--oro{
  position:relative;
  isolation:isolate;
  background:var(--metal-oro);
  color:#150F04;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 8px 24px -12px rgba(0,0,0,.9);
}
/* Un degradado no puede transicionar hacia otro degradado, así que el brillo
   va en una capa encima que sube de opacidad: el metal parece coger la luz. */
.boton--oro::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--metal-oro-luz);
  opacity:0;
  transition:opacity .28s ease;
}

@media (hover:hover){
  .boton--oro:hover::after{ opacity:1; }
  .boton--oro:hover{
    transform:translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.55) inset,
      0 10px 26px -12px rgba(0,0,0,.9),
      0 4px 16px -6px rgba(210,162,76,.45);
  }
  .boton--linea:hover{
    transform:translateY(-1px);
    background:rgba(210,162,76,.07);
  }
}

/* Debe ganarle al hover: va después a propósito. */
.boton:active{ transform:translateY(1px); }

.boton--linea{
  background:transparent; color:var(--cal);
  border-color:rgba(247,246,244,.26);
}
.boton--linea:hover{ border-color:var(--oro); color:var(--oro); }

.boton--ancho{ width:100%; }
@media (min-width:560px){ .boton--ancho{ width:auto; } }

.acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem; }
@media (max-width:559px){ .acciones{ flex-direction:column; align-items:stretch; } }

/* WhatsApp persistente (móvil) */
.wa-flotante{
  position:fixed; z-index:70;
  left:max(var(--gutter), env(safe-area-inset-left));
  right:max(var(--gutter), env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;
  transform:translateY(140%);
  transition:transform .45s cubic-bezier(.6,0,.2,1);
}
.wa-flotante.es-visible{ transform:none; }
@media (min-width:940px){ .wa-flotante{ display:none; } }

/* ==========================================================================
   Portada
   ========================================================================== */

.portada{
  position:relative;
  min-height:clamp(600px,100svh,940px);
  display:flex; align-items:flex-end;
  padding-top:var(--nav-h);
  padding-bottom:clamp(3rem,9vw,6rem);
  padding-left:var(--rail);
  overflow:hidden;
  isolation:isolate;
}
.portada__fondo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  object-position:50% 4%;
}
.portada::after{                    /* velo cálido */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,9,.50) 0%, rgba(10,10,9,.10) 17%, rgba(10,10,9,.60) 32%, var(--noche) 45%);
}
@media (min-width:900px){
  .portada{ align-items:center; }
  .portada::after{
    background:
      linear-gradient(96deg, rgba(10,10,9,.74) 0%, rgba(10,10,9,.61) 30%, rgba(10,10,9,.31) 58%, rgba(10,10,9,.03) 86%),
      linear-gradient(180deg, rgba(10,10,9,.40), transparent 34%, rgba(10,10,9,.75));
  }
}
.portada__caja{ max-width:min(100%,760px); }
@media (min-width:900px){ .portada__caja{ max-width:min(56vw,720px); } }

.portada__ficha{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1.4rem;
  margin-top:2.6rem; padding-top:1.5rem;
  border-top:1px solid var(--cal-filo);
  font-size:var(--t-small); color:var(--cal-3);
}
/* La concha va DELANTE de cada dato, no detrás.
   Antes hacía de separador entre datos y se ocultaba en el último, pero la
   ficha se parte en dos filas incluso en escritorio (pide 687px y tiene 672),
   y el punto del último dato de cada fila quedaba colgando en el aire. Como
   viñeta de entrada funciona a cualquier ancho y con cualquier número de
   datos, sin depender de dónde caiga el salto de línea. */
.portada__ficha span{ display:flex; align-items:center; gap:.6rem; }
.portada__ficha span::before{
  content:""; flex:0 0 auto;
  width:7px; height:9px; border-radius:50%;
  background:var(--metal-plata); opacity:.5;
}

/* ==========================================================================
   Retratos
   ========================================================================== */

.retrato{ position:relative; margin:0; }
.retrato img{
  width:100%; border-radius:var(--radio);
  filter:saturate(.94) contrast(1.04);
}
.retrato::after{                    /* filo de oro, como el canto del escudo */
  content:""; position:absolute; inset:0; border-radius:var(--radio);
  box-shadow:0 0 0 1px rgba(210,162,76,.2) inset;
  pointer-events:none;
}
.retrato figcaption{
  margin-top:.9rem;
  font-family:var(--inscrip); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--cal-3);
}

/* ==========================================================================
   Video — espacios reservados
   ========================================================================== */

.videos{
  display:grid;
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2.5rem,5vw,3.75rem);
  grid-template-columns:repeat(3,1fr);
}

.video{ margin:0; }
.video__marco{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radio);
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 1px rgba(210,162,76,.18);
}
.video--vertical .video__marco{ aspect-ratio:9/16; }
.video__marco video,
.video__marco iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; object-fit:cover;
}
.video figcaption{
  margin-top:.85rem; font-size:var(--t-small); color:var(--cal-3);
}

/* ==========================================================================
   Paquetes — el orden de la noche
   ========================================================================== */

.paquetes{
  display:grid; gap:clamp(1.75rem,3vw,2.25rem);
  /* margen extra arriba: el sello de la tarjeta destacada sobresale del borde */
  margin-top:clamp(3rem,5.5vw,4.25rem);
}
@media (min-width:860px){ .paquetes{ grid-template-columns:1fr 1fr; } }

.paquete{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.9rem,3.4vw,2.75rem);
  background:
    radial-gradient(130% 85% at 50% 0%, rgba(74,18,32,.30) 0%, transparent 64%),
    rgba(18,18,17,.72);
  border:1px solid var(--noche-borde);
  border-radius:var(--radio);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),
             border-color .38s ease, box-shadow .38s ease;
}

/* Un filo de luz en el canto superior: el reflejo que deja el oro sobre una
   superficie oscura. Es lo que hace que la tarjeta parezca tener volumen. */
.paquete::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px 0 0;
  background:linear-gradient(180deg, rgba(210,162,76,.34), transparent 34%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* La tarjeta marcada va siempre encendida, sin necesidad de tocarla. */
.paquete--destacado{
  border-color:rgba(210,162,76,.42);
  box-shadow:var(--aro-oro), var(--halo-oro), var(--halo-negro);
}
.paquete--destacado::before{
  background:linear-gradient(180deg, rgba(245,227,174,.55), transparent 38%);
}

.paquete__sello{
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-50%);
  margin:0; padding:.5rem 1.15rem;
  background:var(--metal-oro); color:#150F04;
  border-radius:100px;
  font-family:var(--texto); font-size:var(--t-micro); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(210,162,76,.75);
}

/* Se enciende al pasar por encima y también cuando el foco del teclado entra
   en la tarjeta, para que quien navega sin ratón vea lo mismo. */
@media (hover:hover){
  .paquete:hover{ transform:translateY(-5px); }
}
.paquete:hover,
.paquete:focus-within{
  border-color:rgba(210,162,76,.42);
  box-shadow:var(--aro-oro), var(--halo-oro), var(--halo-negro);
}
.paquete--destacado:hover,
.paquete--destacado:focus-within{
  border-color:rgba(210,162,76,.62);
  box-shadow:0 0 0 1px rgba(210,162,76,.34),
             0 30px 70px -28px rgba(210,162,76,.5),
             var(--halo-negro);
}
@media (prefers-reduced-motion:reduce){
  .paquete{ transition:border-color .01ms, box-shadow .01ms; }
  .paquete:hover{ transform:none; }
}
.paquete__num{
  font-family:var(--inscrip); font-size:var(--t-micro);
  letter-spacing:.26em; text-transform:uppercase; color:var(--oro);
}
.paquete__nombre{
  font-family:var(--display); font-weight:400;
  font-size:var(--t-h3); margin:.5rem 0 .35rem; line-height:1.15;
}
.paquete__resumen{ font-size:var(--t-small); color:var(--cal-3); margin:0 0 1.75rem; }

.paquete__cta{
  margin-top:auto;
  width:100%;
  padding-top:1.05rem; padding-bottom:1.05rem;
}

.orden{ list-style:none; margin:0 0 clamp(1.75rem,3vw,2.25rem); padding:0; counter-reset:paso; }
.orden li{
  counter-increment:paso;
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--noche-borde);
}
.orden li::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--inscrip); font-size:.7rem; font-weight:600;
  letter-spacing:.08em; color:var(--oro-sombra);
  padding-top:.28rem;
}
.orden b{ grid-column:2; font-weight:600; font-size:.97rem; color:var(--cal); }
.orden span{ grid-column:2; font-size:var(--t-small); color:var(--cal-3); line-height:1.55; }

/* Nota de precio bajo las tarjetas. El botón que vivía aquí se mudó a cada
   tarjeta, donde el cliente ya sabe cuál de los dos paquetes quiere. */
.remate{
  margin:clamp(2.25rem,4vw,3rem) 0 0;
  padding:clamp(1.4rem,2.5vw,1.9rem) clamp(1.5rem,3vw,2.2rem);
  border-left:2px solid var(--oro-sombra);
  border-radius:var(--radio);
  background:rgba(74,18,32,.22);
  font-size:var(--t-small); color:var(--cal-2);
  max-width:60ch;
}

/* ==========================================================================
   Ocasiones
   ========================================================================== */

.ocasiones{
  display:grid; gap:1px;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  background:var(--noche-borde);
  border:1px solid var(--noche-borde);
  border-radius:var(--radio);
  overflow:hidden;              /* recorta las celdas contra la esquina */
}
@media (min-width:640px){ .ocasiones{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .ocasiones{ grid-template-columns:repeat(3,1fr); } }

.ocasion{
  position:relative;
  display:block; padding:1.75rem 1.6rem;
  background:var(--noche);
  text-decoration:none;
  transition:background .3s ease;
}
.ocasion:hover{ background:var(--noche-alta); }
.ocasion__nombre{
  font-family:var(--display); font-weight:400; font-size:1.32rem;
  color:var(--cal); margin:0 0 .3rem;
  transition:color .3s ease;
}
.ocasion:hover .ocasion__nombre{ color:var(--oro); }
.ocasion__pie{ font-size:var(--t-small); color:var(--cal-3); }

/* ==========================================================================
   Razones — por qué elegirnos
   Aquí sí procede numerar: son cuatro argumentos que el lector recorre, y el
   número le da jerarquía y ritmo a la lectura. Va en Marcellus, grande y en
   oro, como una cifra de programa impreso.
   ========================================================================== */

.razones{
  display:grid;
  gap:clamp(2.25rem,4vw,3.25rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
  counter-reset:razon;
}
@media (min-width:760px){ .razones{ grid-template-columns:1fr 1fr; } }

.razon{
  counter-increment:razon;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(1rem,2vw,1.5rem);
  align-items:start;
}
.razon::before{
  content:counter(razon);
  grid-row:1 / span 2;
  font-family:var(--display);
  font-size:clamp(2.6rem,4.4vw,3.6rem);
  line-height:.9;
  color:var(--oro);
  opacity:.85;
}
.razon h3{
  grid-column:2;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.32rem);
  line-height:1.25;
  margin:0 0 .55rem;
  color:var(--cal);
  text-wrap:balance;
}
.razon p{
  grid-column:2;
  margin:0; font-size:.95rem;
  color:var(--cal-2); max-width:46ch;
}

/* ==========================================================================
   Preguntas frecuentes
   <details> nativo: abre sin JavaScript, el buscador lo indexa y funciona con
   teclado de fábrica. La animación de apertura es progresiva: donde el
   navegador soporta interpolate-size se despliega suave, y donde no, abre de
   golpe, que es el comportamiento de siempre.
   ========================================================================== */

.faqs{
  display:grid; gap:.85rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  max-width:62rem;
}

.faq{
  background:rgba(18,18,17,.5);
  border:1px solid var(--noche-borde);
  border-radius:var(--radio);
  transition:border-color .32s ease, box-shadow .32s ease, background .32s ease;
}
@media (hover:hover){ .faq:hover{ border-color:rgba(210,162,76,.28); } }
.faq[open]{
  background:rgba(18,18,17,.78);
  border-color:rgba(210,162,76,.34);
  box-shadow:var(--aro-oro), 0 24px 52px -34px rgba(210,162,76,.42);
}

.faq__p{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.25rem;
  padding:clamp(1.1rem,2vw,1.4rem) clamp(1.25rem,2.6vw,1.75rem);
  cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.35;
  color:var(--cal); text-wrap:balance;
  transition:color .32s ease;
}
.faq__p::-webkit-details-marker{ display:none; }
.faq[open] .faq__p{ color:var(--oro); }
.faq__p:focus-visible{ outline:2px solid var(--oro); outline-offset:-4px; border-radius:var(--radio); }

/* Cruz que se vuelve raya al abrir. */
.faq__mas{
  position:relative; flex:0 0 auto;
  width:15px; height:15px; margin-top:.42em;
}
.faq__mas::before,
.faq__mas::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:var(--oro);
  transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.faq__mas::before{ transform:translateY(-50%); }
.faq__mas::after{ transform:translateY(-50%) rotate(90deg); }
.faq[open] .faq__mas::after{ transform:translateY(-50%) rotate(0deg); }

.faq__r{ padding:0 clamp(1.25rem,2.6vw,1.75rem) clamp(1.35rem,2.4vw,1.7rem); }
.faq__r p{
  margin:0; max-width:64ch;
  font-size:.95rem; line-height:1.72; color:var(--cal-2);
}
.faq__r strong{ color:var(--cal); font-weight:600; }
.faq__r a{ color:var(--oro); text-underline-offset:3px; }

@supports (interpolate-size:allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .faq::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .4s cubic-bezier(.2,.7,.3,1),
               content-visibility .4s allow-discrete;
  }
  .faq[open]::details-content{ block-size:auto; }
}

@media (prefers-reduced-motion:reduce){
  .faq, .faq__mas::before, .faq__mas::after{ transition:none; }
  .faq::details-content{ transition:none; }
}

/* ==========================================================================
   Cierre / contacto
   ========================================================================== */

.cierre{ text-align:center; }
.cierre .rotulo,.cierre .lead{ justify-content:center; margin-inline:auto; }
.cierre .lead{ text-align:center; }
.cierre .acciones{ justify-content:center; }

.canales{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.8rem 2rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:2rem;
  border-top:1px solid var(--noche-borde);
  font-size:var(--t-small);
}
.canales a{ color:var(--cal-2); text-decoration:none; transition:color .25s ease; }
.canales a:hover{ color:var(--oro); }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie{
  padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;
  padding-left:var(--rail);
  border-top:1px solid var(--noche-borde);
  background:#070706;
}
.pie__fila{
  display:grid; gap:2.5rem;
  align-items:start;
}
@media (min-width:760px){ .pie__fila{ grid-template-columns:auto 1fr auto; } }
.pie__legal{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  font-size:var(--t-small);
}
.pie__legal a{ color:var(--cal-3); text-decoration:none; }
.pie__legal a:hover{ color:var(--oro); }
.pie__nota{
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid var(--noche-borde);
  font-size:var(--t-micro); letter-spacing:.05em; color:var(--cal-3);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
}

/* ==========================================================================
   Páginas interiores
   ========================================================================== */

.encabezado{
  padding-top:calc(var(--nav-h) + clamp(2rem,8vw,6.5rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
  padding-left:var(--rail);
  border-bottom:1px solid var(--noche-borde);
  background:
    radial-gradient(90% 120% at 6% 0%, rgba(74,18,32,.42) 0%, transparent 64%),
    var(--noche);
}

/* --- Repertorio --- */
.buscador{
  display:grid; gap:.75rem;
  margin-top:2.5rem; max-width:520px;
}
.buscador input{
  width:100%; padding:.95rem 1.1rem;
  font-family:var(--texto); font-size:1rem;
  color:var(--cal);
  background:var(--noche-alta);
  border:1px solid var(--noche-borde); border-radius:var(--radio-chico);
}
.buscador input::placeholder{ color:var(--cal-3); }
.buscador input:focus-visible{ border-color:var(--oro); outline:2px solid var(--oro); outline-offset:2px; }
.buscador input:focus{ border-color:var(--oro); }
.buscador__cuenta{ font-size:var(--t-small); color:var(--cal-3); font-variant-numeric:tabular-nums; }

.fichas{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:1.75rem;
}
.ficha{
  touch-action:manipulation;
  min-height:44px;
  padding:.55rem 1.1rem;
  font-family:var(--inscrip); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cal-2);
  background:transparent;
  border:1px solid var(--noche-borde); border-radius:100px;
  cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.ficha:hover{ color:var(--cal); border-color:rgba(247,246,244,.3); }
.ficha[aria-pressed="true"]{
  color:var(--noche); background:var(--metal-oro); border-color:transparent;
}

.grupo{ padding-block:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--noche-borde); scroll-margin-top:calc(var(--nav-h) + 1rem); }
.grupo:first-of-type{ border-top:0; }
.grupo__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0;
}
.grupo__pie{ margin:.5rem 0 0; font-size:var(--t-small); color:var(--cal-3); }
.grupo__sub{
  font-family:var(--inscrip); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oro);
  margin:2.25rem 0 .9rem;
}

.canciones{
  columns:1; column-gap:clamp(1.5rem,4vw,3.5rem);
  list-style:none; margin:1.75rem 0 0; padding:0;
}
@media (min-width:620px){ .canciones{ columns:2; } }
@media (min-width:1000px){ .canciones{ columns:3; } }
.canciones li{
  break-inside:avoid;
  display:flex; align-items:baseline; gap:.65rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(247,246,244,.07);
  font-size:.95rem; color:var(--cal-2);
}
.canciones li::before{
  content:""; flex:0 0 auto;
  width:5px; height:7px; border-radius:50%;
  background:var(--metal-plata); opacity:.4;
  transform:translateY(-2px);
}
.canciones li i{ font-style:normal; color:var(--cal-3); font-size:.85em; }
.canciones li.es-oculto{ display:none; }
.grupo.es-oculto,.grupo__sub.es-oculto,.canciones.es-oculto{ display:none; }

.vacio{
  padding:3rem 0; text-align:center;
  color:var(--cal-3); font-size:var(--t-small);
}
.vacio.es-oculto{ display:none; }

/* --- Legal --- */
.legal{ padding-block:clamp(3.5rem,7vw,5.5rem); padding-left:var(--rail); }
.legal .contenedor{ max-width:820px; }

.legal h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,3vw,2rem);
  margin:3.5rem 0 1rem; padding-top:2rem;
  border-top:1px solid var(--noche-borde);
}
.legal h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.legal h3{
  font-family:var(--texto); font-weight:600; font-size:1.02rem;
  color:var(--cal); margin:2rem 0 .5rem;
}
.legal p,.legal li{ color:var(--cal-2); max-width:var(--medida); }
.legal ul,.legal ol{ padding-left:1.2rem; }
.legal li{ margin-bottom:.6rem; }
.legal .aviso{
  padding:1.4rem 1.6rem; margin:2rem 0;
  border-left:2px solid var(--oro);
  background:rgba(74,18,32,.24);
}
.legal .aviso p{ margin:0; color:var(--cal); }

.tabla-datos{
  width:100%; border-collapse:collapse; margin-top:1.5rem;
  font-size:var(--t-small); text-align:left;
}
.tabla-datos th,.tabla-datos td{
  padding:.85rem 1rem; border-bottom:1px solid var(--noche-borde);
}
.tabla-datos th{
  font-family:var(--inscrip); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--oro);
  white-space:nowrap;
}
.tabla-datos td{ color:var(--cal-2); }
.tabla-datos a{ color:var(--cal); text-decoration:none; }
.tabla-datos a:hover{ color:var(--oro); }

/* ==========================================================================
   Aparición al hacer scroll
   ========================================================================== */

.js .surge{ opacity:0; transform:translateY(22px); }
.js .surge.es-visible{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.js .surge:nth-child(2){ transition-delay:.08s; }
.js .surge:nth-child(3){ transition-delay:.16s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .surge{ opacity:1; transform:none; }
  .portada__fondo{ animation:none; }
}

/* En móvil el WhatsApp del encabezado estorba: el CTA de la portada y el
   botón flotante ya cubren esa acción. */
@media (max-width:719px){
  .cabecera .boton--oro{ display:none; }
}

/* Portada en móvil: la fotografía ocupa la franja alta y el texto baja a
   fondo sólido. Sobre una pantalla de 375px no hay velo que haga legible
   un párrafo encima de un retrato a contraluz. */
@media (max-width:899px){
  .portada{
    min-height:auto;
    padding-top:calc(var(--nav-h) + 33svh);
    padding-bottom:clamp(3.5rem,10vw,5rem);
  }
  .portada__fondo{ height:60svh; object-position:88% 20%; }
}

/* Sitio para el botón flotante de WhatsApp */
@media (max-width:939px){
  .pie{ padding-bottom:6.5rem; }
}

.panel__cta{ margin-top:2.5rem; }

/* El CTA del panel es un botón, no un enlace del menú: .panel a lo pisaría. */
.panel .panel__cta{
  margin-top:2.75rem;
  font-family:var(--texto);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#150F04;
  padding:1rem 1.7rem;
}
.panel .panel__cta:hover{ color:#150F04; }

/* ==========================================================================
   Banda a sangre entera — una sola imagen grande entre bloques de texto
   ========================================================================== */

.banda{
  position:relative;
  margin:0;
  height:clamp(320px,46vw,680px);
  overflow:hidden;
  border-top:1px solid var(--noche-borde);
  border-bottom:1px solid var(--noche-borde);
}
.banda img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 12%;
  filter:saturate(.92) contrast(1.05);
}
.banda::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,9,.30) 0%, rgba(10,10,9,0) 20%,
    rgba(10,10,9,0) 74%, rgba(10,10,9,.72) 100%);
  pointer-events:none;
}

/* ==========================================================================
   Cabeza del repertorio — retrato del director junto al buscador
   La página es una lista de 129 canciones; el retrato le pone cara a quien
   recibe la lista y la ensambla. La luz cálida de la propia foto se prolonga
   en un resplandor detrás del marco, para que la imagen no quede pegada
   encima del fondo sino incrustada en él.
   ========================================================================== */

.cabeza{
  display:grid;
  gap:clamp(2.25rem,4.5vw,4rem);
  align-items:stretch;
}
@media (min-width:900px){
  .cabeza{ grid-template-columns:1.08fr .92fr; align-items:center; }
}

.cabeza__texto{ min-width:0; }

.cabeza__retrato{
  position:relative;
  isolation:isolate;
  margin:0;
  display:flex;
  flex-direction:column;
}
@media (max-width:899px){
  .cabeza__retrato{ order:-1; }
}

.cabeza__retrato::before{        /* el resplandor: la misma luz del retrato */
  content:"";
  position:absolute;
  inset:-16% -12% -8%;
  z-index:-1;
  background:radial-gradient(56% 50% at 52% 40%, rgba(210,162,76,.10) 0%, rgba(210,162,76,.03) 46%, transparent 72%);
  pointer-events:none;
}

.cabeza__retrato img{
  width:100%;
  border-radius:var(--radio);
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:50% 5%;
  filter:saturate(.95) contrast(1.06);
  box-shadow:0 0 0 1px rgba(210,162,76,.22), 0 30px 60px -34px rgba(0,0,0,.9);
}
@media (min-width:900px){
  .cabeza__retrato img{
    aspect-ratio:auto;
    flex:1;
    min-height:clamp(360px,32vw,470px);
    object-position:50% 50%;
  }
}

.cabeza__retrato figcaption{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.3rem .8rem;
  margin-top:1rem;
  padding-top:.9rem;
  border-top:1px solid rgba(210,162,76,.28);
  font-size:var(--t-small);
  color:var(--cal-3);
  line-height:1.5;
}
.cabeza__retrato figcaption b{
  font-family:var(--inscrip);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--oro);
  white-space:nowrap;
}

/* La etiqueta del buscador reutilizaba el estilo de las notas de video */
.buscador__etiqueta{
  font-family:var(--inscrip);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--cal-3);
}

/* Las fichas van bajo las dos columnas, a todo el ancho */
.encabezado .fichas{ margin-top:clamp(2.25rem,4.5vw,3.25rem); }

/* Los enlaces legales del pie medían 23px de alto: por debajo del mínimo
   táctil de 44px. Se les da área sin separarlos visualmente. */
.pie__legal a{ display:inline-flex; align-items:center; min-height:44px; }

/* El pie ya reserva sitio para el CTA flotante; súmale la zona segura. */
@media (max-width:939px){
  .pie{ padding-bottom:calc(6.5rem + env(safe-area-inset-bottom)); }
}

/* Los tres videos son verticales. Apilados en un teléfono ocupan tres
   pantallas seguidas, así que en móvil pasan a ser un carril que se desliza
   de lado, con anclaje — el mismo gesto de Instagram y TikTok, que es de
   donde llega este público. El carril desborda dentro de sí mismo: la
   página nunca gana barra horizontal. */
@media (max-width:819px){
  .videos{
    display:flex;
    grid-template-columns:none;
    gap:.9rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter) .5rem;
    scrollbar-width:none;
  }
  .videos::-webkit-scrollbar{ display:none; }
  .video{
    flex:0 0 min(74%, 300px);
    scroll-snap-align:start;
  }
}