/* Fuente: Inter, servida desde sitio/fuentes/, nunca desde servidores de Google.
   Es variable: un solo archivo cubre todos los pesos indicados. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fuentes/inter-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fuentes/inter-latin.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;
}

/* Colores de Sempri: se cambian solo aquí. */
:root {
  --azul-noche: #0F2D5C;  /* titulares, texto fuerte, enlaces */
  --azul: #087EDD;        /* detalles y textos grandes; no para texto pequeño */
  --turquesa: #00C9B7;    /* botón principal, con texto azul noche, nunca blanco */
  --blanco: #FFFFFF;
  --fondo: #F7F9FC;
  --texto: #1F2937;
  --texto-suave: #4B5567;
  /* Solo como fondos de sección */
  --turquesa-claro: #E6FAF8;
  --azul-claro: #EAF3FC;
  /* v11 §2.2: el lado claro de «Dos finales». Es el azul claro un punto más hondo (un 12 % de --azul sobre --azul-claro),
     para que no se confunda con el fondo de «Pruébalo». Azul noche encima: 10,5:1. Solo se usa ahí. */
  --azul-corte: #CFE5F8;
  /* v15 §4: la cabeza de la chincheta del pie («Madrid»). Azul de marca; si Alex la quiere roja, se cambia solo aquí (propuesta en propuestas-variables-v15.md). */
  --chincheta: var(--azul);
  /* v15 §6: el papel del modo «Como dueño» de Pruébalo (hoja de agenda, color hueso). Única variable de fondo nueva, aprobada en el encargo. Azul noche encima: 11,9:1; texto suave: 6,6:1. Solo se usa ahí. */
  --papel-dueno: #F5F0E6;
}

/* Medidas y piezas comunes (los colores están arriba, en un solo sitio). */
:root {
  --ancho: 1200px;
  --margen: clamp(20px, 4vw, 48px);
  --radio: 14px;      /* botones */
  --radio-m: 22px;    /* tarjetas pequeñas */
  --radio-l: 28px;    /* tarjetas grandes y paneles */
  --sombra-suave: 0 18px 34px -26px var(--azul-noche);
  --seccion: clamp(4.5rem, 10vw, 9rem);
  --cabecera: 84px;
  --linea: color-mix(in srgb, var(--azul-noche) 16%, transparent);
  --linea-clara: color-mix(in srgb, var(--blanco) 24%, transparent);
  --blanco-suave: color-mix(in srgb, var(--blanco) 86%, var(--azul-noche));
  --noche-honda: color-mix(in srgb, var(--azul-noche) 62%, #000);
  --vh: 1vh;   /* unidad de alto de ventana; pasa a svh donde se soporta (más abajo) */
  --metal-claro: color-mix(in srgb, var(--azul-noche) 30%, var(--blanco));
  --negro-pantalla: color-mix(in srgb, var(--azul-noche) 22%, #000);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* La persianita de tres lamas (dibujo SVG propio): dos lamas del color del texto y la de abajo, azul sobre fondo claro (v11) y turquesa sobre azul noche */
  --persianita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath fill='%230F2D5C' d='M1.5 0h19A1.5 1.5 0 0122 1.5v1A1.5 1.5 0 0120.500 4h-19A1.5 1.5 0 010 2.5v-1A1.5 1.5 0 011.5 0zm0 6h19A1.5 1.5 0 0122 7.5v1a1.5 1.5 0 01-1.5 1.5h-19A1.5 1.5 0 010 8.500v-1A1.5 1.5 0 011.5 6z'/%3E%3Crect y='12' width='22' height='4' rx='1.5' fill='%23087EDD'/%3E%3C/svg%3E");
  --persianita-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath fill='%23FFFFFF' d='M1.5 0h19A1.5 1.5 0 0122 1.5v1A1.5 1.5 0 0120.500 4h-19A1.5 1.5 0 010 2.5v-1A1.5 1.5 0 011.5 0zm0 6h19A1.5 1.5 0 0122 7.5v1a1.5 1.5 0 01-1.5 1.5h-19A1.5 1.5 0 010 8.500v-1A1.5 1.5 0 011.5 6z'/%3E%3Crect y='12' width='22' height='4' rx='1.5' fill='%2300C9B7'/%3E%3C/svg%3E");
  /* ---- Sistema visual (Fase A): escalas acordadas en la skill sistema-visual-sempri. Todavía no las usa ninguna regla. ---- */
  /* Espaciado: 10 pasos */
  --esp-1: 0.25rem;
  --esp-2: 0.375rem;
  --esp-3: 0.5rem;
  --esp-4: 0.75rem;
  --esp-5: 1rem;
  --esp-6: 1.25rem;
  --esp-7: 1.5rem;
  --esp-8: 2rem;
  --esp-9: 3rem;
  --esp-10: 4rem;
  /* Sombras: suave (arriba, en azul noche), media y flotante (en --noche-honda). Nunca #000 puro. */
  --sombra-media: 0 10px 22px -10px var(--noche-honda);
  --sombra-flotante: 0 24px 40px -18px var(--noche-honda);
  /* Duraciones: microinteracción, estándar y entrada */
  --dur-micro: 0.16s;
  --dur: 0.3s;
  --dur-entrada: 0.6s;
  /* La única curva de rebote */
  --ease-rebote: cubic-bezier(0.34, 1.5, 0.64, 1);
  /* Texto: 6 pasos */
  --txt-1: 0.8125rem;
  --txt-2: 0.9375rem;
  --txt-3: 1rem;
  --txt-4: 1.125rem;
  --txt-5: 1.25rem;
  --txt-6: 1.5rem;
  /* Titulares */
  --titular-s: clamp(1.5rem, 3vw, 2.5rem);
  --titular-m: clamp(2.125rem, 6vw, 4rem);
  --titular-l: clamp(2.5rem, 7.4vw, 5.75rem);
  --titular-xl: clamp(2.5rem, 9vw, 6rem);
  --titular-hero: clamp(1.875rem, 8.6vw, 3.5rem);
  --numero-gigante: clamp(5rem, 13vw, 12rem);
  /* Translúcidos de azul noche: estos cuatro y --linea (16 %) */
  --noche-10: color-mix(in srgb, var(--azul-noche) 10%, transparent);
  --noche-60: color-mix(in srgb, var(--azul-noche) 60%, transparent);
  --noche-70: color-mix(in srgb, var(--azul-noche) 70%, transparent);
  --noche-88: color-mix(in srgb, var(--azul-noche) 88%, transparent);
}

@supports (height: 1svh) { :root { --vh: 1svh; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 4px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; color: var(--azul-noche); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: var(--azul-noche); text-underline-offset: 0.2em; }
::selection { background: var(--turquesa); color: var(--azul-noche); }
:focus-visible { outline: 3px solid var(--azul-noche); outline-offset: 3px; border-radius: 4px; }
a, button, summary, input { scroll-margin-top: calc(var(--cabecera) + 16px); scroll-margin-bottom: 6rem; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: -999px; top: 8px; z-index: 30;
  padding: 0.75rem 1rem; border-radius: 8px;
  background: var(--azul-noche); color: var(--blanco);
}
.saltar:focus { left: 8px; }
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.contenedor--estrecho > * { max-width: 720px; }

/* Grano: una textura muy suave encima de fotos y fondos oscuros */
.grano { position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: 0.07; mix-blend-mode: overlay; }

/* Cabecera: píldora flotante de cristal esmerilado, a todo el ancho. Siempre clara: el logo va sobre fondo claro. */
.cabecera { position: fixed; top: 12px; left: 0; right: 0; z-index: 20; padding-inline: clamp(16px, 3.2vw, 44px); pointer-events: none; }
.cabecera__pildora {
  pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  min-height: 60px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--linea);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, #000 60%, transparent);
  transition: box-shadow 0.3s var(--ease-out), background-color 0.3s ease-out;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cabecera__pildora {
    background: color-mix(in srgb, var(--blanco) 95%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  }
  .cabecera.compacta .cabecera__pildora { background: color-mix(in srgb, var(--blanco) 97%, transparent); }
}
.cabecera.compacta .cabecera__pildora { box-shadow: 0 14px 34px -16px color-mix(in srgb, #000 70%, transparent); }
.cabecera__pildora > .boton { grid-column: 3; justify-self: end; }
.marca { display: inline-flex; align-items: center; gap: 0.125rem; color: var(--azul-noche); text-decoration: none; }
.marca img { width: 44px; height: 44px; margin-left: -4px; }
.marca__nombre { font-size: 1.375rem; font-weight: 600; letter-spacing: 0; }
.marca { border-radius: 999px; transition: transform 0.16s var(--ease-out); }
.marca:active { transform: scale(0.97); }
/* v8: con ratón, el logo avisa de lo que abre */
@media (hover: hover) and (pointer: fine) {
  .marca--capa { position: relative; }
  .marca--capa::after {
    content: "¿Qué es Sempri?"; position: absolute; left: 0; top: calc(100% + 12px); padding: 0.375rem 0.75rem; border-radius: 999px;
    background: var(--azul-noche); color: var(--blanco); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s ease-out, transform 0.15s var(--ease-out);
  }
  .marca--capa:hover::after, .marca--capa:focus-visible::after { opacity: 1; transform: none; transition-delay: 0.2s; }
}
.cabecera__enlaces { display: none; justify-self: center; }
.cabecera__enlaces a, .cabecera__enlaces a:visited { position: relative; display: inline-block; padding-block: 0.75rem; color: var(--azul-noche); font-weight: 600; font-size: 0.9375rem; text-decoration: none; opacity: 1; }
.cabecera__enlaces a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 2px;
  background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-out);
}
/* v9: cinco enlaces; «Otros servicios» (lo que todavía no existe) solo desde 1024 px */
.cabecera__enlaces .cabecera__extra { display: none; }
@media (min-width: 1200px) { .cabecera__enlaces .cabecera__extra { display: inline-block; } }   /* v14: antes 1024; con «Te esperamos» los seis no caben hasta 1200 */
/* v14 §6 · «Te esperamos»: lleva a la llamada final. No es un botón: mismo enlace que los demás, un punto más de peso y un piloto azul encendido
   que respira despacio (solo opacity; quieto con «reducir movimiento», al pasar el ratón, con el foco y cuando ya estás en la llamada final). */
.cabecera__enlaces .cabecera__espera { display: none; align-items: center; gap: var(--esp-3); font-weight: 700; }
@media (min-width: 1024px) { .cabecera__enlaces .cabecera__espera { display: inline-flex; } }
.cabecera__luz { flex: none; width: var(--esp-3); height: var(--esp-3); border-radius: 50%; background: var(--azul); }
@media (prefers-reduced-motion: no-preference) {
  .cabecera__luz { animation: luz-piloto calc(var(--dur-entrada) * 2) var(--ease-in-out) infinite alternate; }
  .cabecera__espera:hover .cabecera__luz, .cabecera__espera:focus-visible .cabecera__luz, .cabecera__espera[aria-current] .cabecera__luz { animation: none; }
}
@keyframes luz-piloto { to { opacity: 0.4; } }
.cabecera__enlaces a:focus-visible::after, .cabecera__enlaces a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .cabecera__enlaces a:hover::after { transform: scaleX(1); } }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 52px; padding: 0.875rem 1.75rem;
  background: var(--turquesa); color: var(--azul-noche);
  border: 0; border-radius: var(--radio);
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease-out, transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .boton:hover { background: color-mix(in srgb, var(--turquesa) 82%, var(--blanco)); } }
.boton:active { transform: scale(0.97); }
.boton--pequeno { min-height: 44px; padding: 0.5rem 1.125rem; font-size: 0.9375rem; border-radius: 999px; }
/* v11 §3.1: sobre fondo claro (menú, capa y páginas legales) el turquesa no se separa del blanco (2,1:1). Un anillo azul noche (13,5:1) dibuja el botón
   y la letra sube de peso. Mismo color de siempre; ningún tono nuevo. */
.cabecera .boton, .capa .boton { box-shadow: inset 0 0 0 2px var(--azul-noche); }
.cabecera .boton--pequeno { font-weight: 700; }
.boton--gigante { min-height: 68px; padding: 1.125rem 1.75rem; font-size: clamp(1.125rem, 2vw, 1.3125rem); font-weight: 700; border-radius: 18px; }
.boton--titan {
  min-height: 88px; padding: 1.25rem clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(1.125rem, 2.6vw, 1.875rem); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; border-radius: 22px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa) 50%, transparent); animation: late 2.6s ease-out infinite;
}
@keyframes late { 70%, 100% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--turquesa) 0%, transparent); } }
.flecha { flex: none; width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: empuja 1.8s var(--ease-out) infinite; }
@keyframes empuja { 50% { transform: translateX(5px); } }
.iman { display: inline-block; }

/* Bandas de sección y ritmo de color: azul noche, blanco, azul claro, turquesa claro y una banda de degradado (la cinta) */
.banda { position: relative; padding-block: var(--seccion); background: var(--fondo); }
.banda--blanca { background: var(--blanco); }
.banda--azul-claro { background: var(--azul-claro); }
.banda--turquesa-claro { background: var(--turquesa-claro); }
.banda--noche { color: var(--blanco); background: var(--azul-noche); }
.banda--noche h2, .banda--noche h3 { color: var(--blanco); }
.banda--noche :focus-visible, .hero :focus-visible, .final :focus-visible { outline-color: var(--blanco); }
.titulo { font-size: clamp(2.125rem, 6vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.008em; }
.titulo--enorme { font-size: clamp(2.5rem, 7.4vw, 5.75rem); line-height: 1.08; letter-spacing: -0.012em; word-spacing: 0.04em; }
.texto-grande { margin-top: 1.5rem; max-width: 30em; font-size: clamp(1.125rem, 2.2vw, 1.4375rem); line-height: 1.5; }
.banda--noche .texto-grande { color: var(--blanco-suave); }

/* El recurso propio de Sempri: una persianita de tres lamas delante de cada rótulo */
.kicker { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul-noche); }
.kicker::before { content: ""; flex: none; width: 22px; height: 16px; background: var(--persianita) 0 0 / 100% 100% no-repeat; }
.banda--noche .kicker::before, .hero .kicker::before, .cartel-llaves .kicker::before { background-image: var(--persianita-clara); }
.banda--noche .kicker { color: var(--blanco); }

/* Avisos y notificaciones sueltas */
.noti {
  display: inline-block; padding: 0.5rem 0.875rem; border-radius: 999px; white-space: nowrap;
  background: var(--blanco); color: var(--azul-noche);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, #000 55%, transparent);
}
/* v11 §3.1: el aviso ya no es una pastilla turquesa (parecía un botón): tinte claro y un punto turquesa, como un aviso sin leer */
.noti--turquesa { background: var(--turquesa-claro); }
.noti--turquesa::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; border-radius: 50%; background: var(--turquesa); box-shadow: 0 0 0 1px var(--azul-noche); vertical-align: 0.08em; }

/* Malla de degradado viva: tres manchas grandes que derivan muy despacio */
.malla { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.malla span { position: absolute; border-radius: 50%; will-change: transform; }
.malla span:nth-child(1) { width: min(110vw, 820px); aspect-ratio: 1; right: -18%; top: -22%; background: radial-gradient(closest-side, color-mix(in srgb, var(--turquesa) 46%, transparent), transparent 72%); animation: deriva 26s ease-in-out infinite alternate; }
.malla span:nth-child(2) { width: min(100vw, 740px); aspect-ratio: 1; left: -24%; bottom: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--azul) 34%, transparent), transparent 72%); animation: deriva2 32s ease-in-out infinite alternate; }
.malla span:nth-child(3) { width: min(70vw, 480px); aspect-ratio: 1; right: 4%; bottom: -16%; background: radial-gradient(closest-side, color-mix(in srgb, var(--azul) 18%, transparent), transparent 72%); animation: deriva 38s ease-in-out infinite alternate-reverse; }
.malla--noche span:nth-child(1) { background: radial-gradient(closest-side, color-mix(in srgb, var(--azul) 60%, transparent), transparent 72%); }
.malla--noche span:nth-child(2) { background: radial-gradient(closest-side, color-mix(in srgb, var(--turquesa) 38%, transparent), transparent 72%); }
.malla--noche span:nth-child(3) { background: radial-gradient(closest-side, color-mix(in srgb, var(--azul) 36%, transparent), transparent 72%); }
.malla::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); opacity: 0.07; mix-blend-mode: multiply; }
@keyframes deriva { to { transform: translate3d(-8%, 8%, 0) scale(1.1); } }
@keyframes deriva2 { to { transform: translate3d(10%, -8%, 0) scale(1.08); } }

/* ============ EL MÓVIL: un único componente para toda la web (HTML y CSS, sin imágenes) ============ */
/* v6: el tamaño NO depende del contenedor. Cada variante solo cambia --h (el alto deseado); el ancho sale siempre
   del alto (9 / 19,5 ≈ 0,46) y el alto nunca pide más ancho del que hay en la ventana. aspect-ratio queda de refuerzo. */
