/* Public site: landing + login ---------------------------------------------
   Blocks in this file:
     1. Palette and page frame (top bar, footer)
     2. Section scaffolding
     3. Scroll narrative: stage, words, roadmap, adaptive blocks, mascot
     4. Dashboard in a laptop
     5. Feature tabs and module previews
     6. Mission
     6b. Preguntas
     7. Pricing
     8. Closing call to action
     9. Login / sign-up card
   -------------------------------------------------------------------------- */

/* 1. Palette and page frame ------------------------------------------------ */

/* The landing runs slightly warmer and deeper than the app: navy headings,
   a softer violet and lavender grounds. Scoped here so the app keeps its own
   tokens untouched. */
/* El arranque estatico de index.html, escondido en cuanto hay JS. Lo marca un
   script en la cabecera, asi que esto vale desde el primer fotograma y no se
   llega a ver la portada vieja. */
html[data-js] #site > [data-boot] { display: none; }

.site {
  --lp-navy: #111936;
  --lp-violet: #6D5AE6;
  --lp-violet-dark: #4B3BC4;
  --lp-teal: #18A596;
  --lp-orange: #F4B940;
  --lp-orange-ink: #B37505;
  --lp-blue: #2F7BEB;
  --lp-green: #16A34A;
  --lp-coral: #F0766B;
  --lp-lavender: #F4F1FE;
  --lp-lavender-deep: #EDE8FC;
  --lp-offwhite: #FBFAFF;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--lp-offwhite);
  overflow-x: clip;
}

