/* ══════════════════════════════════════════════════════════════════════════
   LA CABECERA · v2 · web madre de VAO · 4-sep-2026
   Encargo de Héctor: «el header mucho más innovador y revulsivo, que no sea
   tan simple. Añade texturas, más animaciones.» Y el índice con «botones que
   sean como unas imágenes y se ve como una textura, medio raspado o arenoso»
   → eso es el mega-menú de Wednesday (capturas 01 y 03): negro, grano visible,
   tarjetas que son fotos. Referencia del degradado: Level2 (el bloom azul).

   Se carga DESPUÉS de vao.css y la sustituye entera en lo que toca al header.
   Cuatro pestañas: Entrenamientos · La compañía · Blog · Recursos.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --cab-riel:  30px;   /* el raíl de arriba, con la cinta de datos */
  --cab-alto:  76px;   /* la barra principal */
  --cab-regla: 15px;   /* la regla de abajo, con las cotas y el progreso */
  --cab-total: calc(var(--cab-riel) + var(--cab-alto) + var(--cab-regla));
  --cab-total-2: 60px; /* lo que mide encogida */
}

/* ── El armazón ─────────────────────────────────────────────────────────── */
.cab{
  position:fixed;inset:0 0 auto;z-index:60;display:block;padding:0;
  color:var(--cab-tinta);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--azul-hondo) 92%, transparent),
                            color-mix(in srgb, var(--azul-hondo) 74%, transparent));
  backdrop-filter:blur(16px) saturate(1.1);
  transition:background var(--medio) var(--c-micro),box-shadow var(--cinema) var(--c-inout);
}
/* La suciedad de la barra: acero cepillado, sin tocar el texto. */
.cab::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--rayado);background-size:420px 420px;
  opacity:.10;mix-blend-mode:soft-light;
}
/* El bloom de Level2: una mancha de luz que respira en la esquina. */
.cab::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 240% at 6% 0%, color-mix(in srgb, var(--tinta-clara) 13%, transparent), transparent 70%),
    radial-gradient(38% 200% at 84% 100%, color-mix(in srgb, var(--rojo) 26%, transparent), transparent 72%);
  opacity:.9;animation:cab-respira 9s ease-in-out infinite alternate;
}
@keyframes cab-respira{from{opacity:.62;transform:translateX(-2%)}to{opacity:1;transform:translateX(2%)}}

/* Cuando bajas, la cabecera se aprieta y pierde el raíl. */
.encogida .cab{
  background:color-mix(in srgb, var(--azul-hondo) 96%, transparent);
  box-shadow:0 1px 0 var(--filete-cab-2), 0 18px 40px -30px #000;
}

/* ── 1 · El raíl de arriba: la cinta de datos ───────────────────────────── */
.cab__riel{
  height:var(--cab-riel);overflow:hidden;position:relative;z-index:2;
  border-bottom:1px solid color-mix(in srgb, var(--cab-tinta) 12%, transparent);
  transition:height var(--cinema) var(--c-inout),opacity var(--medio) var(--c-micro);
  background:color-mix(in srgb, #000 26%, transparent);
}
.encogida .cab__riel{height:0;opacity:0;border-bottom-color:transparent}
.cab__ticker{display:flex;width:max-content;height:100%;align-items:center;
  animation:cab-cinta 46s linear infinite}
.cab__riel:hover .cab__ticker{animation-play-state:paused}
.cab__cinta{display:flex;align-items:center;gap:0;height:100%}
.cab__cinta span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--cab-tinta) 74%, transparent);
  padding:0 26px;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.cab__cinta span::before{content:"";width:4px;height:4px;background:var(--rojo-azul);flex:none}
@keyframes cab-cinta{to{transform:translateX(-50%)}}

