/* Viajapp landing. Values follow the landing-page-design skill:
   type on Tailwind's scale, spacing on its 0–96 px ladder, Tailwind radii, one easing. */
@font-face { font-family: "Geist"; src: url("/fuentes/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --papel: #FBFAF6; --hundido: #F2F0E9; --regla: #E5E2D8;
  --tinta: #191A16; --tinta60: #5B5D54; --tinta40: #6F7267; --tinta20: #A8AA9F;
  --naranja: #FF5A2B; --naranja-velo: #FFE7DD;
  /* Orange as text: the bright one is 2.98:1 on paper. Small text uses the dark one (5.6:1),
     big display numbers the middle one (3.6:1, enough for large text). */
  --naranja-texto: #B8360A; --naranja-grande: #EC4D1B;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* What answers a hover or a press: quick, so the page feels under your finger. */
  --toque: 220ms cubic-bezier(0.23, 1, 0.32, 1);
  /* From the app (src/diseno/tema.tsx): lime is never text, always a fill under ink. */
  --lima: #D6F24B; --verde: #0E5A4E; --verde-velo: #DCEFE8; --whatsapp: #25D366;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px; --s9: 64px; --s10: 80px; --s11: 96px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s11); -webkit-text-size-adjust: 100%; }
body { background: var(--papel); color: var(--tinta); font-family: "Geist", system-ui, sans-serif; font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; border-radius: 8px; }
.ico { width: 20px; height: 20px; flex: none; }
.contenedor { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s5); }
@media (min-width: 768px) { .contenedor { padding: 0 var(--s8); } }

.saltar { position: fixed; left: var(--s4); top: var(--s4); z-index: 100; padding: var(--s2) var(--s3); border-radius: 8px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; font-weight: 600; transform: translateY(-200%); transition: transform 500ms var(--ease); }
.saltar:focus { transform: none; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); padding-right: var(--s5); border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 16px; line-height: 24px; font-weight: 600; transition: transform var(--toque), background-color var(--toque); }
.btn:hover { transform: translateY(-2px); background: #000; }
.btn:active { transform: scale(0.98); }
.btn-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: var(--naranja); color: var(--tinta); transition: transform var(--toque); }
.btn:hover .btn-ico { transform: rotate(-8deg) scale(1.06); }
.btn-ico .ico { width: 16px; height: 16px; }
.btn-claro { background: var(--papel); color: var(--tinta); }
.btn-claro:hover { background: #fff; }
.btn-chico { gap: var(--s2); padding: var(--s2) var(--s3); font-size: 14px; line-height: 20px; }
.btn-chico .ico { width: 16px; height: 16px; }

/* ── Floating nav ────────────────────────────────────────────────── */
/* Not above the hero: a paper-glass pill that drops in once ~85% of the hero is behind you
   and leaves when you go back up (l/landing.js toggles data-visible, inert and aria-hidden). */
.nav { position: fixed; top: var(--s4); left: 50%; z-index: 50; transform: translate(-50%, -140%); opacity: 0; pointer-events: none; transition: transform 640ms var(--ease), opacity 320ms var(--ease); }
.nav[data-visible="true"] { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.nav-pill { display: flex; align-items: center; gap: var(--s2); padding: 6px 6px 6px var(--s5); border-radius: 9999px; background: rgba(251, 250, 246, 0.82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 18px 40px -16px rgba(25, 26, 22, 0.28), inset 0 0 0 1px rgba(25, 26, 22, 0.07); white-space: nowrap; }
.marca { margin-right: 10px; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.03em; }
.marca-punto { color: var(--naranja); }
.nav-links { display: flex; gap: 2px; }
.nav-links a { display: block; padding: 10px 14px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta60); transition: background-color var(--toque), color var(--toque); }
.nav-links a:hover { background: var(--hundido); color: var(--tinta); }
.nav-links a[aria-current="true"] { background: var(--hundido); color: var(--tinta); }
.nav-pill .btn-chico { margin-left: 6px; padding: 10px var(--s4); }
/* Compact on a phone: the brand and the way into the web app. */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-pill { padding-left: var(--s4); }
  .marca { margin-right: var(--s2); }
}

/* ── Reveal on scroll ────────────────────────────────────────────── */
.aparece { opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity 1000ms var(--ease), transform 1100ms var(--ease), filter 900ms var(--ease); }
.aparece.visible { opacity: 1; transform: none; filter: none; }
/* The hero plays on its own, in CSS, from the first frame: it does not wait for the scripts,
   so the largest paint is not held back by them. */
.entra { animation: entra 1000ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes entra { from { opacity: 0; transform: translateY(40px); filter: blur(8px); } }
/* The title is the largest paint: it settles into place but is opaque from the first frame,
   so the browser counts it as painted right away (a fade from 0 would hold the LCP back). */
.titulo-hero.entra { animation-name: titulo; }
@keyframes titulo { from { transform: translateY(24px); } }

/* ── Hero ────────────────────────────────────────────────────────── */
/* Ink, full width: a wall of six photo columns tilted -6°, alternately drifting up and down,
   under a radial veil that keeps the middle dark for the title. */
.hero { position: relative; height: 900px; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--tinta); color: var(--papel); isolation: isolate; }
.muro { position: absolute; inset: -120px -60px; display: flex; gap: 18px; rotate: -6deg; z-index: -2; }
.muro-col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.muro-pista { display: flex; flex-direction: column; gap: 18px; animation: var(--dur) linear infinite; }
.muro-sube { animation-name: muro-sube; }
.muro-baja { animation-name: muro-baja; }
@keyframes muro-sube { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 9px)); } }
@keyframes muro-baja { from { transform: translateY(calc(-50% - 9px)); } to { transform: translateY(0); } }
.muro figure { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #2A2B26; }
.muro img { width: 100%; height: 100%; object-fit: cover; display: block; }
.muro figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 13px; line-height: 16px; font-weight: 600; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero-velo, .hero-velo::before, .hero-velo::after { position: absolute; pointer-events: none; }
.hero-velo { inset: 0; z-index: -1; background: radial-gradient(ellipse 46% 52% at 50% 50%, rgba(25, 26, 22, 0.96) 0%, rgba(25, 26, 22, 0.9) 40%, rgba(25, 26, 22, 0.55) 72%, rgba(25, 26, 22, 0.22) 100%); }
.hero-velo::before { content: ""; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(180deg, var(--tinta), rgba(25, 26, 22, 0)); }
.hero-velo::after { content: ""; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(0deg, var(--papel) 0%, rgba(25, 26, 22, 0.85) 35%, rgba(25, 26, 22, 0)); }
.hero-texto { position: relative; height: 100%; max-width: 980px; margin: 0 auto; padding: 0 var(--s6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
/* Where the floating nav comes in: 85% down the hero. */
.hero-umbral { position: absolute; left: 0; top: 85%; width: 1px; height: 1px; }
@media (max-width: 767px) {
  .hero { height: auto; min-height: 100svh; }
  .hero-texto { min-height: 100svh; padding: var(--s10) var(--s4); gap: var(--s5); }
  .muro { gap: 10px; inset: -80px -40px; opacity: 0.7; }
  .muro-pista { gap: 10px; }
  @keyframes muro-sube { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 5px)); } }
  @keyframes muro-baja { from { transform: translateY(calc(-50% - 5px)); } to { transform: translateY(0); } }
  .muro figure { border-radius: 14px; }
  .muro figcaption { display: none; }
  .hero-velo { background: radial-gradient(ellipse 85% 45% at 50% 48%, rgba(25, 26, 22, 0.92) 0%, rgba(25, 26, 22, 0.8) 55%, rgba(25, 26, 22, 0.4) 100%); }
}
.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3) var(--s1) var(--s1); border-radius: 9999px; background: var(--hundido); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta60); transition: background-color var(--toque), color var(--toque); }
a.chip:hover { background: var(--regla); color: var(--tinta); }
a.chip .ico { width: 16px; height: 16px; transition: transform var(--toque); }
a.chip:hover .ico { transform: translateX(2px); }
.chip-nuevo { padding: 2px var(--s2); border-radius: 9999px; background: var(--lima); color: var(--tinta); font-size: 12px; line-height: 16px; font-weight: 600; }
.punto { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--naranja); }
.punto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--naranja); animation: latido 2400ms var(--ease) infinite; }
@keyframes latido { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3); opacity: 0; } }
/* Solid ink, not gradient text: with `color: transparent` the browser does not count the title
   as the largest paint, and the page waited on the next thing (Lighthouse, 3 s more of LCP). */