.sitebar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(251, 250, 255, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.sitebar[data-stuck="true"] { border-bottom-color: var(--border); background: rgba(251, 250, 255, .94); }

.sitebar__nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.sitebar__link {
  padding: 9px 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight: 650;
  color: var(--ink-500);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.sitebar__link:hover { background: var(--lp-lavender); color: var(--lp-violet-dark); text-decoration: none; }
.sitebar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sitebar .btn--primary { background: var(--lp-violet); }
.sitebar .btn--primary:hover { background: var(--lp-violet-dark); }

.sitefoot {
  margin-top: auto;
  padding: 30px clamp(16px, 4vw, 48px) 38px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.sitefoot__inner {
  max-width: var(--page-max); margin-inline: auto;
  display: flex; align-items: center; gap: 16px 30px; flex-wrap: wrap;
}
.brand--sm .brand__name { font-size: var(--fs-base); }
.sitefoot__links { display: flex; gap: 22px; flex-wrap: wrap; margin-inline: auto; }
.sitefoot__links a { font-size: var(--fs-md); color: var(--ink-500); }
.sitefoot__links a:hover { color: var(--lp-violet); }
.sitefoot__copy { font-size: var(--fs-sm); color: var(--ink-500); }

/* 2. Section scaffolding --------------------------------------------------- */

.lp-sec {
  position: relative;
  /* En una pantalla ancha, 104 arriba y 104 abajo dejaban 208 px de vacio entre
     dos secciones: entre un pie de foto y el titulo siguiente, ambos centrados,
     el hueco se leia como que faltaba algo.
     El minimo se queda en 56 y no baja: las secciones con fondo llevan una onda
     de 46 px arriba y abajo, y por debajo de eso empieza a comerse la primera
     linea. En estrecho el hueco era el de siempre, y ahi no sobraba nada. */
  padding: clamp(56px, 4.5vw, 64px) 0;
  opacity: 1;
}
.lp-sec[data-seen="false"] { opacity: 0; transform: translateY(18px); }
.lp-sec { transition: opacity .55s var(--ease), transform .55s var(--ease); }
.lp-sec[data-seen="true"] { opacity: 1; transform: none; }

/* A lavender ground with a soft wave at the top edge. */
.lp-sec--tint {
  background: linear-gradient(180deg, var(--lp-lavender) 0%, var(--lp-lavender-deep) 100%);
}
.lp-sec--tint::before,
.lp-sec--tint::after {
  content: ""; position: absolute; left: 0; right: 0; height: 46px;
  background: var(--lp-offwhite);
  -webkit-mask: radial-gradient(60% 100% at 50% 100%, transparent 99%, #000 100%);
  mask: radial-gradient(60% 100% at 50% 100%, transparent 99%, #000 100%);
}
.lp-sec--tint::before { top: -1px; }
.lp-sec--tint::after { bottom: -1px; transform: scaleY(-1); }

.lp-wrap {
  width: min(var(--page-max), 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.lp-wrap--narrow { width: min(820px, 100%); }

.lp-h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  line-height: 1.12; letter-spacing: -.03em;
  color: var(--lp-navy);
}
.lp-lead {
  margin-top: 12px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--ink-500);
}
.lp-note { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-500); }

/* 3. Scroll narrative ------------------------------------------------------ */

.narr {
  /* Sin anclar. La seccion se cuenta sola al abrir la pagina, asi que no
     necesita cuatro pantallas de scroll por detras -- y si el JS no llega, la
     portada es una seccion normal y no un hueco de cuatro pantallas. */
  height: auto;
  position: relative;
  background:
    radial-gradient(900px 520px at 15% 0%, var(--lp-lavender) 0%, transparent 62%),
    radial-gradient(760px 460px at 95% 12%, #F1ECFD 0%, transparent 58%);
}
.narr__sticky {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center; align-content: center;
  gap: clamp(12px, 2.4vh, 30px);
  padding: clamp(72px, 9vh, 96px) clamp(16px, 4vw, 48px) 56px;
  overflow: hidden;
}

.narr__sticky { padding: 40px clamp(16px, 4vw, 48px) 72px; overflow: visible; }

.narr__copy { position: relative; width: min(60ch, 100%); text-align: center; }

/* El titular nace personalizado: la palabra va en color desde el principio.
   Se metia sola a los dos segundos, empujando el renglon, y a la vez el
   subtitulo cambiaba "el" por "TU". Dos palabras moviendose mientras el plan
   se ordenaba debajo era una de mas: el movimiento se lo queda el plan. */
.narr[data-dir="h"][data-phase="plan"] .narr__title { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.narr__title {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 800;
  color: var(--lp-navy);
  transition: font-size .4s var(--ease);
}
.narr__em { font-style: normal; color: var(--lp-violet); }
.narr__sub {
  margin-top: 10px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-500);
}
.narr__after {
  display: grid; justify-items: center; gap: 14px;
  width: min(60ch, 100%); text-align: center;
}
.narr__points {
  display: grid; gap: 6px;
  font-size: var(--fs-base); color: var(--ink-500);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  opacity: 0; transform: translateY(8px);
}
.narr[data-personal="true"] .narr__points { opacity: 1; transform: none; }
/* Lo que el plan se anade solo, con la misma pildora coral que en el esquema.
   El tamano lo hereda del texto, para que no rompa el renglon. */
.narr__mark {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid #F7CFCA;
  color: #C9483C;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}
/* While the taller reading is being measured, nothing animates towards it. */
.narr[data-measuring="true"] .narr__points,
.narr[data-measuring="true"] .narr__title { transition: none; }
.narr__cta { min-height: 48px; background: var(--lp-violet); }
.narr__cta:hover { background: var(--lp-violet-dark); }

/* The stage: a wide band on a wide screen, a tall column on a phone. */
.narr__stage {
  position: relative;
  width: 100%; max-width: 1240px;
  align-self: stretch;
  height: 100%;
  min-height: 300px;
}
.narr[data-mode="flow"][data-dir="h"] .narr__stage {
  height: clamp(320px, 44vh, 460px); margin-top: 20px;
}
.narr[data-mode="flow"][data-dir="v"] .narr__stage {
  width: min(760px, 100%); height: clamp(520px, 86vw, 700px); margin-top: 20px;
}

.narr__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.narr__line { stroke: var(--purple-300); stroke-width: 2; stroke-linecap: round; }
.narr__branch { stroke: var(--ink-200); stroke-width: 1.5; stroke-dasharray: 3 4; }
#narrBranches { opacity: 0; transition: opacity .3s linear; }

/* In flow mode the states are reached by a transition, not by scroll maths. */
.narr[data-mode="flow"] .lw,
.narr[data-mode="flow"] .narr__dot,
.narr[data-mode="flow"] .narr__mascot {
  /* Medio segundo, no nueve decimas. La entrada tiene dos tiempos separados por
     0,7 s, y con 0,9 s por palabra el segundo tiempo empezaba antes de que
     hubiera aterrizado ni una: cinco cosas moviendose a la vez y nada que
     seguir. Ahora el primer tiempo cabe entero en su hueco. */
  transition: left .5s var(--ease), top .5s var(--ease), transform .5s var(--ease), opacity .35s linear;
}
.narr[data-mode="flow"] .lw__week { transition: opacity .4s var(--ease); }
.narr[data-mode="flow"] .adp { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.narr[data-mode="flow"] .narr__line { transition: stroke-dashoffset .8s var(--ease) .1s; }
/* Las ramas van con sus chips, no un segundo despues. El retardo de 1,2 s venia
   de cuando todo se disparaba junto y los chips llevaban 0,9 s de espera
   propia; al partir la entrada en dos se quedo ahi, y los chips aparecian
   sueltos y sin conectar hasta que las lineas los alcanzaban. */
.narr[data-mode="flow"] #narrBranches { transition: opacity .45s linear .12s; }
/* Colocar el plan ya hecho, sin viaje: cuando la historia ya se conto, una
   recolocacion no puede volver a enseñar las palabras volando. Va con
   !important porque las reglas de flujo de arriba pesan mas que un asterisco. */
.narr[data-instant="true"] * { transition: none !important; }


/* Floating topic word: no card, just the word. */
.lw {
  position: absolute;
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(.95rem, 1.35vw, 1.3rem);
  letter-spacing: -.02em;
  transform-origin: center;
  will-change: left, top, transform;
}
/* Along a horizontal path the week sits above the topic, so each label is as
   narrow as its longest word and ten of them fit across the band. */
.narr[data-dir="h"] .lw {
  flex-direction: column; align-items: center; gap: 1px; text-align: center;
}
.lw__week {
  font-size: .58em; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-300);
  opacity: var(--settled, 0);
}
.lw__text { color: var(--tone, var(--lp-violet)); }

.lw--violet { --tone: #5B48DD; }
.lw--teal   { --tone: #0E7F75; }
.lw--blue   { --tone: #2461CE; }
.lw--green  { --tone: #0F7A46; }
.lw--orange { --tone: #96590A; }

/* Roadmap node */
.narr__dot {
  position: absolute;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--tone, var(--lp-violet));
  opacity: 0;
}
.narr__dot--violet { --tone: #5B48DD; }
.narr__dot--teal   { --tone: #0E7F75; }
.narr__dot--blue   { --tone: #2461CE; }
.narr__dot--green  { --tone: #0F7A46; }
.narr__dot--orange { --tone: #C07A0C; }

/* Adaptive block */
.adp {
  position: absolute;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: clamp(.68rem, .92vw, .8rem); font-weight: 700;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--adp-line, var(--ink-200));
  color: var(--adp-ink, var(--ink-700));
  box-shadow: var(--shadow-xs);
  opacity: 0;
  will-change: transform, opacity;
}
.adp--coral  { --adp-ink: #C9483C; --adp-line: #F7CFCA; }
.adp--orange { --adp-ink: #B37505; --adp-line: #F8E3B4; }
.adp--teal   { --adp-ink: #0F7F75; --adp-line: #BDE6E1; }

/* Mascot */
.narr__mascot {
  position: absolute;
  left: 50%; top: 44%;
  width: clamp(104px, 11vw, 168px);
  transform: translate(-50%, -50%) rotate(var(--mascot-tilt, 0deg)) scale(var(--mascot-scale, 1));
  will-change: left, top, transform;
  pointer-events: none;
}
.mascot { width: 100%; height: auto; overflow: visible; }

.mascot__mood, .mascot__arms { transition: opacity .35s var(--ease); }
.mascot__mood--happy, .mascot__arms--happy { opacity: 0; }
[data-happy="true"] .mascot__mood--sad,
[data-happy="true"] .mascot__arms--sad { opacity: 0; }
[data-happy="true"] .mascot__mood--happy,
[data-happy="true"] .mascot__arms--happy { opacity: 1; }

#mascotHat { transform-origin: 153px 100px; transition: transform .45s var(--ease); }
[data-happy="true"] #mascotHat { transform: rotate(-7deg) translateY(-3px); }

/* 4. Dashboard in a laptop ------------------------------------------------- */

/* El ancho lo manda tambien el alto de la ventana. La pantalla es 16/10, asi
   que 860px de ancho son 537 de alto, y con el titulo, el pie y las banderas
   la seccion pasaba de 870: en un portatil de 780 el usuario nunca llegaba a
   ver la maqueta entera. El 1.6 devuelve el ancho desde el alto disponible.
   Con 78vh - 210px quedaba demasiado pequeno en pantallas bajas (unos 600px
   a 750 de alto). 84vh - 175px lo sube una quinta parte: a 750 de alto la
   pantalla del portatil entra entera bajo el titulo, y el pie y las banderas
   quedan justo debajo del borde. */
.laptop {
  --laptop-design: 860px;
  margin: clamp(28px, 5vw, 48px) auto 0;
  width: min(860px, 100%, max(430px, calc((84vh - 175px) * 1.6)));
}
.laptop__screen {
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(160deg, #2B2A44 0%, #17162B 100%);
  box-shadow: var(--shadow-lg);
}
.laptop__inner {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-app);
  aspect-ratio: 16 / 10;
}
/* La maqueta se dibuja siempre a su tamano de diseno y se encoge entera.
   Estrechando la pantalla, lo que encogia era la columna de contenido -- el
   carril mide 168px fijos -- y los titulos se partian y se recortaban: se veia
   una app rota, no una app pequena. Escalada, es la misma pantalla mas lejos.
   El factor lo pone mountAppPreview, que es quien puede medir el ancho. */
.laptop__canvas {
  width: var(--laptop-design);
  height: calc(var(--laptop-design) * 10 / 16);
  transform: scale(var(--laptop-scale, 1));
  transform-origin: top left;
  /* Los cortes de la maqueta miran este ancho y no el de la ventana: dentro
     del portatil siempre mide lo mismo, asi que no puede pasar que el movil
     de la maqueta salga en una ventana de sobremesa estrecha. */
  container-type: inline-size;
  container-name: app;
}
.laptop__base {
  height: 14px;
  margin-inline: -3%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #22213A 0%, #14132A 100%);
  display: grid; place-items: center;
}
.laptop__base span {
  width: 90px; height: 4px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16);
}
.laptop__cap {
  margin-top: 16px; text-align: center;
  font-size: var(--fs-sm); color: var(--ink-500);
}
/* Que el menu de la maqueta se puede pulsar no se ve solo: hay que decirlo. */
.laptop__hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  color: var(--lp-violet-dark); font-weight: 650;
}
.laptop__hint .icon { color: var(--lp-violet); }

/* Idiomas que se pueden aprender, debajo del portatil. Bandera y nombre en la
   misma linea, y en una sola fila mientras quepa. */
.flagrow {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin: 22px 0 0; padding: 0; list-style: none;
}
.flagrow__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500);
  white-space: nowrap;
}
.flagrow__flag {
  width: 22px; height: 14px; flex: none;
  border-radius: 3px;
  /* Un aro por dentro para que el blanco de Francia o Italia no se pierda
     contra el fondo claro de la seccion. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}
.flagrow__item[data-soon="true"] > span { color: var(--ink-400); }
.flagrow__soon {
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--lp-lavender-deep); color: var(--lp-violet-dark);
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 560px) { .flagrow { gap: 10px 18px; } }

/* The app itself: its own layout at a smaller scale, and its own menu. The
   rail switches the screen on the right, so what the visitor clicks is the
   view that route really renders. */
.uiw {
  position: relative;
  height: 100%;
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  font-size: 11px; color: var(--ink-700);
  text-align: left;
}
.uiw__rail {
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: grid; gap: 3px; align-content: start;
  grid-template-rows: auto auto 1fr auto auto;
}
.uiw__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 0 6px; }
.uiw__brand b { font-size: 13px; color: var(--lp-navy); letter-spacing: -.01em; }
.uiw__nav { display: grid; gap: 3px; }
.uiw__navitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; text-align: left;
  color: var(--ink-500); font-weight: 600;
}
button.uiw__navitem { cursor: pointer; }
button.uiw__navitem:hover { background: var(--lp-lavender); color: var(--lp-violet-dark); }
.uiw__navitem:focus-visible { outline: 2px solid var(--lp-violet); outline-offset: 1px; }
.uiw__navitem .icon { color: var(--ink-300); }
.uiw__navitem[aria-selected="true"] { background: var(--lp-lavender); color: var(--lp-violet-dark); font-weight: 700; }
.uiw__navitem[aria-selected="true"] .icon { color: var(--lp-violet); }

/* El clic que da la visita guiada. Se pinta porque el cambio de pantalla, sin
   nada que lo anuncie, parece que la maqueta se mueve sola. */
.uiw__navitem[data-auto="true"] {
  background: var(--lp-lavender-deep);
  color: var(--lp-violet-dark);
  box-shadow: 0 0 0 2px var(--lp-violet) inset;
  transform: scale(.97);
}
.uiw__navitem { transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }

/* El velo del cajon: solo existe en movil, donde el carril se superpone. */
.uiw__scrim { display: none; }
.uiw__spacer { min-height: 8px; }
.uiw__profile {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; padding: 8px 9px;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.uiw__avatar {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lp-violet); color: var(--white);
  font-size: 9px; font-weight: 800;
}
.uiw__plan { color: var(--ink-500); font-weight: 600; }

.uiw__main { padding: 16px 18px; display: grid; gap: 11px; align-content: start; min-width: 0; }
.uiw__view { display: grid; gap: 11px; align-content: start; min-width: 0; }
.uiw__view:focus-visible { outline: 2px solid var(--lp-violet); outline-offset: 3px; border-radius: var(--r-sm); }
.uiw__phonebar { display: none; align-items: center; gap: 7px; padding-bottom: 4px; }
.uiw__phonebar b { font-size: 12px; color: var(--lp-navy); }
.uiw__phonebar > .icon { color: var(--ink-300); }
.uiw__phonespacer { flex: 1; }
.uiw__burger {
  display: grid; gap: 3px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.uiw__burger:focus-visible { outline: 2px solid var(--lp-violet); outline-offset: 3px; }
.uiw__burger i { display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--ink-300); }
.uiw__top { display: flex; align-items: flex-start; gap: 12px; }
.uiw__greet {
  display: block;
  font-size: 21px; letter-spacing: -.03em; color: var(--lp-navy); line-height: 1.1;
}
.uiw__sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-500); }
.uiw__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  background: #E6F7F2; color: #0F7F75; font-weight: 700; font-size: 10px;
}
.uiw__chip i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.uiw__weekpill {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-full);
  background: var(--white); border: 1px solid var(--border);
  font-weight: 700; color: var(--lp-navy);
}
.uiw__weekpill .icon { color: var(--ink-300); }

.uiw__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 13px 15px;
  min-width: 0;
}
.uiw__planrow { display: flex; align-items: center; gap: 16px; }
.uiw__planrow .ring { flex: none; }
.uiw__planrow .ring__value { font-size: 13px; }
.uiw__planrow .ring__caption { font-size: 8px; }
.uiw__planbody { flex: 1; min-width: 0; display: grid; gap: 6px; }
.uiw__planhead { display: flex; align-items: center; gap: 8px; }
.uiw__planhead b { font-size: 15px; color: var(--lp-navy); letter-spacing: -.02em; }
.uiw__badge {
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--lp-lavender); color: var(--lp-violet-dark);
  font-size: 9px; font-weight: 800;
}
.uiw__bar > span { background: var(--lp-violet); }
.uiw__note { color: var(--ink-500); }
.uiw__stats { display: flex; gap: 18px; margin-top: 2px; flex-wrap: wrap; }
.uiw__stat { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); }
.uiw__stat .icon { color: var(--ink-300); }
.uiw__stat b { color: var(--lp-navy); font-size: 12px; }
.uiw__btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-md);
  background: var(--lp-violet); color: var(--white); font-weight: 700;
}

.uiw__cardtitle { font-weight: 800; color: var(--lp-navy); font-size: 14px; letter-spacing: -.02em; }
.uiw__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.uiw__day {
  display: grid; justify-items: center; gap: 6px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.uiw__day[data-on="true"] { background: var(--surface-sunken); }
.uiw__day[data-today="true"] { border-color: var(--lp-violet); background: var(--lp-lavender); }
.uiw__dayname { font-weight: 700; color: var(--ink-400); font-size: 10px; }
.uiw__day[data-today="true"] .uiw__dayname { color: var(--lp-violet-dark); }
.uiw__daydots { display: flex; gap: 3px; min-height: 7px; }
.uiw__dot { width: 6px; height: 6px; border-radius: 50%; display: block; }
.uiw__dot--purple { background: var(--lp-violet); }
.uiw__dot--green { background: var(--lp-teal); }
.uiw__dot--blue { background: var(--lp-blue); }
.uiw__dot--amber { background: var(--lp-orange); }
.uiw__today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.uiw__act { display: grid; gap: 7px; align-content: start; }
.uiw__acthead { display: flex; align-items: flex-start; gap: 8px; }
.uiw__tag {
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 9px; font-weight: 800;
}
.uiw__tag--purple { background: var(--lp-lavender); color: var(--lp-violet-dark); }
.uiw__tag--green { background: #E6F7F2; color: #0F7F75; }
.uiw__tag--blue { background: var(--blue-50); color: var(--blue-600); }
.uiw__tag--amber { background: var(--amber-50); color: var(--amber-600); }
.uiw__actscore { margin-left: auto; text-align: right; display: grid; gap: 1px; }
.uiw__actscore b { color: var(--lp-navy); font-size: 12px; }
.uiw__actscore span { color: var(--ink-400); font-size: 9px; }
.uiw__actname { font-weight: 700; color: var(--lp-navy); font-size: 12px; line-height: 1.25; }
.uiw__actmin { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-400); }
.uiw__actmin .icon { color: var(--ink-300); }

/* Las otras pantallas del menu. Cada una es la vista real en pequeno, con las
   mismas piezas que usa la app: cabecera de pagina, filtros, tarjetas y tabla.
   Lo que no cabe se esconde por tamano mas abajo, nunca se inventa. */

.uiw__pagehead { display: grid; gap: 3px; }
.uiw__h1 { font-size: 17px; font-weight: 800; color: var(--lp-navy); letter-spacing: -.02em; }
.uiw__pagesub { color: var(--ink-500); }

.uiw__filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uiw__select {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink-500); font-weight: 600;
}
.uiw__select .icon { color: var(--ink-300); }
.uiw__seg {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken);
}
.uiw__segbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: var(--r-sm);
  color: var(--ink-500); font-weight: 600;
}
.uiw__segbtn .icon { color: var(--ink-300); }
.uiw__segbtn[data-on="true"] { background: var(--white); color: var(--lp-violet-dark); box-shadow: var(--shadow-sm); }
.uiw__segbtn[data-on="true"] .icon { color: var(--lp-violet); }

.uiw__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uiw__grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Lo que llegara al enviar el texto: tres renglones, no tres columnas, porque
   son frases y no cifras. */
.uiw__recvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.uiw__tile {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-sm);
}
.uiw__tile--purple { background: var(--lp-lavender); color: var(--lp-violet-dark); }
.uiw__tile--green { background: var(--green-50); color: var(--green-600); }
.uiw__tile--blue { background: var(--blue-50); color: var(--blue-600); }
.uiw__tile--amber { background: var(--amber-50); color: var(--amber-600); }
.uiw__tile .icon { color: currentColor; }