/* ── 2 · La barra principal ─────────────────────────────────────────────── */
.cab__in{
  position:relative;z-index:2;height:var(--cab-alto);max-width:100%;
  display:flex;align-items:center;gap:var(--a3);padding-inline:var(--margen);
  border-bottom:0;background:none;backdrop-filter:none;
  transition:height var(--cinema) var(--c-inout);
}
.encogida .cab__in{height:var(--cab-total-2);max-width:100%;border-radius:0;box-shadow:none;background:none}

/* El logo, con su filete que se dibuja al pasar. */
.cab__logo{display:flex;align-items:center;color:var(--cab-tinta);flex:none;position:relative}
.cab__logo svg{width:108px;height:auto;transition:width var(--cinema) var(--c-inout)}
.encogida .cab__logo svg{width:88px}
.cab__logo::after{
  content:"";position:absolute;left:-10px;right:-10px;top:calc(50% + 16px);height:1px;
  background:var(--rojo-azul);transform:scaleX(0);transform-origin:left;
  transition:transform var(--medio) var(--c-inout);
}
.cab__logo:hover::after{transform:scaleX(1)}

/* ── 3 · La navegación: número mono + etiqueta que voltea ───────────────── */
.cab__nav{display:flex;gap:0;margin-left:var(--a4);height:100%;align-items:stretch}
.cab__t{
  position:relative;background:none;border:0;cursor:pointer;color:var(--cab-tinta);
  display:flex;align-items:center;gap:9px;padding:0 20px;
  font:600 13.5px/1 var(--palo);letter-spacing:.005em;
  border-left:1px solid color-mix(in srgb, var(--cab-tinta) 11%, transparent);
}
.cab__nav .cab__t:last-child{border-right:1px solid color-mix(in srgb, var(--cab-tinta) 11%, transparent)}
.cab__n{
  font:500 11px/1 var(--mono);letter-spacing:.12em;font-style:normal;
  color:color-mix(in srgb, var(--cab-tinta) 46%, transparent);
  transition:color var(--medio) var(--c-out);
}
.cab__t:hover .cab__n,.cab__t[aria-expanded="true"] .cab__n{color:var(--rojo-azul)}
/* la etiqueta: dos copias, una sale por arriba y la otra entra por abajo */
.cab__lbl{display:block;overflow:hidden;height:1.15em;position:relative}
.cab__lbl em{display:block;font-style:normal;line-height:1.15;
  transition:transform var(--medio) var(--c-inout)}
.cab__t:hover .cab__lbl em,.cab__t[aria-expanded="true"] .cab__lbl em{transform:translateY(-100%)}
/* el bloque rojo que crece por debajo */
.cab__t::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rojo);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--micro) var(--c-out);
}
.cab__t:hover::after,.cab__t[aria-expanded="true"]::after{transform:scaleY(1)}
/* y la trama de puntos que aparece dentro del botón abierto */
.cab__t::before{
  content:"";position:absolute;inset:0;pointer-events:none;color:var(--cab-tinta);
  background-image:var(--puntos);background-size:5px 5px;opacity:0;
  transition:opacity var(--medio) var(--c-out);
}
.cab__t[aria-expanded="true"]::before{opacity:.10}

