/* ==========================================================================
   AUTOMATIZACIONES BURNAO · estilos
   Rediseño del 18/09/2026 (David: "profesional, con animaciones 3D, que parezca de 20k").
   Un estudio de noche: grafito, papel cálido, un azul cobalto para lo procesado y ámbar
   solo para lo que se aparta a revisar. Archivo variable: muy ancha en los titulares,
   normal en el texto, estrecha en las etiquetas.
   Los nombres de clase que usa el formulario de reserva (reserva.js, pago.js) y las
   pruebas se conservan: cambió el aspecto, no el funcionamiento.
   ========================================================================== */

:root {
  --fondo: #0B0C0E;
  --fondo-2: #111318;
  --fondo-3: #181B21;
  --linea: rgba(242, 238, 230, .10);
  --linea-2: rgba(242, 238, 230, .18);
  --papel: #F2EEE6;
  --papel-2: #BDB8AE;
  --papel-3: #8F8B83;
  --tinta: #101114;
  --tinta-2: #45474C;
  --cobalto: #3358FF;
  /* El hover OSCURECE, no aclara. Medido el 21/09/2026: el anterior (#4A6BFF) era más claro
     que el botón normal, y al aclarar el fondo el texto blanco de dentro contrastaba MENOS:
     bajaba de 5,28:1 a 4,34:1, por debajo del mínimo legible. O sea que el botón empeoraba
     justo cuando el visitante iba a pulsarlo. Este da 6,46:1 y se nota un 25 % más oscuro. */
  --cobalto-hover: #2D4DE0;
  --cobalto-claro: #8FA6FF;
  --ambar: #F5A524;
  --ambar-texto: #F2B85C;
  --rojo-error-tinta: #B42318;

  --envoltura: min(1320px, 100% - 64px);
  --curva: cubic-bezier(.16, 1, .3, 1);
  /* Rebote corto, para lo que "aparece": Fold y su nube de pensamiento. */
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--fondo); color: var(--papel);
  font: 400 18px/1.62 'Archivo', system-ui, sans-serif; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Cifras de ancho fijo solo donde se comparan números (horas, importes, medidas); en el
   texto corrido, las proporcionales de la letra. */
.cifras, .lectura, .pie-datos dd, .hora, .dia b, .hoja-fila, .hoja-total, .datos-pago dd, .precio-linea { font-variant-numeric: tabular-nums; }
p, li, dd { text-wrap: pretty; }
input, textarea { caret-color: var(--cobalto); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
b, strong { font-weight: 650; color: var(--papel); }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

::selection { background: var(--cobalto); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 3px; border-radius: 6px; }
/* El hueco de la barra, siempre reservado: al terminar la intro (que quita el scroll) la
   página no salta 12 px de lado justo cuando entra el titular. */
html { scrollbar-color: #3A3F48 var(--fondo); scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: #2E323A; border-radius: 99px; border: 3px solid var(--fondo); }

.envoltura { width: var(--envoltura); margin-inline: auto; }
.icono { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--papel); color: var(--tinta); padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 16px; }

/* ------------------------------------------------------------------ tipografía */
/* La letra muy ancha (125 %) solo en dos sitios: el titular de la portada y las cifras
   medidas. En todo lo demás, ancho normal: una voz ancha y negra en cada título era la
   firma de las webs generadas (revisión del 18/09). */
h1, h2, h3 { margin: 0; font-weight: 720; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 7.4vw, 6rem); line-height: .92; font-weight: 800; font-stretch: 125%; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.04; font-stretch: 100%; max-width: 20ch; }
h3 { font-size: 1.2rem; line-height: 1.2; font-weight: 650; font-stretch: 100%; letter-spacing: -.01em; }
/* Etiquetas en minúscula y a su tamaño, no versalitas espaciadas: esas funcionaban como
   rótulos de plantilla. Las mayúsculas quedan para el sello y el pie de la ilustración. */
.etq, .estado, .paso-t, .datos-tec dt, .fila-hmi > span, .pie-datos dt {
  font-stretch: 100%; font-weight: 500; font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1.35;
}
.intro { font-size: 1.2rem; line-height: 1.55; color: var(--papel-2); max-width: 52ch; margin: 0; }
.entrada { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--papel-2); max-width: 44ch; margin: 0; }

/* ------------------------------------------------------------------ botones y enlaces */
/* Botón rectangular con la flecha en línea. La píldora con la flecha en un círculo blanco
   era el botón de plantilla más repetido de estos años (revisión del 18/09). El marcado
   conserva .tapa (lo usan reserva.js y el servidor); aquí deja de ser un círculo. */
.pulsador {
  --tam: 1rem;
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; border: 0;
  font: 650 var(--tam)/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: -.005em; color: #fff;
  background: var(--cobalto); border-radius: 6px; padding: 0 22px; min-height: 52px;
  transition: background .2s var(--curva);
}
.pulsador .tapa { display: grid; place-items: center; flex: none; color: inherit; }
.pulsador .tapa .icono { width: 17px; height: 17px; stroke-width: 2; transition: transform .3s var(--curva); }
.pulsador:hover { background: var(--cobalto-hover); }
.pulsador:hover .tapa .icono { transform: translateX(3px); }

/* LO QUE SE PULSA, RESPONDE. (22/09/2026)
   ---------------------------------------------------------------------------
   En toda la hoja había 23 reglas `:hover` y **cero** `:active`. El hover no
   existe en un móvil: quien entra desde el teléfono —que es de donde entra
   casi todo el mundo— pulsaba «Reservar», una hora del calendario o una
   pregunta, y la pantalla no le decía nada hasta que cambiaba la página
   entera. Desde un ordenador con ratón parecía que todo respondía, y por eso
   no se había visto.

   El acuse es de COLOR, nunca de forma: el DESIGN.md prohíbe por nombre el
   levantamiento y la sombra en los botones («The No Capsule Button Rule»), y
   un `scale` en un botón de 48 px se lee como un tic. Oscurecer un paso es
   suficiente y es lo que hace cualquier control físico al hundirse.

   Sin transición a propósito: el acuse tiene que ser instantáneo. Una
   transición de 150 ms en el pulsado es justo lo que hace que un botón
   parezca que no ha respondido. */
.pulsador:active { background: #2440BF; transition: none; }
.pulsador:active .tapa .icono { transform: translateX(1px); transition: none; }
.pulsador.grande { --tam: 1.06rem; min-height: 58px; padding: 0 26px; }
.pulsador[aria-disabled="true"] { opacity: .55; }
.pulsador.enviando { pointer-events: none; opacity: .7; }

.enlace-sec { display: inline-flex; align-items: center; gap: 10px; color: var(--papel); text-decoration: none; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--linea-2); transition: border-color .25s, gap .25s var(--curva); }
.enlace-sec .icono { width: 18px; height: 18px; }
.enlace-sec:hover { border-color: var(--papel); gap: 14px; }
/* El enlace secundario acusa apagándose un punto, no moviéndose: mover el texto bajo el dedo
   que lo está pulsando se lee como un fallo, no como una respuesta. */
.enlace-sec:active { color: var(--papel-2); border-color: var(--papel-2); transition: none; }
.mas { margin: 56px 0 0; }
.mas a:not(.enlace-sec) { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linea-2); padding: 8px 0; }
.mas a .icono { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ cabecera */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
/* Escenarios del móvil (ver escena.js): huecos sin texto donde se ve la escena. Mismo corte
   que escena.js usa para "estrecho" (aspecto < 1,05); en ancho no existen. */
.escenario { display: none; }
/* El hueco se reserva desde el principio (si apareciera al cargar la escena, empujaría el
   texto); solo se retira si no hay 3D en ese aparato, que no quede un hueco vacío. */
@media (max-aspect-ratio: 21/20) {
  .portada .escenario { display: block; height: 68svh; margin: 8px 0 24px; }
  .portada:has(> .lienzo-3d.sin-3d) .escenario { display: none; }
}

/* Casi opaca: a .9, sobre la sección de papel claro salía un gris sucio (capturas del 18/09). */
.cabecera.con-borde { background: rgba(11, 12, 14, .97); border-color: var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 28px; height: 78px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--papel); }
.marca svg { width: 32px; height: 32px; }
.marca > span { display: grid; line-height: 1; }
.marca b { font-weight: 760; font-stretch: 108%; font-size: 1.2rem; letter-spacing: -.015em; }
.marca small { font-weight: 450; font-size: 0.83rem; color: var(--papel-3); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 1rem; }
.nav a { text-decoration: none; color: var(--papel-2); position: relative; padding: 6px 0; transition: color .2s; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva); }
.nav a:hover, .nav a[aria-current] { color: var(--papel); }
.nav a:active { color: var(--cobalto-claro); transition: none; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.cab-reservar { --tam: .92rem; min-height: 42px; padding: 0 16px; gap: 10px; }
.boton-menu { display: none; }

/* ------------------------------------------------------------------ escena 3D */
.lienzo-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lienzo-3d canvas { width: 100% !important; height: 100% !important; }
.portada .lienzo-3d { position: fixed; }
.portada > section { position: relative; z-index: 1; }
/* Sin WebGL o con "reducir movimiento" antes de la primera imagen: nada se queda en negro. */
.lienzo-3d.sin-3d { background: radial-gradient(60% 50% at 70% 45%, rgba(51, 88, 255, .10), transparent 70%); }

/* ------------------------------------------------------------------ entrada de la portada */
/* 19/09/2026, segunda versión: sin tapa, sin botón, sin nada que esperar (David: "que no
   salga que es una intro con carga, que se haga muy natural entrar"). La portada se ve y se
   usa desde el primer fotograma; solo la palabra "automático." del titular empieza sin
   escribir, y la escriben los papeles de la escena (escena.js). Cuando se levantan, la
   palabra de verdad se rellena fundiéndose y la sombra que protege el texto vuelve. La clase .papeles-escriben (no .entrada: ese es el párrafo bajo los titulares, y con su max-width estrechaba la página entera) la pone intro-previa.js antes de pintar y la quita
   escena.js (o su red de seguridad a los 2,5 s). */
/* Mientras la escriben, la palabra es un contorno tenue ("palabra fantasma"): un hueco en el
   titular parecía una web rota (revisión del 19/09); un contorno se lee como algo que se está
   escribiendo. Al levantarse los papeles, se rellena fundiéndose. inline-block: escena.js
   mide su línea base con esa caja. */
.heroe h1 em { display: inline-block; -webkit-text-stroke: 1px transparent; transition: color 1.1s var(--curva), -webkit-text-stroke-color 1.1s var(--curva); }
html.papeles-escriben .heroe h1 em { color: transparent; -webkit-text-stroke: 1px rgba(242, 238, 230, .22); transition: none; }
.heroe::before { transition: opacity 1.2s var(--curva); }
/* Durante la entrada, la sombra del titular fuera: los papeles se posan sobre la palabra y
   tienen que verse limpios. El resto del texto no los pisa: la palabra está sin escribir. */
html.papeles-escriben .heroe::before { opacity: 0; transition: none; }

/* ------------------------------------------------------------------ fotos y ambientes */
/* 19/09/2026. David: "imágenes en vez de fondos en negro, con animaciones o fondos
   ambientados a mi web de automatizaciones". Mezcla: fotos reales (Pexels, licencia gratuita
   para uso comercial; de dónde sale cada una, en fuente/fotos.md) en el color de la casa, y
   animaciones propias (ambiente.js). Las fotos no tapan texto: llenan los huecos que estaban
   vacíos. La única que va detrás de texto (#arranque) lleva velo. Cada foto dice "Foto
   ilustrativa": no son los clientes de los casos, y no se puede dar a entender que lo son. */
.foto { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: var(--fondo-2); aspect-ratio: 16 / 10; isolation: isolate; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.1) brightness(.9); }
/* Duotono: las sombras, grafito; las luces, un azul apagado. Las fotos van en gris (se
   convierten al bajarlas) y el color lo pone esto: se cambia en un sitio. */