.uiw__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-full);
  color: var(--ink-500); font-weight: 700; font-size: 9px; white-space: nowrap;
}
.uiw__pill .icon { color: var(--ink-300); }
.uiw__btn--sm { padding: 6px 11px; font-size: 10px; }

/* Roadmap */
.uiw__weekstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.uiw__weekchip {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--white);
}
.uiw__weekchip .icon { color: var(--ink-300); flex: none; }
.uiw__weekchip[data-state="current"] { border-color: var(--lp-violet); background: var(--lp-lavender); }
.uiw__weekchip[data-state="current"] .icon { color: var(--lp-violet); }
.uiw__weekbody { display: grid; min-width: 0; }
.uiw__weekbody b { color: var(--lp-navy); font-size: 11px; }
.uiw__weekbody i { color: var(--ink-400); font-size: 9px; font-style: normal; }
.uiw__obj { display: flex; align-items: center; gap: 16px; }
.uiw__objbody { flex: 1; min-width: 0; display: grid; gap: 3px; }
.uiw__objtext { color: var(--lp-navy); font-size: 13px; line-height: 1.3; }
.uiw__objstats { flex: none; display: grid; gap: 6px; }
.uiw__actcard { display: flex; align-items: center; gap: 10px; }
.uiw__actcardbody { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: start; }
/* Minutos y estado en la misma linea, como en la tarjeta de verdad. */
.uiw__metarow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uiw__circle {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--lp-lavender);
}
.uiw__circle .icon { color: var(--lp-violet); }