.cab__d{margin-left:auto;display:flex;align-items:center;gap:var(--a3)}
.cab__tel{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--cab-tinta);opacity:.66;text-decoration:none;white-space:nowrap}
.cab__tel:hover{opacity:1}
/* El botón de la cabecera: troquelado, con la esquina cortada. */
.cab .boton{
  height:46px;padding-inline:24px;font-size:13.5px;font-weight:700;
  letter-spacing:.02em;position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.cab .boton::after{
  content:"";position:absolute;inset:0;background:var(--tinta-clara);
  transform:translateY(101%);transition:transform var(--medio) var(--c-inout);mix-blend-mode:overlay;
}
.cab .boton:hover::after{transform:translateY(0)}
.encogida .cab .boton{height:38px;padding-inline:18px;font-size:12.5px}

/* ── 4 · La regla: cotas + el avance de la página ───────────────────────── */
.cab__regla{
  position:relative;z-index:2;height:var(--cab-regla);
  border-top:1px solid color-mix(in srgb, var(--cab-tinta) 12%, transparent);
  background:color-mix(in srgb, #000 30%, transparent);
  overflow:hidden;transition:height var(--cinema) var(--c-inout);
}
.cab__regla::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--cab-tinta) 30%, transparent) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--cab-tinta) 55%, transparent) 0 1px, transparent 1px 96px);
  background-size:100% 5px,100% 10px;background-repeat:repeat-x;background-position:0 100%,0 100%;
}
.cab__prog{
  position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--rojo);
  transform:scaleX(var(--p,0));transform-origin:left;
  mix-blend-mode:screen;opacity:.85;
}
.cab__prog::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tinta-clara)}
.encogida .cab__regla{height:4px}
.encogida .cab__regla::before{opacity:.3}

/* ══ EL MEGA-MENÚ v2 · negro, arenoso, con tarjetas que son fotos ═══════ */
.mm{
  position:fixed;inset:0 0 auto;z-index:55;
  background:var(--azul-hondo);color:var(--tinta-clara);
  border-bottom:0;
  padding:calc(var(--cab-total) + 34px) 0 46px;
  clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden;
  transition:clip-path var(--cinema) var(--c-inout),visibility 0s linear var(--cinema);
}
.encogida .mm{padding-top:calc(var(--cab-total-2) + 34px)}
.mm[data-abierto]{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;
  transition:clip-path var(--cinema) var(--c-inout),visibility 0s}
/* el fondo: bloom + rejilla + grano grueso, como el de Wednesday */
.mm::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 120% at 78% -10%, color-mix(in srgb, var(--rojo) 22%, transparent), transparent 66%),
    radial-gradient(70% 130% at 6% 110%, color-mix(in srgb, var(--tinta-clara) 9%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tinta-clara) 5%, transparent) 0 1px, transparent 1px 120px);
}
.mm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grano);background-size:180px 180px;opacity:.14;mix-blend-mode:overlay;
}
.mm .env{position:relative;z-index:2}
/* el número fantasma del panel */
.mm__ghost{
  position:absolute;right:var(--margen);top:calc(var(--cab-total) - 10px);
  font:830 clamp(120px,17vw,240px)/.78 var(--palo);font-stretch:104%;
  color:color-mix(in srgb, var(--tinta-clara) 5%, transparent);
  pointer-events:none;z-index:1;letter-spacing:-.05em;
}
/* el borde desgarrado de abajo */
.mm__corte{
  position:absolute;left:0;right:0;bottom:-15px;height:16px;background-color:var(--azul-hondo);
  -webkit-mask-image:var(--diente);mask-image:var(--diente);
  -webkit-mask-size:120px 16px;mask-size:120px 16px;mask-repeat:repeat-x;-webkit-mask-repeat:repeat-x;
  transform:scaleY(-1);z-index:3;
}

.mm__cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--a3);margin-bottom:26px}
.mm__cab .rotulo{color:color-mix(in srgb, var(--tinta-clara) 62%, transparent)}
.mm__cab .mm__nota{font-size:var(--t-menudo);color:var(--tinta-clara-2);max-width:40ch;text-align:right}

.mm__g{display:grid;gap:1px;background:color-mix(in srgb, var(--tinta-clara) 12%, transparent)}
.mm__g--3{grid-template-columns:repeat(3,1fr)}
.mm__g--2{grid-template-columns:repeat(2,1fr)}
.mm__g--r{grid-template-columns:1.15fr .85fr}
.mm__g--4{grid-template-columns:repeat(4,1fr)}

/* LA TARJETA-FOTO. Esto es lo que pidió Héctor: un botón que es una imagen
   con textura. Foto al fondo, degradado encima, grano encima del degradado,
   y el texto apoyado en la esquina de abajo. */