.titulo-hero { margin: 0; font-size: clamp(56px, 9.4vw, 140px); line-height: 0.9; font-weight: 800; letter-spacing: -0.06em; color: var(--papel); }
.titulo-hero .acento { color: var(--naranja); }
.bajada { max-width: 560px; font-size: 18px; line-height: 28px; color: rgba(251, 250, 246, 0.8); text-wrap: pretty; }
@media (min-width: 768px) { .bajada { font-size: 20px; line-height: 31px; } }
.acciones { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.hero .acciones-fila { gap: var(--s3); }
.hero .btn-tienda { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45); }
.hero .tienda-aviso { color: rgba(251, 250, 246, 0.85); }
.prueba { font-size: 14px; line-height: 20px; color: var(--tinta40); }
.acciones-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s5); }
.enlace-tienda { display: inline-flex; align-items: center; gap: var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta60); transition: color var(--toque); }
.enlace-tienda .ico { width: 16px; height: 16px; }
a.enlace-tienda:hover { color: var(--tinta); }
.enlace-tienda.claro { color: rgba(251, 250, 246, 0.85); }
a.enlace-tienda.claro:hover { color: var(--papel); }
.btn-chico .ico { transition: transform var(--toque); }
.btn-chico:hover .ico { transform: translateX(2px); }
.prueba span { margin: 0 var(--s1); }

/* ── Ribbons ─────────────────────────────────────────────────────── */
.cintas { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s11) 0; overflow: hidden; }
.cinta { display: flex; gap: var(--s4); width: max-content; animation: cinta 90s linear infinite; }
.cinta-inversa { animation-direction: reverse; animation-duration: 110s; }
.cintas:hover .cinta { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta-item { position: relative; width: 320px; height: 220px; border-radius: 16px; overflow: hidden; flex: none; background: var(--regla); }
.cinta-item img { width: 100%; height: 100%; object-fit: cover; }
.cinta-item span { position: absolute; left: var(--s2); bottom: var(--s2); padding: var(--s1) var(--s3); border-radius: 9999px; background: rgba(251, 250, 246, 0.92); font-size: 14px; line-height: 20px; font-weight: 600; }
@media (max-width: 767px) { .cinta-item { width: 220px; height: 150px; } }

/* ── Tagline, word by word ───────────────────────────────────────── */
.frase { padding-top: var(--s11); padding-bottom: var(--s11); }
.frase-texto { max-width: 900px; margin: 0 auto; font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.035em; text-align: center; text-wrap: balance; }
@media (min-width: 768px) { .frase-texto { font-size: 60px; line-height: 1; } }
/* Muted, but still 3.4:1: large text keeps its contrast before the words light up. */
.frase-texto .p { color: #878980; transition: color 900ms var(--ease); }
.frase-texto .p.on { color: var(--tinta); }

/* ── Benefits ────────────────────────────────────────────────────── */
.beneficios { display: flex; flex-direction: column; gap: var(--s11); padding-top: var(--s11); padding-bottom: var(--s11); }
.beneficio { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .beneficio { grid-template-columns: 7fr 5fr; gap: var(--s10); }
  .beneficio-inverso { grid-template-columns: 5fr 7fr; }
  .beneficio-inverso .beneficio-foto { order: 2; }
}
.beneficio-foto { border-radius: 24px; overflow: hidden; overflow: clip; aspect-ratio: 4 / 3; background: var(--regla); clip-path: inset(8% 8% 8% 8% round 24px); transition: clip-path 1400ms var(--ease); }
.beneficio-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1800ms var(--ease); }
.beneficio.visible .beneficio-foto { clip-path: inset(0 0 0 0 round 24px); }
.beneficio.visible .beneficio-foto img { transform: scale(1); }
.beneficio-texto { display: flex; flex-direction: column; gap: var(--s4); }
.insignia { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--naranja-velo); color: var(--naranja); }
.insignia .ico { width: 24px; height: 24px; }
.beneficio h2 { font-size: 36px; line-height: 40px; letter-spacing: -0.035em; }
@media (min-width: 768px) { .beneficio h2 { font-size: 48px; line-height: 1; } }
.beneficio p { font-size: 18px; line-height: 28px; color: var(--tinta60); max-width: 440px; }

/* ── Section heads ───────────────────────────────────────────────── */
.seccion-cabeza { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s9); }
.rotulo { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--naranja-texto); }
.seccion-cabeza h2 { font-size: 48px; line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 768px) { .seccion-cabeza h2 { font-size: 72px; } }