/* Writing */
.uiw__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.uiw__tab { padding: 7px 11px; color: var(--ink-500); font-weight: 700; border-bottom: 2px solid transparent; }
.uiw__tab[data-on="true"] { color: var(--lp-violet-dark); border-bottom-color: var(--lp-violet); }
.uiw__task { display: grid; gap: 6px; }
.uiw__taskhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uiw__taskname { color: var(--lp-navy); font-size: 14px; letter-spacing: -.01em; }
.uiw__editor { display: grid; gap: 8px; }
.uiw__draft {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 11px; min-height: 62px;
  background: var(--surface-sunken); color: var(--ink-700); line-height: 1.5;
}
/* El cursor del editor: quieto, para que no compita con el resto de la pagina. */
.uiw__caret {
  display: inline-block; width: 1px; height: 11px;
  margin-left: 1px; vertical-align: -1px;
  background: var(--lp-violet);
}
.uiw__editfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uiw__recv { display: flex; align-items: center; gap: 7px; }
.uiw__recv .icon { color: var(--lp-violet); flex: none; }
.uiw__recv b { color: var(--lp-navy); }

/* Grammar */
.uiw__mod { display: grid; gap: 7px; align-content: start; }
.uiw__modhead { display: flex; align-items: flex-start; gap: 9px; }
.uiw__modtitle { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: start; }
.uiw__modtitle b { color: var(--lp-navy); font-size: 12px; line-height: 1.25; }
.uiw__modfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* Vocabulary */
.uiw__statcard { display: flex; align-items: center; gap: 9px; }
.uiw__statbody { display: grid; min-width: 0; }
.uiw__statbody b { color: var(--lp-navy); font-size: 16px; letter-spacing: -.02em; }
.uiw__statbody span { color: var(--ink-500); font-size: 9px; }
.uiw__vocab { padding: 4px 0 2px; }
.uiw__table { width: 100%; border-collapse: collapse; }
.uiw__table th, .uiw__table td { padding: 6px 12px; text-align: left; }
.uiw__table th { color: var(--ink-400); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.uiw__table tbody tr + tr { border-top: 1px solid var(--border); }
.uiw__table td b { color: var(--lp-navy); }
.uiw__table .uiw__excol { color: var(--ink-400); }
.uiw__spk { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lp-lavender); }
.uiw__spk .icon { color: var(--lp-violet); }