.tel {
  --h: clamp(477px, calc(var(--vh) * 76), 760px);
  --alto: min(var(--h), calc((100vw - 2 * var(--margen)) * 19.5 / 9));
  --w: calc(var(--alto) * 9 / 19.5);
  --r: calc(var(--w) * 0.145);
  position: relative; flex: none; width: var(--w); min-width: var(--w); height: var(--alto); aspect-ratio: 9 / 19.5;
  font-size: clamp(12.5px, calc(var(--alto) * 0.0225), 15px); line-height: 1.35; color: var(--texto); text-align: left;
}
/* Botones laterales, como pequeños relieves: acción y volumen a la izquierda, encendido a la derecha */
.tel::before, .tel::after { content: ""; position: absolute; width: 4px; border-radius: 2px; pointer-events: none; }
.tel::before {
  left: -2.5px; top: 16%; height: 31%;
  background: linear-gradient(90deg, var(--metal-claro), var(--azul-noche)) 0 0 / 100% 13% no-repeat,
    linear-gradient(90deg, var(--metal-claro), var(--azul-noche)) 0 44% / 100% 27% no-repeat,
    linear-gradient(90deg, var(--metal-claro), var(--azul-noche)) 0 100% / 100% 27% no-repeat;
}
.tel::after { right: -2.5px; top: 27%; height: 15%; background: linear-gradient(270deg, var(--metal-claro), var(--azul-noche)); }
/* Marco metálico fino con brillo en el borde (degradado, no un trazo plano) */
.tel__marco {
  position: relative; z-index: 1; height: 100%; padding: 8px; border-radius: var(--r);
  background: linear-gradient(140deg, var(--metal-claro) 0%, color-mix(in srgb, var(--azul-noche) 78%, var(--blanco)) 16%, var(--azul-noche) 36%, var(--noche-honda) 56%, color-mix(in srgb, var(--azul-noche) 70%, var(--blanco)) 78%, var(--metal-claro) 100%);
  box-shadow: 0 0 0 1px var(--noche-honda), inset 0 0 0 1px color-mix(in srgb, var(--blanco) 55%, transparent), inset 0 0 0 2.5px color-mix(in srgb, var(--blanco) 12%, transparent),
    0 60px 90px -40px color-mix(in srgb, #000 75%, transparent), 0 26px 36px -22px color-mix(in srgb, #000 60%, transparent), 0 6px 10px -6px color-mix(in srgb, #000 55%, transparent);
}
/* Marco negro interior de la pantalla */
.tel__pantalla { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(var(--r) - 8px); background: var(--fondo); box-shadow: 0 0 0 5px var(--negro-pantalla); }
/* Indicador de inicio */
.tel__pantalla::after { content: ""; position: absolute; z-index: 3; left: 32%; right: 32%; bottom: 6px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--azul-noche) 82%, transparent); pointer-events: none; }
.bloqueo.tel__pantalla::after { background: color-mix(in srgb, var(--blanco) 85%, transparent); }
.tel__estado { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(var(--w) * 0.088 + 18px); padding: 10px calc(var(--w) * 0.085) 0; background: var(--blanco); color: var(--azul-noche); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tel__isla { width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.088); border-radius: 999px; background: radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--azul) 45%, var(--negro-pantalla)) 0 9%, transparent 11%), var(--negro-pantalla); }
.tel__iconos { justify-self: end; display: flex; align-items: center; gap: 6px; }
.tel__senal { width: 15px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 100% / 3px 4px no-repeat, linear-gradient(currentColor, currentColor) 4px 100% / 3px 6px no-repeat, linear-gradient(currentColor, currentColor) 8px 100% / 3px 8px no-repeat, linear-gradient(currentColor, currentColor) 12px 100% / 3px 10px no-repeat; }
.tel__bateria { position: relative; width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3.5px; }
.tel__bateria::before { content: ""; position: absolute; inset: 1.5px; right: 5px; border-radius: 1px; background: currentColor; }
.tel__bateria::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; }
.tel__cab { display: flex; align-items: center; gap: 9px; padding: 8px 12px 10px; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.tel__atras { flex: none; width: 9px; height: 9px; margin: 0 2px 0 5px; border-left: 2px solid var(--azul-noche); border-bottom: 2px solid var(--azul-noche); transform: rotate(45deg); }
.tel__avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul-noche); color: var(--blanco); font-size: 14px; font-weight: 700; }
/* v13 §4.2: en el chat de Sempri (llamada final) la foto de perfil es el logo, sobre una placa clara redonda. Los chats de taller siguen con su «T». */
.tel__avatar--logo { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.tel__avatar--logo img { width: 78%; height: 78%; object-fit: contain; }
.tel__quien { display: grid; min-width: 0; line-height: 1.25; }
/* El nombre nunca se corta con puntos suspensivos: si no cabe en una línea, usa dos */
.tel__quien strong { font-size: 0.96em; line-height: 1.18; font-weight: 700; color: var(--azul-noche); text-wrap: balance; }
.tel__quien span { font-size: 0.82em; color: var(--texto-suave); }
.tel__chat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; flex: 1; min-height: 0; overflow: hidden; padding: 10px 13px 12px;
  background-color: var(--fondo); background-image: radial-gradient(color-mix(in srgb, var(--azul-noche) 10%, transparent) 1px, transparent 1.5px); background-size: 18px 18px;
}
.tel__dia { align-self: center; flex: none; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--azul-noche) 8%, var(--blanco)); color: var(--texto-suave); font-size: 11px; font-weight: 600; }
.tel__vacio { align-self: center; margin-block: auto; max-width: 16em; padding: 0.5rem 0.875rem; border-radius: 12px; background: var(--azul-claro); color: var(--texto-suave); font-size: 12.5px; text-align: center; }
.tel__barra { display: flex; align-items: center; gap: 8px; padding: 8px 10px 19px; background: var(--blanco); border-top: 1px solid var(--linea); }
.tel__campo { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 7px 13px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); color: var(--texto-suave); font-size: 12.5px; }
.tel__enviar { position: relative; flex: none; width: 31px; height: 31px; border-radius: 50%; background: var(--azul-noche); }
.tel__enviar::before { content: ""; position: absolute; left: 11px; top: 9px; border-left: 11px solid var(--blanco); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.tel__brillo {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, color-mix(in srgb, var(--blanco) 22%, transparent) 0%, color-mix(in srgb, var(--blanco) 6%, transparent) 24%, transparent 24.2%, transparent 62%, color-mix(in srgb, var(--blanco) 5%, transparent) 62.2%, transparent 80%),
    radial-gradient(260px circle at calc(50% + var(--mx, 0) * 45%) calc(28% + var(--my, 0) * 40%), color-mix(in srgb, var(--blanco) 16%, transparent), transparent 70%);
}
/* Burbujas con cola, hora y doble marca. Cliente: blanca. Asistente: azul noche. */
.b { position: relative; flex: none; max-width: 85%; padding: 7px 10px 6px; border-radius: 14px; overflow-wrap: anywhere; box-shadow: 0 1px 1.5px color-mix(in srgb, var(--azul-noche) 18%, transparent); }
.b::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 11px; background: inherit; }
.b--cli { align-self: flex-start; border-bottom-left-radius: 3px; background: var(--blanco); color: var(--texto); }
.b--cli::after { left: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.b--asi { align-self: flex-end; border-bottom-right-radius: 3px; background: var(--azul-noche); color: var(--blanco); }
.b--asi::after { right: -5px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.b__hora { float: right; display: inline-flex; white-space: nowrap; align-items: center; gap: 3px; margin: 6px 0 -1px 10px; font-size: 10.5px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.b--asi .b__hora { color: color-mix(in srgb, var(--blanco) 80%, var(--azul-noche)); }
.tics { width: 15px; height: 10px; fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Audio con onda (el asistente entiende audios). Sin sonido. */
.b--audio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 1px; width: min(184px, 85%); overflow-wrap: normal; }
.b--audio .b__play { grid-area: 1 / 1 / 3 / 2; }
.b--audio .onda { grid-area: 1 / 2 / 2 / 4; }
.b--audio .b__dur { grid-area: 2 / 2; }
.b--audio .b__hora { grid-area: 2 / 3; }
.tel__aviso { align-self: center; flex: none; margin-top: 2px; font-size: 0.86em; }
.b__play { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--azul-noche); }
.b__play::before { content: ""; position: absolute; left: 10px; top: 7.5px; border-left: 9px solid var(--blanco); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.onda { display: flex; align-items: center; justify-content: space-between; gap: 1px; min-width: 0; height: 22px; overflow: hidden; }
.onda i { display: block; flex: none; width: 2.5px; height: 100%; border-radius: 2px; background: var(--azul); transform: scaleY(0.3); animation: onda 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--o, 0) * -0.17s); }
.onda i:nth-child(3n) { animation-duration: 0.8s; }
.onda i:nth-child(4n) { animation-duration: 1.4s; }
@keyframes onda { to { transform: scaleY(1); } }
.b__dur { font-size: 10.5px; line-height: 1; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b--audio .b__hora { float: none; margin: 0; white-space: nowrap; }
/* «Escribiendo…»: tres puntos y luego el mensaje */
.b--tecleo { display: flex; align-items: center; gap: 4px; padding: 11px 12px; }
.b--tecleo span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.45; animation: punto 1s ease-in-out infinite; }
.b--tecleo span:nth-child(2) { animation-delay: 0.15s; }
.b--tecleo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes aparece { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
figcaption { margin-top: 0.75rem; font-size: 0.8125rem; text-align: center; color: var(--texto-suave); }

/* ============ 1. PORTADA: dos zonas en rejilla. Izquierda, el texto; derecha, la foto a sangre y el móvil. ============ */
.hero { --H: max(100vh, 640px); position: relative; min-height: var(--H); overflow: clip; background: var(--azul-noche); color: var(--blanco); }
@supports (height: 100svh) { .hero { --H: max(100svh, 640px); } }
.hero__fondo { position: absolute; inset: 0; overflow: hidden; }
/* La «cámara»: avanza hacia el taller al bajar (--p) y se mueve un poco con el ratón (--mx, --my) */
.hero__camara {
  position: absolute; inset: 0; transform-origin: 74% 58%;
  transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px + var(--p, 0) * 5%), 0) scale(calc(1.03 + var(--p, 0) * 0.2));
}
/* El lienzo tiene la proporción exacta de la foto y la cubre todo: así la persiana, la farola y el brillo
   se colocan en porcentajes de la foto y no se descuadran al cambiar el tamaño de la ventana. */
.hero__lienzo {
  --W: max(100vw, calc(var(--H) * 16 / 9));
  position: absolute; width: var(--W); height: calc(var(--W) * 9 / 16);
  left: calc((100vw - var(--W)) * 0.8); top: calc((var(--H) - var(--W) * 9 / 16) * 0.5);
  animation: respira 30s ease-in-out infinite alternate; transform-origin: 74% 58%;
}
@keyframes respira { to { transform: scale(1.06); } }
.hero__foto { width: 100%; height: 100%; object-fit: cover; }
.hero__persiana { position: absolute; left: 57.4%; top: 44.6%; width: 37.2%; height: 26.4%; overflow: hidden; }
.lamas {
  display: block; height: 100%;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--azul-noche) 70%, #000) 0 9px, color-mix(in srgb, var(--azul-noche) 40%, #000) 9px 11px);
  box-shadow: inset 0 -14px 18px -10px #000;
  animation: sube-persiana 0.7s cubic-bezier(0.5, 0, 0.2, 1) 0.15s both;
}
@keyframes sube-persiana { from { transform: none; } to { transform: translateY(-102%); } }
/* v10: la persiana se abre UNA sola vez, al cargar, y más sobria: 0,7 s, sin rebote y con salida suave. No se repite nunca. */
.hero__farola {
  position: absolute; left: 72%; top: 12%; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blanco) 34%, transparent), transparent 70%);
  mix-blend-mode: screen; opacity: 0.55; animation: farola 7s linear infinite;
}
@keyframes farola { 0%, 100% { opacity: 0.55; } 8% { opacity: 0.7; } 11% { opacity: 0.42; } 14% { opacity: 0.66; } 50% { opacity: 0.6; } 62% { opacity: 0.74; } 66% { opacity: 0.5; } }
@keyframes barre { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(420%) skewX(-18deg); } }
/* Velo: la zona del texto (izquierda) queda casi opaca; la del taller, a la vista */
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--azul-noche) 95%, transparent) 0%, color-mix(in srgb, var(--azul-noche) 86%, transparent) 32%, color-mix(in srgb, var(--azul-noche) 48%, transparent) 56%, transparent 84%),
    linear-gradient(0deg, color-mix(in srgb, var(--noche-honda) 80%, transparent) 0%, transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--noche-honda) 70%, transparent) 0%, transparent 22%);
}
/* Móvil vertical y pantallas estrechas: una sola columna en zonas reservadas. Arriba el móvil (sobre la foto),
   debajo el titular y el botón; la frase de apoyo y las fichas quedan justo después. Nada es absoluto. */
.hero__rejilla {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; min-height: var(--H);
  padding: calc(var(--cabecera) - 10px) var(--margen) calc(1.25rem + env(safe-area-inset-bottom));   /* v12: 4 px menos arriba, para el aire de debajo del botón */
}
.hero__texto { display: contents; }
.hero__escena { order: 1; align-self: center; display: grid; justify-items: center; }
.hero__movil { display: flex; flex-direction: column; align-items: center; }
.hero__movil figcaption { margin-top: 0; color: var(--blanco-suave); }
.hero h1 { order: 3; }
.hero__sub { order: 4; }
.hero__botones { order: 5; }
.flota { display: none; }
/* v7: el titular manda. «Mientras trabajas,» va pequeño; «tus mensajes siguen atendidos.» va enorme,
   con un trazo que se dibuja bajo «atendidos.» y la doble marca de «leído» al final (solo en ancho). */
.hero h1 { margin-top: 0; color: var(--blanco); font-size: clamp(1.875rem, 8.6vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.012em; }
.hero h1 .linea { display: block; }
.hero h1 .linea--junta { display: inline; }
.hero h1 .linea--previa { margin-bottom: 0.2em; font-size: 0.58em; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--blanco-suave); }
.hero__ok { position: relative; display: inline-block; }
.hero__trazo { position: absolute; left: -2%; bottom: -0.04em; width: 104%; height: 0.2em; overflow: visible; fill: none; stroke: var(--turquesa); stroke-width: 3.6; stroke-linecap: round; pointer-events: none; }
.hero__trazo path, .hero__tics path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero__tics { display: none; }
@keyframes dibuja { from { stroke-dashoffset: 1; } }
.hero h1 em { font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--turquesa); }
/* Titular cinético: cada palabra sube desde detrás de una máscara */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.06em 0.16em; margin: -0.08em -0.06em -0.16em; }
.pal > span { display: inline-block; }
@keyframes sube { from { transform: translateY(112%); } }
/* ---------- v16 §5 · Entrada de la portada: primero el texto, suave; después el móvil (sustituye a la de v15 §5) ----------
   La clase «entrada» la pone el script del <head> solo si la página se abre arriba del todo, sin ancla y sin «reducir movimiento»;
   animaciones.js la quita al acabar o al primer toque, tecla o scroll (todo queda visible al instante). Sin JavaScript no hay clase:
   todo está visible desde el principio. La puerta del garaje no se toca (0,15-0,85 s).
   Orden (desde la carga): «Mientras trabajas,» 0,16 s · «tus mensajes» 0,62 · «siguen» 1,08 · «atendidos.» 1,54 (cada línea, 0,76 s de fundido y 12 px de subida,
   sin rebote) · el móvil 0,92-1,68 s (fundido y 24 px) · subrayado 2,0-2,6 s · línea de apoyo 2,0 s · botones y línea de confianza 2,16-2,46 s · doble marca 2,3-2,76 s.
   La conversación del móvil empieza a los 2,2 s (animaciones.js). Solo transform y opacity; nada cambia de tamaño.
   Todos los tiempos salen de la escala: --lento = --dur-entrada + --dur-micro (0,76 s) y --paso = --dur + --dur-micro (0,46 s). */
@media (prefers-reduced-motion: no-preference) {
  .entrada .hero { --t0: var(--dur-micro); --lento: calc(var(--dur-entrada) + var(--dur-micro)); --paso: calc(var(--dur) + var(--dur-micro)); --apoyo: calc(var(--t0) + var(--paso) * 4); }
  .entrada .hero h1 .pal { animation: hero-linea var(--lento) var(--ease-out) var(--t0) backwards; }
  .entrada .hero h1 .linea:nth-child(2) .pal { animation-delay: calc(var(--t0) + var(--paso)); }
  .entrada .hero h1 .linea:nth-child(3) .pal { animation-delay: calc(var(--t0) + var(--paso) * 2); }
  .entrada .hero h1 .linea:nth-child(4) .pal { animation-delay: calc(var(--t0) + var(--paso) * 3); }
  .entrada .hero__trazo { transform-origin: 0 50%; animation: hero-raya var(--dur-entrada) var(--ease-out) var(--apoyo) backwards; }
  .entrada .hero__sub { animation: hero-asoma var(--dur) var(--ease-out) var(--apoyo) backwards; }
  .entrada .hero__botones > * { animation: hero-asoma var(--dur) var(--ease-out) calc(var(--apoyo) + var(--dur-micro)) backwards; }
  .entrada .hero__tics { animation: hero-asoma var(--paso) var(--ease-out) calc(var(--apoyo) + var(--dur)) backwards; }
  /* el móvil entra cuando el titular ya va por la mitad, con su propia subida tranquila; después, su selector */
  .entrada .hero__movil { animation: hero-movil var(--lento) var(--ease-out) calc(var(--t0) + var(--lento)) backwards; }
  /* la pregunta del cliente sale cuando el móvil ya ha llegado (abre la historia de la conversación) */
  .entrada .hero .flota--a .noti { animation: hero-asoma var(--paso) var(--ease-out) calc(var(--t0) + var(--lento) * 2 + var(--dur)) backwards; }
}
@keyframes hero-raya { from { transform: scaleX(0); } }
@keyframes hero-asoma { from { opacity: 0; } }
@keyframes hero-linea { from { opacity: 0; transform: translateY(var(--esp-4)); } }
@keyframes hero-movil { from { opacity: 0; transform: translateY(var(--esp-7)); } }
/* En estrecho la línea va encima del botón y cabe en un renglón: «15 días gratis.» solo se añade en ancho (el botón ya dice «gratuito») */
.hero__sub { max-width: 31em; margin-top: 0.625rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--blanco); }
/* v14 §3: la línea de apoyo y los botones ya no tienen entrada propia; entran al final de la secuencia de arriba (clase «entrada») */
.hero__botones { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; width: 100%; margin-top: 0.75rem; }
.hero__botones .iman, .hero__botones .boton { flex: 1 1 100%; }
.hero__botones .iman .boton { width: 100%; }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } }
/* v9 · Línea de confianza: tres hechos en una línea, pegada al botón de pedir el piloto (portada y llamada final).
   Es texto de apoyo: pequeña y sin caja, para no competir con el botón. El punto de separación es decorativo. */
.confianza { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 0.125rem; font-size: clamp(0.75rem, 3.2vw, 0.875rem); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--blanco); }
.confianza li { white-space: nowrap; }
.confianza li + li::before { content: "·"; margin-inline: 0.4em; font-weight: 800; color: var(--turquesa); }
/* v12 §3.2: más aire entre titular, línea de apoyo, botón y línea de confianza (solo espacio, ninguna palabra cambia).
   La línea de confianza baja a unos 28-30 px del botón y pesa un poco menos (blanco suave: más de 9:1 sobre azul noche). */
.confianza { color: var(--blanco-suave); }
.hero__botones .confianza { flex: 1 1 100%; margin-top: 1.25rem; }   /* estrecho: 28 px bajo el botón (v11: 18). Sale de 4 px del margen de arriba, 4 de los márgenes del pie y del titular y 4 del alto del botón */
.hero__botones { margin-top: 0.75rem; }
.confianza--final { margin-top: 1.875rem; }   /* 30 px bajo el botón (v11: 24) */
/* En un móvil la línea tiene que caber en un renglón sin bajar de 12 px: algo más fina, puntos más juntos y 8 px prestados de cada margen */
@media (max-width: 440px) {
  .confianza { font-weight: 500; letter-spacing: -0.015em; }
  .confianza li + li::before { margin-inline: 0.3em; }
  .hero__botones .confianza, .confianza--final { margin-inline: -8px; width: calc(100% + 16px); flex: none; justify-content: center; }
}
.hero .boton--gigante { min-height: 56px; padding-block: 0.8125rem; padding-inline: 1.5rem; font-size: 1.125rem; }
.boton--linea { min-height: 48px; padding-inline: 0.25rem; gap: 0.5rem; background: transparent; color: var(--blanco); border-radius: 8px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--linea-clara); text-decoration-thickness: 2px; text-underline-offset: 0.35em; transition: text-decoration-color 0.2s ease-out, transform 0.16s var(--ease-out); }
.boton--linea .flecha { width: 1.15em; height: 1.15em; animation: none; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .boton--linea:hover { background: transparent; text-decoration-color: var(--turquesa); } .boton--linea:hover .flecha { transform: translateX(4px); } }
.hero__scroll { display: none; }
/* v7: la luz del móvil. Un resplandor azul y turquesa detrás del teléfono, que respira despacio: el móvil es lo único encendido de la calle. */
.hero__escena { position: relative; }
.hero__escena::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(150%, 46rem); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--turquesa) 34%, transparent), color-mix(in srgb, var(--azul) 20%, transparent) 46%, transparent 72%); animation: luz 7s ease-in-out infinite alternate; }
@keyframes luz { from { opacity: 0.55; } to { opacity: 1; } }

@media (max-width: 700px), (orientation: portrait) {
  .hero { --H: max(100vh, 760px); }
  @supports (height: 100svh) { .hero { --H: max(100svh, 760px); } }
  .hero__lienzo { --W: max(100vw, calc(var(--H) * 9 / 16)); height: calc(var(--W) * 16 / 9); left: calc((100vw - var(--W)) * 0.5); top: calc((var(--H) - var(--W) * 16 / 9) * 0.1); transform-origin: 50% 36%; }
  .hero__camara { transform-origin: 50% 36%; }
  .hero__persiana { left: 16.4%; top: 28.7%; width: 76.6%; height: 16.6%; }
  .hero__farola { left: 47%; top: 8.3%; width: 60%; margin: -30% 0 0 -30%; }
  .hero__velo { background: linear-gradient(0deg, var(--noche-honda) 0%, color-mix(in srgb, var(--azul-noche) 94%, transparent) 46%, transparent 74%), linear-gradient(180deg, color-mix(in srgb, var(--noche-honda) 70%, transparent) 0%, transparent 16%); }
}

/* Pantalla ancha: rejilla de dos zonas. El texto (titular, una línea y dos botones) no pasa del 46 % del ancho; el móvil y sus avisos tienen
   su propia zona (tres columnas: aviso | móvil | aviso), así que nada puede quedar encima del titular. */