/* ── How it works: sticky phone ──────────────────────────────────── */
.como { padding-top: var(--s11); padding-bottom: var(--s11); }
.como-grilla { display: grid; gap: var(--s9); }
.paso { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) 0; border-top: 1px solid var(--regla); }
.paso-n { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta40); transition: color 700ms var(--ease); }
.paso h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.03em; }
.paso p { font-size: 18px; line-height: 28px; color: var(--tinta60); max-width: 440px; }
.paso-marco { display: block; }
.paso-captura { width: 240px; margin-top: var(--s4); border-radius: 24px; border: 1px solid var(--regla); }
.telefono-columna { display: none; }
@media (min-width: 900px) {
  .como-grilla { grid-template-columns: 1fr 1fr; gap: var(--s10); }
  .paso { min-height: 70vh; justify-content: center; }
  /* The steps not in view step back with color, not opacity, so they stay readable. */
  .paso h3, .paso p { transition: color 900ms var(--ease); }
  .paso:not(.activo) h3, .paso:not(.activo) p, .paso:not(.activo) .paso-n { color: var(--tinta40); }
  .paso.activo .paso-n { color: var(--naranja-texto); }
  .paso-captura { display: none; }
  .telefono-columna { display: block; }
  .telefono { position: sticky; top: calc(50vh - 340px); width: 320px; height: 680px; margin: 0 auto; border-radius: 32px; padding: var(--s3); background: var(--tinta); box-shadow: 0 40px 80px rgba(25, 26, 22, 0.16); }
  .telefono img { position: absolute; inset: var(--s3); width: calc(100% - 24px); height: calc(100% - 24px); object-fit: cover; object-position: top; border-radius: 20px; opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
  .telefono img.activa { opacity: 1; transform: none; }
}

/* ── Cities ──────────────────────────────────────────────────────── */
.ciudades { padding-top: var(--s11); padding-bottom: var(--s11); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); margin-top: calc(-1 * var(--s6)); }
.filtro { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: 9999px; background: var(--hundido); font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color var(--toque), color var(--toque), transform var(--toque); }
.filtro span { color: var(--tinta60); font-weight: 500; transition: color var(--toque); }
.filtro:hover { background: var(--regla); }
.filtro:active { transform: scale(0.98); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.filtro[aria-pressed="true"] span { color: var(--tinta20); }
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
@media (min-width: 768px) { .grilla { grid-template-columns: repeat(3, 1fr); gap: var(--s8) var(--s5); } }
@media (min-width: 1100px) { .grilla { grid-template-columns: repeat(4, 1fr); } }
.ciudad a { display: flex; flex-direction: column; gap: var(--s3); border-radius: 16px; }
.ciudad a:hover h3 { color: var(--naranja-texto); }
.ciudad h3 { transition: color var(--toque); }
.ciudad[hidden] { display: none; }
.ciudad-foto { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--regla); }
.ciudad-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.ciudad:hover .ciudad-foto img { transform: scale(1.05); }
/* A city whose photo is not licensed yet gets a type tile instead of a picture. */
.sin-foto { display: flex; align-items: flex-end; width: 100%; height: 100%; padding: var(--s4); background: var(--tinta); color: var(--naranja); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.03em; }
.ciudad h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; }
.ciudad p { font-size: 14px; line-height: 20px; color: var(--tinta40); margin-top: calc(-1 * var(--s2)); }
.ciudad.aparece { transition-delay: calc(var(--k, 0) * 60ms); }
.pedido { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s5); padding: var(--s6); border-radius: 16px; background: var(--hundido); transition: background-color var(--toque), transform var(--toque); }
.pedido:hover { background: var(--regla); }
.pedido:active { transform: scale(0.98); }
.pedido h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.03em; }
.pedido p { font-size: 16px; line-height: 24px; color: var(--tinta60); margin-top: var(--s2); max-width: 360px; }
.pedido .mas { display: inline-flex; align-items: center; gap: var(--s2); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--naranja-texto); }
.pedido:hover .mas .ico { transform: translateX(4px); }
.pedido .mas .ico { transition: transform var(--toque); }
.pedido[hidden] { display: none; }
@media (min-width: 768px) and (max-width: 1099px) { .pedido { grid-column: span 1; } }

/* ── Numbers ─────────────────────────────────────────────────────── */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8) var(--s5); padding-top: var(--s11); padding-bottom: var(--s11); }
@media (min-width: 900px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s5); border-top: 1px solid var(--regla); }
.numero strong { font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .numero strong { font-size: 96px; } }
.numero span { font-size: 16px; line-height: 24px; color: var(--tinta60); }
.numero:nth-child(2) strong { color: var(--naranja-grande); }

/* ── Price ───────────────────────────────────────────────────────── */
.precio { padding-top: var(--s11); padding-bottom: var(--s11); }
.precio-tarjeta { display: grid; gap: var(--s8); padding: var(--s8) var(--s6); border-radius: 24px; background: var(--tinta); color: var(--papel); }
@media (min-width: 900px) { .precio-tarjeta { grid-template-columns: 1fr 1fr; padding: var(--s10); align-items: center; } }
.precio-tarjeta .rotulo { color: var(--naranja); } /* on ink the bright orange reads (5.6:1) */
.precio-tarjeta h2 { font-size: 36px; line-height: 40px; letter-spacing: -0.035em; margin-top: var(--s3); }
@media (min-width: 768px) { .precio-tarjeta h2 { font-size: 48px; line-height: 1; } }
.precio-lista { display: flex; flex-direction: column; gap: var(--s5); }
.precio-lista li { display: flex; gap: var(--s4); align-items: flex-start; font-size: 18px; line-height: 28px; color: rgba(251, 250, 246, 0.8); }
.precio-lista .ico { width: 24px; height: 24px; color: var(--naranja); margin-top: var(--s25, 2px); }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.preguntas { padding-top: var(--s11); padding-bottom: var(--s11); }
.faq { display: flex; flex-direction: column; max-width: 860px; }
.faq details { border-top: 1px solid var(--regla); }
.faq details:last-child { border-bottom: 1px solid var(--regla); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; list-style: none; transition: color var(--toque); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--naranja); }
.faq summary .ico { transition: transform 500ms var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease); }
.faq-r > p { overflow: hidden; font-size: 18px; line-height: 28px; color: var(--tinta60); max-width: 680px; }
.faq details.abierto .faq-r { grid-template-rows: 1fr; }
.faq details.abierto .faq-r > p { padding-bottom: var(--s5); }

/* ── Closing ─────────────────────────────────────────────────────── */
/* clip, not hidden: hidden makes the card a scroll container and the photo's view() timeline would never run. */
.cierre { position: relative; margin: var(--s11) var(--s4) 0; border-radius: 24px; overflow: hidden; overflow: clip; min-height: 80vh; display: flex; align-items: center; color: var(--papel); }
@media (min-width: 768px) { .cierre { margin: var(--s11) var(--s5) 0; } }
.cierre-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  .cierre-foto { animation: acerca linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes acerca { from { transform: translateY(-8%) scale(1.16); } to { transform: translateY(8%) scale(1.16); } }
}
.cierre-velo { position: absolute; inset: 0; background: rgba(25, 26, 22, 0.42); }
.cierre-texto { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s6); padding-top: var(--s11); padding-bottom: var(--s11); }
.cierre h2 { max-width: 680px; font-size: 48px; line-height: 1; letter-spacing: -0.045em; }
@media (min-width: 768px) { .cierre h2 { font-size: 96px; max-width: 900px; } }
.cierre .prueba { color: rgba(251, 250, 246, 0.8); }

