/* ProEXP · M1 «Producto vivo» · v2 ------------------------------------------
   Índice
   1. Fundamentos          6. Tarjetas 3D
   2. Luz                  7. Evento e inundación
   3. Botones y cabecera   8. Línea horaria, contacto y pie
   4. Héroe                9. Escena fija de escritorio
   5. Consola y funnel    10. Movimiento, respaldos y movimiento reducido
                          11. El recorrido (secciones 5–9)
   ------------------------------------------------------------------------ */

/* 1 · Fundamentos ---------------------------------------------------------- */

/* Tipografías alojadas en /fonts/ (WOFF2 variables, OFL 1.1, de @fontsource-variable 5.3.0).
   Solo los subconjuntos latin y latin-ext; el navegador descarga cada uno
   únicamente si la página usa caracteres de su unicode-range. */

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/funnel-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/funnel-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/funnel-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/funnel-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --marino: #1B2538;
  --marino-2: #273551;
  --marino-3: #22304A;
  --marino-hondo: #111827;
  --turquesa: #1B9C9C;
  --turquesa-osc: #137A7A;
  --cian: #19ECDD;
  --cian-2: #12C9BD;
  --coral: #F35F78;
  --blanco: #FFFFFF;
  --texto-2: #BCC8DC;
  --texto-3: #98A8C2;
  --papel: #F3F7FA;
  --tinta: #1B2538;
  --tinta-2: #4A5874;

  --f-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --f-texto: "Funnel Sans", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rotulación en escalones: narrativo (funnel, servicios, contacto), secundario
     (el resto de secciones) y la cita, que nunca supera a un título narrativo */
  --t-narrativo: clamp(2.5rem, 0.5rem + 5.4vw, 5.75rem);
  --t-secundario: clamp(1.9rem, 1rem + 2.1vw, 3rem);
  --t-cita: clamp(1.75rem, 0.9rem + 2.5vw, 3.5rem);

  --margen: clamp(16px, 4vw, 48px);
  --cab: 96px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sello: cubic-bezier(0.2, 1, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--marino);
  color: var(--blanco);
  color-scheme: dark;
  scrollbar-color: #3B4C70 var(--marino-hondo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--cian);
}

::selection { background: var(--cian); color: var(--marino); }

main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* La cabecera fija nunca tapa el destino de un ancla */
[id] { scroll-margin-top: 104px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use { pointer-events: none; }
svg:not(.conexiones) { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
  border-radius: 10px;
}

.contenedor { width: min(1240px, 100% - 2 * var(--margen)); margin-inline: auto; }

.saltar {
  position: fixed; left: 16px; top: -80px; z-index: 50;
  padding: 12px 18px; border-radius: 999px;
  background: var(--cian); color: var(--marino); font-weight: 600; text-decoration: none;
}
.saltar:focus-visible { top: 16px; }

/* 2 · Luz: halos volumétricos (núcleo claro, cuerpo turquesa, caída larga) - */

.atmosfera {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(90% 70% at 18% -8%, #24375C 0%, transparent 62%),
    linear-gradient(180deg, #1A2437 0%, var(--marino-hondo) 100%);
}
.luz { position: absolute; inset: -12%; }
.halo { position: absolute; border-radius: 50%; will-change: transform; }
/* Halo principal: detrás de la consola, con núcleo casi blanco que da luz de borde */
.halo--a {
  width: 92vmax; height: 92vmax; left: calc(84vw - 46vmax); top: calc(24vh - 46vmax);
  background: radial-gradient(closest-side,
    rgba(232, 255, 253, 0.78) 0%,
    rgba(120, 250, 240, 0.50) 5%,
    rgba(25, 236, 221, 0.30) 14%,
    rgba(27, 156, 156, 0.20) 30%,
    rgba(27, 120, 140, 0.08) 52%,
    transparent 72%);
  animation: deriva-a 26s ease-in-out infinite alternate;
}
.halo--c {
  width: 96vmax; height: 96vmax; left: 6vw; bottom: -70vmax;
  background: radial-gradient(closest-side, rgba(27, 156, 156, 0.34), rgba(20, 90, 120, 0.1) 55%, transparent);
  animation: deriva-c 40s ease-in-out infinite alternate;
}
/* Haz: el rayo que cruza la escena desde el halo principal */
.haz {
  position: absolute; width: 130vmax; height: 26vmax; right: -30vmax; top: 6vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(170, 255, 247, 0.16), rgba(25, 236, 221, 0.05) 55%, transparent);
  transform: rotate(-24deg);
  animation: haz 18s ease-in-out infinite alternate;
}

@keyframes deriva-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4vw, 6vh, 0) scale(1.06); }
  100% { transform: translate3d(2vw, 12vh, 0) scale(0.95); }
}
@keyframes deriva-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-20vw, -12vh, 0) scale(1.1); }
}
@keyframes haz {
  0%   { transform: rotate(-24deg) translate3d(0, 0, 0); opacity: 0.7; }
  100% { transform: rotate(-19deg) translate3d(-6vw, 6vh, 0); opacity: 1; }
}

/* 3 · Botones y cabecera ---------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0;
  font-family: var(--f-texto); font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 0.2s ease, box-shadow 0.25s ease;
}
.boton--cian {
  background: var(--cian); color: var(--marino);
  /* Elevación neutra: la única luz cae desde arriba; la sombra baja, sin color */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 2px rgba(3, 7, 16, 0.4), 0 12px 22px -12px rgba(3, 7, 16, 0.85);
}
.boton--marino { background: var(--marino); color: var(--blanco); min-height: 44px; padding: 0 20px; font-size: 15px; }
/* Pulsar responde al instante, también en táctil; pasar por encima solo con ratón */
.boton:active { transform: scale(0.97); transition-duration: 120ms; }

.enlace {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px;
  color: var(--blanco); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: rgba(25, 236, 221, 0.6);
  transition: text-decoration-color 0.2s ease;
}
.enlace svg { width: 18px; height: 18px; color: var(--cian); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .boton--cian:hover { background: #6FF4EA; transform: translateY(-2px); }
  .boton--marino:hover { background: var(--marino-2); }
  .boton:hover:active { transform: scale(0.97); }
  .enlace:hover { text-decoration-color: var(--cian); }
  .enlace:hover svg { transform: translateX(4px); }
}

.etiqueta {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px solid rgba(25, 236, 221, 0.5); color: var(--cian);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em;
}

.cabecera {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: center; padding-inline: var(--margen);
  pointer-events: none;
}
.pildora {
  position: relative;
  width: min(1180px, 100%);
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 8px 8px 22px;
  background: rgba(255, 255, 255, 0.97); color: var(--tinta);
  border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(4, 8, 18, 0.65), 0 2px 6px rgba(4, 8, 18, 0.18);
  pointer-events: auto;
  transition: transform 320ms var(--ease-out), opacity 200ms ease;
}
/* Se retira al bajar y vuelve al subir (la clase la pone app.js): sale más
   deprisa de lo que vuelve */
.cabecera.oculta .pildora { transform: translateY(calc(-100% - 24px)); opacity: 0; transition: transform 200ms var(--ease-out), opacity 150ms ease; }
.pildora :focus-visible { outline-color: var(--marino); }
.pildora__marca { display: flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 8px; }
.pildora__marca img { height: 34px; width: auto; }
.pildora__nav ul { display: flex; gap: 2px; }
.pildora__nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--tinta);
  transition: background-color 0.2s ease, transform 120ms var(--ease-out);
}
.pildora__nav a:hover { background: #E9F0F5; }
.pildora__menu {
  display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #EDF2F6; color: var(--tinta); align-items: center; justify-content: center;
  transition: transform 120ms var(--ease-out);
}
.pildora__nav a:active, .pildora__menu:active { transform: scale(0.97); }
.pildora__menu svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
  .pildora__menu { display: inline-flex; }
  .pildora__nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--blanco); border-radius: 24px; padding: 8px;
    box-shadow: 0 24px 50px -20px rgba(4, 8, 18, 0.7);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .pildora__nav.abierto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .pildora__nav ul { flex-direction: column; }
  .pildora__nav a { min-height: 48px; font-size: 16px; }
  .no-js .pildora__nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
}
/* «Preguntas frecuentes» no cabe en línea entre 1101 y 1199 px: ahí se queda
   fuera de la píldora (la sección sigue en la página); en el menú desplegable
   y desde 1200 px está siempre */
@media (min-width: 1101px) and (max-width: 1199px) {
  .pildora__nav-amplio { display: none; }
}
@media (max-width: 420px) {
  .pildora { padding-left: 14px; gap: 6px; }
  .pildora__marca img { height: 28px; }
  .pildora .boton--marino { padding: 0 14px; font-size: 14px; }
}

/* 4 · Héroe (base: documento normal; la escena fija está en §9) ------------- */

.escena { position: relative; }
.escenario { position: relative; }

.heroe { position: relative; z-index: 2; padding: 116px 0 40px; }
.heroe__texto { position: relative; z-index: 3; width: calc(100% - 2 * var(--margen)); max-width: 1824px; margin-inline: auto; }

