/* =====================================================================
 * Estilos para las páginas "institucionales" del sitio (Inicio,
 * Nosotros, Ubicación, Mixología, Eventos, Cursos). Estas páginas
 * cargan menu.css (base: tokens, body, .site-header, .nav a,
 * .footer-*, .wa-float...) Y este archivo encima, que solo agrega lo
 * que menu.php no necesita: el header "-simple" con más enlaces y
 * hamburguesa, hero, secciones, tarjetas, formularios, etc.
 * ===================================================================== */

img{max-width:100%; display:block;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---- Lenis (scroll suave con inercia) — CSS mínimo que la librería
   necesita (ver assets/js/lenis.min.js + la inicialización en site.js).
   Solo en páginas institucionales: menu.php sigue con scroll nativo.
   Importante: menu.css (compartido) trae html{scroll-behavior:smooth}
   para menu.php — pero si se queda activo AQUÍ, pelea con Lenis (los
   dos intentan suavizar el mismo scroll a la vez) y el resultado es un
   scroll que tiembla/se "jalonea" en vez de sentirse fluido. Por eso se
   desactiva aquí: Lenis es el único responsable del scroll suave en
   estas páginas. ---- */
html{scroll-behavior:auto;}
html.lenis, html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* ---- Header (sticky, estilo Apple: material translúcido) ---- */
.site-header-simple{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  transition:background-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
/* Se "materializa" al bajar: más opaco + sombra suave, en vez de quedarse
   siempre igual con solo una línea de 1px (site.js agrega esta clase). */
.site-header-simple.is-scrolled{
  background:color-mix(in srgb, var(--bone) 95%, transparent);
  border-bottom-color:color-mix(in srgb, var(--line) 50%, transparent);
  box-shadow:0 16px 32px -22px color-mix(in srgb, var(--charcoal) 55%, transparent);
}
.site-header-simple .header-inner{
  max-width:var(--content-w-wide); margin:0 auto; padding:14px 20px;
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:18px; text-align:left;
}
.site-header-simple .brand-mark{flex-direction:row; gap:0;}
.site-header-simple .brand-logo-small{height:32px;}
.nav-site{
  display:flex; align-items:center; gap:24px; flex:1;
  justify-content:center; overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.nav-site::-webkit-scrollbar{display:none;}
.nav-site a{flex-shrink:0;}
.nav-site a.is-active{color:var(--terracota); border-color:var(--terracota);}
.nav-cta{
  flex-shrink:0; background:var(--terracota) !important; color:#fff !important;
  padding:9px 20px !important; border-radius:999px; font-size:11.5px !important;
  letter-spacing:0.08em !important; border:none !important;
  transition:transform 120ms var(--ease-out), background-color 150ms ease;
}
.nav-cta:hover{background:var(--terracota-deep) !important;}
.nav-cta:active{transform:scale(0.96);}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:34px; height:34px; border:none; background:none; cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:100%; height:1.5px; background:var(--charcoal); transition:transform 200ms var(--ease-out), opacity 150ms ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  /* especificidad .header-inner .nav-site (0,2,0) para ganarle a
     ".header-inner .nav{display:flex}" de menu.css, que si no, gana por
     especificidad aunque site.css cargue después */
  .header-inner .nav-site{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:8px 20px 18px; overflow-x:visible; white-space:normal;
    box-shadow:0 14px 24px rgba(42,37,33,.08);
  }
  .header-inner .nav-site.is-open{display:flex;}
  .nav-site a{padding:12px 0; border-bottom:1px solid var(--line); text-align:center;}
  .nav-site a.nav-cta{margin-top:12px; border-bottom:none;}
}

/* ---- Hero (Inicio) ---- */
.hero{position:relative; min-height:86vh; display:flex; align-items:flex-end; overflow:hidden;}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-media img{width:100%; height:100%; object-fit:cover; will-change:transform;}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, color-mix(in srgb, var(--charcoal) 86%, transparent) 4%, color-mix(in srgb, var(--charcoal) 10%, transparent) 62%);
}
.hero-content{position:relative; z-index:1; max-width:var(--content-w-wide); margin:0 auto; padding:0 24px 64px; color:var(--bone); width:100%;}
.hero-eyebrow{
  display:inline-block; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--bone) 85%, var(--terracota)); margin-bottom:14px; font-weight:600;
}
.hero-title{
  font-family:var(--font-serif); font-weight:600; font-size:clamp(34px, 6vw, 62px);
  line-height:1.04; letter-spacing:-0.01em; margin:0 0 18px; max-width:760px;
  color:var(--bone); /* menu.css define h1,h2,h3{color:var(--charcoal)} globalmente;
                         el hero necesita texto claro sobre la foto oscura */
}
.hero-sub{font-size:16px; line-height:1.6; max-width:520px; color:color-mix(in srgb, var(--bone) 92%, transparent); margin:0 0 30px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px;}
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--font-sans);
  font-size:13.5px; font-weight:600; padding:13px 24px; border-radius:999px; letter-spacing:0.01em;
  transition:transform 200ms var(--ease-out), background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 280ms var(--ease-out);
  border:1.5px solid transparent; cursor:pointer;
}
.btn:active{transform:scale(0.96);}
.btn-primary{background:var(--terracota); color:#fff; box-shadow:0 2px 6px -2px color-mix(in srgb, var(--terracota-deep) 55%, transparent);}
.btn-primary:hover{background:var(--terracota-deep); transform:translateY(-2px); box-shadow:0 14px 28px -12px color-mix(in srgb, var(--terracota-deep) 65%, transparent);}
.btn-ghost{background:color-mix(in srgb, var(--bone) 12%, transparent); color:var(--bone); border-color:color-mix(in srgb, var(--bone) 45%, transparent);}
.btn-ghost:hover{background:color-mix(in srgb, var(--bone) 22%, transparent); border-color:var(--bone);}
.btn-dark{background:var(--charcoal); color:var(--bone);}
.btn-dark:hover{background:var(--charcoal); opacity:0.88;}
/* Outline: el relleno "barre" desde la izquierda en vez de solo cambiar
   color — el mismo truco de barrido que usan los botones premium. */
.btn-outline{background:transparent; color:var(--charcoal); border-color:var(--line); z-index:0;}
.btn-outline::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--charcoal);
  transform:scaleX(0); transform-origin:left center; transition:transform 360ms var(--ease-micro);
}
.btn-outline:hover{border-color:var(--charcoal); color:var(--bone);}
.btn-outline:hover::before{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover{transform:none;}
  .btn-outline::before{transition:none;}
}