@media (min-width: 960px) and (orientation: landscape) {
  .hero__rejilla {
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-content: stretch; align-items: center; column-gap: clamp(32px, 3.4vw, 56px);
    padding: calc(var(--cabecera) + 8px) clamp(32px, 3.4vw, 48px) 24px;
  }
  .hero__texto { display: grid; justify-items: start; }
  .hero h1 { margin-top: 0; font-size: clamp(3.25rem, 5.9vw, 6.5rem); line-height: 0.99; }
  .hero h1 .linea--junta { display: block; }
  .hero h1 .linea--previa { margin-bottom: 0.32em; font-size: 0.4em; }
  .hero__tics { display: inline-block; width: 0.8em; height: 0.55em; margin-left: 0.14em; overflow: visible; fill: none; stroke: var(--turquesa); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .hero__sub { font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1.5; margin-top: 2rem; }   /* v12: 32 px bajo el titular (v11: 24) */
  .hero .boton--gigante { min-height: 60px; padding-block: 1.125rem; }
  .hero__botones { width: auto; align-items: center; margin-top: 2.75rem; }   /* v12: 44 px bajo la línea de apoyo (v11: 36) */
  .hero__botones .iman, .hero__botones .boton { flex: 0 0 auto; }
  .hero__botones .confianza { order: 3; margin-top: 1.375rem; font-size: 0.9375rem; }   /* v12: 30 px bajo el botón (v11: 22) */
  .hero__escena { align-self: center; justify-items: stretch; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; perspective: 1100px; }
  .inclina { transform: rotateY(calc(var(--mx, 0) * 8deg)) rotateX(calc(var(--my, 0) * -6deg)); }
  /* Avisos flotantes: cada uno en su columna reservada; el ratón los mueve como mucho 12 px */
  .flota { display: block; min-width: 0; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * var(--prof, 1) * -10px), calc(var(--my, 0) * var(--prof, 1) * -8px), 0); }
  .flota .noti { display: block; white-space: normal; border-radius: 16px; font-size: 0.875rem; }
  .flota--a { justify-self: end; align-self: start; margin-top: 26%; }
  .flota--b { justify-self: start; align-self: end; margin-bottom: 30%; }
  /* v16 §5: la pregunta flotante solo entra con la secuencia «entrada» */
  /* «Aviso para ti: cita nueva» sale cuando el chat confirma la cita (el JavaScript quita la clase «espera») */
  .flota--b .noti { transition: opacity 0.3s ease-out, transform 0.45s var(--ease-out); }
  .flota--b.espera .noti { opacity: 0; transform: translateY(10px) scale(0.98); }
  /* Indicador de scroll, discreto, en la esquina inferior izquierda */
  .hero__scroll { display: block; position: absolute; left: clamp(32px, 3.4vw, 48px); bottom: 16px; width: 2px; height: 28px; overflow: hidden; background: var(--linea-clara); }
  .hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--turquesa); animation: baja 2.2s var(--ease-in-out) infinite; }
}
@keyframes entra-movil { from { opacity: 0; transform: translateY(40px); } }
@keyframes baja { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
/* v8: el tamaño del móvil de la portada. En pantalla estrecha deja sitio al titular y al botón dentro de la primera pantalla
   (nunca menos de 477 px de alto = 220 px de ancho). En ancho vuelve a ser protagonista: alrededor del 74 % del alto de la
   ventana, nunca menos de 520 px (240 px de ancho) y nunca más de lo que cabe entre el menú y el borde de abajo.
   Las dos reglas van juntas y la de ancho DESPUÉS: en v7 la de estrecho iba detrás y pisaba a la de escritorio. */
.tel--hero { --h: clamp(477px, calc(var(--vh) * 59), 540px); }
@media (min-width: 960px) and (orientation: landscape) {
  .tel--hero { --h: clamp(520px, min(calc(var(--vh) * 74), calc(var(--vh) * 100 - 150px)), 780px); }
}
/* El móvil entra desde abajo, sin rebote */
/* v16 §5.2: la entrada del móvil va con la secuencia «entrada» (arriba): si la página se abre con ancla o desplazada, está quieto desde el principio */
/* v7: la conversación de la portada avanza por mensajes completos. El JavaScript enseña un mensaje cada vez y, si no
   caben todos, retira los más antiguos ENTEROS (clase «arriba»): nunca queda una burbuja cortada. Sin JavaScript o con
   «reducir movimiento» se ve quieta. El borde de arriba se funde solo cuando se ha retirado algún mensaje. */
.hero__chat { transition: opacity 0.35s ease-out; }
.hero__chat.sale { opacity: 0; }
.tel__chat > .arriba { display: none; }
.tel__chat > .entra { animation: aparece 0.45s var(--ease-out) backwards; }
/* v16 §5.2: en la portada cada mensaje entra más despacio y sin escala: fundido y 8 px de subida, 0,46 s */
.hero__chat > .entra { animation: hero-mensaje calc(var(--dur) + var(--dur-micro)) var(--ease-out) backwards; }
@keyframes hero-mensaje { from { opacity: 0; transform: translateY(var(--esp-3)); } }

/* ---------- v16 §5.3 · La vista del dueño en el móvil de la portada y su selector ----------
   La capa del dueño es la pantalla de bloqueo de «El problema» (mismas piezas) puesta encima de la conversación. Cambia con un fundido
   y un desplazamiento lateral corto (solo opacity y transform, 0,6 s); con «reducir movimiento», al instante. Sin JavaScript no existe. */
.tel--hero .hero__dueno { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(var(--esp-7));
  transition: opacity var(--dur-entrada) var(--ease-out), transform var(--dur-entrada) var(--ease-out), visibility 0s linear var(--dur-entrada); }
.tel--hero .hero__dueno[hidden] { display: none; }
.tel--hero[data-vista="dueno"] .hero__dueno { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tel--hero .hero__dueno .bloqueo__lista { margin-top: 12%; }
.tel--hero .hero__dueno .aviso { grid-template-columns: auto 1fr; padding: var(--esp-4); }
.tel--hero .hero__dueno .aviso__hora { display: none; }   /* la hora ya está en el reloj de la pantalla */
.tel--hero .hero__dueno .aviso__txt { gap: var(--esp-1); }
.tel--hero .hero__dueno .aviso { transition: opacity var(--dur) var(--ease-out) var(--dur), transform var(--dur) var(--ease-out) var(--dur); }
.tel--hero:not([data-vista="dueno"]) .hero__dueno .aviso { opacity: 0; transform: translateY(calc(-1 * var(--esp-3))); transition-delay: 0s; }
.tel--hero[data-vista="dueno"] .tel__pantalla::after { background: var(--blanco-suave); }
/* El selector. En ancho, una píldora de dos opciones debajo del móvil, sin pisarlo. En estrecho no hay alto de sobra (el botón del piloto tiene que seguir
   en la primera pantalla y el móvil no baja de 220 px de ancho): las dos opciones van a los lados del móvil, a media altura, como dos rótulos. */
.hero__movil { position: relative; }
.hero__vistas { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin-top: var(--esp-3); padding: var(--esp-1); border-radius: 999px; background: var(--azul-noche); box-shadow: var(--sombra-flotante), inset 0 0 0 1px var(--linea-clara); }
.hero__vistas[hidden] { display: none; }
.hero__vistas button { position: relative; z-index: 1; min-height: calc(var(--esp-9) - var(--esp-4)); padding: 0 var(--esp-6); border: 0; border-radius: 999px; background: none; color: var(--blanco); font: inherit; font-size: var(--txt-2); font-weight: 700; white-space: nowrap; cursor: pointer; transition: color var(--dur) var(--ease-out); }
.hero__vistas button::after { content: ""; position: absolute; inset: calc(-1 * var(--esp-2)) 0; }   /* la zona de toque llega a 48 px de alto */
.hero__vistas button[aria-pressed="true"] { color: var(--azul-noche); }
.hero__vistas button:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
.hero__vistas button:active { transform: scale(0.97); }
.hero__vistas-pastilla { position: absolute; top: var(--esp-1); bottom: var(--esp-1); left: var(--esp-1); width: calc(50% - var(--esp-1)); border-radius: 999px; background: var(--blanco); transition: transform var(--dur) var(--ease-out); }
.hero__vistas[data-vista="dueno"] .hero__vistas-pastilla { transform: translateX(100%); }
@media not all and (min-width: 960px) and (orientation: landscape) {
  .hero__vistas { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; }
  .hero__vistas-pastilla { display: none; }
  .hero__vistas button { position: absolute; top: 50%; width: calc(var(--esp-9) + var(--esp-3)); min-height: var(--esp-9); margin-top: calc(-1 * var(--esp-7)); padding: 0 var(--esp-1); border-radius: var(--radio); background: var(--azul-noche); box-shadow: var(--sombra-flotante), inset 0 0 0 1px var(--linea-clara); font-size: var(--txt-1); line-height: 1.15; white-space: normal; pointer-events: auto; transition: none; }
  .hero__vistas button[data-vista="cliente"] { right: calc(100% + var(--esp-2)); }
  .hero__vistas button[data-vista="dueno"] { left: calc(100% + var(--esp-2)); }
  .hero__vistas button[aria-pressed="true"] { background: var(--blanco); }
}
@media (prefers-reduced-motion: no-preference) { .entrada .hero__vistas { animation: hero-asoma var(--dur) var(--ease-out) calc(var(--dur-entrada) * 3 + var(--dur)) backwards; } }
@media (prefers-reduced-motion: reduce) { .tel--hero .hero__dueno, .tel--hero .hero__dueno .aviso, .hero__vistas-pastilla, .hero__vistas button { transition: none; } }
.tel__chat.recortado { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }

/* ============ Cinta de capacidades: banda de degradado con pastillas; el ejemplo se abre en una burbuja encima ============ */
.ico { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cinta { position: relative; overflow: hidden; padding-bottom: 2.25rem; background: linear-gradient(100deg, var(--azul-noche) 0%, var(--azul) 42%, var(--turquesa) 100%); }
.cinta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 85% 0%, color-mix(in srgb, var(--blanco) 22%, transparent), transparent 70%), var(--grano); background-blend-mode: normal; opacity: 0.5; pointer-events: none; }
/* v16 §6.1: el rótulo «Toca una capacidad…» se ha quitado. El carril de arriba se queda: es donde se abren los ejemplos. */
/* En su lugar, un detalle mínimo y sin texto: una flechita hacia arriba al final de cada píldora, que dice «esto se abre» (hacia donde sale el ejemplo). Decorativa. */
.cap__pastilla::after { content: ""; flex: none; width: var(--esp-3); height: var(--esp-3); margin: var(--esp-1) var(--esp-1) 0 var(--esp-1); border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 1px; opacity: 0.55; transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.cap.abierta .cap__pastilla::after, .cap:focus-visible .cap__pastilla::after { opacity: 1; transform: translateY(calc(-1 * var(--esp-1))) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .cap:hover .cap__pastilla::after { opacity: 1; transform: translateY(calc(-1 * var(--esp-1))) rotate(-45deg); } }
@media (prefers-reduced-motion: reduce) { .cap__pastilla::after { transition: none; } }
.cinta__pista { position: relative; z-index: 2; display: flex; width: max-content; animation: cinta 58s linear infinite;   /* v14: un 14 % más rápida (v13: 66 s; antes 80 s) */ }
.cinta__lista { display: flex; flex: none; gap: 0.75rem; padding-right: 0.75rem; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cap { position: relative; display: block; padding: 6.5rem 0 0; border: 0; background: none; color: var(--azul-noche); font: inherit; text-align: left; cursor: pointer; }
.cap:focus-visible { outline: 0; }
.cap__pastilla { display: flex; align-items: center; gap: 0.75rem; height: 4.5rem; padding: 0 1.625rem 0 0.625rem; border-radius: 999px; background: var(--blanco); white-space: nowrap; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 700; box-shadow: 0 10px 22px -14px #000; transition: transform 0.16s var(--ease-out); }
.cap:active .cap__pastilla { transform: scale(0.97); }
.cap:focus-visible .cap__pastilla { outline: 3px solid var(--blanco); outline-offset: 3px; }
/* v7: iconos propios de dos tonos sobre una ficha azul noche, ligeramente girada, con una esquina de «bocadillo» */
.cap__ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 16px 16px 16px 5px; background: var(--azul-noche); color: var(--blanco); transform: rotate(-4deg); box-shadow: 0 0 0 0 var(--turquesa); transition: transform 0.3s var(--ease-out), box-shadow 0.2s ease-out; }
.cinta__lista li:where(:nth-child(even)) .cap__ico { transform: rotate(3deg); }
.cico { flex: none; width: 2rem; height: 2rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tq { stroke: var(--turquesa); }
.tqf { fill: var(--turquesa); stroke: none; }
.nq { stroke: var(--azul-noche); stroke-width: 1.8; }
/* La burbuja del ejemplo vive en el carril de arriba y aparece desde la pastilla */
.cap__burbuja {
  position: absolute; left: 0; bottom: 5.125rem; width: min(21rem, 80vw); padding: 0.5625rem 0.875rem 0.625rem; border-radius: 16px 16px 16px 4px;
  background: var(--blanco); color: var(--texto); font-size: 0.9375rem; line-height: 1.35; box-shadow: 0 14px 28px -14px #000;
  opacity: 0; transform: translateY(10px) scale(0.94); transform-origin: 0 100%; transition: opacity 0.2s ease-out, transform 0.28s var(--ease-out); pointer-events: none;
}
.cap__marca { display: inline-block; margin-right: 0.25rem; padding: 0.0625rem 0.4375rem; border-radius: 999px; background: var(--turquesa-claro); color: var(--azul-noche); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cap.abierta .cap__burbuja, .cap:focus-visible .cap__burbuja { opacity: 1; transform: none; }
.cap.abierta .cap__ico, .cap:focus-visible .cap__ico { transform: rotate(0deg) scale(1.06); box-shadow: 0 0 0 3px var(--turquesa); }
.cinta:focus-within .cinta__pista, .cinta.pausa .cinta__pista { animation-play-state: paused; }
/* Microdetalle de cada icono al abrirse: la etiqueta y el móvil se sacuden, la onda late, la llave aprieta y los demás saltan */
.cap.abierta.ani-campana .cico, .cap:focus-visible.ani-campana .cico { animation: suena 0.7s ease-in-out; transform-origin: 30% 20%; }
.cap.abierta.ani-onda .cico, .cap:focus-visible.ani-onda .cico { animation: late-onda 0.5s ease-in-out 3 alternate; }
.cap.abierta.ani-aprieta .cico, .cap:focus-visible.ani-aprieta .cico { animation: aprieta 0.8s var(--ease-out); }
.cap.abierta.ani-salta .cico, .cap:focus-visible.ani-salta .cico { animation: brinca 0.5s var(--ease-out); }
/* Escape cierra el ejemplo sin mover el foco */
.cap.esc:focus-visible .cap__burbuja { opacity: 0; transform: translateY(10px) scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .cinta:hover .cinta__pista { animation-play-state: paused; }
  .cap:hover .cap__burbuja { opacity: 1; transform: none; }
  .cap:hover .cap__ico { transform: rotate(0deg) scale(1.06); box-shadow: 0 0 0 3px var(--turquesa); }
  .cap:hover.ani-campana .cico { animation: suena 0.7s ease-in-out; transform-origin: 30% 20%; }
  .cap:hover.ani-onda .cico { animation: late-onda 0.5s ease-in-out 3 alternate; }
  .cap:hover.ani-aprieta .cico { animation: aprieta 0.8s var(--ease-out); }
  .cap:hover.ani-salta .cico { animation: brinca 0.5s var(--ease-out); }
}
@keyframes suena { 20% { transform: rotate(16deg); } 45% { transform: rotate(-13deg); } 70% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes late-onda { to { transform: scaleY(1.3); } }
@keyframes aprieta { 35% { transform: rotate(-30deg); } 70% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes brinca { 40% { transform: translateY(-5px); } 100% { transform: none; } }

/* ============ Otros servicios: tarjetas con una interrogación que giran al pasar, enfocar o tocar ============ */
.otros { padding-block: clamp(3rem, 6vw, 5rem); }
.otros__cabeza { display: grid; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.otros .titulo { font-size: clamp(1.75rem, 3.6vw, 2.75rem); max-width: 16em; }
.otros__hoy { max-width: 30em; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; color: var(--texto); }
.otros__sello { display: inline-block; margin-right: 0.375rem; transform: rotate(-2deg); padding: 0.1875rem 0.625rem; border-radius: 999px; background: var(--azul-noche); color: var(--blanco); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cartas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.cartas li { display: grid; }
.carta { position: relative; display: grid; width: 100%; min-height: 14.5rem; padding: 0; border: 0; border-radius: 22px; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; perspective: 900px; }
.carta__dentro, .carta__tapa { border-radius: 22px; }
.carta__dentro { display: grid; align-content: start; gap: 0.3125rem; padding: 1rem; background: var(--blanco); font-size: 0.875rem; line-height: 1.4; box-shadow: 0 18px 34px -26px var(--azul-noche); }
.carta__dentro strong, .carta--contacto strong { color: var(--azul-noche); font-size: 1.0625rem; line-height: 1.25; }
.carta__marca { justify-self: start; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--azul-claro); color: var(--azul-noche); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* La tapa (v11: una tarjeta clara con una caja de regalo dibujada) solo existe con JavaScript y con movimiento: sin ellos, la caja ya está abierta */
.carta__tapa { display: none; position: absolute; inset: 0; overflow: hidden; place-items: center; background: linear-gradient(180deg, var(--azul-corte) 0%, var(--azul-claro) 46%, var(--blanco) 100%); color: var(--azul-noche); box-shadow: inset 0 0 0 1.5px var(--linea), 0 22px 34px -24px var(--azul-noche); transform-origin: 50% 0; transition: transform 0.7s var(--ease-in-out), opacity 0.3s ease-out 0.3s, visibility 0s; }
.carta__duda { position: relative; z-index: 2; width: 5.5rem; height: 5.5rem; fill: none; stroke: var(--turquesa); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.carta__duda path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* v11 §4.2 · La caja de regalo (SVG en línea dentro de la tapa). Colores: solo los de la marca y sus mezclas; el turquesa, solo el ojal de la etiqueta.
   Cada color va primero en su valor de marca y después, si el navegador sabe, en su mezcla (color-mix). */
.caja { position: relative; z-index: 2; width: 100%; height: 100%; max-width: 23rem; padding: 0.5rem 0.25rem 0; overflow: visible; }
.caja .cj-a { stop-color: var(--azul); }
.caja .cj-b { stop-color: var(--azul); }
.caja .cj-c, .caja .cj-d { stop-color: var(--azul-noche); }
.caja .cj-luz { stop-color: var(--azul); }
.caja .cj-cinta-1 { fill: var(--blanco); stop-color: var(--blanco); }
.caja .cj-lazada { stroke: var(--azul-noche); stroke-opacity: 0.16; stroke-width: 1.2; }
.caja .cj-cinta-2 { fill: var(--azul-claro); stop-color: var(--azul-claro); }
.caja .cj-cinta-3 { fill: var(--azul-claro); }
.caja .cj-sombra { fill: var(--azul-noche); stop-color: var(--azul-noche); stroke: var(--azul-noche); }
.caja path.cj-sombra[fill="none"], .caja ellipse.cj-sombra[fill="none"] { fill: none; }
.caja .cj-brillo { stroke: var(--blanco); }
.caja .cj-relieve { stroke: var(--azul); }
.caja .cj-relieve-sombra { stroke: var(--azul-noche); }
.caja .cj-relieve-luz { stroke: var(--blanco); opacity: 0.5; }
.caja .cj-cordel { stroke: var(--azul-noche); }
.caja .cj-papel { fill: var(--blanco); stroke: var(--azul-noche); stroke-width: 1.2; }
.caja .cj-ojal { fill: var(--blanco); stroke: var(--turquesa); stroke-width: 2.4; }
.caja .cj-texto { fill: var(--azul-noche); font-family: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; }   /* azul noche sobre blanco: 13,5:1 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .caja .cj-luz { stop-color: color-mix(in srgb, var(--azul) 72%, var(--blanco)); }
  .caja .cj-a { stop-color: color-mix(in srgb, var(--azul) 86%, var(--azul-noche)); }
  .caja .cj-b { stop-color: color-mix(in srgb, var(--azul) 52%, var(--azul-noche)); }
  .caja .cj-c { stop-color: color-mix(in srgb, var(--azul) 16%, var(--azul-noche)); }
  .caja .cj-d { stop-color: var(--noche-honda); }
  .caja .cj-cinta-3 { fill: color-mix(in srgb, var(--azul) 34%, var(--azul-claro)); }
  .caja .cj-sombra { fill: var(--noche-honda); stop-color: var(--noche-honda); stroke: var(--noche-honda); }
  .caja .cj-relieve { stroke: color-mix(in srgb, var(--azul) 82%, var(--blanco)); }
  .caja .cj-relieve-sombra { stroke: var(--noche-honda); }
  .caja .cj-papel { stroke: color-mix(in srgb, var(--azul-noche) 22%, transparent); }
}
/* la etiqueta se mece un poco, colgada del lazo (solo transform); con «reducir movimiento» la tapa no existe: la caja ya está abierta */
.caja__etiqueta { transform-origin: 168px 90px; animation: mece 3.8s ease-in-out infinite alternate; }
@keyframes mece { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
/* Un brillo cruza la caja de vez en cuando: invita a abrirla sin decirlo */
.carta__brillo { position: absolute; inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--blanco) 26%, transparent) 50%, transparent 62%); transform: translateX(-120%); animation: cruza 5.5s var(--ease-in-out) infinite; }
.cartas li:nth-child(2) .carta__brillo { animation-delay: 0.9s; }
.cartas li:nth-child(3) .carta__brillo { animation-delay: 1.8s; }
@keyframes cruza { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.carta__tapa:focus-visible { outline-offset: 4px; }
/* v10: la caja guarda DOS servicios; la tapa es un botón (antes lo era la caja entera) para que dentro pueda haber un enlace */
.carta--caja { cursor: default; }
button.carta__tapa { width: 100%; height: 100%; padding: 0; border: 0; font: inherit; cursor: pointer; }
.carta--caja .carta__dentro { gap: 0; padding: 0.375rem 1.125rem; outline: none; }
.servicio { display: grid; justify-items: start; gap: 0.3125rem; padding-block: 0.875rem; }
.servicio + .servicio { border-top: 1px solid var(--linea); }
.servicio strong { display: inline-flex; align-items: center; gap: 0.5rem; }
.servicio strong .ico { flex: none; width: 1.25rem; height: 1.25rem; color: var(--azul); }
.servicio__pide { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-block: 0 -0.5rem; font-weight: 700; color: var(--azul-noche); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--azul); text-underline-offset: 0.3em; }
.servicio__pide .flecha { width: 1.125em; height: 1.125em; animation: none; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .servicio__pide:hover .flecha { transform: translateX(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .carta__tapa { display: grid; }
  .js .carta { transform: perspective(900px) rotateY(calc(var(--cx, 0) * 7deg)) rotateX(calc(var(--cy, 0) * -6deg)); transition: transform 0.2s ease-out; }
  .js .carta__dentro > * { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease-out, transform 0.45s var(--ease-out); }
  .js .carta__dentro .carta__ico { transform: scale(0.6) rotate(-30deg); }
  .js .carta.abierta .carta__tapa { transform: perspective(900px) rotateX(-108deg); opacity: 0; visibility: hidden; transition: transform 0.7s var(--ease-in-out), opacity 0.3s ease-out 0.3s, visibility 0s linear 0.7s; }   /* al cerrar, la tapa vuelve a ser visible al instante (así puede recibir el foco) */
  .js .carta.abierta .carta__dentro > * { opacity: 1; transform: none; transition-delay: calc(0.3s + var(--k, 0) * 70ms); }
  .carta__dentro > :nth-child(2) { --k: 1; } .carta__dentro > :nth-child(3) { --k: 2; } .carta__dentro > :nth-child(4) { --k: 3; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
}
/* v16 §6.3: la tarjeta de contacto es un mensaje a medio escribir: la pregunta en una burbuja, los tres puntos de «escribiendo…» y «Cuéntanoslo» en la barra de enviar.
   Mismo alto y ancho que antes (sigue llenando su celda). Sin turquesa (es solo para los botones del piloto): azul noche, blanco y azul claro. */
.carta--contacto { grid-template-rows: auto auto 1fr; align-content: stretch; gap: var(--esp-3); padding: var(--esp-5); background: var(--azul-noche); color: var(--blanco); text-decoration: none; font-weight: 600; perspective: none; transition: transform var(--dur-micro) var(--ease-out); }
.carta--contacto:active { transform: scale(0.97); }
.carta--contacto:focus-visible { outline-color: var(--azul-noche); outline-offset: 3px; }
.contacto__burbuja { position: relative; justify-self: start; max-width: 100%; padding: var(--esp-4) var(--esp-5); border-radius: var(--radio) var(--radio) var(--radio) var(--esp-1); background: var(--blanco); box-shadow: var(--sombra-media); }
.carta--contacto .contacto__burbuja strong { display: block; color: var(--azul-noche); font-size: var(--txt-4); line-height: 1.25; text-wrap: balance; }
.contacto__tecleo { justify-self: end; display: flex; align-items: center; gap: var(--esp-1); padding: var(--esp-4) var(--esp-4); border-radius: var(--radio) var(--radio) var(--esp-1) var(--radio); background: var(--azul-claro); }
.contacto__tecleo i { width: var(--esp-2); height: var(--esp-2); border-radius: 50%; background: var(--azul-noche); opacity: 0.45; }
.contacto__envia { align-self: end; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: var(--esp-9); padding: var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-5); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-clara); font-size: var(--txt-3); font-weight: 700; }
.contacto__boton { flex: none; display: grid; place-items: center; width: calc(var(--esp-9) - var(--esp-3)); height: calc(var(--esp-9) - var(--esp-3)); border-radius: 50%; background: var(--blanco); color: var(--azul-noche); transition: transform var(--dur) var(--ease-out); }
.contacto__boton .flecha { width: var(--txt-5); height: var(--txt-5); }
@media (prefers-reduced-motion: no-preference) {
  /* los puntos solo se mueven mientras se señala o se enfoca la tarjeta: nada de bucles a la vista todo el rato */
  .carta--contacto:focus-visible .contacto__tecleo i { animation: punto 1s var(--ease-in-out) infinite; }
  .carta--contacto:focus-visible .contacto__tecleo i:nth-child(2) { animation-delay: var(--dur-micro); }
  .carta--contacto:focus-visible .contacto__tecleo i:nth-child(3) { animation-delay: var(--dur); }
  .carta--contacto:focus-visible .contacto__boton { transform: translateX(var(--esp-1)); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .carta--contacto:hover .contacto__tecleo i { animation: punto 1s var(--ease-in-out) infinite; }
  .carta--contacto:hover .contacto__tecleo i:nth-child(2) { animation-delay: var(--dur-micro); }
  .carta--contacto:hover .contacto__tecleo i:nth-child(3) { animation-delay: var(--dur); }
  .carta--contacto:hover .contacto__boton { transform: translateX(var(--esp-1)); }
}
/* En pantalla estrecha, tarjetas más prietas para que la sección quepa en una pantalla */
@media (max-width: 879.98px) {
  .otros { padding-block: 2.5rem; }
  .carta { min-height: 9rem; }
  .carta--caja .carta__dentro { padding: 0.25rem 1rem; font-size: 0.875rem; line-height: 1.4; }
  .carta__dentro { padding: 0.75rem; font-size: 0.8125rem; line-height: 1.35; }
  .carta__dentro strong, .carta--contacto strong { font-size: 1rem; }
  .carta__ico { width: 1.75rem; height: 1.75rem; margin-block: 0.25rem 0; }
  .carta__ico .ico { width: 1em; height: 1em; }
  .carta__duda { width: 4.25rem; height: 4.25rem; }
}
@media (min-width: 880px) {
  .otros__cabeza { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: end; }
  /* v9: una caja (reseñas) y la tarjeta de contacto: el texto a la izquierda y las dos tarjetas a la derecha, en una sola fila */
  .otros__rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .otros__rejilla .otros__cabeza { grid-template-columns: none; gap: 1.25rem; margin-bottom: 0; align-items: start; }
  .cartas { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1rem; }
}

/* ============ 2. El problema ============ */
.insignia { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem; border-radius: 999px; background: var(--turquesa); color: var(--azul-noche); font-weight: 800; font-variant-numeric: tabular-nums; }
.insignia.pop { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { from { transform: scale(1.45); } }
/* Texto que se rellena al avanzar (solo con JavaScript) */
.js [data-rellena] .w { opacity: 0.22; transition: opacity 0.35s ease-out; }
.js [data-rellena] .w.on { opacity: 1; }

/* ============ Dos finales (v10): pantalla partida y una línea de corte que se mueve ============
   Sin JavaScript o con «reducir movimiento»: los dos finales fijos, lado a lado (apilados en estrecho); el de «Sin Sempri», sobre azul noche.
   Con JavaScript («corte--viva»): un solo móvil en el centro; la mitad oscura es una copia de la escena que se recorta con dos
   transform opuestos (el recorte se mueve hacia un lado y su contenido hacia el otro): no se anima clip-path ni width. */
.corte { position: relative; overflow: hidden; padding-block: calc(var(--cabecera) + 1.25rem) clamp(2.5rem, 5vw, 4rem); background: var(--azul-corte); color: var(--texto); }
.corte__rejilla { display: grid; justify-items: center; text-align: center; }
.corte__titulo { font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 1.1; text-wrap: balance; }
.corte__titulo > span:first-child { display: block; }
.corte__hora { margin-top: 0.75rem; font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); line-height: 1.4; }
.corte__escena { display: grid; width: 100%; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.corte__final { display: grid; justify-items: center; gap: 1.25rem; padding-block: 2rem; }
.corte:not(.corte--viva) .corte__final--sin { color: var(--blanco); background: var(--azul-noche); box-shadow: 0 0 0 100vmax var(--azul-noche); clip-path: inset(0 -100vmax); }
.corte:not(.corte--viva) .corte__final--sin .corte__nombre { color: var(--blanco); }
.corte:not(.corte--viva) .corte__final--sin .corte__lado p, .corte:not(.corte--viva) .corte__final--sin figcaption { color: var(--blanco-suave); }
.corte__lado { max-width: 17rem; }
.corte__nombre { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--azul-noche); }
.corte__lado p { margin-top: 0.5rem; font-size: clamp(1rem, 1.4vw, 1.1875rem); font-weight: 500; line-height: 1.4; text-wrap: balance; }
/* v13 §4.1: un sello bajo cada nombre, como estampado con un tampón y un poco torcido. «Sin»: hueco, de trazos, con la hora. «Con»: relleno turquesa
   con una marca que se dibuja cuando la línea llega a su final. Solo transform y el trazo de la marca. */
.corte__lado .corte__sello { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.625rem; padding: 0.3125rem 0.75rem; border-radius: 8px; font-size: clamp(0.8125rem, 1.1vw, 0.9375rem); font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; transform-origin: 50% 50%; }
.corte__sello--sin { border: 1.5px dashed currentColor; color: var(--azul-noche); transform: rotate(-2deg); }
.corte__sello--sin span { font-variant-numeric: tabular-nums; }
.corte__lado .corte__sello--con { background: var(--turquesa); color: var(--azul-noche); box-shadow: inset 0 0 0 1.5px var(--azul-noche); transform: rotate(2deg); }
.corte__visto { flex: none; width: 1.05em; height: 0.8em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.corte:not(.corte--viva) .corte__final--sin .corte__sello--sin, .corte__capa--sin .corte__lado .corte__sello--sin { color: var(--blanco); }
.corte__capa--sin .corte__lado .corte__sello--con { color: var(--azul-noche); }
.corte__lado .corte__sello + p { margin-top: 0.625rem; }
.corte__movil { display: flex; flex-direction: column; align-items: center; }
.tel--compara { --h: clamp(477px, calc(var(--vh) * 70), 620px); }
.corte figcaption { margin-top: 0.5rem; }
/* los dos chats de esta sección son fijos: sin scroll propio (así no son una parada de teclado) */
.corte .compara__chat { overflow: hidden; }
.corte:not(.corte--viva) .corte__final--con .corte__lado { order: -1; }
/* Sin Sempri: la pantalla se queda apagada */
.corte__movil[data-final="sin"] .tel__chat { filter: saturate(0.4); opacity: 0.8; }
@media (min-width: 880px) {
  .corte__titulo > span:first-child { display: inline; }
  .corte__escena { grid-template-columns: 1fr 1fr; }
  .corte__final { padding-block: 2.5rem 2rem; }
  .corte:not(.corte--viva) .corte__final--sin { box-shadow: none; clip-path: none; background: none; position: relative; isolation: isolate; }
  .corte:not(.corte--viva) .corte__final--sin::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 -50vw; background: var(--azul-noche); }
  .tel--compara { --h: clamp(520px, calc(var(--vh) * 64), 660px); }
}
/* --- Con JavaScript y con movimiento: la escena interactiva --- */
.corte--viva { padding-block: calc(var(--cabecera) - 4px) 0.5rem; }
/* v11 §2.1: la escena cabe en una pantalla. Titular, hora y móvil se miden con el alto de la ventana: el móvil ocupa lo que
   queda bajo el menú (nunca menos de 220 px de ancho) y la sección entera no pasa de una ventana a 1280×720 ni a 375×812. */
.corte--viva .corte__titulo { font-size: clamp(1.625rem, min(7vw, calc(var(--vh) * 3.2)), 2.25rem); }
.corte--viva .corte__hora { margin-top: 0.375rem; font-size: 1.0625rem; }
.corte--viva .corte__escena { margin-top: 0.75rem; }
.corte--viva figcaption { margin-top: 0.25rem; }
.corte--viva .tel--compara { --h: clamp(524px, calc(var(--vh) * 100 - 17.75rem), 620px); }   /* 524 px: lo mínimo para que el final «con» quepa entero sin cortar el aviso */
.corte--viva .corte__final { display: contents; }
.corte--viva .corte__escena { grid-template-columns: 1fr 1fr; grid-template-areas: "movil movil" "sin con"; column-gap: 1rem; row-gap: 0.375rem; align-items: start; }
.corte--viva .corte__movil { grid-area: movil; }
.corte--viva .corte__final--sin .corte__lado { grid-area: sin; justify-self: start; text-align: left; }
.corte--viva .corte__final--con .corte__lado { grid-area: con; justify-self: end; text-align: right; }
.corte--viva .corte__nombre { font-size: clamp(1.25rem, 3vw, 2.5rem); }
.corte--viva .corte__lado p { font-size: clamp(0.875rem, 1.4vw, 1.1875rem); }
.corte--viva .corte__lado .corte__sello { font-size: clamp(0.75rem, 1.1vw, 0.9375rem); margin-top: 0.375rem; transition: transform 0.3s var(--ease-out); }
.corte--viva .corte__lado .corte__sello + p { margin-top: 0.5rem; }
/* en estrecho no cabe todo en una pantalla: bajo el móvil quedan el nombre y el sello (que ya dice el final); la frase sigue para lectores de pantalla */
@media (max-width: 699.98px) {
  .corte--viva .corte__lado .corte__sello + p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .corte--viva .corte__lado .corte__sello { margin-top: 0.25rem; padding: 0.25rem 0.5rem; }
}
/* el sello del final que se está viendo se asienta (escala 1); el otro queda un punto más pequeño. Los dos se leen siempre. */
.corte--viva:not(.corte--en-sin) .corte__sello--sin { transform: rotate(-2deg) scale(0.94); }
.corte--viva:not(.corte--en-con) .corte__sello--con { transform: rotate(2deg) scale(0.94); }
.corte--viva .corte__visto path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.15s ease-out; }
.corte--viva.corte--en-con .corte__visto path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s var(--ease-out) 0.1s; }
/* La copia oscura: mismo contenido y misma maqueta que la capa clara, en blanco sobre azul noche. No recibe clics (pasan a los botones de debajo). */
.corte__capa { position: relative; z-index: 0; }
.corte__recorte { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.corte__capa--sin { position: absolute; inset: 0; padding-block: inherit; background: var(--azul-noche); color: var(--blanco); -webkit-user-select: none; user-select: none; }
.corte__recorte { padding-block: inherit; }
.corte__capa--sin .corte__titulo, .corte__capa--sin .corte__nombre { color: var(--blanco); }
.corte__capa--sin .corte__hora, .corte__capa--sin .corte__lado p, .corte__capa--sin figcaption { color: var(--blanco-suave); }
.corte__ver { padding: 0.25rem 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 0.2s ease-out, transform 0.16s var(--ease-out); }
.corte__ver[aria-pressed="true"] { text-decoration-color: currentColor; }
.corte__ver:active { transform: scale(0.97); }
/* en la copia no hay botones: el nombre lleva el mismo subrayado para que las dos capas casen */
.corte--viva .corte__capa--sin .corte__nombre { padding: 0.25rem 0; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
/* La línea de corte y su pomo (control deslizante: arrastrar, flechas, Inicio y Fin) */
.corte__tirador { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 0; outline: none; }
.corte__linea { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--azul); }
.corte__pomo { position: absolute; left: -26px; top: var(--pomo, 50%); display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border: 3px solid var(--azul); border-radius: 50%; background: var(--blanco); color: var(--azul-noche); cursor: ew-resize; touch-action: pan-y; box-shadow: 0 10px 22px -10px var(--noche-honda); transition: transform 0.16s var(--ease-out); }
.corte__pomo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.corte__pomo:active, .corte__tirador.agarrado .corte__pomo { transform: scale(0.94); }
.corte__tirador:focus-visible .corte__pomo { outline: 3px solid var(--azul-noche); outline-offset: 3px; box-shadow: 0 0 0 3px var(--blanco), 0 10px 22px -10px var(--noche-honda); }
/* El salto de un final a otro (botones y teclado) va con transición; el arrastre y el scroll, directos */
.corte--salta .corte__recorte, .corte--salta .corte__capa--sin, .corte--salta .corte__tirador { transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
/* v12 · La línea se mueve sola cada vez que se llega a la escena, con calma (v13: 2,8 s; en v12 eran 6 s), de «sin» a «con»: la misma transición en las tres piezas del recorte */
.corte--sola .corte__recorte, .corte--sola .corte__capa--sin, .corte--sola .corte__tirador { transition: transform 2.8s cubic-bezier(0.65, 0, 0.35, 1); }
/* v14 §4.1 · «Pausar movimiento»: la línea va y viene sin fin, así que hay un botón para pararla (lo crea el script; sin JavaScript o con
   «reducir movimiento» no hay ciclo ni botón). Fondo propio: se lee igual sobre el lado oscuro y sobre el claro (azul noche sobre blanco, 13,5:1).
   En estrecho es redondo, solo con el icono, entre los dos nombres; en ancho lleva el texto y va arriba a la derecha, que siempre es lado claro. */
.corte__pausa {
  position: absolute; z-index: 4; left: 50%; bottom: var(--esp-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-3);
  min-width: 44px; min-height: 44px; margin-left: var(--esp-4); padding: 0; border: 0; border-radius: 999px;
  background: var(--blanco); color: var(--azul-noche); font: inherit; font-size: var(--txt-1); font-weight: 700; line-height: 1.2; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--azul-noche), var(--sombra-media); transform: translateX(-50%); transition: transform var(--dur-micro) var(--ease-out);
}
.corte__pausa:active { transform: translateX(-50%) scale(0.97); }
.corte__pausa span { display: none; }
.corte__pausa-ico { flex: none; width: var(--esp-5); height: var(--esp-5); fill: currentColor; }
/* pulsado (en pausa): el botón se queda «hundido», en azul noche con letra blanca (13,5:1) y un aro blanco para que se vea también sobre el lado oscuro */
.corte__pausa[aria-pressed="true"] { background: var(--azul-noche); color: var(--blanco); box-shadow: inset 0 0 0 2px var(--blanco), var(--sombra-media); }
@media (min-width: 880px) {
  .corte__pausa { left: auto; right: var(--margen); top: calc(var(--cabecera) + var(--esp-8)); bottom: auto; margin-left: 0; padding-inline: var(--esp-5); transform: none; }
  .corte__pausa:active { transform: scale(0.97); }
  .corte__pausa span { display: inline; }
}
@media (min-width: 880px) {
  .corte--viva .corte__escena { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "sin movil con"; column-gap: clamp(3.5rem, 7vw, 6.5rem); align-items: center; }
  .corte--viva .corte__final--sin .corte__lado { justify-self: end; text-align: right; }
  .corte--viva .corte__final--con .corte__lado { justify-self: start; text-align: left; }
  .corte--viva { padding-bottom: 0.625rem; }
  .corte--viva .corte__titulo { font-size: clamp(2.25rem, min(4.5vw, calc(var(--vh) * 5.4)), 3.75rem); }
  .corte--viva .corte__hora { font-size: clamp(1.0625rem, calc(var(--vh) * 2.3), 1.3125rem); }
  .corte--viva .tel--compara { --h: clamp(520px, calc(var(--vh) * 100 - var(--cabecera) - 7rem - var(--vh) * 9.4), 660px); }
}
.compara__chat { justify-content: flex-start; overflow-y: auto; scrollbar-width: none; }
.compara__chat::-webkit-scrollbar { display: none; }
.compara__nada { align-self: center; margin-top: 0.375rem; padding: 0.25rem 0.75rem; border: 1px dashed var(--linea); border-radius: 999px; color: var(--texto-suave); font-size: 0.82em; }
.compara__aviso { align-self: center; margin-top: 0.25rem; font-size: 0.86em; }

/* Titulares que entran palabra a palabra y un trazo turquesa que se dibuja debajo */
.trazo { position: relative; display: inline-block; white-space: nowrap; }
.trazo__linea { position: absolute; left: -2%; bottom: -0.1em; width: 104%; height: 0.24em; overflow: visible; fill: none; stroke: var(--azul); stroke-width: 3.6; stroke-linecap: round; pointer-events: none; }
.trazo__linea path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.04em 0.18em; margin: -0.08em -0.04em -0.18em; }
.pw > span { display: inline-block; }

/* ============ 4. Pruébalo ============ */
.prueba { overflow: hidden; }
.prueba__rejilla { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center; }
.prueba__modos { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 22rem); margin-top: 2rem; padding: 5px; border-radius: 999px; background: var(--azul-noche); }
.prueba__modos button { position: relative; z-index: 1; min-height: 48px; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--blanco); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: color 0.25s ease-out; }
.prueba__modos button[aria-selected="true"] { color: var(--azul-noche); }
.prueba__modos button:focus-visible { outline-color: var(--blanco); outline-offset: -4px; border-radius: 999px; }
.prueba__pastilla { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--blanco); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); }
.prueba__modos[data-modo="dueno"] .prueba__pastilla { transform: translateX(100%); }
.prueba__aviso { margin-top: 1rem; font-size: 0.9375rem; color: var(--texto-suave); }
/* v10: aparece cuando el visitante ya ha probado una pregunta. Es un enlace de texto, no un segundo botón relleno. */
.prueba__pide { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; margin-top: 0.75rem; font-weight: 700; color: var(--azul-noche); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--turquesa); text-underline-offset: 0.3em; }
.prueba__pide[hidden] { display: none; }
.prueba__pide .flecha { width: 1.125em; height: 1.125em; animation: none; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .prueba__pide:hover .flecha { transform: translateX(4px); } }
@media (prefers-reduced-motion: no-preference) { .prueba__pide { animation: aparece 0.4s var(--ease-out); } }
.prueba__movil { display: flex; flex-direction: column; align-items: center; }
.tel--prueba { --h: clamp(477px, calc(var(--vh) * 62), 560px); }
.prueba__chat { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.prueba__chat::-webkit-scrollbar { display: none; }
/* ---------- v15 §6 · Pruébalo, modo «Como dueño»: otra interfaz para otro papel ----------
   Los mensajes y las preguntas no cambian. Cambian: el fondo (una hoja cuadriculada de agenda, color hueso, que tapa el degradado del modo cliente),
   el interruptor (se invierte: pista blanca con aro y pastilla azul noche), las etiquetas (círculo del icono en azul noche), el rótulo («· Como dueño»),
   la frase y la cabecera del móvil (llave en vez de «T» y «Solo tú ves esto»). Nada de turquesa ni del azul de las otras secciones.
   El cambio es un fundido de capas apiladas (solo opacity, --dur); no se anima ningún color de fondo ni cambia ninguna medida. */
.solo-dueno, .prueba[data-modo="dueno"] .solo-cliente { display: none; }
.prueba[data-modo="dueno"] .solo-dueno { display: inline; }
.kicker .solo-dueno { margin-left: calc(-1 * var(--esp-2)); }   /* el rótulo es una fila con hueco: se le quita para que quede a un espacio */
.prueba__papel {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease-out);
  background-color: var(--papel-dueno);
  background-image: linear-gradient(var(--noche-10) 1px, transparent 1px), linear-gradient(90deg, var(--noche-10) 1px, transparent 1px);
  background-size: var(--esp-7) var(--esp-7);
}
.prueba[data-modo="dueno"] .prueba__papel { opacity: 1; }
/* interruptor: dos capas encima de las de siempre (pista blanca con aro, pastilla azul noche) que solo se funden */
.prueba__modos::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blanco); box-shadow: inset 0 0 0 calc(var(--esp-1) / 2) var(--azul-noche); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.prueba__pastilla::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--azul-noche); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.prueba[data-modo="dueno"] .prueba__modos::before, .prueba[data-modo="dueno"] .prueba__pastilla::after { opacity: 1; }
.prueba[data-modo="dueno"] .prueba__modos button { color: var(--azul-noche); }
.prueba[data-modo="dueno"] .prueba__modos button[aria-selected="true"] { color: var(--blanco); }
.prueba[data-modo="dueno"] .prueba__modos button:focus-visible { outline-color: var(--azul-noche); }
.prueba[data-modo="dueno"] .prueba__modos button[aria-selected="true"]:focus-visible { outline-color: var(--blanco); }
/* etiquetas del dueño: el ojal deja ver el papel y el icono va en un círculo azul noche (al pulsarla se invierte, como siempre) */
.prueba__grupo[data-modo="dueno"] .respuesta::before { background: var(--papel-dueno); }
.prueba__grupo[data-modo="dueno"] .respuesta .ico { background: var(--azul-noche); color: var(--blanco); }
/* cabecera del móvil: la «T» del taller y la llave del dueño comparten sitio y se funden */
.tel--prueba .tel__avatar { position: relative; }
.tel__llave { position: absolute; inset: 0; width: 60%; height: 60%; margin: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.tel__letra { transition: opacity var(--dur) var(--ease-out); }
.prueba[data-modo="dueno"] .tel__llave { opacity: 1; }
.prueba[data-modo="dueno"] .tel__letra { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .prueba__papel, .prueba__modos::before, .prueba__pastilla::after, .tel__llave, .tel__letra { transition: none; } }
@media (hover: hover) and (pointer: fine) { .prueba__grupo[data-modo="dueno"] .respuesta:hover .ico { background: var(--azul-noche); } }
.par__lista { display: flex; flex-direction: column; gap: 7px; }
.par + .par { margin-top: 0.5rem; padding-top: 0.875rem; border-top: 1px dashed var(--linea); }
/* Con JavaScript, el chat tiene altura fija y se desplaza solo hacia el último mensaje */
.prueba--viva .prueba__chat { scroll-behavior: smooth; }
.prueba__chat .b--nueva { animation: aparece 0.35s var(--ease-out); }

/* ============ 5. Lo que el asistente nunca hace ============ */
.nunca { overflow: hidden; }
/* v10: «clip» recorta igual pero no crea un contenedor de scroll, así que la foto puede quedarse fija (sticky) y centrada en la ventana */
@supports (overflow: clip) { .nunca { overflow: clip; } }
.foco { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--turquesa) 15%, transparent), transparent); transform: translate3d(var(--fx, -999px), var(--fy, -999px), 0); }
.nunca__rejilla { position: relative; display: grid; gap: 2.5rem; }
.nunca__palabra { font-size: clamp(5rem, 26vw, 16rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; color: var(--blanco); }
.banda .nunca__titulo { margin-top: 1.5rem; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--blanco-suave); }
.reglas { border-bottom: 1px solid var(--linea-clara); }
.regla { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; padding-block: 1.5rem; border-top: 1px solid var(--linea-clara); color: var(--blanco); }