.mm__c{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--azul-hondo);padding:22px;min-height:238px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  text-decoration:none;color:var(--tinta-clara);
}
.mm__foto{position:absolute;inset:0;z-index:-3;overflow:hidden}
.mm__foto img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.68) contrast(1.12) brightness(.62);
  transform:scale(1.02);
  transition:transform var(--cinema) var(--c-out),filter var(--cinema) var(--c-out)}
.mm__c:hover .mm__foto img{transform:scale(1.07);filter:grayscale(.22) contrast(1.04) brightness(.76)}
.mm__c::before{  /* degradado + tinte de marca */
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--azul-hondo) 94%, transparent) 4%,
                          color-mix(in srgb, var(--azul-hondo) 42%, transparent) 52%,
                          transparent 88%),
    linear-gradient(220deg, color-mix(in srgb, var(--rojo) 20%, transparent), transparent 58%);
}
.mm__c::after{  /* el grano arenoso, siempre encima */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grano);background-size:180px 180px;
  opacity:.19;mix-blend-mode:overlay;
}
.mm__c h3{font-size:clamp(19px,1.5vw,23px);line-height:1.02;margin:0}
.mm__c p{font-size:13px;line-height:1.45;color:var(--tinta-clara-2);max-width:34ch;margin:0}
.mm__k{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--tinta-clara) 56%, transparent);margin-bottom:auto;
  display:flex;gap:8px;align-items:center}
.mm__k b{color:var(--rojo-azul);font-weight:500}
/* el filete rojo que barre al pasar */
.mm__barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rojo);
  transform:scaleX(0);transform-origin:left;transition:transform var(--medio) var(--c-inout);z-index:2}
.mm__c:hover .mm__barra{transform:scaleX(1)}
/* la tarjeta sin foto: sólo trama, para lo que aún no tiene imagen honesta */
.mm__c--trama .mm__foto{background:
  linear-gradient(140deg, color-mix(in srgb, var(--tinta-clara) 8%, transparent), transparent 62%)}
.mm__c--trama .mm__foto::after{content:"";position:absolute;inset:0;color:var(--tinta-clara);
  background-image:var(--plumin);opacity:.10}
/* 2-oct-2026 · Héctor: «ya no quiero ningún fondo blanco», la trama se queda al pasar y al pulsar.
   `vao.css` aclara la tarjeta al pasar (`.mm__c:hover{background:var(--papel-hondo)}`); las de foto
   lo tapan con su imagen, la de trama no. */
.mm__c.mm__c--trama:hover,.mm__c.mm__c--trama:active,.mm__c.mm__c--trama:focus-visible{background:var(--azul-hondo)}

/* la lista del catálogo, dentro del panel de Entrenamientos */
.mm__lista{background:color-mix(in srgb, var(--tinta-clara) 3.5%, transparent);
  padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--a4);align-content:start}
.mm__lista a{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid color-mix(in srgb, var(--tinta-clara) 12%, transparent);
  text-decoration:none;font-size:13.5px;font-weight:600;color:var(--tinta-clara)}
.mm__lista a:hover{color:var(--rojo-azul)}
.mm__lista a span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--tinta-clara-2);opacity:0;transform:translateX(-6px);
  transition:opacity var(--micro) var(--c-micro),transform var(--micro) var(--c-micro)}
.mm__lista a:hover span{opacity:1;transform:none}