/* ---- Secciones genéricas ---- */
.section{max-width:var(--content-w-wide); margin:0 auto; padding:88px 24px;}
.section-narrow{max-width:var(--content-w); margin:0 auto; padding:88px 24px;}
.section-tight{padding-top:56px; padding-bottom:56px;}
.eyebrow{
  display:block; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--terracota);
  font-weight:700; margin-bottom:12px;
}
.section-title{
  font-family:var(--font-serif); font-weight:600; font-size:clamp(26px, 4vw, 38px);
  line-height:1.12; letter-spacing:-0.01em; margin:0 0 18px;
}
.section-lede{font-size:16.5px; line-height:1.7; color:var(--muted); max-width:620px;}
.section-lede + .section-lede{margin-top:14px;}
/* Antes el fondo de color de estas secciones se quedaba encerrado en el
   mismo ancho que el texto (max-width:var(--content-w-wide) heredado de
   .section) y se veía como un recuadro aislado flotando en la página. Para
   que el color sea una franja real de borde a borde, la sección se vuelve
   100% de ancho y el "padding" (no un max-width) es lo que alinea el
   contenido con la misma columna central que usa el resto del sitio. */
.section-alt, .section-dark{
  max-width:none; width:100%;
  padding-left:max(24px, calc((100% - var(--content-w-wide)) / 2 + 24px));
  padding-right:max(24px, calc((100% - var(--content-w-wide)) / 2 + 24px));
  position:relative;
}
.section-alt{background:var(--bone-deep);}
.section-dark{background:var(--charcoal); color:var(--bone);}
/* Transición suave entre la franja de color y el fondo normal de la
   página — en vez de un corte duro de borde recto. */
