/* Portada de Human 360. Tokens de diseno/tokens (crema, terracota, Newsreader + Figtree).
   Curva única del sistema: cubic-bezier(0.2, 0, 0, 1). Todo el movimiento se apaga con
   prefers-reduced-motion. */
@font-face { font-family: "Figtree"; src: url("/portada/fuentes/Figtree_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/portada/fuentes/Figtree_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/portada/fuentes/Figtree_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/portada/fuentes/Figtree_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/portada/fuentes/Newsreader_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/portada/fuentes/Newsreader_400Regular_Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #fcfaf7; --surface: #ffffff; --surface2: #f7f3ee; --border: #e6e0da; --border-strong: #d0c9c2; --sep: #efe9e2;
  --text: #241e1a; --text2: #5b534f; --text3: #746d6a;
  --primary: #a55535; --primary-hover: #904527; --primary-soft: #fdeae0; --on-primary: #ffffff;
  --tareas: #446990; --finanzas: #37745b; --relaciones: #885468; --habitos: #6c6832;
  --tareas-soft: #e6f2fe; --finanzas-soft: #e5f5ed; --relaciones-soft: #fcebf1; --habitos-soft: #f2f1de;
  --oscuro: #241e1a; --sobre-oscuro: #f2eee9; --sobre-oscuro2: #bcb6b1;
  --sombra: 0 24px 60px -20px rgba(74, 40, 22, .28), 0 8px 20px -12px rgba(74, 40, 22, .18);
  --curva: cubic-bezier(0.2, 0, 0, 1);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15110e; --surface: #1d1816; --surface2: #26201d; --border: #352f2c; --border-strong: #4d4642; --sep: #2c2622;
    --text: #f2eee9; --text2: #bcb6b1; --text3: #948e89;
    --primary: #de8e69; --primary-hover: #eda382; --primary-soft: #392218; --on-primary: #1e130e;
    --tareas: #8ab2dc; --finanzas: #80bda2; --relaciones: #d59bb0; --habitos: #b5b179;
    --tareas-soft: #1b2835; --finanzas-soft: #182b23; --relaciones-soft: #322027; --habitos-soft: #292712;
    --oscuro: #0f0c0a; --sombra: 0 24px 60px -20px rgba(0, 0, 0, .7), 0 8px 20px -12px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.envoltura { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.ceja { font: 600 12.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 26px; border-radius: 14px; border: 0; cursor: pointer;
  font: 600 17px/1 var(--sans); background: var(--primary); color: var(--on-primary); white-space: nowrap;
  transition: transform .12s var(--curva), background .2s var(--curva), box-shadow .2s var(--curva); box-shadow: 0 10px 24px -12px rgba(165, 85, 53, .7); }
.boton:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(165, 85, 53, .8); }
.boton:active { transform: scale(.98); }
.boton .flecha { transition: transform .2s var(--curva); }
.boton:hover .flecha { transform: translateX(3px); }
.boton.chico { height: 40px; padding: 0 16px; font-size: 15px; border-radius: 11px; box-shadow: none; }
.boton.claro { background: var(--surface); color: var(--text); box-shadow: none; border: 1px solid var(--border-strong); }
.boton.claro:hover { background: var(--surface2); }
.enlace { font-weight: 600; color: var(--text); padding: 8px 10px; border-radius: 8px; }
.enlace:hover { color: var(--primary); }

/* ── Barra superior ── */
.barra { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--curva); }
.barra.con-borde { border-bottom-color: var(--border); }
.barra .envoltura { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; font: 600 19px/1 var(--sans); letter-spacing: -0.03em; white-space: nowrap; }
.marca svg { width: 30px; height: 30px; color: var(--primary); }
.barra nav { display: flex; align-items: center; gap: 6px; }
.barra .secciones { display: none; gap: 4px; margin-right: 10px; }
.barra .secciones a { font-size: 15px; color: var(--text2); padding: 8px 10px; border-radius: 8px; }
.barra .secciones a:hover { color: var(--text); background: var(--surface2); }
@media (min-width: 900px) { .barra .secciones { display: flex; } }

