/* ══════════════════════════════════════════════════════════════════════
   LA CABECERA DE LA CASA · v3 (13-sep-2026) · la escribe _construir4.py
   Se enlaza la ÚLTIMA en cada página de LA-PAGINA y en las tres HOME, así que
   gana por cascada a _comun/vao.css y _comun/cabecera.css sin tocarlos: esos
   los comparten las otras siete propuestas.
   ══════════════════════════════════════════════════════════════════════ */

/* §0 · Sin raíl ni regla: `--cab-total` es la suma de los tres tramos y la
   consumen el hero, el mega-menú y el cajón.

   Y la curva de la casa. Héctor, 13-sep-2026: «las animaciones tienen que ser
   mucho más suaves, más animadas, más tranquilas». Medido: la barra usaba una
   curva que hace la mitad del recorrido en el primer 10 % del tiempo (un
   salto), y el menú una que no se mueve en el primer 30 % y luego barre de
   golpe. `--c-calma` es la «ease» de CSS: arranca ya, pero despacio, y frena
   largo (9 % · 51 % · 80 % del recorrido al 10 · 30 · 50 % del tiempo).
   Desde el 14-sep-2026 la barra ya no la usa: se recoge en cápsula con la
   curva «cinema» de la casa, la de stan.vision (§1). El menú y el cajón, sí. */
:root{--cab-riel:0px; --cab-regla:0px;
  --c-calma:cubic-bezier(.25,.1,.25,1)}

/* §1 · LA CÁPSULA (14-sep-2026).
   Héctor: «al subir y al bajar se achica un poco, pero no llega a ser lo
   suficientemente atractiva», y dio permiso para copiar el header de
   stan.vision (capturas 16 y 17 de `brief/capturas-hector/`).
   Medido en stan.vision ese día: arriba del todo la barra ocupa el ancho
   entero y es transparente; al bajar unos 10 px se recoge en una cápsula
   centrada que flota a 1 rem del borde de arriba, y arriba del todo se vuelve
   a abrir. Tarda 1 s, con la misma curva a la ida y a la vuelta
   (cubic-bezier(.77,0,.175,1)): arranca despacio, corre en medio y frena
   largo. Es casi la curva «cinema» de la casa (PLAN-MAESTRO §1.7: .95 s,
   cubic-bezier(.76,0,.24,1)), así que va la de la casa.
   · El armazón `.cab` ya no pinta nada y deja pasar el ratón fuera de la
     cápsula. El fondo vive en `.cab__in::before` y aparece al recogerse.
   · Arriba mide 76 px. La cápsula mide 60 y baja 16: su borde de abajo sigue
     en 76, así que ni el hero ni el mega-menú notan el cambio.
   · Esquinas rectas y sin sombra, como todo en la casa (§1.6): de stan se
     copia el gesto, no el redondeo.
   · La clase `cab--capsula` la pone `cabecera4.js`: entra a los 16 px y sale
     a los 4, para que el rebote del trackpad no la haga parpadear.
   Lo arreglado el 13-sep sigue valiendo: la barra saltaba 24 px al encoger
   por un relleno de `vao.css`; aquí no hay relleno y todo se mueve a la vez. */
.cab--casa{--capsula:820px;--capsula-alto:60px;--capsula-aire:16px;--capsula-izq:16px;--capsula-der:8px}
.cab--casa,.encogida .cab--casa{padding:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;transition:none}
/* Fuera la mancha de luz que «respiraba» (`cabecera.css`, «el bloom de
   Level2»). Se desplazaba un 2 % a cada lado cada 9 s y destapaba una franja
   junto a «Entrenamientos» que pasaba de gris a negro: el bloque que se movía.
   Y fuera el acero cepillado, que sobre un fondo transparente no tiene dónde ir. */
.cab--casa::before,.cab--casa::after{content:none}
.cab--casa .cab__in,.encogida .cab--casa .cab__in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:var(--a3);align-items:center;pointer-events:auto;
  width:100%;max-width:none;height:var(--cab-alto);margin:0 auto;
  padding:0 var(--margen);border-radius:0;background:none;box-shadow:none;
  transition:width var(--cinema) var(--c-inout),height var(--cinema) var(--c-inout),
    margin-top var(--cinema) var(--c-inout),padding var(--cinema) var(--c-inout);
}
/* El vidrio: aparece enseguida al recogerse y, al abrirse, se va al final.
   Casi opaco a propósito: al 74 % se veía gris sucio al pasar por encima de
   las franjas de hueso (medido: #444443); al 88 %, #262626.
   SIN desenfoque detrás (backdrop-filter), desde el 14-sep-2026. Al 88 % casi no
   se veía, y la primera cápsula de cada página salía a 31 fotogramas por
   segundo en entrenamientos.html (Chromium con GPU, retina). Sin él, y con las
   fotos del menú ya pintadas (`cabecera4.js` §0-bis), a 60. */
.cab--casa .cab__in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb, var(--azul-hondo) 88%, transparent);
  border:1px solid var(--filete-azul);   /* 7-oct-2026: border, no box-shadow inset (Safari lo pierde con zoom) */
  opacity:0;transition:opacity var(--medio) var(--c-micro) .55s}
.cab--capsula .cab__in,.encogida .cab--capsula .cab__in{
  width:var(--capsula);height:var(--capsula-alto);margin-top:var(--capsula-aire);
  padding:0 var(--capsula-der) 0 var(--capsula-izq)}
.cab--capsula .cab__in::before{opacity:1;transition-delay:0s}
/* Con la página ya bajada al abrirla, la cápsula sale hecha, sin recogerse. */
.cab--casa[data-arranque] .cab__in,.cab--casa[data-arranque] .cab__in::before,
.cab--casa[data-arranque] .cab__t,.cab--casa[data-arranque] .cab__ico,
.cab--casa[data-arranque] .cab__logo svg{transition:none !important}
/* El mega-menú deja su hueco al alto de arriba: la cápsula acaba en el mismo sitio. */
.encogida .mm{padding-top:calc(var(--cab-total) + 34px)}