.section-alt::before, .section-dark::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--terracota) 35%, transparent) 50%, transparent 100%);
  box-shadow:0 1px 18px color-mix(in srgb, var(--terracota) 30%, transparent);
}
.section-dark .section-lede{color:color-mix(in srgb, var(--bone) 78%, transparent);}
.section-dark .eyebrow{color:var(--terracota);}
/* menu.css define h1,h2,h3{color:var(--charcoal)} globalmente — sin esto,
   cualquier título dentro de una sección oscura queda invisible. */
.section-dark h1, .section-dark h2, .section-dark h3{color:var(--bone);}

/* ---- Teaser cards (Inicio: enlaces a Mixología/Eventos/Cursos) ---- */
.teaser-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:40px;}
.teaser-card{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; text-decoration:none;
  display:flex; align-items:flex-end; background:var(--charcoal);
  transition:box-shadow 320ms var(--ease-out);
}
/* El "levante" (translateY + sombra grande) se quitó: junto con el Ken
   Burns y el destello ya era demasiado efecto encima de la misma
   tarjeta, y el movimiento en sí no se sentía bien. Dejamos solo una
   sombra discreta como único indicio de "esto es interactivo". */
.teaser-card:hover{
  box-shadow:0 14px 26px -16px color-mix(in srgb, var(--charcoal) 45%, transparent);
}
.teaser-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.8;
  transform-origin:56% 44%;
}
/* Ken Burns: en vez de un simple "crecer" estático, la foto hace un
   paneo + zoom lento y continuo mientras el mouse está encima (va y
   vuelve con "alternate" para que una visita larga siga respirando).
   Con 7s y ease-in-out casi no se alcanzaba a notar: nadie deja el
   mouse quieto varios segundos solo para ver un efecto — tiene que
   notarse desde el primer momento. Por eso ahora es más corto (3.2s) y
   usa ease-out (arranca a toda velocidad) en vez de ease-in-out
   (arrancaba lento). */
@media (hover:hover) and (pointer:fine){
  .teaser-card:hover img{
    animation:luxiaKenBurns 3.2s var(--ease-out) infinite alternate;
  }
}
/* 0% empieza en scale(1) a propósito, exactamente igual que el reposo
   (sin filtro): si arranca ya en 1.04, el navegador "salta" de golpe
   de 1 a 1.04 el instante que llega el mouse, antes de que empiece el
   movimiento — se sentía como el viejo efecto de "crecer" + un brinco.
   Arrancando desde el mismo valor de reposo, el Ken Burns entra sin
   corte, como una continuación natural. */
@keyframes luxiaKenBurns{
  0%{transform:scale(1) translate(0, 0);}
  100%{transform:scale(1.15) translate(-2%, -1.4%);}
}
@media (prefers-reduced-motion: reduce){ .teaser-card:hover img{animation:none;} }
.teaser-card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,16,12,.92), rgba(20,16,12,.1) 65%);}
/* Destello dorado: una franja diagonal que cruza la tarjeta al pasar el
   mouse. Técnica: una caja el DOBLE de grande que la tarjeta (200%,
   centrada con top/left:-50%), con la franja dibujada cerca de su
   propio centro; se desplaza con transform:translateX de -100% a 100%
   (relativo a su propio ancho, no al de la tarjeta), así que en reposo
   y al terminar el barrido la franja queda muy por fuera de la tarjeta
   — nunca se "corta" a medias ni deja un cuadro o línea residual. Sin
   mix-blend-mode (evita el artefacto de recorte cuadrado que da ese
   modo combinado con el translateY del hover de la tarjeta). El reset
   de posición es instantáneo (0ms) al salir el mouse; solo la opacidad
   se desvanece con transición, para que la siguiente pasada siempre
   arranque limpia desde la izquierda. */