/* ── Portada ── */
.portada { position: relative; padding: 36px 0 56px; }
.portada .envoltura { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .portada { padding: 64px 0 88px; } .portada .envoltura { grid-template-columns: 1.04fr .96fr; gap: 48px; } }
.pildora { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 600 13.5px/1 var(--sans); }
.pildora i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: late 2.4s var(--curva) infinite; }
@keyframes late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .35; } }
.portada h1 { font: 400 clamp(44px, 7.4vw, 78px)/1.02 var(--serif); letter-spacing: -0.035em; margin-top: 18px; }
.portada h1 em { font-style: italic; color: var(--primary); }
.portada .bajada { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--text2); margin-top: 20px; max-width: 34em; }
.captura { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; max-width: 520px; }
.captura input { height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 17px; flex: none; width: 100%; min-width: 0; outline: none;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva); }
.captura input::placeholder { color: var(--text3); }
.captura input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
@media (min-width: 560px) { .captura { flex-direction: row; } .captura input { flex: 1; width: auto; } }
.garantias { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 14.5px; color: var(--text2); padding: 0; list-style: none; }
.garantias li { display: flex; align-items: center; gap: 7px; }
.garantias svg { width: 16px; height: 16px; color: var(--finanzas); flex: none; }
.ya-tengo { margin-top: 14px; font-size: 15px; color: var(--text2); }
.ya-tengo a { color: var(--primary); font-weight: 600; }

/* Entrada de la portada */
.sube { opacity: 0; transform: translateY(16px); animation: sube .7s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes sube { to { opacity: 1; transform: none; } }

/* ── Escena: el teléfono vivo ── */
.escena { position: relative; display: grid; place-items: center; min-height: 520px; }
.halo { position: absolute; width: min(520px, 96%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--primary-soft), transparent 72%); animation: respira 7s var(--curva) infinite; }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.orbita { position: absolute; width: min(470px, 92%); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--border-strong); opacity: .7; animation: gira 80s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.telefono { position: relative; width: 272px; border-radius: 40px; padding: 10px; background: var(--oscuro); box-shadow: var(--sombra); animation: flota 7s var(--curva) infinite; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(-.4deg); } }
.pantalla { position: relative; border-radius: 31px; background: var(--bg); padding: 30px 14px 16px; overflow: hidden; height: 500px; font-size: 13px; }
.pantalla::before { content: ""; position: absolute; top: 9px; left: 50%; width: 74px; height: 20px; margin-left: -37px; border-radius: 12px; background: var(--oscuro); }
.p-fecha { font-size: 11px; color: var(--text2); margin-top: 8px; }
.p-saludo { font: 600 21px/1.15 var(--sans); letter-spacing: -0.03em; margin-top: 1px; }
.p-titulo { display: flex; justify-content: space-between; font: 600 12.5px/1 var(--sans); margin: 16px 2px 7px; }
.p-titulo span { color: var(--text3); font-weight: 500; }
.p-lista { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.p-fila { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-top: 1px solid var(--sep); }
.p-fila:first-child { border-top: 0; }
.p-fila b { display: block; font: 500 12.5px/1.25 var(--sans); }
.p-fila small { display: block; font-size: 10.5px; color: var(--text2); margin-top: 1px; }
.p-fila .txt { flex: 1; min-width: 0; position: relative; }
.p-check { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--tareas); flex: none; position: relative; }
.p-check::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--tareas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.4l3.2 3.2 6.6-6.8'/%3E%3C/svg%3E") center/100% no-repeat; transform: scale(0); opacity: 0; }
.p-icono { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.p-icono svg { width: 15px; height: 15px; }
.p-habitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.p-habito { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 10px 4px 8px; text-align: center; font: 600 10.5px/1.2 var(--sans); }
.p-habito svg { width: 38px; height: 38px; margin: 0 auto 6px; transform: rotate(-90deg); }
.p-habito circle { fill: none; stroke-width: 3.6; }
.p-habito .riel { stroke: var(--habitos-soft); }
.p-habito .avance { stroke: var(--habitos); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.p-aviso { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: var(--oscuro); color: var(--sobre-oscuro);
  font: 500 12px/1.3 var(--sans); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5); transform: translateY(80px); opacity: 0; }
.p-aviso i { width: 24px; height: 24px; border-radius: 8px; background: var(--finanzas); display: grid; place-items: center; flex: none; font-style: normal; font-weight: 700; color: #fff; }
.p-aviso small { display: block; color: var(--sobre-oscuro2); font-size: 10.5px; }

/* El ciclo del teléfono (10 s): completa una tarea → cierra un hábito → llega un gasto. */
.vivo .f1 .p-check::after { animation: ciclo-check 10s var(--curva) infinite; }
.vivo .f1 b { animation: ciclo-tacha 10s var(--curva) infinite; }
.vivo .h2 .avance { animation: ciclo-anillo 10s var(--curva) infinite; }
.vivo .p-aviso { animation: ciclo-aviso 10s var(--curva) infinite; }
.p-habito .avance.lleno { stroke-dashoffset: 0; }
.p-habito .avance.medio { stroke-dashoffset: 45; }
@keyframes ciclo-check { 0%, 12% { transform: scale(0); opacity: 0; } 16%, 92% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(0); opacity: 0; } }
@keyframes ciclo-tacha { 0%, 14% { opacity: 1; text-decoration: none; } 20%, 92% { opacity: .45; text-decoration: line-through; } 97%, 100% { opacity: 1; text-decoration: none; } }
@keyframes ciclo-anillo { 0%, 30% { stroke-dashoffset: 62; } 40%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 62; } }
@keyframes ciclo-aviso { 0%, 52% { transform: translateY(80px); opacity: 0; } 57%, 84% { transform: none; opacity: 1; } 89%, 100% { transform: translateY(80px); opacity: 0; } }