/* §2 · El logo, a la izquierda (14-sep-2026).
   DECIDIDO por Héctor al ver la cápsula junto a la de stan.vision: «haría el
   logo de VAO más pequeño, incluso lo movería a la izquierda». Deshace el «al
   centro» del 13-sep. Con el logo al centro, la cápsula necesitaba dos columnas
   iguales y dejaba 160 px vacíos entre el logo y WhatsApp. Ahora va como
   stan.vision: logo pegado al margen, pestañas en medio con el mismo aire a los
   dos lados, y los botones a la derecha. Al recogerse, las pestañas apenas se
   mueven (6 px a 1440): el logo y los botones se cierran hacia ellas.
   Va a la izquierda arriba Y en la cápsula: si sólo cambiara al recogerse,
   cruzaría media pantalla de lado mientras bajas.

   SU TAMAÑO SALE DE LA BARRA, no de un número a ojo. Héctor, 13-sep-2026:
   «busca un tamaño que concuerde con el header». En escritorio, WhatsApp y
   «Reservar diagnóstico» miden 44 px en una barra de 76: el 58 %. El logo mide
   ese mismo 58 %, así que su círculo arranca a ras de los botones y su raya
   acaba a ras de ellos (el dibujo llena su caja de arriba abajo: 1297 × 598).
   En móvil la barra mide 64 y la misma cuenta da 37 px.
   En la cápsula, la misma cuenta sobre su alto: 60 → 35 px (móvil: 56 → 32).
   Encoge a la vez que la cápsula y con su misma curva. Los botones no encogen:
   el 13-sep se probó y el texto del rojo quedaba más pequeño que el de las
   pestañas. */
.cab--casa{--logo-alto:calc(var(--cab-alto) * 44 / 76)}
.cab--capsula{--logo-alto:calc(var(--capsula-alto) * 44 / 76)}
.cab--casa .cab__logo{grid-column:1;grid-row:1;justify-self:start}
.cab--casa .cab__logo svg,
.encogida .cab--casa .cab__logo svg{
  height:var(--logo-alto);width:calc(var(--logo-alto) * 1297 / 598);
  transform:none;transition:height var(--cinema) var(--c-inout),width var(--cinema) var(--c-inout);
}
/* Sin la raya roja que se dibujaba debajo al pasar el ratón (`cabecera.css`,
   «su filete que se dibuja al pasar»). Héctor, 13-sep-2026: no pega. */
.cab--casa .cab__logo::after{content:none}
.cab--casa .cab__nav{grid-column:2;grid-row:1;justify-self:center;align-self:stretch;margin-left:0}
.cab--casa .cab__d{grid-column:3;grid-row:1;justify-self:end;margin-left:0}

/* §3 · Las pestañas: un icono y su nombre, quietos.
   Héctor, 14-sep-2026: «si pincho en entrenamiento o en cualquier otro botón,
   las letras salen desde abajo o desde arriba». Era la etiqueta doble de
   `cabecera.css` («una sale por arriba y la otra entra por abajo»). Ahora el
   nombre va una sola vez (`cab()`) y lo único que cambia es el color, en
   0,18 s, como pide PLAN-MAESTRO §1.6 para los botones.
   Fuera también las rayas entre pestañas, el bloque rojo que crecía por abajo
   y la trama del botón abierto: dentro de una cápsula, las tres dibujaban
   cajas. La pestaña abierta se ve en rojo: «el rótulo activo del menú» es uno
   de los tres sitios del rojo (PLAN-MAESTRO §1.4). */
.cab--casa .cab__t,.cab--casa .cab__nav .cab__t:last-child{
  padding:0 15px;gap:0;white-space:nowrap;border:0;opacity:1;
  transition:padding var(--cinema) var(--c-inout)}
.cab--casa .cab__t::before,.cab--casa .cab__t::after{content:none}
.cab--casa .cab__lbl{height:auto;overflow:visible;
  color:color-mix(in srgb, var(--cab-tinta) 80%, transparent);
  transition:color var(--micro) var(--c-micro)}
.cab--casa .cab__t:hover .cab__lbl,.cab--casa .cab__t:focus-visible .cab__lbl{color:var(--cab-tinta)}
.cab--casa .cab__t[aria-expanded="true"] .cab__lbl{color:var(--rojo-azul)}
.cab__ico{display:inline-flex;flex:none;width:18px;height:18px;
  color:color-mix(in srgb, var(--cab-tinta) 46%, transparent);
  transition:color var(--micro) var(--c-micro)}
.cab__ico svg{display:block;width:100%;height:100%}
.cab--casa .cab__t .cab__ico{margin-right:9px;overflow:hidden;
  transition:color var(--micro) var(--c-micro),width var(--cinema) var(--c-inout),
    margin-right var(--cinema) var(--c-inout),opacity var(--medio) var(--c-micro) .5s}
.cab--casa .cab__t .cab__ico svg{flex:none;width:18px;height:18px}
.cab--casa .cab__t:hover .cab__ico{color:var(--cab-tinta)}
.cab--casa .cab__t[aria-expanded="true"] .cab__ico{color:var(--rojo-azul)}
/* En la cápsula los iconos se recogen con ella, igual que stan.vision recoge su
   logo («stan+vision» → «S+V»). Con iconos mediría 960 px en vez de 820. */
.cab--capsula .cab__t,.cab--capsula .cab__nav .cab__t:last-child{padding:0 12px}
.cab--capsula .cab__t .cab__ico{width:0;margin-right:0;opacity:0;
  transition:color var(--micro) var(--c-micro),width var(--cinema) var(--c-inout),
    margin-right var(--cinema) var(--c-inout),opacity var(--medio) var(--c-micro)}

/* §4 · El botón no cambia de tamaño al encoger: si cambiara, sería otro salto.
   44 px en los dos estados, como el WhatsApp. Al pasar el ratón se aclara en
   0,18 s (PLAN-MAESTRO §1.6), sin la capa clara que subía desde abajo. */
.cab--casa .boton,.encogida .cab--casa .boton{height:44px;padding-inline:22px;font-size:13.5px;
  transition:filter var(--micro) var(--c-micro)}
.cab--casa .boton::after{content:none}

/* §5 · WhatsApp. Monocromo, en el color de la barra: esta web no tiene ni un
   elemento verde y no lo va a tener por un icono. */
.cab__wa{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;color:var(--cab-tinta);text-decoration:none;
  border:1px solid color-mix(in srgb, var(--cab-tinta) 28%, transparent);
  transition:background var(--micro) var(--c-micro),border-color var(--micro) var(--c-micro)}
.cab__wa:hover{background:color-mix(in srgb, var(--cab-tinta) 12%, transparent);
  border-color:color-mix(in srgb, var(--cab-tinta) 62%, transparent)}

/* §6 · El Blog en modo revista: lo último en grande y tres más con su foto. */
.mm__rev{background:var(--azul-hondo);padding:12px 24px 18px;display:flex;flex-direction:column}
.mm__rev-i{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;
  padding:11px 0;border-bottom:1px solid color-mix(in srgb, var(--tinta-clara) 11%, transparent);
  text-decoration:none;color:var(--tinta-clara)}