.teaser-card::before{
  content:""; position:absolute; z-index:2; pointer-events:none;
  top:-50%; left:-50%; width:200%; height:200%;
  /* Un punto más gruesa que la primera corrección (esa quedó "muy
     chica"): ahora ~18% del ancho de esta caja = ~36% de la tarjeta,
     a medio camino entre el bloque original (56%) y la línea delgada
     (16%) de la versión anterior. */
  background:linear-gradient(100deg,
    transparent 41%,
    color-mix(in srgb, var(--oro) 55%, transparent) 46%,
    color-mix(in srgb, #fff 45%, var(--oro) 55%) 50%,
    color-mix(in srgb, var(--oro) 55%, transparent) 54%,
    transparent 59%);
  transform:translateX(-100%) rotate(6deg);
  opacity:0;
  transition:opacity 380ms var(--ease-out), transform 0ms linear;
}
@media (hover:hover) and (pointer:fine){
  .teaser-card:hover::before{
    /* 0.85 se veía muy sólido/opaco; 0.45 deja que la foto de abajo se
       siga viendo a través del brillo. */
    opacity:0.45;
    transform:translateX(100%) rotate(6deg);
    /* "linear" a propósito (no var(--ease-out)): con una curva de salida
       fuerte, casi todo el recorrido pasaba en los primeros ~100ms y el
       destello se sentía como un flash en vez de un barrido parejo. */
    transition:opacity 260ms var(--ease-out), transform 900ms linear;
  }
}
@media (prefers-reduced-motion: reduce){
  .teaser-card::before{transition:opacity 200ms ease !important;}
  .teaser-card:hover::before{transform:translateX(-100%) rotate(6deg); opacity:0;}
}
.teaser-body{position:relative; z-index:1; padding:22px; color:#fff;}
.teaser-kicker{font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracota); font-weight:700; display:block; margin-bottom:6px;}
.teaser-title{font-family:var(--font-serif); font-size:21px; margin:0 0 6px; color:#fff;}
.teaser-arrow{font-size:13px; opacity:0.85;}
@media (max-width:760px){ .teaser-grid{grid-template-columns:1fr; } }

/* ---- Placeholder de foto (cuando no hay asset real todavía) ---- */
.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center;
  background:linear-gradient(155deg, var(--bone-deep) 0%, color-mix(in srgb, var(--terracota) 7%, var(--bone-deep)) 100%);
  border:1px solid var(--line); border-radius:16px; color:var(--muted);
  padding:18px; min-height:220px;
}
.ph svg{width:28px; height:28px; opacity:0.45; flex-shrink:0;}
.ph span{
  max-width:220px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:600; color:color-mix(in srgb, var(--muted) 88%, var(--charcoal));
}
/* mensajes informativos reales (no "foto pendiente") usan texto normal, sin versalitas */
.ph.ph-note span{
  max-width:320px; font-size:14px; letter-spacing:0; text-transform:none; font-weight:400;
  color:var(--muted); line-height:1.6;
}

/* ---- Founders (Nosotros) ---- */
.founders{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px;}
.founder-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:14px;}
.founder-photo{aspect-ratio:1/1; border-radius:14px; overflow:hidden;}
.founder-photo img{width:100%; height:100%; object-fit:cover;}
.founder-name{font-family:var(--font-serif); font-size:20px; margin:0;}
.founder-role{font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracota); font-weight:700;}
.founder-bio{font-size:14px; color:var(--muted); line-height:1.65; margin:0;}
@media (max-width:700px){ .founders{grid-template-columns:1fr;} }

.pull-quote{
  position:relative; font-family:var(--font-serif); font-style:italic; font-size:clamp(20px,3vw,27px); line-height:1.45;
  max-width:720px; margin:52px auto; padding:0 24px; text-align:center; color:var(--charcoal);
}
.pull-quote::before{
  content:"\201C"; position:absolute; top:-0.55em; left:50%; transform:translateX(-50%);
  font-family:var(--font-serif); font-style:normal; font-size:clamp(70px,10vw,120px); line-height:1;
  color:color-mix(in srgb, var(--terracota) 16%, transparent); pointer-events:none; z-index:-1;
}