/* Fichas que flotan alrededor */
.ficha { position: absolute; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; border-radius: 15px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sombra);
  font: 600 13.5px/1.2 var(--sans); animation: mece 6s var(--curva) infinite; animation-delay: var(--d, 0s); }
.ficha small { display: block; font: 400 11.5px/1.2 var(--sans); color: var(--text2); }
.ficha .p-icono { width: 32px; height: 32px; border-radius: 10px; }
.ficha .p-icono svg { width: 17px; height: 17px; }
@keyframes mece { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ficha.a { top: 9%; left: 0; } .ficha.b { top: 30%; right: -2%; --d: -2s; } .ficha.c { bottom: 23%; left: -3%; --d: -4s; } .ficha.d { bottom: 7%; right: 2%; --d: -1s; }
@media (max-width: 520px) { .ficha.b, .ficha.c { display: none; } .ficha.a { top: 2%; left: -2%; } .ficha.d { bottom: 3%; right: -2%; } .escena { min-height: 560px; } }

/* ── Aparecer al llegar ── */
.ver { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
.ver.visto { opacity: 1; transform: none; }

/* ── Secciones ── */
section { padding: 72px 0; }
@media (min-width: 900px) { section { padding: 104px 0; } }
.titulo-seccion { font: 400 clamp(32px, 4.6vw, 52px)/1.08 var(--serif); letter-spacing: -0.03em; margin-top: 14px; max-width: 17em; }
.titulo-seccion em { font-style: italic; color: var(--primary); }
.texto-seccion { font-size: clamp(17px, 1.8vw, 19px); color: var(--text2); margin-top: 16px; max-width: 36em; }
.tenue { background: var(--surface2); }

/* ── El problema: todo disperso → todo junto ── */
.junta { position: relative; height: 340px; margin-top: 36px; }
.junta .suelta { position: absolute; left: 50%; top: 50%; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font: 500 14.5px/1 var(--sans); color: var(--text2); white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(74, 40, 22, .35); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); transition: transform 1.1s var(--curva), opacity .6s var(--curva) .55s; transition-delay: calc(var(--n) * 70ms + 300ms), calc(var(--n) * 70ms + 800ms); }
.junta.visto .suelta { transform: translate(-50%, -50%) rotate(0) scale(.3); opacity: 0; }
.junta .centro { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; color: #fff;
  transform: scale(0); transition: transform .7s var(--curva) 1.25s; box-shadow: 0 0 0 0 var(--primary-soft); }
.junta .centro svg { width: 96px; height: 96px; }
.junta.visto .centro { transform: scale(1); animation: onda 2.6s var(--curva) 2s infinite; }
@keyframes onda { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent); } 100% { box-shadow: 0 0 0 46px transparent; } }
@media (max-width: 640px) { .junta { height: 300px; } .junta .suelta { font-size: 13px; padding: 8px 11px; --escala: .62; transform: translate(calc(-50% + var(--x) * .56), calc(-50% + var(--y) * .9)) rotate(var(--r)); } }