.mm__rev-f{display:block;width:112px;height:64px;overflow:hidden}
.mm__rev-f img{display:block;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__rev-i:hover .mm__rev-f img{transform:scale(1.07);filter:grayscale(.22) contrast(1.04) brightness(.76)}
.mm__rev-t small{display:block;margin-bottom:6px;font:500 10px/1.3 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.mm__rev-t small b{color:var(--rojo-azul);font-weight:500}
.mm__rev-t strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:14.5px;line-height:1.25;font-weight:600;transition:color var(--micro) var(--c-micro)}
.mm__rev-i:hover strong{color:var(--rojo-azul)}
.mm__todos{align-self:flex-start;margin-top:14px;padding-bottom:3px;font-size:13px;font-weight:600;
  color:var(--tinta-clara);text-decoration:none;border-bottom:1px solid var(--rojo)}
.mm__todos:hover{color:var(--rojo-azul)}

/* §6-bis · El telón del mega-menú, sin prisa. La misma cortina de arriba abajo,
   con la curva de la casa en vez del arranque en seco; las tarjetas entran
   después, escalonadas, y el velo oscuro llega a la vez que la cortina. */
.mm{transition:clip-path .85s var(--c-calma),visibility 0s linear .85s}
.mm[data-abierto]{transition:clip-path .85s var(--c-calma),visibility 0s}
.js .mm[data-abierto] .mm__cab,.js .mm[data-abierto] .mm__g > *{
  transition:opacity .7s var(--c-calma) var(--r,.1s),transform .7s var(--c-calma) var(--r,.1s)}
.mm__g > *:nth-child(1){--r:.16s}.mm__g > *:nth-child(2){--r:.24s}
.mm__g > *:nth-child(3){--r:.32s}.mm__g > *:nth-child(4){--r:.4s}
.mm__velo{transition:opacity .6s var(--c-calma)}

/* §7 · Los anchos estrechos. Por debajo de 1260 px las pestañas pasan a la
   hamburguesa (se medía así con el logo al centro y se deja igual).
   Con el logo a la izquierda (14-sep), la hamburguesa va a la DERECHA, la
   última: cada lado lleva algo, el logo a un lado y los botones al otro. Es la
   variante que se probó el 13-sep: comparte celda con WhatsApp y el botón rojo,
   que se apartan lo que ella mide. */
@media(max-width:1260px){
  .cab--casa .cab__nav{display:none}
  .cab--casa .cab__hamb{display:block;grid-column:3;grid-row:1;justify-self:end}
  .cab--casa .cab__d{margin-right:calc(44px + var(--a3))}
  .mm{display:none}
  .cajon--casa{display:flex}
  .cab--casa{--capsula:560px}
}
/* En el móvil, los dos botones sin caja (el logo ya sale a 37 px de alto por su
   cuenta, §2): dos cuadrados con borde en 390 px pesaban más que
   el propio logo. El toque sigue siendo de 44 × 44. */
@media(max-width:900px){
  .cab--casa .cab__d{gap:0;margin-right:44px}
  .cab--casa .cab__hamb,.cab--casa .cab__wa{border-color:transparent;background:none}
  .cab--casa .cab__wa svg{width:21px;height:21px}
  /* En el móvil la cápsula es una barra que se despega 12 px de cada lado y 8
     de arriba: 8 + 56 = 64, el alto de arriba, y el cajón no se mueve. */
  .cab--casa{--capsula:calc(100% - 24px);--capsula-alto:56px;--capsula-aire:8px;
    --capsula-izq:14px;--capsula-der:4px}
}

/* §7-bis · El cajón del móvil.
   Se abre con un fundido y el contenido sube un poco, escalonado. Antes era un
   telón con `clip-path`, que en un móvil repinta la pantalla entera en cada
   fotograma, con una capa de grano mezclada encima que sobre este negro no
   se ve (±1 nivel de 255): fuera. «Reservar diagnóstico» va pegado abajo y
   siempre a la vista, y cada enlace mide 44 px de alto, lo que pide un dedo. */
.cajon--casa{
  flex-direction:column;clip-path:none;opacity:0;
  padding:calc(var(--cab-alto) + 10px) var(--margen) 0;
  transition:opacity .5s var(--c-calma),visibility 0s linear .5s}
.cajon--casa[data-abierto]{clip-path:none;opacity:1;transition:opacity .5s var(--c-calma),visibility 0s}
.cajon--casa::after{content:none}
.cajon--casa > *{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--c-calma),transform .6s var(--c-calma)}
.cajon--casa[data-abierto] > *{opacity:1;transform:none}
.cajon--casa[data-abierto] > :nth-child(2){transition-delay:.05s}
.cajon--casa[data-abierto] > :nth-child(3){transition-delay:.1s}
.cajon--casa[data-abierto] > :nth-child(4){transition-delay:.15s}
.cajon--casa[data-abierto] > :nth-child(5){transition-delay:.2s}
.cajon--casa[data-abierto] > :nth-child(6){transition-delay:.2s}
.cajon--casa .cajon__s{flex:none;padding:16px 0 8px}
.cajon--casa .cajon__s:first-child{border-top:0}
.cajon--casa .cajon__s > b{align-items:center;gap:12px;margin-bottom:4px;font-size:23px}
.cajon--casa .cajon__s > b .cab__ico{width:22px;height:22px;color:var(--rojo-azul)}
.cajon--casa .cajon__s a{display:flex;align-items:center;min-height:44px;padding:0;
  font-size:16px;line-height:1.3;color:color-mix(in srgb, var(--tinta-clara) 78%, transparent)}
.cajon--casa .cajon__s a:active{color:var(--tinta-clara)}
.cajon--casa .cajon__s a .logo-linea{margin-left:.3em;transform:translateY(.2em)}
.cajon--casa .cajon__hablar{padding-bottom:12px}
.cajon--casa .cajon__hablar a{font:500 12.5px/1.3 var(--mono);letter-spacing:.06em}
.cajon__wa{display:flex !important;align-items:center;gap:11px}
.cajon__wa svg{flex:none}
.cajon__pie{position:sticky;bottom:0;flex:none;margin:auto calc(var(--margen) * -1) 0;
  padding:18px var(--margen) calc(16px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, var(--azul-hondo) 72%, color-mix(in srgb, var(--azul-hondo) 0%, transparent))}
.cajon--casa .cajon__pie .boton{width:100%;margin:0;height:54px}
/* Con el cajón abierto la barra va opaca: es translúcida, y al bajar dentro
   del cajón los enlaces se transparentaban por debajo del logo. */
html:has(.cajon--casa[data-abierto]) .cab--casa{background:var(--azul-hondo);backdrop-filter:none}

/* ══ §8 · EL FORMULARIO DEL FINAL · #agendar ═════════════════════════════ */
.agendar{position:relative;overflow:hidden;isolation:isolate;
  background:var(--azul-hondo);color:var(--tinta-clara);padding:var(--franja-peso) 0}
