/* Clinicta — sitio público.
   Sistema: el de la app (azul de marca, Open Sans, mucho aire) + Bricolage Grotesque para títulos y cifras. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/anton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --papel: #ffffff;
  --hoja: #f4f7fa;
  --tinta: #1b2733;
  --tinta-2: #566677;
  --azul: #3e6992;
  --azul-hover: #2f5476;
  --noche: #1f3447;
  --linea: #e2e8ef;
  --verde: #2f9e5e;
  --coral: #ff7a55;
  --titulo: "Anton", "Bricolage Grotesque", Impact, "Arial Narrow", sans-serif;
  --display: "Bricolage Grotesque", "Open Sans", system-ui, sans-serif;
  --texto: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ancho: 1120px;
  color-scheme: light;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.65 var(--texto); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid #3e699259; outline-offset: 3px; border-radius: 6px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* ——— Encabezado ——— */
.top { position: sticky; top: 0; z-index: 20; padding-top: 12px; }
.inicio .top { margin-bottom: -72px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; max-width: var(--ancho); padding: 0 24px; border-radius: 999px; background: transparent; transition: max-width 0.5s var(--ease), padding 0.5s var(--ease); }
.top.con-borde .bar { max-width: 880px; padding: 0 8px 0 24px; background: #ffffff; box-shadow: 0 0 0 1px var(--linea), 0 18px 36px -22px #1b273373; }
.marca { display: block; position: relative; }
.marca img { width: 128px; height: auto; }
.marca .logo-blanco { position: absolute; inset: 0; opacity: 0; }
.inicio .top:not(.con-borde) .logo-blanco { opacity: 1; }
.inicio .top:not(.con-borde) .logo-color { opacity: 0; }
.inicio .top:not(.con-borde) .menu a { color: #cfdceb; }
.inicio .top:not(.con-borde) .menu a:hover { color: #fff; background-image: linear-gradient(var(--coral), var(--coral)); }
.inicio .top:not(.con-borde) .btn { background: #fff; color: var(--noche); box-shadow: none; }
.menu { display: flex; gap: 28px; margin-left: auto; margin-right: 8px; }
.menu a { text-decoration: none; font-size: 0.95rem; font-weight: 600; color: var(--tinta-2); background: linear-gradient(var(--azul), var(--azul)) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size 0.3s var(--ease); }
.menu a:hover { color: var(--tinta); background-size: 100% 2px; }

/* ——— Botones ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font: 600 1rem/1 var(--texto); color: #fff; background: var(--azul); padding: 16px 26px; border-radius: 999px; transition: background-color 0.2s, transform 0.15s var(--ease), box-shadow 0.2s; box-shadow: 0 6px 18px -8px #3e6992a6; }
.btn:hover { background: var(--azul-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -10px #3e6992cc; }
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 2px 8px -4px #3e6992a6; }
.btn-sm { padding: 12px 20px; font-size: 0.9rem; box-shadow: none; transition: transform 0.15s var(--ease); }

/* ——— Escenario: el fondo de láminas queda fijo y el teléfono flota encima ——— */
.escenario { position: relative; background: #0d1822; color: #fff; }
.mundo { background: #0e1a26; position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; }
.anillos { --giro: calc(5deg + var(--x, 0.5) * 22deg); position: absolute; left: 50%; top: 58%; width: 140vmax; aspect-ratio: 1; margin: -70vmax 0 0 -70vmax; scale: calc(1 + var(--x, 0.5) * 0.7); translate: calc(clamp(0, (var(--p, 1) - 1) * 1.6, 1) * 17vw) calc((max(0.5, 1.06 - var(--p, 1)) - 0.58) * 100vh); }
/* El centro de las láminas solo existe donde hay un teléfono encima: se encoge hasta desaparecer cuando el teléfono se va y vuelve a crecer cuando llega el de los pasos */
.mundo .anillos i:nth-child(n+4) { scale: calc(var(--k) * max(clamp(0, calc(1 - (var(--p, 0.3) - 0.75) * 4), 1), clamp(0, calc((var(--p, 0.3) - 1.4) * 3), 1))); }
.anillos i { position: absolute; inset: 0; border-radius: 27%; background: linear-gradient(150deg, var(--a), var(--b)); scale: var(--k); rotate: calc(var(--i) * var(--giro)); box-shadow: inset 0 0 0 1.5px #ffffff0d, inset 0 2px 0 #ffffff1a, 0 36px 60px -30px #040b12bf; will-change: transform; }
.anillos.claro i { box-shadow: inset 0 0 0 1.5px #ffffff0d, inset 0 2px 0 #ffffff14, 0 36px 60px -30px #0c2236a6; }

/* ——— Portada ——— */
.portada { position: relative; z-index: 1; padding: 112px 0 110px; overflow: clip; }
.portada-centro { width: min(100% - 32px, 1400px); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.portada h1 { font: 400 clamp(3.6rem, 10.6vw, 10.5rem)/0.88 var(--titulo); text-transform: uppercase; letter-spacing: 0.004em; max-width: 9.6em; color: #fff; }
.portada .bajada { margin-top: 30px; max-width: 36rem; font-size: 1.2rem; color: #e3ecf5; text-shadow: 0 1px 18px #040b12b3; }
.portada .tiendas-bloque { margin-top: 30px; display: flex; flex-direction: column; align-items: center; }
.portada .tiendas { justify-content: center; }
.portada .tiendas-nota { color: #d3dfeb; }
.portada .tiendas-nota a { color: #fff; }

/* Logos de las tiendas: son los oficiales, sin tocar. --h es el alto del cuerpo del logo. */
.tiendas { --h: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.tienda { display: block; line-height: 0; border-radius: 10px; transition: transform 0.2s var(--ease), filter 0.2s; }
.tienda:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 14px #1b273340); }
.tienda:active { transform: scale(0.97); }
.tienda img { width: auto; }
.tienda-ap img { height: var(--h); }
.tienda-gp img { height: calc(var(--h) * 1.302); margin: calc(var(--h) * -0.151) 0; }
.tiendas-nota { margin-top: 14px; font-size: 0.9rem; color: var(--tinta-2); }
.tiendas-nota a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }

/* Teléfono: todo el interior se mide en em, así escala solo. */
.hero-escena { position: relative; width: min(100% - 32px, 1180px); margin: 44px auto 0; container-type: inline-size; }
.escena { position: relative; display: grid; place-items: center; width: 100%; min-height: 640px; perspective: 1400px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.telefono { --w: 300px; color: var(--tinta); width: var(--w); font-size: calc(var(--w) / 24); aspect-ratio: 9 / 19; background: #121b25; border-radius: 3.7em; padding: 0.7em; position: relative; z-index: 2; box-shadow: 0 50px 80px -40px #1b273366, 0 24px 40px -28px #1b273359, inset 0 0 0 1px #ffffff1a; }
.giro { position: relative; z-index: 2; transition: transform 0.5s var(--ease); }
.pantalla { position: relative; height: 100%; background: #fff; border-radius: 3.05em; overflow: hidden; padding: 3.2em 1.1em 1em; display: flex; flex-direction: column; gap: 0.7em; font-size: 1em; line-height: 1.35; }
.isla { position: absolute; top: 0.8em; left: 50%; width: 6.2em; height: 1.8em; margin-left: -3.1em; background: #121b25; border-radius: 99em; z-index: 3; }
.hora { position: absolute; top: 1em; left: 2em; font: 700 0.62em var(--texto); z-index: 3; }
.bateria { position: absolute; top: 1.1em; right: 1.9em; width: 1.5em; height: 0.72em; border: 0.1em solid #1b2733; border-radius: 0.25em; z-index: 3; }
.bateria::after { content: ""; position: absolute; inset: 0.1em; background: #1b2733; border-radius: 0.1em; }
.tipea { display: inline-block; }
.escena { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; }
.app-titulo { font: 800 1.2em var(--display); letter-spacing: -0.01em; }
.app-sub { font-size: 0.66em; color: var(--tinta-2); margin-top: -0.5em; }
.campo { display: flex; flex-direction: column; gap: 0.25em; }
.campo > span { font-size: 0.6em; font-weight: 600; color: var(--tinta-2); }
.caja { min-height: 2.45em; border: 0.08em solid var(--linea); border-radius: 0.7em; padding: 0.55em 0.75em; font-size: 0.72em; font-weight: 600; display: flex; align-items: center; font-variant-numeric: tabular-nums; background: #fff; }
.caja .moneda { color: var(--tinta-2); margin-right: 0.35em; font-weight: 600; }
.fila-doble { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0.6em; }
.honorarios .caja { font: 800 1.15em var(--display); border-color: var(--azul); box-shadow: 0 0 0 0.18em #3e699222; }
.enviar { margin-top: auto; background: var(--verde); color: #fff; font-weight: 700; font-size: 0.8em; padding: 0.95em; border-radius: 0.9em; transform-origin: center; display: grid; place-items: center; }
.enviar > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.5em; }
.enviar .e1 { opacity: 0; }
.enviar svg { width: 1.1em; height: 1.1em; }

/* La hoja (el PDF) que sale del teléfono */
.pdf { color: var(--tinta); position: absolute; z-index: 1; left: calc(50% + 60px); top: 14%; width: 250px; aspect-ratio: 210 / 297; background: #fff; border-radius: 0.5em; padding: 1.2em 1.1em; box-shadow: 0 30px 50px -28px #1b273388, 0 0 0 1px var(--linea); transform: rotate(5deg); font-size: 11px; }
.pdf-cab { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.9em; border-bottom: 2px solid var(--tinta); font-family: var(--display); font-weight: 800; font-size: 1.5em; letter-spacing: -0.01em; }
.pdf-cab small { font: 600 0.55em var(--texto); color: var(--tinta-2); }
.pdf-lin { display: flex; justify-content: space-between; gap: 0.8em; padding: 0.7em 0; border-bottom: 1px dotted #c9d3de; font-size: 0.85em; }
.pdf-lin span { color: var(--tinta-2); }
.pdf-lin b { font-variant-numeric: tabular-nums; }
.pdf-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1em; font-family: var(--display); font-weight: 800; font-size: 1.55em; }
.pdf-tot span { font: 600 0.5em var(--texto); color: var(--tinta-2); }
.repetir { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); font-size: 0.82rem; color: #b9c9db; font-weight: 600; opacity: 0; transition: opacity 0.4s; }
.escena.listo .repetir { opacity: 1; }
.escena:hover .repetir { color: #fff; }

/* Burbujas de features: aparecen una a una, de a dos por fila, unidas al teléfono con una línea y un punto.
   --b (0 a 1) sale de --p, las pantallas recorridas desde arriba; cada burbuja arranca un poco después de la anterior. */
.burbujas { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; text-align: left; --tel: 300px; --lado: calc((100cqw - var(--tel)) / 2); --bw: clamp(190px, 21cqw, 252px); }
.burbuja { --b: clamp(0, calc((var(--p, 1) - 0.12 - var(--i) * 0.07) * 4.5), 1); position: absolute; top: calc(6% + var(--fila) * 31%); width: var(--bw); display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: #fff; color: var(--tinta); border-radius: 18px; box-shadow: 0 24px 44px -20px #040b12cc, 0 0 0 1px #ffffff40; opacity: var(--b); scale: calc(0.86 + 0.14 * var(--b)); }
.burbuja::before, .burbuja::after { content: ""; position: absolute; top: 50%; }
.burbuja::after { height: 2px; margin-top: -1px; width: calc(var(--lado) - var(--bw)); background: #ffffff66; scale: var(--b) 1; }
.burbuja::before { z-index: 1; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px #ff7a5538; opacity: clamp(0, calc((var(--b) - 0.6) * 3), 1); }
.b-izq { left: 0; translate: calc((1 - var(--b)) * 140px) 0; }
.b-der { right: 0; translate: calc((1 - var(--b)) * -140px) 0; }
.b-izq::after { left: 100%; transform-origin: 100% 50%; }
.b-der::after { right: 100%; transform-origin: 0 50%; }
.b-izq::before { left: calc(100% + var(--lado) - var(--bw) - 5px); }
.b-der::before { right: calc(100% + var(--lado) - var(--bw) - 5px); }
.burbuja-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #e8f0f8; color: var(--azul); display: grid; place-items: center; font: 800 1.05rem var(--display); letter-spacing: -0.02em; }
.burbuja-ico svg { width: 21px; height: 21px; }
.burbuja b { display: block; font: 700 1rem/1.15 var(--display); letter-spacing: -0.01em; }
.burbuja small { display: block; margin-top: 3px; font: 400 0.8rem/1.3 var(--texto); color: var(--tinta-2); }

/* — La secuencia de la portada (solo con JavaScript; sin él se ve el estado final) — */
.js .escena:not(.play) .telefono { opacity: 0; }
.js .escena:not(.play) .pdf { opacity: 0; }
.escena.play .telefono { animation: entra 0.85s var(--ease) both; }
.escena.play .tipea { animation: tipea var(--d, 0.9s) steps(var(--n, 18), end) var(--t, 0s) both; }
.escena.play .sale { animation: sale 0.5s var(--ease) var(--t, 0s) both; }
.escena.play .enviar { animation: aprieta 0.45s var(--ease) var(--t, 0s) both, a-verde 0.3s linear calc(var(--t, 0s) + 0.3s) both; }
.escena.play .enviar .e1 { animation: se-va 0.25s linear calc(var(--t, 0s) + 0.3s) both; }
.escena.play .enviar .e2 { animation: llega 0.4s var(--ease) calc(var(--t, 0s) + 0.35s) both; }
.escena.play .pdf { animation: pdf 0.9s var(--ease) var(--t, 0s) both; }
@keyframes entra { from { opacity: 0; transform: translateY(46px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes tipea { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sale { from { opacity: 0; transform: translateY(0.5em) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes aprieta { 0% { transform: scale(1); } 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes a-verde { from { background: var(--azul); } to { background: var(--verde); } }
@keyframes se-va { from { opacity: 1; } to { opacity: 0; } }
@keyframes llega { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
@keyframes pdf { from { opacity: 0; transform: translate(-58%, 8%) rotate(0deg) scale(0.9); } to { opacity: 1; transform: rotate(5deg); } }
.js .escena:not(.play) .tipea, .js .escena:not(.play) .sale { opacity: 1; }

/* ——— Presupuesto de Clinicta (lo que incluye) ——— */
.bloque { padding: 112px 0; }
.bloque-hoja { background: var(--hoja); }
.bloque-oscuro { position: relative; z-index: 1; color: #fff; }
.bloque-oscuro .titulo-bloque { color: #fff; }
.titulo-bloque, .franja h2, .cierre h2 { font-family: var(--titulo); font-weight: 400; text-transform: uppercase; letter-spacing: 0.004em; line-height: 0.92; font-synthesis: none; }
.titulo-bloque { font-size: clamp(3rem, 7.4vw, 6.6rem); max-width: 11em; }
.hoja { margin: 52px auto 0; max-width: 820px; background: #fff; border-radius: 8px; padding: clamp(24px, 5vw, 56px); box-shadow: 0 0 0 1px var(--linea), 0 28px 50px -34px #1b273359; }
.hoja-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--tinta); }
.hoja-cab strong { font: 800 1.9rem var(--display); letter-spacing: -0.02em; }
.hoja-cab span { color: var(--tinta-2); font-size: 0.9rem; }
.filas { list-style: none; margin: 0; padding: 0; }
.fila { padding: 26px 0 24px; border-bottom: 1px solid var(--linea); }
.fila-linea { display: flex; align-items: baseline; gap: 14px; }
.fila-linea strong { font: 700 clamp(1.25rem, 2.6vw, 1.6rem) var(--display); letter-spacing: -0.015em; flex: none; }
.guia { flex: 1; min-width: 24px; border-bottom: 2px dotted #bcc8d5; transform: translateY(-5px); transform-origin: left; }
.fila-linea em { font-style: normal; font-weight: 600; color: var(--azul); flex: none; text-align: right; }
.fila p { margin-top: 8px; color: var(--tinta-2); max-width: 46ch; }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 30px; }
.total span { font: 700 1.2rem var(--display); }
.total strong { font: 800 clamp(3rem, 8vw, 4.8rem)/0.9 var(--display); letter-spacing: -0.03em; color: var(--azul); }
.hoja-nota { margin-top: 18px; color: var(--tinta-2); font-size: 0.92rem; }

/* ——— Cómo funciona ——— */
.pasos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; margin-top: 56px; align-items: start; }
.pasos { list-style: none; margin: 0; padding: 0 0 38vh; counter-reset: paso; } /* el espacio de abajo mantiene el teléfono fijo durante todo el último paso */
.paso { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; counter-increment: paso; opacity: calc(0.5 + 0.5 * var(--c, 1)); transform: translateX(calc((1 - var(--c, 1)) * -40px)); }
.paso h3 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: #fff; }
.paso h3::before { content: counter(paso); display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin-right: 0.55em; border-radius: 50%; background: var(--coral); color: #1b0d07; font: 700 0.6em var(--texto); vertical-align: 0.35em; }
.paso p { margin-top: 14px; max-width: 34ch; color: #e3ecf5; font-size: 1.1rem; }
.paso-visual { display: none; }
.fijo { position: sticky; top: 11vh; display: grid; place-items: center; min-height: 600px; perspective: 1500px; }
.fijo .pantalla { padding-top: 3.2em; }
/* El teléfono de los pasos queda siempre derecho y del mismo tamaño mientras se scrollea; en pantallas bajas se achica para verse entero */
.fijo .telefono { --w: min(300px, calc(80vh * 9 / 19)); box-shadow: 0 60px 90px -36px #040b12e6, 0 0 0 1px #ffffff1f; transform: none; }
.vista { position: absolute; inset: 3.2em 1.1em 1em; display: flex; flex-direction: column; gap: 0.7em; opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); pointer-events: none; }
.fijo[data-paso="1"] .vista[data-v="1"], .fijo[data-paso="2"] .vista[data-v="2"], .fijo[data-paso="3"] .vista[data-v="3"], .fijo[data-paso="4"] .vista[data-v="4"] { opacity: 1; transform: none; }
.cmp { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.7em; border-radius: 0.9em; background: var(--hoja); font-size: 0.72em; }
.cmp .asa { color: #9aa8b6; letter-spacing: -0.12em; font-weight: 700; }
.cmp .ico { flex: none; min-width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: 0.7em; background: #fff; box-shadow: 0 0 0 0.08em var(--linea); font-weight: 700; font-size: 0.85em; color: var(--azul); padding: 0 0.3em; }
.cmp b { display: block; font-size: 1em; }
.cmp small { color: var(--tinta-2); font-size: 0.82em; }
.agregar { border: 0.1em dashed #b9c6d3; border-radius: 0.9em; text-align: center; padding: 0.75em; font-size: 0.72em; font-weight: 700; color: var(--azul); }
.fijo[data-paso="1"] .vista[data-v="1"] .cmp, .fijo[data-paso="1"] .vista[data-v="1"] .agregar, .fijo[data-paso="4"] .vista[data-v="4"] .cli { animation: sale 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 0.09s + 0.15s); }
.buscador { display: flex; align-items: center; gap: 0.55em; padding: 0.7em 0.9em; border-radius: 99em; background: #fff; box-shadow: 0 0 0 0.08em var(--linea), 0 0.5em 1em -0.6em #1b273359; font-size: 0.7em; color: var(--tinta-2); }
.buscador svg { flex: none; color: var(--tinta); }
.filtros { display: flex; gap: 0.4em; font-size: 0.6em; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.filtros span { padding: 0.5em 0.85em; border-radius: 99em; background: var(--hoja); }
.filtros .act { background: var(--tinta); color: #fff; }
.cli { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.1em; border-bottom: 0.08em solid var(--linea); font-size: 0.72em; }
.cli .av { flex: none; width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: 50%; background: var(--hoja); font-weight: 700; font-size: 0.82em; }
.cli > div { flex: 1; min-width: 0; }
.cli b { display: block; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli small { color: var(--tinta-2); font-size: 0.82em; }
.cli .monto { flex: none; text-align: right; }
.cli .monto small { display: block; font-weight: 700; }
.cli .est-no { color: #d94b4b; }
.cli .est-sena { color: #c97a14; }
.cli .est-pago { color: #1d8a4d; }
.nota-ficha { margin-top: auto; text-align: center; }
.detalle-total { font: 800 2.1em var(--display); letter-spacing: -0.02em; line-height: 1; }
.chip { display: inline-block; font-size: 0.62em; font-weight: 700; color: #1d6b3f; background: #e4f5ea; padding: 0.4em 0.8em; border-radius: 99em; }
.barra { height: 0.7em; background: var(--linea); border-radius: 99em; overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--azul); border-radius: 99em; transition: width 1.1s var(--ease) 0.25s; }
.fijo[data-paso="3"] .barra i, .paso-visual .barra i { width: 40%; }
.meta { font-size: 0.66em; color: var(--tinta-2); }
.pago { display: flex; justify-content: space-between; font-size: 0.7em; padding: 0.65em 0; border-bottom: 0.08em solid var(--linea); }
.pago span { color: var(--tinta-2); }
.enviado { display: flex; align-items: center; gap: 0.5em; font-size: 0.68em; font-weight: 700; color: var(--verde); }

/* ——— Preguntas ——— */
.faq { margin: 48px auto 0; max-width: 760px; border-top: 1px solid var(--linea); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.faq-grid .titulo-bloque { position: sticky; top: 120px; max-width: 8em; font-size: clamp(2.8rem, 5.2vw, 4.8rem); }
.faq-grid .faq { margin: 8px 0 0; max-width: none; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 700 clamp(1.1rem, 2.2vw, 1.3rem) var(--display); letter-spacing: -0.01em; transition: color 0.2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azul); }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--azul), var(--azul)) center / 100% 2px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2px 100% no-repeat; transition: transform 0.35s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .resp { overflow: hidden; }
.faq .resp p { padding: 0 0 26px; max-width: 60ch; color: var(--tinta-2); }

/* ——— Privacidad (franja) y pie ——— */
.franja { background: var(--noche); color: #fff; padding: 104px 0; }
.franja h2 { font-size: clamp(3rem, 7.4vw, 6.6rem); max-width: 10em; }
.franja p { margin-top: 24px; max-width: 44rem; font-size: 1.15rem; color: #d3deea; }
.franja a { color: #fff; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pie { padding: 72px 0 48px; }
.pie-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.pie-marca img { width: 124px; }
.pie-marca p { margin-top: 18px; color: var(--tinta-2); max-width: 22ch; }
.pie-marca .tiendas { --h: 40px; margin-top: 22px; }
.pie h2 { font: 700 0.95rem var(--texto); letter-spacing: 0; margin-bottom: 14px; }
.pie nav a, .pie address a { display: block; width: fit-content; margin-bottom: 10px; color: var(--tinta-2); text-decoration: none; transition: color 0.2s; }
.pie nav a:hover, .pie address a:hover { color: var(--azul); }
.pie address { font-style: normal; }
.copy { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.9rem; }

/* ——— Páginas de texto (privacidad, términos, soporte, eliminar cuenta) ——— */
.texto { max-width: 760px; margin: 0 auto; padding: 56px 24px 120px; }
.texto h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 12px; }
.texto h2 { font-size: 1.5rem; margin: 44px 0 10px; letter-spacing: -0.015em; }
.texto h3 { font-size: 1.15rem; margin: 28px 0 4px; font-family: var(--texto); font-weight: 700; letter-spacing: 0; }
.texto p, .texto li { color: #2c3a48; }
.texto p { margin-top: 12px; }
.texto ul, .texto ol { padding-left: 22px; margin: 12px 0 0; }
.texto li { margin-top: 6px; }
.texto a { color: var(--azul); text-underline-offset: 3px; }
.texto .fecha { color: var(--tinta-2); margin: 0 0 28px; font-size: 0.95rem; }

/* ——— Guías y páginas de contenido ——— */
.texto .migas { margin: 0 0 20px; font-size: 0.9rem; color: var(--tinta-2); }
.texto .migas a { color: var(--tinta-2); }
.texto .lead { font-size: 1.2rem; line-height: 1.6; color: var(--tinta-2); margin-top: 8px; }
.texto-guia h2 { margin-top: 52px; }
.texto-guia strong { color: var(--tinta); }
.texto a.btn { color: #fff; text-decoration: none; margin-top: 8px; }
.texto table.ejemplo { width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; }
.ejemplo th, .ejemplo td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--linea); }
.ejemplo th { font-size: 0.85rem; color: var(--tinta-2); border-bottom-color: var(--tinta); }
.ejemplo td:last-child, .ejemplo th:last-child { text-align: right; }
.ejemplo tr.fila-total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--tinta); }
.caja-cta { margin-top: 56px; padding: clamp(24px, 4vw, 40px); background: var(--hoja); border-radius: 20px; }
.texto .caja-cta h2 { margin-top: 0; }
.caja-cta .tiendas-bloque { margin-top: 24px; }
.texto .tiendas-bloque { margin-top: 20px; }
.texto .tienda { display: block; }
.preview-pdf { margin: 28px 0 0; }
.preview-pdf img { width: 100%; max-width: 560px; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--linea), 0 26px 50px -30px #1b273366; }
.faq-texto h3 { font-family: var(--display); font-size: 1.2rem; margin-top: 26px; }

/* ——— Aviso de cookies (solo existe si hay GA_ID) ——— */
.aviso-cookies { position: fixed; left: 16px; bottom: 16px; z-index: 40; max-width: 460px; display: grid; gap: 14px; padding: 18px 20px; background: #fff; color: var(--tinta); border-radius: 18px; box-shadow: 0 0 0 1px var(--linea), 0 24px 50px -20px #1b273380; font-size: 0.95rem; line-height: 1.5; }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { color: var(--tinta); }
.aviso-cookies a { color: var(--azul); text-underline-offset: 3px; }
.aviso-botones { display: flex; gap: 10px; }
.aviso-botones .btn { flex: 1; }
.btn-linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px #c9d3de; }
.btn-linea:hover { background: var(--hoja); box-shadow: inset 0 0 0 1.5px #aebccb; transform: none; }
.enlace-cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace-cookies:hover { color: var(--azul); }
@media (max-width: 520px) { .aviso-cookies { right: 16px; max-width: none; } }

/* ——— Pantallas chicas ——— */
@media (max-width: 920px) {
  .menu { display: none; }
  .marca img { width: 112px; }
  .portada { padding-top: 88px; padding-bottom: 84px; }
  .portada .bajada { font-size: 1.08rem; margin-top: 22px; }
  .escena { min-height: 560px; margin-top: 34px; }
  .telefono { --w: 250px; }
  .pdf { left: auto; right: -4%; top: 16%; width: 44%; }
  .burbujas { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
  .burbuja, .b-izq, .b-der { position: static; width: auto; translate: none; scale: none; opacity: 1; align-items: flex-start; gap: 10px; padding: 12px; }
  .burbuja::before, .burbuja::after { display: none; }
  .burbuja-ico { width: 34px; height: 34px; border-radius: 10px; }
  .burbuja b { font-size: 0.92rem; }
  .burbuja small { font-size: 0.74rem; }
  .bloque, .franja { padding: 80px 0; }
  .pasos-grid { display: block; margin-top: 36px; }
  .pasos { padding-bottom: 0; }
  .fijo { display: none; }
  .paso { min-height: 0; opacity: 1; transform: none; padding: 36px 0; border-top: 1px solid #ffffff26; }
  .paso-visual { display: grid; place-items: center; margin-top: 28px; }
  .paso-visual .telefono { --w: 230px; }
  .paso-visual .vista { position: relative; inset: auto; opacity: 1; transform: none; flex: 1; }
  .faq-grid { display: block; }
  .faq-grid .titulo-bloque { position: static; max-width: 14ch; }
  .faq-grid .faq { margin-top: 36px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 20px; }
  .btn-sm { padding: 10px 14px; }
  .tiendas { --h: 46px; gap: 12px; }
  .fila-linea em { display: none; }
}

/* ——— Sin movimiento ——— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .telefono { transform: none !important; }
}

/* ——— Movimiento ligado al scroll ———
   sitio.js mide cada elemento marcado con data-scrub y escribe variables entre 0 y 1:
   --e (entra), --q (lee), --s (sale), --x (cruza), --c (centro). Sin JavaScript valen los
   valores de reserva y se ve el estado final. */

/* Portada: al bajar, el texto se queda atrás y la hoja del PDF se desprende del teléfono */
.portada-centro { transform: translateY(calc(var(--s, 0) * -70px)); opacity: calc(1 - var(--s, 0) * 1.1); }
.portada .hero-escena { transform: translateY(calc(var(--s, 0) * -30px)); }
.portada .pdf { translate: calc(clamp(0, var(--p, 0) * 3.2, 1) * -185px) 0; }

/* Secciones que entran como cortina: el borde superior curvo se aplana al llegar */
.bloque-hoja { position: relative; z-index: 1; margin-top: -56px; padding-top: 168px; border-radius: calc((1 - var(--e, 1)) * 96px) calc((1 - var(--e, 1)) * 96px) 0 0; }
.franja { position: relative; z-index: 2; margin-top: -56px; padding-top: 160px; border-radius: calc((1 - var(--e, 1)) * 96px) calc((1 - var(--e, 1)) * 96px) 0 0; }

/* Títulos: cada palabra sube desde una máscara, una detrás de otra */
.pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.16em 0.04em 0.1em; margin: -0.16em -0.04em -0.1em; }
.pal > span { display: inline-block; transform: translateY(calc((1 - clamp(0, calc(var(--e, 1) * var(--n, 4) * 1.5 - var(--w, 0)), 1)) * 112%)); }

.js [data-partir]:not(.partido) { visibility: hidden; animation: ver 0s 1.6s forwards; }
@keyframes ver { to { visibility: visible; } }
[data-partir="carga"] .pal > span { transform: none; animation: sube 0.9s var(--ease) calc(var(--w, 0) * 0.07s + 0.05s) both; }
@keyframes sube { from { transform: translateY(112%); } to { transform: none; } }

/* La hoja se levanta de la mesa y se endereza; las guías se dibujan con el scroll */
.hoja { transform: perspective(1500px) rotateX(calc((1 - var(--e, 1)) * 26deg)) translateY(calc((1 - var(--e, 1)) * 90px)) scale(calc(0.94 + 0.06 * var(--e, 1))); transform-origin: 50% 100%; }
.guia { transform: translateY(-5px) scaleX(clamp(0, calc(var(--q, 1) * 6.4 - var(--i, 0)), 1)); }
.fila-linea em { opacity: clamp(0, calc(var(--q, 1) * 6.4 - var(--i, 0) - 0.4), 1); }
.total strong { opacity: clamp(0, calc((var(--q, 1) - 0.76) * 7), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q, 1) - 0.76) * 7), 1)) * 0.3em)) scale(calc(0.78 + 0.22 * clamp(0, calc((var(--q, 1) - 0.76) * 7), 1))); transform-origin: right bottom; }

/* Franja: las palabras se "encienden" a medida que se lee */
.palabra { opacity: clamp(0.16, calc(var(--q, 1) * var(--n, 10) * 1.25 - var(--w, 0) + 0.3), 1); }

/* Cierre: titular gigante sobre azul y tres teléfonos que suben desde abajo, cada uno a su ritmo */
.cierre { position: relative; z-index: 3; margin-top: -56px; padding: 168px 0 0; background: #33566f; color: #fff; text-align: center; overflow: clip; border-radius: calc((1 - var(--e, 1)) * 96px) calc((1 - var(--e, 1)) * 96px) 0 0; }
.cierre h2 { font-size: clamp(3.6rem, 11vw, 11rem); line-height: 0.88; max-width: 9em; margin: 0 auto; }
.mundo-cierre { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mundo-cierre .anillos { --giro: calc(4deg + var(--x, 0.5) * 30deg); top: 94%; scale: calc(0.75 + var(--x, 0.5) * 0.7); translate: none; width: 130vmax; margin: -65vmax 0 0 -65vmax; }
.cierre-texto, .cierre-telefonos { position: relative; z-index: 1; }
.cierre-bajada { margin: 30px auto 0; max-width: 32rem; font-size: 1.2rem; color: #fff; text-shadow: 0 1px 20px #0a1c2c80; }
.cierre .tiendas-bloque { margin-top: 38px; display: flex; flex-direction: column; align-items: center; }
.cierre .tiendas { justify-content: center; }
.cierre .tiendas-nota { color: #dde8f2; }
.cierre .tiendas-nota a { color: #fff; }
.cierre-telefonos { display: flex; justify-content: center; align-items: flex-start; height: 390px; margin-top: 72px; }
.cf { flex: none; margin: 0 -26px; transform-origin: 50% 100%; }
.cf .telefono { --w: 280px; box-shadow: 0 40px 70px -30px #0a1824a6, inset 0 0 0 1px #ffffff1a; }
.cf .vista { opacity: 1; transform: none; }
.cf .barra i { width: 40%; }
.cf-1 { margin-top: 70px; translate: calc((1 - var(--e, 1)) * 60px) calc((1 - var(--e, 1)) * 230px); rotate: calc(-8deg + (1 - var(--e, 1)) * 7deg); }
.cf-2 { position: relative; z-index: 2; translate: 0 calc((1 - var(--e, 1)) * 130px); }
.cf-3 { margin-top: 70px; translate: calc((1 - var(--e, 1)) * -60px) calc((1 - var(--e, 1)) * 300px); rotate: calc(8deg - (1 - var(--e, 1)) * 7deg); }

@media (max-width: 920px) {
  .portada .pdf { translate: calc(var(--s, 0) * 70px) calc(var(--s, 0) * -30px); }
  /* En el celular los pasos llevan su propio teléfono en línea: el centro de las láminas no vuelve */
  .mundo .anillos i:nth-child(n+4) { scale: calc(var(--k) * clamp(0, calc(1 - (var(--p, 0.3) - 0.5) * 3), 1)); }
  .bloque-hoja, .franja { margin-top: -40px; padding-top: 120px; border-radius: calc((1 - var(--e, 1)) * 56px) calc((1 - var(--e, 1)) * 56px) 0 0; }
  .cierre { margin-top: -40px; padding-top: 110px; border-radius: calc((1 - var(--e, 1)) * 56px) calc((1 - var(--e, 1)) * 56px) 0 0; }
  .cierre-telefonos { height: 300px; margin-top: 52px; }
  .cf { margin: 0 -22px; }
  .cf .telefono { --w: 190px; }
  .cf-1, .cf-3 { margin-top: 44px; }
  .hoja { transform: perspective(1500px) rotateX(calc((1 - var(--e, 1)) * 14deg)) translateY(calc((1 - var(--e, 1)) * 50px)); }
}