/* ── Funciones (pestañas) ── */
.pestanas { display: flex; gap: 8px; margin-top: 34px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { position: relative; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; flex: none;
  font: 600 15px/1 var(--sans); color: var(--text2); overflow: hidden; transition: color .2s var(--curva), border-color .2s var(--curva), background .2s var(--curva); }
.pestana svg { width: 18px; height: 18px; }
.pestana:hover { color: var(--text); }
.pestana[aria-selected="true"] { color: var(--c); border-color: var(--c); background: var(--cs); }
.pestana .progreso { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
.pestana[aria-selected="true"] .progreso.corre { animation: progreso var(--dur, 7s) linear forwards; }
@keyframes progreso { to { transform: scaleX(1); } }
.panel { display: none; margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; overflow: hidden; }
.panel.activo { display: grid; animation: entra-panel .5s var(--curva); }
@keyframes entra-panel { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 900px) { .panel.activo { grid-template-columns: 1fr 1fr; min-height: 470px; } }
.panel .copia { padding: 32px 26px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) { .panel .copia { padding: 48px; } }
.panel h3 { font: 400 clamp(28px, 3.4vw, 40px)/1.1 var(--serif); letter-spacing: -0.03em; margin-top: 12px; }
.panel .copia > p { color: var(--text2); margin-top: 12px; }
.beneficios { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.beneficios li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; }
.beneficios svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--c); }
.panel .copia .boton { align-self: flex-start; margin-top: 26px; }
.panel .muestra { background: var(--cs); display: grid; place-items: center; padding: 34px 20px; min-height: 340px; position: relative; overflow: hidden; }
.tarjeta { width: min(340px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sombra); padding: 16px; font-size: 14px; }
.tarjeta .p-fila { padding: 11px 4px; }
.tarjeta .p-fila b { font-size: 14.5px; } .tarjeta .p-fila small { font-size: 12px; }
.tarjeta .p-icono { width: 34px; height: 34px; border-radius: 11px; } .tarjeta .p-icono svg { width: 18px; height: 18px; }
.tarjeta .p-check { width: 22px; height: 22px; }
.tarjeta h4 { margin: 0 0 8px; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
/* Lo de adentro de cada panel se anima cada vez que el panel se abre (display:none → grid reinicia las animaciones). */
.entra { opacity: 0; animation: sube .6s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
.marca-sola .p-check::after { animation: marca 0.5s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 700ms + 1100ms); }
.marca-sola b { animation: tacha .4s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 700ms + 1250ms); }
@keyframes marca { to { transform: scale(1); opacity: 1; } }
@keyframes tacha { to { opacity: .45; text-decoration: line-through; } }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; font: 700 11px/1 var(--sans); color: var(--text2); flex: none; }
.cifra { font: 600 36px/1.1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin-top: 16px; }
.barras i { flex: 1; border-radius: 7px; background: var(--finanzas-soft); height: var(--h); transform: scaleY(0); transform-origin: bottom; animation: crece .7s var(--curva) forwards; animation-delay: calc(var(--i) * 70ms + 400ms); }
.barras i.hoy { background: var(--finanzas); }
@keyframes crece { to { transform: scaleY(1); } }
.caras { display: flex; justify-content: center; margin-bottom: 14px; }
.caras span { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--surface); margin-left: -10px; display: grid; place-items: center; font: 700 17px/1 var(--sans); background: var(--surface2); color: var(--text2);
  opacity: 0; animation: pop .45s var(--curva) forwards; animation-delay: calc(var(--i) * 100ms + 250ms); }
