/* Limud · landing v3. Sistema de los videos: papel, tinta, lavanda como color de acción, los colores de bloque de la dirección A
   (coral, rosa, sol, menta), ambientes pastel por sección, Inter Display 900 de tracking cerrado. Sin dibujos, sin subrayados,
   sin degradados en el texto. Las formas son bloques, cuadrados con «+», semicírculos y un bloque que sube.
   El movimiento lo hace Motion desde main.js; aquí solo están los estados iniciales (ocultos solo si el visitante no pidió
   «reducir movimiento» y hay JS) y las insignias que flotan. */

@font-face {
  font-family: "Inter Display";
  src: url("/assets/fonts/inter-display-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("/assets/fonts/frank-ruhl-he.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF;
}

:root {
  --papel: #faf6f1;
  --blanco: #fffdf8;
  --tinta: #201f32;
  --tinta-2: #4a4862;
  --accion: #604bcc;
  --accion-hondo: #43319f;
  --accion-clara: #d9d2fa;
  --accion-noche: #a99cf2;
  /* colores de bloque de los videos */
  --coral: #f2553d;
  --rosa: #f29bcb;
  --sol: #ffc83d;
  --menta: #3fb59a;
  --lima: #d8ea5c;
  /* ambientes pastel por sección */
  --amb-hoy: #fbe9db;
  --amb-cielo: #e4eef9;
  --amb-alefbet: #dff2e8;
  --amb-fiestas: #fdf0c9;

  --sans: "Inter Display", "Frank Ruhl Libre", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --he: "Frank Ruhl Libre", "Times New Roman", serif;

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1360px;
  --section: clamp(88px, 12vw, 176px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--accion); outline-offset: 4px; border-radius: 6px; }
.why :focus-visible, .ppanel-plus :focus-visible, .pt .c-plus :focus-visible { outline-color: var(--papel); }
.foot :focus-visible { outline-color: var(--accion-noche); }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 20;
  background: var(--tinta); color: var(--papel);
  padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.dot { color: var(--accion); }

/* ---------- titulares cinéticos ---------- */
.kin {
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-wrap: balance;
}
.kin .ln {
  display: block;
  overflow: hidden;
  padding: 0.16em 0.06em 0.24em;
  margin: -0.16em -0.06em -0.24em;
}
.kin .w { display: inline-block; }
.kin-xl { font-size: clamp(3.4rem, 19vw, 9rem); }
.kin-l { font-size: clamp(3.2rem, 15.5vw, 6rem); }
.kin-m { font-size: clamp(2rem, 8.4vw, 3.1rem); line-height: 0.96; letter-spacing: -0.045em; }
.kin-m2 { font-size: clamp(2.5rem, 11.4vw, 4.2rem); line-height: 0.92; letter-spacing: -0.05em; }
.acc { color: var(--accion); }

/* ---------- formas del sistema de video ---------- */
.sh { position: absolute; display: block; pointer-events: none; z-index: 0; }
.coral { background: var(--coral); }
.rosa { background: var(--rosa); }
.sol { background: var(--sol); }
.menta { background: var(--menta); }
.sq, .mk { aspect-ratio: 1; }
.mk { position: relative; }
.sh.sq { position: absolute; }
.sq::before, .mk::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / 46% 5% no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 5% 46% no-repeat;
}
.sun { aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--sol); }
.circ { aspect-ratio: 1; border-radius: 50%; }
.mk { display: block; width: 48px; height: 48px; flex: none; }
/* solo las capas que se mueven */
.pl, .bp, .sh[data-par] { will-change: transform; }

/* pila: imagen de teléfonos + formas detrás + insignias que flotan */
.stack { position: relative; }
.stack > .pl { position: relative; z-index: 1; width: 100%; }
.pl > img { display: block; width: 100%; height: auto; }
.bp { display: block; }
.b { position: absolute; translate: -50% -50%; z-index: 3; pointer-events: none; }
.b img { width: 100%; height: auto; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 10px 14px rgb(32 31 50 / 0.3)); }
.b-cien, .b-s1 { --f: 5.4s; --dl: -0.6s; }
.b-racha, .b-s2 { --f: 6.6s; --dl: -2.1s; }
.b-shofar, .b-s3 { --f: 4.8s; --dl: -1.3s; }
.b-januca, .b-semana, .b-s4 { --f: 5.9s; --dl: -3.2s; }