.foto::before, .foto::after, .fondo-foto::before, .fondo-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.foto::before, .fondo-foto::before { background: #0E1015; mix-blend-mode: lighten; z-index: 1; }
.foto::after, .fondo-foto::after { background: #A9B8F2; mix-blend-mode: multiply; z-index: 1; }
/* Sin versalitas espaciadas. Era la última marca de plantilla que quedaba visible en todas
   las páginas: `FOTO ILUSTRATIVA` en mayúsculas con .14em de separación se pinta 15 veces en
   seis páginas, y ese espaciado es justo el que delata un texto generado. El aviso se sigue
   leyendo igual en minúscula, y deja de parecer un rótulo. El sello de la factura sí conserva
   las mayúsculas: ahí hay un motivo físico, es un sello de goma. */
.foto figcaption, .aviso-foto { position: absolute; right: 12px; bottom: 10px; z-index: 2; margin: 0; font-stretch: 75%; font-size: 0.69rem; letter-spacing: 0; text-transform: none; color: rgba(242, 238, 230, .72); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* Paneles animados: el mismo marco que una foto, con su canvas dentro. */
.foto.panel { background: linear-gradient(180deg, #13161c, #0f1116); }
.foto.panel::before, .foto.panel::after { display: none; }
.foto canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aparato .foto { margin-top: 36px; }

/* Foto a sangre detrás de una sección, con velo para que el texto se lea entero. */
.con-foto { position: relative; overflow: hidden; }
.fondo-foto { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.fondo-foto img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) brightness(.95); }
/* Más oscuro arriba a la derecha: ahí cae la lámpara de la foto de la mesa, justo detrás de
   la entradilla, y le quitaba contraste (captura del 19/09). */
.fondo-foto .velo { position: absolute; inset: 0; z-index: 2; background:
  radial-gradient(40% 45% at 72% 30%, rgba(11, 12, 14, .7), transparent 70%),
  linear-gradient(180deg, rgba(11, 12, 14, .82) 0%, rgba(11, 12, 14, .5) 45%, rgba(11, 12, 14, .88) 100%); }
.con-foto > .envoltura { position: relative; z-index: 1; }

/* EL AMBIENTE TIENE SU SITIO, Y NO ES DETRÁS DEL TEXTO.
   ---------------------------------------------------------------------------
   Hasta el 22/09/2026 el ambiente cubría la sección entera con una máscara
   centrada en 60% 55% — justo donde va el titular y la entradilla. En la
   captura de la portada se leía el titular "Lo que se puede automatizar"
   encima de las filas de una hoja de cálculo, y la entradilla sobre los
   números. Estaba a la vez **demasiado presente** (sobre las palabras) y
   **demasiado apagado** (tan tenue para no molestar que no se disfrutaba).
   Las dos cosas se arreglan con lo mismo: darle una banda propia.

   La banda es a sangre —se sale de la envoltura hasta los bordes de la
   ventana— porque es lo que la convierte en un momento de la página y no en
   un recuadro más. Reserva su alto desde el primer instante: si apareciera al
   cargar, empujaría el texto de abajo.

   Y el texto NUNCA va encima. Esa es la regla; lo demás es decoración. */
.con-ambiente { position: relative; }
.ambiente-banda {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(170px, 22vh, 280px);
  margin-block: 8px 64px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
  /* Fondo propio, opaco. Sin él, la banda de #arranque se pintaba ENCIMA de la foto a sangre
     de esa sección y el resplandor de la lámpara salía justo detrás de la regla, donde están
     las marcas de 25 y 30 minutos: dos fondos a sangre apilados peleándose por el mismo sitio.
     La banda es una superficie, no una ventana. Donde no hay foto detrás, este color es el del
     propio papel de la página y no se nota. */
  background: var(--fondo);
}
/* El lienzo ocupa la banda ENTERA. Se probó a recortarle el hueco del rótulo con
   `bottom: 30px; height: auto` y el canvas se quedaba sin alto: un <canvas> con `height:auto`
   se rige por su atributo, no por la caja. El hueco del rótulo lo deja el dibujo (el riel va
   al 70% del alto), que es donde de verdad se puede decidir. */
/* El fundido de los lados va en EL LIENZO, no en la banda. Estaba en `.ambiente-banda`, y como
   el rótulo es hijo suyo, la máscara se lo comía: a 1440 el rótulo empieza en x=60 ≈ 4,2 % del
   ancho, donde el degradado va por alfa 0,35, y sus primeras palabras salían medio borradas
   (visto en la captura del 22/09/2026). Enmascarar al hijo que hay que difuminar y dejar el
   texto fuera es la única forma de que las dos cosas se lean. */
.ambiente-banda > .ambiente-fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
/* El rótulo de la banda: dice qué se está viendo, en minúscula y sin ruido.
   Sin él, una animación abstracta es adorno; con él, es una explicación. */
.ambiente-banda .rotulo {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 10px; margin: 0; z-index: 1;
  width: var(--envoltura);
  font-size: 0.83rem; color: var(--papel-3);
}

/* La forma antigua sigue valiendo donde SÍ hay columna libre (una foto o un
   hueco sin texto al lado). Fuera de ahí, se usa la banda. */
.ambiente-fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 60% 55%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 60% 55%, #000 30%, transparent 85%); }
.con-ambiente > .envoltura { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Se queda el fotograma, no el movimiento: la banda sigue contando lo suyo. */
  .ambiente-banda { height: clamp(110px, 14vh, 180px); }
}

/* Una foto a lo ancho, entre dos bloques ("Sobre mí"). Su pie es un crédito de verdad
   (autor, licencia, retoque): en minúscula y legible, no la etiqueta corta de las demás. */
.foto.banda { aspect-ratio: 21 / 9; margin: 0 0 110px; }
/* Con franja oscura detrás: en el móvil el crédito caía sobre los arcos blancos y no se leía. */
.foto figcaption.credito { left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; background: linear-gradient(180deg, rgba(11, 12, 14, 0), rgba(11, 12, 14, .88) 55%); text-transform: none; letter-spacing: 0; font-stretch: 100%; font-size: 0.83rem; line-height: 1.4; color: rgba(242, 238, 230, .9); text-shadow: none; }
.foto figcaption.credito a { color: inherit; }
@media (max-aspect-ratio: 21/20) { .foto.banda { aspect-ratio: 4 / 3; margin-bottom: 72px; } }

/* Los casos de la portada, con su foto arriba. */
.caso-portada .foto { aspect-ratio: 16 / 7; margin-bottom: 8px; }

/* ------------------------------------------------------------------ héroe */
.heroe { min-height: 100svh; display: grid; align-items: center; padding: 140px 0 120px; position: relative; }
/* Una sombra que baja el contraste de los papeles detrás del texto: el titular se lee entero. */
.heroe::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 12, 14, .88) 0%, rgba(11, 12, 14, .55) 42%, rgba(11, 12, 14, 0) 70%); }
.heroe .envoltura { position: relative; }
/* Crece con el ancho (vw), igual que el remolino: así "automático." termina antes de los
   papeles a cualquier ancho de escritorio, y no encima de ellos. */
.heroe h1 { max-width: 12ch; font-size: clamp(2.8rem, 5.6vw, 5.4rem); }
.h1-grande { display: block; }
/* Sin palabra coloreada en el titular: el azul vive en la escena, que es donde significa
   "procesado". Una palabra en color era otro gesto de plantilla. */
.heroe h1 em { font-style: normal; color: inherit; }
.h1-sub { display: block; margin-top: 30px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--papel-2); line-height: 1.4; }
.heroe .entrada { margin-top: 26px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 44px; }
/* El pie de la ilustración se aparta de la burbuja del asistente.
   Medido el 21/09/2026 en la portada a 1440 px: los dos están anclados a la esquina de abajo
   a la derecha y se pisaban 88×20 px, justo encima del texto. No lo cazaba ninguna prueba
   porque las dos cosas existen, se pintan y el HTML es correcto: simplemente no se podía
   leer. Se sube por encima de la burbuja, que mide 56 px de alto más su margen.
   Se comprueba con `node revisar-solapes.js`. */
.aviso-escena { position: absolute; right: 32px; bottom: 96px; margin: 0; font-stretch: 75%; font-size: 0.83rem; letter-spacing: 0; text-transform: none; color: var(--papel-3); }

/* ------------------------------------------------------------------ secciones */
.seccion { padding: 160px 0; position: relative; }
/* Ritmo desigual a propósito: cada sección con el aire que necesita, no el mismo sello. */
#que { padding: 120px 0 140px; }
#instalaciones { padding: 190px 0 150px; }
#arranque { padding: 120px 0; }
.cabeza-seccion { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: end; margin-bottom: 72px; }
.cabeza-seccion > * { min-width: 0; }

/* Cómo funciona: el texto a la izquierda; a la derecha, el anillo de la escena. */
.como { min-height: 115vh; display: flex; align-items: center; }
.columna-texto { max-width: 540px; }
.columna-texto .intro { margin: 26px 0 48px; }
/* El recorrido: el número de cada paso a la altura del título, sin iconos en círculos
   (la lista de icono-en-círculo era otro patrón de plantilla). El orden sí informa:
   es el camino de un documento. */
.flujo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: flujo; }
.flujo li { counter-increment: flujo; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--linea); }
.flujo li::before { content: counter(flujo); font-weight: 600; font-size: 1rem; line-height: 1.5; color: var(--papel-3); font-variant-numeric: tabular-nums; }
.flujo li.aparte::before { color: var(--ambar-texto); }
.flujo li:last-child { border-bottom: 1px solid var(--linea); }
.flujo h3 { font-size: 1.2rem; margin-bottom: 4px; }
.flujo p { margin: 0; color: var(--papel-2); font-size: 1rem; }