.agendar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 70% at 90% 12%, color-mix(in srgb, var(--rojo) 34%, transparent), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--tinta-clara) 7%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tinta-clara) 5%, transparent) 0 1px, transparent 1px 120px)}
.agendar::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grano);background-size:180px 180px;opacity:.14;mix-blend-mode:overlay}
.agendar__g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px,6vw,104px);align-items:start}
.agendar__izq{padding-top:10px}
.agendar__izq .rotulo{color:color-mix(in srgb, var(--tinta-clara) 62%, transparent)}
.agendar h2{font-size:clamp(44px,5.4vw,82px);line-height:.94;letter-spacing:-.035em;
  margin:22px 0 24px;max-width:9ch}
.agendar__p{margin:0;max-width:40ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;
  color:var(--tinta-clara-2)}
.agendar__canales{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:34px;
  background:color-mix(in srgb, var(--tinta-clara) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--tinta-clara) 14%, transparent)}
.agendar__canal{display:flex;flex-direction:column;gap:8px;padding:16px 18px;
  background:var(--azul-hondo);color:var(--tinta-clara);text-decoration:none;
  transition:background var(--micro) var(--c-micro)}
.agendar__canal:hover{background:color-mix(in srgb, var(--tinta-clara) 8%, var(--azul-hondo))}
.agendar__canal small{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-clara-2)}
.agendar__canal span{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.agendar__canal svg{flex:none}
/* POSTREUNIÓN 2-oct-2026 · Fuera los tres pasos numerados (Héctor: «no importa que quede espacio
   vacío… y que los números estén abajo»). En escritorio la columna se estira hasta la tarjeta y los
   teléfonos bajan a su pie; el aire queda en medio. En una columna siguen tras el texto. */
@media(min-width:1061px){
  .agendar__izq{align-self:stretch;display:flex;flex-direction:column}
  .agendar__canales{margin-top:auto}
  .agendar__p{margin-bottom:34px}
}

/* La tarjeta: hueso, troquelada como el botón de la barra, con su filo rojo.
   Al llegar desde un «Reservar diagnóstico» se enciende un marco rojo una vez. */
.agendar__card{position:relative;background:var(--papel);color:var(--tinta);
  padding:clamp(26px,3.2vw,44px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.agendar__card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rojo)}
.agendar__card::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:3px solid var(--rojo);opacity:0}
.agendar__card--aviso::after{animation:agendar-aviso 1.4s var(--c-out)}
@keyframes agendar-aviso{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.agendar__k{margin:0 0 12px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo-papel)}
.agendar__card h3{margin:0 0 24px;font-size:clamp(26px,2.3vw,34px);line-height:1.02;letter-spacing:-.02em}
.agendar__fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.agendar__campo{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.agendar__campo label{font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-2)}
.agendar__campo input,.agendar__campo select,.agendar__campo textarea{
  width:100%;box-sizing:border-box;height:48px;padding:0 14px;border-radius:0;
  font:500 15px/1.3 var(--palo);color:var(--tinta);
  background-color:color-mix(in srgb, #fff 55%, var(--papel));
  border:1px solid color-mix(in srgb, var(--tinta) 20%, transparent);
  transition:border-color var(--micro) var(--c-micro),box-shadow var(--micro) var(--c-micro)}
.agendar__campo select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.agendar__campo textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.45}
.agendar__campo input::placeholder,.agendar__campo textarea::placeholder{
  color:color-mix(in srgb, var(--tinta) 42%, transparent)}
.agendar__campo input:focus,.agendar__campo select:focus,.agendar__campo textarea:focus{
  outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px color-mix(in srgb, var(--rojo) 20%, transparent)}
.agendar__boton{width:100%;height:56px;margin-top:8px;border:0;cursor:pointer;font-size:15px}
.agendar__legal{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--tinta-2)}
.agendar__nota{margin:14px 0 0;padding:11px 14px;border-left:3px solid var(--rojo);
  background:color-mix(in srgb, var(--rojo) 8%, transparent);font-size:13.5px;line-height:1.45}
.agendar__ok h3{margin-bottom:12px}
.agendar__ok p{margin:0;font-size:16px;line-height:1.5;color:var(--tinta-2)}
.agendar__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.agendar [hidden]{display:none !important}
@media(max-width:1060px){
  .agendar__g{grid-template-columns:minmax(0,1fr)}
  .agendar h2{max-width:12ch}
}
@media(max-width:560px){
  .agendar__fila,.agendar__canales{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .cab--casa .cab__in,.encogida .cab--casa .cab__in,.cab--casa .cab__in::before,.cab--casa .cab__t,
  .cab--casa .cab__nav .cab__t:last-child,.cab--casa .cab__t .cab__ico,.cab--capsula .cab__t .cab__ico,
  .cab--casa .cab__logo svg,.encogida .cab--casa .cab__logo svg{transition:none}
  .cajon--casa,.cajon--casa[data-abierto],.cajon--casa > *{transition:none}
  .agendar__card--aviso::after{animation:none}
}

/* ══ §9 · SIN BANDAS AL REBOTAR ═══════════════════════════════════════════ */
/* Héctor, 14-sep-2026: «que al hacer scroll, hacia arriba o hacia abajo, no me
   salgan bandas blancas, ni si me muevo a los lados».
   Medido ese día en las 18 páginas (las 15 de la casa y las 3 HOME), a 1440 y
   390 px: todas empiezan en una portada `--azul-hondo`, todas acaban en el
   `.pie` del mismo negro y ninguna se sale por los lados. La banda era el
   lienzo: `vao.css` pinta el hueso en <body>, y el navegador lo estira fuera
   de la página cuando el trackpad tira más allá del borde.
   1 · Sin rebote arriba y abajo. Va también en <body> porque Chrome lo lee de
       ahí mientras `overflow-x` esté en <body> y no en <html>.
   2 · Sin rebote a los lados, sólo donde entra `-apple-system-body`: Safari
       (26.5, sí; Chromium 152, no). En Chrome y Firefox ese valor apaga el
       «atrás» con dos dedos; Safari conserva el gesto.
   3 · Si algo rebota igual, el hueco sale del negro de los bordes y no del
       hueso. El <body> sigue pintando su hueso encima: la página no cambia. */
html{background-color:var(--azul-hondo)}
html,body{overscroll-behavior-y:none}
@supports (font:-apple-system-body){html,body{overscroll-behavior-x:none}}

/* ══ PROPUESTA 18-OCT · el pie: sellos, legales, redes y el WhatsApp flotante (_construir4._pie_18) ══ */
:root{--wa-verde:#1E7350;--wa-verde-2:#185E41}

/* Las redes, bajo la frase de la marca: el mismo cuadro de filete que el WhatsApp de la cabecera. */
.pie__redes{display:flex;gap:8px;margin-top:var(--a3)}
.pie__g .pie__redes a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;color:var(--tinta-clara);border:1px solid color-mix(in srgb, var(--tinta-clara) 24%, transparent);
  transition:background var(--micro) var(--c-micro),border-color var(--micro) var(--c-micro),color var(--micro) var(--c-micro)}
.pie__g .pie__redes a:hover{color:var(--tinta-clara);background:color-mix(in srgb, var(--tinta-clara) 10%, transparent);
  border-color:color-mix(in srgb, var(--tinta-clara) 62%, transparent)}
.pie__redes svg{width:18px;height:18px}

/* Los sellos, centrados bajo su rótulo y siempre monocromos (Héctor, 20-oct-2026: «centralices estas
   marcas […] al pinchar sobre ellas, no puede salir el color»): al pasar sólo se aclaran y suben un poco. */
.pie__sellos{display:flex;flex-direction:column;align-items:center;gap:var(--a2);text-align:center;
  padding-block:var(--a3);border-bottom:1px solid var(--filete-azul)}
.pie__sellos-r{font-family:var(--mono);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-clara-2)}
.pie__sellos-l{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:8px clamp(16px,4vw,56px)}
.sello{display:flex;align-items:center;height:64px;padding:0 14px;
  transition:transform var(--medio) var(--c-out)}