/* Reading */
.uiw__read { display: grid; gap: 7px; align-content: start; }
.uiw__read[data-locked="true"] { opacity: .62; }
.uiw__excerpt { color: var(--ink-500); line-height: 1.5; }

/* 5. Feature tabs ---------------------------------------------------------- */

.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: clamp(24px, 4vw, 40px) 0 22px;
  /* components.css usa el mismo nombre para las pestanas de dentro de la app,
     y de alli llega un overflow-x: auto. Aqui los botones se reparten en varias
     lineas y nunca hacen falta scroll, pero ese overflow bastaba para que un
     pixel de mas dibujara una barra vertical al lado. */
  overflow: visible;
}
.tabs__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--tone-line, var(--border-strong));
  background: var(--white);
  color: var(--tone-ink, var(--ink-600, var(--ink-700)));
  font-weight: 700; font-size: var(--fs-base);
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tabs__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-ink, var(--ink-300)); }
.tabs__btn:hover { border-color: var(--tone-ink, var(--ink-300)); }
.tabs__btn[aria-selected="true"] {
  background: var(--tone-ink); color: var(--white); border-color: var(--tone-ink);
  box-shadow: 0 8px 20px rgba(23, 20, 56, .16);
}
/* The active tab is never signalled by colour alone: it also fills, and the
   dot turns into a ring. */
.tabs__btn[aria-selected="true"] .tabs__dot {
  background: transparent; box-shadow: inset 0 0 0 2.5px var(--white);
}
.tabs__btn--purple { --tone-ink: #6D5AE6; --tone-line: #DAD3FB; }
.tabs__btn--teal   { --tone-ink: #12968A; --tone-line: #BFE7E2; }
.tabs__btn--blue   { --tone-ink: #2F6FED; --tone-line: #CBDCFB; }
.tabs__btn--orange { --tone-ink: #C97F06; --tone-line: #F6DFB0; }

.tabs__panels { position: relative; }
.tabs__panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 3vw, 30px);
  animation: panelIn .3s var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Module preview innards */
.uip { display: grid; gap: 12px; text-align: left; }
.uip__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.uip__head b { font-size: var(--fs-xl); color: var(--lp-navy); letter-spacing: -.02em; }
.uip__meta { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-500); }
.uip__bar > span { background: var(--lp-violet); }
.uip__lead { font-size: var(--fs-md); color: var(--ink-500); }
.uip__label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-300);
}

.uip__qs { display: grid; gap: 12px; }
.uip__qs li {
  display: grid; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.uip__q { font-size: var(--fs-base); color: var(--ink-800); }
.uip__q b { color: var(--ink-300); margin-right: 6px; }
.uip__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.uip__opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-md); color: var(--ink-500);
}
.uip__opt[data-on="true"] {
  border-color: var(--lp-violet); background: var(--lp-lavender);
  color: var(--lp-violet-dark); font-weight: 700;
}
.uip__radio {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-50); color: var(--ink-400);
  font-size: 10px; font-weight: 800;
}
.uip__opt[data-on="true"] .uip__radio { background: var(--lp-violet); color: var(--white); }

.uip__tablewrap { overflow-x: auto; }
.uip__table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--fs-md); }
.uip__table th {
  text-align: left; padding: 8px 10px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-300);
  border-bottom: 1px solid var(--border);
}
.uip__table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.uip__table tr:last-child td { border-bottom: 0; }
.uip__table b { color: var(--lp-navy); }
.uip__ex { color: var(--ink-500); }
.uip__spk {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #E6F7F2; color: #0F7F75;
}