h1 {
  font-family: var(--f-display);
  font-weight: 640;
  font-size: clamp(2.7rem, 0.6rem + 9.4vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.linea-t { display: inline; }

.heroe__bajo { margin-top: 26px; max-width: 34rem; }
.heroe__entradilla {
  font-size: clamp(17px, 0.95rem + 0.3vw, 19.5px); line-height: 1.5; color: var(--texto-2);
  text-wrap: pretty;
}
.heroe__acciones { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.heroe__firma {
  display: grid; gap: 6px; margin-top: 30px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13.5px; line-height: 1.4; color: var(--texto-3);
}
.heroe__casa { color: var(--texto-2); font-weight: 500; }
.heroe__apoyo > span { white-space: nowrap; }

.flota { display: none; }
.hueco { position: absolute; display: block; aspect-ratio: 300 / 60; }

/* 5 · Consola (objeto) --------------------------------------------------- */

.objeto { position: relative; z-index: 2; width: min(660px, 100% - 2 * var(--margen)); margin: 44px auto 0; }
.objeto__cuerpo { position: relative; transform-style: preserve-3d; transform-origin: 50% 50%; }
.objeto__losa { display: none; }
.objeto__reflejo { display: none; }
.objeto__reverso { display: none; }

.consola {
  position: relative;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 110px),
    var(--marino-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 4px rgba(3, 7, 16, 0.3),
    0 24px 40px -18px rgba(3, 7, 16, 0.7),
    0 60px 100px -40px rgba(3, 7, 16, 0.85);
}
/* Borde de luz: más intenso arriba a la derecha, donde está el halo */
.consola::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(225deg, rgba(160, 255, 248, 0.85), rgba(25, 236, 221, 0.25) 22%, transparent 45%, transparent 78%, rgba(27, 156, 156, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}

.consola__barra {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 10px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.consola__vivo { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cian); flex: none; }
.consola__vivo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cian);
  animation: latido 2.2s var(--ease-out) infinite;
}
@keyframes latido { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
.consola__titulo { font-family: var(--f-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.consola__pausa {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: transparent;
  font-family: var(--f-texto); font-size: 13px; color: var(--texto-2);
  transition: background-color 0.2s ease, color 0.2s ease, transform 120ms var(--ease-out);
}
.consola__pausa:hover { background: rgba(255, 255, 255, 0.06); color: var(--blanco); }
.consola__pausa:active { transform: scale(0.97); }
.consola__pausa svg { width: 14px; height: 14px; }
.consola__pausa[hidden] { display: none; }

.consola__sectores {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.no-js .consola__sectores { display: none; }
.ficha {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: transparent;
  font-size: 14px; font-weight: 500; color: var(--blanco);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.ficha::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.3s var(--ease-out);
}
.ficha:hover { background: rgba(255, 255, 255, 0.05); }
.ficha:active { transform: scale(0.97); }
.ficha[aria-pressed="true"] { background: rgba(25, 236, 221, 0.1); border-color: rgba(25, 236, 221, 0.7); }
.ficha[aria-pressed="true"]::before { background: var(--cian); border-color: var(--cian); transform: scale(1.15); }

.consola__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.consola__chat { display: flex; flex-direction: column; padding: 14px 16px 16px; min-width: 0; }
.consola__origen {
  display: flex; align-items: center; gap: 9px; align-self: center; flex: none;
  min-height: 28px; padding: 0 12px; margin-bottom: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); font-size: 12px; color: var(--texto-2);
}
.consola__origen-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }

.mensajes { display: flex; flex-direction: column; gap: 7px; }
.msg {
  position: relative;
  max-width: 86%; padding: 9px 13px; border-radius: 17px;
  font-size: 14.5px; line-height: 1.38; text-wrap: pretty;
}
/* Anillo del mensaje que provoca un paso: solo cambia su opacidad */
.msg::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(25, 236, 221, 0.75);
  opacity: 0; transition: opacity 0.5s ease;
}
.msg--contacto { align-self: flex-start; background: #33435F; border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.msg--agente {
  align-self: flex-end; background: #0F4E58; border: 1px solid rgba(25, 236, 221, 0.3);
  border-bottom-right-radius: 5px; transform-origin: 100% 100%;
}
/* El mensaje que provoca un paso se ilumina a la vez que el paso */
.msg.provoca::after { opacity: 1; }
.msg.entra { animation: entra-msg 340ms var(--ease-out) both; }
@keyframes entra-msg {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.msg.escribiendo { display: inline-flex; gap: 5px; padding: 13px 15px; }
.msg.escribiendo i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cian); opacity: 0.85;
  animation: punto 1s ease-in-out infinite;
}
.msg.escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.msg.escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
.consola.en-pausa .msg.escribiendo i, .consola.en-pausa .consola__vivo::after { animation-play-state: paused; }

.consola__estado {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.consola__subtitulo { font-family: var(--f-texto); font-size: 12.5px; font-weight: 500; color: var(--texto-3); }
.pasos { display: flex; flex-direction: column; gap: 4px; }
.paso { display: flex; align-items: flex-start; gap: 11px; min-height: 38px; font-size: 14px; line-height: 1.3; }
.paso__marca {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: -2px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.paso__marca::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--cian);
  transform: scale(0.2); opacity: 0; transition: transform 0.45s var(--ease-sello), opacity 0.2s ease;
}
.paso__marca svg {
  position: absolute; inset: 3px; width: 13px; height: 13px; color: var(--marino); stroke-width: 2.6;
  opacity: 0; transform: scale(0.5); transition: transform 0.4s var(--ease-sello) 0.08s, opacity 0.2s ease 0.08s;
}
.paso__texto { opacity: 0.62; transition: opacity 0.3s ease; }
.paso.hecho .paso__marca::before { transform: scale(1); opacity: 1; }
.paso.hecho .paso__marca svg { opacity: 1; transform: scale(1); }
.paso.hecho .paso__texto { opacity: 1; }

.sello {
  position: relative; margin-top: auto;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 15px;
  background: var(--cian); color: var(--marino);
  transform: rotate(-2.5deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(3, 7, 16, 0.35), 0 12px 22px -12px rgba(3, 7, 16, 0.8);
  opacity: 0;
}
.sello.puesto { opacity: 1; }
/* El sello cae desde muy cerca y sin rebote: un golpe seco, no un muelle */
.js.movimiento .sello.puesto { animation: estampar 420ms var(--ease-out) both; }
@keyframes estampar {
  0%   { opacity: 0; transform: scale(1.12) rotate(-5deg); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(-2.5deg); }
}
.sello__onda { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--cian); opacity: 0; }
.js.movimiento .sello.puesto .sello__onda { animation: onda 640ms var(--ease-out) 160ms both; }
@keyframes onda { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32, 1.6); } }
.sello__icono {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--marino); color: var(--cian);
}
.sello__icono svg { width: 18px; height: 18px; stroke-width: 2.4; }
.sello__texto { display: flex; flex-direction: column; gap: 2px; }
.sello__rotulo { font-size: 12px; font-weight: 500; }
.sello__evento { font-family: var(--f-display); font-size: 15.5px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

/* Funnel (base: documento normal) */

.funnel { position: relative; z-index: 1; padding: 96px 0 72px; }
.funnel__marco { width: min(1240px, 100% - 2 * var(--margen)); margin-inline: auto; }
.funnel__titulo {
  font-family: var(--f-display); font-weight: 640;
  font-size: var(--t-narrativo); line-height: 0.95; letter-spacing: -0.04em;
  text-wrap: balance; max-width: 18ch;
}

.diagrama { position: relative; margin-top: clamp(28px, 4.5vh, 48px); }
.conexiones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }

.col__titulo { font-family: var(--f-display); font-size: 17px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 12px; }

.nodos { display: flex; flex-direction: column; gap: 8px; }

.agente {
  position: relative; padding: 20px; border-radius: 22px;
  background: linear-gradient(180deg, #2D3D60, #22304B);
  border: 1px solid rgba(25, 236, 221, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 4px rgba(2, 6, 14, 0.3),
    0 30px 60px -26px rgba(2, 6, 14, 0.9);
}
.agente__cabeza { display: flex; align-items: center; gap: 12px; }
.agente__icono {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--cian); color: var(--marino);
}
.agente__icono svg { width: 22px; height: 22px; stroke-width: 2; }
.agente__titulo { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.agente__verbos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.agente__verbos li {
  padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px; font-weight: 500; color: var(--blanco);
}
.agente__mini {
  display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px;
  border-radius: 14px; background: rgba(8, 14, 26, 0.32);
}
.agente__hora { font-size: 12px; color: var(--texto-2); margin-bottom: 2px; }
.mini { max-width: 88%; padding: 7px 11px; border-radius: 13px; font-size: 13.5px; line-height: 1.35; }
.mini--contacto { align-self: flex-start; background: #33435F; border-bottom-left-radius: 4px; }
.mini--agente { align-self: flex-end; background: #0F4E58; border: 1px solid rgba(25, 236, 221, 0.3); border-bottom-right-radius: 4px; }

.persona {
  display: flex; align-items: center; gap: 10px; width: fit-content; margin: 40px auto 0;
  min-height: 50px; padding: 7px 18px 7px 7px; border-radius: 14px;
  background: var(--papel); color: var(--tinta); font-size: 15px; font-weight: 600;
  box-shadow: 0 1px 0 #fff inset, 0 2px 3px rgba(4, 8, 18, 0.25), 0 14px 24px -14px rgba(4, 8, 18, 0.6);
}
.persona__icono {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: #E3E9F1; color: var(--tinta);
}
.persona__icono svg { width: 20px; height: 20px; }

.carril { margin-bottom: 12px; }
.carril__titulo { margin-bottom: 8px; }
.carril__pista { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.carril__barra { flex: 1; height: 4px; border-radius: 2px; min-width: 40px; background: linear-gradient(90deg, var(--turquesa), var(--cian)); }
.carril__fuera { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--blanco); }
.carril__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); outline: 1.5px solid rgba(243, 95, 120, 0.55); outline-offset: 2.5px; }
.carril__nota { margin-top: 4px; font-size: 12px; color: var(--texto-2); text-align: right; }

.crm {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content;
  margin: 26px auto 0; padding: 6px 14px; border-radius: 999px;
  background: var(--marino); border: 1px solid rgba(25, 236, 221, 0.35);
  font-size: 13px; color: var(--blanco);
}
.crm svg { width: 16px; height: 16px; color: var(--cian); transform: rotate(180deg); }
.diagrama .crm { grid-column: 1 / -1; }

.funnel__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 28px;
}
.funnel__pie p { font-size: 15px; color: var(--texto-2); }

.con { fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.con--evento { stroke: var(--cian); stroke-opacity: 0.8; }
.con--crm { stroke: var(--cian); stroke-opacity: 0.6; stroke-width: 1.4; }
.con--persona { stroke: rgba(255, 255, 255, 0.55); }
.borne { fill: var(--marino); stroke: var(--turquesa); stroke-width: 1.5; }
.borne--cian { stroke: var(--cian); }
.punta { fill: var(--cian); }
.pulso circle:first-child { fill: var(--cian); opacity: 0.22; }
.pulso circle:last-child { fill: var(--cian); }

/* 6 · Tarjetas 3D: cara, canto en dos capas, sombra proyectada y brillo ------- */

.nodo { position: relative; }
.nodo__marca {
  position: absolute; inset: 0; border-radius: 14px;
  border: 1.5px dashed rgba(25, 236, 221, 0.5);
  opacity: 0;
}
.vuelo { position: relative; }
.tarjeta { position: relative; transform-origin: 50% 50%; transform-style: preserve-3d; }
.tarjeta__cara {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 14px 8px 8px; overflow: hidden;
  border-radius: 14px; color: var(--tinta);
  background: linear-gradient(170deg, #FFFFFF 0%, #F1F5F9 55%, #E6EDF3 100%);
  box-shadow:
    0 1px 0 #FFFFFF inset,
    0 -1px 0 rgba(27, 37, 56, 0.1) inset,
    0 1px 2px rgba(4, 8, 18, 0.28),
    0 8px 14px -8px rgba(4, 8, 18, 0.45);
}
/* Canto: dos losas detrás de la cara; solo se ven cuando la tarjeta gira */
.tarjeta__canto {
  position: absolute; inset: 0; border-radius: 14px;
  background: #C3CFDB;
  transform: translateZ(-5px);
  transform-style: preserve-3d;
}
.tarjeta__canto::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #8E9DB0;
  transform: translateZ(-6px);
}
/* Sombra proyectada en el «suelo» (la crea app.js): luz arriba a la izquierda,
   así que cae abajo a la derecha y se aleja y se abre cuando la tarjeta sube */
.tarjeta__sombra {
  position: absolute; left: 4%; right: -2%; top: 24%; bottom: -40%;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(2, 6, 14, 0.6), rgba(2, 6, 14, 0.26) 55%, transparent);
  opacity: 0; pointer-events: none;
}
/* Reverso de las tarjetas que se voltean en vuelo */
.tarjeta__cara { backface-visibility: hidden; }
.tarjeta__reverso { position: absolute; inset: 0; transform: translateZ(-16px) rotateY(180deg); }
.tarjeta__reverso .cara--fin { opacity: 1; }
.tarjeta__brillo {
  position: absolute; top: -60%; bottom: -60%; left: -30%; width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent);
  opacity: 0; pointer-events: none; mix-blend-mode: soft-light;
}
/* Copia desenfocada para las tarjetas lejanas (app.js la crea; el desenfoque no se anima) */
.tarjeta__bruma {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  filter: blur(1.5px);
  transform: translateZ(0.5px);
}
.tarjeta__bruma .tarjeta__cara { height: 100%; box-shadow: none; }