.sello img{width:auto;filter:brightness(0) invert(.93);opacity:.74;
  transition:filter var(--medio) var(--c-out),opacity var(--medio) var(--c-out)}
.sello--proexca img{height:24px}
.sello--canarias img{height:34px}
.sello--gobierno img{height:37px}
.sello--ue{gap:11px;color:var(--tinta-clara);opacity:.74;transition:background-color var(--medio) var(--c-out),
  color var(--medio) var(--c-out),opacity var(--medio) var(--c-out)}
.sello__ue{width:39px;height:26px;flex:none}
/* En reposo, la versión monocroma del manual de la UE para fondos oscuros: filete y estrellas claros. */
.sello__ue-campo{fill:transparent;stroke:currentColor;stroke-width:24;
  transition:fill var(--medio) var(--c-out),stroke var(--medio) var(--c-out)}
.sello__ue-est{fill:currentColor;transition:fill var(--medio) var(--c-out)}
.sello__ue-t{display:flex;flex-direction:column;font-size:11px;line-height:1.25;max-width:17ch;text-align:left}
.sello__ue-t b{font-size:12px;font-weight:650}
@media (hover:hover){
  .sello:hover{transform:translateY(-2px)}
  .sello:hover img{filter:brightness(0) invert(1);opacity:1}
  .sello--ue:hover{color:#fff;opacity:1}
}

/* La barra de abajo: el © con los tres legales a su lado, y la nota de los logotipos a la derecha. */
.pie__b--18{align-items:baseline}
.pie__b-i{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 28px}
.pie__legal{display:flex;flex-wrap:wrap;gap:0 20px}
.pie__legal a{display:inline-block;padding-block:6px;text-decoration:none;color:var(--tinta-clara-2);
  transition:color var(--micro) var(--c-micro)}
.pie__legal a:hover{color:var(--tinta-clara);text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .pie__sellos-l{gap:4px 8px}
  .sello{height:56px;padding:0 12px}
  .sello--proexca img{height:21px}
  .sello--canarias img{height:30px}
  .sello--gobierno img{height:32px}
}
@media(min-width:721px){.pie__b--18{padding-right:76px}}   /* la esquina es del WhatsApp flotante */
@media(max-width:720px){
  /* Hueco al final para que el botón flotante no tape la última línea del pie. */
  .pie{padding-bottom:calc(var(--a3) + 76px + env(safe-area-inset-bottom))}
  .pie__b--18{flex-direction:column;gap:var(--a2)}
  .pie__legal a{padding-block:9px}
}

/* El WhatsApp flotante. Verde de botella, no el verde de la marca: con el blanco da 5,8:1 y se separa
   tanto del papel como del negro (más de 3:1 con los dos). Cuadrado, como los botones de la casa. */
.wa-flota{position:fixed;z-index:45;right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;height:56px;
  background:var(--wa-verde);color:#fff;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 30px -14px rgba(10,11,12,.6),0 3px 8px -3px rgba(10,11,12,.32);
  transition:opacity var(--medio) var(--c-out),transform var(--medio) var(--c-out),
    background-color var(--micro) var(--c-micro),visibility 0s linear 0s}
.wa-flota__i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none}
/* El rótulo sale del propio botón hacia la izquierda: se destapa con clip-path, sin mover la maqueta. */
.wa-flota__t{position:absolute;top:0;right:100%;height:100%;display:flex;align-items:center;padding:0 2px 0 20px;
  background:inherit;white-space:nowrap;font-size:14.5px;font-weight:600;letter-spacing:.005em;
  clip-path:inset(0 0 0 100%);transition:clip-path var(--medio) var(--c-out)}
.wa-flota:hover{background:var(--wa-verde-2)}
.wa-flota:hover .wa-flota__t,.wa-flota:focus-visible .wa-flota__t{clip-path:inset(0)}
.wa-flota:active{transform:scale(.96);transition-duration:.1s}
.wa-flota--fuera{opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;
  transition:opacity var(--medio) var(--c-out),transform var(--medio) var(--c-out),visibility 0s linear var(--medio)}
@media(min-width:900px){.wa-flota{right:28px;bottom:28px}}
@media(max-width:520px){.wa-flota,.wa-flota__i{height:52px}.wa-flota__i{width:52px}}
@media (prefers-reduced-motion:reduce){
  .wa-flota,.wa-flota--fuera,.wa-flota__t,.sello,.sello img,.sello--ue{transition-property:opacity,background-color,color,filter}
  .wa-flota__t{clip-path:none;opacity:0}
  .wa-flota:hover .wa-flota__t,.wa-flota:focus-visible .wa-flota__t{opacity:1}
  .wa-flota--fuera,.wa-flota:active,.sello:hover{transform:none}
}
@media print{.wa-flota{display:none}}

/* ══ §10 · PROPUESTA 18-OCT-2026 · LA CABECERA DE MÓVIL Y LA NEWSLETTER ═══════
   La escribe `_cabecera18.py`; sólo sale con VAO_PROPUESTA_18=18-oct.
   La curva de las hojas de iOS (`--c-hoja`): arranca rápida y se posa larga,
   sin rebote, porque nada se lanza con el dedo: se toca y se abre. */
:root{--c-hoja:cubic-bezier(.32,.72,0,1)}

/* · La Newsletter en la barra de escritorio. Un rótulo en mono, como los de la
     casa, y su sobre: se lee como un acceso, no como otro botón. */
.cab__news{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 8px;
  color:color-mix(in srgb, var(--cab-tinta) 70%, transparent);text-decoration:none;white-space:nowrap;
  transition:color var(--micro) var(--c-micro)}