/* ---- Info cards (Ubicación) ---- */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px;}
.info-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px;
  transition:transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.info-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px -20px color-mix(in srgb, var(--charcoal) 30%, transparent);
  border-color:color-mix(in srgb, var(--terracota) 28%, var(--line));
}
.info-card h3{font-family:var(--font-serif); font-size:19px; margin:0 0 14px;}
.hours-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;}
.hours-row:last-child{border-bottom:none;}
.hours-row.is-closed{color:var(--muted);}
.hours-row span:last-child{font-weight:600;}
@media (max-width:700px){ .info-grid{grid-template-columns:1fr;} }

.map-embed{border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9;}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}

/* ---- Formularios (Reservar / Eventos) ---- */
.luxia-form{
  background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:30px;
  max-width:560px; margin-top:16px; display:flex; flex-direction:column; gap:16px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.luxia-form label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600;}
.luxia-form input, .luxia-form select, .luxia-form textarea{
  border:1px solid var(--line); border-radius:9px; padding:11px 12px; font-size:14.5px;
  font-family:inherit; color:var(--charcoal); background:#fff; width:100%; resize:vertical;
}
.luxia-form input:focus, .luxia-form select:focus, .luxia-form textarea:focus{outline:2px solid color-mix(in srgb, var(--terracota) 45%, transparent); outline-offset:1px;}
.form-hint{font-size:12px; color:var(--muted); margin:0;}
.form-hint.is-visible{color:var(--terracota-deep); font-weight:600;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }

/* ---- Mixología: agrupado por destilado ---- */
.spirit-group{margin-top:56px;}
.spirit-group:first-child{margin-top:40px;}
.spirit-head{display:flex; align-items:baseline; gap:12px; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:12px;}
.spirit-name{font-family:var(--font-serif); font-size:24px; margin:0;}
.spirit-count{font-size:12px; color:var(--muted);}
.drink-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 28px;}
.drink{padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);}
.drink-name{font-weight:600; font-size:14.5px;}
.drink-ing{font-size:12.5px; color:var(--muted); line-height:1.5;}
@media (max-width:700px){ .drink-grid{grid-template-columns:1fr;} }

/* ---- Eventos: lista de servicios 360° ---- */
.service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:40px;}
.service-card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px;
  transition:transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px -20px color-mix(in srgb, var(--charcoal) 32%, transparent);
  border-color:color-mix(in srgb, var(--terracota) 32%, var(--line));
}
.service-icon{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:13px; font-size:19px; margin-bottom:12px;
  background:linear-gradient(155deg, var(--bone-deep) 0%, color-mix(in srgb, var(--terracota) 10%, var(--bone-deep)) 100%);
}
.service-title{font-family:var(--font-serif); font-size:16.5px; margin:0 0 6px;}
.service-desc{font-size:13px; color:var(--muted); line-height:1.5; margin:0;}
@media (max-width:860px){ .service-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .service-grid{grid-template-columns:1fr;} }

.event-types{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.event-type-chip{
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:12.5px;
  color:var(--muted); background:var(--paper);
}

/* ---- Cursos: tracks ---- */
.track-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:44px;}
.track-card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.track-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px -20px color-mix(in srgb, var(--charcoal) 32%, transparent);
  border-color:color-mix(in srgb, var(--terracota) 32%, var(--line));
}
.track-card.is-b2b{background:var(--charcoal); color:var(--bone); border-color:var(--charcoal);}
.track-card.is-b2b .track-desc{color:color-mix(in srgb, var(--bone) 78%, transparent);}
.track-card.is-b2b .track-audience{color:var(--mar-light);}
.track-card.is-b2b .track-title{color:var(--bone);}
.track-audience{font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracota); font-weight:700;}
.track-title{font-family:var(--font-serif); font-size:21px; margin:0;}
.track-desc{font-size:13.5px; color:var(--muted); line-height:1.6; margin:0;}
@media (max-width:860px){ .track-grid{grid-template-columns:1fr;} }