/* ============ 6. Cómo empezamos: tarjetas que se apilan (cada una se queda fija y la siguiente la tapa) ============ */
.empezamos__rejilla { display: grid; gap: 2.5rem; }
.pasos { display: grid; gap: 1.25rem; }
.paso {
  position: sticky; top: calc(var(--cabecera) + 0.75rem + var(--i, 0) * 2.5rem);
  display: grid; grid-template-columns: 1fr; gap: var(--esp-4); align-content: start; min-height: 12.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem); padding-top: var(--esp-3); border-radius: 0 0 var(--radio) var(--radio);
  --papel: var(--azul-claro); --giro: -0.5deg; color: var(--azul-noche); isolation: isolate;
  box-shadow: 0 -12px 30px -22px color-mix(in srgb, var(--azul-noche) 60%, transparent);
  transform: rotate(var(--giro)) scale(var(--s, 1)); transform-origin: 50% 0;
}
/* ---------- v14 §5 · Cada paso es un albarán de taller clavado en el pincho ----------
   (Cuarta forma propia, además del cartel, la nota y la etiqueta de llaves: la ordena el encargo v14. Usa las variables de color, sombra y duración.)
   El papel es ::before: borde de arriba troquelado (muescas con máscara; sin máscara, borde recto) y un color por paso, de claro a oscuro.
   El pincho es ::after: un vástago que sale por arriba y un agujero. Al apilarse (cada papel queda 2,5 rem más abajo que el anterior),
   el vástago de cada uno llega justo al agujero del de encima y se ve un solo pincho que los atraviesa todos.
   La franja de arriba, con «Orden n.º», sigue a la vista cuando el papel siguiente lo tapa. Cada papel, un pelín torcido (medio grado). */