.caras span:first-child { margin-left: 0; }
.caras span:nth-child(even) { background: var(--relaciones-soft); color: var(--relaciones); }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.anillo-grande { position: relative; width: 170px; height: 170px; margin: 4px auto 16px; }
.anillo-grande svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-grande circle { fill: none; stroke-width: 7; }
.anillo-grande .riel { stroke: var(--habitos-soft); }
.anillo-grande .avance { stroke: var(--habitos); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: llena 1.1s var(--curva) .5s forwards; }
@keyframes llena { to { stroke-dashoffset: 0; } }
.anillo-grande div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anillo-grande strong { font: 600 46px/1 var(--sans); color: var(--habitos); font-variant-numeric: tabular-nums; }
.anillo-grande small { font-size: 13px; color: var(--text2); }
.semana { display: flex; justify-content: center; gap: 7px; }
.semana span { width: 32px; height: 32px; border-radius: 50%; background: var(--habitos); color: var(--surface); display: grid; place-items: center; font: 600 12px/1 var(--sans); opacity: 0; animation: pop .4s var(--curva) forwards; animation-delay: calc(var(--i) * 90ms + 500ms); }
.tablero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(420px, 100%); }
.columna { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 9px; min-height: 196px; }
.columna h4 { margin: 2px 2px 9px; font: 600 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text3); }
.nota { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 9px; font: 500 12.5px/1.3 var(--sans); margin-bottom: 7px; }
.nota small { display: flex; align-items: center; gap: 5px; margin-top: 7px; font: 400 11px/1 var(--sans); color: var(--text2); }
.nota .avatar { width: 18px; height: 18px; font-size: 9px; }
.nota.viaja { position: relative; z-index: 2; border-color: var(--tareas); animation: viaja 5.5s var(--curva) 1s infinite; }
@keyframes viaja { 0%, 16% { transform: none; box-shadow: none; } 24% { transform: translateY(-6px) rotate(-2deg); box-shadow: var(--sombra); } 44% { transform: translate(calc(100% + 26px), -6px) rotate(2deg); box-shadow: var(--sombra); }
  52%, 88% { transform: translate(calc(100% + 26px), 0); box-shadow: none; } 96%, 100% { transform: none; } }

/* ── Entornos ── */
.dos { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; gap: 64px; } }
.red { width: min(420px, 100%); margin: 0 auto; color: var(--primary); }
.red .linea { stroke-dasharray: 60; stroke-dashoffset: 60; }
.red .nodo, .red .persona { transform-box: fill-box; transform-origin: center; transform: scale(.6); opacity: 0; }
.visto .red .persona { animation: nace .5s var(--curva) forwards; }
.visto .red .linea { animation: traza .4s var(--curva) forwards; animation-delay: calc(var(--j) * 120ms + 500ms); }
.visto .red .nodo { animation: nace .36s var(--curva) forwards; animation-delay: calc(var(--j) * 120ms + 780ms); }
@keyframes nace { to { transform: scale(1); opacity: 1; } }
@keyframes traza { to { stroke-dashoffset: 0; } }
.circulos { display: grid; gap: 10px; margin-top: 26px; }
.circulo { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: transform .2s var(--curva), box-shadow .2s var(--curva); }
.circulo:hover { transform: translateX(4px); box-shadow: var(--sombra); }
.circulo .sigla { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font: 700 16px/1 var(--sans); flex: none; }
.circulo b { display: block; font-size: 16.5px; } .circulo span { color: var(--text2); font-size: 15px; }