/* Antes y después: filas a lo ancho, no tarjetas. */
/* Una tabla: cabecera una vez, filas limpias, sin efecto al pasar el ratón (no son enlaces). */
.antes-despues { border-top: 1px solid var(--linea-2); }
.fila-ad { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr; gap: 48px; padding: 32px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.fila-ad h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.fila-ad p { margin: 0; }
.fila-ad .etq { display: none; }
.fila-ad .hoy { color: var(--papel-3); }
.fila-ad .auto { color: var(--papel); }
.cabeza-tabla { padding: 14px 0; border-bottom-color: var(--linea-2); font-size: 1rem; color: var(--papel-3); }
.cabeza-tabla span:last-child { color: var(--cobalto-claro); }

/* Instalaciones de la portada. */
.instalaciones .seccion, .instalaciones { background: linear-gradient(180deg, transparent, rgba(11, 12, 14, .82) 18%, rgba(11, 12, 14, .82) 82%, transparent); }
/* Dos casos que no pesan igual: la gestoría, delante y más ancha, con lo medido; la
   logística, al lado, con lo que hace. Sin tarjetas que se inclinan ni sombras blandas:
   dos columnas separadas por un filo, como una página impresa. */
.casos-portada { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--linea-2); }
.caso-portada { padding: 44px 56px 8px 0; display: flex; flex-direction: column; gap: 18px; }
.caso-portada + .caso-portada { padding: 44px 0 8px 56px; border-left: 1px solid var(--linea); }
.caso-portada h3 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.12; }
.caso-portada.principal h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.caso-portada p { color: var(--papel-2); margin: 0; }
.caso-portada .enlace-sec { align-self: flex-start; margin-top: auto; }
/* Las cifras medidas: la otra cosa, con el titular, que va en letra muy ancha. */
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 22px; margin-top: 6px; border-top: 1px solid var(--linea); }
.cifras p { display: grid; gap: 8px; align-content: start; font-size: 1rem; }
.cifras b { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.03em; line-height: 1; color: var(--papel); }
.pie-cifras { font-size: 0.83rem; color: var(--papel-3) !important; }
/* Debajo del título, no encima (sin etiquetas sobre los títulos): quién es, y en qué estado. */
.caso-cab { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--papel-3) !important; font-size: 1rem; margin-top: -6px !important; }
/* El estado, dicho en texto con una marca cuadrada al lado: sin pastilla ni halo. */
.estado { display: inline-flex; align-items: center; gap: 8px; color: var(--papel-2); }
.estado::before, .estado i { content: ''; width: 7px; height: 7px; background: var(--papel-3); display: block; }
.estado.vivo::before, .estado.vivo i { background: var(--cobalto-claro); }
.estado:has(i)::before { content: none; }
.nota-real { margin: 28px 0 0; font-size: 0.83rem; color: var(--papel-3); }

/* Pasos: una lista numerada sobre un filo, quieta. */
.intro + .pasos { margin-top: 64px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; counter-reset: paso-a; border-top: 1px solid var(--linea-2); }
.pasos li { counter-increment: paso-a; position: relative; padding-top: 26px; }
.pasos li::before { content: counter(paso-a); display: block; font-weight: 600; font-size: 1rem; color: var(--papel-3); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.pasos li h3 { margin-top: 0; }
.pasos h3 { font-size: 1.44rem; margin-bottom: 12px; }
.pasos p { color: var(--papel-2); margin: 0; font-size: 1rem; }

/* Si duda, se para: la sección de papel claro. */
.honestidad { background: var(--papel); color: var(--tinta); }
.honestidad .envoltura { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.honestidad h2 { color: var(--tinta); margin-bottom: 30px; }
.honestidad p { color: var(--tinta-2); font-size: 1.2rem; max-width: 46ch; }
.honestidad b { color: var(--tinta); }
.hoja-3d { perspective: 1200px; display: grid; place-items: center; min-height: 460px; }
.hoja-cara { width: min(340px, 78%); aspect-ratio: 210 / 297; background: #fff; border-radius: 4px; position: relative; padding: 36px 30px; transform: rotateX(18deg) rotateY(-22deg) rotateZ(4deg); transform-style: preserve-3d; box-shadow: 30px 50px 60px -30px rgba(16, 17, 20, .35), 0 1px 0 rgba(16, 17, 20, .05); animation: hoja 9s ease-in-out 2 alternate; }
@keyframes hoja { to { transform: rotateX(10deg) rotateY(-10deg) rotateZ(2deg) translateY(-8px); } }
/* La factura de ejemplo, con líneas de verdad (no barras grises de "cargando"): suman
   1.248,50 y el total dice 1.284,50, así que el sello se puede comprobar a ojo. */
.hoja-cara { display: flex; flex-direction: column; font-size: 0.69rem; color: var(--tinta-2); line-height: 1.3; }
.hoja-cab { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid #E3E0D9; }
.hoja-cab b { font-size: 1rem; font-weight: 750; color: var(--tinta); letter-spacing: -.01em; }
.hoja-cab span { font-size: 0.69rem; letter-spacing: .08em; text-transform: uppercase; color: #8A867E; }
.hoja-fila { display: grid; grid-template-columns: 1fr 22px 52px; gap: 8px; padding: 7px 0; border-bottom: 1px solid #EFECE6; }
.hoja-fila span:nth-child(n+2) { text-align: right; }
.hoja-total { margin-top: auto; display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; color: var(--tinta); padding-top: 12px; border-top: 1px solid #CFCBC2; font-variant-numeric: tabular-nums; }
/* En el hueco en blanco, debajo de las líneas: tapar los importes impediría comprobarlo. */
.sello { position: absolute; right: -34px; top: 60%; transform: rotate(-11deg) translateZ(30px); border: 3px solid var(--ambar); color: #9A5B00; background: rgba(255, 246, 225, .94); padding: 10px 16px 8px; border-radius: 8px; font-stretch: 85%; font-weight: 850; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; box-shadow: 0 16px 30px -18px rgba(122, 75, 0, .5); }
.sello small { display: block; font-size: 0.69rem; letter-spacing: .1em; font-weight: 650; }

/* Cierre de la portada: el texto a la izquierda; a la derecha, el calendario de la escena. */
.cierre { min-height: 100vh; }
.cierre .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.cierre .envoltura > * { grid-column: 1; }
.cierre h2 { max-width: 14ch; margin-bottom: 28px; }
.cierre .pasos-reserva ol { grid-template-columns: 1fr; }
.cierre .pasos-reserva li, .cierre .pasos-reserva li + li { padding: 22px 0; border-left: 0; }
.cierre .pasos-reserva b::before { display: inline; margin: 0 14px 0 0; }
.pasos-reserva { margin-top: 64px; }
.pasos-reserva ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linea-2); counter-reset: paso; }
.pasos-reserva li { counter-increment: paso; padding: 30px 32px 30px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 8px; align-content: start; }
.pasos-reserva li + li { padding-left: 32px; border-left: 1px solid var(--linea); }
.pasos-reserva b { font-size: 1.2rem; font-weight: 650; }
.pasos-reserva b::before { content: counter(paso); display: block; font-weight: 600; font-size: 1rem; color: var(--papel-3); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
/* `li > span` y no `span`: la regla antigua alcanzaba también al <span class="txt"> del botón
   «Pedir mi diagnóstico» que vive dentro de esta misma lista, y el rótulo del botón salía en
   gris papel sobre cobalto: 2,67:1, medido el 23/09/2026 en el navegador. Ninguna prueba lo
   veía porque el botón funcionaba; solo se leía mal. */
.pasos-reserva li > span { color: var(--papel-2); font-size: 1rem; }
.cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; margin-top: 52px; }
.directo { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.directo a { display: inline-flex; align-items: center; gap: 12px; color: var(--papel); text-decoration: none; font-weight: 600; }
.directo a .icono { width: 18px; height: 18px; color: var(--cobalto-claro); }
.directo .ic { width: 22px; display: grid; place-items: center; color: var(--cobalto-claro); flex: none; }
.directo .ic .icono { width: 18px; height: 18px; }
.directo b { display: block; font-weight: 650; }
.directo small { display: block; color: var(--papel-3); font-size: 0.83rem; font-weight: 400; }

/* ------------------------------------------------------------------ páginas interiores */
.cabeza-pagina { position: relative; overflow: hidden; padding: 190px 0 110px; border-bottom: 1px solid var(--linea); }
.cabeza-pagina::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 12, 14, .92) 0%, rgba(11, 12, 14, .6) 50%, rgba(11, 12, 14, .15) 100%); }
.cabeza-pagina .envoltura { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr .7fr; gap: 64px; align-items: end; }
.cabeza-pagina .envoltura > * { min-width: 0; }
/* Con escena: título y entrada apilados a la izquierda, y la columna derecha para los papeles
   (con la entrada a la derecha, el remolino caía encima del texto: capturas del 18/09). */
@media (min-width: 1021px) {
  .cabeza-pagina:has(> .lienzo-3d) .envoltura { grid-template-columns: minmax(0, 7fr) 5fr; row-gap: 28px; align-items: start; }
  .cabeza-pagina:has(> .lienzo-3d) .envoltura > * { grid-column: 1; }
  .cabeza-pagina:has(> .lienzo-3d) .entrada { max-width: 56ch; }
}
/* Cabecera con su propia animación (ambiente.js), una distinta por página (19/09/2026). En
   ancho, a la derecha del título; en el móvil, debajo de la entradilla. */
.cabeza-anim { display: block; width: 100%; height: 250px; }
/* El móvil dibujado necesita alto para que su pantalla se lea (a 250 px los textos pisaban las cifras). */
.cabeza-anim[data-ambiente="movil"] { height: 380px; }
@media (min-width: 1021px) {
  .cabeza-pagina.con-anim .envoltura { grid-template-columns: minmax(0, 7fr) 5fr; row-gap: 28px; align-items: start; }
  .cabeza-pagina.con-anim .envoltura > * { grid-column: 1; }
  .cabeza-pagina.con-anim .envoltura > .cabeza-anim { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 360px; }
  .cabeza-pagina.con-anim .entrada { max-width: 56ch; }
}
.cabeza-pagina h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1; font-weight: 740; font-stretch: 100%; letter-spacing: -.028em; }
/* La miga es navegación, no una etiqueta: en letra normal, sin versalitas espaciadas. */
.miga { color: var(--papel-3); margin: 0 0 24px; font-size: 1rem; }
.miga a { color: inherit; text-decoration: none; }
.miga a:hover { color: var(--papel); }

.caso-hmi { padding: 110px 0; }
.caso-hmi + .caso-hmi { padding-top: 0; }
.armario { background: var(--fondo-2); border-block: 1px solid var(--linea); }
.armario h2, .caso-hmi h2 { margin-bottom: 20px; }
.armario .intro { margin-bottom: 48px; }
section:not(.seccion):not(.cabeza-pagina):not(.caso-hmi):not(.reserva):not(.heroe) { padding: 110px 0; }

/* Los paneles de los casos: un bloque con un filo, no una ventana de programa. La .barra
   era la barra de título de una ventana falsa (resto del diseño de cuadro eléctrico); ahora
   es una línea de texto normal, a modo de pie de foto. */
.panel { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; max-width: 1040px; }
.armario .panel { background: var(--fondo-3); }
.pantalla { display: grid; }
.barra { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 22px 32px 0; color: var(--papel-3); font-size: 1rem; }
.barra .estado { font-size: 1rem; }
.cuerpo { padding: 36px 32px 34px; display: grid; gap: 0; }
.caso-hmi .panel h2, .panel h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 24ch; margin: 0 0 26px; }
.fila-hmi { display: grid; grid-template-columns: 210px 1fr; gap: 28px; padding: 20px 0; border-top: 1px solid var(--linea); }
.fila-hmi:last-child { padding-bottom: 0; }
.fila-hmi > span { color: var(--papel-3); padding-top: 4px; }
.fila-hmi p { margin: 0; color: var(--papel-2); }
.fila-hmi p + p { margin-top: 10px; }
.fila-hmi b { color: var(--papel); }
.lectura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 22px 0; border-top: 1px solid var(--linea); }
.lectura b { font-size: clamp(2rem, 3.6vw, 2.8rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; color: var(--cobalto-claro); line-height: 1; white-space: nowrap; }
.lectura span { color: var(--papel-2); max-width: 46ch; }
.caso-hmi .lectura { border-top: 0; padding-top: 12px; }

.bandeja .cuerpo { padding-top: 10px; }
.bandeja .fila-hmi { grid-template-columns: 24px 1fr; align-items: start; }
.bandeja .fila-hmi h3 { font-size: 1.2rem; margin: 0 0 6px; }
/* Marca cuadrada, la misma que la del estado: un solo tipo de marca en toda la web. */
.lamp-a, .lamp-ok, .lamp-off { width: 8px; height: 8px; margin-top: 9px; display: block; flex: none; }
.lamp-a { background: var(--ambar); }
.lamp-ok { background: var(--cobalto-claro); }
.lamp-off { background: var(--papel-3); }

/* Fichas de servicio: el nombre fijo a la izquierda, la hoja de datos a la derecha. */
.ficha { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding: 110px 0; border-bottom: 1px solid var(--linea); align-items: start; }
.ficha > * { min-width: 0; }
.ficha:last-of-type { border-bottom: 0; }
.ficha .aparato { position: sticky; top: 120px; }
.ficha h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); margin: 0 0 20px; max-width: 14ch; }
.ficha .resumen { font-size: 1.2rem; color: var(--papel-2); margin: 0 0 30px; max-width: 48ch; }
.datos-tec { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1px solid var(--linea-2); }
.datos-tec dt, .datos-tec dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.datos-tec dt { color: var(--papel-3); padding-right: 34px; padding-top: 21px; }
.datos-tec dd { color: var(--papel-2); }
.datos-tec dd b { color: var(--papel); }
.datos-tec .no { color: var(--ambar-texto); }
.datos-tec .no b { color: var(--ambar-texto); }

