/* ══════════════════════════════════════════════════════════════════════
   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}}