/* Aprendiendo Inglés · página de inicio pública (primera versión de la paleta de marca).
   Idea visual: los letreros de las autopistas de EE. UU. Verde de carretera, amarillo reflejante,
   tipografía Overpass (inspirada en la de los letreros). El letrero con la frase que suena es la pieza principal. */
#landing{
  --road:#0E5A43; --road-deep:#0A3F2F; --reflect:#FFD23F; --mint:#A8E6CB; --signal:#E8572C;
  --paper:#F4F7F3; --card:#FFFFFF; --ink:#10201A; --mute:#4C5D55; --rule:#D5DED7;
  --sign:"Overpass","Arial Narrow",system-ui,sans-serif;
  --text:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #landing{
  --paper:#0B1713; --card:#12221C; --ink:#E6EFEA; --mute:#9DB0A6; --rule:#22362D; --road:#127052; color-scheme:dark}}
:root[data-theme="dark"] #landing{--paper:#0B1713; --card:#12221C; --ink:#E6EFEA; --mute:#9DB0A6; --rule:#22362D; --road:#127052; color-scheme:dark}

/* Qué se ve: visitantes (html.pub) ven la página de inicio; con sesión, la app. */
html:not(.pub) #landing{display:none}
html.pub .wrap{display:none}
html.pub body{background:var(--paper,#F4F7F3)}

#landing *{box-sizing:border-box}
#landing a{color:inherit}
#landing :focus-visible{outline:3px solid var(--reflect);outline-offset:3px;border-radius:6px}
.ln-in{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Barra superior */
.ln-top{position:sticky;top:0;z-index:1000;background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .2s}
.ln-top.scrolled{box-shadow:0 1px 0 var(--rule),0 6px 18px -12px rgba(10,40,30,.35)}
.ln-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;height:72px}
.ln-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:800 1.05rem/1 var(--sign);letter-spacing:-.01em}
.ln-logo svg{width:34px;height:34px;flex:none}
.ln-acts{display:flex;align-items:center;gap:6px}
.ln-ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:700;color:var(--mute)}
.ln-ghost:hover{color:var(--ink)}
.ln-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;
  background:var(--reflect);color:#10201A !important;text-decoration:none;font:800 1.08rem/1 var(--sign);letter-spacing:.005em;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);transition:transform .15s}
.ln-cta:hover{transform:translateY(-1px)}
.ln-cta:active{transform:translateY(1px)}
.ln-cta.sm{min-height:44px;padding:0 16px;font-size:.98rem}

/* Hero */
.ln-hero{padding:40px 0 56px}
.ln-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.ln-copy h1{font:900 clamp(2.3rem,3.6vw + 1rem,4rem)/1.02 var(--sign);letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance;max-width:14ch}
.ln-sub{font-size:1.12rem;color:var(--mute);margin:0 0 28px;max-width:46ch}
.ln-ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.ln-micro{margin:0;color:var(--mute);font-size:.92rem}