/* Textos largos (legales, límites). */
.texto-largo { max-width: 70ch; font-size: 1rem; }
.envoltura.texto-largo { max-width: none; }
.envoltura.texto-largo > * { max-width: 70ch; }
.texto-largo h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 64px 0 18px; max-width: none; }
.texto-largo h2:first-child { margin-top: 0; }
.texto-largo h3 { font-size: 1.2rem; margin: 34px 0 10px; }
.texto-largo p, .texto-largo li { color: var(--papel-2); }
.texto-largo ul { padding-left: 1.1em; }
.texto-largo li { margin-bottom: 8px; }
.texto-largo li::marker { color: var(--cobalto-claro); }
.texto-largo b { color: var(--papel); }
.texto-largo a { color: var(--papel); }

/* Sobre mí. */
.persona { display: grid; grid-template-columns: 380px 1fr; gap: 90px; align-items: start; padding: 110px 0; }
.persona > * { min-width: 0; }
/* Sus datos como un membrete impreso en papel, del mismo mundo que la factura de la portada. */
.placa-carac { background: var(--papel); color: var(--tinta); border-radius: 3px; padding: 34px 32px 26px; position: sticky; top: 120px; box-shadow: 0 30px 50px -34px rgba(0, 0, 0, .8); }
.titulo-placa { margin: 0 0 20px; font-weight: 760; font-size: 1.44rem; letter-spacing: -.02em; color: var(--tinta); }
.placa-carac dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; }
.placa-carac dt, .placa-carac dd { margin: 0; padding: 11px 0; border-top: 1px solid rgba(16, 17, 20, .12); }
.placa-carac dt { font-size: 0.83rem; color: var(--tinta-2); padding-right: 22px; }
.placa-carac dd { color: var(--tinta); font-size: 1rem; }
.placa-carac a { color: var(--tinta); }
.persona .texto-largo h2:first-child { margin-top: 0; }
.cualidades { padding: 30px 0 110px; }
.cualidades h2 { margin: 0 0 14px; }
.cualidades .intro { margin: 0 0 40px; }
.cualidades .datos-tec { max-width: 980px; }
.cualidades .datos-tec dt { color: var(--papel); font-size: 1rem; font-weight: 650; padding-right: 48px; padding-top: 18px; }
.principios { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--linea-2); margin-top: 40px; }
.principio { padding: 34px 40px 36px 0; border-bottom: 1px solid var(--linea); }
.principio:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--linea); padding-right: 0; }
.principio h3 { font-size: 1.2rem; margin: 0 0 10px; }
.principio p { margin: 0; color: var(--papel-2); }

/* Preguntas. */
.preguntas { max-width: 900px; border-top: 1px solid var(--linea-2); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 24px; gap: 16px; align-items: center; padding: 26px 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 650; letter-spacing: -.012em; transition: color .2s; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: #fff; }
.pregunta summary:active { color: var(--cobalto-claro); transition: none; }
/* Un más que gira a aspa, sin círculo alrededor. */
.pregunta summary .luz-mod { justify-self: end; width: 20px; height: 20px; position: relative; transition: transform .35s var(--curva); }
.pregunta summary .luz-mod::before, .pregunta summary .luz-mod::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: var(--papel); transform: translate(-50%, -50%); border-radius: 2px; }
.pregunta summary .luz-mod::after { transform: translate(-50%, -50%) rotate(90deg); }
.pregunta[open] summary .luz-mod { transform: rotate(45deg); }
/* ---------------------------------------------------------------------------
   FOLIO, la hoja con vida (19/09/2026)
   El personaje de David: su propio logo (un papel con el pliegue cobalto) con cara. No es
   la marca de nadie más. Sale al desplegar una pregunta y es también la cara del asistente.
   Lo que le da vida: mira hacia donde está el ratón o el dedo (web/hoja.js), respira,
   parpadea, hace su gesto, y se despide al cerrar. El dibujo vive en fuente/partes/hoja.html.
   --------------------------------------------------------------------------- */