.paso::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--papel); }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .paso::before { -webkit-mask: radial-gradient(circle at 50% 0, transparent var(--esp-2), #000 calc(var(--esp-2) + 0.5px)) 50% 0 / var(--esp-7) 100% repeat-x; mask: radial-gradient(circle at 50% 0, transparent var(--esp-2), #000 calc(var(--esp-2) + 0.5px)) 50% 0 / var(--esp-7) 100% repeat-x; }
}
.paso::after {
  /* v15 §9: el pincho ya no va por el centro (al apilarse, el vástago cruzaba el texto del papel de debajo): va por el margen derecho del papel, donde nunca hay letra */
  content: ""; position: absolute; right: calc(clamp(1.5rem, 4vw, 2.75rem) / 2); top: calc(-1 * var(--esp-7)); width: var(--esp-4); height: calc(var(--esp-7) + var(--esp-7)); margin-right: calc(var(--esp-4) / -2); pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(100% - var(--esp-2)), var(--noche-honda) 0, var(--noche-honda) var(--esp-2), transparent calc(var(--esp-2) + 0.5px)),
    linear-gradient(var(--metal-claro), var(--metal-claro)) 50% 0 / var(--esp-2) calc(100% - var(--esp-2)) no-repeat;
}
.paso__cab { display: grid; justify-items: start; gap: var(--esp-6); color: inherit; }
/* el número de orden, sellado: recuadro de trazo, un punto torcido, cifras de ancho fijo */
.paso__orden { display: inline-block; padding: var(--esp-1) var(--esp-3); border: 2px solid currentColor; border-radius: var(--radio); font-size: var(--txt-2); font-weight: 800; line-height: 1.25; letter-spacing: 0; font-variant-numeric: tabular-nums; transform: rotate(-1.5deg); }
.paso__frase { font-size: var(--titular-s); font-weight: 800; font-style: italic; line-height: 1.1; letter-spacing: -0.012em; }
/* el «11:00» del paso 3: la misma etiqueta del llavero de la foto, en pequeño (punto azul y hora) */
.paso__hora { position: absolute; right: clamp(1.5rem, 4vw, 2.75rem); top: var(--esp-3); display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-4) var(--esp-1) var(--esp-3); border-radius: var(--esp-2) var(--radio) var(--radio) var(--esp-2); background: var(--blanco); color: var(--azul-noche); font-size: var(--txt-2); font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; box-shadow: var(--sombra-media); transform: rotate(3deg); }
.paso__hora::before { content: ""; width: var(--esp-3); height: var(--esp-3); border-radius: 50%; background: var(--azul); }
.paso:nth-child(2) { --papel: var(--turquesa-claro); --giro: 0.4deg; }
/* v11 §3.1: el paso 4 ya no es una superficie turquesa. De claro a oscuro: blanco, turquesa claro, azul claro y azul noche, donde lo único turquesa es el botón del piloto. */
.paso:nth-child(3) { --papel: var(--azul-claro); --giro: -0.3deg; }
.paso:nth-child(4) { --papel: var(--azul-noche); --giro: 0.5deg; color: var(--blanco); }
/* v14: el texto de siempre, ahora debajo de la frase y de una línea de corte de trazos */
.paso p { padding-top: var(--esp-4); border-top: 2px dashed var(--linea); font-size: var(--txt-4); font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.paso:nth-child(4) p { border-top-color: var(--linea-clara); }
@media (min-width: 880px) { .paso p { font-size: var(--txt-5); } }
/* el papel cae sobre el pincho al entrar en pantalla, con un rebote (clase que pone el script; sin él o con «reducir movimiento», quieto y visible) */
@media (prefers-reduced-motion: no-preference) {
  .pasos--vivos .paso:not(.paso--cae) { opacity: 0; }
  .pasos--vivos .paso--cae { animation: paso-cae var(--dur-entrada) var(--ease-rebote) backwards; }
}
@keyframes paso-cae { from { opacity: 0; transform: translateY(calc(-1 * var(--esp-8))) rotate(calc(var(--giro) * 6)) scale(var(--s, 1)); } }
/* v9: el paso 4 (el del piloto) es la salida al botón. v11: sobre azul noche, el botón es el turquesa de siempre (6,5:1 con el fondo). */
.paso__pide { justify-self: start; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 52px; padding: 0.75rem 1.5rem; border-radius: var(--radio); background: var(--turquesa); color: var(--azul-noche); font-weight: 700; text-decoration: none; transition: transform 0.16s var(--ease-out), background-color 0.2s ease-out; }
.paso__pide:active { transform: scale(0.97); }
.paso__pide .flecha { width: 1.25em; height: 1.25em; animation: none; transition: transform 0.2s var(--ease-out); }
.paso__pide:focus-visible { outline-color: var(--blanco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .paso__pide:hover { background: color-mix(in srgb, var(--turquesa) 82%, var(--blanco)); } .paso__pide:hover .flecha { transform: translateX(4px); } }

/* ============ 7. Quiénes somos ============ */
.quienes__rejilla { position: relative; display: grid; gap: 2.5rem; }
.equipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2.5vw, 1.5rem); }
.persona { overflow: hidden; background: var(--blanco); border-radius: 22px; color: var(--texto); }
.persona__marco { display: block; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; background: var(--azul-claro); }
.persona__foto { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.01)) translate3d(var(--tx, 0px), var(--ty, 0px), 0); transition: transform 0.3s var(--ease-out); }
.persona h3, .banda--noche .persona h3 { padding: 1rem 1.125rem 0; font-size: 1.375rem; letter-spacing: 0; color: var(--azul-noche); }
.persona p { padding: 0.25rem 1.125rem 1.25rem; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--texto-suave); text-wrap: balance; }   /* v13: solo el campo de cada uno, sin dónde estudió */

/* ============ 8. Preguntas: mensajes de cliente y respuestas del asistente ============ */
.preguntas__rejilla { position: relative; display: grid; gap: 2rem; }
.faq { display: grid; gap: 1.125rem; padding: clamp(1rem, 3vw, 1.75rem); border-radius: var(--radio-l); box-shadow: var(--sombra-suave); background-color: var(--blanco); background-image: radial-gradient(color-mix(in srgb, var(--azul-noche) 10%, transparent) 1px, transparent 1.5px); background-size: 18px 18px; font-size: 1.0625rem; line-height: 1.45; }
.faq__item { display: flex; flex-direction: column; gap: 0.5rem; }
.faq__p { display: flex; font: inherit; }
.faq__boton { display: flex; align-items: center; gap: 0.875rem; min-height: 48px; max-width: 92%; padding: 0.75rem 1rem; border: 0; border-radius: 18px 18px 18px 4px; font: inherit; font-weight: 700; color: var(--azul-noche); text-align: left; cursor: pointer; transition: transform 0.16s var(--ease-out); }
.faq__boton:active { transform: scale(0.98); }
.faq__flecha { stroke-width: 2.6; transition: transform 0.25s var(--ease-out); }
.faq__boton[aria-expanded="true"] .faq__flecha { transform: rotate(180deg); }
.faq__r { display: flex; justify-content: flex-end; }
/* v12 §3.3 · «Contratar»: un solo estilo para esta acción, botón secundario con borde (el turquesa saturado es solo del piloto).
   Sobre claro, borde azul noche; sobre azul noche (llamada final), borde blanco. 48 px de alto, foco visible, se encoge al pulsar. */
.contrata { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.625rem 1.125rem; border-radius: var(--radio); background: var(--blanco); color: var(--azul-noche); font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: inset 0 0 0 2px var(--azul-noche); transition: background-color 0.2s ease-out, transform 0.16s var(--ease-out); }
.contrata .flecha { width: 1.15em; height: 1.15em; animation: none; transition: transform 0.2s var(--ease-out); }
.contrata:active { transform: scale(0.97); }
.contrata--noche { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px var(--blanco-suave); }
.contrata:focus-visible { border-radius: var(--radio); }
.contrata--noche:focus-visible { outline-color: var(--blanco); }
@media (hover: hover) and (pointer: fine) {
  .contrata:hover { background: var(--azul-claro); }
  .contrata--noche:hover { background: color-mix(in srgb, var(--blanco) 12%, transparent); }
  .contrata:hover .flecha { transform: translateX(4px); }
}
.faq__r { flex-direction: column; align-items: flex-end; gap: 0.625rem; }
.faq__r .b { max-width: 88%; padding: 0.75rem 1rem; border-radius: 18px 18px 4px 18px; animation: aparece 0.35s var(--ease-out); }

/* ============ 9. Llamada final: pantalla completa en azul noche, sin logo ============ */
.final { position: relative; overflow: hidden; display: grid; align-items: center; min-height: 100vh; background: var(--azul-noche); color: var(--blanco); }
@supports (height: 100svh) { .final { min-height: 100svh; } }
.final__contenido { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; padding-block: calc(var(--cabecera) + 1rem) 2.5rem; }
.final h2 { color: var(--blanco); font-size: clamp(2.5rem, 9vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; }
.final .iman { margin-top: clamp(1.75rem, 4vw, 3rem); }
.final__email { margin-top: 2rem; color: var(--blanco-suave); }   /* v11 §3.2: más aire entre botón, línea de confianza y correo */
.final__email { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }   /* v12: «o» + el botón secundario de WhatsApp */
.final__movil { display: flex; flex-direction: column; align-items: center; }
.final__movil figcaption { color: var(--blanco-suave); }
.tel--final { --h: clamp(477px, calc(var(--vh) * 70), 620px); }
.final__chat { justify-content: flex-start; overflow-y: auto; scrollbar-width: none; }
.final__chat::-webkit-scrollbar { display: none; }
/* v15 §8 · Fondo de pantalla con el símbolo de Sempri, solo en este móvil (es el chat con Sempri; los de taller no lo llevan).
   Tres capas de fondo, quietas: los puntos de siempre, un velo del color del chat y, debajo, el símbolo (el PNG del menú: ninguna descarga nueva).
   El velo lo deja al 26 %: es una marca de agua grande, en la mitad de abajo (donde no la tapa el primer mensaje), sin recolorear ni deformar. No se desplaza con los mensajes; las burbujas son opacas y van encima. */
.final__chat {
  /* v16 §6.2: fondo de pantalla de verdad. Blanco liso (sin puntos ni velo) y el símbolo en color, nítido, centrado, a la mitad del ancho de la pantalla.
     Una sola capa quieta (PNG de 384 px, para que se vea nítido en pantallas de doble densidad); no se desplaza con los mensajes. Solo en este móvil. */
  background-color: var(--blanco);
  background-image: url("img/Sempri_icono_transparente_384.png");
  background-size: 88% auto;   /* el dibujo ocupa algo más de la mitad del archivo: el símbolo queda en torno a la mitad del ancho de la pantalla */
  background-position: 50% 58%;
  background-repeat: no-repeat;
}
/* sobre blanco, el mensaje del visitante necesita fondo propio para leerse como burbuja; y el texto de ayuda baja al pie del chat para no pisar el símbolo */
.final__chat .b--cli { background: var(--azul-claro); }
.final__chat .tel__vacio { margin-block: auto 0; }
.final__chat .b--nueva, .final__chat .final__abrir { animation: aparece 0.35s var(--ease-out); }
.final__fila { align-self: center; flex: none; }
.final__chat .cap__marca { display: block; width: max-content; margin: 0 0 0.25rem; }
.final__abrir { align-self: center; flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 0.25rem; padding: 0.5rem 1rem; border-radius: 999px; background: var(--turquesa); color: var(--azul-noche); font-weight: 700; text-decoration: none; }
a.tel__barra { text-decoration: none; cursor: pointer; }
.final a.tel__barra:focus-visible, .final .final__abrir:focus-visible { outline-color: var(--azul-noche); outline-offset: -3px; border-radius: 0 0 38px 38px; }
.final .final__abrir:focus-visible { outline-offset: 3px; border-radius: 999px; }
a.tel__barra .tel__enviar::before { border-left-color: var(--azul-noche); }
a.tel__barra .tel__enviar { background: var(--turquesa); box-shadow: 0 0 0 0 color-mix(in srgb, var(--turquesa) 60%, transparent); animation: late 2.6s ease-out infinite; }
a.tel__barra:active .tel__enviar { transform: scale(0.92); }
.tel--final .tel__campo { color: var(--texto); font-weight: 500; }

/* Pie */
.pie { padding-block: 1.5rem; background: var(--noche-honda); font-size: 0.9375rem; color: var(--blanco-suave); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.pie nav { display: flex; gap: 1.25rem; }
.pie a { display: inline-block; padding-block: 0.625rem; color: var(--blanco); }
.pie :focus-visible { outline-color: var(--blanco); }
/* v15 §4 · El pie: placa con el símbolo y el nombre, chincheta de Madrid, tres enlaces iguales (el tercero sube al inicio), la nota de los ejemplos y el año.
   En ancho: marca a la izquierda y enlaces a la derecha; debajo, la nota y el año. En estrecho, todo apilado. */
.pie__marca { display: flex; align-items: center; gap: var(--esp-4); margin: 0; }
.pie__placa { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-4) var(--esp-1) var(--esp-2); border-radius: 999px; background: var(--blanco); color: var(--azul-noche); font-weight: 600; line-height: 1; }
.pie__placa img { width: var(--esp-6); height: var(--esp-6); }
/* la chincheta se apoya en la línea base de «Madrid» (la punta de la aguja es su borde de abajo) */
.pie__lugar { display: inline-flex; align-items: baseline; gap: var(--esp-2); }
.pie__chincheta { flex: none; width: var(--esp-4); height: var(--esp-5); overflow: visible; }
.pie__aguja { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.pie__cabeza { fill: var(--chincheta); }
.pie__brillo { fill: var(--blanco); opacity: 0.45; }
.pie a.pie__arriba { display: inline-flex; align-items: center; gap: var(--esp-2); }
.pie__arriba .flecha { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: none; transform: rotate(-90deg); transition: transform var(--dur-micro) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pie__arriba:hover .flecha { transform: translateY(calc(-1 * var(--esp-1))) rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .pie__arriba .flecha { transition: none; } }
/* v15 §3: la nota que sustituye a los rótulos «Ejemplo» de debajo de los móviles. Pequeña y legible (blanco suave sobre noche honda: 12,9:1). */
.pie__nota { flex: 1 1 100%; margin: 0; font-size: var(--txt-1); line-height: 1.5; }
.pie__copia { margin: 0; font-size: var(--txt-1); }

/* Páginas legales */
.legal { padding-block: calc(var(--cabecera) + clamp(2rem, 6vw, 5rem)) clamp(3rem, 8vw, 6rem); min-height: 70vh; background: var(--azul-claro); }
.legal h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.012em; }
.legal p { margin-top: 1.5rem; }
.legal__volver { display: inline-block; margin-top: 2rem; padding-block: 0.5rem; font-weight: 600; }

/* Pantallas medianas y grandes */
@media (min-width: 720px) {
  .equipo { max-width: 40rem; }
  .pie { padding-bottom: 1.5rem; }
}
@media (min-width: 880px) {
  .cabecera__enlaces { display: flex; gap: 1.75rem; }
  .nunca__rejilla { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
  .nunca__lado { position: sticky; top: calc(var(--cabecera) + 2rem); }
  .regla { min-height: clamp(8rem, 22vh, 12rem); }
  .empezamos__rejilla { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
  .empezamos__cabeza { position: sticky; top: calc(var(--cabecera) + 0.75rem); }
  .quienes__rejilla { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; }
  .preguntas__rejilla { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
  .final__contenido { grid-template-columns: minmax(0, 1.25fr) auto; gap: clamp(2rem, 6vw, 6rem); }
  .tel--final { --h: clamp(477px, calc(var(--vh) * 76), 760px); }
}

/* ======================================================================
   FASE E · Historia, imágenes integradas y llamada final
   Todas las fotos son decorativas (generadas con IA por Alex): van con velo azul noche, grano y,
   las de menor calidad, desenfocadas. El naranja solo existe dentro de las fotos.
   ====================================================================== */

/* Revelado por máscara: la imagen se descubre de abajo arriba al llegar */
@media (prefers-reduced-motion: no-preference) {
  .js .revela-mascara { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-in-out); }
  .js .revela-mascara.visto { clip-path: inset(0); }
}

/* ---- 2. El problema: una escena de tres frases ---- */
.historia { position: relative; background: var(--azul-noche); color: var(--blanco); }
.historia__fotos { display: none; }
.historia__contenido { display: grid; gap: 3rem; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding: var(--seccion) var(--margen); }
.historia__frases { display: grid; gap: 1.75rem; }
.frase { max-width: 13em; font-size: clamp(2.25rem, 6.6vw, 5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
/* v9 · «Siempre»: el guiño al nombre (Sempri viene de «siempre»). Una sola vez en la página. Sobre azul noche, turquesa (6,5:1) y en cursiva,
   como «siguen» en la portada. En la escena, las comillas se cierran sobre la palabra al aparecer la frase (solo transform y opacity);
   sin JavaScript o con «reducir movimiento» no hay escena y se ve quieta. */
.siempre { white-space: nowrap; color: var(--turquesa); }
.siempre__p { font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
.siempre__c { display: inline-block; font-weight: 600; }
.historia--escena .siempre__c { opacity: 0; transition: opacity 0.16s ease-out, transform 0.16s ease-out; }
.historia--escena .siempre__c--abre { transform: translateX(-0.5em); }
.historia--escena .siempre__c--cierra { transform: translateX(0.5em); }
.historia--escena .frase.activa .siempre__c { opacity: 1; transform: none; transition: opacity 0.3s ease-out 0.6s, transform 0.6s var(--ease-out) 0.6s; }
/* Con JavaScript: pantalla anclada. Abre con el mostrador de noche (muy desenfocado) y pasa a la mano y el móvil. */
.historia--escena .historia__pista { position: relative; height: 330vh; }   /* v9: tres frases en vez de cuatro, y menos scroll (antes 480vh) */
.historia--escena .historia__escena { position: sticky; top: 0; height: 100vh; overflow: hidden; }
@supports (height: 100svh) { .historia--escena .historia__escena { height: 100svh; } }
.historia--escena .historia__fotos { display: block; position: absolute; inset: 0; }
.historia__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.historia__foto--mostrador { filter: blur(16px); transform: scale(1.18); }
.historia__foto--mano { opacity: 0; object-position: 64% 70%; transform-origin: 62% 80%; }
.historia__velo { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--azul-noche) 88%, transparent) 0%, color-mix(in srgb, var(--azul-noche) 70%, transparent) 60%, color-mix(in srgb, var(--noche-honda) 78%, transparent) 100%); }
.historia--escena .historia__contenido { position: relative; height: 100%; grid-template-rows: 1fr auto; gap: 1.5rem; padding: calc(var(--cabecera) + 1.5rem) var(--margen) 2rem; }
.historia--escena .historia__frases { align-content: center; gap: 0; }
/* Cruce limpio: la frase que sale desaparece en 0,16 s y la que entra espera 0,24 s. Nunca se leen dos a la vez. */
.historia--escena .frase { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s linear 0.16s; }
.historia--escena .frase.activa { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease-out) 0.24s, transform 0.6s var(--ease-out) 0.24s, visibility 0s linear 0.24s; }
@media (min-width: 880px) {
  .historia--escena .historia__contenido { grid-template-rows: none; grid-template-columns: minmax(0, 1.5fr) auto; align-items: center; gap: 3rem; }
  .historia__velo { background: linear-gradient(90deg, color-mix(in srgb, var(--azul-noche) 92%, transparent) 0%, color-mix(in srgb, var(--azul-noche) 70%, transparent) 50%, color-mix(in srgb, var(--azul-noche) 40%, transparent) 100%); }
}


/* ---- 4. Pruébalo: detrás del móvil nítido, una foto borrosa (profundidad de campo) ---- */
.prueba__fondo { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; overflow: hidden; opacity: 0.5; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.prueba__fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(12px); }
.prueba figcaption { padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--blanco); }
@media (min-width: 880px) {
  .prueba__fondo { left: auto; top: 0; height: auto; width: min(58%, 760px); opacity: 0.6; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
}

/* ---- 5. Nunca: la foto en duotono (azul noche y turquesa) con la regla encima ---- */
.nunca__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--margen)); perspective: 900px; }
.duotono { position: absolute; inset: -4%; background: var(--azul-noche); }
/* El duotono (azul noche y turquesa) lo pone el filtro SVG «duotono» del HTML; si un navegador no lo aplica, se ve la foto tal cual */
.duotono img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.nunca__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--azul-noche) 0%, transparent 34%); }
.nunca--foto .nunca__lado { order: -2; }
.nunca--foto .nunca__foto { order: -1; }
.regla { transition: color 0.3s ease-out; }
@media (min-width: 880px) {
  .nunca--foto .nunca__rejilla { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "lado foto" "reglas foto"; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 2.5rem; }
  .nunca--foto .nunca__lado { grid-area: lado; position: static; }
  .nunca--foto .reglas { grid-area: reglas; }
  .nunca--foto .nunca__palabra { font-size: clamp(5rem, 13vw, 12rem); }
  .nunca--foto .nunca__foto { grid-area: foto; position: sticky; top: var(--cabecera); align-self: start; aspect-ratio: auto; height: calc(100vh - var(--cabecera)); margin-inline: 0 calc(-1 * max(var(--margen), (100vw - var(--ancho)) / 2)); }
  .nunca__foto::after { background: linear-gradient(0deg, var(--azul-noche) 0%, color-mix(in srgb, var(--azul-noche) 86%, transparent) 26%, transparent 56%), linear-gradient(90deg, var(--azul-noche) 0%, transparent 12%); }
  .js .nunca--foto .regla.actual { color: var(--turquesa); }
}