/* posiciones tomadas de insignias-posiciones.json, ya recalculadas sobre la imagen recortada */
.diag .b-cien { left: 87.83%; top: 22.87%; width: 22.52%; --r: 10deg; }
.diag .b-racha { left: 9.32%; top: 84.34%; width: 17.16%; --r: -8deg; }
.diag .b-shofar { left: 65.2%; top: 60.34%; width: 13.94%; --r: 14deg; }
.diag .b-januca { left: 55.89%; top: 7.87%; width: 12.88%; --r: -6deg; }
.fila .b-cien { left: 92.02%; top: 21.08%; width: 14.7%; --r: -8deg; }
.fila .b-racha { left: 44.62%; top: 89.12%; width: 11.03%; --r: 9deg; }
.fila .b-shofar { left: 59.66%; top: 9.46%; width: 9.55%; --r: 11deg; }
.fila .b-semana { left: 4.97%; top: 55.1%; width: 9.18%; --r: -10deg; }

/* ---------- barra superior ---------- */
.top {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max); margin: 0 auto;
  padding: 22px var(--gutter);
}
.logo { font-weight: 900; font-size: 2.1rem; letter-spacing: -0.055em; line-height: 1; text-decoration: none; }
.top-link { font-weight: 700; font-size: 1rem; text-decoration: none; padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.top-link:hover { color: var(--accion); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  border-radius: 999px; border: 2px solid transparent;
  font: 800 1.0625rem/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; text-align: center;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-main { background: var(--accion); color: #fff; }
.btn-main:hover { background: var(--accion-hondo); }
.btn-alt { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-alt:hover { background: var(--tinta); color: var(--papel); }
.btn-dark { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn-dark:hover { background: var(--accion); border-color: var(--accion); }
[data-os="ios"] .hero .btn-alt, [data-os="ios"] .get .btn-alt { background: var(--accion); border-color: var(--accion); color: #fff; }
[data-os="ios"] .hero .btn-alt:hover, [data-os="ios"] .get .btn-alt:hover { background: var(--accion-hondo); border-color: var(--accion-hondo); }
[data-os="ios"] .hero .btn-main { background: transparent; color: var(--tinta); border-color: var(--tinta); }
[data-os="ios"] .hero .btn-main:hover { background: var(--tinta); color: var(--papel); }

/* ---------- 1. hero (ambiente durazno de Hoy) ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--amb-hoy) 0%, var(--papel) 96%);
  overflow: clip;
}
.hero-copy { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: clamp(20px, 6vw, 56px) var(--gutter) 0; }
.hero-sub { margin-top: clamp(28px, 5vw, 48px); max-width: 34rem; }
.lead { text-wrap: balance; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
.body { margin-top: 14px; color: var(--tinta-2); max-width: 30rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.slam { display: block; transform-origin: 0 100%; }

.hero-art { width: 118vw; margin: 12px 0 -4vw -9vw; }
.diag .sun { left: 50%; bottom: 4%; translate: -50% 0; width: 82%; }
.diag .coral { right: -6%; top: 30%; width: 28%; height: 6.5%; }
.diag .sq.rosa { right: 18%; top: 1%; width: 10%; }
.diag .menta { left: -4%; bottom: 20%; width: 19%; height: 5.5%; }

@media (min-width: 1024px) {
  .hero { min-height: 900px; }
  .hero-copy { padding-bottom: 104px; }
  .hero-sub { max-width: min(34rem, 42vw); }
  .hero-art {
    position: absolute; right: -3vw; bottom: -2.5vw; margin: 0;
    width: clamp(440px, 54vw, 840px); z-index: 1;
  }
  .kin-xl { font-size: clamp(6.5rem, 11vw, 9.5rem); }
  .kin-l { font-size: clamp(5.5rem, 8.6vw, 9rem); }
  .kin-m { font-size: clamp(2.4rem, 3.4vw, 3.6rem); }
}

/* ---------- 2. la app (ambiente azul cielo; un bloque lavanda sube detrás de la mano) ---------- */
.app {
  background: var(--amb-cielo);
  padding: var(--section) var(--gutter) 0;
  display: grid; gap: clamp(40px, 6vw, 72px);
  overflow: clip;
}
.app > * { max-width: var(--max); width: 100%; margin-inline: auto; }
.facts { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: clamp(28px, 4vw, 44px); }
.fact p { margin-top: 10px; color: var(--tinta-2); max-width: 26rem; }
.app-art { position: relative; width: calc(100% + 2 * var(--gutter) * 0.6); margin-inline: calc(var(--gutter) * -0.3); }
.app-art .pl { position: relative; z-index: 1; width: 100%; }
.app-art .hand { filter: drop-shadow(0 26px 24px rgb(32 31 50 / 0.14)); }
.app-art .rise { right: -24%; bottom: 0; width: 114%; height: 64%; background: var(--accion); }
.app-art .sq.rosa { left: 4%; top: 12%; width: 15%; }
.app-art .blk.sol { right: 6%; top: 8%; width: 17%; height: 5%; }

@media (min-width: 1024px) {
  .app {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: end; gap: 40px;
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  }
  .app > * { margin: 0; max-width: none; }
  .app-copy { padding-bottom: var(--section); align-self: center; }
  .app-art { width: min(110%, 760px); margin: 0 -4vw 0 auto; justify-self: end; }
}

/* ---------- 3. tres razones: la fila de teléfonos es la protagonista ---------- */
.why {
  background: var(--accion);
  color: var(--papel);
  padding: clamp(56px, 8vw, 112px) 0 var(--section);
  overflow: clip;
}
.fila { position: relative; aspect-ratio: 1920 / 1055; width: 190vw; margin-left: -48vw; }
.fila > * { position: absolute; }
.fila .fs { left: 0; top: 0; width: 100%; height: auto; z-index: 1; }
.fila > .pl { position: absolute; z-index: 2; }
.fila .ft1 { left: 5.15%; top: 1.99%; width: 29.81%; }
.fila .ft2 { left: 24.11%; top: 10.62%; width: 35%; }
.fila .ft3 { left: 46.35%; top: 17.59%; width: 42.34%; }
.fila .sun { left: 66%; bottom: 14%; translate: -50% 0; width: 44%; }
.fila .coral { left: -4%; top: 38%; width: 12%; height: 5%; }
.fila .sq.sol { right: 3%; bottom: 14%; width: 6.5%; }
.fila .menta { left: 24%; bottom: 8%; width: 11%; height: 3.8%; }

.reasons {
  max-width: var(--max); margin: clamp(32px, 5vw, 64px) auto 0; padding-inline: var(--gutter);
  display: grid; gap: 56px;
}
.reason p { margin-top: 18px; max-width: 24rem; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; }
.reason .mk { margin-bottom: 22px; }
.mk-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.mk-row .mk { margin-bottom: 0; }
.he { font-family: var(--he); font-weight: 700; direction: rtl; unicode-bidi: bidi-override; font-size: 3.5rem; line-height: 1.2; color: var(--papel); }
.r1 .acc { color: var(--sol); }
.r2 .acc { color: var(--rosa); }
.r3 .acc { color: var(--lima); }
.reason .acc .dot { color: inherit; }

@media (min-width: 900px) {
  .fila { width: min(100vw, 1700px); margin-inline: auto; }
  .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .r2 { margin-top: 56px; }
  .r3 { margin-top: 112px; }
  .kin-m2 { font-size: clamp(2.5rem, 4.4vw, 4.4rem); }
}

/* ---------- 3b. hay más en Limud ---------- */
.more { position: relative; background: var(--papel); padding: var(--section) var(--gutter); overflow: clip; }
.more > .circ { right: -6vw; top: 14%; width: clamp(110px, 20vw, 260px); }
.more > .blk { left: 0; bottom: 8%; width: clamp(60px, 14vw, 200px); height: clamp(22px, 3.6vw, 44px); }
.more-head, .mlist { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.more-head { margin-bottom: clamp(40px, 6vw, 72px); }
.more-sub { margin-top: 22px; max-width: 26rem; color: var(--tinta-2); }
.mlist { display: grid; gap: clamp(28px, 4vw, 44px); }
.mrow { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 28px); align-items: center; }
.mt {
  display: grid; place-items: center; flex: none;
  width: clamp(76px, 20vw, 104px); aspect-ratio: 1;
  font-family: var(--he); font-weight: 700; direction: rtl; unicode-bidi: bidi-override; line-height: 1; color: var(--tinta);
  font-size: clamp(1.5rem, 6.4vw, 2.2rem);
}
.m1 .mt, .m3 .mt { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
.m4 .mt { font-size: clamp(1.3rem, 5.2vw, 1.75rem); }
.m5 .mt { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.m6 .mt { font-size: clamp(1.25rem, 5vw, 1.7rem); }
.t-acc { background: var(--accion); color: var(--papel); }
.t-sol { background: var(--sol); border-radius: 50%; }
.t-coral { background: var(--coral); }
.t-rosa { background: var(--rosa); border-radius: 50%; }
.t-menta { background: var(--menta); }
.t-lima { background: var(--lima); border-radius: 50%; }
.mrow h3 { font-weight: 900; font-size: clamp(1.75rem, 6.4vw, 2.6rem); line-height: 1; letter-spacing: -0.045em; }
.mrow p { margin-top: 8px; color: var(--tinta-2); max-width: 30rem; }
.pill {
  display: inline-block; vertical-align: 0.25em; margin-left: 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--accion); color: #fff; font-weight: 800; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase;
}
.m5 .pill { background: var(--tinta); color: var(--sol); }

@media (min-width: 1024px) {
  .more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .more-head, .mlist { max-width: none; margin: 0; }
  .more-head { position: sticky; top: 96px; margin-bottom: 0; }
  .m2, .m4, .m6 { margin-left: clamp(24px, 4vw, 64px); }
}

/* ---------- 3c. Limud Niños: franja de color con pegatinas ---------- */
.kband {
  position: relative; background: var(--sol); overflow: clip;
  padding: var(--section) var(--gutter) 0;
  display: grid; gap: 28px;
}
.kband > .sun { right: -10vw; bottom: 0; left: auto; width: min(80vw, 760px); background: var(--coral); }
.kband > .sq { left: auto; right: 7vw; top: 6%; width: clamp(48px, 9vw, 110px); background-color: var(--rosa); }
.kband > .blk { left: 0; bottom: 5%; width: clamp(60px, 12vw, 180px); height: clamp(22px, 3.4vw, 44px); background: var(--rosa); }
.kband-copy { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin-inline: auto; }
.kband-p { margin-top: 24px; max-width: 28rem; font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem); line-height: 1.45; }
.kband .btn { margin-top: 28px; }
.kband-art { position: relative; z-index: 1; width: min(100%, 520px); margin: 0 auto -2px; }
.b-s1 { left: 10%; top: 24%; width: 24%; --r: -10deg; }
.b-s2 { left: 92%; top: 40%; width: 22%; --r: 12deg; }
.b-s3 { left: 14%; top: 82%; width: 22%; --r: 8deg; }
.b-s4 { left: 86%; top: 8%; width: 20%; --r: -8deg; }

@media (min-width: 1024px) {
  .kband {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px;
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  }
  .kband-copy { max-width: none; margin: 0; padding-bottom: var(--section); align-self: center; }
  .kband-art { width: min(100%, 600px); margin: 0 0 -2px auto; }
}

/* ---------- 3d. planes ---------- */
.plans { position: relative; background: var(--papel); padding: var(--section) var(--gutter); overflow: clip; }
.plans-head, .plans-cta, .pt-wrap, .pt-tabs { max-width: var(--max); margin-inline: auto; }
.plans-sub { margin-top: 20px; max-width: 28rem; color: var(--tinta-2); }
.plans-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 6vw, 72px); }

/* escritorio: una tabla real; las columnas son paneles de color detrás */
.pt-wrap { display: none; position: relative; margin-top: clamp(56px, 7vw, 96px); }
.pt-tabs { margin-top: 40px; }
@media (min-width: 900px) {
  .pt-wrap { display: block; }
  .pt-tabs { display: none; }
}
.pt { position: relative; z-index: 1; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.pt .k0 { width: 34%; }
.pt .k1, .pt .k2, .pt .k3 { width: 22%; }
.pcols { position: absolute; inset: 0; z-index: 0; }
.pcol { position: absolute; top: 0; bottom: 0; border-radius: 28px; }
.pcol-free { left: calc(34% + 6px); width: calc(22% - 12px); background: var(--blanco); box-shadow: inset 0 0 0 2px rgb(32 31 50 / 0.12); }
.pcol-plus { left: calc(56% + 6px); width: calc(22% - 12px); top: -28px; bottom: -28px; background: var(--accion); box-shadow: 0 36px 60px -30px rgb(67 49 159 / 0.65); }
.pcol-pro { left: calc(78% + 6px); width: calc(22% - 12px); background: var(--tinta); }

.pt thead th { position: relative; padding: 30px 14px 22px; text-align: center; vertical-align: top; font-weight: 500; }
.pt .h0 { padding: 0; }
.pt .pn { display: block; font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
.pt .pr { display: block; margin-top: 14px; font-weight: 900; font-size: clamp(1.9rem, 2.7vw, 2.6rem); line-height: 1; letter-spacing: -0.05em; }
.pt .pr small { font-weight: 600; font-size: 0.9rem; letter-spacing: 0; }
.pt .pnote { display: block; margin-top: 12px; font-size: 0.85rem; line-height: 1.4; font-weight: 500; }
.pt .h-free { color: var(--tinta); }
.pt .h-plus { color: var(--papel); padding-top: 44px; }
.pt .h-pro { color: var(--papel); }
.pt .h-pro .pn { color: var(--sol); }
.tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--sol); color: var(--tinta); font-weight: 800; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
}
.pt .h-plus .tag { position: absolute; top: 6px; left: 50%; translate: -50% 0; white-space: nowrap; }

.pt tr.grp th { padding: 52px 0 14px; text-align: left; font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
.pt tbody:first-of-type tr.grp th { padding-top: 40px; }
.pt tbody th[scope="row"] {
  padding: 15px 22px 15px 0; text-align: left; font-weight: 600; font-size: 1rem; line-height: 1.35;
  border-top: 1px solid rgb(32 31 50 / 0.1);
}
.pt tbody td { padding: 13px 8px; text-align: center; vertical-align: middle; border-top: 1px solid rgb(32 31 50 / 0.1); }
.pt .c-free { color: var(--tinta); }
.pt .c-plus, .pt .c-pro { color: var(--papel); }
.pt .c-plus { border-top-color: rgb(250 246 241 / 0.22); }
.pt .c-pro { border-top-color: rgb(250 246 241 / 0.16); }
.ck { width: 26px; height: 26px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; flex: none; }
.c-free .ck, .ppanel-free .ck { stroke: var(--accion); }
.c-plus .ck, .c-pro .ck, .ppanel-plus .ck, .ppanel-pro .ck { stroke: var(--sol); }
.no { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.3; vertical-align: middle; }
.tx { font-weight: 800; font-size: 0.95rem; }

/* celular: pestañas con la lista del plan elegido */
.ptablist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: rgb(32 31 50 / 0.07); border-radius: 999px; }
html:not(.js) .ptablist { display: none; }
.ptab { min-height: 48px; border: 0; border-radius: 999px; background: transparent; font: 800 1rem/1 var(--sans); color: var(--tinta); cursor: pointer; padding: 0 6px; }
.ptab[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.ptab-free[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.ptab-plus[aria-selected="true"] { background: var(--accion); color: #fff; }
.ptab-pro[aria-selected="true"] { background: var(--tinta); color: var(--sol); }
.ppanel { position: relative; margin-top: 16px; padding: 28px 22px 30px; border-radius: 28px; }
.ppanel[hidden] { display: none; }
.ppanel-free { background: var(--blanco); box-shadow: inset 0 0 0 2px rgb(32 31 50 / 0.12); }
.ppanel-plus { background: var(--accion); color: var(--papel); }
.ppanel-pro { background: var(--tinta); color: var(--papel); }
.ppanel .tag { position: absolute; top: -12px; left: 22px; }
.ppanel .pn { font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
.ppanel-pro .pn { color: var(--sol); }
.ppanel .pr { margin-top: 12px; font-weight: 900; font-size: 3rem; line-height: 1; letter-spacing: -0.05em; }
.ppanel .pr small { font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.ppanel .pnote { margin-top: 10px; font-size: 0.95rem; line-height: 1.45; }
.ppanel .plead { margin-top: 22px; font-weight: 800; font-size: 1.125rem; }
.ppanel h4 { margin: 26px 0 10px; font-weight: 900; font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.035em; }
.ppanel li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; line-height: 1.4; font-size: 1.0625rem; }
.ppanel ul { display: grid; gap: 11px; }
.ppanel li .ck { margin-top: 1px; }
html:not(.js) .ppanel + .ppanel { margin-top: 24px; }

/* ---------- 4. descarga (ambiente verde del Alef-Bet) ---------- */
.get {
  --sp: clamp(16px, 4vw, 44px);
  background: var(--amb-alefbet);
  padding: var(--section) var(--gutter) 0;
  display: grid; gap: 40px;
  overflow: clip;
}
.get > * { max-width: var(--max); width: 100%; margin-inline: auto; }
.stores { margin: clamp(40px, 6vw, 64px) calc(var(--sp) * -1) 0; display: grid; gap: 16px; }
.store {
  position: relative;
  padding: var(--sp);
  border-radius: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  transition: background-color 0.4s var(--ease-out);
}
.store .btn { margin-top: 6px; }
.note { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.4; font-weight: 600; max-width: 24rem; }
.meta { font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-2); max-width: 26rem; }
.steps { display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 14px; align-items: baseline; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.4; }
.steps .n { font-weight: 900; font-size: 2.4rem; line-height: 0.9; letter-spacing: -0.05em; color: var(--accion); }
.steps strong { font-weight: 800; }
.chip {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: var(--accion); color: #fff; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.chip[hidden] { display: none; }
[data-os="android"] .store-android, [data-os="ios"] .store-ios { background: var(--blanco); }
.web { margin-top: clamp(24px, 4vw, 40px); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.web a { text-decoration: none; color: var(--accion); display: inline-block; padding-block: 8px; }
.web a:hover { color: var(--accion-hondo); }
@media (max-width: 899px) { [data-os="ios"] .store-ios { order: -1; } }

.get-art { position: relative; width: calc(100% + 2 * var(--gutter) * 0.6); margin-inline: calc(var(--gutter) * -0.3); margin-top: 24px; }
.get-art .pl { position: relative; z-index: 1; width: 100%; }
.get-art .hand { filter: drop-shadow(0 26px 24px rgb(32 31 50 / 0.14)); }
.get-art .circ { left: 14%; top: 8%; width: 58%; }
.get-art .menta { right: 0; bottom: 30%; width: 22%; height: 5%; }
.get-art .sq.coral { right: 8%; top: 4%; width: 12%; }

@media (min-width: 1024px) {
  .get {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: end; gap: 40px;
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  }
  .get > * { margin: 0; max-width: none; }
  .get-copy { padding-bottom: var(--section); }
  .get-art { width: min(100%, 640px); margin: 0 0 0 auto; }
}

/* tableta: imágenes grandes pero sin alargar la página */
@media (min-width: 600px) and (max-width: 1023px) {
  .hero-art { width: min(100vw, 700px); margin: 12px auto -3vw; }
  .app-art, .get-art { width: min(100%, 560px); margin-inline: auto; }
  .fila { width: 150vw; margin-left: -25vw; }
  .kband-art { width: min(100%, 460px); }
}

/* ---------- pie ---------- */
.foot { background: var(--tinta); color: var(--papel); padding: 0 0 36px; overflow: clip; }
.strip { display: flex; height: clamp(18px, 2.4vw, 32px); }
.strip i { display: block; height: 100%; }
.strip .s1 { flex: 22; background: var(--coral); }
.strip .s2 { flex: 12; background: var(--sol); }
.strip .s3 { flex: 17; background: var(--rosa); }
.strip .s4 { flex: 15; background: var(--menta); }
.strip .s5 { flex: 34; background: var(--accion); }
.foot-mark, .foot-row { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.foot-mark {
  margin-top: clamp(56px, 8vw, 104px);
  font-weight: 900; letter-spacing: -0.06em; line-height: 0.8;
  font-size: clamp(6rem, 33vw, 26rem);
  padding-bottom: 0.04em;
}
.foot .dot { color: var(--accion-noche); }
.foot-row { margin-top: clamp(40px, 6vw, 72px); display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; font-size: 1.0625rem; }
.foot a { text-decoration: none; font-weight: 700; padding: 10px 0; display: inline-block; }
.foot a:hover { color: var(--accion-noche); }
.by { font-weight: 500; }
.legal { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.year { color: #c9c6dc; font-weight: 500; }

/* ---------- movimiento ---------- */
@keyframes flota {
  0%, 100% { transform: translateY(0) rotate(calc(var(--r) - 2deg)); }
  50% { transform: translateY(-8px) rotate(calc(var(--r) + 2deg)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* estados iniciales de las entradas (Motion los lleva a su lugar); sin JS nada queda oculto */
  .js [data-kin] .w { transform: translateY(160%); opacity: 0; }
  .js [data-in], .js [data-rise], .js [data-pop], .js [data-seq], .js [data-slam], .js [data-late] { opacity: 0; }
  /* insignias y pegatinas: flotan sin parar, cada una con su duración y su desfase */
  .b img { animation: flota var(--f) ease-in-out var(--dl) infinite; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* =====================================================================
   LIMUD NIÑOS (/ninos/): mismo sistema, más color y formas grandes
   ===================================================================== */
.kids { --amb-kids: #fff0c2; }
.kids .hero { background: linear-gradient(180deg, var(--amb-kids) 0%, var(--papel) 96%); }
.kids .hero .sun { background: var(--coral); }
.kids .hero .diag .coral { background: var(--rosa); }
.kids .hero .diag .sq.rosa { background-color: var(--sol); }
.kids .hero-art .b-s1 { left: 12%; top: 18%; width: 17%; --r: -10deg; }
.kids .hero-art .b-s2 { left: 90%; top: 30%; width: 17%; --r: 12deg; }
.kids .hero-art .b-s3 { left: 8%; top: 78%; width: 16%; --r: 8deg; }
.kids .hero-art .b-s4 { left: 78%; top: 82%; width: 14%; --r: -8deg; }
@media (max-width: 1023px) { .kids .hero-art { width: 112vw; margin-left: -6vw; } }
@media (min-width: 600px) and (max-width: 1023px) { .kids .hero-art { width: min(100vw, 620px); margin-inline: auto; } }

/* qué aprende: la fila con pegatinas, y tres columnas de texto */
.kl { position: relative; background: var(--amb-cielo); padding: var(--section) 0; overflow: clip; }
.kl-head { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.kl-fila { position: relative; width: 150vw; margin: clamp(24px, 4vw, 56px) 0 0 -25vw; aspect-ratio: 1920 / 1163; }
.kl-fila > .pl { position: absolute; inset: 0; z-index: 1; }
.kl-fila .sun { left: 56%; bottom: 10%; translate: -50% 0; width: 52%; background: var(--sol); }
.kl-fila .blk.coral { left: -4%; top: 22%; width: 12%; height: 4.6%; }
.kl-fila .sq.rosa { right: 4%; top: 18%; width: 6.5%; }
.kl-fila .b-s1 { left: 14%; top: 14%; width: 9.5%; --r: -10deg; }
.kl-fila .b-s2 { left: 52%; top: 8%; width: 9%; --r: 9deg; }
.kl-fila .b-s3 { left: 90%; top: 60%; width: 10%; --r: -6deg; }
.kl-fila .b-s4 { left: 30%; top: 90%; width: 9%; --r: 8deg; }
.kl-cols { max-width: var(--max); margin: clamp(32px, 5vw, 64px) auto 0; padding-inline: var(--gutter); display: grid; gap: 48px; }
.kl-col h3 { font-weight: 900; font-size: clamp(2.3rem, 8vw, 3.6rem); line-height: 0.92; letter-spacing: -0.05em; }
.kl-col p { margin-top: 14px; max-width: 24rem; color: var(--tinta-2); }
.kl-col .pill { margin-left: 8px; }
.kl-col:nth-child(1) h3 .dot { color: var(--coral); }
.kl-col:nth-child(2) h3 .dot { color: var(--menta); }
.kl-col:nth-child(3) h3 .dot { color: var(--accion); }
.kl-more { max-width: var(--max); margin: clamp(48px, 6vw, 80px) auto 0; padding-inline: var(--gutter); display: grid; gap: 28px; }
.kl-more .kl-col h3 { font-size: clamp(1.9rem, 6.4vw, 2.6rem); }

@media (min-width: 900px) {
  .kl-fila { width: min(100vw, 1700px); margin: clamp(24px, 4vw, 56px) auto 0; }
  .kl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
  .kl-cols .kl-col:nth-child(2) { margin-top: 48px; }
  .kl-cols .kl-col:nth-child(3) { margin-top: 96px; }
  .kl-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
}

/* niveles: tres bloques que crecen, como una escalera */
.niv { position: relative; background: var(--papel); padding: var(--section) var(--gutter) 0; overflow: clip; }
.niv-head { max-width: var(--max); margin: 0 auto; }
.niv-sub { margin-top: 22px; max-width: 26rem; color: var(--tinta-2); }
.niv-steps { max-width: var(--max); margin: clamp(40px, 6vw, 80px) auto 0; display: grid; gap: 14px; align-items: end; }
.step { padding: clamp(22px, 3vw, 36px); border-radius: 28px 28px 0 0; }
.step h3 { font-weight: 900; font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 0.9; letter-spacing: -0.055em; }
.step .age { margin-top: 12px; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.step p { margin-top: 10px; max-width: 26rem; font-weight: 500; line-height: 1.45; }
.step-1 { background: var(--lima); color: var(--tinta); }
.step-2 { background: var(--menta); color: var(--tinta); }
.step-3 { background: var(--accion); color: var(--papel); }
.step-3 .dot { color: var(--sol); }
@media (min-width: 900px) {
  .niv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .step { border-radius: 0; }
  .step-1 { min-height: 300px; border-radius: 32px 0 0 0; }
  .step-2 { min-height: 400px; }
  .step-3 { min-height: 500px; border-radius: 0 32px 0 0; }
}

/* para papás y mamás */
.fam { position: relative; background: var(--amb-fiestas); padding: var(--section) var(--gutter); overflow: clip; }
.fam > .circ { right: -8vw; bottom: 4%; width: clamp(110px, 22vw, 300px); background: var(--rosa); }
@media (min-width: 1024px) { .fam > .circ { top: 8%; bottom: auto; right: -6vw; } }
.fam > .blk { left: 0; bottom: 10%; width: clamp(70px, 14vw, 200px); height: clamp(24px, 3.6vw, 46px); background: var(--menta); }
.fam-head, .fam-list { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.fam-list { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: clamp(26px, 4vw, 40px); }
.fam-item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.fam-item .mk { margin-top: 4px; }
.fam-item h3 { font-weight: 900; font-size: clamp(1.6rem, 5.6vw, 2.3rem); line-height: 1; letter-spacing: -0.045em; }
.fam-item p { margin-top: 8px; max-width: 32rem; color: var(--tinta-2); }
.fam-item:nth-child(odd) .mk { background-color: var(--sol); }
.fam-item:nth-child(even) .mk { background-color: var(--coral); }
@media (min-width: 1024px) {
  .fam { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .fam-head, .fam-list { max-width: none; margin: 0; }
  .fam-head { position: sticky; top: 96px; }
  .fam-list { margin-top: 0; }
  .fam-item:nth-child(even) { margin-left: clamp(24px, 4vw, 64px); }
}

/* gratis y Limud+ para niños */
.kplan { position: relative; background: var(--papel); padding: var(--section) var(--gutter); overflow: clip; }
.kplan-head, .kplan-grid, .kplan-cta { max-width: var(--max); margin-inline: auto; }
.kplan-sub { margin-top: 20px; max-width: 30rem; color: var(--tinta-2); }
.kplan-grid { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 16px; }
.kp { padding: clamp(26px, 4vw, 44px); border-radius: 32px; }
.kp h3 { font-weight: 900; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; letter-spacing: -0.05em; }
.kp .pnote { margin-top: 10px; font-size: 0.95rem; line-height: 1.45; }
.kp ul { margin-top: 22px; display: grid; gap: 12px; }
.kp li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; line-height: 1.4; }
.kp li .ck { margin-top: 1px; }
.kp-free { background: var(--blanco); box-shadow: inset 0 0 0 2px rgb(32 31 50 / 0.12); }
.kp-free .ck { stroke: var(--accion); }
.kp-plus { background: var(--accion); color: var(--papel); }
.kp-plus .ck { stroke: var(--sol); }
.kplan-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) {
  .kplan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  .kp-plus { margin-block: -24px; padding-block: calc(clamp(26px, 4vw, 44px) + 24px); }
}