/*
 * El sitio público de Partimos. Dos familias (Inter Tight y Urbanist, las de la app), un azul, una
 * retícula: las reglas del tablero «Reglas de diseño» (25-09-2026), escritas
 * aquí una sola vez. Escritorio: 12 columnas, 64 de margen, 24 entre
 * columnas; teléfono: 20 de margen. Espacios en múltiplos de 8; 120 entre
 * secciones (64 en el teléfono), 40 del título a su contenido.
 */

/* LAS MISMAS LETRAS QUE LA APP (05-10-2026): Inter Tight para leer, Urbanist
   para títulos y cifras. El sitio llevaba Instrument Sans y la app otra
   familia: al pasar de uno a la otra parecían dos marcas. */
@font-face { font-family: 'Inter Tight'; font-weight: 400; font-display: swap; src: url('fuentes/InterTight-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; font-display: swap; src: url('fuentes/InterTight-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 600; font-display: swap; src: url('fuentes/InterTight-600.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-weight: 600; font-display: swap; src: url('fuentes/Urbanist-600.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-weight: 700; font-display: swap; src: url('fuentes/Urbanist-700.woff2') format('woff2'); }

:root {
  --azul: #2f66f0;
  --enlace: #2a5cdb;
  --tinta: #1d1d1f;
  --tinta-2: #424245;
  --gris: #6e6e73;
  --superficie: #f5f5f7;
  --filete: #d2d2d7;
  --filete-suave: #e8e8ed;
  --oscuro-2: #2c2c2e;
  --margen: 64px;
  --entre: 120px;
  --curva: cubic-bezier(.32, .72, 0, 1);
  --texto: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titulo: 'Urbanist', 'Inter Tight', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px; line-height: 26px; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid #7ab8ff; outline-offset: 2px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; color: var(--tinta); padding: 12px 16px; border-radius: 10px; }
.saltar:focus { top: 16px; }

.marco { max-width: 1280px; margin: 0 auto; padding: 0 var(--margen); }
.reticula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.seccion { padding-top: var(--entre); }
.cifras { font-variant-numeric: tabular-nums; }
/* Títulos y cifras grandes en Urbanist, como en la app. Urbanist es más
   abierta que Instrument: el interletrado negativo se reduce a la mitad. */
h1, .titulo-2, .titulo-3, .salida h3, .salida__pie strong, .flota__cifra,
.calculadora__resultados strong, .articulo h2, .texto-largo h1, .texto-largo h2,
.ejemplo strong, .t-hora, .t-precio { font-family: var(--titulo); font-weight: 700; }

/* ── Tipografía ─────────────────────────────────────────────── */
.antetitulo { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--azul); }
.titulo-2 { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -.8px; text-wrap: balance; }
.titulo-3 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.4px; }
.entradilla { font-size: 21px; line-height: 32px; }
.gris { color: var(--gris); }
.nota { font-size: 13px; line-height: 18px; color: var(--gris); }

/* ── Cabecera ───────────────────────────────────────────────── */
.cabecera { height: 80px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; color: inherit; }
.logo svg { display: block; }
.logo:hover { text-decoration: none; }
.menu { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
.menu a { color: inherit; }
.menu a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.boton-descargar { height: 36px; padding: 0 16px; border-radius: 18px; background: #fff; color: var(--azul) !important; font-weight: 600; display: flex; align-items: center; }
.abrir-menu { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: inherit; align-items: center; justify-content: center; cursor: pointer; }

.banda { background: var(--azul); color: #fff; }
.banda a:not(.tienda):not(.boton-descargar) { color: #fff; }

/* ── Botones de las tiendas: siempre los dos, App Store primero ── */
.tiendas { display: flex; gap: 12px; }
.tienda {
  height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 18px;
  border-radius: 14px; background: #fff; color: var(--tinta); transition: transform .15s ease;
}
.tienda:hover { transform: translateY(-2px); text-decoration: none; }
.tienda:active { transform: scale(.97); }
.tienda span { display: flex; flex-direction: column; text-align: left; }
.tienda small { font-size: 12px; line-height: 14px; color: var(--gris); }
.tienda strong { font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -0.2px; }
.tiendas--oscuras .tienda { background: var(--tinta); color: #fff; }
.tiendas--oscuras .tienda small { color: #a1a1a6; }
.tiendas--apiladas { flex-direction: column; }
.tiendas--apiladas .tienda { justify-content: center; }

.boton { height: 52px; padding: 0 28px; border-radius: 26px; background: var(--azul); color: #fff; font-size: 17px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.boton:hover { text-decoration: none; background: #0077ed; }
.ficha { height: 40px; padding: 0 16px; border-radius: 20px; background: var(--superficie); color: var(--tinta); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; }
.ficha:hover { text-decoration: none; background: #ebebef; }

/* ── Portada ────────────────────────────────────────────────── */
/* El alto lo pone el contenido, no un mínimo: con 880 fijos quedaba un
   hueco azul debajo del texto y el teléfono crecía para llenarlo. */
.portada { display: flex; flex-direction: column; overflow: hidden; background:
  radial-gradient(60% 70% at 82% 62%, rgba(255,255,255,.16), transparent 70%),
  radial-gradient(50% 60% at 4% -10%, rgba(140,180,255,.45), transparent 70%),
  radial-gradient(40% 50% at 100% 0%, rgba(20,40,170,.35), transparent 70%),
  var(--azul); }
.portada .reticula { flex-grow: 1; }
.portada__texto { grid-column: 1 / span 7; padding-top: 72px; padding-bottom: 48px; }
.portada__ante { font-size: 17px; line-height: 24px; font-weight: 600; color: rgba(255,255,255,.8); }
.portada h1 { margin-top: 16px; font-size: 80px; line-height: 80px; font-weight: 700; letter-spacing: -1.6px; text-wrap: balance; }
.portada .entradilla { margin-top: 24px; color: rgba(255,255,255,.86); max-width: 560px; }
.portada .tiendas { margin-top: 40px; }
.portada .tienda { height: 60px; padding: 0 24px 0 20px; border-radius: 16px; box-shadow: 0 14px 30px -14px rgba(0,0,60,.5); }
.portada__gratis { margin-top: 16px; font-size: 15px; line-height: 22px; color: rgba(255,255,255,.78); }
.portada__gratis a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }

.ruta-viva { margin-top: 56px; max-width: 560px; }
.ruta-viva__puntas { display: flex; justify-content: space-between; font-size: 15px; line-height: 20px; font-weight: 600; }
.ruta-viva__puntas span span { font-weight: 500; opacity: .72; }
.ruta-viva svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: 4px; }
.ruta-viva .traza { transition: stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1); }
.ruta-viva .carro { transition: offset-distance 1.1s cubic-bezier(.45,0,.2,1); offset-rotate: auto; }
.ruta-viva__texto { margin-top: 8px; font-size: 15px; line-height: 22px; min-height: 22px; color: rgba(255,255,255,.86); }

/* LAS CABEZAS QUE HABLAN (06-10-2026, el dueño). Las dos cabezas del logo,
   con los ojos de la app, dicen «Mira cómo funciona» debajo del texto; al
   bajar, caen hasta asomarse sobre el teléfono y desde ahí cuentan cada paso
   en su globo. `.habla` vive en la banda (absoluta); `.habla-inicio` y
   `.habla-fin` son sus dos sitios, y `sitio.js` la lleva de uno al otro. */
.portada { position: relative; }
.habla { position: absolute; top: 0; left: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; pointer-events: none; will-change: transform; }
.habla__globo { --cola: 50%; position: relative; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 8px; border-radius: 20px; background: linear-gradient(#fff, #f7f9ff); color: var(--tinta); font: 600 16px/20px var(--titulo); letter-spacing: -.1px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(10,20,80,.08), 0 18px 40px -16px rgba(5,15,90,.55); transition: width .3s var(--curva); }
.habla__globo:not(.con-paso) { padding-left: 18px; }
.habla__globo::after { content: ''; position: absolute; left: var(--cola); bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: #f7f9ff; border-radius: 0 0 4px 0; transform: rotate(45deg); box-shadow: 4px 4px 8px -4px rgba(5,15,90,.25); transition: left .45s var(--curva); }
.habla__paso { height: 32px; min-width: 32px; padding: 0 9px; border-radius: 12px; background: var(--azul); color: #fff; font: 700 13px/32px var(--texto); font-variant-numeric: tabular-nums; text-align: center; }
.habla__texto { display: inline-block; }
.habla__texto.cambia { animation: frase .5s var(--curva); }
.habla__flecha { flex-shrink: 0; color: var(--azul); animation: rebota-abajo 1.6s ease-in-out infinite; }
.habla.hablando .habla__flecha { display: none; }
@keyframes frase { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.cabeza { transition: transform .18s linear; }
.habla.aterriza .cabeza--el .cabeza__salto { animation: aterriza .62s cubic-bezier(.3,1.6,.5,1); }
.habla.aterriza .cabeza--ella .cabeza__salto { animation: aterriza .62s .11s cubic-bezier(.3,1.6,.5,1) both; }
.cabeza__salto.dice { animation: dice .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes dice { 0% { transform: none; } 35% { transform: translateY(-14px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
.asoman__caras { width: 210px; height: auto; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0,0,40,.25)); transform-origin: 50% 100%; }
.mascota__mira { transition: transform .45s var(--curva); }
.mascota__parpado { animation: pestanea 4.6s 1.6s infinite; }
.habla-inicio { height: 0; }
.habla-fin { height: 132px; margin-bottom: -46px; width: 100%; }
.demo.en-espera *, .demo.en-espera *::before, .demo.en-espera *::after { animation-play-state: paused !important; }
@keyframes aterriza { 0% { transform: scale(1.18, .78); } 45% { transform: translateY(-6px) scale(.94, 1.07); } 75% { transform: scale(1.03, .97); } 100% { transform: none; } }
.solo-movil-i, .portada__descargas-movil, .barra-descargar { display: none; }
@keyframes asoma { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rebota-abajo { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes pestanea { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

.demo { padding-top: 40px; grid-column: 8 / span 5; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.demo__pasos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.demo__paso { border: 0; cursor: pointer; font-size: 13px; line-height: 16px; font-weight: 600; height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(255,255,255,.14); color: #fff; transition: background .3s, color .3s; }
.demo__paso[aria-selected="true"] { background: #fff; color: var(--azul); }
.demo__barra { width: 324px; max-width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); margin: 12px 0 24px; overflow: hidden; }
.demo__barra i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.demo__barra i.llena { animation: llena var(--d, 3s) linear both; }
@keyframes llena { from { width: 0 } to { width: 100% } }
.demo__puntos { display: flex; gap: 6px; margin: 0 0 8px; }
.demo__puntos button { border: 0; padding: 0; background: transparent; height: 24px; display: flex; align-items: center; cursor: pointer; }
.demo__puntos i { display: block; height: 6px; width: 6px; border-radius: 3px; background: rgba(255,255,255,.4); transition: width .35s var(--curva), background .3s; }
.demo__puntos button[aria-selected="true"] i { width: 24px; background: #fff; }
.demo__pasos, .demo__barra { display: none !important; }

.flota { position: absolute; z-index: 30; width: 216px; background: #fff; color: var(--tinta); border-radius: 16px; padding: 16px; box-shadow: 0 24px 48px -16px rgba(0,0,40,.5); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s ease, transform .6s var(--curva); pointer-events: none; }
.flota.visible { opacity: 1; transform: none; }
.flota--1 { left: -24px; bottom: 300px; width: 208px; }
.flota--2 { right: -24px; bottom: 400px; display: flex; gap: 12px; align-items: center; }
.flota--3 { right: -24px; bottom: 200px; }
.flota__cifra { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.8px; margin-top: 4px; }
.flota__visto { width: 40px; height: 40px; border-radius: 20px; background: #34c759; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── El teléfono animado ────────────────────────────────────── */
/* EL TELÉFONO, A SU MEDIDA (05-10-2026, el dueño: «el iPhone es altísimo»).
   Medía 650 de alto y las pantallas sólo llenaban 450: abajo, 200 px de gris
   vacío. Ahora mide lo que enseña, y sale del borde de la banda como si
   asomara del bolsillo. */
.telefono-caja { width: 324px; height: 520px; }
.telefono { width: 324px; height: 520px; background: var(--tinta); border-radius: 54px 54px 0 0; padding: 12px 12px 0; box-shadow: 0 40px 90px -30px rgba(0,0,40,.65), inset 0 0 0 2px #3a3a3c; color: var(--tinta); font-size: 15px; line-height: 20px; }
.telefono__pantalla { position: relative; width: 100%; height: 100%; background: #f2f2f7; border-radius: 44px 44px 0 0; overflow: hidden; }
.telefono__isla { position: absolute; top: 11px; left: 50%; margin-left: -48px; width: 96px; height: 28px; border-radius: 14px; background: #000; z-index: 40; }
.pantalla { position: absolute; inset: 0; padding: 54px 16px 0; display: flex; flex-direction: column; gap: 10px; background: #f2f2f7; transform: translateX(100%); opacity: 0; transition: transform .55s var(--curva), opacity .4s ease, filter .55s ease; }
.pantalla.antes { transform: translateX(-32%); filter: brightness(.82); }
.pantalla.previa { opacity: 1; }
.pantalla.activa { transform: none; opacity: 1; filter: none; }
.t-tarjeta { background: #fff; border-radius: 16px; padding: 14px; position: relative; }
.t-gris { color: var(--gris); font-size: 13px; line-height: 18px; }
.t-boton { position: relative; background: var(--azul); color: #fff; border-radius: 999px; text-align: center; padding: 12px; font-size: 15px; font-weight: 600; }
.t-fila { display: flex; justify-content: space-between; align-items: baseline; }
.t-hora { font-size: 18px; font-weight: 700; }
.t-precio { font-size: 20px; font-weight: 700; }
.t-precio small { font-size: 11px; color: var(--gris); }

.dedo { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 17px; background: rgba(255,255,255,.55); border: 2px solid rgba(29,29,31,.35); box-shadow: 0 6px 16px rgba(0,0,0,.25); pointer-events: none; opacity: 0; z-index: 20; }
.onda { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 17px; border: 2px solid var(--azul); opacity: 0; pointer-events: none; z-index: 19; }
.activa .dedo { animation: dedo var(--d, 2.6s) var(--curva) both; }
.activa .onda { animation: onda var(--d, 2.6s) ease-out both; }
.activa .aprieta { animation: aprieta var(--d, 2.6s) ease both; }
.activa .escribe { animation: escribe .9s steps(16, end) both; }
.activa .entra { animation: entra .55s cubic-bezier(.2,.8,.2,1) both; }
.activa .pop { animation: pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.activa .baja { animation: baja .6s var(--curva) both; }
.escribe { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.cursor { display: inline-block; width: 2px; height: 17px; background: var(--azul); vertical-align: middle; margin-left: 2px; animation: parpadea .8s steps(1) infinite; }
.gira { animation: gira 1s linear infinite; }
.late { animation: late 1.6s ease-in-out infinite; }
@keyframes dedo { 0% { opacity: 0; transform: translate(90px,160px) } 30% { opacity: 1; transform: none } 52% { transform: none } 60% { transform: scale(.72) } 70% { transform: none } 88% { opacity: 1 } 100% { opacity: 0 } }
@keyframes onda { 0%, 59% { opacity: 0; transform: scale(.6) } 61% { opacity: .9; transform: scale(.8) } 90%, 100% { opacity: 0; transform: scale(2.6) } }
@keyframes aprieta { 0%, 56% { transform: none } 62% { transform: scale(.95); filter: brightness(.9) } 72%, 100% { transform: none; filter: none } }
@keyframes escribe { from { max-width: 0 } to { max-width: 220px } }
@keyframes parpadea { 50% { opacity: 0 } }
@keyframes entra { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes pop { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
@keyframes baja { from { opacity: 0; transform: translateY(-110%) } to { opacity: 1; transform: none } }
@keyframes gira { to { transform: rotate(360deg) } }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,.45) } 50% { box-shadow: 0 0 0 12px rgba(52,199,89,0) } }

/* ── Bloques de la portada ──────────────────────────────────── */
.rasgos { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rasgo { padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #ececf1, 0 24px 48px -32px rgba(20,30,90,.35); transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.rasgo:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #e3e6f0, 0 30px 56px -30px rgba(20,30,90,.45); }

.rasgo__icono { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #3d75ff, #2556d6); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -10px rgba(47,102,240,.8); }
.rasgo h3 { margin-top: 22px; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.2px; }
.rasgo p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--gris); }

.cabeza-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.cabeza-seccion .titulo-2 { margin-top: 8px; }
.rutas { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* La tarjeta de ruta: un horario, no una postal. */
.salida { display: flex; flex-direction: column; background: #fff; border-radius: 24px; padding: 28px; color: var(--tinta); box-shadow: 0 0 0 1px #ececf1, 0 24px 48px -34px rgba(20,30,90,.35); transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.salida:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 0 0 1px #e3e6f0, 0 32px 56px -30px rgba(20,30,90,.45); }
.salida__cabeza { display: flex; justify-content: space-between; align-items: center; }
.salida h3 { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -.5px; }
.salida__ir { width: 36px; height: 36px; border-radius: 18px; background: #eef2fe; line-height: 34px !important; color: var(--azul); font-size: 22px; line-height: 30px; text-align: center; transition: transform .3s var(--curva); }
.salida:hover .salida__ir { transform: translateX(4px); }
.salida__linea { position: relative; display: flex; justify-content: space-between; align-items: center; height: 12px; margin: 24px 0 12px; }
.salida__linea::before, .salida__linea::after { content: ''; position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; border-radius: 1px; background: var(--filete); }
.salida__linea::after { background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva); }
.salida:hover .salida__linea::after { transform: scaleX(1); }
.salida__linea i, .salida__linea b { position: relative; z-index: 1; }
.salida__linea i { width: 12px; height: 12px; border-radius: 6px; background: var(--azul); }
.salida__linea i:first-child { background: #fff; box-shadow: inset 0 0 0 3px var(--azul); }
.salida__linea b { width: 6px; height: 6px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px var(--filete); }
.salida__via { font-size: 15px; line-height: 22px; color: var(--gris); }
.salida__pie { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; line-height: 20px; color: var(--tinta-2); }
.salida__pie strong { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -.3px; color: var(--azul); white-space: nowrap; }
.salida__pie small { font-size: 13px; font-weight: 500; color: var(--gris); letter-spacing: 0; }

/* SI MANEJAS (06-10-2026, el dueño: «el rectángulo negro no se ve bien»).
   Un panel azul muy claro en vez de la losa negra: sigue la marca, no pesa,
   y la calculadora es una tarjeta blanca encima, como en la app. Un solo
   botón (publicar), sin repetir las tiendas por tercera vez en la página. */
.manejas { background: #eef2fe; border-radius: 32px; padding: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.manejas .titulo-2 { margin-top: 8px; }
.manejas__entrada { margin-top: 20px; font-size: 19px; line-height: 28px; color: var(--tinta-2, #424245); max-width: 30em; }
.manejas__boton { margin-top: 32px; }
.calculadora { background: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 18px 40px -18px rgba(47,102,240,.28); }
.calculadora__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; line-height: 22px; }
.calculadora__fila span:first-child { color: var(--gris); }
.calculadora .cifras { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.segmentado { display: flex; gap: 4px; background: var(--superficie); border-radius: 12px; padding: 4px; }
.segmentado button { border: 0; cursor: pointer; width: 44px; height: 36px; border-radius: 9px; font-size: 16px; font-weight: 600; background: transparent; color: var(--gris); transition: background .2s, color .2s; }
.segmentado button[aria-checked="true"] { background: var(--azul); color: #fff; }
.calculadora__resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calculadora__resultados div { background: var(--superficie); border-radius: 16px; padding: 16px 18px; }
.calculadora__resultados div:last-child { background: #eaf0fe; }
.calculadora__resultados small { display: block; font-size: 14px; line-height: 18px; color: var(--gris); }
.calculadora__resultados strong { display: block; margin-top: 6px; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.calculadora__resultados .tuyo { color: var(--azul); }
.calculadora .linea { height: 1px; background: var(--filete); }
.calculadora__nota { font-size: 13px; line-height: 18px; color: var(--gris); }

.preguntas { border-top: 1px solid var(--filete); }
.preguntas details { border-bottom: 1px solid var(--filete); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 72px; font-size: 19px; line-height: 26px; font-weight: 600; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font-size: 28px; font-weight: 400; color: var(--azul); transition: transform .25s ease; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-bottom: 24px; color: var(--gris); }

.llamada { position: relative; margin-top: 56px; background: radial-gradient(70% 120% at 0% 0%, rgba(140,180,255,.45), transparent 60%), radial-gradient(60% 100% at 100% 100%, rgba(20,40,170,.45), transparent 60%), var(--azul); color: #fff; border-radius: 32px; padding: 72px 64px 64px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.llamada__caras { position: absolute; z-index: -1; left: 64px; top: -40px; }
.llamada__svg { display: block; width: 168px; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,60,.25)); }
.llamada__svg .mascota__parpado { animation: pestanea 5.2s 2.4s infinite; }
.llamada p { margin-top: 12px; font-size: 19px; line-height: 28px; color: rgba(255,255,255,.86); }

/* ── Pie ────────────────────────────────────────────────────── */
.pie { margin-top: var(--entre); border-top: 1px solid var(--filete); padding: 48px 0 40px; }
.pie__marca { grid-column: span 4; }
.pie__marca p { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--gris); max-width: 300px; }
.pie nav { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 20px; }
.pie nav:first-of-type { grid-column: 6 / span 2; }
.pie nav strong { font-weight: 600; }
.pie nav a { color: var(--tinta-2); }
.pie__final { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filete-suave); display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; color: var(--gris); }

/* ── Páginas interiores ─────────────────────────────────────── */
.cabeza-interior { padding-bottom: 80px; }
.migas { margin-top: 24px; font-size: 15px; line-height: 20px; color: rgba(255,255,255,.78); }
.migas a { color: rgba(255,255,255,.78) !important; }
.cabeza-interior h1 { font-size: 64px; line-height: 66px; font-weight: 700; letter-spacing: -1.8px; }
.cabeza-interior .entradilla { margin-top: 24px; color: rgba(255,255,255,.86); }
.cabeza-interior .tiendas { margin-top: 40px; }
.cabeza-interior__texto { grid-column: 1 / span 7; margin-top: 24px; }
.hoja-datos { grid-column: 9 / span 4; align-self: end; background: #fff; color: var(--tinta); border-radius: 24px; padding: 8px 24px; }
.hoja-datos div { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--filete-suave); gap: 16px; }
.hoja-datos div:last-child { border-bottom: 0; }
.hoja-datos dt { color: var(--gris); }
.hoja-datos dd { font-weight: 600; text-align: right; }

.articulo { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 56px; }
.articulo h2 { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.6px; }
.articulo h2 + p, .articulo h2 + ol, .articulo p + p { margin-top: 16px; }
.articulo p { font-size: 19px; line-height: 30px; color: var(--tinta-2); }
.paradas { list-style: none; padding: 0; margin-top: 24px; }
.paradas li { display: grid; grid-template-columns: 24px 1fr; column-gap: 16px; align-items: center; height: 52px; font-size: 17px; }
.paradas li::before { content: ''; justify-self: center; width: 8px; height: 8px; border-radius: 4px; background: var(--filete); }
.paradas li:first-child::before { width: 12px; height: 12px; border-radius: 6px; border: 3px solid var(--azul); background: #fff; }
.paradas li:last-child::before { width: 12px; height: 12px; border-radius: 6px; background: var(--azul); }
.paradas li:first-child, .paradas li:last-child { font-weight: 600; }
.lateral { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 24px; align-self: start; position: sticky; top: 24px; }
.caja { background: var(--superficie); border-radius: 24px; padding: 32px; }
.caja p { margin-top: 8px; color: var(--gris); }
.caja .tiendas { margin-top: 24px; }
.lista-enlaces { display: flex; flex-direction: column; }
.lista-enlaces > span { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--gris); padding-bottom: 8px; }
.lista-enlaces a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--filete-suave); color: var(--tinta); }
.lista-enlaces a:last-child { border-bottom: 1px solid var(--filete-suave); }
.lista-enlaces a::after { content: '›'; color: #c7c7cc; font-size: 20px; }
.lista-enlaces a:hover { text-decoration: none; color: var(--enlace); }

.ayuda-cabeza h1 { margin-top: 40px; font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -1.4px; }
.cuerpo-ayuda { padding-top: 64px; }
.indice { grid-column: 10 / span 3; grid-row: 1; display: flex; flex-direction: column; font-size: 15px; line-height: 20px; align-self: start; position: sticky; top: 24px; }
.indice span { font-size: 13px; font-weight: 600; color: var(--gris); padding: 0 12px 8px; }
.indice span + a { margin-top: 0; }
.indice a + span { padding-top: 24px; }
.indice a { min-height: 40px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; color: var(--tinta); }
.indice a:hover { background: var(--superficie); text-decoration: none; }
.indice a[aria-current] { background: #eaf0fe; color: var(--enlace); font-weight: 600; }
.texto-largo { grid-column: 1 / span 8; grid-row: 1; max-width: 720px; }
.texto-largo .ruta-migas { font-size: 15px; line-height: 20px; color: var(--gris); }
.texto-largo h1 { margin-top: 0; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -1px; }
.texto-largo .fecha { margin-top: 12px; font-size: 15px; color: var(--gris); }
.texto-largo h2 { margin-top: 48px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.4px; }
.texto-largo p, .texto-largo li { font-size: 19px; line-height: 30px; color: var(--tinta-2); }
.texto-largo p { margin-top: 12px; }
.texto-largo > h1 + p, .texto-largo > .fecha + p { margin-top: 24px; }
.texto-largo ul, .texto-largo ol { margin-top: 12px; padding-left: 24px; }
.texto-largo li + li { margin-top: 6px; }
.ejemplo { margin-top: 24px; background: var(--superficie); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: center; }
.ejemplo strong { display: block; font-size: 28px; line-height: 32px; font-weight: 700; }
.ejemplo span { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--gris); }
.ejemplo .azul { color: var(--azul); }
.ejemplo__pie { grid-column: 1 / -1; margin: 0 !important; font-size: 13px !important; line-height: 18px !important; color: var(--gris) !important; }
.urgente { margin-top: 24px; background: #fff1f0; border-radius: 16px; padding: 16px 20px; font-size: 17px; line-height: 26px; color: #8a1c14; }
.urgente a { color: #c4170c; font-weight: 700; }
.banda--fina { padding-bottom: 28px; }
.banda--fina .migas { margin-top: 8px; }
.ayuda-cabeza { padding-bottom: 64px; }
.ayuda-cabeza .entradilla { margin-top: 16px; color: rgba(255,255,255,.86); }
.grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.grupo h2 { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--gris); padding-bottom: 8px; }
.grupo .lista-enlaces a { min-height: 72px; padding: 12px 0; }
.grupo strong { display: block; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--tinta); }
.grupo small { display: block; font-size: 15px; line-height: 20px; color: var(--gris); }
.grupo a:hover strong { color: var(--enlace); }
.contacto { margin-top: 56px; border-top: 1px solid var(--filete); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.contacto strong { display: block; font-size: 19px; line-height: 26px; font-weight: 600; }
.aviso-borrador { margin-top: 24px; background: #fff8e6; border-radius: 16px; padding: 16px 20px; font-size: 15px; line-height: 22px; color: #6b4e00; }

/* ── Tabletas ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .portada h1 { font-size: 64px; line-height: 66px; letter-spacing: -1.8px; }
  .flota { display: none; }
}

/* ── Teléfono ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --margen: 20px; --entre: 64px; }
  .reticula { display: block; }
  .menu { display: none; }
  .menu.abierto { display: flex; position: absolute; top: 56px; left: 0; right: 0; z-index: 90; flex-direction: column; align-items: stretch; gap: 0; background: var(--azul); padding: 8px 20px 20px; box-shadow: 0 20px 40px -20px rgba(0,0,40,.5); }
  .menu.abierto a { min-height: 48px; display: flex; align-items: center; font-size: 17px; border-top: 1px solid rgba(255,255,255,.18); }
  .menu.abierto .boton-descargar { margin-top: 12px; justify-content: center; height: 48px; border-radius: 24px; border-top: 0; }
  .abrir-menu { display: flex; }
  .cabecera { height: 56px; position: relative; }
  .logotipo { width: 112px; height: auto; }
  .titulo-2 { font-size: 32px; line-height: 36px; letter-spacing: -.8px; }
  .antetitulo { font-size: 15px; line-height: 20px; }
  .entradilla { font-size: 17px; line-height: 26px; }
  .tiendas { gap: 10px; }
  .tiendas:not(.tiendas--apiladas) .tienda { flex: 1; justify-content: center; padding: 0 10px; }
  .tienda strong { font-size: 17px; }

  .portada { min-height: 0; }
  .portada__texto { padding-top: 24px; padding-bottom: 0; }
  .portada__ante { font-size: 15px; line-height: 20px; }
  .portada h1 { margin-top: 8px; font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .portada .entradilla { margin-top: 16px; }
  .portada .tiendas { margin-top: 24px; }
  .ruta-viva { display: none; }
  .solo-escritorio { display: none !important; }
  .habla-inicio { height: 118px; margin-top: 8px; }
  .asoman__caras { width: 150px; }
  .habla-fin { height: 110px; margin-bottom: -36px; }
  .demo { padding-top: 0; }
  .portada .tienda { height: 56px; }
  .llamada__caras { left: 24px; top: -30px; }
  .llamada__svg { width: 124px; }
  .llamada { padding-top: 56px; }
  .habla__globo { font-size: 15px; }
  /* El teléfono ya no se corta de golpe: se funde con la banda. */
  .portada__descargas-movil { display: block; padding: 32px 0 40px; position: relative; }
  .portada__descargas-movil .tiendas { margin-top: 0; }
  .portada__descargas-movil .portada__gratis { text-align: center; }
  /* La barra que se queda abajo cuando ya pasaste los botones. */
  .barra-descargar { display: flex; position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; padding: 10px 10px 10px 12px; background: #fff; color: var(--tinta); border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 16px 36px -12px rgba(0,0,40,.35); transform: translateY(160%); transition: transform .45s var(--curva); text-decoration: none !important; }
  .barra-descargar.visible { transform: none; }
  .barra-descargar__icono { width: 40px; height: 40px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--filete); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .barra-descargar__texto { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
  .barra-descargar__texto strong { font-size: 16px; line-height: 20px; }
  .barra-descargar__texto small { font-size: 13px; line-height: 17px; color: var(--gris); }
  .barra-descargar__boton { height: 40px; padding: 0 18px; border-radius: 20px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; }
  .demo__pasos, .demo__barra { display: none; }
  .demo__texto-movil { display: none !important; font-size: 15px; line-height: 22px; font-weight: 600; min-height: 22px; text-align: center; }
  .demo__puntos { display: flex; gap: 6px; margin: 0 0 4px; }
  .demo__puntos button { border: 0; padding: 0; background: transparent; height: 24px; display: flex; align-items: center; cursor: pointer; }
  .demo__puntos i { display: block; height: 6px; width: 6px; border-radius: 3px; background: rgba(255,255,255,.4); transition: width .35s var(--curva), background .3s; }
  .demo__puntos button[aria-selected="true"] i { width: 24px; background: #fff; }
  .telefono-caja { width: 253px; height: 406px; }
  .telefono { border-radius: 54px; padding-bottom: 12px; }
  .telefono__pantalla { border-radius: 44px; }
  .demo__puntos { display: none !important; }
  .telefono { transform: scale(.78); transform-origin: 0 0; }

  /* En el teléfono, una lista: icono a la izquierda, título y frase al lado.
     En dos columnas de 170 px las frases se partían en cuatro renglones. */
  .rasgos { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .rasgo { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 18px; border-radius: 20px; }

  .rasgo__icono { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; }
  .rasgo h3 { margin-top: 0; font-size: 16px; line-height: 21px; }
  .rasgo p { margin-top: 2px; font-size: 14px; line-height: 20px; }
  .cabeza-seccion { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rutas { margin: 24px calc(var(--margen) * -1) 0; padding: 0 var(--margen); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;  padding-bottom: 36px; margin-bottom: -36px; padding-top: 4px;}
  .rutas::-webkit-scrollbar { display: none; }
  .salida { flex: 0 0 272px; padding: 24px; scroll-snap-align: start; scroll-margin-left: var(--margen); }
  .salida h3 { font-size: 24px; line-height: 30px; }
  .salida__pie { flex-direction: column-reverse; align-items: flex-start; gap: 2px; padding-top: 16px; }
  .salida__pie span { white-space: nowrap; }
  .manejas { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px 20px; border-radius: 24px; }
  .manejas__texto { padding: 0 4px; }
  .manejas__entrada { font-size: 17px; line-height: 26px; margin-top: 14px; }
  .manejas__boton { margin-top: 24px; width: 100%; }
  .calculadora { padding: 20px; gap: 16px; }
  .calculadora__fila:first-child { flex-wrap: wrap; }
  .calculadora__fila span { flex: 1 1 auto; }
  .calculadora__fila .cifras { flex: 0 0 auto; }
  .calculadora__resultados strong { font-size: 26px; line-height: 32px; }
  .preguntas summary { min-height: 60px; font-size: 17px; line-height: 24px; }
  .preguntas details p { font-size: 16px; line-height: 24px; padding-bottom: 20px; }
  .preguntas-bloque > div:first-child { margin-bottom: 16px; }
  .llamada { flex-direction: column; align-items: stretch; padding: 32px 24px; border-radius: 24px; }
  .llamada .tiendas { width: 100%; }
  .pie { padding: 32px 0 40px; }
  .pie .reticula { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .pie__marca { grid-column: span 2 !important; }
  .pie nav, .pie nav:first-of-type { grid-column: span 1; }

  .cabeza-interior { padding-bottom: 40px; }
  .cabeza-interior h1 { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .hoja-datos { margin-top: 32px; }
  .articulo { gap: 40px; }
  .articulo h2 { font-size: 26px; line-height: 32px; }
  .articulo p { font-size: 17px; line-height: 27px; }
  .lateral { position: static; margin-top: 48px; }
  .ayuda-cabeza h1 { margin-top: 24px; font-size: 36px; line-height: 40px; }
  .ayuda-cabeza { padding-bottom: 40px; }
  .grupos { grid-template-columns: 1fr; gap: 40px; }
  .cuerpo-ayuda { padding-top: 40px; }
  .indice { position: static; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--filete); }
  .ejemplo { padding: 20px 12px; gap: 8px; }
  .ejemplo strong { font-size: 22px; line-height: 28px; }
  .texto-largo h1 { font-size: 32px; line-height: 36px; }
  .texto-largo p, .texto-largo li { font-size: 17px; line-height: 27px; }
  .contacto { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dedo, .onda { display: none; }
}