/* ==========================================================================
   Secciones de la landing (una por bloque del documento de contenido)
   ========================================================================== */

/* Restablece los tokens claro/oscuro dentro de una superficie sobre fondo marino */
.reset-scheme { --line: #0E0E10; --shadow-c: #0E0E10; --text: #0E0E10; --muted: #3D4466; --link: #101E70; --focus: #101E70; }

/* Rendimiento: las secciones bajo el primer pantallazo no se maquetan hasta acercarse al viewport.
   --ish es la altura estimada (medida en 390 px y 1440 px de ancho) para que el scroll a las anclas no "salte";
   js/anchors.js corrige cualquier desvío residual. */
main > section:not(.hero):not(.strip) { content-visibility: auto; contain-intrinsic-size: auto var(--ish, 1400px); }
.footer { content-visibility: auto; contain-intrinsic-size: auto 183px; }
#problema { --ish: 1715px; } #paneles { --ish: 1534px; } #funciones { --ish: 2920px; } #como-funciona { --ish: 1243px; }
#direccion { --ish: 1899px; } #experiencia { --ish: 1523px; } #por-que { --ish: 2858px; } #planes { --ish: 964px; }
#preguntas { --ish: 1209px; } #seguridad { --ish: 768px; } #contacto { --ish: 1469px; }
@media (min-width: 1000px) {
  #problema { --ish: 1225px; } #paneles { --ish: 1312px; } #funciones { --ish: 1453px; } #como-funciona { --ish: 1233px; }
  #direccion { --ish: 1328px; } #experiencia { --ish: 1336px; } #por-que { --ish: 1391px; } #planes { --ish: 763px; }
  #preguntas { --ish: 1091px; } #seguridad { --ish: 578px; } #contacto { --ish: 952px; }
}

/* ---------- 3. Hero ---------- */
.hero {
  padding-top: calc(var(--nav-h) + clamp(2rem, 1rem + 5vw, 4.5rem)); padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--sky) 28%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at -10% 30%, color-mix(in srgb, var(--c-yellow) 22%, transparent), transparent 70%),
    var(--bg);
  overflow: clip;
}
.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.08fr 0.92fr; } }
.hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.1rem); }
.hero h1 .hl { background: linear-gradient(transparent 62%, var(--hl) 62% 92%, transparent 92%); padding-inline: .06em; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__lead { margin-top: 1.4rem; font-size: var(--fs-lead); color: var(--muted); max-width: 34rem; }
.hero__lead strong { color: var(--text); }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem 1rem; }
.hero__micro { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.hero__micro li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__micro .ico { width: 1.25rem; height: 1.25rem; color: var(--link); }

.hero-stage { container-type: inline-size; position: relative; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 1 / 1.2; }
.hero-stage .phone { position: absolute; }
.hero-stage .phone--main { --w: 50cqw; left: 25cqw; top: 7cqw; z-index: 3; rotate: 2deg; }
.hero-stage::before { content: ""; position: absolute; width: 64cqw; aspect-ratio: 1; right: 4cqw; bottom: 5cqw; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--sky); }
/* Tarjetas flotantes: recortes reales de otras pantallas de la app */
.fl { position: absolute; z-index: 4; overflow: hidden; background: #fff; border: var(--bw) solid var(--line); border-radius: 3.2cqw; box-shadow: .8cqw .8cqw 0 var(--shadow-c); animation: float 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fl img { display: block; width: 100%; height: auto; }
.fl--a { width: 40cqw; left: -3cqw; top: 31cqw; --d: -1s; rotate: -3deg; }
.fl--b { width: 40cqw; right: -3cqw; top: 76cqw; --d: -3s; rotate: 3deg; }
.fl--chat { width: 35cqw; left: -3cqw; top: 76cqw; --d: -2s; rotate: 2deg; }
.fl--event { width: 37cqw; right: -3cqw; top: 14cqw; --d: -4s; rotate: 3deg; }
.fl-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; pointer-events: none; }
.fl-link path { fill: none; stroke: var(--line); stroke-width: .7; stroke-dasharray: 2.2 2.2; stroke-linecap: round; }
.fl-link circle { fill: var(--c-yellow); stroke: var(--line); stroke-width: .6; }
@keyframes float { 50% { translate: 0 -1.4cqw; } }
/* Las cuatro personas */
.chips { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 2.6cqw 1.1cqw 1.8cqw; background: var(--c-yellow); color: var(--on-pastel); border: var(--bw) solid var(--line); border-radius: 99px; box-shadow: .6cqw .6cqw 0 var(--shadow-c); font-weight: 800; font-size: clamp(.68rem, 2.7cqw, .95rem); line-height: 1; white-space: nowrap; animation: float 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.chip .ico { width: 1.45em; height: 1.45em; }
.chip--a { right: 26cqw; top: -1cqw; --d: -.5s; background: var(--c-coral); }
.chip--b { left: -1cqw; top: 62cqw; --d: -2.5s; background: var(--c-yellow); }
.chip--c { right: 0; top: 60cqw; --d: -1.5s; background: var(--c-mint); }
.chip--d { left: 38cqw; top: 113cqw; --d: -3.5s; background: var(--c-lilac); }
@container (max-width: 430px) {
  .hero-stage .phone--main { --w: 56cqw; left: 22cqw; }
  .fl--chat, .fl--event, .chip--b, .chip--c { display: none; }
  .fl--a { width: 42cqw; top: 40cqw; } .fl--b { width: 42cqw; top: 80cqw; }
}
.hero-bear { position: absolute; z-index: 2; left: 9cqw; top: -2cqw; width: 29cqw; rotate: -10deg; transform-origin: 60% 100%; animation: peek 4.5s ease-in-out infinite; filter: drop-shadow(4px 4px 0 var(--shadow-c)); }
.hero-bear img { width: 100%; height: auto; }
@keyframes peek { 0%, 100% { translate: 0 0; rotate: -10deg; } 50% { translate: 1cqw -2.4cqw; rotate: -6deg; } }
/* ---------- 4. Franja de principios ---------- */
.strip { background: var(--navy); color: #fff; border-block: var(--bw) solid var(--ink); }
.strip__list { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .strip__list { grid-template-columns: repeat(4, 1fr); } }
.strip__item { display: flex; align-items: center; justify-content: center; gap: .85rem; padding: 1.35rem 1rem; font-weight: 700; line-height: 1.25; text-align: left; }
.strip__item .ico { width: 1.85rem; height: 1.85rem; color: var(--sky); }
.strip__item + .strip__item { border-left: 2px solid rgba(255,255,255,.18); }
@media (max-width: 899px) { .strip__item:nth-child(3) { border-left: 0; } .strip__item:nth-child(n+3) { border-top: 2px solid rgba(255,255,255,.18); } }
@media (max-width: 420px) { .strip__item { flex-direction: column; text-align: center; gap: .5rem; } }

/* ---------- 5. Problema y solución ---------- */
.pain { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .pain { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pain-card { position: relative; padding: 1.6rem; background: var(--surface); border: var(--bw) dashed var(--line); border-radius: var(--r-m); display: grid; gap: .6rem; align-content: start; }
.pain-card:nth-child(odd) { rotate: -0.8deg; } .pain-card:nth-child(even) { rotate: 0.9deg; }
.pain-card .chip-ico { background: var(--c-coral); color: var(--ink); margin-bottom: .6rem; }
.pain-card__k { font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pain-card h3 { margin-bottom: .35rem; }
.pain-card p { color: var(--muted); }
.pain-flow { display: flex; justify-content: center; padding-block: .5rem; color: var(--text); }
.pain-flow svg { width: min(260px, 60%); height: 56px; overflow: visible; }
.pain-flow path { stroke: var(--line); stroke-width: 2.5; fill: none; stroke-dasharray: 6 7; stroke-linecap: round; }
.solution { position: relative; display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--sky); color: var(--ink); --muted: #0E2A45; --line: #0E0E10; --shadow-c: #0E0E10; border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-lg); }
@media (min-width: 760px) { .solution { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.solution__badge { display: grid; align-items: end; justify-items: center; width: clamp(96px, 14vw, 150px); aspect-ratio: 1; overflow: hidden; background: var(--c-yellow); border: var(--bw) solid var(--line); border-radius: 50%; box-shadow: 4px 4px 0 var(--shadow-c); }
.solution__badge img { width: 78%; height: auto; }
.solution p { font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); line-height: 1.35; font-weight: 500; }
.solution p strong { font-weight: 800; }

/* ---------- 6. Paneles por rol (pestañas) ---------- */
.role-panel { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.4rem, 1rem + 2.5vw, 3rem); border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-lg); color: var(--on-pastel); --muted: #1D2340; --line: #0E0E10; --shadow-c: #0E0E10; }
.role-panel { --line: #0E0E10; --shadow-c: #0E0E10; }
@media (min-width: 900px) { .role-panel { grid-template-columns: 1.15fr 0.85fr; } }
.role-panel--sky { background: var(--c-sky); } .role-panel--yellow { background: var(--c-yellow); }
.role-panel--mint { background: var(--c-mint); } .role-panel--coral { background: var(--c-coral); }
.role-panel h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.role-panel__tag { display: inline-block; font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; opacity: .85; }
.benefits { display: grid; gap: .8rem; }
.benefits li { display: flex; gap: .85rem; align-items: flex-start; line-height: 1.45; }
.benefits .chip-ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; margin-top: -.1rem; }
.benefits .chip-ico .ico { width: 1.25rem; height: 1.25rem; }
.role-panel__shot { display: grid; place-items: center; }
@media (min-width: 900px) { .role-panel__shot .phone { --w: min(270px, 100%); } }
.tabs-hint { display: none; }

/* ---------- 7. Funcionalidades (bento) ---------- */
.bento { display: grid; gap: 1.1rem; grid-template-columns: 1fr; grid-auto-rows: auto; }
@media (min-width: 560px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
  .bento > * { grid-column: span 3; }
  .bento > .b-1 { grid-column: span 6; grid-row: span 2; }
  .bento > .b-6 { grid-column: span 6; }
}
.bento-item { container-type: inline-size; padding: 0; display: block; }
.bento-item__in { display: grid; gap: .8rem; align-content: start; height: 100%; padding: 1.4rem; }
.bento-item h3 { font-size: clamp(1.1rem, 4.5cqw + .6rem, 1.9rem); }
.bento-item p { font-size: .9875rem; line-height: 1.5; color: #1D2340; }
.bento-item .chip-ico { width: 3.1rem; height: 3.1rem; }
@container (min-width: 380px) {
  .bento-item__in { padding: 1.9rem; gap: 1rem; }
  .bento-item .chip-ico { width: 4rem; height: 4rem; border-radius: 18px; }
  .bento-item .chip-ico .ico { width: 2rem; height: 2rem; }
  .bento-item p { font-size: 1.125rem; max-width: 30ch; }
}
@container (min-width: 380px) and (max-width: 560px) { .b-6 .bento-item__in { grid-template-columns: auto 1fr; column-gap: 1.25rem; } .b-6 .chip-ico { grid-row: span 2; } }
@container (min-width: 520px) { .b-6 .bento-item__in { grid-template-columns: auto 1fr; column-gap: 1.5rem; align-items: center; } .b-6 .chip-ico { grid-row: span 2; } }
.b-1 .bento-item__in { align-content: end; min-height: 100%; }
.bento-item { position: relative; overflow: hidden; }

/* ---------- 8. Cómo funciona (stepper) ---------- */
.steps { --p: 0; position: relative; display: grid; gap: 2rem; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.steps::before, .steps::after { content: ""; position: absolute; border-radius: 99px; }
.steps::before { background: color-mix(in srgb, var(--line) 22%, transparent); }
.steps::after { background: var(--accent); border: 0; }
@media (min-width: 900px) {
  .steps::before { left: 10%; right: 10%; top: 2.1rem; height: 6px; }
  .steps::after { left: 10%; top: 2.1rem; height: 6px; width: calc(80% * var(--p)); outline: 2px solid var(--line); outline-offset: 0; }
}
@media (max-width: 899px) {
  .steps { padding-left: 4.5rem; }
  .steps::before { left: 2.05rem; top: 2rem; bottom: 2rem; width: 6px; }
  .steps::after { left: 2.05rem; top: 2rem; width: 6px; height: calc((100% - 4rem) * var(--p)); }
}
.step { position: relative; display: grid; gap: 1.25rem; align-content: start; }
.step__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; font-size: 1.75rem; font-weight: 800;
  background: var(--surface); color: var(--text); border: var(--bw) solid var(--line); border-radius: 50%; box-shadow: var(--sh);
  transition: background var(--t-mid), transform var(--t-mid) var(--ease), color var(--t-mid);
}
@media (min-width: 900px) { .step__num { margin-inline: auto; } .step { justify-items: stretch; } }
@media (max-width: 899px) { .step__num { position: absolute; left: -4.5rem; top: 0; } }
.step__body { padding: 1.5rem; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh); transition: transform var(--t-mid) var(--ease), background var(--t-mid); }
.step__body h3 { margin-bottom: .5rem; }
.step__body p { color: var(--muted); }
.step.is-active .step__num { background: var(--accent); color: var(--accent-ink); transform: scale(1.1); }
.step.is-active .step__body { background: var(--sky-soft); transform: translateY(-4px); }
.step__shot { margin-top: 1.1rem; border: var(--bw) solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.step__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.quote { position: relative; margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 46rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 3vw, 3rem); background: var(--c-yellow); color: var(--on-pastel); border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-lg); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); font-weight: 700; line-height: 1.35; text-align: center; letter-spacing: -.01em; }
.quote::before { content: "“"; position: absolute; left: 1.1rem; top: -.35rem; font-size: 5rem; line-height: 1; font-weight: 800; color: var(--navy); }

/* ---------- 9. Panel de dirección ---------- */
.director-lead { color: var(--muted); font-size: var(--fs-lead); }
.win { overflow: hidden; background: var(--bg); color: var(--text); border: var(--bw) solid #fff; border-radius: var(--r-l); box-shadow: var(--sh-lg); }
.win__bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-bottom: var(--bw) solid var(--line); background: var(--bg-alt); }
.win__bar i { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--line); background: var(--c-coral); }
.win__bar i:nth-child(2) { background: var(--c-yellow); } .win__bar i:nth-child(3) { background: var(--c-mint); }
.win__bar span { margin-left: .75rem; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.win__body { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.1rem, .8rem + 2vw, 2.25rem); }
@media (min-width: 900px) { .win__body { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.col-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: 1.0625rem; font-weight: 800; }
.col-title small { font-weight: 600; color: var(--muted); font-size: .9375rem; }
.col-title::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid var(--line); background: var(--accent); flex: none; }
.dcards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.dcard { container-type: inline-size; }
.dcard__in { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem; height: 100%; }
.dcard h4 { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .25rem; }
.dcard p { font-size: .9rem; line-height: 1.4; color: #1D2340; }
.dcard .chip-ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.dcard .chip-ico .ico { width: 1.25rem; height: 1.25rem; }
@container (max-width: 15.5rem) { .dcard__in { flex-direction: column; gap: .6rem; } }
.callout { margin-top: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.4rem, 1rem + 2vw, 2.25rem); background: var(--c-yellow); color: var(--on-pastel); border: var(--bw) solid #fff; border-radius: var(--r-l); box-shadow: 6px 6px 0 #fff; }
@media (min-width: 700px) { .callout { grid-template-columns: auto 1fr; gap: 2rem; } }
.callout .chip-ico { width: 4rem; height: 4rem; border-radius: 18px; }
.callout .chip-ico .ico { width: 2rem; height: 2rem; }
.callout p { font-size: clamp(1.2rem, 1rem + 1.1vw, 1.8rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }

/* ---------- 10. Diseño y experiencia ---------- */
.dx { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-content: center; }
@media (min-width: 560px) { .dx { grid-template-columns: repeat(2, 1fr); } }
.dx-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; }
.dx-item h3 { font-size: 1.125rem; margin-bottom: .3rem; }
.dx-item p { color: var(--muted); font-size: .96rem; line-height: 1.45; }
.dx-item .chip-ico { background: var(--c-sky); }

@media (max-width: 640px) { .compare__frame { aspect-ratio: 4 / 5; } }
@media (max-width: 640px) { .sample__cols { grid-template-columns: 1fr; } }

/* ---------- 11. Por qué Nivra ---------- */
.principles { display: grid; grid-template-columns: 1fr; border: var(--bw) solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); box-shadow: var(--sh-lg); }
@media (min-width: 560px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .principles { grid-template-columns: repeat(4, 1fr); } }
.principle { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); display: grid; gap: .6rem; align-content: start; }
.principle + .principle { border-top: var(--bw) solid var(--line); }
@media (min-width: 560px) { .principle + .principle { border-top: 0; } .principle:nth-child(even) { border-left: var(--bw) solid var(--line); } .principle:nth-child(n+3) { border-top: var(--bw) solid var(--line); } }
@media (min-width: 1000px) { .principle:nth-child(n+2) { border-left: var(--bw) solid var(--line); } .principle:nth-child(n+3) { border-top: 0; } }
.principle__n { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.principle h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.principle:nth-child(1) h3 { color: var(--link); }
.principle p { color: var(--muted); }
.day { margin-top: clamp(3.5rem, 7vw, 6rem); }
.day__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .75rem; }
.day__head h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.badge-illus { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .9375rem; padding: .4rem 1rem; background: var(--c-lilac); color: var(--on-pastel); border: var(--bw) solid var(--line); border-radius: 99px; box-shadow: 2px 2px 0 var(--shadow-c); }
.badge-illus .ico { width: 1.15rem; height: 1.15rem; }
.day__note { color: var(--muted); max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.timeline { position: relative; display: grid; gap: 2rem; counter-reset: t; }
@media (min-width: 640px) and (max-width: 999px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 1.4rem; height: 4px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); } }
.tl-item { position: relative; display: grid; gap: 1rem; align-content: start; }
.tl-time { position: relative; z-index: 1; width: fit-content; padding: .35rem 1rem; font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; background: var(--c-yellow); color: var(--on-pastel); border: var(--bw) solid var(--line); border-radius: 99px; box-shadow: var(--sh); }
.tl-card { padding: 1.1rem; display: grid; gap: 1rem; background: var(--surface); }
.vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-card .vignette { aspect-ratio: 4 / 3; border: var(--bw) solid var(--line); border-radius: 14px; overflow: hidden; }
.tl-card p { line-height: 1.5; }
.tl-card p strong { display: block; font-size: 1.0625rem; margin-bottom: .15rem; }