.cab__news svg{flex:none;width:18px;height:18px;color:color-mix(in srgb, var(--cab-tinta) 46%, transparent);
  transition:color var(--micro) var(--c-micro)}
.cab__news-t{display:inline-block;overflow:hidden;max-width:12em;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  transition:max-width var(--cinema) var(--c-inout),opacity var(--medio) var(--c-micro) .5s}
.cab__news:hover,.cab__news:focus-visible{color:var(--cab-tinta)}
.cab__news:hover svg,.cab__news:focus-visible svg{color:var(--rojo-azul)}
/* En la cápsula se queda el sobre solo, como las pestañas pierden su icono. */
@media(min-width:1261px){.cab--casa{--capsula:880px}}
.cab--capsula .cab__news{padding:0 10px;gap:0}
.cab--capsula .cab__news-t{max-width:0;opacity:0;
  transition:max-width var(--cinema) var(--c-inout),opacity var(--micro) var(--c-micro)}
@media(max-width:1260px){
  .cab--casa .cab__news{display:none}
}

/* · En tableta, «Solicitar información» vuelve a la barra: hay sitio. */
@media(min-width:600px) and (max-width:900px){
  .cab--casa .cab__d{gap:6px}
  .cab--casa .cab__d .boton{display:inline-flex;align-items:center;height:40px;padding-inline:18px;font-size:13px;
    transition:opacity .2s var(--c-calma),visibility 0s}
  /* Con el menú abierto, el rojo ya está abajo, pegado al pulgar: no dos a la vez. */
  html:has(.cajon--casa[data-abierto]) .cab--casa .cab__d .boton{opacity:0;visibility:hidden;
    transition:opacity .16s linear,visibility 0s linear .16s}
}

/* · El cajón. Fondo que funde y contenido que baja 10 px desde la barra, de
     donde sale: al cerrar, vuelve por el mismo sitio y más deprisa. */
.cajon--casa.cajon--18{
  padding:calc(var(--cab-alto) + 6px) max(var(--margen), env(safe-area-inset-right, 0px)) 0
    max(var(--margen), env(safe-area-inset-left, 0px));
  overscroll-behavior:contain;outline:none;
  transition:opacity .26s var(--c-calma),visibility 0s linear .26s}
.cajon--casa.cajon--18[data-abierto]{transition:opacity .32s var(--c-calma),visibility 0s}
.cajon--casa.cajon--18 > *,.cajon--18 .cajon__nav > .cajon__s{opacity:0;transform:translateY(-10px);
  transition:opacity .2s var(--c-calma),transform .26s var(--c-calma);transition-delay:0s}
.cajon--casa.cajon--18[data-abierto] > *,.cajon--18[data-abierto] .cajon__nav > .cajon__s{
  opacity:1;transform:none;
  transition:opacity .42s var(--c-calma),transform .56s var(--c-hoja);transition-delay:var(--d,0s)}
.cajon--casa.cajon--18 > .cajon__nav{opacity:1;transform:none}
.cajon--18 .cajon__nav > .cajon__s:nth-child(2){--d:.04s}
.cajon--18 .cajon__nav > .cajon__s:nth-child(3){--d:.08s}
.cajon--18 .cajon__nav > .cajon__s:nth-child(4){--d:.12s}
.cajon--18 > .cajon__news{--d:.16s}
.cajon--18 > .cajon__hablar{--d:.2s}
.cajon--18 > .cajon__pie{--d:.08s}
/* Con el menú abierto, el fondo no se mueve. */
html:has(.cajon--casa[data-abierto]),html:has(.cajon--casa[data-abierto]) body{overflow:hidden}

/* · El índice: cuatro rótulos grandes, uno abierto a la vez. */
.cajon--18 .cajon__nav{display:flex;flex-direction:column;flex:none}
.cajon--casa.cajon--18 .cajon__s{flex:none;padding:0;border-top:0;
  border-bottom:1px solid color-mix(in srgb, var(--tinta-clara) 12%, transparent)}
.cajon__t{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;margin:0;padding:0;
  background:none;border:0;border-radius:0;cursor:pointer;text-align:left;color:var(--tinta-clara);
  font:800 26px/1.05 var(--palo);font-stretch:104%;letter-spacing:-.02em;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cajon__t .cab__ico{width:22px;height:22px;color:color-mix(in srgb, var(--tinta-clara) 42%, transparent);
  transition:color .3s var(--c-calma)}
.cajon__tt{flex:1;min-width:0;transition:opacity .1s linear}
.cajon__t:active .cajon__tt{opacity:.62;transition:none}
.cajon__chev{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;
  margin-right:-8px;color:var(--tinta-clara-2);transition:transform .44s var(--c-hoja),color .3s var(--c-calma)}
.cajon__chev svg{width:18px;height:18px}
.cajon__t[aria-expanded="true"] .cab__ico{color:var(--rojo-azul)}
.cajon__t[aria-expanded="true"] .cajon__chev{transform:rotate(180deg);color:var(--tinta-clara)}
.cajon__t:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:4px}

.cajon__sub{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .44s var(--c-hoja),visibility 0s linear .44s}
.cajon__t[aria-expanded="true"] + .cajon__sub{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .5s var(--c-hoja),visibility 0s}
.cajon__sub-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;
  margin-left:10px;padding:0 0 0 25px;border-left:1px solid color-mix(in srgb, var(--tinta-clara) 16%, transparent)}
.cajon__sub-in > :last-child{margin-bottom:14px}
.cajon--casa.cajon--18 .cajon__sub-in a{position:relative;display:flex;align-items:center;min-height:48px;
  padding:6px 0;font:500 17px/1.3 var(--palo);color:color-mix(in srgb, var(--tinta-clara) 72%, transparent);
  text-decoration:none;opacity:0;transform:translateY(-6px);
  transition:opacity .18s var(--c-calma),transform .3s var(--c-hoja),color .15s linear}
.cajon__t[aria-expanded="true"] + .cajon__sub a{opacity:1;transform:none;
  transition:opacity .36s var(--c-calma) var(--d,.06s),transform .5s var(--c-hoja) var(--d,.06s),color .15s linear}
.cajon__sub-in a:nth-child(2){--d:.1s}.cajon__sub-in a:nth-child(3){--d:.14s}
.cajon--casa.cajon--18 .cajon__sub-in a:active{color:var(--tinta-clara);transition:none}
.cajon--casa.cajon--18 .cajon__sub-in a[aria-current="page"]{color:var(--tinta-clara)}
.cajon__sub-in a[aria-current="page"]::before{content:"";position:absolute;left:-26px;top:50%;
  width:3px;height:22px;margin-top:-11px;background:var(--rojo)}
.cajon__sub-in a:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:2px}