.uip__draft {
  font-size: var(--fs-lg); line-height: 1.7; color: var(--ink-700);
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
/* El texto y su correccion, uno al lado del otro como en la app. Debajo de
   860 se apilan, y entonces el orden importa: primero lo escrito. */
.uip__sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.uip__col { display: grid; gap: 8px; min-width: 0; }
@media (max-width: 860px) { .uip__sbs { grid-template-columns: 1fr; } }

.uip__label--now { color: var(--lp-teal); }
.uip__mark { border-radius: 4px; padding: 0 3px; }
.uip__mark--bad { background: #FDECEA; color: #C9483C; box-shadow: inset 0 -2px 0 #F3A9A0; }
.uip__mark--good { background: #E6F7F2; color: #0F7F75; box-shadow: inset 0 -2px 0 #86D7C6; }
.uip__was { color: #C9483C; }
.uip__now { color: #0F7F75; }
.uip__rowtag { display: block; margin-top: 6px; }

.uip__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
}
.uip__tag--purple { background: var(--lp-lavender); color: var(--lp-violet-dark); }
.uip__tag--teal { background: #E6F7F2; color: #0F7F75; }
.uip__tag--violet { background: var(--lp-violet); color: var(--white); }

/* De donde sale el bloque: es lo unico que separa un modulo adaptativo de
   uno del temario, asi que va arriba y no en una nota al pie. */
.uip__from {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: var(--fs-md); color: var(--ink-500);
}
.uip__after { font-size: var(--fs-sm); color: var(--ink-500); }

/* 5b. Cielo de vocabulario -------------------------------------------------- */

/* El anclaje.
   El bloque mide una pantalla mas el recorrido; dentro, el escenario se pega
   arriba y ocupa una pantalla. Mientras se cruza el alto de mas, la linea de
   tiempo y el cielo no se mueven de la pantalla y la rueda solo enciende
   constelaciones. Al acabarse, el escenario se despega y la pagina sigue.

   Lo enciende el JS con data-pin: sin JS esto es una seccion normal, y no una
   pantalla de scroll en blanco. */
.cst-pin { position: relative; --recorrido: clamp(360px, 62vh, 620px); }
.cst-pin[data-pin="true"] {
  height: calc(100vh + var(--recorrido));
  height: calc(100svh + var(--recorrido));
}
.cst-pin[data-pin="true"] .cst-pin__stage {
  position: sticky; top: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(10px, 2.5vh, 28px);
  display: grid;
  /* `safe` no es un adorno. Centrado a secas, en cuanto el contenido es mas
     alto que la ventana el grid reparte el sobrante hacia los dos lados y se
     come la linea de tiempo por arriba: quedaba la seccion clavada justo en las
     etiquetas de la semana, sin la via. Con `safe`, cuando no cabe se apoya
     arriba en vez de salirse. La primera declaracion es para quien no lo
     entienda: mejor centrado a secas que nada. */
  align-content: center;
  align-content: safe center;
}

/* Y que el cielo se encoja antes de que nada tenga que salirse. En una ventana
   baja, la figura un poco mas pequena es mejor que la linea de tiempo cortada
   -- el SVG se reescala solo y las constelaciones siguen enteras. */
.cst-pin[data-pin="true"] .cst__svg {
  /* Con suelo: un navegador que reporte una vh degenerada -- durante la carga,
     o con la barra del movil a medio recoger -- no puede dejar el cielo en
     nada. */
  max-height: max(240px, min(56vh, 470px));
}

/* Con movimiento reducido el cielo sale entero y no hay nada que anclar. */
@media (prefers-reduced-motion: reduce) {
  .cst-pin[data-pin="true"] { height: auto; }
  .cst-pin[data-pin="true"] .cst-pin__stage {
    position: static; min-height: 0; display: block;
  }
}

.cst {
  margin-top: 28px;
  padding: 22px clamp(14px, 3vw, 30px) 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-100);
  /* Noche muy suave: el resto de la landing es claro, y un azul oscuro de
     verdad aqui partiria la pagina en dos. */
  background:
    radial-gradient(720px 320px at 22% 0%, #F1EDFF 0%, rgba(241,237,255,0) 62%),
    radial-gradient(620px 300px at 88% 100%, #EEF3FF 0%, rgba(238,243,255,0) 60%),
    var(--surface-sunken);
}

/* La linea de tiempo: una via gris que se llena de lila por detras de los
   puntos, al ritmo al que se encienden las constelaciones.
   La parte lila es un elemento de verdad y no un ::after: se estira con
   scaleX, que se anima sin tocar el layout, y ademas se puede medir. */
/* Ocho paradas en apaisado, cuatro en estrecho: la via y la rejilla salen las
   dos del mismo numero, asi que los extremos siempre caen sobre un punto. */
.cst__time { position: relative; --cols: 8; }
.cst__track {
  position: absolute; top: 6px; height: 2px;
  left: calc(50% / var(--cols)); right: calc(50% / var(--cols));
  border-radius: 2px; overflow: hidden;
  background: var(--ink-200);
}
/* El degradado lleva el color de cada semana en su parada, y se descubre
   recortando en vez de estirando: con scaleX los ocho colores se apretaban en
   la parte ya recorrida en lugar de quedarse cada uno en su sitio. */
.cst__trackfill {
  display: block; width: 100%; height: 100%;
  background-image: var(--grad-wide, linear-gradient(90deg, var(--purple-300), var(--purple-500)));
  clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
  /* Casi sin transicion: la via la mueve el scroll, y medio segundo de retardo
     la despegaria del dedo. Lo justo para limar el salto entre fotogramas. */
  transition: clip-path .1s linear;
}
.cst__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 0;
  margin: 0 0 6px; padding: 0;
  list-style: none;
}

.cst__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
}
.cst__pip {
  width: 14px; height: 14px; padding: 0;
  border: 2px solid var(--ink-200);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
}
/* La via sigue siendo lila, que es el avance; el punto se pinta del color de
   la constelacion que acaba de encenderse, y asi se sabe cual es cual. */
.cst__step[data-on="true"] .cst__pip {
  border-color: var(--core, var(--purple-500));
  background: var(--core, var(--purple-500));
}
.cst__step[data-hover="true"] .cst__pip { transform: scale(1.35); }
.cst__pip:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 3px; }

.cst__wk {
  font-size: var(--fs-xs); font-weight: 650; color: var(--ink-300);
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.cst__step[data-on="true"] .cst__wk { color: var(--purple-600); }

/* El cielo */
.cst__sky { position: relative; margin-top: 4px; }
.cst__svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Apaisado por defecto; el vertical solo aparece cuando la pantalla es
   estrecha, que es donde ocho cumulos en fila dejan de verse. */
.cst__svg--tall { display: none; }

.cst__hit { fill: transparent; }
.cst__grp { cursor: pointer; }
.cst__grp:focus { outline: none; }
.cst__grp:focus-visible .cst__hit {
  fill: rgba(109, 87, 232, .05);
  stroke: var(--core, var(--purple-500)); stroke-width: 1.5; stroke-dasharray: 3 4;
}

.cst__line {
  stroke: var(--soft, var(--purple-300)); stroke-width: 1.2; stroke-linecap: round;
  opacity: 0;
  transition: opacity .5s var(--ease) .18s, stroke .25s var(--ease);
}
.cst__halo {
  fill: var(--soft, var(--purple-300)); opacity: 0;
  transition: opacity .5s var(--ease);
}
.cst__star {
  fill: var(--core, var(--purple-500));
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(.2);
  /* Cada estrella entra un poco despues que la anterior, para que el cumulo
     se dibuje y no aparezca de golpe. */
  transition: opacity .42s var(--ease), transform .42s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.cst__grp[data-on="true"] .cst__line { opacity: .55; }
.cst__grp[data-on="true"] .cst__halo { opacity: .22; }
.cst__grp[data-on="true"] .cst__star { opacity: 1; transform: none; }

/* Con el raton encima la figura se cierra en su propio tono, mas fuerte -- y
   se ensena entera aunque el scroll no haya llegado todavia a su semana: quien
   va a mirar unas palabras no tiene que esperar a que le toque. */
.cst__grp[data-hover="true"] .cst__line { stroke: var(--core, var(--purple-500)); opacity: .9; }
.cst__grp[data-hover="true"] .cst__halo { opacity: .45; }
.cst__grp[data-hover="true"] .cst__star { opacity: 1; transform: none; }

/* La tarjeta de palabras, colocada sobre su cumulo. */
.cst__card {
  position: absolute;
  /* El ancho va en una variable porque el tope tiene que saberlo: escrito a
     mano, la tarjeta del movil -- que es mas ancha -- se salia por la derecha. */
  --cw: 260px;
  left: clamp(0px, calc(var(--x) - var(--cw) / 2), calc(100% - var(--cw)));
  top: var(--y);
  width: var(--cw);
  padding: 9px 12px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-100);
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(23, 20, 56, .13);
  z-index: 2;
  pointer-events: none;
}
.cst__card[data-side="down"] { transform: translateY(18px); }
.cst__card[data-side="up"] { transform: translateY(calc(-100% - 18px)); }

.cst__cardhead {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); color: var(--lp-navy); line-height: 1.2;
}
.cst__lvl {
  flex: none;
  padding: 0 6px; border-radius: 999px;
  background: var(--soft, var(--purple-100)); color: var(--ink-700);
  font-size: var(--fs-xs); font-weight: 800; line-height: 1.5;
}
.cst__cardmeta {
  display: block; margin-top: 1px;
  font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.3;
}
/* Seis filas apretadas: la tarjeta es una ojeada, no una tabla. */
.cst__words { margin: 7px 0 0; padding: 0; list-style: none; }
.cst__words li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 1px 0;
  font-size: var(--fs-xs); line-height: 1.2;
  border-top: 1px solid var(--ink-50);
}
.cst__words li:first-child { border-top: 0; }
.cst__words b { color: var(--lp-navy); white-space: nowrap; }
.cst__words span { color: var(--ink-500); text-align: right; }

.cst__foot {
  margin: 10px 0 0;
  font-size: var(--fs-xs); color: var(--ink-400); text-align: center;
}

@media (max-width: 700px) {
  .cst__svg--wide { display: none; }
  .cst__svg--tall { display: block; }
  /* Cuatro semanas: las otras cuatro paradas no se ensenan y la via se acorta
     con ellas. */
  .cst__time { --cols: 4; }
  .cst__step[data-wide-only="true"] { display: none; }
  .cst__trackfill { background-image: var(--grad-tall); }
  /* La semana se queda en el numero: "Semana 8" ocho veces no cabe, y el
     numero con la via ya cuenta lo mismo. */
  .cst__wk { font-size: 10px; }
  .cst__wk span { display: none; }
  /* Apilar palabra y significado subia la tarjeta a doce lineas. Cabe algo mas
     ancha, y asi cada palabra vuelve a ocupar una sola fila. */
  /* Nunca mas ancha que el propio cielo, para que el tope siga siendo valido. */
  .cst__card { --cw: min(272px, 100%); }
  .cst__words li { gap: 8px; }
  .cst__words b { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .cst__line, .cst__halo, .cst__star, .cst__trackfill { transition: none; }
}

/* 6. Mission --------------------------------------------------------------- */

.mission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.mission__label {
  margin-top: 26px;
  font-size: var(--fs-base); font-weight: 800;
  color: var(--lp-violet);
}
.mission__label::after {
  content: ""; display: block; width: 34px; height: 3px; margin-top: 8px;
  border-radius: var(--r-full); background: var(--lp-violet);
}
.mission__text { margin-top: 14px; font-size: var(--fs-lg); line-height: 1.7; color: var(--ink-500); }
.mission__text strong { font-weight: 750; color: var(--lp-navy); }
.mission__quote em { font-style: normal; font-weight: 700; }

.mission__quote {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.mission__mark { color: var(--lp-violet); opacity: .35; }
.mission__quote p { margin-top: 10px; font-size: var(--fs-lg); line-height: 1.7; color: var(--ink-700); }
/* El segundo parrafo necesita aire propio, no el mismo hueco que deja la comilla. */
.mission__quote p + p { margin-top: 16px; }

.mission__points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: 22px;
}
.mission__points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: var(--fs-md); font-weight: 650; color: var(--ink-700);
}
.mission__ico {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--white); border: 1px solid var(--border);
  color: var(--lp-violet);
}
.mission__soon {
  display: block; margin-top: 2px;
  font-style: normal; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300);
}