/* ── Footer ──────────────────────────────────────────────────────── */
.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); padding-top: var(--s9); padding-bottom: var(--s9); font-size: 14px; line-height: 20px; color: var(--tinta40); }
.pie ul { display: flex; gap: var(--s5); }
.pie ul a { transition: color var(--toque); }
.pie ul a:hover { color: var(--tinta); }
.pie .marca { display: inline-flex; align-items: center; gap: var(--s2); color: var(--tinta); }
.pie ul { flex-wrap: wrap; gap: var(--s3) var(--s5); }
.pie ul a { white-space: nowrap; }


/* ── Shared bits of the new sections ─────────────────────────────── */
.seccion-bajada { max-width: 640px; font-size: 18px; line-height: 28px; color: var(--tinta60); }
@media (min-width: 768px) { .seccion-bajada { font-size: 20px; line-height: 28px; } }
/* The app's marker: lime under the words that carry the line ("Juntos pisaron 2 países"). */
.lima { background: linear-gradient(var(--lima), var(--lima)) no-repeat 0 88% / 100% 40%; padding: 0 4px; margin: 0 -4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Like the app's marker, it sweeps once from left to right when its heading arrives. */
.aparece.visible .lima { animation: pasada 800ms var(--ease) 500ms backwards; }
@keyframes pasada { from { background-size: 0% 40%; } }
.bandera { margin-right: 6px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; }
/* WhatsApp's own glyph and green, always next to the word "WhatsApp" (green on a light fill is decoration, not the label). */
.ico.wa { color: var(--whatsapp); }
.por-wa { display: flex; align-items: flex-start; gap: var(--s2); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--tinta); }
.por-wa .ico { width: 20px; height: 20px; margin-top: 2px; }
.faq .ico.wa { display: inline-block; width: 18px; height: 18px; margin: 0 4px -3px 0; }

/* A phone: ink bezel, concentric corners (40 outside, 8 of bezel, 32 on the screen). */
.movil { flex: none; width: var(--ancho, 248px); padding: 8px; border-radius: 40px; background: var(--tinta); box-shadow: 0 40px 80px -32px rgba(25, 26, 22, 0.45), 0 0 0 1px rgba(25, 26, 22, 0.06); }
.movil img { display: block; width: 100%; height: auto; border-radius: 32px; }

/* ── What is new: a bento of three ───────────────────────────────── */
.nuevo { padding-top: var(--s11); padding-bottom: var(--s11); }
.nuevo .seccion-cabeza h2 { max-width: 900px; }
.bento { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); gap: var(--s5); }
  .celda-viaje { grid-column: span 7; }
  .celda-pasaporte { grid-column: span 5; }
  .celda.celda-pedido { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: var(--s8); }
  .celda-pedido .celda-texto { flex: 1; align-self: center; padding-bottom: var(--s8); }
  .celda-pedido .celda-moviles { flex: 1.2; margin-top: 0; }
}
.celda { position: relative; display: flex; flex-direction: column; gap: var(--s6); padding: var(--s6) var(--s5) 0; border-radius: 24px; overflow: hidden; isolation: isolate; }
@media (min-width: 768px) { .celda { padding: var(--s8) var(--s8) 0; } }
.celda-viaje { background: var(--hundido); --asoma: 440px; }
.celda-pasaporte { background: var(--verde-velo); --asoma: 360px; }
.celda-pedido { background: var(--naranja-velo); --asoma: 380px; }
.celda-texto { display: flex; flex-direction: column; gap: var(--s3); max-width: 520px; }
.celda h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.03em; }
.celda-texto > p:not([class]) { font-size: 18px; line-height: 28px; color: var(--tinta60); }
.celda-texto .por-wa { margin-top: var(--s2); }
/* The phones peek out of the bottom edge: the cell clips them, so they read as sitting in it. */
.celda-moviles { position: relative; display: flex; justify-content: center; gap: var(--s4); height: var(--asoma); margin-top: auto; }
.celda-viaje .movil { --ancho: 236px; }
.celda-pasaporte .movil { --ancho: 236px; }
.celda-pedido .movil { --ancho: 220px; }
@media (min-width: 768px) {
  .celda .movil-atras { transform: translateY(var(--s8)) rotate(-3deg); }
  .celda .movil-frente { transform: rotate(2deg); }
}
@media (max-width: 767px) {
  .celda { --asoma: 280px; }
  .celda-moviles .movil { width: min(var(--ancho), calc(50% - 8px)); }
  .celda-pasaporte .movil { width: 64%; }
}
.cruce-rotulo { margin-top: var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--verde); }
.cruce { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cruce li { display: inline-flex; align-items: center; min-height: 40px; padding: var(--s2) var(--s3); border-radius: 9999px; background: var(--papel); font-size: 14px; line-height: 20px; font-weight: 600; }

/* ── Where do I go in March: same rule as the app's Buscar ───────── */
.cuando { padding-top: var(--s11); padding-bottom: var(--s11); }
.cuando .seccion-cabeza { margin-bottom: var(--s6); }
.meses { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s5)); padding: var(--s1) var(--s5); }
.meses::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .meses { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.mes { flex: none; min-height: 40px; padding: var(--s2) var(--s4); border-radius: 9999px; background: var(--hundido); font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color var(--toque), color var(--toque), transform var(--toque); }
.mes:hover { background: var(--regla); }
.mes:active { transform: scale(0.96); }
.mes[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.meses-cuenta { margin-top: var(--s6); font-size: 16px; line-height: 24px; color: var(--tinta60); font-variant-numeric: tabular-nums; }
.meses-cuenta b { color: var(--tinta); font-weight: 600; }
.meses-lista { display: flex; gap: var(--s4); min-height: 318px; overflow-x: auto; scroll-snap-type: x mandatory; margin: var(--s4) calc(-1 * var(--s5)) 0; padding: 0 var(--s5) var(--s4); scroll-padding: 0 var(--s5); }
@media (min-width: 768px) { .meses-lista { margin-left: calc(-1 * var(--s8)); margin-right: calc(-1 * var(--s8)); padding-left: var(--s8); padding-right: var(--s8); scroll-padding: 0 var(--s8); } }
.mes-ciudad { flex: none; width: 200px; scroll-snap-align: start; animation: mes-entra 700ms var(--ease) both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes mes-entra { from { opacity: 0; transform: translateY(16px); } }
.mes-ciudad a { display: flex; flex-direction: column; gap: var(--s2); border-radius: 16px; }
.mes-ciudad .foto { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--regla); }
.mes-ciudad .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease); }
.mes-ciudad .sin-foto { font-size: 24px; line-height: 32px; }
.mes-ciudad a:hover .foto img { transform: scale(1.05); }
.mes-ciudad b { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.mes-ciudad small { margin-top: calc(-1 * var(--s2)); font-size: 14px; line-height: 20px; color: var(--tinta60); }
.mes-vacio { align-self: center; max-width: 420px; font-size: 18px; line-height: 28px; color: var(--tinta60); }
.meses-criterio { max-width: 720px; margin-top: var(--s2); font-size: 14px; line-height: 20px; color: var(--tinta60); }

/* ── Beaches and neighbourhoods ranking ──────────────────────────── */
.ranking { padding-top: var(--s11); padding-bottom: var(--s11); }
.ranking-grilla { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .ranking-grilla { grid-template-columns: 1fr 1fr; } }
.ranking-tarjeta { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s2) var(--s2) var(--s6); border-radius: 24px; background: var(--hundido); }
.ranking-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.ranking-tarjeta > :not(.ranking-foto) { margin: 0 var(--s4); }
@media (min-width: 768px) { .ranking-tarjeta > :not(.ranking-foto) { margin: 0 var(--s6); } }
.ranking-tarjeta h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
.ranking-lista { display: flex; flex-direction: column; gap: var(--s5); }
.ranking-lista li { display: flex; gap: var(--s4); }
.ranking-lista li > div { display: flex; flex-direction: column; gap: var(--s1); }
.ranking-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ranking-lista h4 { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.ranking-para { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--verde); }
.ranking-lista p:not(.ranking-para) { font-size: 16px; line-height: 24px; color: var(--tinta60); }
.ranking-fuente { margin-top: auto !important; padding-top: var(--s4); border-top: 1px solid var(--regla); font-size: 14px; line-height: 20px; color: var(--tinta60); }