/* ── Captura rápida ── */
.oscura { background: var(--oscuro); color: var(--sobre-oscuro); }
.oscura .texto-seccion { color: var(--sobre-oscuro2); }
.oscura .ceja { color: #e9a586; }
.oscura .titulo-seccion em { color: #e9a586; }
.maquina { margin-top: 34px; max-width: 720px; }
.renglon { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 22px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font: 400 clamp(19px, 3vw, 27px)/1.2 var(--sans); }
.renglon .mas { width: 38px; height: 38px; border-radius: 12px; background: #c0623c; display: grid; place-items: center; flex: none; color: #fff; font-size: 24px; line-height: 1; }
.cursor { width: 2px; height: 1.15em; background: #e9a586; animation: parpadea 1s steps(2) infinite; }
@keyframes parpadea { 50% { opacity: 0; } }
.entendido { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; min-height: 42px; }
.entendido span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 500 15px/1 var(--sans); animation: pop .4s var(--curva) both; animation-delay: calc(var(--i) * 130ms); }
.entendido span i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }

/* ── Pasos ── */
.pasos { display: grid; gap: 14px; margin-top: 36px; counter-reset: paso; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; }
.paso::before { counter-increment: paso; content: counter(paso); font: 400 76px/1 var(--serif); color: var(--primary-soft); position: absolute; right: 16px; top: 4px; }
.paso h3 { font: 600 19px/1.25 var(--sans); margin-top: 44px; position: relative; }
.paso p { color: var(--text2); margin-top: 8px; font-size: 16px; position: relative; }
.paso .tiempo { position: relative; display: inline-block; font: 600 12.5px/1 var(--sans); color: var(--primary); background: var(--primary-soft); padding: 6px 10px; border-radius: 999px; }

/* ── Privacidad ── */
.promesas { display: grid; gap: 12px; margin-top: 30px; }
@media (min-width: 760px) { .promesas { grid-template-columns: 1fr 1fr; } }
.promesa { display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.promesa svg { width: 24px; height: 24px; color: var(--primary); flex: none; margin-top: 2px; }
.promesa b { display: block; } .promesa span { color: var(--text2); font-size: 15.5px; }

/* ── Preguntas ── */
.preguntas { margin-top: 30px; max-width: 800px; border-top: 1px solid var(--border); }
.preguntas details { border-bottom: 1px solid var(--border); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 21px 2px; font: 600 18px/1.35 var(--sans); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s var(--curva); flex: none; }
.preguntas details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.preguntas p { color: var(--text2); padding: 0 2px 22px; max-width: 44em; animation: sube .4s var(--curva); }

/* ── Cierre ── */
.cierre { text-align: center; padding: 96px 0; }
.cierre .red { width: 150px; margin-bottom: 20px; }
.cierre h2 { font: 400 clamp(38px, 6vw, 68px)/1.04 var(--serif); letter-spacing: -0.035em; }
.cierre h2 em { font-style: italic; color: var(--primary); }
.cierre p { color: var(--text2); font-size: 19px; margin-top: 16px; }
.cierre .captura { margin: 30px auto 0; }
.cierre .garantias { justify-content: center; }
footer { border-top: 1px solid var(--border); padding: 30px 0 110px; color: var(--text3); font-size: 14.5px; }
footer .envoltura { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
footer a:hover { color: var(--primary); }
@media (min-width: 760px) { footer { padding-bottom: 36px; } }

/* ── Botón fijo en el celular (aparece al pasar la portada) ── */
.fijo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .32s var(--curva); display: flex; gap: 10px; align-items: center; }
.fijo.arriba { transform: none; }
.fijo .boton { flex: 1; }
.fijo span { font-size: 13px; color: var(--text2); line-height: 1.25; flex: none; max-width: 8.5em; }
@media (min-width: 760px) { .fijo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .sube, .ver, .entra, .caras span, .semana span { opacity: 1; transform: none; }
  .junta .suelta { display: none; } .junta .centro { transform: scale(1); }
  .red .linea { stroke-dashoffset: 0; } .red .nodo, .red .persona { transform: none; opacity: 1; }
  .barras i { transform: none; } .anillo-grande .avance { stroke-dashoffset: 0; }
}

/* En el celular, primero se ve el producto y luego el texto. */
@media (max-width: 899px) { .panel .muestra { order: -1; min-height: 300px; padding: 26px 16px; } }
.marca svg { width: 34px; height: 34px; }