/* · La Newsletter: una fila propia, con borde fino; no compite con el rojo. */
.cajon__news{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:14px;row-gap:5px;
  align-items:center;flex:none;margin:22px 0 0;padding:14px 12px 14px 16px;min-height:64px;
  color:var(--tinta-clara);text-decoration:none;
  background:color-mix(in srgb, var(--tinta-clara) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--tinta-clara) 16%, transparent);
  transition:background .15s linear,border-color .15s linear}
.cajon__news > svg{grid-row:1 / 3;width:22px;height:22px;color:var(--rojo-azul)}
.cajon__news b{font:700 16px/1.15 var(--palo)}
.cajon__news small{grid-column:2;font:500 10.5px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-clara-2)}
.cajon__flecha{grid-column:3;grid-row:1 / 3;display:inline-flex;color:var(--tinta-clara-2)}
.cajon__flecha svg{width:18px;height:18px}
.cajon__news:active{background:color-mix(in srgb, var(--tinta-clara) 10%, transparent);transition:none}
.cajon__news:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:3px}

/* · Hablar con nosotros: cada teléfono con su icono, en una fila de 44 px. */
.cajon--casa.cajon--18 .cajon__hablar{display:flex;flex-direction:column;padding:24px 0 18px;border:0}
.cajon__k{margin:0 0 6px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-clara-2)}
.cajon--casa.cajon--18 .cajon__hablar a{display:flex;align-items:center;gap:12px;min-height:44px;
  font:500 13px/1.3 var(--mono);letter-spacing:.04em;color:color-mix(in srgb, var(--tinta-clara) 82%, transparent)}
.cajon--18 .cajon__hablar svg{flex:none;width:18px;height:18px;color:var(--tinta-clara-2)}
.cajon--casa.cajon--18 .cajon__hablar a:active{color:var(--tinta-clara)}
.cajon--18 .cajon__hablar a:focus-visible{outline:2px solid var(--rojo-azul);outline-offset:2px}
.cajon--18 .cajon__pie{padding-left:max(var(--margen), env(safe-area-inset-left, 0px));
  padding-right:max(var(--margen), env(safe-area-inset-right, 0px))}

/* · Tableta: el índice a la izquierda y, a su lado, la Newsletter y los teléfonos;
     «Solicitar información» abajo, de lado a lado. */
@media(min-width:700px) and (max-width:1260px){
  .cajon--casa.cajon--18{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;column-gap:clamp(32px,6vw,72px);align-content:stretch}
  .cajon--18 > .cajon__nav{grid-column:1;grid-row:1 / 4}
  .cajon--18 > .cajon__news{grid-column:2;grid-row:1;margin-top:2px;align-self:start}
  .cajon--18 > .cajon__hablar{grid-column:2;grid-row:2}
  .cajon--18 > .cajon__pie{grid-column:1 / -1;grid-row:4;align-self:end}
  .cajon--casa.cajon--18 .cajon__hablar a{letter-spacing:.01em}
}