/* ---- 6. Cómo empezamos: el tablero de llaves, grande y a sangre; el título va encima y la etiqueta cambia con cada paso ---- */
.cartel-llaves { position: relative; display: grid; align-content: end; min-height: min(70vh, 32rem); margin-inline: calc(-1 * var(--margen)); padding: 1.5rem var(--margen); overflow: hidden; background: var(--azul-noche); color: var(--blanco); }
.llaves__marco { position: absolute; inset: 0; overflow: hidden; }
.llaves__marco img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(1.22); }
.llaves__velo { position: absolute; inset: 0; background: linear-gradient(0deg, var(--azul-noche) 0%, color-mix(in srgb, var(--azul-noche) 84%, transparent) 30%, color-mix(in srgb, var(--azul-noche) 18%, transparent) 62%, color-mix(in srgb, var(--azul-noche) 40%, transparent) 100%); }
.llaves__titulo { position: relative; }
.cartel-llaves .kicker, .cartel-llaves .titulo { color: var(--blanco); }
.cartel-llaves .titulo--enorme { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
.llaves__cita {
  position: absolute; right: var(--margen); top: 20%; min-width: 4.5em; padding: 0.5rem 1rem 0.5rem 1.625rem; border-radius: 6px 14px 14px 6px;
  background: var(--blanco); color: var(--azul-noche); font-size: clamp(1.5rem, 3.2vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 18px 30px -16px #000; transform: rotate(-5deg); transform-origin: 0 50%;
}
.llaves__cita::before { content: ""; position: absolute; left: 0.5rem; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--azul); }
.llaves__texto { display: inline-block; transition: opacity 0.2s ease-out, transform 0.25s var(--ease-out); }
.llaves__cita.cambia .llaves__texto { opacity: 0; transform: translateY(8px); }
@media (min-width: 880px) {
  .cartel-llaves {
    min-height: 0; height: calc(100vh - var(--cabecera) - 1.5rem); max-height: 46rem; border-radius: 0 28px 28px 0;
    margin-inline: calc(-1 * max(var(--margen), (100vw - var(--ancho)) / 2)) 0; padding: 2rem 2rem 2rem max(var(--margen), (100vw - var(--ancho)) / 2);
  }
  .llaves__cita { right: 1.5rem; }
}

/* ---- 7. Quiénes somos: el garaje al atardecer de fondo, con velo y grano ---- */
.quienes--foto { overflow: hidden; }
.quienes__fondo { position: absolute; inset: 0; overflow: hidden; }
.quienes__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.22); }
.quienes__velo { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--azul-noche) 94%, transparent) 0%, color-mix(in srgb, var(--azul-noche) 78%, transparent) 55%, color-mix(in srgb, var(--azul-noche) 62%, transparent) 100%); }

/* ---- 9. Llamada final: la persiana ---- */
.final__fondo { position: absolute; inset: 0; overflow: hidden; }
.final__fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.22); }
.final__velo { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--azul-noche) 72%, transparent), color-mix(in srgb, var(--noche-honda) 82%, transparent)); }
.final__persiana { display: none; }
/* Solo con JavaScript y sin «reducir movimiento» existe la persiana; si no, ya está levantada. */
.final--persiana .final__persiana {
  display: block; position: absolute; inset: 0; z-index: 3; transform: translateY(-9%);
  background: repeating-linear-gradient(176deg, var(--noche-honda) 0 34px, var(--azul-noche) 34px 40px);
  transition: transform 1.6s var(--ease-in-out), visibility 0s linear 1.6s; will-change: transform;
  box-shadow: 0 30px 60px -10px #000;
}
.final--persiana.final--abierta .final__persiana { transform: translateY(-106%); visibility: hidden; }
.final--directa .final__persiana { transition: none; }   /* v14 §6: llegando desde «Te esperamos», la persiana ya está subida */
.final__lamas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final__sombra { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--azul-noche) 70%, transparent) 0%, color-mix(in srgb, var(--azul-noche) 52%, transparent) 70%, color-mix(in srgb, var(--noche-honda) 90%, transparent) 100%); border-bottom: 10px solid var(--noche-honda); }
.final__brillo { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; }
.final__brillo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--turquesa) 20%, transparent) 50%, transparent); transform: translateX(-120%) skewX(-16deg); animation: barre 9s ease-in-out 1s infinite; }
.cartel {
  position: absolute; left: 50%; top: 40%; margin: 0; padding: 0.75rem 1.75rem; border-radius: 10px;
  background: var(--blanco); color: var(--azul-noche);
  font-size: clamp(2.25rem, 9vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 24px 40px -18px #000;
}
.cartel::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 46%; height: 2.25rem; margin-left: -23%; border: 3px solid var(--blanco-suave); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.final__subir {
  position: absolute; left: 50%; top: calc(40% + clamp(4.5rem, 12vw, 7.5rem)); min-height: 48px; padding: 0.75rem 1.5rem;
  border: 2px solid var(--blanco); border-radius: 999px; background: color-mix(in srgb, var(--azul-noche) 70%, transparent); color: var(--blanco);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; white-space: nowrap; transform: translateX(-50%);
  transition: background-color 0.2s ease-out;
}
.final__subir:active { background: var(--azul-noche); }
.final__subir:focus-visible { outline-color: var(--turquesa); }
/* Por la rendija de abajo se ven las notificaciones acumulándose detrás de la persiana */
.final__rendija { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.5rem; padding: 0.75rem var(--margen) 0; overflow: hidden; }
.final__rendija .noti { flex: none; font-size: 0.8125rem; animation: asoma 6s var(--ease-out) infinite backwards; }
.final__rendija .noti:nth-child(2) { animation-delay: 1.4s; }
.final__rendija .noti:nth-child(3) { animation-delay: 2.8s; }
@keyframes asoma { 0% { opacity: 0; transform: translateY(14px) scale(0.92); } 8%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .historia__foto--mano { opacity: 1; }
  .final__fondo img, .quienes__fondo img, .llaves__marco img { transform: scale(1.05); }
}

/* ---- Franja compacta de avisos (urgencias). v9: va detrás de «Pruébalo» ---- */
.urgencia { padding-block: 1.25rem 1.5rem; background: var(--azul-noche); color: var(--blanco); }
.urgencia__fila { display: grid; gap: 0.875rem; }
.urgencia__fila li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.4; color: var(--blanco-suave); }
.urgencia__fila .ico { width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--linea-clara); color: var(--blanco); }
.urgencia__fila strong { display: block; color: var(--blanco); }
@media (min-width: 880px) { .urgencia__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* ---- v5 · El problema: pantalla de bloqueo con los avisos que caen ---- */
.historia__movil { display: flex; flex-direction: column; align-items: center; }
.historia__movil figcaption { color: var(--blanco-suave); }
.tel--bloqueo { --h: clamp(380px, calc(var(--vh) * 100 - 330px), 560px); }
.bloqueo { background: linear-gradient(170deg, color-mix(in srgb, var(--azul) 45%, var(--azul-noche)), var(--noche-honda) 72%); color: var(--blanco); }
.bloqueo .tel__estado { background: none; color: var(--blanco); }
.bloqueo__hora { margin-top: 4%; text-align: center; font-size: calc(var(--alto) * 0.115); font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bloqueo__cab { display: flex; align-items: center; justify-content: space-between; margin: 7% 8% 3%; font-weight: 700; }
/* v13 §4.2: la placa clara con el logo (el logo nunca va suelto sobre oscuro). Abajo, centrada, sobre el indicador de inicio. */
.bloqueo .bloqueo__placa { position: absolute; z-index: 1; left: 50%; bottom: 6.5%; display: flex; align-items: center; gap: 0.15em; padding: 0.3em 0.8em 0.3em 0.45em; border-radius: 999px; background: var(--blanco); color: var(--azul-noche); font-size: calc(var(--alto) * 0.03); font-weight: 600; line-height: 1; transform: translateX(-50%); box-shadow: 0 6px 16px -8px #000; }
.bloqueo__placa img { width: 1.9em; height: 1.9em; }
.bloqueo .insignia { min-width: 1.9em; height: 1.9em; padding-inline: 0.4em; font-size: 1em; }
.bloqueo__lista { display: flex; flex-direction: column; gap: 6px; padding: 0 6%; }
.aviso { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5em; align-items: start; padding: 0.6em 0.65em; border-radius: 14px; background: color-mix(in srgb, var(--blanco) 94%, transparent); color: var(--texto); box-shadow: 0 8px 18px -12px #000; }
.aviso__app { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.5em; background: var(--azul-noche); color: var(--blanco); }
.aviso__app .ico { width: 1.1em; height: 1.1em; }
.aviso__txt { display: grid; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.aviso__txt strong { font-size: 0.92em; color: var(--azul-noche); }
.aviso__txt em { display: none; align-items: center; gap: 0.3em; margin-top: 0.15em; font-style: normal; font-weight: 700; font-size: 0.85em; color: var(--azul-noche); }
.aviso__txt em .tics { stroke: var(--azul-noche); }
.aviso__hora { font-size: 0.8em; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.bloqueo.contestada .aviso { background: var(--turquesa-claro); }
.bloqueo.contestada .aviso__app { background: var(--turquesa); color: var(--azul-noche); }
.bloqueo.contestada .aviso__txt em { display: flex; }
.historia--escena .aviso { opacity: 0; transform: translateY(-34px) scale(0.94); transition: opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.4s ease-out; }
.historia--escena .aviso.visto { opacity: 1; transform: none; }
.historia--escena .bloqueo.contestada .aviso:nth-child(2), .historia--escena .bloqueo.contestada .aviso:nth-child(2) .aviso__app { transition-delay: 0.3s; }
.historia--escena .bloqueo.contestada .aviso:nth-child(3), .historia--escena .bloqueo.contestada .aviso:nth-child(3) .aviso__app { transition-delay: 0.6s; }
.aviso__app { transition: background-color 0.4s ease-out, color 0.4s ease-out; }
@media (max-width: 879.98px) {
  .historia--escena .historia__contenido { padding-bottom: 1rem; gap: 0.75rem; }
  .historia--escena .frase { font-size: clamp(1.75rem, 7.4vw, 2.5rem); }
  .historia__movil figcaption { margin-top: 0.375rem; }
}
@media (max-width: 879.98px) and (max-height: 700px) {
  .historia--escena .frase { font-size: 1.625rem; }
}
@media (min-width: 880px) {
  .tel--bloqueo { --h: clamp(477px, calc(var(--vh) * 76), 720px); }
  .historia--escena .historia__movil { align-self: center; }
}

/* Aparecer al llegar (solo con JavaScript y si no se pide menos movimiento):
   sin JavaScript, o con «reducir movimiento», todo el contenido se ve entero y quieto. */
@media (prefers-reduced-motion: no-preference) {
  .js .revela { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--n, 0) * 90ms); }
  .js .revela.visto { opacity: 1; transform: none; filter: none; }
  .js [data-palabras] .pw > span { transform: translateY(112%); transition: transform 0.85s var(--ease-out); transition-delay: calc(var(--w, 0) * 80ms); }
  .js [data-palabras].visto .pw > span { transform: none; }
  .js [data-palabras] .trazo__linea path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease-in-out) 0.75s; }
  .js [data-palabras].visto .trazo__linea path { stroke-dashoffset: 0; }
}

/* Sin animaciones si el usuario no las quiere: todo sale entero y quieto, en su estado final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lamas { display: none; }
  .hero__camara { transform: none; }
  .cinta__pista { width: auto; }
  .cinta__lista { flex-wrap: wrap; justify-content: center; padding: 0 var(--margen); }
  .cinta__lista[aria-hidden] { display: none; }
  .cap { display: grid; gap: 0.5rem; padding: 0; }
  .cinta { padding-top: 1.5rem; }
  .cap__burbuja { position: static; order: 2; opacity: 1; transform: none; }
  .paso { position: relative; transform: none; }   /* v14: «relative» (no «static») para que el papel y el pincho, que son absolutos, sigan dentro de su albarán */
  .js [data-rellena] .w { opacity: 1; }
}

/* ======================================================================
   v6-2 · Escenas
   ====================================================================== */

/* ---- El problema: fondo de pantalla de bloqueo con profundidad (manchas de luz que derivan) y reflejo ---- */
.bloqueo { position: relative; background: var(--noche-honda); }
.bloqueo > * { position: relative; z-index: 1; }
.bloqueo__fondo { position: absolute !important; z-index: 0 !important; inset: -12%; background:
    radial-gradient(48% 36% at 22% 18%, color-mix(in srgb, var(--azul) 85%, transparent), transparent 70%),
    radial-gradient(52% 40% at 84% 44%, color-mix(in srgb, var(--turquesa) 55%, transparent), transparent 72%),
    radial-gradient(70% 50% at 40% 96%, color-mix(in srgb, var(--azul) 60%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--azul-noche) 80%, var(--azul)), var(--noche-honda) 70%);
  animation: deriva 22s ease-in-out infinite alternate; }
.bloqueo__fondo::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); opacity: 0.1; mix-blend-mode: overlay; }
.bloqueo__hora { text-shadow: 0 2px 18px color-mix(in srgb, var(--noche-honda) 60%, transparent); font-weight: 600; }
.aviso { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: color-mix(in srgb, var(--blanco) 90%, transparent); }
.historia__pie { transition: opacity 0.2s ease-out; }
.historia__pie.cambia { opacity: 0; }


/* ---- Pruébalo: las preguntas son etiquetas de llavero que vuelan al móvil; todo cabe en una pantalla ---- */
.prueba { padding-block: clamp(3rem, 6vw, 5rem); }
.prueba__rejilla { grid-template-areas: "texto" "movil" "panel"; gap: 1.5rem; justify-items: start; }
.prueba__texto { grid-area: texto; }
.prueba__movil { grid-area: movil; justify-self: center; }
.prueba__panel { grid-area: panel; width: 100%; }
.prueba .texto-grande { margin-top: 0.75rem; }
.prueba__modos { width: min(100%, 24rem); margin-top: 1.25rem; padding: 6px; box-shadow: 0 16px 30px -20px var(--azul-noche); }
.prueba__modos button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; font-size: 1.0625rem; }
/* Arreglo: «Como cliente» se partía en dos renglones a 390 px. Una sola línea y, solo en pantallas estrechas, un punto menos de relleno y de letra para que quepa. */
.prueba__modos button { white-space: nowrap; }
@media (max-width: 439.98px) { .prueba__modos button { padding-inline: var(--esp-3); gap: var(--esp-2); font-size: var(--txt-3); } }
.prueba__modos button .ico { transition: transform 0.4s var(--ease-out); }
.prueba__modos button[aria-selected="true"] .ico { transform: rotate(-12deg) scale(1.15); }
.prueba__pastilla { top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1); }
.prueba__grupo { display: grid; justify-items: start; gap: 0.75rem; }
/* La etiqueta: extremo redondo, ojal con su anilla y una ligera inclinación, como las del tablero de llaves */
.respuesta {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem; min-height: 56px; max-width: 100%;
  padding: 0.625rem 1.25rem 0.625rem 2.75rem; border: 0; border-radius: 28px 14px 14px 28px;
  background: var(--blanco); color: var(--azul-noche); font: inherit; font-size: clamp(1rem, 1.4vw, 1.1875rem); font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer;
  box-shadow: 0 12px 18px -10px color-mix(in srgb, var(--azul-noche) 55%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--azul-noche) 14%, transparent);
  transform: rotate(var(--giro, -1.5deg)); transform-origin: 14px 50%;
  transition: transform 0.25s var(--ease-out), background-color 0.2s ease-out;
  animation: cuelga 0.7s var(--ease-out) backwards;
}
.respuesta::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 0 2.5px var(--azul-noche); }
.respuesta .ico { width: 2.25rem; height: 2.25rem; padding: 0.4375rem; border-radius: 50%; background: var(--turquesa-claro); transition: background-color 0.2s ease-out; }
.respuesta:nth-child(2) { --giro: 1.2deg; animation-delay: 0.08s; }
.respuesta:nth-child(3) { --giro: -0.6deg; animation-delay: 0.16s; }
@keyframes cuelga { from { opacity: 0; transform: translateX(-18px) rotate(-9deg); } }
.respuesta:active { transform: rotate(0deg) scale(0.97); }
.respuesta:focus-visible { outline: 3px solid var(--azul-noche); outline-offset: 3px; border-radius: 28px 14px 14px 28px; transform: rotate(0deg); }
.respuesta[aria-pressed="true"] { background: var(--azul-noche); color: var(--blanco); }
.respuesta[aria-pressed="true"] .ico { background: var(--blanco); color: var(--azul-noche); }
@media (hover: hover) and (pointer: fine) {
  .respuesta:hover { transform: rotate(0deg) translateX(8px); }
  .respuesta:hover .ico { background: var(--azul-claro); }
  .respuesta[aria-pressed="true"]:hover .ico { background: var(--blanco); }
}
.respuesta--vuela { position: fixed; z-index: 30; margin: 0; pointer-events: none; animation: none; transform-origin: 0 50%; }
@media (min-width: 880px) {
  .prueba__rejilla { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto movil" "panel movil"; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 8vw, 8rem); row-gap: 1.5rem; align-items: start; }
  .prueba__movil { align-self: center; }
  .tel--prueba { --h: clamp(477px, calc(var(--vh) * 76), 760px); }
  .prueba .titulo--enorme { font-size: clamp(3rem, 6.4vw, 5.5rem); }
}
@media (min-width: 880px) and (max-height: 760px) { .prueba .titulo--enorme { font-size: clamp(2.75rem, 5vw, 4rem); } .respuesta { min-height: 50px; } .prueba__grupo { gap: 0.5rem; } }

/* ---- Nunca: cada regla se sella (el símbolo de prohibido se dibuja) y su texto se descubre con una máscara ---- */
.regla { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js .regla.revela { opacity: 1; transform: none; }
  .js .regla .regla__clave { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s var(--ease-in-out) 0.2s; }
  .js .regla.visto .regla__clave { clip-path: inset(-10% -4% -10% 0); }
  .js .regla .regla__txt { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease-out 0.55s, transform 0.6s var(--ease-out) 0.55s; }
  .js .regla.visto .regla__txt { opacity: 1; transform: none; }
  /* Al pasar por una regla, la foto reacciona: se acerca un poco y recibe un golpe de luz */
  .nunca__foto .duotono img { transition: transform 0.9s var(--ease-out); }
  .nunca__foto.reacciona .duotono img { transform: scale(1.06); }
  .nunca__foto::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 40%, color-mix(in srgb, var(--turquesa) 40%, transparent), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.7s ease-out; }
  .nunca__foto.reacciona::before { opacity: 1; transition-duration: 0.15s; }
}
@media (min-width: 880px) {
  .nunca--foto .nunca__foto { height: calc(var(--vh) * 100 - var(--cabecera)); }
}