/* ---- Acento "frescura" (mariscos) — uso puntual, nunca dominante ---- */
.fresh-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--mar-deep); background:var(--mar-light); border-radius:999px; padding:5px 12px; font-weight:700;
}

/* ---- Reveal on scroll: discreto, respeta reduced-motion ---- */
.reveal{opacity:0; transform:translateY(18px) scale(0.985); transition:opacity 650ms var(--ease-out), transform 650ms var(--ease-out);}
.reveal.is-visible{opacity:1; transform:none;}

/* Dentro de una sección .reveal, las tarjetas de una cuadrícula entran en
   cascada (una tras otra) en vez de todas al mismo tiempo — mismo
   principio que usan los sitios "premium" (ver referencia esli.mx). */
.teaser-grid > *, .service-grid > *, .track-grid > *, .info-grid > *, .footer-cols > *{
  transition:opacity 540ms var(--ease-out), transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.reveal:not(.is-visible) .teaser-grid > *,
.reveal:not(.is-visible) .service-grid > *,
.reveal:not(.is-visible) .track-grid > *,
.reveal:not(.is-visible) .info-grid > *,
.footer-cols:not(.is-visible) > *{
  opacity:0; transform:translateY(16px);
}
.reveal.is-visible .teaser-grid > *:nth-child(1), .reveal.is-visible .service-grid > *:nth-child(1), .reveal.is-visible .track-grid > *:nth-child(1), .reveal.is-visible .info-grid > *:nth-child(1){transition-delay:0ms;}
.reveal.is-visible .teaser-grid > *:nth-child(2), .reveal.is-visible .service-grid > *:nth-child(2), .reveal.is-visible .track-grid > *:nth-child(2), .reveal.is-visible .info-grid > *:nth-child(2){transition-delay:90ms;}
.reveal.is-visible .teaser-grid > *:nth-child(3), .reveal.is-visible .service-grid > *:nth-child(3), .reveal.is-visible .track-grid > *:nth-child(3), .reveal.is-visible .info-grid > *:nth-child(3){transition-delay:180ms;}
.reveal.is-visible .service-grid > *:nth-child(4){transition-delay:270ms;}
.reveal.is-visible .service-grid > *:nth-child(5){transition-delay:360ms;}
.reveal.is-visible .service-grid > *:nth-child(6){transition-delay:450ms;}
.footer-cols > *{transition-delay:calc(var(--i, 0) * 110ms);}

/* ---- Footer: franja + marca de cada columna se "dibujan" al entrar al
   viewport — mismo truco (línea que crece + tick que aparece, con delay
   por columna) del footer de referencia. Vive en site.css porque depende
   de la clase .reveal/.is-visible que pone site.js; en menu.php (que no
   carga site.js) la columna simplemente se ve siempre completa — sin
   animación, pero nunca rota. ---- */
.footer-col::before{transition:transform 820ms var(--ease-micro); transition-delay:calc(var(--i, 0) * 110ms); transform-origin:center;}
.footer-col::after{transition:opacity 420ms var(--ease-out); transition-delay:calc(var(--i, 0) * 110ms + 260ms);}
.footer-cols:not(.is-visible) .footer-col::before{transform:translateX(-50%) scaleX(0);}
.footer-cols:not(.is-visible) .footer-col::after{opacity:0;}
.footer-cols.is-visible .footer-col::before{transform:translateX(-50%) scaleX(1);}
.footer-cols.is-visible .footer-col::after{opacity:1;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .teaser-grid > *, .service-grid > *, .track-grid > *, .info-grid > *, .footer-cols > *{opacity:1 !important; transform:none !important; transition:box-shadow 1ms, border-color 1ms !important;}
  .teaser-card, .nav-cta, .btn, .nav-toggle span, .service-card, .info-card, .track-card{transition:none !important;}
  .site-header-simple{transition:none !important;}
  .footer-col::before{transform:translateX(-50%) scaleX(1) !important; transition:none !important;}
  .footer-col::after{opacity:1 !important; transition:none !important;}
}