/* 6b. Preguntas ------------------------------------------------------------ */

/* Sobre <details>: el teclado, el foco y el lector de pantalla vienen puestos,
   y si el JavaScript no carga se sigue abriendo. */
.faq { margin-top: clamp(24px, 4vw, 40px); display: grid; gap: 10px; }
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--lp-lavender-deep); box-shadow: var(--shadow-sm); }

.faq__q {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  cursor: pointer; list-style: none;
  font-size: var(--fs-lg); font-weight: 700; color: var(--lp-navy);
  letter-spacing: -.01em;
}
/* El triangulo que pone el navegador sobra: ya hay un chevron. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { background: var(--lp-lavender); }
.faq__q:focus-visible { outline: 2px solid var(--lp-violet); outline-offset: -2px; }
.faq__q > span { flex: 1; min-width: 0; }
.faq__q .icon { flex: none; color: var(--lp-violet); transition: transform .2s var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }

/* Sin tope de ancho: la respuesta ocupa la fila entera. Con 62ch quedaba un
   tercio de la tarjeta vacío a la derecha y la respuesta partida en más
   líneas de las necesarias. */
.faq__a {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--ink-500); line-height: 1.6;
}

@media (max-width: 560px) {
  .faq__q { padding: 14px 15px; gap: 12px; font-size: var(--fs-base); }
  .faq__a { padding: 0 15px 15px; }
}

/* 7. Pricing --------------------------------------------------------------- */