@media (prefers-reduced-motion:reduce){
  .cab__news-t,.cajon__chev,.cajon__sub,.cajon__t[aria-expanded="true"] + .cajon__sub,
  .cajon--casa.cajon--18 .cajon__sub-in a,.cajon__t[aria-expanded="true"] + .cajon__sub a{transition:none}
  .cajon--casa.cajon--18 > *,.cajon--18 .cajon__nav > .cajon__s,
  .cajon--casa.cajon--18[data-abierto] > *,.cajon--18[data-abierto] .cajon__nav > .cajon__s{
    transform:none;transition:opacity .16s linear}
  .cajon--casa.cajon--18 .cajon__sub-in a{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .cajon__news{background:color-mix(in srgb, var(--tinta-clara) 6%, var(--azul-hondo))}
}


/* ══ §11 · PROPUESTA 18-OCT-2026 · EL REPASO DEL RESPONSIVE (`_responsive18.py`) ═══════════════════════ */

/* · 1 · Anclas. Toda sección con id para con aire bajo la cabecera al saltar a ella (enlace, `#agendar`,
       `#newsletter`, la hamburguesa…). `:where()` no pesa nada: las secciones que ya traían su propio
       `scroll-margin-top` (88 px, 100 px…) lo conservan. */
:where(section[id],article[id],aside[id],form[id]){scroll-margin-top:24px}
/* La Newsletter en franja tiene poco relleno arriba (36-52 px): su titular quedaba debajo de la barra. */
.nl.nl--linea{scroll-margin-top:calc(var(--cab-total) + 28px - clamp(36px,4vw,52px))}

/* · 2 · La portada de la home en escritorio bajo. La primera pantalla es un escenario clavado de 100svh:
       lo que no cabe no se ve. El titular se mide con el alto (`13svh − 36px`: 58 px a 720, 64 a 768,
       76 a 864, 81 a 900) además de con el ancho, y los aires se cuentan en `svh`. */
@media (min-width:821px) and (max-height:940px){
  .pz--firma .eng-pantalla.eng-uno{justify-content:safe center;
    padding-top:calc(var(--cab-total) + 28px);padding-bottom:clamp(14px,2.4svh,40px)}
  .pz.pz--firma .eng-bloque h1{margin-top:0;margin-bottom:clamp(14px,2.6svh,32px);
    font-size:clamp(38px,min(5.75vw,calc(13svh - 36px)),86px)}
  .pz--firma .eng-entradilla{margin-bottom:clamp(16px,2.6svh,38px)}
  .pz--firma .eng-pie-uno{padding-top:clamp(12px,2.4svh,40px)}
  .pz--firma .fi-marcas{margin-top:clamp(8px,1.8svh,28px);padding-top:clamp(8px,1.4svh,18px)}
}

/* · 3 · Titulares que no caben a lo alto en portátiles bajos ──────────────────────────────────────── */
@media (min-width:821px){
  /* El artículo del blog: el titular es el del post (hasta ~100 caracteres) a 8,6vw. Tope por alto. */
  .art__port h1{font-size:clamp(40px,min(6.2vw,calc(11svh - 8px)),104px)}
}
@media (min-width:821px) and (max-height:940px){
  /* Catálogo de cursos: el botón quedaba fuera de la primera pantalla. */
  .ct-sup.ct-port{padding-top:calc(var(--cab-total) + clamp(24px,3.4svh,48px))}
  .ct-port .ct-port__txt h1{font-size:clamp(36px,min(4.6vw,calc(9.5svh - 14px)),76px)}
  .ct-port .ct-port__p{margin-top:clamp(10px,1.6svh,18px)}
  .ct-port .ct-port__p:first-of-type{margin-top:clamp(16px,2.2svh,32px)}
  .ct-port .ct-acc{margin-top:clamp(18px,2.8svh,36px)}
  /* Títulos largos de curso, taller, e-book…: a 1536×864 «Taller para el Manejo…» pasaba a cinco líneas. */
  .p6-port .p6-port__txt h1.p6-h1--largo{font-size:clamp(36px,min(4.5vw,7.4svh),60px)}
}
@media (min-width:821px) and (max-height:800px){
  /* «Quiénes somos»: titular, gancho y un párrafo de siete líneas; el botón caía fuera a 1280×720. */
  .co-so-port{padding-top:calc(var(--cab-total) + 24px)}
  .co-so-port .co-so-port__tx h1{font-size:clamp(36px,min(4vw,calc(9svh - 18px)),66px)}
  .co-so-port .co-so-port__gancho{margin-top:18px}
  .co-so-port .co-so-port__p{max-width:64ch}
  .co-so-port .co-so-port__acc{margin-top:22px}
}

/* · 4 · Aire bajo la cabecera ─────────────────────────────────────────────────────────────────────── */
main.rc-adv{padding-top:calc(var(--cab-total) + clamp(26px,2.6vw,34px))}
@media (min-width:1024px) and (max-height:760px){main.rc-adv{padding-top:calc(var(--cab-total) + 20px)}}
@media (min-width:1200px){main.rr-tools .rr-arranque{padding-top:calc(var(--cab-total) + 22px)}}

/* · 5 · Móviles bajos (360×740, 375×667…): el primer botón asomaba justo debajo del borde ─────────── */
@media (max-width:600px) and (max-height:760px){
  .portadilla.en-port--principales{padding-top:calc(var(--cab-total) + 64px)}
  .en-port--principales .en-port__gancho{margin-top:20px}
  .en-port--principales .en-port__acc{margin-top:22px}
  .co-so-port{padding-top:calc(var(--cab-total) + 64px)}
  .co-so-port .co-so-port__gancho{margin-top:20px}
  .co-so-port .co-so-port__acc{margin-top:22px}
  .in-sp .in-sp__foto{aspect-ratio:2/1}
}

/* · 6 · El dedo. En pantallas táctiles los enlaces de texto crecen hacia fuera con una capa invisible
       (no se mueve nada) y los del pie llegan a 44 px de alto. */
@media (pointer:coarse){
  .fuga::before,.fi-res__ver::before,.rc-puerta__ir::before,.ct-enlace::before{
    content:"";position:absolute;inset:-10px -4px}
  .fi-res__ver,.rc-puerta__ir,.ct-enlace{position:relative}
  .pie__g a{padding-block:11px}
  .pie__legal a{padding-block:12px}
  .in-chip,.ds-filtro{min-height:44px}
}

/* ══ PROPUESTA 20-OCT · el mega-menú no sube al cambiar de pestaña (la escribe _menu20.py) ═══ */

/* 1 · Los cuatro paneles, del MISMO alto: así el borde de abajo no se mueve nunca al cambiar.
   La nota de la derecha en una sola línea (Entrenamientos y Método iban en dos y bajaban las tarjetas
   21 px); las tarjetas, todas a 280 px (eran 238; Blog, 329). Sólo donde hay mega-menú (≥1261 px). */
@media (min-width:1261px){
  .mm__cab .mm__nota{max-width:none;white-space:nowrap}
  .mm .mm__g{height:280px}
  .mm .mm__c{min-height:0}
  /* Blog: la lista de la derecha, más apretada para caber en 280 */
  .mm .mm__rev{padding:6px 24px 10px;justify-content:space-between}
  .mm .mm__rev-i{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:7px 0}
  .mm .mm__rev-f{width:96px;height:54px}
  .mm .mm__rev-t small{margin-bottom:4px}
  .mm .mm__todos{margin-top:6px}
}

/* 2 · El cambio de pestaña. Los marcos (fondo, tarjetas, filetes) se quedan QUIETOS: sólo cambia lo
   de dentro, y lo hace en la dirección en la que vas (--dir: 1 hacia la derecha, -1 hacia la izquierda).
   La foto nace un poco grande y se asienta; el texto entra deslizando, tarjeta a tarjeta; el número
   gordo del fondo rueda como un contador. El panel que se va, encima, se apaga y empuja lo suyo al lado
   contrario. Nada se mueve en vertical: sin franja gris ni sube-y-baja. */
.mm.mm--sale{z-index:56;pointer-events:none}
.js .mm.mm--sale .mm__g > *,.js .mm.mm--sale .mm__cab,
.js .mm.mm--llega .mm__g > *,.js .mm.mm--llega .mm__cab,
.js .mm.mm--llega[data-abierto] .mm__g > *,.js .mm.mm--llega[data-abierto] .mm__cab{opacity:1;transform:none;transition:none}

@keyframes mm20-entra{from{opacity:0;transform:translate3d(calc(var(--dir,1) * 26px),0,0)}}
@keyframes mm20-foto{from{opacity:0;transform:scale(1.09)}}
@keyframes mm20-sale{to{opacity:0;transform:translate3d(calc(var(--dir,1) * -18px),0,0)}}
@keyframes mm20-num{from{opacity:0;transform:translate3d(0,calc(var(--dir,1) * 42%),0)}}
@keyframes mm20-num-sale{to{opacity:0;transform:translate3d(0,calc(var(--dir,1) * -42%),0)}}

.mm__g > :nth-child(1){--i:0}.mm__g > :nth-child(2){--i:1}.mm__g > :nth-child(3){--i:2}.mm__g > :nth-child(4){--i:3}
.mm__rev > :nth-child(1){--j:0}.mm__rev > :nth-child(2){--j:1}.mm__rev > :nth-child(3){--j:2}.mm__rev > :nth-child(4){--j:3}

.mm--llega .mm__foto{animation:mm20-foto .9s cubic-bezier(.16,1,.3,1) calc(.04s + var(--i,0) * .06s) both}
.mm--llega .mm__c > :not(.mm__foto):not(.mm__barra),
.mm--llega .mm__cab > *{animation:mm20-entra .62s cubic-bezier(.16,1,.3,1) calc(.08s + var(--i,0) * .06s) both}
.mm--llega .mm__rev > *{animation:mm20-entra .62s cubic-bezier(.16,1,.3,1) calc(.14s + var(--j,0) * .05s) both}
.mm--llega .mm__ghost{animation:mm20-num .7s cubic-bezier(.16,1,.3,1) both}

.mm--sale .mm__c > :not(.mm__foto):not(.mm__barra),.mm--sale .mm__cab > *,.mm--sale .mm__rev > *{
  animation:mm20-sale .22s cubic-bezier(.4,0,1,1) both}
.mm--sale .mm__ghost{animation:mm20-num-sale .3s cubic-bezier(.4,0,1,1) both}

@media (prefers-reduced-motion: reduce){
  .mm--llega *,.mm--sale *{animation:none !important}
}