/* ---------- 12. Planes a tu medida ---------- */
.plans { text-align: center; }
.plans__inner { max-width: 54rem; margin-inline: auto; }
.plans h2 { color: var(--ink); }
.plans__lead { margin: 1.25rem auto 0; font-size: var(--fs-lead); max-width: 40rem; color: #0E2A45; }
.plan-steps { margin: clamp(2rem, 4vw, 3rem) 0; display: grid; gap: 1.1rem; text-align: left; counter-reset: p; }
@media (min-width: 820px) { .plan-steps { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.plan-step { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: #fff; color: #0E0E10; border: var(--bw) solid #0E0E10; border-radius: var(--r-m); box-shadow: 4px 4px 0 #0E0E10; display: grid; gap: .9rem; align-content: start; }
.plan-step__n { display: grid; place-items: center; width: 3rem; height: 3rem; font-weight: 800; font-size: 1.4rem; background: var(--c-yellow); border: var(--bw) solid #0E0E10; border-radius: 50%; }
.plan-step p { line-height: 1.5; }
.plan-step strong { display: inline; }
@media (min-width: 820px) { .plan-step:not(:last-child)::after { content: ""; position: absolute; right: -1.4rem; top: 2.5rem; width: 1.4rem; height: 4px; background: #0E0E10; } }

/* ---------- 13. FAQ ---------- */
.faq { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .faq { grid-template-columns: 0.8fr 1.4fr; align-items: start; } .faq .section-head { position: sticky; top: calc(var(--nav-h) + 2rem); margin-bottom: 0; } }
.faq__bear { margin-top: 1.75rem; width: 110px; height: auto; display: none; }
@media (min-width: 960px) { .faq__bear { display: block; } }

/* ---------- 14. Seguridad ---------- */
.sec { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .sec { grid-template-columns: 1fr 1.1fr; } }
.sec .section-head { margin-bottom: 0; }
.sec-list { display: grid; gap: 1.1rem; }
.sec-card { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.35rem; }
.sec-card h3 { margin-bottom: .25rem; font-size: 1.15rem; }
.sec-card p { line-height: 1.5; color: #1D2340; }
.sec-card .chip-ico { width: 3.4rem; height: 3.4rem; }
.sec-card .chip-ico .ico { width: 1.7rem; height: 1.7rem; }

/* ---------- 15. CTA final + formulario ---------- */
.cta { overflow: clip; }
.cta__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .cta__grid { grid-template-columns: 0.9fr 1.1fr; } }
.cta h2 { color: #fff; }
.cta__lead { margin-top: 1.2rem; font-size: var(--fs-lead); color: #D5DBF5; max-width: 30rem; }
.cta__bear { margin-top: 2rem; width: clamp(120px, 22vw, 190px); position: relative; transform-origin: 50% 100%; animation: wave 3.2s ease-in-out infinite; filter: drop-shadow(5px 5px 0 #fff); }
.cta__bear img { width: 100%; height: auto; }
@keyframes wave { 0%, 100% { rotate: -5deg; } 50% { rotate: 6deg; } }
.cta__bear-wrap { display: flex; align-items: flex-end; gap: 1rem; }
.cta__hi { align-self: flex-start; margin-top: 1.5rem; padding: .5rem 1rem; background: var(--c-yellow); color: var(--ink); font-weight: 800; border: 2px solid #fff; border-radius: 16px 16px 16px 4px; box-shadow: 3px 3px 0 #fff; rotate: -3deg; }

/* ---------- 16. Pie de página ---------- */
.footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--bg-alt); border-top: var(--bw) solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.footer__brand { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.footer__brand img.footer__bear { width: 56px; height: auto; }
.footer__phrase { font-weight: 700; }
.footer__copy { color: var(--muted); font-size: .9375rem; }

/* ---------- Capturas reales ---------- */
/* Dos celulares superpuestos por rol (sección 6) */
.duo { container-type: inline-size; position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1.5; margin-inline: auto; }
.duo .phone { position: absolute; }
.duo__a { --w: 60cqw; left: 0; top: 0; z-index: 1; rotate: -3deg; }
.duo__b { --w: 56cqw; right: 0; top: 14cqw; z-index: 2; rotate: 3deg; }
.role-panel .phone { border-color: #0E0E10; box-shadow: 4px 4px 0 #0E0E10; }
.role-panel .phone::before { background: #0E0E10; }
.role-panel .phone__screen { border-color: #0E0E10; }
.role-panel .phone { --line: #0E0E10; --shadow-c: #0E0E10; }

/* Funcionalidades: capturas que asoman en las tarjetas grandes (solo con espacio) */
.peek { display: none; }
@media (min-width: 1000px) {
  .bento { grid-auto-rows: minmax(215px, auto); }
  .b-1 { grid-column: 1 / 7; grid-row: 1 / 3; }  .b-2 { grid-column: 7 / 10; grid-row: 1; }
  .b-4 { grid-column: 7 / 10; grid-row: 2; }     .b-3 { grid-column: 10 / 13; grid-row: 1 / 3; }
  .b-5 { grid-column: 1 / 4; grid-row: 3 / 5; }  .b-6 { grid-column: 4 / 10; grid-row: 3 / 5; }
  .b-7 { grid-column: 10 / 13; grid-row: 3; }    .b-8 { grid-column: 10 / 13; grid-row: 4; }
  .b-9 { grid-column: 1 / 4; grid-row: 5; }      .b-10 { grid-column: 4 / 7; grid-row: 5; }
  .b-11 { grid-column: 7 / 10; grid-row: 5; }    .b-12 { grid-column: 10 / 13; grid-row: 5; }
  .bento-item__in { align-content: start; }
  .peek { display: block; position: absolute; z-index: 1; overflow: hidden; background: #fff; border: 2px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; bottom: -2px; }
  .peek img { display: block; width: 100%; height: auto; }
  .b-3 .peek, .b-5 .peek { left: 50%; translate: -50% 0; width: min(66%, 190px); height: 52%; }
  .b-1 .peek { right: 8%; top: 1.6rem; bottom: -2px; width: min(38%, 230px); height: auto; border-radius: 26px 26px 0 0; }
  .b-6 .peek { right: 6%; top: 1.6rem; width: min(30%, 190px); height: auto; }
  .b-1 .bento-item__in { align-content: end; padding-right: 48%; }
  .b-6 .bento-item__in { padding-right: 40%; align-content: center; }
  .b-3 .bento-item__in, .b-5 .bento-item__in { padding-bottom: 0; }
}

/* Diseño y experiencia: 4 puntos + captura de materias */
.dx-wrap { display: grid; gap: 2rem; align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1000px) { .dx-wrap { grid-template-columns: 1.4fr 0.6fr; gap: 3rem; } }
.dx-shot { display: grid; place-items: center; }
.dx-shot .phone { --w: min(250px, 62vw); rotate: 3deg; }

/* Tira de capturas del panel de dirección */
.shots { display: flex; gap: 1.1rem; margin-top: clamp(2rem, 4vw, 3rem); padding: .5rem .5rem 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.shots li { flex: none; scroll-snap-align: center; }
.shots .phone { --w: 190px; }
.shots li:nth-child(odd) .phone { translate: 0 .6rem; }
@media (min-width: 1000px) { .shots { justify-content: center; overflow: visible; } .shots .phone { --w: clamp(150px, 15vw, 200px); } }

/* Comparador claro / oscuro con capturas */
.compare { --pos: 50%; max-width: 640px; margin-inline: auto; }
.compare__stage { display: flex; justify-content: center; gap: clamp(.9rem, 4vw, 2rem); }
.cmp { --w: min(250px, 42vw); }
.cmp:nth-child(2) { margin-top: 2.2rem; }
.cmp__dark { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.cmp__line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--c-yellow); box-shadow: 0 0 0 1.5px #0E0E10; }
.compare__ctrl { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.compare__end { font-size: .875rem; font-weight: 800; white-space: nowrap; }
.compare__range { flex: 1; min-width: 0; height: 44px; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
.compare__range::-webkit-slider-runnable-track { height: 14px; background: linear-gradient(90deg, #fff, #0E0E10); border: var(--bw) solid var(--line); border-radius: 99px; }
.compare__range::-moz-range-track { height: 14px; background: linear-gradient(90deg, #fff, #0E0E10); border: var(--bw) solid var(--line); border-radius: 99px; }
.compare__range::-webkit-slider-thumb { appearance: none; width: 32px; height: 32px; margin-top: -11px; background: var(--c-yellow); border: 2px solid #0E0E10; border-radius: 50%; box-shadow: 2px 2px 0 var(--shadow-c); }
.compare__range::-moz-range-thumb { width: 28px; height: 28px; background: var(--c-yellow); border: 2px solid #0E0E10; border-radius: 50%; box-shadow: 2px 2px 0 var(--shadow-c); }
.compare__range:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.compare__toggle { display: flex; justify-content: center; gap: .6rem; margin-top: .5rem; }
.compare__hint { margin-top: .9rem; text-align: center; color: var(--muted); font-size: .9375rem; }