.tarjeta__icono {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: #D6F0F0; color: var(--turquesa-osc);
}
.tarjeta__icono svg { width: 21px; height: 21px; }
.tarjeta__caras { display: grid; min-width: 0; }
.cara { grid-area: 1 / 1; align-self: center; }
.cara--fin { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.cara--heroe { display: flex; flex-direction: column; gap: 2px; opacity: 0; font-size: 17px; font-weight: 600; line-height: 1.15; }
.cara--heroe .mono { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }

/* 7 · Evento: el encendido es un barrido por transform, nunca un fundido -------
   Cada punto del rótulo es o apagado (blanco sobre marino) o encendido
   (marino sobre cian): contraste AA en cualquier fotograma. */

.evento { position: relative; margin-top: 18px; border-radius: 18px; }
.evento__halo {
  position: absolute; inset: -60px -40px; pointer-events: none; transform-origin: 50% 50%;
  background: radial-gradient(closest-side, rgba(25, 236, 221, 0.3), transparent);
}
.evento__capa {
  display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 12px 18px 12px 14px;
  border-radius: 18px;
}
.evento__capa p { font-family: var(--f-display); font-size: 17.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
/* «lo que se cobra» va en su propia línea, sin el punto que la abría */
.evento__cobra { display: block; margin-top: 3px; font-family: var(--f-texto); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.evento__capa--apagado .evento__cobra { color: var(--texto-2); }
.evento__capa--luz .evento__cobra { color: #0E4C55; }
.evento__capa--apagado {
  position: relative;
  border: 1.5px dashed rgba(25, 236, 221, 0.6); background: #172234; color: var(--blanco);
}
.evento__luz { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; }
.evento__capa--luz {
  height: 100%;
  background: var(--cian); color: var(--marino); border: 1.5px solid var(--cian);
}
.evento__icono {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.evento__capa--apagado .evento__icono { color: var(--cian); }
.evento__capa--luz .evento__icono { background: var(--marino); color: var(--cian); border-color: var(--marino); }
.evento__icono svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* Inundación (base: banda a sangre, estática) */
.inundacion {
  position: relative; z-index: 4; overflow: hidden;
  display: grid; place-items: center;
  min-height: 78vh; padding: 96px var(--margen);
  background: radial-gradient(120% 90% at 50% 0%, #3FF0E3 0%, var(--cian) 38%, var(--cian-2) 100%);
  color: var(--marino);
}
.inundacion__disco {
  position: absolute; left: 0; top: 0; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #5AF3E8 0%, var(--cian) 55%, var(--cian-2) 100%);
  display: none;
}
.inundacion__texto { position: relative; width: min(1344px, 100%); }
.inundacion__dentro { display: none; }
/* Eco de la pastilla encendida en su sitio exacto: el disco la atraviesa sin borrarla */
.inundacion__eco { position: absolute; margin: 0; }
.inundacion__icono {
  display: grid; place-items: center; width: clamp(56px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: var(--marino); color: var(--cian); margin-bottom: clamp(18px, 3vh, 32px);
}
.inundacion__icono svg { width: 52%; height: 52%; stroke-width: 2.4; }
.js.movimiento .inundacion__icono { transform: scale(0); }
.inundacion__texto p {
  font-family: var(--f-display); font-weight: 660;
  font-size: clamp(2.6rem, 0.4rem + 10vw, 10rem);
  line-height: 0.9; letter-spacing: -0.04em;
}
/* Cada línea entra por máscara (transform), nunca por fundido: siempre legible */
.linea-i { display: block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.linea-i > span { display: block; }
.linea-i--cobra { color: #0E4C55; }

/* 8 · Línea horaria, contacto y pie --------------------------------------- */

.horario { position: relative; padding: clamp(96px, 14vh, 170px) 0 clamp(64px, 10vh, 120px); view-timeline: --horario block; }
.horario h2 {
  font-family: var(--f-display); font-weight: 620;
  font-size: var(--t-secundario); line-height: 1; letter-spacing: -0.03em;
  max-width: 20ch; text-wrap: balance;
}
.linea { position: relative; margin-top: clamp(48px, 8vh, 88px); }
.linea__paradas { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 32px; }
.parada { position: relative; }
.parada__hora {
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(3rem, 1.4rem + 4.2vw, 6rem); line-height: 1; letter-spacing: -0.04em;
}
.parada__hora time { display: inline-block; }
/* Reloj: una tira de horas completas; nunca se ve una cifra suelta */
.reloj { display: inline-block; height: 1em; overflow: clip; vertical-align: top; }
.reloj__tira { display: flex; flex-direction: column; }
.reloj__tira > span { display: block; height: 1em; line-height: 1; white-space: nowrap; }

.parada__marca { position: relative; display: block; height: 14px; margin: 26px 0 22px; }
.parada__marca::before {
  content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanco);
}
.parada__marca::after {
  content: ""; position: absolute; left: 24px; top: 6px; height: 2px;
  width: calc(100% - 24px + 32px - 10px); transform-origin: 0 50%;
}
.parada--aviso .parada__marca::before { background: var(--coral); outline: 1.5px solid rgba(243, 95, 120, 0.5); outline-offset: 4px; }
.parada--aviso .parada__marca::after { background: linear-gradient(90deg, var(--turquesa), var(--cian)); }
.parada--agente .parada__marca::before { background: var(--cian); outline: 1.5px solid rgba(25, 236, 221, 0.5); outline-offset: 4px; }
.parada--agente .parada__marca::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 6px, transparent 6px 13px); }
.parada--dia .parada__marca::after { display: none; }
.parada__hecho { max-width: 26ch; font-size: clamp(17px, 1rem + 0.3vw, 20px); line-height: 1.45; color: var(--texto-2); text-wrap: pretty; }
.parada--dia .parada__hecho { color: var(--blanco); }

@media (max-width: 760px) {
  .linea__paradas { grid-template-columns: 1fr; gap: 0; }
  .parada { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding-bottom: 40px; }
  .parada__hora { grid-column: 2; font-size: clamp(3rem, 14vw, 4rem); }
  .parada__marca { grid-column: 1; grid-row: 1 / span 2; height: auto; margin: 0; }
  .parada__marca::before { top: calc(0.5 * clamp(3rem, 14vw, 4rem) - 7px); left: 8px; }
  .parada__marca::after {
    left: 14px; top: calc(0.5 * clamp(3rem, 14vw, 4rem) + 14px); width: 2px;
    height: calc(100% - 0.5 * clamp(3rem, 14vw, 4rem) + 26px); transform-origin: 50% 0;
  }
  .parada--agente .parada__marca::after { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 6px, transparent 6px 13px); }
  .parada--aviso .parada__marca::after { background: linear-gradient(180deg, var(--turquesa), var(--cian)); }
  .parada__hecho { grid-column: 2; margin-top: 12px; }
}

.contacto { padding: clamp(24px, 4vh, 56px) 0 clamp(80px, 12vh, 140px); }
.contacto__caja {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px 48px;
  padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contacto h2 {
  grid-column: 1 / -1;
  font-family: var(--f-display); font-weight: 640;
  font-size: var(--t-narrativo); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance;
}
.contacto__caja > p { max-width: 56ch; color: var(--texto-2); font-size: 18px; }
@media (max-width: 640px) { .contacto__caja { grid-template-columns: 1fr; } .contacto__caja .boton { justify-self: start; } }

.pie { padding: 28px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(8, 12, 22, 0.35); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; font-size: 13.5px; color: var(--texto-2); }
.pie__enlaces { display: flex; gap: 4px; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-underline-offset: 4px; }
.pie__enlaces a:hover { color: var(--blanco); }

/* Documento normal, móvil y tableta ------------------------------------------ */

@media (max-width: 959px), (max-height: 639px) {
  .col + .col { margin-top: 48px; }
  .col + .col::before {
    content: ""; position: absolute; left: 50%; top: -42px; width: 2px; height: 36px;
    background: linear-gradient(180deg, transparent, var(--turquesa));
    transform-origin: 50% 0;
  }
  .col { position: relative; }
  .persona { margin-top: 30px; }
  .crm { margin-top: 30px; }
  .funnel__pie { margin-top: 36px; }
}
@media (max-width: 599px) {
  .consola__cuerpo { grid-template-columns: 1fr; }
  .consola__estado { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .sello { margin-top: 6px; align-self: flex-start; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .heroe { padding-top: 108px; }
  .heroe__apoyo { flex-direction: column; align-items: flex-start; }
  .heroe__apoyo .sep { display: none; }
  .consola__barra { gap: 8px; padding-left: 14px; }
  .consola__titulo { font-size: 15px; }
  .consola__pausa { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .consola__pausa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consola__sectores { display: grid; grid-template-columns: 1fr 1fr; }
  .ficha { min-height: 44px; }
  .no-js .consola__sectores { display: none; }
  .evento__halo { inset: -40px 0; }
  .heroe__acciones .boton { width: 100%; }
  .msg { font-size: 14.5px; max-width: 88%; }
  .funnel__pie .boton { width: 100%; }
  .inundacion { min-height: 70vh; }
}

/* 9 · Escritorio ---------------------------------------------------------- */

/* Funnel en tres columnas desde 960 px */
@media (min-width: 960px) {
  .funnel__titulo { max-width: none; }
  .diagrama {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(56px, 6.4vw, 108px); align-items: center;
    padding: 0 44px 58px 0;
  }
  .js .conexiones { display: block; }
  .js .crm { position: absolute; margin: 0; transform: translate(-50%, -50%); }
}

/* Héroe de autor desde 1200 px: titular a todo el ancho, consola como objeto */
@media (min-width: 1200px) {
  :root {
    /* El titular llena el ancho: la línea larga mide 12,33 em en Funnel Display */
    --h1: min(calc((100vw - 2 * var(--margen)) / 12.5), 12.6vh);
    --top-objeto: calc(var(--cab) + 10px + var(--h1) * 2.02);
    --ancho-consola: clamp(480px, 41vw, 780px);
    --hueco-der: calc(var(--margen) + 17vw);
  }
  .heroe { min-height: 100vh; padding: calc(var(--cab) + 10px) 0 48px; }
  h1 { font-size: var(--h1); }
  .linea-t { display: block; white-space: nowrap; }
  .linea-t__in { display: inline-block; }
  .heroe__bajo { max-width: clamp(412px, 31vw, 33rem); margin-top: calc(var(--h1) * 0.42); }
  /* La caja del texto ocupa todo el ancho y queda por encima de la consola:
     solo atrapan el puntero las letras y el bloque de abajo, no el hueco, para
     que «Pausar» y los sectores de la consola se puedan pulsar */
  .heroe__texto { pointer-events: none; }
  .linea-t__in, .heroe__bajo { pointer-events: auto; }
  .heroe__acciones { gap: 10px 18px; }

  .objeto {
    position: absolute; z-index: 2; margin: 0;
    top: var(--top-objeto); right: var(--hueco-der);
    width: var(--ancho-consola);
    perspective: 1700px;
  }
  .objeto__cuerpo { transform: rotateX(6deg) rotateY(15deg); }
  .objeto__losa {
    display: block; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  }
  .objeto__losa--1 { background: #18233A; transform: translateZ(-9px); box-shadow: 0 0 0 1px rgba(25, 236, 221, 0.18); }
  .objeto__losa--2 { background: #0F1828; transform: translateZ(-18px); box-shadow: 0 0 0 1px rgba(25, 236, 221, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
  .objeto__reflejo {
    display: block; position: absolute; inset: 0; border-radius: 22px; overflow: hidden; pointer-events: none;
    transform: translateZ(1px);
  }
  /* El reflejo es un elemento real: app.js lo desplaza por transform */
  .objeto__reflejo-luz {
    position: absolute; top: 0; bottom: 0; left: -80%; width: 260%;
    background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.10) 48%, rgba(255, 255, 255, 0.04) 51%, transparent 56%);
  }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  :root { --hueco-der: calc(var(--margen) + 15vw); }
}
/* Pantallas bajas: el titular se limita por la altura y el apoyo se compacta */
@media (min-width: 1200px) and (max-height: 820px) {
  :root { --h1: min(calc((100vw - 2 * var(--margen)) / 12.5), 11vh); }
  .heroe__entradilla { font-size: 17px; }
  .heroe__acciones { margin-top: 20px; }
  .heroe__firma { margin-top: 18px; padding-top: 10px; gap: 2px; font-size: 13px; }
}

/* Escena fija: solo con JS, con movimiento y con sitio para ella */
@media (min-width: 1200px) and (min-height: 640px) {
  /* 440vh: las ventanas de la coreografía están normalizadas al progreso P */
  .js.movimiento .escena { height: 440vh; }
  .js.movimiento .escenario {
    position: sticky; top: 0; height: 100vh; overflow: clip;
  }
  .js.movimiento .heroe { position: absolute; inset: 0; z-index: auto; min-height: 0; padding: calc(var(--cab) + 10px) 0 0; }
  .js.movimiento .flota { display: block; position: absolute; inset: 0; pointer-events: none; }
  .js.movimiento .objeto { perspective: none; }
  .js.movimiento .objeto__cuerpo { transform: none; will-change: transform; }
  .js.movimiento .consola__chat { height: var(--alto-chat, 330px); overflow: hidden; }
  .js.movimiento .mensajes { flex: 1; min-height: 0; overflow: hidden; }
  .js.movimiento .mensajes.desborda { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }

  .js.movimiento .funnel {
    position: absolute; inset: 0; z-index: auto; padding: 0; pointer-events: none;
    display: flex; align-items: center;
  }
  .js.movimiento .en-funnel .funnel { pointer-events: auto; }
  .js.movimiento .en-funnel :is(.heroe, .heroe .linea-t__in, .heroe__bajo) { pointer-events: none; }
  /* El pie sube a la fila del título: el título narrativo gana sus dos líneas
     sin que la escena crezca */
  .js.movimiento .funnel__marco {
    padding: 64px 0 18px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end;
  }
  .js.movimiento .funnel__titulo {
    grid-column: 1; grid-row: 1; max-width: 13em;
    font-size: min(clamp(2.3rem, 0.4rem + 3.9vw, 4.4rem), 7.6vh);
  }
  .js.movimiento .funnel__pie {
    grid-column: 2; grid-row: 1; margin: 0;
    flex-direction: column; align-items: flex-end; gap: 14px; text-align: right;
  }
  .js.movimiento .funnel__pie p { max-width: 31ch; }
  .js.movimiento .diagrama { grid-column: 1 / -1; grid-row: 2; }
  /* Las piezas del funnel entran por separado: la capa no lleva opacidad propia
     para que las tarjetas en vuelo se vean desde el principio */
  .js.movimiento :is(.funnel__titulo, .col--entradas .col__titulo, .nodo:not([data-vuela]), .carril, .persona, .evento, .funnel__pie) { opacity: 0; }
  .js.movimiento .col--agente .agente { opacity: 0; }
  /* La consola se voltea: su reverso es una réplica exacta del nodo del agente */
  .js.movimiento .consola, .js.movimiento .objeto__reflejo { backface-visibility: hidden; }
  .objeto__reverso { position: absolute; display: none; backface-visibility: hidden; pointer-events: none; }
  .js.movimiento .objeto__reverso { display: block; }
  .objeto__reverso .agente { height: 100%; }
  .js.movimiento .crm { opacity: 0; }
  .js.movimiento .nodo { z-index: 3; }
  .js.movimiento .nodo.detras { z-index: 1; }
  .js.movimiento .tarjeta { will-change: transform; }

  .js.movimiento .inundacion {
    position: absolute; inset: 0; z-index: 6; min-height: 0; padding: 0 var(--margen);
    background: none; pointer-events: none;
  }
  /* El disco es una ventana circular que crece (transform); el turquesa y el
     rótulo están fijos dentro, contra-escalados, así que el mensaje pasa de la
     pastilla al gran rótulo sin un solo fotograma ilegible */
  .js.movimiento .inundacion__disco { display: block; overflow: hidden; background: none; transform: scale(0); }
  .js.movimiento .inundacion__dentro {
    display: grid; place-items: center; position: absolute; left: 100px; top: 100px;
    width: 100vw; height: 100vh; padding: 0 var(--margen); transform-origin: 0 0;
    background: radial-gradient(120% 90% at 70% 100%, #4FF2E6 0%, var(--cian) 42%, var(--cian-2) 100%);
    color: var(--marino);
  }
  .js.movimiento .inundacion__texto { opacity: 0; }

  /* Huecos del héroe: el tamaño codifica la profundidad (cerca, media, lejos) */
  /* Entradas: cascada abajo a la izquierda, de cerca a lejos hacia la consola */
  .hueco--campana      { width: clamp(250px, 20vw, 360px); left: var(--margen); bottom: 18vh; }
  .hueco--formulario   { width: clamp(210px, 16.5vw, 300px); left: calc(var(--margen) + 14vw); bottom: 10.5vh; }
  .hueco--base         { width: clamp(200px, 16vw, 290px); left: calc(var(--margen) + 26vw); bottom: 3.2vh; }
  /* Resultados: salen por la derecha de la consola, en el orden de sus huecos,
     y «Baja anulada» por debajo: ninguna trayectoria cruza otra */
  .hueco--contratacion { width: clamp(190px, 15.5vw, 290px); right: calc(var(--margen) + 0.6vw); top: calc(var(--top-objeto) + 8px); }
  .hueco--cita         { width: clamp(200px, 16.8vw, 310px); right: var(--margen); top: calc(var(--top-objeto) + 15vh); }
  .hueco--baja         { width: clamp(190px, 15vw, 280px); right: calc(var(--hueco-der) - 2vw); bottom: 3.2vh; }
}
@media (min-width: 1200px) and (min-height: 640px) and (max-height: 820px) {
  .hueco--campana      { width: clamp(220px, 17vw, 300px); bottom: 12.5vh; }
  .hueco--formulario   { width: clamp(190px, 14.5vw, 260px); left: calc(var(--margen) + 16vw); bottom: 5.5vh; }
  .hueco--base         { width: clamp(180px, 14vw, 250px); left: calc(var(--margen) + 31vw); bottom: 1.6vh; }
  .hueco--baja         { width: clamp(180px, 14vw, 250px); bottom: 2vh; }

  /* El funnel cabe en 100vh desde 640 px de alto. No se aplana: cada hueco
     vertical se aprieta en proporción a la altura que falta (--d vale 0 a
     640 px y 180 px a 820 px), y la composición —título con su pie, tres
     columnas, evento y CRM— se mantiene. */
  .js.movimiento .escena { --d: calc(100vh - 640px); }
  .js.movimiento .funnel__marco { padding: calc(20px + var(--d) * 0.244) 0 calc(8px + var(--d) * 0.056); }
  .js.movimiento .funnel__pie { gap: 8px; }
  .js.movimiento .funnel__pie .boton { min-height: 46px; }
  .js.movimiento .diagrama { margin-top: calc(14px + var(--d) * 0.12); padding-bottom: calc(44px + var(--d) * 0.078); }
  .js.movimiento .col__titulo { margin-bottom: 8px; }
  .js.movimiento .nodos { gap: 6px; }
  .js.movimiento .tarjeta__cara { min-height: calc(46px + var(--d) * 0.044); padding-block: calc(4px + var(--d) * 0.022); }
  .js.movimiento .carril { margin-bottom: 8px; }
  .js.movimiento .carril__titulo { margin-bottom: 4px; }
  .js.movimiento .carril__nota { margin-top: 2px; }
  .js.movimiento .evento { margin-top: calc(10px + var(--d) * 0.044); }
  .js.movimiento .evento__capa { min-height: calc(60px + var(--d) * 0.056); padding-block: calc(8px + var(--d) * 0.022); }
  .js.movimiento .agente { padding: calc(16px + var(--d) * 0.022); }
  .js.movimiento .agente__verbos, .js.movimiento .agente__mini { margin-top: calc(10px + var(--d) * 0.022); }
  .js.movimiento .agente__mini { padding: calc(10px + var(--d) * 0.011); }
  .js.movimiento .persona { margin-top: calc(24px + var(--d) * 0.089); }
}

/* Banda turquesa sin escena fija: el disco la llena desde arriba al entrar */
@media (max-width: 1199px), (max-height: 639px) {
  /* El chat reserva su alto: la demo no empuja la página al escribir */
  .js.movimiento .consola__chat { min-height: 430px; }
  .js.movimiento .inundacion { background: transparent; }
  .js.movimiento .inundacion__disco { display: block; left: 50%; top: 0; transform: scale(0); will-change: transform; }
}

/* 10 · Movimiento ---------------------------------------------------------- */

/* Entrada del héroe: va en elementos que app.js no mueve (el span interior de
   cada línea, los hijos de .heroe__bajo) y por la propiedad translate/scale,
   que se compone con el transform en línea del JS. Sin fill «forwards»: al
   acabar no queda nada que soltar, así que hacer scroll durante la entrada no
   provoca ningún salto. */
.js.movimiento .linea-t__in { animation: entrar 700ms var(--ease-out) backwards; }
.js.movimiento .linea-t + .linea-t .linea-t__in { animation-delay: 60ms; }
.js.movimiento .heroe__bajo > * { animation: entrar 650ms var(--ease-out) 140ms backwards; }
.js.movimiento .heroe__bajo > * + * { animation-delay: 180ms; }
.js.movimiento .objeto { animation: entrar-objeto 900ms var(--ease-out) 140ms backwards; }
@keyframes entrar { from { opacity: 0; translate: 0 0.4em; } }
@keyframes entrar-objeto { from { opacity: 0; translate: 0 48px; scale: 0.97; } }
@keyframes subir { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }

/* Móvil: las tarjetas se reparten desde un mazo; lo mueve app.js */
.js.movimiento .movil-reparto .vuelo { will-change: transform; }

/* Línea horaria con la vista de su sección */
@supports (animation-timeline: view()) {
  .js.movimiento .horario h2 { animation: subir linear both; animation-timeline: --horario; animation-range: entry 10% entry 70%; }
  .js.movimiento .parada__marca::before { animation: brotar linear both; animation-timeline: --horario; }
  .js.movimiento .parada__marca::after { animation: trazar linear both; animation-timeline: --horario; }
  .js.movimiento .parada__hecho { animation: subir-suave linear both; animation-timeline: --horario; }
  .js.movimiento .reloj__tira { animation: rodar linear both; animation-timeline: --horario; }
  .js.movimiento .reloj { animation: asomar linear both; animation-timeline: --horario; }

  .js.movimiento .parada--aviso .reloj__tira,
  .js.movimiento .parada--aviso .reloj,
  .js.movimiento .parada--aviso .parada__marca::before { animation-range: entry 45% cover 40%; }
  .js.movimiento .parada--aviso .parada__hecho { animation-range: entry 70% cover 42%; }
  .js.movimiento .parada--aviso .parada__marca::after { animation-range: cover 34% cover 44%; }
  .js.movimiento .parada--agente .reloj__tira,
  .js.movimiento .parada--agente .reloj,
  .js.movimiento .parada--agente .parada__marca::before { animation-range: cover 38% cover 47%; }
  .js.movimiento .parada--agente .parada__hecho { animation-range: cover 40% cover 49%; }
  .js.movimiento .parada--agente .parada__marca::after { animation-range: cover 44% cover 56%; }
  .js.movimiento .parada--dia .reloj__tira,
  .js.movimiento .parada--dia .reloj,
  .js.movimiento .parada--dia .parada__marca::before { animation-range: cover 48% cover 62%; }
  .js.movimiento .parada--dia .parada__hecho { animation-range: cover 53% cover 63%; }
}
@keyframes brotar { from { transform: scale(0.35); opacity: 0.5; } to { transform: scale(1); opacity: 1; } }
@keyframes subir-suave { from { opacity: 0.35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes trazar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rodar { from { transform: translateY(0); } to { transform: translateY(calc(-1em * var(--n, 0))); } }
@keyframes asomar { from { opacity: 0.35; } to { opacity: 1; } }
@media (max-width: 760px) {
  @keyframes trazar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* Respaldo sin scroll-driven animations: IntersectionObserver añade .visible */
.sin-sda.movimiento .horario h2,
.sin-sda.movimiento .parada__hecho { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 1s var(--ease-out); }
.sin-sda.movimiento .parada__marca::before { transform: scale(0); transition: transform 0.6s var(--ease-sello); }
.sin-sda.movimiento .parada__marca::after { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.sin-sda.movimiento .reloj__tira { transform: translateY(0); transition: transform 1.6s var(--ease-out); }
.sin-sda.movimiento .horario.visible h2,
.sin-sda.movimiento .horario.visible .parada__hecho { opacity: 1; transform: none; }
.sin-sda.movimiento .horario.visible .parada__marca::before { transform: none; }
.sin-sda.movimiento .horario.visible .parada__marca::after { transform: none; }
.sin-sda.movimiento .horario.visible .reloj__tira { transform: translateY(calc(-1em * var(--n, 0))); }
.sin-sda.movimiento .horario.visible .parada--agente .parada__hecho,
.sin-sda.movimiento .horario.visible .parada--agente .reloj__tira { transition-delay: 0.45s; }
.sin-sda.movimiento .horario.visible .parada--agente .parada__marca::before { transition-delay: 0.6s; }
.sin-sda.movimiento .horario.visible .parada--aviso .parada__marca::after { transition-delay: 0.3s; }
.sin-sda.movimiento .horario.visible .parada--agente .parada__marca::after { transition-delay: 0.9s; }
.sin-sda.movimiento .horario.visible .parada--dia .parada__hecho,
.sin-sda.movimiento .horario.visible .parada--dia .reloj__tira { transition-delay: 1.2s; }
.sin-sda.movimiento .horario.visible .parada--dia .parada__marca::before { transition-delay: 1.4s; }
@media (max-width: 760px) {
  .sin-sda.movimiento .parada__marca::after { transform: scaleY(0); }
}

/* Pestaña oculta: se congelan las animaciones CSS */
.pausado *, .pausado *::before, .pausado *::after { animation-play-state: paused !important; }

/* Movimiento reducido: todo en su estado final y sin desplazamientos. Se
   quitan las animaciones y todo lo que mueve (transform), pero los cambios de
   opacidad y de color siguen fundiéndose, cortos: ayudan a leer el cambio */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color, text-decoration-color !important;
    transition-duration: 150ms !important;
    transition-delay: 0s !important;
    transition-timing-function: ease !important;
    scroll-behavior: auto !important;
  }
  .reloj__tira { transform: translateY(calc(-1em * var(--n, 0))); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 11 · El recorrido: servicios, integración, modelo, sectores y datos ----------
   Ritmo de la página: escena oscura → fuera de horario (oscuro) → Servicios
   (hoja clara) → Cómo trabajamos (oscuro) → Modelo (hoja clara) → Sectores y
   Lo tuyo es tuyo (oscuro) → contacto. Cada hoja clara es una lámina que se
   abre al entrar y se recoge al salir (app.js la escala; solo transform). */

:root {
  --claro: #EEF1F5;
  --raya-clara: rgba(27, 37, 56, 0.16);
  --gris-azul: #56657F;
}

.titulo-seccion {
  font-family: var(--f-display); font-weight: 620;
  font-size: var(--t-secundario); line-height: 1; letter-spacing: -0.03em;
  max-width: 18ch; text-wrap: balance;
}
.titulo-seccion--narrativo {
  font-weight: 640; font-size: var(--t-narrativo); line-height: 0.95; letter-spacing: -0.04em;
  max-width: 22ch;
}

/* Hoja clara */
.hoja { position: relative; isolation: isolate; color: var(--tinta); color-scheme: light; }
.hoja__fondo {
  position: absolute; inset: 0; z-index: -1;
  border-radius: clamp(26px, 3vw, 44px);
  background: var(--claro);
  box-shadow: 0 2px 4px rgba(2, 6, 14, 0.3), 0 40px 90px -40px rgba(2, 6, 14, 0.85);
  transform-origin: 50% 50%;
}
.js.movimiento .hoja__fondo { will-change: transform; }
.hoja :focus-visible { outline-color: var(--marino); }

/* 11.1 · Servicios ---------------------------------------------------------- */

.servicios { margin-top: clamp(8px, 3vh, 40px); padding: clamp(104px, 14vh, 160px) 0 clamp(96px, 13vh, 150px); }
.servicios { --cols: minmax(0, 1fr) minmax(0, 330px) 44px; --hueco: 24px; }
.servicios__cabeza { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; }
.servicios__cabeza .titulo-seccion { grid-column: 1 / -1; }
.servicios__texto { grid-column: 2; }
.servicios__texto { max-width: 44ch; font-size: clamp(17px, 0.95rem + 0.3vw, 19px); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }

.servicios__leyenda {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--hueco);
  margin-top: clamp(52px, 8vh, 88px); padding-bottom: 12px;
  font-size: 12px; letter-spacing: 0.04em; color: var(--tinta-2);
}
.servicios__leyenda span:first-child { grid-column: 1; }
.servicios__leyenda span:last-child { grid-column: 2; padding-left: 34px; }

.servicios__lista { position: relative; border-top: 1px solid var(--raya-clara); }
.servicio { position: relative; border-bottom: 1px solid var(--raya-clara); }
/* Banda de la fila viva: una lámina blanca que aparece bajo el contenido */
.servicio::before {
  content: ""; position: absolute; inset: -1px -20px; z-index: -1; border-radius: 18px;
  background: var(--blanco);
  box-shadow: 0 1px 2px rgba(27, 37, 56, 0.08), 0 18px 34px -22px rgba(27, 37, 56, 0.35);
  opacity: 0; transition: opacity 150ms ease;
}
.servicio__cabeza { font: inherit; }
.servicio__fila {
  width: 100%; display: grid; grid-template-columns: var(--cols); column-gap: var(--hueco); align-items: baseline;
  padding: 26px 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--tinta);
  border-radius: 12px;
}
.servicio__nombre {
  grid-column: 1;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.55rem, 0.8rem + 2vw, 2.65rem); line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
  transition: transform 180ms var(--ease-out);
}
.servicio__signo { grid-column: 3; justify-self: end; position: relative; width: 22px; height: 22px; align-self: center; }
.servicio__signo::before, .servicio__signo::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.servicio__signo::after { transform: rotate(90deg); }
.servicio.abierta .servicio__signo::after { transform: rotate(0deg); }

.servicio__ruta {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--hueco); align-items: center;
  min-height: 30px; margin-top: 12px; padding-bottom: 24px;
  font-size: 15.5px; line-height: 1.35;
}
.servicio__via { grid-column: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.servicio__activa { flex: none; max-width: 70%; }
.servicio__rotulo { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--tinta-2); margin-right: 6px; }
.servicio__senal { color: var(--tinta); }
.servicio__trazo { flex: 1; display: flex; align-items: center; min-width: 24px; color: var(--turquesa-osc); }
.servicio__linea { flex: 1; height: 1.5px; background: currentColor; border-radius: 1px; transform-origin: 0 50%; }
.servicio__trazo svg { width: 18px; height: 18px; margin-left: -9px; stroke-width: 2; }
.servicio__logro { grid-column: 2 / span 2; display: flex; align-items: center; gap: 10px; color: var(--tinta-2); }
.servicio__check {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--marino); color: var(--cian);
}
.servicio__check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.servicio__rotulo--logro { display: none; }
.servicio__meta { font-weight: 500; }

/* Desde 960 px el evento de éxito comparte fila con el nombre y se apoya en su
   línea base: la <p> de la ruta cede sus hijos a la rejilla de la fila */
@media (min-width: 960px) {
  .servicio { display: grid; grid-template-columns: var(--cols); column-gap: var(--hueco); align-items: baseline; padding-bottom: 24px; }
  .servicio__cabeza { grid-column: 1 / -1; grid-row: 1; }
  .servicio__ruta { display: contents; }
  .servicio__via { grid-row: 2; min-height: 30px; margin-top: 12px; font-size: 15.5px; line-height: 1.35; }
  .servicio__logro { grid-row: 1; align-self: baseline; align-items: baseline; font-size: 15.5px; line-height: 1.35; pointer-events: none; }
  .servicio__check { align-self: center; }
  .servicio__detalle { grid-column: 1 / -1; grid-row: 3; }
}

/* Tarjeta 3D del servicio: la misma familia que las tarjetas del héroe, en
   versión oscura para que flote sobre la hoja clara */
.tchat { position: relative; width: min(312px, 100%); transform-style: preserve-3d; }
.tchat__canto {
  position: absolute; inset: 0; border-radius: 18px; background: #18233A;
  transform: translateZ(-8px); transform-style: preserve-3d;
  box-shadow: 0 0 0 1px rgba(25, 236, 221, 0.2);
}
.tchat__canto::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0E1626; transform: translateZ(-8px); }
.tchat__cara {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 12px 14px; border-radius: 18px; color: var(--blanco);
  background: linear-gradient(180deg, #2D3D60, #22304B);
  border: 1px solid rgba(25, 236, 221, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.tchat__barra { display: flex; align-items: center; gap: 9px; min-height: 26px; padding: 0 2px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 600; }
.tchat__titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchat__mensajes { display: flex; flex-direction: column; gap: 6px; }
.sello--mini { margin-top: 4px; align-self: flex-start; gap: 9px; padding: 9px 12px 9px 9px; border-radius: 13px; }
.sello--mini .sello__icono { width: 26px; height: 26px; }
.sello--mini .sello__icono svg { width: 15px; height: 15px; }
.sello--mini .sello__evento { font-size: 14px; }
.sello--mini .sello__rotulo { font-size: 11px; }

/* La tarjeta flotante la crea app.js; vive dentro de la lista */
.flotante { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; }
.flotante__cuerpo { transform-style: preserve-3d; transform-origin: 20% 50%; }
.flotante__sombra {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(14, 22, 40, 0.34), rgba(14, 22, 40, 0.12) 55%, transparent);
}
.flotante.cambia .tchat__cara > * { animation: cambia-tchat 420ms var(--ease-out) both; }
.flotante.cambia .tchat__mensajes { animation-delay: 50ms; }
.flotante.cambia .sello { animation: estampar 420ms var(--ease-out) 80ms both; }
@keyframes cambia-tchat { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sin JS: la ruta completa a la vista, sin tarjetas */
.no-js .servicio__detalle, .no-js .servicio__signo { display: none; }

/* .con-flotante la pone app.js: cursor fino y pantalla ancha */
.js.con-flotante .servicio__detalle { display: none; }
.js.con-flotante .servicio__signo { display: none; }
/* Al salir de la fila todo se recoge a la vez y deprisa (120 ms, sin retraso);
   al entrar la ruta se escribe en orden: frase, línea, flecha y marca */
.js.con-flotante .servicio__activa { opacity: 0; transform: translateY(6px); transition: opacity 120ms ease, transform 120ms var(--ease-out); }
.js.con-flotante .servicio__linea { transform: scaleX(0); transition: transform 120ms var(--ease-out); }
.js.con-flotante .servicio__trazo svg { opacity: 0; transform: translateX(-10px); transition: opacity 120ms ease, transform 120ms var(--ease-out); }
.js.con-flotante .servicio__check { opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 120ms var(--ease-out); }
.js.con-flotante .servicio__logro { transition: color 120ms ease; }
.js.con-flotante :is(.servicio.viva, .servicio.abierta) .servicio__activa { opacity: 1; transform: none; transition: opacity 200ms ease, transform 240ms var(--ease-out); }
.js.con-flotante :is(.servicio.viva, .servicio.abierta) .servicio__linea { transform: none; transition: transform 240ms var(--ease-out) 40ms; }
.js.con-flotante :is(.servicio.viva, .servicio.abierta) .servicio__trazo svg { opacity: 1; transform: none; transition: opacity 200ms ease 120ms, transform 200ms var(--ease-out) 120ms; }
.js.con-flotante :is(.servicio.viva, .servicio.abierta) .servicio__check { opacity: 1; transform: none; transition: opacity 160ms ease 160ms, transform 260ms var(--ease-out) 160ms; }
.js.con-flotante :is(.servicio.viva, .servicio.abierta) .servicio__logro { color: var(--tinta); transition: color 200ms ease; }
.js.con-flotante :is(.servicio.viva, .servicio.abierta)::before { opacity: 1; transition-duration: 200ms; }
.js.con-flotante :is(.servicio.viva, .servicio.abierta) .servicio__nombre { transform: translateX(10px); transition-duration: 250ms; }
.js.con-flotante .servicio__fila { cursor: default; }
/* El foco de teclado rodea la fila entera, no solo el botón */
.js.con-flotante .servicio__fila:focus-visible { outline: none; }
.js.con-flotante .servicio:has(.servicio__fila:focus-visible)::before { opacity: 1; box-shadow: 0 0 0 2px var(--marino), 0 18px 34px -22px rgba(27, 37, 56, 0.35); }
/* Sin la tarjeta flotante (táctil, tableta, movimiento reducido incluido) */
.no-js .servicio__logro { grid-column: 2 / span 2; }
.js:not(.con-flotante) .servicio:not(.abierta) .servicio__detalle,
.js:not(.con-flotante) .servicio:not(.abierta) .servicio__via { display: none; }
.js:not(.con-flotante) .servicio__detalle { padding: 2px 0 28px; }
.js:not(.con-flotante) .servicio.abierta .servicio__detalle .tchat { animation: abrir-tchat 520ms var(--ease-out) both; }
.js:not(.con-flotante) .servicio.abierta::before { opacity: 1; transition-duration: 200ms; }
/* La fila táctil entera es el botón: al pulsarla cede muy poco */
.js:not(.con-flotante) .servicio__fila { transition: transform 120ms var(--ease-out); }
.js:not(.con-flotante) .servicio__fila:active { transform: scale(0.99); }
.js:not(.con-flotante) .servicio__detalle .tchat { margin-left: auto; margin-right: auto; transform: perspective(900px) rotateX(7deg) rotateY(-9deg); }
@keyframes abrir-tchat {
  from { opacity: 0; transform: perspective(900px) rotateX(24deg) rotateY(-9deg) translateY(-14px); }
  to   { opacity: 1; transform: perspective(900px) rotateX(7deg) rotateY(-9deg); }
}

/* 11.2 · Cómo trabajamos ---------------------------------------------------- */

.integra { padding: clamp(88px, 12vh, 150px) 0 clamp(80px, 11vh, 130px); }
.flujo {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(48px, 5vw, 84px); row-gap: 54px;
  margin-top: clamp(52px, 8vh, 92px);
}
.flujo__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.js .flujo__lineas { display: block; }
.flujo__etapas { display: contents; }
.etapa { grid-row: 1; position: relative; }
.etapa--entrada { grid-column: 1; }
.etapa--conversacion { grid-column: 2; }
.etapa--salida { grid-column: 3; }
.etapa--confirmacion { grid-column: 4; }
.etapa__chip {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%;
  min-height: 58px; padding: 8px 18px 8px 8px; border-radius: 14px; color: var(--tinta);
  background: linear-gradient(170deg, #FFFFFF 0%, #F1F5F9 55%, #E6EDF3 100%);
  box-shadow:
    0 1px 0 #FFFFFF inset, 0 -1px 0 rgba(27, 37, 56, 0.1) inset,
    0 1px 2px rgba(4, 8, 18, 0.28), 0 14px 22px -12px rgba(4, 8, 18, 0.6);
}
.etapa__icono {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: #D6F0F0; color: var(--turquesa-osc);
}
.etapa__icono svg { width: 21px; height: 21px; }
.etapa__titulo { display: flex; align-items: baseline; gap: 9px; font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.etapa__num { font-size: 12px; font-weight: 500; color: var(--tinta-2); }
.etapa__texto { margin-top: 20px; max-width: 30ch; font-size: 16.5px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
/* La confirmación es el estado conseguido: la única etapa en cian */
.etapa--confirmacion .etapa__chip { background: var(--cian); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(4, 8, 18, 0.28), 0 14px 22px -12px rgba(4, 8, 18, 0.6); }
.etapa--confirmacion .etapa__icono { background: var(--marino); color: var(--cian); }
.etapa--confirmacion .etapa__icono svg { stroke-width: 2.4; }
.etapa--confirmacion .etapa__num { color: #0E4C55; }
/* Con movimiento, Confirmación espera apagada a que llegue el contacto; al
   llegar (app.js pone .encendida) el cian la barre de izquierda a derecha por
   debajo del contenido y el icono pasa a marino. Sin JS o con movimiento
   reducido está encendida desde el principio. */
.js.movimiento .etapa--confirmacion .etapa__chip { background: linear-gradient(170deg, #FFFFFF 0%, #F1F5F9 55%, #E6EDF3 100%); }
.js.movimiento .etapa--confirmacion .etapa__icono { position: relative; background: #D6F0F0; color: var(--turquesa-osc); }
.js.movimiento .etapa--confirmacion .etapa__num { color: var(--tinta-2); }
.etapa__luz { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
/* Encendido 360 ms ease-out (el barrido cubre el icono en sus primeros ~40 ms,
   así que el icono cambia casi a la vez); apagado más corto, sin retraso */
.etapa__luz::before { content: ""; position: absolute; inset: 0; background: var(--cian); transform: translateX(-101%); transition: transform 180ms var(--ease-out); }
.encendida .etapa__luz::before { transform: none; transition-duration: 360ms; }
.etapa__icono-luz {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: var(--marino); color: var(--cian); opacity: 0; transition: opacity 120ms ease;
}
.etapa__icono-luz svg { width: 21px; height: 21px; stroke-width: 2.4; }
.encendida .etapa__icono-luz { opacity: 1; transition: opacity 160ms var(--ease-out) 40ms; }

/* El contacto de ejemplo que recorre el diagrama (lo crea app.js): pasa por
   debajo de las etapas, del rótulo y de la tarjeta de la rama */
.viajero {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 999px;
  background: #33435F; color: var(--blanco); white-space: nowrap; opacity: 0;
  font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 6px 12px -6px rgba(3, 7, 16, 0.85);
  will-change: transform, opacity;
}
.viajero__avatar { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--papel); color: var(--marino); }
.viajero__avatar svg { width: 14px; height: 14px; stroke-width: 2; }
.flujo--columna .viajero { padding-right: 3px; }
.flujo--columna .viajero__texto { display: none; }

.derivar { grid-row: 2; grid-column: 2 / 4; justify-self: center; display: flex; flex-direction: column; align-items: center; }
.derivar__rotulo {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 16px;
  border-radius: 999px; background: var(--marino); border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12.5px; color: var(--blanco);
}
.derivar__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--blanco); }
.derivar__tarjeta {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 14px; max-width: 470px; margin-top: 16px;
  padding: 16px 22px 18px 14px; border-radius: 16px;
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 1px 0 #fff inset, 0 2px 3px rgba(4, 8, 18, 0.25), 0 22px 36px -18px rgba(4, 8, 18, 0.7);
}
.derivar__icono {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: #E3E9F1; color: var(--tinta);
}
.derivar__icono svg { width: 20px; height: 20px; }
.derivar__titulo { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.derivar__tarjeta p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }

/* Las etapas aparecen cuando les llega su línea (app.js) */
.js.movimiento :is(.etapa, .derivar) { opacity: 0; }

.flujo__con { fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.flujo__con--rama { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; }
.flujo__con--fin { stroke: var(--cian); }
.flujo__borne { fill: var(--marino); stroke: var(--turquesa); stroke-width: 1.5; }
.flujo__punta { fill: var(--turquesa); stroke: none; }
.flujo__punta--cian { fill: var(--cian); }
.flujo__punta--rama { fill: rgba(255, 255, 255, 0.7); }

.integra__bloques {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px clamp(48px, 6vw, 104px);
  margin-top: clamp(76px, 12vh, 128px);
}
.bloque { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.bloque__titulo { font-family: var(--f-display); font-size: clamp(22px, 1rem + 0.8vw, 28px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.bloque p { margin-top: 12px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }

/* La frase de la casa: cada palabra se enciende con el scroll (opacidad mínima
   0,5: el texto grande nunca baja de 3:1) */
.cita { margin: clamp(104px, 17vh, 190px) 0 0; }
.cita blockquote { margin: 0; }
.cita__texto {
  max-width: 24ch; text-indent: -0.42em;
  font-family: var(--f-display); font-weight: 520;
  font-size: var(--t-cita); line-height: 1.08; letter-spacing: -0.03em;
  text-wrap: balance;
}
.palabra { display: inline; }
.cita__firma { margin-top: 24px; font-family: var(--f-texto); font-size: 15px; font-weight: 600; color: var(--texto-3); }

/* 11.3 · Modelo de colaboración ---------------------------------------------- */

.modelo { margin-top: clamp(8px, 2vh, 24px); padding: clamp(104px, 14vh, 160px) 0 clamp(96px, 13vh, 150px); }
.piezas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 18px; margin-top: clamp(52px, 8vh, 88px); }
/* Cada pieza es un objeto del mundo: cara, canto en dos capas que asoma por
   debajo (la vista cae un poco desde arriba) y sombra arrojada hacia abajo,
   coherente con la única luz cenital. La pieza del precio por evento, el estado
   conseguido, es la más gruesa y la que más se separa de la hoja. */
.pieza {
  --canto: 12px;
  position: relative; isolation: isolate; display: grid;
  padding-bottom: var(--canto); color: var(--blanco);
}
.pieza__canto {
  position: absolute; left: 0; right: 0; top: var(--canto); bottom: 0; z-index: -1;
  border-radius: 24px;
  background: linear-gradient(0deg, var(--canto-2) 0 42%, var(--canto-1) 42% 100%);
  box-shadow: 0 2px 3px rgba(10, 18, 32, 0.22), 0 26px 36px -18px rgba(10, 18, 32, 0.5);
}
.pieza__cara {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: clamp(260px, 32vh, 340px); padding: clamp(24px, 2.6vw, 38px);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 -1px 0 rgba(0, 0, 0, 0.12) inset;
}
.pieza:nth-child(1) { grid-column: span 5; --n: 0; }
.pieza:nth-child(2) { grid-column: span 7; --n: 1; }
.pieza:nth-child(3) { grid-column: span 7; --n: 2; }
.pieza:nth-child(4) { grid-column: span 5; --n: 3; }
.pieza--marino { --canto-1: #121A2A; --canto-2: #0A101B; }
.pieza--marino .pieza__cara { background: linear-gradient(165deg, #2A3A5A 0%, #1B2538 72%); }
.pieza--turquesa { --canto-1: #0D5757; --canto-2: #083E3E; }
.pieza--turquesa .pieza__cara { background: linear-gradient(165deg, #157F7F 0%, #126F6F 72%); }
.pieza--cian { --canto: 18px; --canto-1: #10B3A8; --canto-2: #0A8880; color: var(--marino); }
.pieza--cian .pieza__cara { background: linear-gradient(165deg, #62F4EA 0%, var(--cian) 62%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(0, 0, 0, 0.1) inset; }
.pieza--cian .pieza__canto { box-shadow: 0 2px 3px rgba(10, 18, 32, 0.24), 0 38px 46px -20px rgba(10, 18, 32, 0.55); }
.pieza--gris { --canto-1: #3B475E; --canto-2: #2B3446; }
.pieza--gris .pieza__cara { background: linear-gradient(165deg, #5C6B86 0%, #4F5D77 72%); }
.pieza__titulo {
  max-width: 13ch;
  font-family: var(--f-display); font-weight: 620;
  font-size: clamp(1.6rem, 0.9rem + 1.5vw, 2.5rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance;
}
.pieza p { max-width: 38ch; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.pieza__marca {
  position: absolute; top: clamp(24px, 2.6vw, 38px); right: clamp(24px, 2.6vw, 38px);
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--marino); color: var(--cian);
}
.pieza__marca svg { width: 28px; height: 28px; stroke-width: 2.4; }
.modelo__pie { margin-top: 28px; font-size: 17px; color: var(--tinta-2); }

/* Entrada con escalonado en profundidad (IntersectionObserver añade .visible) */
.js.movimiento .piezas { perspective: 1400px; }
.js.movimiento .pieza {
  opacity: 0; transform: translateY(24px) rotateX(6deg);
  transition: opacity 500ms ease, transform 800ms var(--ease-out);
  transition-delay: calc(var(--n) * 70ms);
}
.js.movimiento .modelo.visible .pieza { opacity: 1; transform: none; }

/* 11.4 · Sectores ----------------------------------------------------------- */

.sectores { padding: clamp(88px, 12vh, 150px) 0 clamp(56px, 7vh, 96px); }
.sectores__rejilla {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px clamp(48px, 6vw, 112px); align-items: center;
}
.sectores__leyenda, .pestana { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); column-gap: 18px; }
.sectores__leyenda {
  margin-top: clamp(40px, 6vh, 64px); padding: 0 0 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px; letter-spacing: 0.04em; color: var(--texto-3);
}
.pestanas { position: relative; display: flex; flex-direction: column; }
.pestanas__marca {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 14px; pointer-events: none;
  background: rgba(25, 236, 221, 0.07);
  /* Se desplaza de una pestaña a otra sin salir de pantalla: ease-in-out */
  transition: transform 300ms var(--ease-in-out);
}
.pestana {
  position: relative; z-index: 1; align-items: baseline;
  min-height: 64px; padding: 15px 8px 15px 24px;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: none; border-radius: 0;
  text-align: left; cursor: pointer; color: var(--texto-3);
  transition: color 0.25s ease, transform 120ms var(--ease-out);
}
/* Fila ancha: la presión apenas se nota (0,99); en móvil es una pastilla (0,97) */
.pestana:active { transform: scale(0.99); }
.pestana::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.35s var(--ease-sello), background-color 0.25s ease, border-color 0.25s ease;
}
.pestana:hover { color: var(--texto-2); }
.pestana[aria-selected="true"] { color: var(--blanco); }
.pestana[aria-selected="true"]::before { background: var(--cian); border-color: var(--cian); transform: scale(1.25); }
.pestana__nombre { font-family: var(--f-display); font-size: clamp(1.4rem, 0.9rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.pestana__evento { font-size: 14.5px; line-height: 1.35; }
.pestana:focus-visible { outline-offset: -2px; border-radius: 14px; }
.no-js .pestanas, .no-js .sectores__leyenda { display: none; }

/* La consola del héroe en pequeño: mismo objeto con losas de grosor */
.maqueta { position: relative; width: 100%; max-width: 600px; justify-self: end; perspective: 1600px; }
.maqueta__cuerpo { position: relative; transform-style: preserve-3d; transform: rotateX(5deg) rotateY(-13deg); }
.maqueta__losa { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; }
.maqueta__losa--1 { background: #18233A; transform: translateZ(-9px); box-shadow: 0 0 0 1px rgba(25, 236, 221, 0.18); }
.maqueta__losa--2 { background: #0F1828; transform: translateZ(-18px); box-shadow: 0 0 0 1px rgba(25, 236, 221, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.consola--sector .consola__titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sectores__paneles { display: grid; padding: 14px 16px 18px; }
.sector { display: flex; flex-direction: column; }
.sector:focus-visible { outline-offset: 4px; }
.sector__nombre { font-family: var(--f-display); font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.sector__mensajes { margin-bottom: 18px; }
.sector .sello { margin-top: auto; align-self: flex-end; }
/* Sin JS los seis paneles van apilados: consola plana, en una columna */
.no-js .sectores__rejilla { grid-template-columns: minmax(0, 1fr); }
.no-js .maqueta { justify-self: start; max-width: 720px; perspective: none; }
.no-js .maqueta__cuerpo { transform: none; }
.no-js .maqueta__losa { display: none; }
.no-js .sector + .sector { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.js .sector { grid-area: 1 / 1; }
.js .sector:not(.activo) { visibility: hidden; }
.js .sector__nombre {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* La escena del héroe recorta su chat; aquí el chat crece con sus mensajes */
.js.movimiento .sector__mensajes { flex: none; overflow: visible; }

/* 11.5 · Lo tuyo es tuyo ---------------------------------------------------- */

.datos { padding: clamp(64px, 9vh, 120px) 0 clamp(48px, 7vh, 96px); }
/* Cuatro filas editoriales, de la familia de la lista de servicios: el nombre,
   el texto y el dibujo de línea al lado. Sin cajas: las filas las separan las
   rayas y el dibujo se apoya en la página */
.garantias { margin-top: clamp(44px, 7vh, 80px); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.garantia {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) clamp(180px, 15vw, 228px);
  column-gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(14px, 2vh, 22px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* La última fila no cierra con raya: la de Contacto, justo debajo, hace de cierre */
.garantia:last-child { border-bottom: 0; }
/* El trazado de cada dibujo empieza cuando le toca a su fila */
.garantia:nth-child(1) { --p: 0; }
.garantia:nth-child(2) { --p: 1; }
.garantia:nth-child(3) { --p: 2; }
.garantia:nth-child(4) { --p: 3; }
.garantia__titulo {
  grid-column: 1; grid-row: 1;
  font-family: var(--f-display); font-size: clamp(1.5rem, 0.9rem + 1.3vw, 2.15rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance;
}
.garantia p { grid-column: 2; grid-row: 1; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }

.dibujo { grid-column: 3; grid-row: 1; width: 100%; height: auto; aspect-ratio: 320 / 200; color: var(--turquesa); }
.dibujo .trazo { stroke-width: 1.7; }
.dibujo .acento { stroke: var(--cian); stroke-width: 2.3; }
.dibujo .tenue { stroke: rgba(27, 156, 156, 0.55); }
.dibujo .hoja-dibujo { fill: #1D2A43; }
.dibujo .textura { stroke: none; mask: url(#m-desvanece); }
.dibujo .desvio { stroke: rgba(152, 168, 194, 0.42); stroke-width: 1.4; stroke-dasharray: 3 6; }
.dibujo .punto { fill: var(--turquesa); stroke: none; }
.dibujo .punto--cian { fill: var(--cian); }
.dibujo .tic { stroke: rgba(188, 200, 220, 0.55); stroke-width: 1.5; }
.dibujo .tic--larga { stroke: var(--turquesa); stroke-width: 2.2; }
.dibujo .dia { stroke-width: 3.2; }
#tx-puntos circle { fill: rgba(152, 168, 194, 0.24); stroke: none; }
#tx-lineas line { stroke: rgba(152, 168, 194, 0.13); stroke-width: 1; }
#tx-rayas line { stroke: rgba(25, 236, 221, 0.5); stroke-width: 1.3; }
.dibujo .textura--esfera { fill: rgba(25, 236, 221, 0.035); stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 2 5; }

/* Los dibujos se trazan al entrar (stroke-dashoffset); las texturas aparecen */
.js.movimiento .dibujo .trazo {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-out);
  transition-delay: calc(var(--p, 0) * 160ms + var(--i, 0) * 70ms);
}
.js.movimiento .dibujo .tic { transition-duration: 0.5s; transition-delay: calc(var(--p, 0) * 160ms + var(--i, 0) * 26ms); }
.js.movimiento .dibujo :is(.textura, .desvio, .punto) { opacity: 0; transition: opacity 1.2s ease calc(var(--p, 0) * 160ms + 500ms); }
.js.movimiento .datos.visible .dibujo .trazo { stroke-dashoffset: 0; }
.js.movimiento .datos.visible .dibujo :is(.textura, .desvio, .punto) { opacity: 1; }

/* 11.6 · Adaptación -------------------------------------------------------- */

@media (max-width: 1199px) {
  .servicios { --cols: minmax(0, 1fr) minmax(0, 290px) 40px; --hueco: 20px; }
}

/* El diagrama pasa a vertical por debajo de 1200 px: cuatro columnas no caben */
@media (max-width: 1199px) {
  .flujo { max-width: 760px; }
  .flujo { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .etapa, .etapa--entrada, .etapa--conversacion, .etapa--salida, .etapa--confirmacion { grid-column: 1; grid-row: auto; padding-bottom: 44px; }
  .etapa--entrada { order: 1; }
  .etapa--conversacion { order: 2; }
  .derivar { order: 3; }
  .etapa--salida { order: 4; }
  .etapa--confirmacion { order: 5; padding-bottom: 0; }
  .etapa__texto { margin: 12px 0 0 54px; }
  .derivar { grid-row: auto; grid-column: 1; justify-self: stretch; align-items: flex-start; margin-left: 54px; padding-bottom: 44px; }
  .derivar__tarjeta { margin-top: 12px; }
}

@media (max-width: 959px) {
  .servicios__cabeza { grid-template-columns: 1fr; }
  .servicios__texto { grid-column: 1; }
  .servicios__leyenda { display: none; }
  .servicios__lista { margin-top: clamp(36px, 6vh, 56px); }
  .servicios { --cols: minmax(0, 1fr) 28px; --hueco: 12px; }
  .servicio__fila { padding-top: 22px; }
  .servicio__nombre { font-size: clamp(1.4rem, 1rem + 2.4vw, 2rem); }
  .servicio__signo { grid-column: 2; }
  .servicio::before { inset: -1px -12px; border-radius: 14px; }
  .servicio__ruta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 0 0 20px; font-size: 15px; }
  .servicio__via { flex-direction: column; align-items: flex-start; gap: 6px; }
  .servicio__activa { max-width: none; }
  .servicio__trazo { flex: none; width: 18px; height: 22px; transform: rotate(90deg); }
  .servicio__linea { display: none; }
  .servicio__trazo svg { margin-left: 0; }
  .servicio__rotulo--logro { display: inline; margin-right: 0; }
  .servicio__logro { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
  /* La marca de conseguido solo con la fila abierta */
  .js .servicio:not(.abierta) .servicio__check { display: none; }

  .integra__bloques { grid-template-columns: 1fr; }

  .piezas { grid-template-columns: minmax(0, 1fr); }
  .pieza:nth-child(n) { grid-column: 1; }
  .pieza__cara { min-height: 0; gap: 56px; }

  /* Lo tuyo es tuyo: el nombre con su dibujo a la derecha y el texto debajo */
  .garantia { grid-template-columns: minmax(0, 1fr) clamp(116px, 22vw, 200px); column-gap: 18px; row-gap: 8px; padding: 18px 0 22px; }
  .garantia p { grid-column: 1 / -1; grid-row: 2; }
  .dibujo { grid-column: 2; grid-row: 1; }

  .sectores__rejilla { grid-template-columns: minmax(0, 1fr); }
  .maqueta { justify-self: stretch; max-width: 620px; perspective: none; }
  .maqueta__cuerpo { transform: none; }
  .maqueta__losa { display: none; }
}

@media (max-width: 640px) {
  .sectores__leyenda { display: none; }
  .pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
  .pestanas__marca { display: none; }
  .pestana {
    display: flex; align-items: center; min-height: 48px; padding: 0 14px 0 30px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; color: var(--blanco);
  }
  .pestana::before { left: 13px; }
  .pestana:active { transform: scale(0.97); }
  .pestana[aria-selected="true"] { background: rgba(25, 236, 221, 0.1); border-color: rgba(25, 236, 221, 0.7); }
  .pestana__nombre { font-family: var(--f-texto); font-size: 15px; font-weight: 500; letter-spacing: 0; }
  .pestana__evento { display: none; }
  .pestana:focus-visible { border-radius: 999px; outline-offset: 3px; }
  .sectores__paneles { padding: 12px 12px 16px; }

  /* Ritmo vertical en móvil: sin franjas muertas entre secciones */
  .funnel { padding-bottom: 56px; }
  .inundacion { min-height: 0; padding-block: 80px; }
  .horario { padding: 80px 0 56px; }
  .parada:last-child { padding-bottom: 0; }
  .servicios, .modelo { padding-top: 88px; padding-bottom: 80px; }
  .integra { padding: 80px 0 72px; }
  .cita { margin-top: 88px; }
  .sectores { padding: 80px 0 48px; }
  .datos { padding: 56px 0 40px; }

  .cita__texto { text-indent: -0.4em; }
}

/* 12 · Preguntas frecuentes, formulario de reunión y diálogo ----------------
   Ritmo: … Lo tuyo es tuyo (oscuro) → Preguntas (hoja clara) → Contacto. El
   formulario es otra superficie clara; abierto, vive en un <dialog> con la
   materia de la consola (marino de consola, borde de luz y sombra mayor). */

/* 12.1 · Preguntas frecuentes: filas editoriales separadas por rayas, en dos
   columnas, con el mismo signo + / − de la lista de servicios */
.preguntas { margin-top: clamp(8px, 2vh, 24px); padding: clamp(104px, 14vh, 160px) 0 clamp(96px, 13vh, 150px); }
.preguntas__columnas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  column-gap: clamp(40px, 5vw, 88px); margin-top: clamp(44px, 7vh, 80px);
}
.preguntas__columna { border-top: 1px solid var(--raya-clara); }
.pregunta { position: relative; border-bottom: 1px solid var(--raya-clara); }
/* La lámina blanca de la fila viva, como en Servicios */
.pregunta::before {
  content: ""; position: absolute; inset: -1px -20px; z-index: -1; border-radius: 18px;
  background: var(--blanco);
  box-shadow: 0 1px 2px rgba(27, 37, 56, 0.08), 0 18px 34px -22px rgba(27, 37, 56, 0.35);
  opacity: 0; transition: opacity 150ms ease;
}
.pregunta[open]::before { opacity: 1; transition-duration: 200ms; }
.pregunta__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 72px; padding: 20px 0; list-style: none; cursor: pointer; border-radius: 12px;
  transition: transform 120ms var(--ease-out);
}
.pregunta__fila::-webkit-details-marker { display: none; }
.pregunta__fila:active { transform: scale(0.99); }
.pregunta__fila:focus-visible { outline-offset: 6px; }
.pregunta__titulo {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.55rem); line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance; transition: transform 180ms var(--ease-out);
}
.pregunta__signo { position: relative; flex: none; width: 22px; height: 22px; }
.pregunta__signo::before, .pregunta__signo::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.pregunta__signo::after { transform: rotate(90deg); }
.pregunta[open] .pregunta__signo::after { transform: rotate(0deg); }
.pregunta__respuesta { max-width: 58ch; padding: 0 44px 26px 0; font-size: 17px; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.js.movimiento .pregunta[open] .pregunta__respuesta { animation: abrir-respuesta 320ms var(--ease-out) both; }
@keyframes abrir-respuesta { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .pregunta:hover::before { opacity: 1; transition-duration: 200ms; }
  .pregunta:hover .pregunta__titulo { transform: translateX(6px); }
}
/* Tras la hoja de preguntas, Contacto respira como cualquier sección y la raya
   que cerraba «Lo tuyo es tuyo» ya no hace falta */
.preguntas + .contacto { padding-top: clamp(88px, 12vh, 150px); }
.preguntas + .contacto .contacto__caja { padding-top: 0; border-top: 0; }

@media (max-width: 959px) {
  .preguntas__columnas { grid-template-columns: minmax(0, 1fr); }
  .preguntas__columna + .preguntas__columna { border-top: 0; }
  .pregunta::before { inset: -1px -12px; border-radius: 14px; }
  .pregunta__respuesta { padding-right: 0; }
}
@media (max-width: 640px) {
  .preguntas { padding-top: 88px; padding-bottom: 80px; }
  .preguntas + .contacto { padding-top: 80px; }
  .pregunta__fila { min-height: 64px; padding: 18px 0; }
}

/* 12.2 · Formulario: hoja clara con controles de 50 px y foco marino ------ */

/* Sin JS el formulario se queda en Contacto; con el diálogo disponible
   (.con-dialogo, lo pone app.js) se va al diálogo y Contacto deja el botón */
.contacto__formulario { margin-top: clamp(40px, 6vh, 64px); }
.con-dialogo .contacto__formulario { display: none; }
html:not(.con-dialogo) .contacto__abrir { display: none; }

.reunion {
  position: relative; container-type: inline-size;
  max-width: 900px; padding: clamp(24px, 3.4vw, 44px);
  border-radius: clamp(20px, 2.4vw, 32px);
  background: var(--claro); color: var(--tinta); color-scheme: light;
  box-shadow: 0 2px 4px rgba(2, 6, 14, 0.3), 0 40px 90px -40px rgba(2, 6, 14, 0.85);
}
.reunion :focus-visible { outline-color: var(--marino); }
.reunion ::selection { background: var(--marino); color: var(--blanco); }
.reunion a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.formulario__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@container (min-width: 600px) {
  .formulario__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
  .campo--ancho, .grupo--ancho { grid-column: 1 / -1; }
}

.campo, .grupo { min-width: 0; }
.grupo { margin: 0; padding: 0; border: 0; }
.campo__etiqueta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-bottom: 8px; padding: 0;
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tinta);
}
.campo__obligatorio { font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.campo__ayuda { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--tinta-2); }

.campo__control {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 0 14px;
  border: 1px solid #75839B; border-radius: 12px; background: var(--blanco); color: var(--tinta);
  font: 400 16px/1.4 var(--f-texto); caret-color: var(--marino);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo__control--select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2538' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 20px 20px;
}
.campo__control--texto { min-height: 120px; padding: 13px 14px; resize: vertical; }
.campo__control:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .campo__control:hover { border-color: var(--tinta-2); }
}
/* Error: el borde se dobla en marino y el aviso lleva el punto coral con anillo */
.campo__control[aria-invalid="true"] { border-color: var(--marino); box-shadow: inset 0 0 0 1px var(--marino); }
.campo__error, .formulario__resumen-titulo {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--tinta);
}
.campo__error { margin-top: 8px; }
.campo__error[hidden] { display: none; }
.campo__error::before, .aviso-punto {
  content: ""; flex: none; position: relative; top: -1px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
  outline: 1.5px solid rgba(243, 95, 120, 0.55); outline-offset: 2px;
}
.aviso-punto { display: inline-block; }

/* Opciones: filas de 44 px; la marca es el control nativo en marino */
/* Opciones cortas: píldoras en fila, como las fichas; la lista de servicios,
   de nombres largos, va en filas */
.grupo__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.grupo__opciones--dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@container (min-width: 600px) {
  .grupo__opciones--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.opcion {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 16px 10px 12px; border-radius: 999px;
  border: 1px solid rgba(27, 37, 56, 0.18); background: rgba(255, 255, 255, 0.55);
  font-size: 15px; line-height: 1.3; color: var(--tinta); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 120ms var(--ease-out);
}
.grupo__opciones--dos .opcion { border-radius: 12px; }
.opcion:active { transform: scale(0.97); }
.grupo__opciones--dos .opcion:active { transform: scale(0.99); }
.opcion:has(input:checked) { border-color: var(--marino); background: var(--blanco); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--marino); outline-offset: 2px; }
.opcion input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--marino); cursor: pointer; }
.opcion input:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .opcion:hover { border-color: rgba(27, 37, 56, 0.4); background: var(--blanco); }
}

/* Privacidad: la primera capa, breve, y la casilla obligatoria */
.privacidad { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--raya-clara); }
.privacidad__capa { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); }
.privacidad__capa strong { font-weight: 600; color: var(--tinta); }
.opcion--privacidad { align-items: flex-start; background: none; border: 0; border-radius: 8px; padding: 4px 0; font-size: 15px; }
.opcion--privacidad:active { transform: none; }
.opcion--privacidad:has(input:checked) { background: none; }
.opcion--privacidad input { margin-top: 1px; }
.opcion--privacidad .campo__obligatorio { margin-left: 4px; }
.privacidad .campo__error { margin-top: 0; }

/* Trampa para bots: fuera de la vista, sin display:none (algunos bots lo detectan) */
.formulario__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulario__resumen {
  display: grid; gap: 8px; margin-bottom: 26px; padding: 16px 18px; border-radius: 14px;
  background: var(--blanco); border: 1.5px solid var(--marino);
}
.formulario__resumen[hidden] { display: none; }
.formulario__resumen-lista { display: grid; gap: 4px; padding-left: 18px; }
.formulario__resumen-lista a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; font-weight: 500; color: var(--tinta); }

.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
.formulario__enviar[disabled] { cursor: progress; opacity: 0.7; }
.formulario__estado { flex: 1 1 260px; min-width: 0; }
.formulario__estado:empty { display: none; }
.estado { font-size: 15px; line-height: 1.45; color: var(--tinta); }
/* Pendiente: un hueco por llenar, con el borde discontinuo de lo que aún no ha pasado */
.estado--pendiente {
  display: grid; gap: 6px; padding: 12px 16px; border-radius: 14px;
  border: 1.5px dashed var(--turquesa-osc); background: rgba(255, 255, 255, 0.6);
}
.estado--pendiente .etiqueta { justify-self: start; border-color: var(--turquesa-osc); color: var(--turquesa-osc); }
.estado--error { display: flex; align-items: baseline; gap: 10px; font-weight: 500; }
/* Enviada: el sello del evento conseguido */
.estado .sello { display: inline-flex; margin: 0; }
.estado--ok .sello { opacity: 1; }

/* 12.3 · Diálogo -------------------------------------------------------------- */

.dialogo {
  width: min(1120px, 100% - 48px); max-width: none; max-height: calc(100dvh - 48px);
  margin: auto; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  color: var(--blanco); color-scheme: dark;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 110px),
    var(--marino-3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 4px rgba(3, 7, 16, 0.3),
    0 24px 40px -18px rgba(3, 7, 16, 0.7),
    0 60px 100px -40px rgba(3, 7, 16, 0.85);
}
/* Borde de luz de la consola: más intenso arriba a la derecha */
.dialogo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(225deg, rgba(160, 255, 248, 0.7), rgba(25, 236, 221, 0.2) 22%, transparent 45%, transparent 78%, rgba(27, 156, 156, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.dialogo::backdrop { background: rgba(9, 13, 24, 0.78); }
.con-modal { overflow: hidden; scrollbar-gutter: stable; }

.dialogo__marco {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-color: #3B4C70 transparent;
}
.dialogo__lado { position: sticky; top: 0; align-self: start; padding: 64px clamp(24px, 3vw, 44px) 40px; }
.dialogo__titulo {
  font-family: var(--f-display); font-weight: 640;
  font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); line-height: 0.95; letter-spacing: -0.04em;
  text-wrap: balance;
}
.dialogo__titulo:focus { outline: none; }
.dialogo__texto { margin-top: 18px; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.dialogo__nota {
  margin-top: 28px; padding-top: 14px; max-width: 34ch; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14.5px; line-height: 1.45; color: var(--texto-3);
}
.dialogo__cuerpo { padding: 64px 12px 12px 0; }
.dialogo__cuerpo .reunion { max-width: none; box-shadow: 0 2px 4px rgba(2, 6, 14, 0.3), 0 24px 50px -30px rgba(2, 6, 14, 0.8); }

.dialogo__cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(34, 48, 74, 0.9); color: var(--blanco);
  transition: background-color 0.2s ease, transform 120ms var(--ease-out);
}
.dialogo__cerrar svg { width: 20px; height: 20px; }
.dialogo__cerrar:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .dialogo__cerrar:hover { background: var(--marino-2); }
}

/* Entra subiendo desde muy cerca; sale más deprisa de lo que entra */
.js.movimiento .dialogo[open] { animation: dialogo-entra 320ms var(--ease-out); }
.js.movimiento .dialogo[open]::backdrop { animation: velo-entra 260ms ease; }
.js.movimiento .dialogo.cierra { animation: dialogo-sale 160ms ease-in forwards; }
.js.movimiento .dialogo.cierra::backdrop { animation: velo-sale 160ms ease forwards; }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
@keyframes dialogo-sale { to { opacity: 0; transform: translateY(10px) scale(0.99); } }
@keyframes velo-entra { from { opacity: 0; } }
@keyframes velo-sale { to { opacity: 0; } }

/* Tableta: el lado pasa arriba */
@media (max-width: 959px) {
  .dialogo__marco { grid-template-columns: minmax(0, 1fr); }
  .dialogo__lado { position: static; padding: 56px 24px 22px; }
  .dialogo__texto { max-width: 52ch; }
  .dialogo__cuerpo { padding: 0 12px 12px; }
}
/* Móvil: a pantalla completa */
@media (max-width: 640px) {
  .dialogo { width: 100%; height: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .dialogo::before { display: none; }
  .dialogo__marco { height: 100%; max-height: none; }
  .dialogo__lado { padding: 64px 20px 20px; }
  .dialogo__titulo { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .dialogo__texto { margin-top: 12px; font-size: 16px; }
  .dialogo__cuerpo { padding: 0 8px 8px; }
  .dialogo__cuerpo .reunion { border-radius: 20px; padding: 22px 16px 24px; }
  .formulario__enviar { width: 100%; }
  .js.movimiento .dialogo[open] { animation-name: dialogo-entra-movil; }
  @keyframes dialogo-entra-movil { from { opacity: 0; transform: translateY(28px); } }
}