.price {
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(24px, 4vw, 38px);
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.price__head { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.price__amount {
  font-size: clamp(3rem, 7vw, 4.4rem); font-weight: 800;
  letter-spacing: -.04em; color: var(--lp-navy); line-height: 1;
}
.price__cur { color: var(--lp-violet); }
.price__once { font-size: var(--fs-lg); color: var(--ink-400); }
.price__what { margin-top: 10px; font-size: var(--fs-lg); color: var(--ink-700); }

.price__pacelabel { font-size: var(--fs-md); color: var(--ink-500); }
/* Los tres ritmos se ensenan, no se pulsan: el ritmo se escoge al crear el
   plan, y aqui un boton prometia una eleccion que esta pagina no hace. */
.price__paces {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.price__pace {
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  background: var(--white);
  font-weight: 700; color: var(--ink-500);
}
.price .btn--primary { background: var(--lp-violet); }
.price .btn--primary:hover { background: var(--lp-violet-dark); }
.price__foot {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-500);
}
.price__foot .icon { color: var(--lp-teal); }

/* 8. Closing --------------------------------------------------------------- */

.lp-close {
  background: linear-gradient(180deg, var(--lp-lavender) 0%, #E7E0FB 100%);
}
.lp-close__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
}
.lp-close .lp-h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.lp-close .btn--primary { background: var(--lp-violet); }
.lp-close .btn--primary:hover { background: var(--lp-violet-dark); }
.lp-close__art { width: clamp(120px, 20vw, 220px); flex: none; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .mission { grid-template-columns: minmax(0, 1fr); }
}

@container app (width < 860px) {
  .uiw { grid-template-columns: 132px minmax(0, 1fr); font-size: 10px; }
  /* Aqui la columna se estrecha, los titulos parten en dos lineas y la quinta
     tarjeta ya no cabe en la pantalla. El resumen sigue contando las cinco. */
  .uiw__grid2 > :nth-child(n+5) { display: none; }
  .uiw__today { grid-template-columns: minmax(0, 1fr); }
  .uiw__weekpill { display: none; }
  .uiw__grid2 { grid-template-columns: minmax(0, 1fr); }
  .uiw__grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La tarea y el editor son lo que importa de writing; lo que llega despues de
     enviar no cabe ya en la maqueta y se cuenta mas abajo en la propia pagina. */
  .uiw__cardtitle--recv, .uiw__recvs { display: none; }
  .uiw__weekstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uiw__weekstrip > :nth-child(n+4) { display: none; }
  .uiw__obj { flex-direction: column; align-items: flex-start; gap: 9px; }
  /* La columna de ejemplo es la primera que sobra: la palabra y el significado
     son lo que hay que leer. */
  .uiw__excol { display: none; }
}

/* Una pantalla apaisada y estrecha no da para la semana y tres actividades. */
/* Small screens get a phone, not a laptop shrunk until nothing is readable. */
@media (max-width: 700px) {
  .laptop { width: min(310px, 82vw); }
  .laptop__screen {
    padding: 9px;
    border-radius: 34px;
    box-shadow: var(--shadow-md);
  }
  .laptop__inner { aspect-ratio: 10 / 19.5; border-radius: 26px; }
  .laptop__base { display: none; }
  /* En movil no se encoge: se recoloca. Escalado al 36% no se leeria nada,
     y la maqueta ya sabe ser un telefono. */
  .laptop__canvas {
    width: 100%; height: 100%;
    transform: none;
  }
}

@container app (width < 700px) {
  .uiw { grid-template-columns: minmax(0, 1fr); font-size: 10px; }
  .uiw__phonebar { display: flex; }
  .uiw__main { padding: 12px 12px 14px; gap: 9px; }
  .uiw__greet { font-size: 17px; }
  .uiw__top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .uiw__planrow { flex-wrap: wrap; gap: 12px; }
  .uiw__btn { width: 100%; justify-content: center; }
  .uiw__cardtitle { font-size: 12px; }
  .uiw__act:nth-child(n+3) { display: none; }
  .uiw__week, .uiw__cardtitle--week { display: none; }
  .uiw__stats { gap: 12px; }
  .uiw__planrow, .uiw__act { padding: 11px 12px; }

  /* En movil el carril es el cajon de la app: se superpone, no empuja, y se
     cierra al elegir pantalla. Cerrado queda fuera del marco, que recorta, y
     ademas el JS lo marca inert: quien va con teclado no se mete en un menu
     que no se ve. */
  .uiw__rail {
    position: absolute; inset: 0 auto 0 0; z-index: 2;
    width: 150px; padding: 12px 9px;
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
  }
  .uiw[data-drawer="true"] .uiw__rail { transform: none; }
  .uiw__scrim {
    display: block; position: absolute; inset: 0; z-index: 1;
    background: rgb(17 25 54 / 38%);
    opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease);
  }
  .uiw[data-drawer="true"] .uiw__scrim { opacity: 1; pointer-events: auto; }

  .uiw__h1 { font-size: 15px; }
  .uiw__grid3 { grid-template-columns: minmax(0, 1fr); }
  .uiw__weekstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uiw__weekstrip > :nth-child(n+3) { display: none; }
  .uiw__grid2 > :nth-child(n+3), .uiw__grid3 > :nth-child(n+2) { display: none; }
  .uiw__table th, .uiw__table td { padding: 5px 9px; }
  .uiw__table tbody tr:nth-child(n+5) { display: none; }
  .uiw__btn--sm { width: auto; }
}

@media (max-width: 720px) {
  .sitebar__nav { display: none; }
  .lw { font-size: clamp(.85rem, 3.8vw, 1.05rem); }
  .adp { font-size: .64rem; padding: 4px 9px; }
  .narr__mascot { width: clamp(104px, 26vw, 150px); }
  .narr__title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .mission__points { grid-template-columns: minmax(0, 1fr); }
  .lp-close__inner { flex-direction: column; text-align: center; }
  /* Cuatro modulos: dos y dos, no tres arriba y uno huerfano debajo. */
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tabs__btn { padding: 10px 12px; font-size: var(--fs-md); }
}

@media (max-width: 460px) {
  .sitebar { gap: 10px; padding-inline: 12px; }
  .sitebar .brand__name { display: none; }
  .sitebar__actions { gap: 6px; min-width: 0; }
  .sitebar__actions .select { padding: 6px 22px 6px 8px; font-size: var(--fs-sm); }
  /* Thumb-sized targets: the two account buttons are the whole point of the bar. */
  .sitebar__actions .btn { min-height: 42px; padding-inline: 14px; font-size: var(--fs-sm); }
  .sitefoot__inner { justify-content: center; text-align: center; }
  .sitefoot__links { margin-inline: 0; }
  .uiw { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .lp-sec, .lp-sec[data-seen="false"] { opacity: 1; transform: none; transition: none; }
  .tabs__panel { animation: none; }
  .uiw__rail, .uiw__scrim, .uiw__navitem { transition: none; }
}

/* 9. Login ----------------------------------------------------------------- */
.authpage {
  flex: 1;
  display: grid; place-items: center;
  padding: clamp(24px, 6vh, 64px) 20px;
}
.authcard {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 36px);
}
.authcard__head { text-align: center; margin-bottom: 22px; }
.authcard__title { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.authcard__sub { margin-top: 6px; color: var(--ink-400); font-size: var(--fs-md); }

.authtabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin-bottom: 22px;
  background: var(--ink-50); border-radius: var(--r-md);
}
.authtabs__btn {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-weight: 650; font-size: var(--fs-md); color: var(--ink-500);
}
.authtabs__btn[aria-selected="true"] { background: var(--white); color: var(--purple-700); box-shadow: var(--shadow-xs); }

.authnote {
  margin-top: 18px; padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  font-size: var(--fs-sm); color: var(--ink-400);
  display: flex; gap: 10px; align-items: flex-start;
}
.authnote .icon { flex: none; margin-top: 1px; color: var(--ink-300); }
.authnote--error { background: var(--red-50); color: var(--red-500); }
.authnote--error .icon { color: var(--red-500); }
.authnote--ok { background: var(--green-50); color: var(--green-600); }
.authnote--ok .icon { color: var(--green-600); }

.authcard__alt { margin-top: 20px; text-align: center; font-size: var(--fs-md); color: var(--ink-400); }

/* Password field with a visibility toggle */
.pwfield { position: relative; }
.pwfield .input { padding-right: 44px; }
.pwfield__toggle {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-300);
}
.pwfield__toggle:hover { color: var(--purple-600); background: var(--purple-50); }

/* "What happens next" under the sign-up form */
.authsteps {
  margin-top: 20px; padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
}
.authsteps__title {
  display: block; margin-bottom: 10px;
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--purple-700);
}
.authsteps ol { display: grid; gap: 8px; }
.authsteps li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-md); color: var(--ink-600, var(--ink-500)); line-height: 1.5;
}
.authsteps__n {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--purple-600); color: var(--white);
  font-size: 11px; font-weight: 800;
}
.authsteps__free {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--purple-100);
  font-size: var(--fs-sm); font-weight: 650; color: var(--green-600);
}

/* El plan que trae quien viene del onboarding, encima del formulario: dice
   para que es el correo que se esta pidiendo. */
.authplan {
  margin: 4px 0 18px; padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--green-50, var(--ink-50)); border: 1px solid var(--green-100, var(--border));
}
.authplan__title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--green-600);
}
.authplan__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.authplan__edit {
  display: inline-block; margin-top: 10px;
  font-size: var(--fs-sm); font-weight: 650; color: var(--ink-500);
}
.authplan__edit:hover { color: var(--purple-600); }

.authdetail {
  margin-top: 10px; padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--ink-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs); color: var(--ink-400);
  overflow-wrap: anywhere;
}