.mm__velo{position:fixed;inset:0;z-index:50;background:color-mix(in srgb, #000 62%, transparent);
  opacity:0;pointer-events:none;transition:opacity var(--medio) var(--c-micro)}
.mm__velo[data-abierto]{opacity:1;pointer-events:auto}

/* La entrada escalonada del contenido del panel. */
.js .mm__g > *,.js .mm__cab{opacity:0;transform:translateY(16px)}
.js .mm[data-abierto] .mm__cab,.js .mm[data-abierto] .mm__g > *{
  opacity:1;transform:none;
  transition:opacity .5s var(--c-out) var(--r,.08s),transform .5s var(--c-out) var(--r,.08s)}
.mm__g > *:nth-child(1){--r:.14s}.mm__g > *:nth-child(2){--r:.20s}
.mm__g > *:nth-child(3){--r:.26s}.mm__g > *:nth-child(4){--r:.32s}

/* ── 5 · Móvil: cajón a pantalla completa ───────────────────────────────── */
.cab__hamb{display:none;background:none;
  border:1px solid color-mix(in srgb, var(--cab-tinta) 28%, transparent);
  width:44px;height:44px;cursor:pointer;color:var(--cab-tinta);position:relative;flex:none}
.cab__hamb i{position:absolute;left:12px;right:12px;height:2px;background:currentColor;
  transition:transform var(--medio) var(--c-out),opacity var(--micro) linear}
.cab__hamb i:nth-child(1){top:14px}.cab__hamb i:nth-child(2){top:21px}.cab__hamb i:nth-child(3){top:28px}
.cab__hamb[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cab__hamb[aria-expanded="true"] i:nth-child(2){opacity:0}
.cab__hamb[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.cajon{
  position:fixed;inset:0;z-index:58;background:var(--azul-hondo);color:var(--tinta-clara);
  padding:calc(var(--cab-riel) + var(--cab-alto) + 28px) var(--margen) 40px;
  overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path var(--cinema) var(--c-inout),visibility 0s linear var(--cinema);
}
.cajon[data-abierto]{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path var(--cinema) var(--c-inout),visibility 0s}
.cajon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grano);background-size:180px 180px;opacity:.14;mix-blend-mode:overlay}
.cajon__s{border-top:1px solid color-mix(in srgb, var(--tinta-clara) 16%, transparent);padding:16px 0}
.cajon__s > b{display:flex;gap:10px;align-items:baseline;font:830 26px/1.05 var(--palo);font-stretch:104%}
.cajon__s > b i{font:500 10px/1 var(--mono);font-style:normal;color:var(--rojo-azul)}
.cajon__s a{display:block;padding:9px 0;color:var(--tinta-clara-2);text-decoration:none;font-size:15px}
.cajon__s a:hover{color:var(--tinta-clara)}
.cajon .boton{margin-top:22px;width:100%;text-align:center}

@media(max-width:1160px){
  .cab__tel{display:none}
  .cab__t{padding:0 13px;font-size:12.5px}
}
@media(max-width:900px){
  .cab__nav{display:none}
  .cab__hamb{display:block}
  .cab .boton{display:none}
  .mm{display:none}
  :root{--cab-riel:26px;--cab-alto:64px}
}
@media(min-width:901px){.cajon{display:none}}

@media (prefers-reduced-motion:reduce){
  .cab__ticker{animation:none}
  .cab::after{animation:none}
}

/* ── El acrónimo, dibujado ──────────────────────────────────────────────
   La ley de la casa: el acrónimo de la marca NUNCA se escribe como texto.
   Donde el nombre lo pide («equipo VAO», «método VAO»), va la marca.
   El <svg> lleva su role/aria-label, así que un lector de pantalla y una IA
   siguen leyendo «Ventas de Alto Octanaje». */
.logo-linea{display:inline-block;width:auto;vertical-align:baseline;
  margin-left:.14em;fill:currentColor;transform:translateY(.04em)}
.mm__c:hover .logo-linea{color:var(--rojo-azul)}

/* La franja del ATC: existe, pero se declara sin abrir. */
.atc{position:relative;overflow:hidden}
.atc::before{content:"";position:absolute;inset:0;color:var(--tinta);pointer-events:none;
  background-image:var(--plumin);opacity:.07;z-index:0}
.atc > .env{position:relative;z-index:1}

@media(max-width:640px){.q3__medida{display:none}}