/* ======================================================================
   v6-3 · Cierre y pulido
   ====================================================================== */

/* ---- Quiénes somos: una línea de cercanía ---- */
.quienes__cerca { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--linea-clara); background: color-mix(in srgb, var(--azul-noche) 60%, transparent); color: var(--blanco); font-weight: 600; }

/* ---- Preguntas: fondo de marca; la columna izquierda (título, frase y botón) va centrada respecto a la lista (v7) ---- */
.preguntas { padding-block: clamp(3.5rem, 7vw, 6rem); overflow: clip; background: linear-gradient(160deg, var(--turquesa-claro) 0%, var(--azul-claro) 62%, color-mix(in srgb, var(--azul) 14%, var(--azul-claro)) 100%); }
.preguntas .titulo--enorme { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.preguntas .texto-grande { margin-top: 0.875rem; }
.boton--contorno { margin-top: 1.5rem; background: var(--blanco); color: var(--azul-noche); box-shadow: inset 0 0 0 2px var(--azul-noche); }
.boton--contorno .flecha { animation: none; }
@media (hover: hover) and (pointer: fine) { .boton--contorno:hover { background: var(--azul-noche); color: var(--blanco); } .boton--contorno:hover .flecha { transform: translateX(4px); } }
.boton--contorno .flecha { transition: transform 0.2s var(--ease-out); }

/* ---- Llamada final: «Desliza para enviar», como desbloquear un móvil ---- */
.final__movil { --pomo: 56px; }
.desliza { position: relative; width: min(100%, 20rem); height: calc(var(--pomo) + 8px); margin-top: 1rem; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--blanco) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--linea-clara); overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.desliza__texto { position: absolute; inset: 0; display: grid; place-items: center; padding-left: var(--pomo); color: var(--blanco); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; pointer-events: none; opacity: calc(1 - var(--avance, 0) * 1.6);
  background: linear-gradient(100deg, var(--blanco) 35%, var(--turquesa) 50%, var(--blanco) 65%) 0 0 / 250% 100%; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .desliza__texto { -webkit-background-clip: text; background-clip: text; color: transparent; animation: destello 2.8s linear infinite; }
  }
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .desliza__texto { background: none; } }
@media (prefers-reduced-motion: reduce) { .desliza__texto { background: none; } }
@keyframes destello { from { background-position: 120% 0; } to { background-position: -30% 0; } }
.desliza__pomo { position: relative; z-index: 1; display: grid; place-items: center; width: var(--pomo); height: var(--pomo); padding: 0; border: 0; border-radius: 50%; background: var(--turquesa); color: var(--azul-noche); cursor: grab; touch-action: none; box-shadow: 0 6px 14px -6px #000; transform: translate3d(var(--x, 0px), 0, 0); }
.desliza__pomo .flecha { width: 1.5rem; height: 1.5rem; animation: none; }
.desliza__pomo:active { cursor: grabbing; }
.desliza:not(.arrastra) .desliza__pomo { transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
.desliza__pomo:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; border-radius: 50%; }
.desliza.enviado { box-shadow: inset 0 0 0 1.5px var(--turquesa); }
.desliza.enviado .desliza__texto { opacity: 1; padding-left: 0; padding-right: var(--pomo); background: none; color: var(--blanco); animation: none; -webkit-background-clip: border-box; background-clip: border-box; }
.desliza.enviado .desliza__pomo { cursor: default; }
/* En la llamada final el móvil y la barra caben juntos en la ventana */
.tel--final { --h: clamp(477px, calc(var(--vh) * 62), 560px); }
/* v8: en ancho, la llamada final y el pie forman juntos la última pantalla. La sección mide el alto de la ventana MENOS el pie
   (--pie), así que al llegar al final del scroll su borde de arriba coincide con el de la ventana y nada queda bajo el menú.
   El móvil se escala con el alto que queda: ventana − pie − hueco del menú (--final-arriba) − barra de deslizar y rótulo (--final-resto). */
@media (min-width: 880px) {
  :root { --pie: calc(var(--esp-10) + var(--esp-5)); }   /* v15: el pie tiene dos renglones (antes 44px) */
  .final { --final-arriba: 82px; --final-resto: 116px; min-height: calc(100vh - var(--pie)); }
  @supports (height: 100svh) { .final { min-height: calc(100svh - var(--pie)); } }
  .final__contenido { padding-block: var(--final-arriba) 0; }
  .tel--final { --h: clamp(520px, calc(var(--vh) * 100 - var(--pie) - var(--final-arriba) - var(--final-resto)), 760px); }
  .final__movil figcaption { margin-top: 0.375rem; }
  .final h2 { font-size: clamp(2.5rem, min(9vw, 13.5vh), 6rem); }
  .final .iman { margin-top: clamp(1.25rem, 4vh, 3rem); }
  .pie { min-height: var(--pie); padding-block: 0; display: grid; align-items: center; }
  .pie__fila { row-gap: 0; }
  .pie nav { margin-left: auto; }
  .pie__nota { flex-basis: 60%; padding-bottom: var(--esp-3); }
  .pie__copia { padding-bottom: var(--esp-3); }
}
@media (min-width: 880px) and (max-height: 780px) {
  .final { --final-resto: 74px; }
  /* v15: en pantallas bajas el pie se aprieta (64px) para que la llamada final siga cabiendo entera encima */
  :root { --pie: var(--esp-10); }
  .pie a { padding-block: var(--esp-1); }
  .pie__nota, .pie__copia { padding-bottom: var(--esp-2); }
  .final__movil { --pomo: 40px; }
  .desliza { margin-top: 0.375rem; }
  .final__movil figcaption { margin-top: 0.1875rem; font-size: 0.75rem; line-height: 1.4; }
  .final .boton--titan { min-height: 72px; }
  .final__email { margin-top: 1.5rem; }
}

/* ======================================================================
   v7-2 · Nunca, personas y preguntas
   ====================================================================== */

/* ---- Nunca: un pictograma grande por regla, con el sello de prohibido encima; palabra clave grande y frase debajo ---- */
.picto { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lleno { fill: currentColor; }
.regla__dibujo { width: clamp(4.5rem, 16vw, 6.5rem); height: auto; aspect-ratio: 1; }
.regla__sello { fill: none; stroke: var(--turquesa); stroke-width: 5.5; transform-box: fill-box; transform-origin: 50% 50%; }
.regla__sello circle, .regla__sello path, .nunca__sello circle, .nunca__sello path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.regla__cuerpo { display: grid; gap: 0.375rem; }
.regla__clave { font-size: clamp(1.625rem, 5.4vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--blanco); transition: color 0.3s ease-out; }
.regla__txt { max-width: 26em; font-size: clamp(1rem, 1.5vw, 1.1875rem); font-weight: 500; line-height: 1.4; color: var(--blanco-suave); }
.nunca__escena { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* El sello cae sobre el pictograma (girado y grande) y su trazo se dibuja */
  .js .regla .regla__sello { transform: scale(1.5) rotate(-18deg); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) 0.15s, opacity 0.2s ease-out 0.15s; }
  .js .regla.visto .regla__sello { transform: none; opacity: 1; }
  .js .regla .regla__sello circle, .js .regla .regla__sello path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--ease-out) 0.25s; }
  .js .regla.visto .regla__sello circle, .js .regla.visto .regla__sello path { stroke-dashoffset: 0; }
  .nunca__escena.sella .nunca__sello { animation: sello 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) backwards; }
  .nunca__escena.sella .nunca__sello circle, .nunca__escena.sella .nunca__sello path { animation: dibuja 0.6s var(--ease-out) 0.1s backwards; }
  .nunca__escena.sella .nunca__clave { animation: aparece 0.4s var(--ease-out) 0.15s backwards; }
}
@keyframes sello { from { transform: scale(1.6) rotate(-16deg); opacity: 0; } }
/* Una regla protagonista cada vez: la que está en el centro de la pantalla (o bajo el ratón) se enciende; las demás bajan un punto, sin dejar de leerse */
.js .nunca--viva .regla.revela { transition: opacity 0.3s ease-out; }
.js .nunca--viva .regla.revela:not(.actual) { opacity: 0.62; }
.js .nunca--viva .regla.actual .regla__clave { color: var(--turquesa); }
@media (min-width: 880px) {
  .nunca--foto .nunca__rejilla { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "lado foto" "reglas foto"; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: 2rem; }
  .nunca--foto .nunca__lado { grid-area: lado; position: static; }
  .nunca--foto .reglas { grid-area: reglas; }
  .nunca--foto .nunca__palabra { font-size: clamp(5rem, 13vw, 12rem); }
  .nunca--foto .nunca__foto { grid-area: foto; position: sticky; top: var(--cabecera); align-self: start; aspect-ratio: auto; height: calc(var(--vh) * 100 - var(--cabecera)); margin-inline: 0 calc(-1 * max(var(--margen), (100vw - var(--ancho)) / 2)); }
  .nunca__foto::after { background: linear-gradient(0deg, var(--azul-noche) 0%, color-mix(in srgb, var(--azul-noche) 60%, transparent) 22%, transparent 48%), linear-gradient(90deg, var(--azul-noche) 0%, transparent 12%); }
  .regla { min-height: clamp(8.5rem, 24vh, 12rem); }
  .regla__dibujo { width: clamp(5rem, 7vw, 6.5rem); }
  /* El escenario: sobre la foto, el pictograma de la regla actual en grande, el sello y su palabra clave */
  .nunca__escena { position: absolute; z-index: 2; inset: 0 max(var(--margen), (100vw - var(--ancho)) / 2) 0 0; display: grid; place-content: center; justify-items: center; gap: 1.5rem; padding: 2rem 1rem; text-align: center; color: var(--blanco); }
  .nunca__lienzo { position: relative; width: clamp(11rem, 20vw, 19rem); aspect-ratio: 1; }
  .nunca__lienzo::before { content: ""; position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--azul-noche) 88%, transparent) 0%, color-mix(in srgb, var(--azul-noche) 70%, transparent) 62%, transparent 100%); }
  .nunca__cosa { position: absolute; inset: 9%; width: 82%; height: 82%; opacity: 0; transition: opacity 0.25s ease-out; }
  .nunca__escena[data-regla="0"] .nunca__cosa:nth-child(1), .nunca__escena[data-regla="1"] .nunca__cosa:nth-child(2), .nunca__escena[data-regla="2"] .nunca__cosa:nth-child(3),
  .nunca__escena[data-regla="3"] .nunca__cosa:nth-child(4), .nunca__escena[data-regla="4"] .nunca__cosa:nth-child(5) { opacity: 1; }
  .nunca__sello { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--turquesa); stroke-width: 5; stroke-linecap: round; }
  .nunca__clave { position: relative; max-width: 9em; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
}

/* ---- Quiénes somos: tarjetas que giran y enseñan el correo ----
   Sin JavaScript: una tarjeta normal con las dos caras seguidas (foto, nombre, rótulo y, debajo, el correo). */
.persona { position: relative; overflow: visible; background: none; border-radius: 22px; }
.persona__giro { display: grid; height: 100%; border-radius: 22px; }
.persona__cara { overflow: hidden; background: var(--blanco); }
.persona__cara--frente { border-radius: 22px 22px 0 0; }
.persona__cara--dorso { display: grid; align-content: start; justify-items: start; gap: 0.5rem; padding: 0 1.125rem 1.125rem; border-radius: 0 0 22px 22px; }
.persona__nombre { display: none; }
.persona .persona__invita { padding: 0.75rem 0 0; border-top: 1px solid var(--linea); width: 100%; font-size: 0.9375rem; font-weight: 600; color: var(--azul-noche); }
.persona__email { max-width: 100%; padding-block: 0.375rem; color: var(--azul-noche); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.persona__copiar { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: var(--azul-noche); color: var(--blanco); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: transform 0.16s var(--ease-out), background-color 0.2s ease-out; }
.persona__copiar:active { transform: scale(0.97); }
.persona__copiar.hecho { background: var(--blanco); color: var(--azul-noche); box-shadow: inset 0 0 0 2px var(--azul-noche); }
.persona .persona__copiado { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.persona__legal { padding-block: 0.375rem; font-size: 0.8125rem; color: var(--texto-suave); }
.banda--noche .persona :focus-visible { outline-color: var(--azul-noche); }
.banda--noche .persona__girar:focus-visible { outline-color: var(--blanco); }
.persona__girar { position: absolute; z-index: 3; top: 0.625rem; right: 0.625rem; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0.375rem 0.875rem 0.375rem 0.625rem; border: 0; border-radius: 999px; background: var(--blanco); color: var(--azul-noche); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px -10px #000; transition: transform 0.16s var(--ease-out); }
.persona__girar:active { transform: scale(0.96); }
.persona__girar .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; transition: transform 0.5s var(--ease-out); }
/* v14 §7: el icono es un sobre (antes, dos flechas en círculo que parecían «recargar») y ya no gira */
/* Con JavaScript: las dos caras ocupan el mismo sitio y la tarjeta gira en 3D (al pasar el ratón, al pulsarla o con el botón «Email») */
.persona--giro { perspective: 1100px; }
.persona--giro .persona__giro { transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1); cursor: pointer; }
.persona--giro .persona__cara { grid-area: 1 / 1; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.persona--giro .persona__cara--dorso { align-content: center; justify-items: center; gap: 0.625rem; padding: 3.5rem 1rem 1rem; text-align: center; background: var(--turquesa-claro); transform: rotateY(180deg); visibility: hidden; transition: visibility 0s linear 0.35s; }
.persona--giro .persona__nombre { display: block; padding: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--azul-noche); }
.persona--giro .persona__invita { padding: 0; border: 0; }
.persona--giro .persona__cara--frente { transition: visibility 0s linear 0.35s; }
.persona--giro.girada .persona__giro { transform: rotateY(180deg); }
.persona--giro.girada .persona__cara--dorso { visibility: visible; }
.persona--giro.girada .persona__cara--frente { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .persona--giro:hover .persona__giro { transform: rotateY(180deg); }
  .persona--giro:hover .persona__cara--dorso { visibility: visible; }
  .persona--giro:hover .persona__cara--frente { visibility: hidden; }
}
/* Con «reducir movimiento» no hay giro: el correo aparece con un fundido */
@media (prefers-reduced-motion: reduce) {
  .persona--giro .persona__giro, .persona--giro.girada .persona__giro, .persona--giro:hover .persona__giro { transform: none; }
  .persona--giro .persona__cara { transition: opacity 0.25s ease-out, visibility 0s linear 0.25s !important; }
  .persona--giro .persona__cara--dorso { transform: none; opacity: 0; }
  .persona--giro.girada .persona__cara--dorso, .persona--giro.girada .persona__cara--frente { transition: opacity 0.25s ease-out, visibility 0s !important; }
  .persona--giro.girada .persona__cara--dorso { opacity: 1; }
  .persona--giro.girada .persona__cara--frente { opacity: 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .persona--giro:hover .persona__cara--dorso { opacity: 1; transition: opacity 0.25s ease-out, visibility 0s !important; }
  .persona--giro:hover .persona__cara--frente { opacity: 0; }
}

/* ---- Otros servicios: Escape cierra la caja abierta con el teclado sin mover el foco ---- */
@media (prefers-reduced-motion: no-preference) {
}

/* ---- v10 · Página de ejemplos de landing pages (ejemplos-landing.html; sin enlazar hasta que haya ejemplos reales) ---- */
.ejemplos__que { max-width: 30em; font-size: clamp(1.125rem, 2.2vw, 1.4375rem); line-height: 1.5; }
.ejemplos__pronto { display: inline-block; max-width: 34em; padding: 0.875rem 1.125rem; border-radius: var(--radio-m); background: var(--blanco); color: var(--texto); }
.ejemplos__pronto strong { color: var(--azul-noche); }
.ejemplos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.ejemplos__lista:empty { display: none; }
.ejemplo { display: grid; align-content: start; gap: 0.375rem; padding: 0.75rem 0.75rem 1.125rem; border-radius: var(--radio-l); background: var(--blanco); box-shadow: var(--sombra-suave); }
.ejemplo__captura { display: block; overflow: hidden; border-radius: var(--radio); background: var(--azul-claro); }
.ejemplo__captura img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ejemplo__etiqueta { justify-self: start; margin-top: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--azul-claro); color: var(--azul-noche); font-size: 0.75rem; font-weight: 700; }
.ejemplos .ejemplo h2 { margin-top: 0.25rem; font-size: 1.25rem; }
.ejemplos .ejemplo p { margin-top: 0; }
.ejemplo__sector { color: var(--texto-suave); }
.ejemplo__ver { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: var(--azul); text-underline-offset: 0.3em; }

/* ---- Páginas legales: subtítulo del borrador ---- */
.legal h2 { margin-top: 2.5rem; font-size: 1.375rem; font-weight: 800; line-height: 1.2; }
/* v16 §7: página 404 (misma plantilla que las legales) */
.nohay__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5) var(--esp-7); margin-top: var(--esp-8); }
.nohay .legal__volver { margin-top: 0; }
/* v16 §4: listas, fecha y ancho de lectura de las páginas legales (valores de la escala del sistema visual) */
.legal ul { margin-top: var(--esp-7); padding-left: var(--esp-6); display: grid; gap: var(--esp-3); }
.legal li::marker { color: var(--azul-noche); }
.legal__fecha { color: var(--texto-suave); font-size: var(--txt-2); }
.legal a:not(.legal__volver) { overflow-wrap: anywhere; }

/* ======================================================================
   v8-2 · «¿Qué es Sempri?»: la capa que baja desde arriba al pulsar el logo
   Sin JavaScript: se ve con :target (el logo es un enlace a #que-es-sempri) y se cierra con enlaces a #inicio.
   Con JavaScript («capa--viva»): baja como una persiana (solo transform y opacity) y es un diálogo con el foco dentro.
   ====================================================================== */