/* ── Trip notices: what the app says, on a lock screen ───────────── */
.avisos { display: grid; gap: var(--s8); align-items: center; padding-top: var(--s11); padding-bottom: var(--s11); }
@media (min-width: 900px) { .avisos { grid-template-columns: 5fr 7fr; gap: var(--s10); } }
.avisos-texto { display: flex; flex-direction: column; gap: var(--s4); }
.avisos-texto h2 { font-size: 48px; line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 768px) { .avisos-texto h2 { font-size: 60px; } }
.avisos-texto p { max-width: 440px; font-size: 18px; line-height: 28px; color: var(--tinta60); }
.avisos-pantalla { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; padding: var(--s8) var(--s4); border-radius: 24px; overflow: hidden; isolation: isolate; background: var(--tinta); }
.avisos-foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.avisos-pantalla::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(25, 26, 22, 0.28); }
.notis { display: flex; flex-direction: column; gap: var(--s2); width: 100%; max-width: 400px; }
.noti { display: flex; gap: var(--s3); padding: var(--s3); border-radius: 24px; background: rgba(251, 250, 246, 0.94); box-shadow: 0 8px 24px rgba(25, 26, 22, 0.16); }
.noti img { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.noti > div { flex: 1; min-width: 0; }
.noti-cab { display: flex; justify-content: space-between; gap: var(--s2); font-size: 14px; line-height: 20px; color: var(--tinta60); }
.noti-cab b { font-weight: 600; color: var(--tinta); }
.noti-tit { font-size: 16px; line-height: 24px; font-weight: 600; }
.noti-cuerpo { font-size: 14px; line-height: 20px; color: var(--tinta60); }
/* They drop in one after the other, like they would through a day of the trip. */
.avisos-pantalla.visible .noti { animation: noti 900ms var(--ease) both; animation-delay: calc(300ms + var(--k) * 180ms); }
@keyframes noti { from { opacity: 0; transform: translateY(-24px) scale(0.96); } }

/* ── My 2026 ─────────────────────────────────────────────────────── */
.anio { padding-top: var(--s11); padding-bottom: var(--s11); }
.anio-tarjeta { display: grid; gap: var(--s8); padding: var(--s8) var(--s6) 0; border-radius: 24px; overflow: hidden; background: var(--tinta); color: var(--papel); }
@media (min-width: 900px) { .anio-tarjeta { grid-template-columns: 1fr auto; align-items: center; gap: var(--s10); padding: var(--s10) var(--s10) 0; } }
.anio-texto { display: flex; flex-direction: column; gap: var(--s4); padding-bottom: var(--s8); }
.anio-texto h2 { font-size: 48px; line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 768px) { .anio-texto h2 { font-size: 60px; } }
/* On ink the marker turns into the lime itself: the words in lime, nothing under them. */
.anio-tarjeta .lima { background: none; padding: 0; margin: 0; color: var(--lima); }
.anio-texto p { max-width: 480px; font-size: 18px; line-height: 28px; color: rgba(251, 250, 246, 0.8); }
.anio-tarjeta .movil { --ancho: 260px; justify-self: center; align-self: end; margin-bottom: -140px; background: #000; box-shadow: 0 0 0 1px rgba(251, 250, 246, 0.16); }
@media (max-width: 767px) { .anio-tarjeta .movil { --ancho: 64vw; margin-bottom: -96px; } }

/* A city's country, with its flag. */
.ciudad p .bandera { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .aparece, .entra { opacity: 1; transform: none; filter: none; }
  .muro-pista { transform: none !important; }
  .nav { transition: opacity 200ms !important; }
  .beneficio-foto { clip-path: none; }
  .beneficio-foto img { transform: none; }
}

/* ── Tus viajes: the trip builder sneak peek ─────────────────────── */
.mis-viajes { padding-top: var(--s11); padding-bottom: var(--s11); }
.mv-grilla { display: grid; gap: var(--s9); align-items: center; }
@media (min-width: 900px) { .mv-grilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.mv-texto { display: flex; flex-direction: column; gap: var(--s5); }
.mv-texto h2 { font-size: 40px; line-height: 1.02; letter-spacing: -0.04em; }
@media (min-width: 768px) { .mv-texto h2 { font-size: 56px; } }
.mv-texto .btn { align-self: flex-start; }
.mv-texto .mv-acceso { margin-top: calc(-1 * var(--s3)); font-size: 14px; line-height: 20px; color: var(--tinta60); }
.mv-pasos { display: flex; flex-direction: column; gap: var(--s4); counter-reset: paso; }
.mv-pasos li { counter-increment: paso; position: relative; padding-left: 44px; font-size: 16px; line-height: 24px; color: var(--tinta60); }
.mv-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--hundido); color: var(--tinta); font-size: 13px; font-weight: 600; }
.mv-pasos strong { color: var(--tinta); }
.mv-celu { position: relative; justify-self: center; width: min(320px, 78vw); padding: 10px; border-radius: 48px; background: var(--tinta); box-shadow: 0 48px 96px -40px rgba(25, 26, 22, 0.5), 0 0 0 1px rgba(25, 26, 22, 0.06); }
.mv-pausa { position: absolute; top: 20px; right: 20px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; background: var(--tinta); color: var(--papel); box-shadow: 0 0 0 1.5px rgba(251, 250, 246, 0.55); transition: transform var(--toque); }
.mv-pausa:hover { transform: scale(1.06); }
.mv-pausa:active { transform: scale(0.96); }
.mv-pausa svg { width: 18px; height: 18px; fill: currentColor; }
.mv-pausa[hidden] { display: none; }
.mv-pausa .i-play { display: none; }
.mv-pausa[aria-pressed="true"] .i-play { display: block; }
.mv-pausa[aria-pressed="true"] .i-pausa { display: none; }
.mv-celu video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1560; border-radius: 38px; background: var(--hundido); object-fit: cover; }