.hoja-viva { display: inline-block; width: var(--hv-ancho, 44px); height: calc(var(--hv-ancho, 44px) * 36 / 44); line-height: 0; }
.hoja-viva svg { width: 100%; height: 100%; overflow: visible; }
.hoja-viva .papel { fill: var(--papel); }
.hoja-viva .pliegue { fill: var(--cobalto); }
.hoja-viva .sombra { fill: #000; opacity: .28; }
.hoja-viva .renglones path { fill: none; stroke: var(--tinta); stroke-width: 1.1; stroke-linecap: round; opacity: .22; }
.hoja-viva .cejas path { fill: none; stroke: var(--tinta); stroke-width: 1.15; stroke-linecap: round; opacity: .8; transition: transform .25s var(--curva); }
.hoja-viva .ojos { transform: translate(var(--hv-x, 0px), var(--hv-y, 0px)); transition: transform .12s linear; }
.hoja-viva .ojos circle { fill: var(--tinta); transform-box: fill-box; transform-origin: center; }
.hoja-viva .boca { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; }
.hoja-viva .brazo path { fill: none; stroke: var(--papel); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.hoja-viva .g-pensar circle { fill: var(--cobalto-claro); transform-box: fill-box; transform-origin: center; }
.hoja-viva .g-senalar path, .hoja-viva .g-ok path, .hoja-viva .g-saludar path { fill: none; stroke: var(--cobalto-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hoja-viva .g-pensar, .hoja-viva .g-senalar, .hoja-viva .g-ok, .hoja-viva .g-saludar { opacity: 0; }
/* Respira siempre que está a la vista: es lo que más la separa de una pegatina. */
.hoja-viva.viva .cuerpo { transform-box: fill-box; transform-origin: 50% 100%; animation: hv-respira 4.2s ease-in-out infinite; }
.hoja-viva.viva .ojos circle { animation: hv-parpadea 5.4s ease-in-out infinite; }
/* Al pasar el ratón (o al tocarla): levanta las cejas y saluda. */
.hoja-viva.atenta .cejas path { transform: translateY(-1.1px); }
.hoja-viva.atenta .brazo path { opacity: 1; animation: hv-saluda .9s var(--curva) 2; transform-box: fill-box; transform-origin: 0% 60%; }
.hoja-viva.brinca .cuerpo { animation: hv-brinca .6s var(--curva); }
/* Al abrir el chat, la hoja del botón da una vuelta sobre sí misma; y cuando Fold contesta,
   la cara del panel asiente. Dos gestos cortos: la gracia está en que respondan a algo que
   acabas de hacer, no en que se muevan solos. */
.hoja-viva.voltea svg { animation: hv-voltea .75s var(--curva); transform-origin: 50% 50%; }
.hoja-viva.asiente .cuerpo { transform-box: fill-box; transform-origin: 50% 100%; animation: hv-asiente .9s var(--curva); }

/* En las preguntas frecuentes. */
.pregunta summary .hoja-viva { justify-self: end; opacity: 0; --hv-ancho: 44px; }
.pregunta[open] summary .hoja-viva { animation: hv-aparece .45s var(--curva) both; }
.pregunta[open] summary .hoja-viva .cuerpo { animation: hv-asiente 1s .38s var(--curva) both, hv-respira 4.2s 1.4s ease-in-out infinite; }
.pregunta[open] summary .hoja-viva[data-gesto="pensar"] .g-pensar { opacity: 1; }
.pregunta[open] summary .hoja-viva[data-gesto="pensar"] .g-pensar circle { animation: hv-burbuja .5s var(--curva) both; }
.pregunta[open] summary .hoja-viva[data-gesto="pensar"] .g-pensar circle:nth-child(2) { animation-delay: .75s; }
.pregunta[open] summary .hoja-viva[data-gesto="pensar"] .g-pensar circle:nth-child(3) { animation-delay: .95s; }
.pregunta[open] summary .hoja-viva[data-gesto="pensar"] .g-pensar circle:first-child { animation-delay: .55s; }
.pregunta[open] summary .hoja-viva[data-gesto="senalar"] .g-senalar,
.pregunta[open] summary .hoja-viva[data-gesto="saludar"] .g-saludar,
.pregunta[open] summary .hoja-viva[data-gesto="ok"] .g-ok { animation: hv-gesto .45s .7s var(--curva) both; }
/* Se despide en vez de desaparecer de golpe (lo pone y lo quita web/hoja.js). */
.pregunta summary .hoja-viva.despidiendo { animation: hv-despide .26s var(--curva) both; }

@keyframes hv-aparece { from { opacity: 0; transform: translateY(12px) rotate(-12deg) scale(.84); } 60% { opacity: .95; transform: translateY(-2px) rotate(4deg) scale(1.04); } to { opacity: .88; transform: none; } }
@keyframes hv-despide { from { opacity: .88; transform: none; } to { opacity: 0; transform: translateY(6px) rotate(9deg) scale(.8); } }
@keyframes hv-asiente { 0%, 100% { transform: rotate(0); } 28% { transform: rotate(8deg); } 58% { transform: rotate(-4deg); } }
@keyframes hv-respira { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.7px) scale(1.018); } }
@keyframes hv-parpadea { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes hv-burbuja { from { opacity: 0; transform: translateY(5px) scale(.5); } to { opacity: .95; transform: none; } }
@keyframes hv-gesto { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
@keyframes hv-saluda { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 65% { transform: rotate(10deg); } }
@keyframes hv-brinca { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-6px) rotate(-8deg); } 70% { transform: translateY(0) rotate(5deg); } }
@keyframes hv-voltea { from { transform: rotateY(0) scale(1); } 50% { transform: rotateY(180deg) scale(1.12); } to { transform: rotateY(360deg) scale(1); } }
/* Con "reducir movimiento": está, mira y ya. Nada se mueve solo. */
@media (prefers-reduced-motion: reduce) {
  .hoja-viva.viva .cuerpo, .hoja-viva.viva .ojos circle, .hoja-viva.atenta .brazo path, .hoja-viva.brinca .cuerpo,
  .hoja-viva.voltea svg, .hoja-viva.asiente .cuerpo,
  .pregunta[open] summary .hoja-viva, .pregunta[open] summary .hoja-viva .cuerpo,
  .pregunta[open] summary .hoja-viva .g-pensar circle, .pregunta[open] summary .hoja-viva[data-gesto="senalar"] .g-senalar,
  .pregunta[open] summary .hoja-viva[data-gesto="saludar"] .g-saludar,
  .pregunta[open] summary .hoja-viva[data-gesto="ok"] .g-ok { animation: none; opacity: .85; transform: none; }
  .hoja-viva .ojos { transition: none; }
}
/* El cuestionario de las 36 preguntas del kit (20/09/2026). Se rellena después de reservar,
   desde la página de su reserva, y son 10 minutos: se nota que se puede dejar a medias. */
.cu-avisos { margin: 0 0 26px; padding: 16px 18px; border-left: 3px solid var(--cobalto); background: rgba(51, 88, 255, .06); border-radius: 0 8px 8px 0; }
.cu-avisos p { margin: 0 0 10px; font-size: 1rem; line-height: 1.55; color: #3b3f46; }
.cu-avisos p:last-child { margin-bottom: 0; }
.cu-ayuda { display: block; margin-top: 3px; font-weight: 400; font-size: 0.83rem; color: #6b6f77; line-height: 1.45; }
.cu-guardado { margin: 18px 0 14px; font-size: 0.83rem; color: #5a5f67; min-height: 1.2em; }
.cu-invita { margin-top: 22px; }

/* El cuestionario opcional del formulario de reserva (20/09/2026). Va plegado: las cuatro
   preguntas obligatorias son las que hacen que alguien reserve; estas son para quien quiere
   que la reunión cunda más. Panel claro, como el resto del programador. */
.mas-datos { margin: 20px 0 6px; border: 1px dashed #c9c3b8; border-radius: 10px; background: rgba(0, 0, 0, .015); }
.mas-datos[open] { border-style: solid; border-color: #bdb6aa; }
.mas-datos summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; font-size: 1rem; font-weight: 650; color: #3b3f46; }
.mas-datos summary::-webkit-details-marker { display: none; }
.mas-datos summary:hover { color: var(--tinta); }
.mas-datos summary:active { color: var(--cobalto); transition: none; }
/* #5F636B y no #6b6f77: sobre el papel del formulario el anterior daba 4,21:1 a 16 px, por
   debajo del mínimo legible (4,5:1). Medido el 23/09/2026; este da 5,0:1. */
.mas-datos summary b { font-weight: 500; color: #5F636B; }
.mas-datos summary:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; border-radius: 8px; }
.mas-datos summary .luz-mod { position: relative; flex: 0 0 auto; width: 18px; height: 18px; transition: transform .3s var(--curva); }
.mas-datos summary .luz-mod::before, .mas-datos summary .luz-mod::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.7px; background: #3b3f46; transform: translate(-50%, -50%); border-radius: 2px; }
.mas-datos summary .luz-mod::after { transform: translate(-50%, -50%) rotate(90deg); }
.mas-datos[open] summary .luz-mod { transform: rotate(45deg); }
.mas-datos .campos { padding: 4px 16px 18px; }

/* ---------------------------------------------------------------------------
   FOLIO · el asistente (19/09/2026)
   Una ayuda que se asoma, no que asalta: el botón vive abajo a la derecha, el saludo sale
   una sola vez por visita y se puede quitar. El panel es una conversación normal.
   --------------------------------------------------------------------------- */
/* El botón va ABAJO del todo y el panel crece hacia arriba: si no, el panel tapa el botón
   con el que acabas de abrirlo y la cabecera de la web. */
.asistente { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.asistente[hidden] { display: none; }
.as-globo { order: 1; }
.as-panel { order: 2; }
.as-boton { order: 3; }

/* Sin sombra y sin levantarse al pasar el ratón: "The No Capsule Button Rule" del DESIGN.md
   prohíbe las tres cosas por su nombre (píldora, levantamiento, sombra), y esto llevaba las
   tres. El fondo ya se despega del texto por sí solo —es opaco y va desenfocado— así que la
   sombra no separaba nada, solo delataba la plantilla.
   El radio de píldora se queda PENDIENTE DE DAVID: es lo único que da a Fold aspecto de
   asistente y no de botón más, y cambiarlo toca a su marca, no al acabado. Ver DESIGN.md. */
.as-boton { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 10px; border: 1px solid var(--linea-2); border-radius: 999px;
  background: rgba(18, 20, 25, .92); backdrop-filter: blur(8px); color: var(--papel); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s; }
.as-boton:hover { border-color: var(--cobalto); background: rgba(26, 30, 38, .96); }
.as-boton:active { border-color: var(--cobalto); background: rgba(14, 16, 21, .96); transition: none; }
/* La llegada de Fold a la pantalla (la pone asistente.js cuando la página ya está leíble). */
.as-boton.llega { animation: as-fold-llega .62s var(--rebote) both; }
.as-boton .hoja-viva { --hv-ancho: 34px; }
.as-boton-txt { letter-spacing: -.01em; }

/* EL GLOBO DEL SALUDO DE FOLD.
   Antes era una "nube de pensamiento" hecha con ocho lóbulos fundidos por un filtro SVG. En
   la pantalla de David se veía como una mancha VERDE LIMA con rayas diagonales, y el color
   ni siquiera era de la marca. La causa no era un ajuste flojo: el filtro desenfoca y luego
   multiplica el alfa por 24, y ese escalón sobre un degradado produce banding — que en sRGB,
   sobre el papel cálido, tira al verde. Las rayas eran las bandas. El efecto no se puede
   hacer bien por esa vía, así que se retira entero.
   En su sitio, lo que pedía David (21/09/2026: "que sea bonito y elegante"): un globo de
   PAPEL, esquinas muy redondeadas, sombra suave y dos burbujitas bajando hacia Fold. Lo que
   dice "esto lo está pensando él" no es deformar la silueta: son las burbujitas. */
.as-globo { position: relative; width: 246px; max-width: 100%; padding: 15px 34px 16px 18px;
  color: var(--tinta); background: var(--papel); border-radius: 20px 20px 6px 20px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .5), 0 2px 0 rgba(255, 255, 255, .5) inset;
  margin-bottom: 30px; font-size: 1rem; line-height: 1.45; letter-spacing: -.005em;
  /* Se infla desde abajo a la derecha, que es donde está Fold: el pensamiento sale DE ÉL. */
  transform-origin: 88% 108%;
  animation: as-nube-pop .52s .2s var(--rebote) both; }
.as-globo[hidden] { display: none; }

/* Las burbujitas que bajan hacia Fold YA EXISTEN en el HTML (`.as-burbujitas`, más abajo) y
   tienen su animación pensada. Las volví a hacer aquí con pseudo-elementos sin mirar si ya
   estaban, y salieron dobles. Se usan las del HTML. */

/* Los lóbulos ya no se usan. Se deja la regla para que, si algún HTML todavía los trae, no
   asomen por debajo del globo. */
.as-nube { display: none; }

.as-globo-txt { position: relative; z-index: 1; margin: 0; }


/* Las dos que bajan hacia el botón salen ANTES que la nube: primero el pensamiento se insinúa
   junto a Fold y luego crece. */
.as-burbujitas i { position: absolute; border-radius: 50%; background: var(--papel); }
.as-burbujitas i:nth-child(1) { width: 15px; height: 15px; right: 30px; bottom: -14px; animation: as-burbuja-sale .34s .1s var(--rebote) both; }
.as-burbujitas i:nth-child(2) { width: 9px; height: 9px; right: 14px; bottom: -27px; animation: as-burbuja-sale .3s 0s var(--rebote) both; }

/* Y una vez formada, respira: una nube quieta del todo parece una pegatina. */
.as-globo.posada { animation: as-nube-flota 5s ease-in-out infinite; }
.as-globo.posada .as-burbujitas i { animation: as-lobulo-respira 5s .2s ease-in-out infinite; }
.as-globo-txt { margin: 0; font-size: 0.83rem; line-height: 1.42; }

/* EL GLOBO ENTERO ES EL BOTÓN que abre la ayuda: un botón invisible que lo cubre, y que se
   pasa un poco de sus bordes para que también valgan las burbujitas y el aire de alrededor (por
   eso el inset negativo). Así se toca donde parece que hay que tocar. */
.as-globo-si { position: absolute; inset: -18px -12px -10px -12px; z-index: 2;
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: 34px; }
.as-globo-si:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; }
/* Al pasar el ratón la nube se aclara un punto y la sombra baja: se nota que es tocable sin
   tener que dibujarle un botón dentro. */
/* Al pasar el ratón el globo se aclara y la sombra baja: se nota que es tocable sin tener que
   dibujarle un botón dentro. */
.as-globo:has(.as-globo-si:hover) { background: #fff; box-shadow: 0 22px 46px rgba(0, 0, 0, .58), 0 2px 0 rgba(255, 255, 255, .6) inset; }
.as-globo:has(.as-globo-si:hover) .as-burbujitas i { background: #fff; }

/* Y la cruz de "ahora no", arriba a la derecha y discreta. Está dibujada con dos trazos en
   vez de un icono: así no depende de ningún símbolo externo. */
.as-globo-no { position: absolute; z-index: 3; top: 7px; right: 8px; width: 20px; height: 20px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: none;
  color: #8d8880; cursor: pointer; opacity: .5; transition: opacity .2s, color .2s, background .2s; }
.as-globo-no span { display: block; width: 9px; height: 9px; position: relative; }
.as-globo-no span::before, .as-globo-no span::after {
  content: ''; position: absolute; left: 0; top: 4px; width: 9px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.as-globo-no span::before { transform: rotate(45deg); }
.as-globo-no span::after { transform: rotate(-45deg); }
.as-globo-no:hover, .as-globo-no:focus-visible { opacity: 1; color: var(--tinta); background: rgba(0, 0, 0, .07); }

.as-panel { width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column;
  border: 1px solid var(--linea-2); border-radius: 16px; background: #101216; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); overflow: hidden;
  transform-origin: 100% 100%; animation: as-panel-abre .42s var(--rebote) both; }
.as-panel[hidden] { display: none; }
.as-cabeza { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--linea); background: #14171c; }
.as-cabeza .hoja-viva { --hv-ancho: 32px; }
.as-quien { display: flex; flex-direction: column; line-height: 1.25; }
.as-quien b { font-size: 1rem; }
.as-quien small { color: var(--papel-2); font-size: 0.83rem; }
.as-cerrar { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--papel); display: grid; place-items: center; }
.as-cerrar .luz-mod { width: 18px; height: 18px; position: relative; display: block; transform: rotate(45deg); transition: transform .3s var(--curva); }
.as-cerrar .luz-mod::before, .as-cerrar .luz-mod::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; background: var(--papel); transform: translate(-50%, -50%); border-radius: 2px; }
.as-cerrar .luz-mod::after { transform: translate(-50%, -50%) rotate(90deg); }
.as-cerrar:hover .luz-mod { transform: rotate(135deg); }

.as-charla { flex: 1; overflow-y: auto; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.as-dice { position: relative; max-width: 92%; padding: 11px 13px; border-radius: 13px 13px 13px 4px; background: #191d23; border: 1px solid var(--linea); font-size: 1rem; line-height: 1.55; color: var(--papel); white-space: pre-line; animation: as-dice-entra .34s var(--rebote) both; transform-origin: 0 100%; }
.as-dice.yo { align-self: flex-end; border-radius: 13px 13px 4px 13px; background: var(--cobalto); border-color: transparent; color: #fff; white-space: normal; transform-origin: 100% 100%; }
/* Lo que dice Fold sale de una nubecita: dos burbujas a su izquierda, como el saludo. */
.as-dice:not(.yo)::before, .as-dice:not(.yo)::after { content: ''; position: absolute; left: 2px; border-radius: 50%; background: #191d23; border: 1px solid var(--linea); }
.as-dice:not(.yo)::before { width: 9px; height: 9px; bottom: -7px; }
.as-dice:not(.yo)::after { width: 5px; height: 5px; left: -6px; bottom: -15px; }
.as-dice b { color: #fff; }
.as-dice .as-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.as-dice .as-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--cobalto); border-radius: 7px; color: var(--cobalto-claro); font-size: 0.83rem; font-weight: 600; text-decoration: none; }
.as-dice .as-links a:hover { background: var(--cobalto); color: #fff; }
.as-pensando { display: inline-flex; gap: 5px; align-items: center; padding: 13px; }
.as-pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--papel-2); animation: as-late 1.1s ease-in-out infinite; }
.as-pensando i:nth-child(2) { animation-delay: .15s; }
.as-pensando i:nth-child(3) { animation-delay: .3s; }

.as-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 14px 0; }
/* 6 px, no píldora: estos sí son botones corrientes de la interfaz, y la regla de la casa
   dice rectángulos de 6 px. La píldora solo se discute en el lanzador de Fold, que es otra cosa. */
.as-chips button { font: inherit; font-size: 0.83rem; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--linea-2); background: transparent; color: var(--papel-2); cursor: pointer; transition: color .2s, border-color .2s; }
.as-chips button:hover { color: var(--papel); border-color: var(--cobalto); }
.as-chips button:active { color: var(--cobalto-claro); border-color: var(--cobalto); transition: none; }

.as-escribir { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 14px 6px; }
.as-escribir input { font: inherit; font-size: 1rem; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--linea-2); background: #0c0e11; color: var(--papel); }
.as-escribir input:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 1px; }
.as-escribir button { width: 42px; border: 0; border-radius: 10px; background: var(--cobalto); color: #fff; cursor: pointer; display: grid; place-items: center; }
.as-escribir button:hover { background: var(--cobalto-claro); color: var(--tinta); }
.as-escribir .icono { width: 17px; height: 17px; }
.as-nota { margin: 0; padding: 0 14px 12px; font-size: 0.69rem; color: var(--papel-2); opacity: .75; line-height: 1.45; }

@keyframes as-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes as-late { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
/* El pensamiento se forma: cada burbuja sale de la nada, se pasa un poco y se asienta. */
@keyframes as-burbuja-sale { from { opacity: 0; transform: scale(.1); } to { opacity: 1; transform: scale(1); } }
@keyframes as-nube-pop { from { opacity: 0; transform: translateY(14px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes as-nube-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes as-lobulo-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* Fold llega a la pantalla: sube desde abajo, se pasa de frenada y se queda. */
@keyframes as-fold-llega { from { opacity: 0; transform: translateY(80px) scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
/* El panel se abre DESDE el botón, no desde el centro de la nada. */
@keyframes as-panel-abre { from { opacity: 0; transform: translateY(24px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes as-dice-entra { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

/* En el móvil ocupa casi toda la pantalla: un chat de 380 px en un móvil no se lee. */
@media (max-width: 560px) {
  .asistente { right: 14px; bottom: 14px; left: 14px; align-items: flex-end; }
  .as-panel { width: 100%; max-height: calc(100vh - 100px); }
  /* Más estrecha: 218 px sobre una pantalla de 360 es casi dos tercios del ancho, y tapa
     demasiado de lo que se está leyendo. */
  .as-globo { width: 194px; max-width: 100%; padding: 12px 30px 12px 15px; }
  .as-globo-txt { font-size: 0.83rem; }
}
@media (prefers-reduced-motion: reduce) {
  .as-globo, .as-panel, .as-dice, .as-boton.llega,
  .as-globo.posada, .as-globo .as-nube i, .as-globo .as-burbujitas i,
  .as-globo.posada .as-nube i, .as-globo.posada .as-burbujitas i { animation: none; opacity: 1; transform: none; }
  .as-pensando i { animation: none; opacity: .7; }
  .as-charla { scroll-behavior: auto; }
}

.pregunta .respuesta { padding: 0 60px 30px 0; max-width: 68ch; color: var(--papel-2); font-size: 1rem; }
.pregunta .respuesta p { margin: 0 0 12px; }

/* Cierre de las páginas interiores. */
.reserva { padding: 120px 0; }
/* El cierre de cada página: un filo arriba y el texto, sin tarjeta alrededor. */
.reserva > .envoltura[style*="block"] { border-top: 1px solid var(--linea-2); padding-top: 64px; }
.reserva h2 { margin-bottom: 22px; }
.reserva .intro { margin-bottom: 38px; }

/* ------------------------------------------------------------------ reservar (programador) */
#reservar.reserva .envoltura:not([style]) { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
#reservar.reserva .envoltura > * { min-width: 0; }
#reservar.reserva .directo { flex-direction: column; margin-top: 36px; gap: 14px; }
/* color-scheme claro: la página es oscura, y sin esto las casillas y los botones de opción
   nativos salían en negro, como si ya estuvieran marcados (revisión del 18/09). */
.programador { color-scheme: light; background: var(--papel); color: var(--tinta); border-radius: 6px; padding: 0; overflow: hidden; box-shadow: 0 40px 70px -50px #000; }
.programador .pantalla { display: block; }
.programador .barra { color: var(--tinta-2); border-bottom: 1px solid rgba(16, 17, 20, .1); padding: 16px 30px; }
.programador .cuerpo { padding: 30px; display: block; }
.programador b, .programador strong { color: var(--tinta); }
.programador a { color: var(--tinta); }
.paso-t { color: var(--tinta-2); margin: 0 0 12px; }
form.datos { margin: 0; }
form.datos .paso-t:not(:first-child) { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(16, 17, 20, .1); }
.ayuda-paso { margin: -2px 0 16px; font-size: 1rem; color: var(--tinta-2); }
.dias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.dia { flex: none; width: 72px; border: 1px solid rgba(16, 17, 20, .14); cursor: pointer; font: inherit; color: var(--tinta); text-align: center; padding: 10px 4px 9px; border-radius: 6px; background: #fff; transition: border-color .2s, background .2s, color .2s; }
.dia span { display: block; font-stretch: 75%; font-weight: 650; font-size: 0.69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.dia b { display: block; font-size: 1.44rem; font-weight: 720; line-height: 1.1; }
.dia:hover { border-color: rgba(16, 17, 20, .4); }
/* En el calendario el acuse importa el doble: se pulsa con el pulgar, deprisa y varias veces
   seguidas. Sobre papel claro se acusa oscureciendo el fondo, no el borde, que a 44 px de
   alto casi no se ve. */
.dia:active { background: rgba(16, 17, 20, .10); transition: none; }
.dia[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.dia[aria-pressed="true"] span, .dia[aria-pressed="true"] b { color: var(--papel); }
.franja-t { font-weight: 600; font-size: 1rem; color: var(--tinta-2); margin: 18px 0 10px; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.hora { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(16, 17, 20, .14); cursor: pointer; font: 650 1rem/1 'Archivo', sans-serif; color: var(--tinta); padding: 12px 6px; border-radius: 6px; background: #fff; transition: border-color .2s, background .2s; }
.hora i { display: none; }
.hora:hover { border-color: rgba(16, 17, 20, .4); }
.hora:active { background: rgba(16, 17, 20, .10); transition: none; }
.hora[aria-pressed="true"] { background: #E9EDFF; border-color: var(--cobalto); box-shadow: inset 0 0 0 1px var(--cobalto); }
.hora[aria-pressed="true"] i { background: var(--cobalto); }
.elegido { font-weight: 680; font-size: 1.2rem; margin: 16px 0 14px; min-height: 1.2em; color: var(--tinta); }
.elegido.vacio { color: var(--tinta-2); font-weight: 400; font-stretch: 100%; font-size: 1rem; }
.formato { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; }
/* Las preguntas, en letra normal y grande: quien rellena puede ser un dueño de 60 años. */
.formato legend { color: var(--tinta); font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0 0 12px; padding: 0; width: 100%; }
.opcion { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 6px; background: #fff; border: 1px solid rgba(16, 17, 20, .14); cursor: pointer; font-weight: 600; transition: border-color .2s, background .2s; }
.opcion input { accent-color: var(--cobalto); width: 18px; height: 18px; margin: 0; }
.opcion:has(input:checked) { background: #E9EDFF; border-color: var(--cobalto); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campos .ancho { grid-column: 1 / -1; }
label.c { display: grid; gap: 8px; color: var(--tinta); font-size: 1rem; font-weight: 600; line-height: 1.35; }
input, textarea, select {
  font: 400 1rem/1.4 'Archivo', sans-serif; color: var(--tinta); background: #fff; width: 100%;
  border: 1px solid rgba(16, 17, 20, .18); border-radius: 5px; padding: 13px 14px; letter-spacing: 0; text-transform: none;
  transition: border-color .2s, box-shadow .2s;
}
select { appearance: none; padding-right: 38px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2345474C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
input::placeholder, textarea::placeholder { color: #75777C; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cobalto); box-shadow: 0 0 0 3px rgba(51, 88, 255, .18); }
textarea { resize: vertical; min-height: 96px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; font-size: 1rem; color: var(--tinta-2); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--cobalto); padding: 0; }
.error { margin: 2px 0 0; color: var(--rojo-error-tinta); font: 600 .9rem/1.35 'Archivo', sans-serif; letter-spacing: 0; text-transform: none; }
[aria-invalid="true"] { border-color: var(--rojo-error-tinta) !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .14) !important; }
.aviso-envio { margin-top: 14px; }
.precio-linea { margin: 0 0 18px; font-size: 1rem; color: var(--tinta-2); }
.precio-linea b { font-size: 1.44rem; font-weight: 750; color: var(--tinta); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.programador .pulsador { margin-top: 6px; }
.reservada { padding: 6px 0 4px; outline: none; }
.estado-ok { display: flex; align-items: center; gap: 14px; font-weight: 720; font-size: 1.44rem; letter-spacing: -.02em; margin: 0 0 14px; color: var(--tinta); }
.estado-ok > span { margin-top: 0 !important; flex: none; }
.programador .lamp-ok { background: var(--cobalto); }
.programador .lamp-off { background: #A8A49B; }
.cuando { font-weight: 700; font-size: 1.2rem; margin: 0 0 12px; color: var(--tinta); }
.reservada p, .programador .cuerpo > div > p { color: var(--tinta-2); }
.reservada .tel, .programador .tel { white-space: nowrap; }
.programador .datos-tec { border-top-color: rgba(16, 17, 20, .2); }
.programador .datos-tec dt, .programador .datos-tec dd { border-bottom-color: rgba(16, 17, 20, .1); }
.programador .datos-tec dt { color: var(--tinta-2); }
.datos-pago { margin: 8px 0 20px; }
.datos-pago dd { font-weight: 700; font-size: 1.2rem; color: var(--tinta); user-select: all; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ pie */
/* El pie: datos y enlaces, sin eslogan ni marca gigante de fondo (la "marca de agua"
   enorme era la tendencia de pie más copiada de estos años). */
.pie { border-top: 1px solid var(--linea); padding: 72px 0 36px; position: relative; z-index: 1; background: var(--fondo); overflow: hidden; }
.pie-rejilla { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 48px; padding: 0 0 40px; }
.colofon { margin: 0; padding: 22px 0; border-top: 1px solid var(--linea); font-size: 0.83rem; color: var(--papel-3); }
.enlaces-pie { display: grid; gap: 12px; align-content: start; }
.enlaces-pie a { color: var(--papel-2); text-decoration: none; width: fit-content; }
.enlaces-pie a:hover, .enlaces-pie a[aria-current] { color: var(--papel); text-decoration: underline; }
.pie-datos { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; align-content: start; }
.pie-datos dt { color: var(--papel-3); padding-top: 4px; }
.pie-datos dd { margin: 0; color: var(--papel-2); }
.pie-datos a { color: var(--papel); text-decoration: none; }
.pie-datos a:hover { text-decoration: underline; }
.legal { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 0.83rem; color: var(--papel-3); }
.legal a { color: var(--papel-2); text-decoration: none; }
.legal a:hover { color: var(--papel); text-decoration: underline; }

/* ------------------------------------------------------------------ pantallas medianas */
@media (max-width: 1020px) {
  :root { --envoltura: min(1320px, 100% - 44px); }
  .nav { display: none; }
  .cab-reservar { margin-left: auto; }
  .boton-menu { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--linea-2); color: var(--papel); border-radius: 6px; height: 42px; padding: 0 16px 0 14px; font: 600 .92rem/1 'Archivo', sans-serif; cursor: pointer; }
  .boton-menu .rayas { width: 16px; height: 10px; border-block: 1.6px solid currentColor; position: relative; }
  .boton-menu[aria-expanded="true"] .rayas { border-color: transparent; }
  .boton-menu[aria-expanded="true"] .rayas::before, .boton-menu[aria-expanded="true"] .rayas::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.6px; background: currentColor; transform: rotate(45deg); }
  .boton-menu[aria-expanded="true"] .rayas::after { transform: rotate(-45deg); }
  .nav.abierto { display: flex; position: fixed; inset: 78px 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 28px; background: var(--fondo); border-bottom: 1px solid var(--linea); margin: 0; }
  .nav.abierto a { font-size: 1.44rem; font-weight: 680; padding: 16px 0; border-bottom: 1px solid var(--linea); color: var(--papel); }
  .nav.abierto a::after { display: none; }
  .cabeza-seccion, .cabeza-pagina .envoltura, .honestidad .envoltura, .persona, .ficha, #reservar.reserva .envoltura:not([style]) { grid-template-columns: 1fr; gap: 36px; }
  .ficha .aparato, .placa-carac { position: static; }
  .fila-ad { grid-template-columns: 1fr 1fr; gap: 18px 36px; }
  .fila-ad h3 { grid-column: 1 / -1; }
  /* Sin las tres columnas, fuera la cabecera, y cada celda dice lo que es. */
  .cabeza-tabla { display: none; }
  .fila-ad .etq { display: inline; font-weight: 600; }
  .fila-ad .auto .etq { color: var(--cobalto-claro); }
  .casos-portada { grid-template-columns: 1fr; }
  .caso-portada { padding: 36px 0 40px; }
  .caso-portada + .caso-portada { padding: 36px 0 8px; border-left: 0; border-top: 1px solid var(--linea); }
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .heroe::before { background: linear-gradient(180deg, rgba(11, 12, 14, .5), rgba(11, 12, 14, .82) 55%, rgba(11, 12, 14, .5)); }
  .como { min-height: auto; }
  .columna-texto { max-width: 620px; }
}

/* ------------------------------------------------------------------ móvil */
@media (max-width: 640px) {
  :root { --envoltura: calc(100% - 32px); }
  body { font-size: 17px; }
  /* En el móvil la cabecera interior no tiene columna libre: los papeles, de rastro tenue. */
  .cabeza-pagina .lienzo-3d { opacity: .28; }
  .cabecera .envoltura { height: 66px; gap: 12px; }
  .nav.abierto { inset: 66px 0 auto; }
  .marca small { display: none; }
  .cab-reservar .largo { display: none; }
  .cab-reservar { padding-left: 14px; }
  .cab-reservar .tapa { display: none; }
  .boton-menu { padding: 0 12px; }
  .heroe { padding: 46svh 0 90px; align-items: end; }
  /* Arriba, el remolino al aire; abajo, sombra para que el titular se lea. */
  .heroe::before { background: linear-gradient(180deg, rgba(11, 12, 14, 0) 0%, rgba(11, 12, 14, .2) 32%, rgba(11, 12, 14, .88) 56%, rgba(11, 12, 14, .94) 100%); }
  .cierre .envoltura { grid-template-columns: 1fr; }
  .h1-sub { margin-top: 22px; }
  .acciones { gap: 20px; margin-top: 34px; }
  .aviso-escena { right: 16px; bottom: 18px; }
  .seccion, #que, #arranque { padding: 96px 0; }
  #instalaciones { padding: 120px 0 96px; }
  section:not(.seccion):not(.cabeza-pagina):not(.caso-hmi):not(.reserva):not(.heroe) { padding: 80px 0; }
  .cabeza-seccion { margin-bottom: 44px; }
  .fila-ad { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .cifras { grid-template-columns: 1fr; gap: 20px; }
  .pasos { grid-template-columns: 1fr; row-gap: 0; }
  .pasos li { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
  .pasos li::before { grid-row: 1 / 3; margin: 2px 0 0; }
  .pasos li h3 { margin-bottom: 8px; }
  .hoja-3d { min-height: 380px; }
  .sello { right: -12px; font-size: 1rem; }
  .pasos-reserva ol { grid-template-columns: 1fr; }
  .pasos-reserva li, .pasos-reserva li + li { padding: 24px 0; border-left: 0; }
  .cabeza-pagina { padding: 130px 0 72px; }
  .caso-hmi { padding: 72px 0; }
  .barra { padding: 16px 20px; flex-wrap: wrap; }
  .cuerpo { padding: 26px 20px 24px; }
  .fila-hmi { grid-template-columns: 1fr; gap: 8px; }
  .bandeja .fila-hmi { grid-template-columns: 22px 1fr; gap: 12px; }
  .datos-tec { grid-template-columns: 1fr; }
  .datos-tec dt { border-bottom: 0; padding-bottom: 4px; }
  .datos-tec dd { padding-top: 0; }
  .ficha { padding: 76px 0; }
  .persona { padding: 76px 0; }
  .principios { grid-template-columns: 1fr; }
  .principio, .principio:nth-child(even) { padding: 28px 0; border-left: 0; }
  .pregunta .respuesta { padding-right: 0; }
  .reserva { padding: 80px 0; }
  .reserva > .envoltura[style*="block"] { padding-top: 44px; }
  .programador .cuerpo { padding: 22px 18px; }
  .programador .barra { padding: 16px 18px; }
  .campos { grid-template-columns: 1fr; }
  .pie { padding-top: 56px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 36px; }
}


/* ---------------------------------------------------------------------------
   PÁGINA DE FOLD (20/09/2026)
   Todas las clases llevan el prefijo fold- a propósito: en esta web ya hubo tres choques
   por reutilizar nombres genéricos (.intro, .cifras, .entrada), y un nombre repetido
   descoloca cosas en otras páginas sin dar ningún error.
   --------------------------------------------------------------------------- */
.fold-probar { padding: 30px 0 0; }
.fold-probar h2 { margin: 0 0 14px; }
.fold-probar .intro { margin: 0 0 24px; }
/* 56px y no 96: con 96 quedaba un hueco muerto enorme entre los botones y la sección
   siguiente, que ya trae su propio aire. */
.fold-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; }
.fold-pregunta {
  font: inherit; font-size: 1rem; color: var(--papel-2); cursor: pointer;
  background: var(--fondo-2); border: 1px solid var(--linea-2); border-radius: 6px;
  padding: 11px 16px; transition: border-color .18s var(--curva), color .18s var(--curva), background .18s var(--curva);
}
.fold-pregunta:hover { color: var(--papel); border-color: var(--cobalto); background: rgba(51, 88, 255, .08); }
.fold-pregunta:active { color: var(--papel); border-color: var(--cobalto); background: rgba(51, 88, 255, .18); transition: none; }
.fold-pregunta:disabled { cursor: default; color: var(--papel-3); border-color: var(--linea); background: none; }

.fold-alcance { padding: 0 0 96px; }
.fold-alcance h2, .fold-limites h2, .fold-avances h2, .fold-proyectos h2, .fold-herramientas h2 { margin: 0 0 14px; }
.fold-alcance .intro, .fold-limites .intro, .fold-avances .intro, .fold-proyectos .intro, .fold-herramientas .intro { margin: 0 0 32px; }
.fold-limites, .fold-proyectos, .fold-herramientas { padding: 0 0 96px; }
.fold-limites .datos-tec, .fold-proyectos .datos-tec, .fold-herramientas .datos-tec { max-width: 980px; }
.fold-limites .datos-tec dt, .fold-proyectos .datos-tec dt, .fold-herramientas .datos-tec dt { color: var(--papel); font-weight: 650; padding-right: 48px; }

/* La línea de avances: una regla vertical con un punto por hito. El punto se dibuja con el
   borde del ::before para que se vea igual si falla la fuente o el color de fondo. */
.fold-avances { padding: 0 0 110px; }
.fold-linea { list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--linea-2); max-width: 820px; }
.fold-linea li { position: relative; padding: 0 0 38px; }
.fold-linea li::before {
  content: ''; position: absolute; left: -36px; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--fondo); border: 2px solid var(--cobalto);
}
.fold-linea li:last-child { padding-bottom: 0; }
.fold-fecha { margin: 0 0 4px; color: var(--papel-3); font-size: 0.83rem; }
.fold-linea h3 { margin: 0 0 8px; font-size: 1rem; }
.fold-linea p:last-child { margin: 0; color: var(--papel-2); }

@media (max-width: 720px) {
  .fold-botones { margin-bottom: 64px; }
  .fold-linea { padding-left: 22px; }
  .fold-linea li::before { left: -27px; }
}


/* EL CONTADOR DE CIFRAS (20/09/2026). La pieza la escribe contar-capacidades.js contando la
   carpeta del proyecto: aquí solo se le da forma. Los números grandes con tipografía tabular,
   que es lo que hace que una columna de cifras se lea como una tabla y no como texto. */
.fold-cifras { padding: 0 0 96px; }
.fold-cifras h2 { margin: 0 0 14px; }
.fold-cifras .intro { margin: 0 0 40px; }
.fold-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--linea-2); }
.fold-cifra { padding: 28px 30px 28px 0; border-bottom: 1px solid var(--linea); }
.fold-cifra:nth-child(odd) { border-right: 1px solid var(--linea); padding-right: 30px; }
.fold-cifra:nth-child(even) { padding-left: 30px; }
.fold-numero { margin: 0 0 2px; font-size: 2.49rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--papel); }
.fold-numero small { font-size: 0.83rem; font-weight: 500; color: var(--papel-3); margin-right: 8px; vertical-align: middle; }
.fold-sube { display: inline-block; margin-left: 12px; font-size: 0.83rem; font-weight: 600; color: var(--cobalto-claro); vertical-align: middle; }
.fold-cifra h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--papel-2); }
.fold-cifra p:last-child { margin: 0; font-size: 0.83rem; color: var(--papel-3); }
.fold-medido { margin: 24px 0 0; font-size: 0.83rem; color: var(--papel-3); }

/* EL CIERRE: que escriba su caso y le conteste Fold. Es la demostración, no la promesa. */
.fold-cierre { position: relative; padding: 46px 0 110px; max-width: 760px; }
.fold-cierre-cara { --hv-ancho: 56px; display: block; margin-bottom: 18px; }
.fold-cierre h2 { margin: 0 0 12px; }
.fold-cierre .intro { margin: 0 0 26px; }
.fold-caso { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.fold-caso-etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fold-caso input {
  flex: 1 1 330px; font: inherit; font-size: 1rem; color: var(--papel);
  background: var(--fondo-2); border: 1px solid var(--linea-2); border-radius: 6px; padding: 14px 16px;
}
.fold-caso input::placeholder { color: var(--papel-3); }
.fold-caso input:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: transparent; }
.fold-caso .pulsador { flex: 0 0 auto; }
.fold-caso-nota { margin: 16px 0 0; font-size: 0.83rem; color: var(--papel-3); }
/* El aviso cuando lo escrito no se puede mandar. Ocupa la fila entera (el formulario es un
   flex con envoltura) para que no empuje al botón a otra línea. Sin color de alarma: no ha
   fallado nada, es que faltan letras. */
.fold-caso-aviso { flex: 1 0 100%; margin: 12px 0 0; font-size: 0.9rem; color: var(--papel-2); }
.fold-caso input[aria-invalid="true"] { border-color: var(--papel-3); }

@media (max-width: 720px) {
  .fold-rejilla { grid-template-columns: 1fr; }
  .fold-cifra, .fold-cifra:nth-child(odd), .fold-cifra:nth-child(even) { padding: 22px 0; border-right: 0; padding-left: 0; }
  .fold-numero { font-size: 2.07rem; }
  .fold-cierre { padding-bottom: 72px; }
  .fold-caso .pulsador { width: 100%; }
}


/* FOLD EN 3D (20/09/2026). La caja NACE INVISIBLE y solo aparece cuando la escena avisa de que
   está lista. Es la misma regla que la cortina de la portada: lo que pone un script y quita
   otro tiene que aguantar que el segundo no llegue. Sin WebGL, aquí no hay nada — y como el
   hueco no está reservado, tampoco deja un agujero en el diseño. */
.fold-3d-caja { position: relative; display: none; }
.fold-3d-caja:has(.fold-3d[data-estado="lista"]) { display: block; }
/* 340 px eran pocos, y se veía: en la captura del 22/09/2026 la escena ocupaba una esquina de
   604×340 y debajo quedaban más de 200 px de héroe vacío. Un sistema con sus nodos y sus
   cables no cabe en una tarjeta; con sitio, se lee como lo que es. Va en `clamp` y no en un
   número fijo para que crezca con la pantalla sin pasarse en un portátil pequeño. */
.fold-3d { width: 100%; height: clamp(360px, 52vh, 560px); }
.fold-3d canvas { display: block; width: 100%; height: 100%; }
.fold-3d-caja:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 6px; border-radius: 10px; }

/* La pista y las etapas ocupan LA MISMA línea, y se relevan: en reposo se lee "tócame",
   y al entrar en el sistema la pista se va y aparecen las etapas. Antes se pintaban las dos
   a la vez y se solapaban (visto en captura el 20/09/2026): dos textos encima del otro, que
   es justo lo contrario de "cuidado con todos los detalles". */
/* Sin latido: hasta el 23/09/2026 la pista pulsaba en bucle (opacidad .55 ↔ .95, infinito).
   Es justo lo que el DESIGN.md prohíbe por nombre («no infinite decorative CSS animations on
   UI; continuous motion is the scene's alone»): lo que se mueve al lado es Fold, y un rótulo
   que late compite con él. Quieta, se lee igual. */
.fold-3d-pista {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  margin: 0; font-size: 0.83rem; color: var(--papel-3); opacity: .8;
  pointer-events: none; transition: opacity .4s var(--curva);
}
.fold-3d[data-en-sistema="si"] ~ .fold-3d-pista { opacity: 0; }

@media (max-width: 720px) {
  /* En el móvil también crece, pero medido contra el alto de la pantalla: 260 px fijos dejaban
     a Fold del tamaño de un sello en un teléfono alto. */
  .fold-3d { height: clamp(300px, 42vh, 420px); }
}


/* ===========================================================================
   EL APARTADO DE FOLD  (20/09/2026)
   David: "haz un apartado único con tu propia intro y todo, con fondos y
   perfectamente hecho, como un profesional de animación y páginas webs".
   Por eso este apartado NO usa la cabecera estándar de las demás páginas: tiene
   su propia intro a dos columnas, su fondo vivo y su ritmo de entrada.
   =========================================================================== */
.pag-fold { position: relative; }

/* El fondo vivo, detrás de todo. Fijo y no absoluto: así la retícula no se arrastra
   con el scroll y da sensación de profundidad, como mirar por una ventana. */
.fold-fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pag-fold > *:not(.fold-fondo) { position: relative; z-index: 1; }

/* ---- la intro ---------------------------------------------------------- */
.fold-intro { padding: 74px 0 96px; }
.fold-intro-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.fold-intro-texto .miga { margin: 0 0 18px; }

/* El titular grande, con la ligadura de la letra variable. El cursor solo existe
   mientras se escribe: dejarlo parpadeando para siempre cansa. */
.fold-titular { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: .98; letter-spacing: -.028em; margin: 0 0 22px; }
.fold-titular [data-escribe].escribiendo::after {
  content: ''; display: inline-block; width: .07em; height: .82em; margin-left: .06em;
  background: var(--cobalto); vertical-align: -.06em; animation: fold-cursor .62s steps(1) infinite;
}
@keyframes fold-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.fold-entradilla { max-width: 46ch; font-size: 1rem; line-height: 1.62; color: var(--papel-2); margin: 0 0 30px; }
.fold-intro-pies { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fold-enlace-suave { color: var(--papel-3); font-size: 1rem; text-underline-offset: 4px; }
.fold-enlace-suave:hover { color: var(--papel); }

/* ---- el revelado al bajar ---------------------------------------------- */
/* Corto y hacia arriba. Un desplazamiento largo hace que la página parezca que
   "salta"; 14 píxeles bastan para que se note que algo entra. */
/* Aquí hubo un revelado al bajar (cada bloque entraba al llegar a la pantalla) y se
   QUITÓ el 20/09/2026. Dependía de que un script llegara y de que el observador
   disparase, y cuando algo de eso fallaba media página quedaba invisible — pasó en dos
   capturas seguidas. Un adorno no puede poder esconder el contenido.
   Lo que anima este apartado ahora es todo ADITIVO: la intro que se escribe sola, el
   fondo vivo, Fold en 3D y las cifras que cuentan. Si algo de eso falla, se pierde el
   adorno, nunca el texto. */

/* ---- ritmo: que no todas las secciones se vean igual -------------------- */
/* Aquí hubo, hasta el 23/09/2026, un filo cobalto de 3 px a la izquierda de CADA título
   del apartado. Se quitó por dos motivos escritos en el propio DESIGN.md: el cobalto
   significa "procesado" o "la acción" y «never decorates or emphasises a headline», y la
   barrita de acento pegada a los títulos es de las marcas más repetidas de las webs
   generadas por plantilla (la lista de la skill construir-web-cliente). El cuaderno se
   reconoce por lo que dice, no por una raya. */

/* Las secciones de cifras y de proyectos, sobre un panel: rompen la sucesión de
   bloques sueltos y dan respiro. 8 px de radio, el de los paneles del resto de la web:
   los 14 px anteriores eran el único radio de ese tamaño en todo el sitio. */
.pag-fold .fold-cifras, .pag-fold .fold-proyectos {
  background: rgba(17, 19, 24, .72); border: 1px solid var(--linea-2); border-radius: 8px;
  padding: 40px 34px; margin-bottom: 96px; backdrop-filter: blur(3px);
}
.pag-fold .fold-cifras .fold-medido { margin-bottom: 0; }

@media (max-width: 900px) {
  .fold-intro-rejilla { grid-template-columns: 1fr; gap: 26px; }
  .fold-intro { padding: 44px 0 64px; }
  .pag-fold .fold-cifras, .pag-fold .fold-proyectos { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-titular [data-escribe].escribiendo::after { animation: none; opacity: 0; }
}


/* ---------------------------------------------------------------------------
   LA BARRA DE CARGA DE LA CASA (20/09/2026)
   El círculo de carga del navegador no se puede cambiar —es su interfaz—, pero
   el hueco entre que pulsas un enlace y llega la página siguiente sí es nuestro.
   Una línea cobalto con el papel de Fold al frente, arriba del todo.
   pointer-events: none SIEMPRE: pase lo que pase, esto no puede comerse un clic.
   --------------------------------------------------------------------------- */
.carga-burnao {
  --p: 0%;
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300;
  pointer-events: none; opacity: 0; transition: opacity .2s var(--curva);
}
.carga-burnao.va { opacity: 1; }
.carga-burnao.llega { transition: opacity .34s var(--curva) .12s; opacity: 0; }

.carga-linea {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--p);
  background: linear-gradient(90deg, rgba(51,88,255,.35), var(--cobalto));
  transition: width .24s var(--curva);
}
/* El papel, al frente de la línea: el mismo pixel art del logo, en pequeño. La sombra
   cobalto lo separa del fondo oscuro sin necesidad de un borde. */
.carga-hoja {
  position: absolute; top: -3px; left: var(--p); width: 10px; height: 13px;
  margin-left: -5px; border-radius: 1px;
  background: var(--papel);
  transition: left .24s var(--curva);
}
/* La esquina doblada, en cobalto: es lo que lo hace reconocible a este tamaño. */
.carga-hoja::after {
  content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 4px;
  background: var(--cobalto);
}
.carga-burnao.va .carga-hoja { animation: carga-late .9s ease-in-out infinite; }
@keyframes carga-late {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-1.5px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .carga-burnao { display: none; }
}


/* LAS ETAPAS DEL RECORRIDO (20/09/2026). En reposo están apagadas y casi no se ven: lo
   que hay que mirar es a Fold. Cuando el documento entra en el sistema se van
   encendiendo, y las ya pasadas se quedan marcadas con su punto cobalto — así se lee
   de un vistazo por dónde va, que es justo lo que enseña una automatización. */
.fold-etapas {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  font-size: 0.83rem; color: var(--papel-3);
  opacity: 0; transition: opacity .4s var(--curva);
}
.fold-3d[data-en-sistema="si"] ~ .fold-etapas { opacity: 1; }
.fold-etapas li { position: relative; padding-left: 15px; transition: color .3s var(--curva); }
.fold-etapas li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 7px; height: 7px;
  border-radius: 50%; border: 1px solid var(--linea-2);
  transition: background .3s var(--curva), border-color .3s var(--curva), transform .3s var(--curva);
}
.fold-etapas li.hecha { color: var(--papel-2); }
.fold-etapas li.hecha::before { background: var(--cobalto); border-color: var(--cobalto); }
.fold-etapas li.activa { color: var(--papel); }
/* Cuando el documento NO cuadra, la última etapa se pone en ámbar: es una decisión
   correcta del sistema, no un error, y el color lo tiene que decir. Rojo diría que algo
   ha fallado, y no ha fallado nada. */
.fold-etapas li.apartada.activa, .fold-etapas li.apartada.hecha { color: var(--ambar-texto); }
.fold-etapas li.apartada.activa::before, .fold-etapas li.apartada.hecha::before {
  background: var(--ambar-texto); border-color: var(--ambar-texto);
  box-shadow: 0 0 0 4px rgba(224, 163, 58, .18);
}
.fold-etapas li.activa::before {
  background: var(--cobalto); border-color: var(--cobalto); transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(51, 88, 255, .18);
}

@media (max-width: 720px) {
  .fold-etapas { gap: 14px; font-size: 0.69rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-etapas, .fold-etapas li, .fold-etapas li::before { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}