/* El letrero: pieza principal */
.ln-sign{margin:0}
.ln-sign-in{position:relative;background:var(--road);color:#fff;border-radius:22px;padding:34px 30px 28px;
  box-shadow:inset 0 0 0 6px var(--road),inset 0 0 0 8.5px #fff,0 26px 50px -24px rgba(8,48,34,.6)}
.ln-sign-en{font:800 clamp(1.7rem,1.6vw + 1rem,2.5rem)/1.12 var(--sign);margin:0 0 6px;letter-spacing:-.01em;min-height:2.24em;text-wrap:balance}
.ln-sign-full{margin:0 0 10px;color:var(--mint);font-size:.95rem;min-height:1.5em}
.ln-sign-es{margin:0 0 22px;font-size:1.12rem;color:#DDEDE5}
.ln-beats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:22px}
.ln-beats span{position:relative;overflow:hidden;font:700 .8rem/1 var(--sign);padding:10px 8px 8px;border-radius:7px;background:rgba(255,255,255,.1);color:#CFE6DB;text-align:center}
.ln-beats span::before{content:"";position:absolute;inset:0;background:var(--reflect);transform:scaleX(var(--p,0));transform-origin:left;opacity:.95}
.ln-beats span.on{color:#10201A}
.ln-beats span{isolation:isolate}
.ln-beats span::before{z-index:-1}
.ln-play{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 14px;border:0;border-radius:999px;
  background:var(--reflect);color:#10201A;font:800 1.02rem/1 var(--sign);cursor:pointer}
.ln-play svg{width:28px;height:28px;fill:currentColor}
.ln-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ln-pick button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rule);background:var(--card);color:var(--ink);font:600 .92rem var(--text);cursor:pointer}
.ln-pick button[aria-pressed="true"]{border-color:var(--road);background:var(--road);color:#fff}

/* Datos reales */
.ln-facts{background:var(--road-deep);color:#fff;padding:30px 0}
.ln-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ln-facts-grid>div{display:flex;flex-direction:column;gap:2px}
.ln-facts b{font:900 2.6rem/1 var(--sign);color:var(--reflect);font-variant-numeric:tabular-nums}
.ln-facts span{color:#CFE6DB;font-size:.95rem;max-width:24ch}

/* Secciones */
.ln-sec{padding:72px 0 0}
.ln-sec h2{font:900 clamp(1.8rem,1.8vw + 1rem,2.6rem)/1.08 var(--sign);letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.ln-lead{color:var(--mute);margin:0 0 26px;max-width:58ch;font-size:1.05rem}

/* Selector de metas */
.ln-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ln-goal{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;
  padding:18px;border-radius:14px;background:var(--card);border:1.5px solid var(--rule);text-decoration:none;
  transition:transform .15s,border-color .15s}
.ln-goal:hover{transform:translateY(-4px);border-color:var(--road)}
.ln-goal .gi{grid-row:span 2;width:48px;height:48px;border-radius:12px;background:var(--road);display:grid;place-items:center}
.ln-goal .gi svg{width:26px;height:26px;fill:none;stroke:var(--reflect);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ln-goal b{font:800 1.12rem/1.2 var(--sign)}
.ln-goal small{color:var(--mute);font-size:.9rem;min-height:1.4em}

/* Pasos */
.ln-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.ln-steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;padding-top:58px;position:relative}
.ln-steps li::before{content:counter(s);position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;
  background:var(--reflect);color:#10201A;font:900 1.4rem/44px var(--sign);text-align:center}
.ln-steps li:not(:last-child)::after{content:"";position:absolute;top:21px;left:56px;right:-14px;border-top:3px dashed var(--rule)}
.ln-steps b{font:800 1.2rem var(--sign)}
.ln-steps span{color:var(--mute)}

/* Diferenciadores */
.ln-diff{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.ln-diff svg{width:120px;height:64px;margin-bottom:14px}
.ln-diff h3{font:800 1.25rem/1.2 var(--sign);margin:0 0 8px}
.ln-diff p{margin:0;color:var(--mute)}

/* Pilares */
.ln-why .ln-in{background:var(--road);color:#fff;border-radius:26px;padding:48px clamp(20px,4vw,56px)}
.ln-why h2{color:#fff}
.ln-pillars{list-style:none;margin:18px 0 36px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ln-pillars li{display:flex;flex-direction:column;gap:4px;border-top:3px solid var(--reflect);padding-top:14px}
.ln-pillars b{font:800 1.15rem var(--sign)}
.ln-pillars span{color:#CFE6DB}
.ln-again{display:flex;align-items:center;justify-content:center;gap:16px;overflow:hidden;padding:4px 0}
.ln-chev{width:46px;height:20px;background:
  linear-gradient(135deg,transparent 40%,var(--reflect) 40% 60%,transparent 60%) 0 0/14px 20px repeat-x;opacity:0;transition:opacity .4s,transform .7s cubic-bezier(.2,.8,.2,1)}
.ln-chev.l{transform:translate3d(-24px,0,0)}
.ln-chev.r{transform:translate3d(24px,0,0) scaleX(-1)}
.ln-why.in .ln-chev{opacity:1;transform:translate3d(0,0,0)}
.ln-why.in .ln-chev.r{transform:translate3d(0,0,0) scaleX(-1)}

/* App */
.ln-app-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.ln-phone{width:210px;height:400px;border-radius:34px;background:var(--ink);padding:10px;box-shadow:0 30px 50px -28px rgba(8,48,34,.55)}
.ln-phone-scr{height:100%;border-radius:26px;background:var(--paper);padding:26px 16px;display:flex;flex-direction:column;gap:10px}
.ln-phone-scr i{display:block;font-style:normal}
.ln-ph-top{font:900 1.2rem var(--sign);color:var(--ink)}
.ln-ph-now{font-size:.8rem;color:var(--mute)}
.ln-ph-bar{height:6px;border-radius:3px;background:var(--rule)}
.ln-ph-bar i{width:58%;height:100%;border-radius:3px;background:var(--road)}
.ln-ph-btn{width:56px;height:56px;border-radius:50%;background:var(--reflect);align-self:center;margin:8px 0}
.ln-ph-row{height:34px;border-radius:8px;background:var(--card);border:1px solid var(--rule)}
.ln-ph-row.short{width:70%}

/* Cinta */
.ln-tape{margin-top:80px;background:var(--reflect);color:#10201A;overflow:hidden;padding:16px 0;border-block:3px solid #10201A}
.ln-tape-run{display:flex;width:max-content;animation:ln-run 38s linear infinite}
.ln-tape-run span{font:900 1.5rem/1 var(--sign);white-space:nowrap;padding:0 22px;display:flex;align-items:center;gap:44px}
.ln-tape-run span::after{content:"";width:12px;height:12px;background:#10201A;transform:rotate(45deg);margin-left:22px}
@keyframes ln-run{to{transform:translate3d(-50%,0,0)}}

/* Pie */
.ln-foot{background:var(--road-deep);color:#DDEDE5;padding:48px 0 28px}
.ln-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ln-foot .ln-logo{color:#fff}
.ln-foot p{margin:10px 0 0;color:#B7CEC2;max-width:34ch}
.ln-foot h3{font:800 1rem var(--sign);color:#fff;margin:0 0 10px}
.ln-foot nav,.ln-foot-grid>div{display:flex;flex-direction:column;gap:8px}
.ln-foot nav a{text-decoration:none;color:#DDEDE5}
.ln-foot nav a:hover{color:var(--reflect)}
.ln-foot-grid span{color:#9FB9AC}
.ln-legal{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.88rem}
.ln-legal p{margin:0;max-width:none}

/* Responsivo */
@media (max-width:1023px){
  .ln-hero-grid{grid-template-columns:1fr;gap:32px}
  .ln-goals{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .ln-goals::-webkit-scrollbar{display:none}
  .ln-goal{flex:0 0 min(78%,300px);scroll-snap-align:start}
  .ln-pillars{grid-template-columns:repeat(2,1fr)}
  .ln-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .ln-bar{height:60px}
  .ln-logo span{display:none}
  .ln-hero{padding:24px 0 40px}
  .ln-facts-grid{grid-template-columns:1fr 1fr}
  .ln-steps,.ln-diff{grid-template-columns:1fr;gap:26px}
  .ln-steps li:not(:last-child)::after{display:none}
  .ln-app-grid{grid-template-columns:1fr;justify-items:start}
  .ln-phone{width:180px;height:330px}
  .ln-sec{padding-top:56px}
  .ln-sign-in{padding:28px 22px 22px}
  .ln-why .ln-in{margin:0 12px;border-radius:20px}
  .ln-chev{width:28px}
}
@media (max-width:400px){
  .ln-ghost{padding:0 6px}
  .ln-cta.sm{padding:0 12px;font-size:.9rem}
  .ln-pillars{grid-template-columns:1fr}
  .ln-foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ln-tape-run{animation:none}
  .ln-cta,.ln-goal,.ln-chev{transition:none}
}