/* ── Pronto en Viajapp ───────────────────────────────────────────── */
.proximos-landing { margin-top: var(--s11); }
.proximos-titulo { font-size: 36px; line-height: 1.05; letter-spacing: -0.035em; }
.proximos-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); scrollbar-width: thin; }
.proximo { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s3); }
.proximo figure { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--regla); }
.proximo img { width: 100%; height: 100%; object-fit: cover; }
.proximo .pronto { position: absolute; left: var(--s3); top: var(--s3); padding: var(--s1) var(--s3); border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 12px; line-height: 16px; font-weight: 600; }
.proximo-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.proximo-pie strong { display: block; font-size: 17px; line-height: 24px; letter-spacing: -0.01em; }
.proximo-pie span { display: block; font-size: 13px; line-height: 18px; color: var(--tinta40); }
.avisame { min-height: 44px; padding: 0 var(--s4); border-radius: 9999px; background: var(--hundido); box-shadow: inset 0 0 0 1px var(--regla); font-size: 14px; font-weight: 600; transition: background-color var(--toque); white-space: nowrap; }
.avisame:hover { background: var(--regla); }
.avisame[aria-pressed="true"] { background: var(--lima); color: var(--tinta); box-shadow: none; }
.avisame[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.proximo .credito { font-size: 12px; line-height: 16px; color: var(--tinta40); }
.proximo-pie .proximo-pedidos { color: var(--tinta60); font-weight: 600; font-variant-numeric: tabular-nums; }
.proximos-deshacer { display: inline-flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; }
.proximos-deshacer[hidden] { display: none; }
.proximos-deshacer .deshacer { min-height: 36px; padding: 0 var(--s4); border-radius: 9999px; color: var(--papel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.proximos-nota { margin-top: var(--s4); font-size: 13px; line-height: 18px; color: var(--tinta40); max-width: 52ch; }
.proximo .credito a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Store button (primary) and the web as second option ─────────── */
.btn-tienda { display: inline-flex; align-items: center; gap: var(--s3); padding: 10px var(--s5) 10px var(--s4); border-radius: 14px; background: var(--tinta); color: var(--papel); text-align: left; transition: transform var(--toque), background-color var(--toque); }
.btn-tienda:hover { transform: translateY(-2px); background: #000; }
.btn-tienda:active { transform: scale(0.98); }
.btn-tienda .ico { width: 26px; height: 26px; margin-top: -3px; }
.btn-tienda-txt { display: flex; flex-direction: column; font-size: 19px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.btn-tienda-txt small { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0; opacity: 0.8; }
.btn-tienda.claro { background: var(--papel); color: var(--tinta); }
.btn-tienda.claro:hover { background: #fff; }
.btn-web { display: inline-flex; align-items: center; gap: var(--s2); padding: 14px var(--s5); border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(25, 26, 22, 0.18); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--tinta); transition: box-shadow var(--toque), background-color var(--toque); }
.btn-web .ico { width: 16px; height: 16px; transition: transform var(--toque); }
.btn-web:hover { background: rgba(25, 26, 22, 0.04); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn-web:hover .ico { transform: translateX(3px); }
.btn-web.claro { color: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(251, 250, 246, 0.45); }
.btn-web.claro:hover { background: rgba(251, 250, 246, 0.1); box-shadow: inset 0 0 0 1.5px var(--papel); }
.tienda-aviso { min-height: 20px; margin-top: var(--s3); font-size: 14px; line-height: 20px; color: var(--tinta60); opacity: 0; transform: translateY(-4px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.tienda-aviso.on { opacity: 1; transform: none; }
.cierre .tienda-aviso { color: rgba(251, 250, 246, 0.85); }
.pie-credito { flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--tinta40); }
.pie-credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── iPhone frames: all three carry the Dynamic Island ───────────────
   B (black, thin bezel) is the base; A (natural titanium) goes on the phone
   in front and the sticky one in "Cómo funciona"; C (3D, orange halo) on the
   single phones that stand alone. */
.movil, .mv-celu { position: relative; padding: 5px; border-radius: 44px; background: #121213; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(25, 26, 22, 0.35), 0 6px 14px rgba(25, 26, 22, 0.12); }
.movil img { border-radius: 39px; }
.mv-celu video { border-radius: 39px; }
.movil::after, .mv-celu::after, .telefono::after { content: ""; position: absolute; z-index: 2; top: calc(5px + 3.2%); left: 50%; width: 31%; aspect-ratio: 3.4; border-radius: 9999px; background: #000; transform: translateX(-50%); pointer-events: none; }
.mv-celu::after { top: calc(5px + 2.6%); }
.paso-captura { padding: 4px; border: 0; border-radius: 30px; background: #121213; box-shadow: 0 20px 40px -18px rgba(25, 26, 22, 0.35); }

/* A · titanio natural */
.movil-frente, .telefono { padding: 9px; border-radius: 48px; background: linear-gradient(145deg, #E9E4DC 0%, #9C968D 22%, #F4F0EA 48%, #8A847B 76%, #D6D0C6 100%); box-shadow: 0 40px 80px -24px rgba(60, 40, 20, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.movil-frente img { border-radius: 39px; box-shadow: 0 0 0 2px #0B0B0C; }
.movil-frente::after { top: calc(9px + 3.2%); }
.movil-frente::before, .telefono::before { content: ""; position: absolute; left: -3px; top: 21%; width: 3px; height: 5%; border-radius: 2px 0 0 2px; background: #A49E95; box-shadow: 0 calc(var(--alto-boton, 34px)) 0 #A49E95; }
@media (min-width: 900px) {
  .telefono { border-radius: 58px; padding: 10px; }
  .telefono img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 48px; box-shadow: 0 0 0 3px #0B0B0C; }
  .telefono::after { top: 21px; width: 100px; aspect-ratio: auto; height: 29px; }
  .telefono::before { --alto-boton: 52px; }
}

/* C · flotando en 3D */
.celda-pasaporte .movil, .anio-tarjeta .movil { padding: 8px; border-radius: 48px; background: linear-gradient(150deg, #3A3A3D, #1A1A1C 40%, #4A4A4E 70%, #222224); transform: perspective(1400px) rotateY(-14deg) rotateX(4deg); box-shadow: 30px 40px 80px -10px rgba(25, 26, 22, 0.35), 0 30px 90px -10px rgba(255, 90, 43, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.celda-pasaporte .movil img, .anio-tarjeta .movil img { border-radius: 40px; }
.celda-pasaporte .movil::after, .anio-tarjeta .movil::after { top: calc(8px + 3.2%); }

/* ── Motion, second pass (14/10/2026) ────────────────────────────────
   All of it is extra: without it the page reads the same. What follows the scroll runs on
   animation-timeline (the compositor), never on a scroll listener, and only where supported. */

/* On a phone the main landing stays short: «de a varios» and «Mi 2026» are desktop only there. */
@media (max-width: 767px) { .solo-escritorio { display: none; } }

/* The ribbons fade at both edges instead of being cut by the screen. */
.cintas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the wall settles in on load, then drifts down and the title lifts away as you leave. */
  .muro { animation: muro-entra 1800ms var(--ease) both; }
  @keyframes muro-entra { from { opacity: 0; scale: 1.08; } }
  @supports (animation-timeline: view()) {
    .hero { view-timeline: --hero block; }
    .muro { animation: muro-entra 1800ms var(--ease) both, muro-sale linear both; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; }
    @keyframes muro-sale { to { translate: 0 16vh; } }
    .hero-texto { animation: hero-sale linear both; animation-timeline: --hero; animation-range: exit 0% exit 75%; }
    @keyframes hero-sale { to { opacity: 0; transform: translateY(-10vh) scale(0.96); } }

    /* Benefit photos drift a little inside their frame while they cross the screen. */
    .beneficio-foto { view-timeline: --foto block; }
    .beneficio-foto img { scale: 1.1; animation: deriva linear both; animation-timeline: --foto; animation-range: cover 0% cover 100%; }
    @keyframes deriva { from { translate: 0 -4%; } to { translate: 0 4%; } }

    /* The closing card opens up to its full width as it arrives. */
    .cierre { animation: cierre-abre linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes cierre-abre { from { clip-path: inset(0 5% round 48px); } to { clip-path: inset(0 0 round 24px); } }
  }

  /* Heads and benefits arrive in reading order: label, title, then the line under it. */
  .seccion-cabeza.aparece, .beneficio.aparece { opacity: 1; transform: none; filter: none; }
  .seccion-cabeza.aparece > *, .beneficio.aparece .beneficio-texto > *, .beneficio.aparece .beneficio-foto { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease), filter 800ms var(--ease), clip-path 1400ms var(--ease); }
  .beneficio.aparece .beneficio-foto { transform: none; filter: none; }
  .seccion-cabeza.aparece > :nth-child(2), .beneficio.aparece .beneficio-texto > :nth-child(1) { transition-delay: 90ms; }
  .seccion-cabeza.aparece > :nth-child(3), .beneficio.aparece .beneficio-texto > :nth-child(2) { transition-delay: 180ms; }
  .beneficio.aparece .beneficio-texto > :nth-child(3) { transition-delay: 270ms; }
  .seccion-cabeza.visible > *, .beneficio.visible .beneficio-texto > *, .beneficio.visible .beneficio-foto { opacity: 1; transform: none; filter: none; }
  /* The badge lands with a small overshoot, the only bounce on the page. */
  .beneficio.aparece .insignia { transform: translateY(16px) scale(0.8); transition: opacity 600ms var(--ease) 60ms, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 60ms, filter 600ms var(--ease) 60ms; }
  .beneficio.visible .insignia { transform: none; }

  /* Phones rise out of their cards once the card is in. */
  .celda .movil, .anio-tarjeta .movil { opacity: 0; translate: 0 72px; transition: opacity 900ms var(--ease) 250ms, translate 1300ms var(--ease) 250ms; }
  .celda .movil-frente { transition-delay: 400ms; }
  .celda.visible .movil, .anio-tarjeta.visible .movil { opacity: 1; translate: 0 0; }
  /* The demo phone tips up from the table. */
  .mv-celu.aparece { transform: perspective(1600px) rotateX(16deg) translateY(56px); }
  .mv-celu.aparece.visible { transform: none; }

  /* Ranking places follow their card, one after the other. */
  .ranking-lista li { opacity: 0; translate: 0 16px; transition: opacity 700ms var(--ease), translate 900ms var(--ease); }
  .ranking-tarjeta.visible .ranking-lista li { opacity: 1; translate: 0 0; }
  .ranking-tarjeta.visible .ranking-lista li:nth-child(1) { transition-delay: 250ms; }
  .ranking-tarjeta.visible .ranking-lista li:nth-child(2) { transition-delay: 350ms; }
  .ranking-tarjeta.visible .ranking-lista li:nth-child(3) { transition-delay: 450ms; }

}

/* ── Three steps, three entrances (14/10/2026) ───────────────────────
   01 the screen turns on, 02 a push from the right like opening a city, 03 «Salí ahora» opens
   in a circle from the bottom, where its button sits. A screen already passed stays under the
   next one, dimmed, like a stack in iOS; the higher one in the DOM is always on top. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .telefono img { opacity: 1; transform: none; transition: opacity 800ms var(--ease), transform 1200ms var(--ease), clip-path 1100ms var(--ease), filter 900ms var(--ease); }
  /* Once, when the phone lands: an animation, not a transition, so coming back to step 01 later is not delayed. */
  .telefono-columna:not(.visible) .telefono img[data-captura="0"] { opacity: 0; }
  .telefono-columna.visible .telefono img[data-captura="0"] { animation: enciende 1600ms var(--ease) 450ms backwards; }
  @keyframes enciende { from { opacity: 0; scale: 1.08; filter: brightness(0.25); } 30% { opacity: 1; } }
  .telefono img.pasada { filter: brightness(0.5); }
  .telefono img[data-captura="1"] { clip-path: inset(-4px -4px -4px -4px round 52px); }
  .telefono img[data-captura="1"]:not(.activa):not(.pasada) { clip-path: inset(-4px -4px -4px 100% round 52px); }
  .telefono img[data-captura="2"] { clip-path: circle(122% at 50% 92%); }
  .telefono img[data-captura="2"]:not(.activa):not(.pasada) { clip-path: circle(0% at 50% 92%); }
  /* The circle starts slow, so you see it grow from the button before it fills the screen. */
  .telefono img[data-captura="1"] { transition: opacity 800ms var(--ease), transform 1200ms var(--ease), clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1), filter 900ms var(--ease); }
  .telefono img[data-captura="2"] { transition: opacity 800ms var(--ease), transform 1200ms var(--ease), clip-path 1300ms cubic-bezier(0.65, 0, 0.35, 1), filter 900ms var(--ease); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .paso-captura { transition: opacity 900ms var(--ease), transform 1200ms var(--ease), clip-path 1200ms var(--ease), filter 900ms var(--ease); }
  .paso[data-paso="0"] .paso-marco:not(.visible) .paso-captura { opacity: 0; }
  .paso[data-paso="0"] .paso-marco.visible .paso-captura { animation: enciende 1600ms var(--ease) 150ms backwards; }
  /* The negative insets leave room for the shadow, so the clip only shows while it moves. */
  .paso[data-paso="1"] .paso-captura { clip-path: inset(-48px -48px -48px -48px round 30px); }
  .paso[data-paso="1"] .paso-marco:not(.visible) .paso-captura { clip-path: inset(-48px -48px -48px 100% round 30px); }
  .paso[data-paso="2"] .paso-captura { clip-path: circle(122% at 50% 92%); }
  .paso[data-paso="2"] .paso-marco:not(.visible) .paso-captura { clip-path: circle(0% at 50% 92%); }
  .paso[data-paso="1"] .paso-captura { transition: opacity 900ms var(--ease), transform 1200ms var(--ease), clip-path 1200ms cubic-bezier(0.65, 0, 0.35, 1), filter 900ms var(--ease); }
  .paso[data-paso="2"] .paso-captura { transition: opacity 900ms var(--ease), transform 1200ms var(--ease), clip-path 1400ms cubic-bezier(0.65, 0, 0.35, 1), filter 900ms var(--ease); }
}

/* ── Beneficios: cuatro fotos, cuatro entradas (14/10/2026) ──────────
   Antes las cuatro hacían lo mismo. Ahora cada una tiene la suya y va PEGADA AL
   SCROLL (avanza y retrocede con el dedo), como el resto de lo que se mueve al bajar:
   01 persiana: sube desde abajo como una cortina y la foto se asienta adentro.
   02 tiras: seis franjas que se abren a la vez, como una persiana veneciana.
   03 círculo: se abre desde la esquina de abajo, del lado del texto, con un giro leve.
   04 portal: una ventana chica en el medio crece hasta el borde mientras la foto se aleja.
   Sin view timelines (Safari < 26, Firefox) hacen lo mismo de una vez, con transición,
   cuando el beneficio entra (.visible). */
@property --tira { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

@media (prefers-reduced-motion: no-preference) {
  /* La foto ya no se funde: la forma ES la entrada. */
  .beneficio.aparece .beneficio-foto[data-revela] { opacity: 1; }
  .beneficio-foto[data-revela="tiras"] {
    clip-path: inset(0 round 24px);
    -webkit-mask-image: linear-gradient(90deg, #000 var(--tira), transparent var(--tira));
    mask-image: linear-gradient(90deg, #000 var(--tira), transparent var(--tira));
    -webkit-mask-size: calc(100% / 6) 100%;
    mask-size: calc(100% / 6) 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
  }

  /* Sin scroll-driven: la forma de partida, y .visible la abre. */
  @supports not (animation-timeline: view()) {
    .beneficio-foto[data-revela="persiana"] { clip-path: inset(100% 0 0 0 round 24px); }
    .beneficio-foto[data-revela="circulo"] { clip-path: circle(0% at 100% 100%); }
    .beneficio.visible .beneficio-foto[data-revela="circulo"] { clip-path: circle(150% at 100% 100%); }
    .beneficio-foto[data-revela="portal"] { clip-path: inset(24% 30% round 200px); }
    .beneficio.aparece .beneficio-foto[data-revela="tiras"] { --tira: 0%; transition: --tira 1400ms var(--ease); }
    .beneficio.aparece.visible .beneficio-foto[data-revela="tiras"] { --tira: 100%; }
  }

  @supports (animation-timeline: view()) {
    .beneficio-foto[data-revela] { clip-path: inset(0 round 24px); transition: none; animation-timeline: --foto; animation-range: entry 0% cover 45%; animation-fill-mode: both; animation-timing-function: linear; }
    .beneficio-foto[data-revela="persiana"] { animation-name: revela-persiana; }
    .beneficio-foto[data-revela="tiras"] { animation-name: revela-tiras; }
    .beneficio-foto[data-revela="circulo"] { animation-name: revela-circulo; }
    .beneficio-foto[data-revela="portal"] { animation-name: revela-portal; animation-range: entry 10% cover 50%; }
    @keyframes revela-persiana { from { clip-path: inset(100% 0 0 0 round 24px); } to { clip-path: inset(0 0 0 0 round 24px); } }
    /* Al final la máscara pasa a un solo mosaico negro: sin la costura de un píxel entre tiras. */
    @keyframes revela-tiras {
      0% { --tira: 0%; -webkit-mask-size: calc(100% / 6) 100%; mask-size: calc(100% / 6) 100%; }
      96% { --tira: 100%; -webkit-mask-size: calc(100% / 6) 100%; mask-size: calc(100% / 6) 100%; }
      100% { --tira: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
    }
    @keyframes revela-circulo { from { clip-path: circle(0% at 100% 100%); } to { clip-path: circle(150% at 100% 100%); } }
    @keyframes revela-portal { from { clip-path: inset(24% 30% round 200px); } to { clip-path: inset(0 0 0 0 round 24px); } }

    /* La foto, adentro, hace el contrapunto: se asienta mientras la forma se abre, y
       después sigue la deriva lenta de siempre (translate, que no choca con scale). */
    .beneficio-foto[data-revela] img { transform: none; animation: deriva linear both, asienta linear both; animation-timeline: --foto, --foto; animation-range: cover 0% cover 100%, entry 0% cover 45%; }
    .beneficio-foto[data-revela="circulo"] img { animation-name: deriva, asienta-girando; }
    .beneficio-foto[data-revela="portal"] img { animation-name: deriva, se-aleja; animation-range: cover 0% cover 100%, entry 10% cover 50%; }
    @keyframes asienta { from { scale: 1.28; } to { scale: 1.1; } }
    @keyframes asienta-girando { from { scale: 1.32; rotate: -4deg; } to { scale: 1.1; rotate: 0deg; } }
    @keyframes se-aleja { from { scale: 1.6; } to { scale: 1.1; } }
  }
}