.capa { display: none; position: fixed; inset: 0; z-index: 40; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.capa:target, .capa--viva { display: grid; }
.capa__fondo { position: fixed; inset: 0; background: color-mix(in srgb, var(--noche-honda) 74%, transparent); cursor: default; touch-action: none; }
.capa__panel {
  --capa-arriba: clamp(1.25rem, 4vh, 2.5rem);
  position: relative; padding-block: var(--capa-arriba) clamp(1.75rem, 5vh, 3rem); outline: none;
  background-color: var(--blanco); color: var(--texto);
  /* las lamas, apenas insinuadas */
  background-image: repeating-linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, var(--azul-noche) 5%, transparent) 46px 48px);
  border-bottom: 12px solid var(--azul-noche); border-radius: 0 0 var(--radio-l) var(--radio-l);
  box-shadow: 0 40px 80px -30px #000;
}
/* el tirador de la persiana */
.capa__panel::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 64px; height: 6px; margin-left: -32px; border-radius: 999px; background: var(--turquesa); }
.capa__marco { position: relative; }
.capa__rejilla { position: relative; display: grid; gap: 1.5rem; }
.capa__cerrar {
  position: absolute; z-index: 3; top: -0.25rem; right: var(--margen); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--azul-claro); color: var(--azul-noche); transition: background-color 0.2s ease-out, transform 0.16s var(--ease-out);
}
.capa__cerrar .ico { width: 1.375rem; height: 1.375rem; stroke-width: 2.4; }
.capa__cerrar:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .capa__cerrar:hover { background: var(--azul-claro); } }
.capa__frase .kicker { min-height: 40px; margin-bottom: 0.75rem; padding-right: 64px; }
.capa__grande { max-width: 21em; font-size: clamp(1.5rem, 3.1vw, 3rem); font-weight: 800; line-height: 1.14; letter-spacing: -0.012em; color: var(--azul-noche); text-wrap: pretty; }
/* se resaltan las palabras que importan (no las de enlace): un trazo de rotulador turquesa bajo el texto azul noche */
.capa mark { white-space: nowrap; padding-inline: 0.06em; color: inherit; background: linear-gradient(180deg, transparent 58%, var(--turquesa) 58% 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.capa__remate { display: block; margin-top: 0.6em; font-size: max(1.0625rem, 0.6em); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--texto-suave); }
/* v10: el recuadro es una hoja arrancada de libreta: agujeros de la espiral arriba, renglones, un margen y un trozo de cinta.
   Un poco girada y con sombra suave. Estática. Los renglones coinciden con la altura de línea del texto. */
.capa__pitch {
  --renglon: 1.75rem;
  position: relative; padding: 2.125rem 1.25rem 1.25rem 2.5rem;
  background-color: var(--fondo);
  background-image: linear-gradient(90deg, transparent 1.75rem, color-mix(in srgb, var(--turquesa) 70%, transparent) 1.75rem, color-mix(in srgb, var(--turquesa) 70%, transparent) calc(1.75rem + 2px), transparent calc(1.75rem + 2px)), repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--renglon) - 1px), color-mix(in srgb, var(--azul-noche) 14%, transparent) calc(var(--renglon) - 1px), color-mix(in srgb, var(--azul-noche) 14%, transparent) var(--renglon));
  background-position: 0 0, 0 0.5rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--azul-noche) 10%, transparent), 0 18px 30px -18px color-mix(in srgb, var(--azul-noche) 55%, transparent);
}
/* los agujeros de la espiral, arrancados: muescas redondas en el borde de arriba */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .capa__pitch { -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 22px 100% repeat-x; mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 22px 100% repeat-x; }
}
.capa__nota { position: relative; max-width: 26rem; transform: rotate(-1.5deg); transform-origin: 30% 0; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--azul-noche) 30%, transparent)) drop-shadow(0 16px 18px color-mix(in srgb, var(--azul-noche) 20%, transparent)); }
/* la cinta */
.capa__nota::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -0.5rem; width: 5.5rem; height: 1.5rem; margin-left: -2.75rem; transform: rotate(3deg); background: color-mix(in srgb, var(--azul) 26%, transparent); border-inline: 1px dashed color-mix(in srgb, var(--blanco) 70%, transparent); }
.capa__pitch h3 { font-size: 1.1875rem; font-weight: 700; font-style: italic; line-height: var(--renglon); letter-spacing: 0; color: var(--azul-noche); }
.capa__pitch p { font-size: 1.0625rem; line-height: var(--renglon); color: var(--texto); }
.capa__botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.125rem; }
.capa__botones .boton, .capa__botones .capa__volver { flex: 1 1 100%; }
/* v11 §4.1: «Volver al inicio» es un botón secundario: borde azul noche (13,5:1), flecha hacia arriba y 52 px de alto. El turquesa sigue siendo solo el del piloto. */
.capa__volver { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.75rem 1.375rem; border-radius: var(--radio); background: var(--blanco); color: var(--azul-noche); font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: inset 0 0 0 2px var(--azul-noche); transition: background-color 0.2s ease-out, transform 0.16s var(--ease-out); }
.capa__volver .flecha { width: 1.2em; height: 1.2em; animation: none; transform: rotate(-90deg); transition: transform 0.2s var(--ease-out); }
.capa__volver:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .capa__volver:hover { background: var(--azul-claro); } .capa__volver:hover .flecha { transform: translateY(-3px) rotate(-90deg); } }
/* v11 §4.1: en estrecho la nota sube: va justo después de la frase principal y antes de la línea del nombre (solo cambia el orden visual) */
@media (max-width: 879.98px) {
  .capa__rejilla { gap: 0; }
  .capa__frase, .capa__lado { display: contents; }
  .capa__frase .kicker { order: 1; }
  .capa__grande { order: 2; }
  .capa__nota { order: 3; margin-block: 1.25rem 0.5rem; }   /* v13: un poco más arriba */
  .capa__garabato { order: 3; margin-block: 1.25rem 0; }
  .capa__botones { order: 5; margin-top: 1.5rem; }
}
@media (min-width: 880px) {
  .capa__rejilla { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  .capa__rejilla { align-items: start; }
  /* v13 §3.1: la nota sube: su borde de arriba queda a la altura de la primera línea del titular (3,25 rem = el alto del rótulo de la hoja y su margen) */
  .capa__lado { padding-top: 3.25rem; }
  .capa__botones .boton, .capa__botones .capa__volver { flex: 0 0 auto; }
  /* v15 §7: en la hoja 2 el texto quedaba arriba. Su columna se estira hasta el alto de la de la derecha (dibujo + botones) y la frase se centra
     en el hueco que queda bajo el rótulo. El rótulo y los controles de abajo no se mueven. */
  .capa__hoja--2 .capa__frase { align-self: stretch; display: flex; flex-direction: column; }
  .capa__hoja--2 .capa__grande { margin-block: auto; }
}
/* ---------- v13 §3.2 · Dos hojas del mismo cuaderno ----------
   Sin JavaScript las dos hojas van una debajo de otra y no hay flechas. Con JavaScript (.capa--viva) ocupan la misma celda y se ve una:
   la hoja 1 va encima y, al pasar, gira sobre su borde izquierdo (rotateY con perspectiva) mientras se funde al final; debajo está la hoja 2.
   Solo transform y opacity (y el trazo del garabato). En estrecho la hoja 1 se desliza hacia la izquierda. Con «reducir movimiento», fundido corto. */
.capa__hoja + .capa__hoja { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px dashed color-mix(in srgb, var(--azul-noche) 22%, transparent); }
.capa__hoja .kicker:focus-visible { outline-offset: 6px; }
.capa__garabato { display: block; width: min(100%, 21rem); height: auto; overflow: visible; transform: rotate(-3deg); }
.capa__garabato text { font-family: inherit; fill: var(--azul-noche); }
.gb-siempre { font-size: 66px; font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
.gb-sempri { font-size: 34px; font-weight: 600; letter-spacing: -0.01em; }
.capa__garabato path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gb-raya { stroke: var(--turquesa); stroke-width: 7; }
.gb-raya--2 { stroke-width: 5; }
.gb-flecha { stroke: var(--azul-noche); stroke-width: 3.5; }
/* v14 §2.4: el símbolo, separado del nombre un paso de la escala */
.gb-logo { transform: translateX(var(--esp-2)); }
.capa__pasa { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.capa__pasa[hidden], .capa__pasa [hidden] { display: none; }
.capa__cuenta { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.capa__sig, .capa__ant { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: var(--azul-claro); color: var(--azul-noche); font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; transition: background-color 0.2s ease-out, transform 0.16s var(--ease-out); }
/* el contador va pegado a la flecha: a la derecha en la hoja 1 («1 / 2» y siguiente) y a la izquierda en la hoja 2 (anterior y «2 / 2») */
.capa__ant[hidden] + .capa__cuenta { margin-left: auto; }
.capa__sig .flecha, .capa__ant .flecha { flex: none; width: 1.375rem; height: 1.375rem; animation: none; transition: transform 0.2s var(--ease-out); }
.capa__ant .flecha { transform: scaleX(-1); }
.capa__sig:active, .capa__ant:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .capa__sig:hover, .capa__ant:hover { background: color-mix(in srgb, var(--azul) 18%, var(--azul-claro)); }
  .capa__sig:hover .flecha { transform: translateX(3px); }
  .capa__ant:hover .flecha { transform: translateX(-3px) scaleX(-1); }
}
.capa--viva .capa__hojas { display: grid; overflow: hidden; margin-inline: calc(-1 * var(--margen)); padding-bottom: 0.5rem; }
.capa--viva .capa__hoja { grid-area: 1 / 1; align-content: start; margin-top: 0; padding: 0 var(--margen); border-top: 0; }
.capa--viva .capa__hoja--1 {
  z-index: 1; transform-origin: 0 50%; transform: perspective(2400px) rotateY(0deg);
  /* su propio papel, con los renglones a la misma altura que los del panel, para tapar la hoja de debajo mientras gira */
  background-color: var(--blanco);
  background-image: repeating-linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, var(--azul-noche) 5%, transparent) 46px 48px);
  background-position: 0 calc(-1 * var(--capa-arriba));
  transition: transform 0.56s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s ease-out, visibility 0s;
}
.capa--viva .capa__hoja--1::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--azul-noche) 16%, transparent)); }
.capa--viva .capa__hoja--2 { opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0s linear 0.2s; }
.capa--viva .capa__hoja--2::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--azul-noche) 14%, transparent), transparent); }
.capa--viva .capa__hoja--2 { position: relative; }
.capa--viva [data-pagina="2"] .capa__hoja--1 { transform: perspective(2400px) rotateY(-82deg); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.56s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.22s ease-in 0.34s, visibility 0s linear 0.56s; }
.capa--viva [data-pagina="2"] .capa__hoja--2 { opacity: 1; visibility: visible; transition: opacity 0.25s ease-out 0.08s, visibility 0s; }
/* la sombra solo existe mientras la hoja está en el aire (la clase dura lo que el giro) */
.capa__hojas--pasa .capa__hoja--1::after, .capa__hojas--pasa .capa__hoja--2::before { animation: hoja-sombra 0.56s ease-in-out both; }
@keyframes hoja-sombra { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
/* el garabato se dibuja al llegar a la hoja 2 */
.capa--viva .capa__garabato path { stroke-dashoffset: 1; }
.capa--viva [data-pagina="2"] .capa__garabato path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.4s; }
.capa--viva [data-pagina="2"] .capa__garabato .gb-raya--2 { transition-delay: 0.6s; }
.capa--viva [data-pagina="2"] .capa__garabato .gb-flecha { transition-delay: 0.8s; }
.capa--viva [data-pagina="2"] .capa__garabato .gb-flecha--punta { transition-duration: 0.25s; transition-delay: 1.15s; }
.capa--viva .capa__garabato .gb-sempri { opacity: 0; }
.capa--viva [data-pagina="2"] .capa__garabato .gb-sempri { opacity: 1; transition: opacity 0.3s ease-out 1.2s; }
@media (max-width: 879.98px) {
  /* en estrecho la hoja es muy alta: en vez de girar, se va deslizando hacia la izquierda */
  .capa--viva .capa__hoja--1 { transform: translate3d(0, 0, 0); }
  .capa--viva [data-pagina="2"] .capa__hoja--1 { transform: translate3d(-104%, 0, 0); opacity: 1; transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 0.5s; }
  .capa__sig span, .capa__ant span { max-width: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .capa--viva .capa__hoja--1, .capa--viva [data-pagina="2"] .capa__hoja--1 { transform: none; transition: opacity 0.2s ease-out, visibility 0s linear 0.2s !important; }
  .capa--viva [data-pagina="1"] .capa__hoja--1 { transition: opacity 0.2s ease-out, visibility 0s !important; }
  .capa--viva .capa__hoja--2, .capa--viva [data-pagina="2"] .capa__hoja--2 { transition-delay: 0s !important; }
  .capa__hojas--pasa .capa__hoja--1::after, .capa__hojas--pasa .capa__hoja--2::before { animation: none; }
  .capa--viva .capa__garabato path, .capa--viva [data-pagina="2"] .capa__garabato path { stroke-dashoffset: 0; transition: none !important; }
  .capa--viva .capa__garabato .gb-sempri, .capa--viva [data-pagina="2"] .capa__garabato .gb-sempri { opacity: 1; transition: none !important; }
}
/* Con JavaScript: cerrada, la capa no se ve ni se puede tocar; abierta, el fondo se funde y el panel baja desde arriba.
   La salida es más corta que la entrada. */
.capa--viva { visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.3s; }
.capa--viva.abierta { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.capa--viva .capa__fondo { opacity: 0; transition: opacity 0.26s ease-out; }
.capa--viva .capa__panel { transform: translateY(-104%); transition: transform 0.28s var(--ease-out); }
.capa--viva.abierta .capa__fondo { opacity: 1; transition-duration: 0.35s; }
.capa--viva.abierta .capa__panel { transform: none; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.capa--viva.capa--ya, .capa--viva.capa--ya * { transition: none !important; }
/* Mientras está abierta la página no se desplaza; el hueco de la barra de scroll se compensa para que nada salte */
html.capa-abierta { overflow: hidden; }
html.capa-abierta body { padding-right: var(--hueco-barra, 0px); }
html.capa-abierta .cabecera { right: var(--hueco-barra, 0px); }
/* Con «reducir movimiento»: sin bajada; aparece con un fundido corto */
@media (prefers-reduced-motion: reduce) {
  .capa--viva .capa__panel { transform: none; opacity: 0; transition: opacity 0.2s ease-out !important; }
  .capa--viva.abierta .capa__panel { opacity: 1; }
  .capa--viva .capa__fondo { transition: opacity 0.2s ease-out !important; }
  .capa--viva { transition: visibility 0s linear 0.2s !important; }
  .capa--viva.abierta { transition-delay: 0s !important; }
}

/* ======================================================================
   v16 §8 · «Pide una videollamada»: capa con calendario, horas y formulario
   Sin JavaScript: se ve con :target, sin calendario (hay un campo de texto) y el formulario se envía normal a gracias.html.
   Con JavaScript («cita--viva»): es un diálogo con el foco dentro; entra con un fundido y una subida corta (solo transform y opacity).
   Todo con las variables del sistema visual. Sin turquesa: el botón de enviar es azul noche (el turquesa es solo para el piloto).
   ====================================================================== */
.cita { display: none; position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-5); align-items: start; justify-items: center; }
.cita:target, .cita--viva { display: grid; }
.cita__fondo { position: fixed; inset: 0; background: var(--noche-88); cursor: default; }
.cita__panel { position: relative; width: min(100%, 58rem); margin-block: auto; padding: var(--esp-7) var(--esp-6) var(--esp-8); border-radius: var(--radio-l); background: var(--blanco); color: var(--texto); box-shadow: var(--sombra-flotante); }
.cita__panel:focus { outline: none; }
.cita--viva .cita__fondo { animation: cita-fondo var(--dur) var(--ease-out) backwards; }
.cita--viva .cita__panel { animation: cita-entra var(--dur) var(--ease-out) backwards; }
@keyframes cita-fondo { from { opacity: 0; } }
@keyframes cita-entra { from { opacity: 0; transform: translateY(var(--esp-5)); } }
@media (prefers-reduced-motion: reduce) { .cita--viva .cita__fondo, .cita--viva .cita__panel { animation: none; } }
.cita__cerrar { position: absolute; top: var(--esp-4); right: var(--esp-4); display: grid; place-items: center; width: var(--esp-9); height: var(--esp-9); border-radius: 50%; color: var(--azul-noche); transition: transform var(--dur-micro) var(--ease-out); }
.cita__cerrar .ico { width: var(--txt-6); height: var(--txt-6); stroke-width: 2.4; }
.cita__cerrar:active { transform: scale(0.97); }
.cita__titulo { margin: 0; padding-right: var(--esp-9); color: var(--azul-noche); font-size: var(--titular-s); font-weight: 800; line-height: 1.1; letter-spacing: -0.012em; }
.cita__titulo:focus { outline: none; }
.cita__intro { max-width: 38em; margin-top: var(--esp-4); font-size: var(--txt-4); line-height: 1.45; }
.cita__prueba { display: inline-block; margin-top: var(--esp-4); padding: var(--esp-2) var(--esp-4); border-radius: 999px; background: var(--azul-noche); color: var(--blanco); font-size: var(--txt-2); font-weight: 700; }
.cita__form { display: grid; gap: var(--esp-8); margin-top: var(--esp-7); }
.cita__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cita__paso { margin: 0 0 var(--esp-4); padding: 0; color: var(--azul-noche); font-size: var(--txt-4); font-weight: 800; line-height: 1.2; }
.cita__ayuda { display: block; margin-top: var(--esp-3); color: var(--texto-suave); font-size: var(--txt-2); line-height: 1.4; }
.cita__error { display: block; margin-top: var(--esp-2); color: var(--azul-noche); font-size: var(--txt-2); font-weight: 700; line-height: 1.35; }
.cita__error::before { content: "!"; display: inline-grid; place-items: center; width: var(--esp-6); height: var(--esp-6); margin-right: var(--esp-2); border-radius: 50%; background: var(--azul-noche); color: var(--blanco); font-size: var(--txt-1); }
.cita__error[hidden] { display: none; }
/* Calendario */
.js .cita__sin-js { display: none; }
.cita__mes { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.cita__mes-nombre { margin: 0; color: var(--azul-noche); font-size: var(--txt-4); font-weight: 700; }
.cita__mes-boton { display: grid; place-items: center; width: var(--esp-9); height: var(--esp-9); border: 0; border-radius: 50%; background: var(--azul-claro); color: var(--azul-noche); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.cita__mes-boton .flecha { width: var(--txt-5); height: var(--txt-5); }
.cita__mes-boton[data-mes="-1"] .flecha { transform: rotate(180deg); }
.cita__mes-boton:active { transform: scale(0.97); }
.cita__mes-boton:disabled { background: none; color: var(--texto-suave); opacity: 0.45; cursor: default; }
.cita__rejilla { width: 100%; margin-top: var(--esp-4); border-collapse: separate; border-spacing: var(--esp-1); table-layout: fixed; text-align: center; font-variant-numeric: tabular-nums; }
.cita__rejilla th { padding-bottom: var(--esp-2); color: var(--texto-suave); font-size: var(--txt-1); font-weight: 700; }
.cita__rejilla td { padding: 0; }
.cita__dia { display: grid; place-items: center; width: 100%; min-height: calc(var(--esp-9) - var(--esp-1)); border: 0; border-radius: var(--radio); background: none; color: var(--texto-suave); font: inherit; font-size: var(--txt-3); }
.cita__dia[aria-disabled="true"] { text-decoration: line-through; text-decoration-color: var(--linea); }
.cita__dia--libre { background: var(--azul-claro); color: var(--azul-noche); font-weight: 800; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.cita__dia--libre:active { transform: scale(0.97); }
.cita__dia[aria-selected="true"] { background: var(--azul-noche); color: var(--blanco); }
.cita__dia:focus-visible, .cita__mes-boton:focus-visible, .cita__enviar:focus-visible, .cita__cerrar:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 2px; }
.cita__horas { margin: var(--esp-7) 0 0; padding: 0; border: 0; min-width: 0; }
.cita__horas-dia { margin: 0 0 var(--esp-4); font-size: var(--txt-3); }
.cita__horas-lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.cita__hora { position: relative; }
.cita__hora input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cita__hora span { display: grid; place-items: center; min-width: calc(var(--esp-10) + var(--esp-7)); min-height: var(--esp-9); padding: 0 var(--esp-5); border-radius: var(--radio); background: var(--azul-claro); color: var(--azul-noche); font-size: var(--txt-4); font-weight: 800; font-variant-numeric: tabular-nums; }
.cita__hora input:checked + span { background: var(--azul-noche); color: var(--blanco); }
.cita__hora input:focus-visible + span { outline: 2px solid var(--azul-noche); outline-offset: 2px; }
/* Formulario */
.cita__datos { display: grid; gap: var(--esp-5); align-content: start; }
.cita__datos .cita__paso { margin-bottom: 0; }
.cita__campo { display: grid; gap: var(--esp-2); margin: 0; }
.cita__campo label, .cita__contacto legend { color: var(--azul-noche); font-size: var(--txt-2); font-weight: 700; }
.cita__opcional { color: var(--texto-suave); font-weight: 500; }
.cita__campo input, .cita__campo textarea { width: 100%; min-height: var(--esp-9); padding: var(--esp-4) var(--esp-5); border: 0; border-radius: var(--radio); background: var(--fondo); color: var(--texto); font: inherit; font-size: var(--txt-3); box-shadow: inset 0 0 0 1px var(--noche-60); }
.cita__campo textarea { resize: vertical; line-height: 1.4; }
.cita__campo input:focus-visible, .cita__campo textarea:focus-visible { outline: 2px solid var(--azul-noche); outline-offset: 2px; }
.cita__campo [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--azul-noche); }
.cita__contacto { display: grid; gap: var(--esp-4); margin: 0; padding: 0; border: 0; min-width: 0; }
.cita__contacto legend { padding: 0; margin-bottom: var(--esp-3); }
.cita__contacto .cita__ayuda { margin-top: 0; }
.cita__acepta { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-2) var(--esp-4); align-items: start; margin: 0; font-size: var(--txt-2); line-height: 1.45; }
.cita__acepta input { width: var(--esp-7); height: var(--esp-7); margin: 0; accent-color: var(--azul-noche); }
.cita__acepta .cita__error { grid-column: 1 / -1; margin-top: 0; }
.cita__enviar { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--esp-8); border: 0; border-radius: var(--radio); background: var(--azul-noche); color: var(--blanco); font: inherit; font-size: var(--txt-4); font-weight: 800; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.cita__enviar:active { transform: scale(0.97); }
.cita__enviar[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.cita__nota { margin: 0; color: var(--texto-suave); font-size: var(--txt-2); }
.cita__hecho { margin-top: var(--esp-7); padding: var(--esp-7); border-radius: var(--radio-m); background: var(--azul-claro); }
.cita__hecho:focus { outline: none; }
.cita__hecho-titulo { margin: 0; color: var(--azul-noche); font-size: var(--txt-6); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.cita__hecho-detalle { margin: var(--esp-4) 0 0; font-size: var(--txt-3); }
.cita__volver { display: inline-flex; align-items: center; min-height: var(--esp-9); margin-top: var(--esp-5); font-weight: 700; }
@media (min-width: 880px) {
  .cita { padding: var(--esp-8); }
  .cita__panel { padding: var(--esp-9); }
  .cita__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-9); align-items: start; }
  .cita__contacto { grid-template-columns: 1fr 1fr; }
  .cita__contacto legend, .cita__contacto .cita__ayuda, .cita__contacto .cita__error { grid-column: 1 / -1; }
}
/* Puntos de entrada: discretos; el botón principal sigue siendo «Pide tu piloto gratuito» */
.final__video { margin-top: var(--esp-4); color: var(--blanco-suave); }
.final__video a { display: inline-flex; align-items: center; min-height: var(--esp-9); color: var(--blanco); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--linea-clara); }
.final__video a:focus-visible { outline-color: var(--blanco); }
.faq__video { display: inline-flex; align-items: center; min-height: var(--esp-9); margin-top: var(--esp-2); color: var(--azul-noche); font-size: var(--txt-2); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--linea); }
html.cita-abierta { overflow: hidden; }