:root{
  --cobalto:#1B4FA0; --tinta:#152A5E; --cal:#F4F6F2; --oro:#E8A33D; --rosa:#B03A5B; --verde:#2E8B57;
  --fs:19px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--tinta)}
body{overflow-x:clip}
body{
  color:var(--cal);
  font-family:'Newsreader',Georgia,serif;
  padding:10px 16px 0;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:640px;margin:0 auto}

/* Sticky, because Account and Settings are long panels: once you scrolled down, the
   chips left the screen and taps aimed at them hit whatever had taken their place, which
   is what made My words and Credit feel like they only worked half the time. The negative
   side margins let the bar's background span the body gutters; all content sits inside
   .wrap, so nothing shows past them. z-index clears .modo (5) and stays under the
   overlays (toast 20, popup 30). */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;
  position:sticky;top:0;z-index:12;background:var(--tinta);
  margin:0 -16px;padding:calc(10px + env(safe-area-inset-top)) 16px 8px}
/* Everything else that sticks sits below the bar: 10 + 34 chip + 8 = 52px, plus the inset. */
:root{--barra-alta:calc(52px + env(safe-area-inset-top))}
.eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.tools{display:flex;gap:10px;position:relative}
#credito-chip.bajo{border-color:var(--oro);color:var(--oro)}
.cg{display:inline-block;position:relative}
.aa{font-family:'Newsreader',serif;font-style:italic;font-weight:600}
/* Credit landing on the chip. The engravings' own checker field, flickering across the
   chip and burning off - the house treatment rather than a particle burst, which is the
   wrong register for an app whose landing page reads "in support of non-gamification".
   The gain rises from BENEATH the chip and is absorbed into it first: the chip sits at
   the very top of the screen, so a label above it would fall outside the view, and
   leading with it makes the two beats read as cause and effect. */
.cg.gira{animation:cg-gira .45s steps(1)}
@keyframes cg-gira{0%{transform:rotate(0)}40%{transform:rotate(180deg);color:var(--oro)}100%{transform:rotate(360deg)}}
.cg.suma{animation:cg-suma .95s steps(1) .42s}
@keyframes cg-suma{0%{color:inherit}8%,86%{color:var(--oro)}100%{color:inherit}}
/* The gain, entering the chip from below. */
.cred-mas{position:absolute;left:50%;top:100%;margin-top:2px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--oro);white-space:nowrap;pointer-events:none;animation:cred-mas .6s cubic-bezier(.32,.6,.3,1) both}
@keyframes cred-mas{0%{opacity:0;transform:translate(-50%,7px)}22%{opacity:1;transform:translate(-50%,1px)}55%{opacity:1;transform:translate(-50%,-9px)}100%{opacity:0;transform:translate(-50%,-21px)}}
/* Tabular figures so the chip does not change width while the count runs. */
#credito-n{font-variant-numeric:tabular-nums}
/* The chip is the positioning context for the gain, and carries the checker field. */
#credito-chip{position:relative}
#credito-chip.celebra{animation:chip-cel .95s steps(1) .42s}
@keyframes chip-cel{0%{border-color:rgba(244,246,242,.25)}8%,86%{border-color:var(--oro);color:var(--oro)}100%{border-color:rgba(244,246,242,.25)}}
#credito-chip.celebra::before{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;background:repeating-conic-gradient(var(--oro) 0% 25%,transparent 0% 50%) 0 0/4px 4px;animation:cred-dither .95s steps(1) .42s both}
@keyframes cred-dither{0%{opacity:0}8%{opacity:.6}22%{opacity:.3}34%{opacity:.52}48%{opacity:.2}60%{opacity:.34}74%{opacity:.12}86%{opacity:.2}100%{opacity:0}}
/* Motion has to be opt-out: keep the colour beat, drop the field and the travel. */
@media (prefers-reduced-motion:reduce){
 #credito-chip.celebra::before{display:none}
 .cred-mas{animation:cred-mas-quieto 1.2s ease both}
 @keyframes cred-mas-quieto{0%,78%{opacity:1;transform:translate(-50%,2px)}100%{opacity:0;transform:translate(-50%,2px)}}
 .cg.suma{animation:cg-quieto 1.1s ease}
 .cg.gira{animation:cg-quieto .5s ease}
 #credito-chip.celebra{animation:cg-quieto 1.2s ease}
 @keyframes cg-quieto{0%,100%{color:inherit}30%,70%{color:var(--oro)}}
}
.gear{position:relative;background:none;border:1px solid rgba(244,246,242,.25);color:var(--cal);border-radius:999px;height:34px;min-width:34px;padding:0 10px;font-size:14px;cursor:pointer;font-family:'Space Mono',monospace;white-space:nowrap}
.gear.badge{border-color:var(--oro);color:var(--oro)}

h1{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:clamp(30px,9.5vw,44px);line-height:.95;letter-spacing:-.03em;margin:8px 0 2px}
h1 span{color:var(--oro)}
.sub{font-size:14px;opacity:.7;margin:6px 0 16px;font-style:italic;line-height:1.4}
.barra{display:flex;align-items:center;gap:10px;width:100%;background:rgba(244,246,242,.06);border:1px solid rgba(244,246,242,.22);border-radius:6px;padding:11px 12px;color:var(--cal);cursor:pointer;text-align:left;margin-bottom:8px}
.barra[hidden]{display:none}
.nivelpill{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--oro);border:1px solid var(--oro);border-radius:4px;padding:3px 6px;letter-spacing:.04em}
.barra-tema{flex:1;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.1}
.barra-cambiar{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.actualizar{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--oro);border-radius:6px;padding:8px 8px 8px 12px;margin-bottom:8px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--oro)}
.actualizar[hidden]{display:none}
.actualizar .slow{border-color:var(--oro);color:var(--oro);padding:7px 11px}
.actualizar .slow:disabled{opacity:.4}
#picker[hidden]{display:none}
#tema-vista[hidden]{display:none}
.barra-cambiar{white-space:nowrap}
.grupo{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);opacity:.9;margin:12px 0 7px}
.segfull{display:flex;width:100%;margin-bottom:4px}
.segfull button{flex:1;padding:10px 4px;text-align:center}
.chip.cacheado::after{content:" ·";color:var(--oro);font-weight:700}
.chip.cargando::after{content:" ·";color:var(--oro);font-weight:700;animation:parpadeo 1s ease-in-out infinite}
@keyframes parpadeo{50%{opacity:.15}}
.narra{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--oro);margin:6px 0 14px;min-height:18px;transition:opacity .3s}
.narra.cambiando{opacity:0}
.fin{border:1px solid rgba(244,246,242,.25);border-radius:6px;padding:26px 18px;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;margin-bottom:16px}
.fin small{display:block;font-family:'Newsreader',serif;font-weight:400;font-size:15px;opacity:.7;margin-top:6px;font-style:italic}
.genero{color:rgba(14,42,87,.55);letter-spacing:.06em}
.chip:disabled{opacity:.35;cursor:default}

.label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:0 0 7px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{font-family:'Space Mono',monospace;font-size:12px;padding:9px 13px;border-radius:999px;border:1px solid rgba(244,246,242,.25);background:transparent;color:var(--cal);cursor:pointer}
.chip.on{background:var(--oro);border-color:var(--oro);color:var(--tinta);font-weight:700}
.chip.subtema{font-size:11px;padding:7px 11px;border-color:rgba(244,246,242,.18)}
.chip.subtema.on{background:var(--cal);border-color:var(--cal);color:var(--tinta)}
#sublabel{margin-top:2px}
.go{width:100%;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;padding:17px;border:none;border-radius:4px;background:var(--cal);color:var(--tinta);cursor:pointer;margin-top:6px}
.go:disabled{opacity:.5}
.go-alt{background:transparent;color:var(--cal);border:1px solid rgba(244,246,242,.35);margin-top:10px}
.modo[hidden]{display:none}
.modo{display:flex;justify-content:space-between;align-items:center;margin:4px 0 6px;gap:10px;flex-wrap:wrap;min-height:34px}
.seg{display:inline-flex;border:1px solid rgba(244,246,242,.25);border-radius:999px;overflow:hidden}
.seg button{background:none;border:none;color:var(--cal);font-family:'Space Mono',monospace;font-size:11px;padding:8px 12px;cursor:pointer;letter-spacing:.06em}
.seg button.on{background:var(--cal);color:var(--tinta);font-weight:700}

.card{background:var(--cal);color:var(--tinta);border-radius:4px;padding:20px 18px 16px;margin-bottom:16px;border-left:7px solid var(--cobalto)}
.num{font-family:'Space Mono',monospace;font-size:11px;color:var(--rosa);letter-spacing:.1em}
.headrow{display:flex;align-items:flex-start;gap:6px;margin:5px 0 12px}
.headline{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;line-height:1.08;letter-spacing:-.02em;margin:0;flex:1}
.body{font-size:var(--fs);line-height:1.7}
.frase{cursor:pointer;border-radius:3px;padding:1px 0;transition:background .15s}
.frase.hablando{background:rgba(232,163,61,.35)}
.frase.abierta{background:rgba(27,79,160,.07)}
.en-frase{display:block;font-size:calc(var(--fs) - 4px);line-height:1.5;font-style:italic;color:rgba(14,42,87,.7);margin:2px 0 10px}
.paralelo .frase{display:block;margin-bottom:2px}

.word{border:none;background:rgba(27,79,160,.10);color:var(--cobalto);font:inherit;padding:0 2px;border-bottom:2px dotted var(--cobalto);cursor:pointer;border-radius:2px}
.word.on{background:var(--oro);border-bottom-color:var(--oro);color:var(--tinta)}
.word.sabida{background:none;border-bottom-color:rgba(27,79,160,.3)}
.nb{white-space:nowrap}   /* a vocabulary word and its full stop stay on one line */
.gloss{display:inline-flex;align-items:center;gap:4px;font-family:'Space Mono',monospace;font-size:12px;background:var(--tinta);color:var(--cal);padding:3px 5px 3px 8px;border-radius:3px;margin-left:4px;vertical-align:middle}
.gloss .mini{border:none;background:var(--oro);color:var(--tinta);width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.gloss .mini.star{background:transparent;color:var(--oro);border:1px solid var(--oro);font-size:13px}
.gloss .mini.star.on{background:var(--oro);color:var(--tinta)}

.audio{border:none;background:var(--cobalto);color:var(--cal);width:32px;height:32px;min-width:32px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.audio:active,.audio.on{background:var(--rosa)}
.audiorow{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.slow{border:1px solid var(--cobalto);background:transparent;color:var(--cobalto);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:8px 12px;cursor:pointer}
.slow.on{background:var(--cobalto);color:var(--cal)}
.play .stop{display:none}
.play.on .lbl{display:none}
.play.on .stop{display:inline}
.play.on{background:var(--rosa);border-color:var(--rosa);color:#fff}
.fuente{margin-top:10px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.03em;color:rgba(14,42,87,.55)}
.fuente a{color:var(--cobalto);text-decoration:none;border-bottom:1px dotted var(--cobalto)}
.pregunta{margin-top:14px;border-top:1px solid rgba(14,42,87,.15);padding-top:12px}
.pregunta form{display:flex;gap:6px}
.pregunta input{flex:1;min-width:0;padding:10px 12px;font-family:'Newsreader',serif;font-size:16px;border:1px solid rgba(14,42,87,.3);border-radius:4px;background:#fff;color:var(--tinta)}
.pregunta button[type=submit]{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;padding:0 14px;border:none;border-radius:4px;background:var(--cobalto);color:var(--cal);cursor:pointer}
.pregunta button[type=submit]:disabled{opacity:.5}
.qa{margin-top:12px}
.qa .q-es,.qa-cerrada{display:block;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:'Space Mono',monospace;font-size:11px;color:var(--rosa);letter-spacing:.04em;margin:0 0 4px}
.qa-cerrada{padding:7px 0;border-bottom:1px dashed rgba(14,42,87,.15);color:rgba(14,42,87,.6)}
.qa-cerrada span,.qa .q-es span{opacity:.6}
.headline.leyendo{color:var(--oro);transition:color .3s}
.peli-links{margin-top:4px}
.peli{margin-top:12px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.03em;color:rgba(14,42,87,.75);line-height:1.8}
.peli a{color:var(--cobalto);font-weight:700}
.peli-row{display:flex;flex-wrap:nowrap;gap:0 10px;white-space:nowrap;font-size:10px;letter-spacing:0}   /* always one line: ajustarPeli() shrinks the type when the labels would not fit */
.peli-row>span{flex:none}
.hint{font-family:'Space Mono',monospace;font-size:10px;color:rgba(14,42,87,.5);margin:8px 0 0;letter-spacing:.04em}

.quiz{margin-top:16px;border-top:1px solid rgba(14,42,87,.15);padding-top:12px}
.quiz .q{font-size:calc(var(--fs) - 2px);line-height:1.5;margin:0 0 10px;font-weight:600}
.quiz .btns{display:flex;gap:8px}
.quiz .btns button{flex:1;font-family:'Space Mono',monospace;font-size:12px;padding:10px;border-radius:4px;border:1px solid var(--cobalto);background:transparent;color:var(--cobalto);cursor:pointer}
.quiz .btns button.bien{background:var(--verde);border-color:var(--verde);color:#fff}
.quiz .btns button.mal{background:var(--rosa);border-color:var(--rosa);color:#fff}
.quiz .res{font-family:'Space Mono',monospace;font-size:12px;margin:10px 0 0;color:var(--cobalto)}

.empty{border:1px dashed rgba(244,246,242,.28);border-radius:4px;padding:26px 18px;font-size:17px;line-height:1.55}
.error{background:var(--rosa);color:#fff;padding:15px;border-radius:4px;font-size:15px;margin-bottom:16px}
.error button{margin-top:8px;background:#fff;color:var(--rosa);border:none;border-radius:4px;padding:8px 12px;font-family:'Space Mono',monospace;font-size:12px;cursor:pointer}
.note{font-family:'Space Mono',monospace;font-size:11px;opacity:.5;margin:14px 0 22px;padding:0 14px;line-height:1.7}   /* breathing room above the join card, text aligned with the card text */
.saved{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;background:var(--oro);color:var(--tinta);padding:4px 9px;border-radius:999px;margin-bottom:14px;letter-spacing:.06em}
.skeleton{background:var(--cal);border-radius:4px;height:150px;margin-bottom:16px;opacity:.15;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.progreso{font-family:'Space Mono',monospace;font-size:11px;opacity:.6;margin-top:10px;letter-spacing:.06em}

/* repaso */
.flash{background:var(--cal);color:var(--tinta);border-radius:4px;padding:28px 20px;text-align:center;border-left:7px solid var(--oro);margin-bottom:14px}
.flash .es{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1.1}
.flash .en{font-size:20px;font-style:italic;margin-top:12px;color:var(--cobalto);min-height:28px}
.flash .ctx{font-size:14px;opacity:.6;margin-top:10px;line-height:1.5}
.flash .ctx b{font-weight:600;color:var(--cobalto)}
.flash .acciones{display:flex;gap:8px;margin-top:18px}
.flash .acciones button{flex:1;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;padding:13px;border:none;border-radius:4px;cursor:pointer}
.b-otra{background:var(--rosa);color:#fff}
.b-med{background:var(--oro);color:var(--tinta)}
.b-se{background:var(--verde);color:#fff}
.b-ver{background:var(--cobalto);color:#fff}
.lista{list-style:none;padding:0;margin:10px 0 0}
.lista li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid rgba(244,246,242,.12);font-size:16px}
.lista li span{opacity:.65;font-style:italic;font-size:14px}
.hecha{display:flex;align-items:center;gap:10px;width:100%;background:rgba(244,246,242,.05);border:1px dashed rgba(244,246,242,.25);border-radius:4px;padding:10px 14px;margin-bottom:10px;color:var(--cal);opacity:.7;font-family:'Newsreader',serif;font-size:15px;text-align:left;cursor:pointer}
.hecha b{font-family:'Space Mono',monospace;font-size:11px;color:var(--verde)}
.marcar{display:flex;gap:8px;margin-top:14px;border-top:1px solid rgba(14,42,87,.15);padding-top:12px}
.marcar button{flex:1;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;padding:10px;border-radius:4px;border:1px solid rgba(14,42,87,.3);background:transparent;color:var(--tinta);cursor:pointer}
.marcar button.on{background:var(--oro);border-color:var(--oro);font-weight:700}
.card{will-change:transform,opacity}
.card.lista{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease,border-left-color .16s ease;transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.22);border-left-color:var(--verde)}
.marcar button{transition:transform .12s cubic-bezier(.2,.8,.2,1),background .15s ease,color .15s ease,border-color .15s ease}
.marcar button.ok{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:700;animation:pulso .32s cubic-bezier(.2,.8,.2,1)}
@keyframes pulso{0%{transform:scale(.96)}55%{transform:scale(1.025)}100%{transform:scale(1)}}
.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));margin:0 auto;max-width:300px;transform:translateY(14px);opacity:0;background:rgba(244,246,242,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--tinta);border-radius:10px;padding:11px 12px 11px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.03em;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:20;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.toast.on{opacity:1;transform:none;pointer-events:auto;animation:toastfade 4.2s linear .8s forwards}
@keyframes toastfade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
.pop-velo{position:fixed;inset:0;background:rgba(10,20,50,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.pop-velo.on{opacity:1;pointer-events:auto}
.pop{background:rgba(244,246,242,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--tinta);border-radius:8px;max-width:280px;width:100%;padding:18px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.4);transform:translateY(10px) scale(.97);transition:transform .2s ease}
.pop-velo.on .pop{transform:none}
/* The languages card: three rows on the cream popup, native selects (no .sel, so mejorarSelect leaves them). */
.pop.idiomas{max-width:330px;padding:18px 18px 14px}
.idr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(21,42,94,.14);cursor:pointer}
.idr:last-of-type{border-bottom:0}
.idr .l{font-family:'Newsreader',serif;font-size:16px;color:var(--tinta)}
.idr small{display:block;font-style:italic;font-size:12.5px;color:rgba(21,42,94,.6);line-height:1.3;margin-top:1px}
.idr input{text-align:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--tinta);background:#fff;border:1px solid rgba(21,42,94,.35);border-radius:2px;padding:8px 10px;max-width:150px;min-height:36px;margin:0;box-sizing:border-box}
.idr select{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--tinta);background:#fff;border:1px solid rgba(21,42,94,.35);border-radius:2px;padding:8px 10px;max-width:150px;min-height:36px}
.pop.idiomas .pop-btns{justify-content:flex-end;margin-top:12px}
.pop .grupo{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin:0 0 8px}
#pop-t:empty{display:none}
.pop-txt{font-family:'Newsreader',serif;font-size:14px;line-height:1.4;margin:0 0 14px;white-space:pre-line}
.pop-btns{display:flex;gap:14px;justify-content:center}
.pop-btns:empty{display:none}
/* The primary decision in a popup - Join, Top up, Open it - reads as the primary. */
.pop-btns .ppri{background:var(--tinta);color:var(--cal);border:1px solid rgba(21,42,94,.9)}
.snote.rosa{color:#E08AA0}
.pop-btns button{min-height:44px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border:none;background:transparent;border-radius:5px;padding:12px 10px;min-height:40px;cursor:pointer;color:var(--tinta)}
.aviso-red{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));margin:0 auto;width:max-content;max-width:280px;padding:6px 14px;border-radius:6px;background:rgba(244,246,242,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:rgba(21,42,94,.85);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:center;opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:20}
.aviso-red.on{opacity:1}
.toast button{border:none;background:transparent;color:var(--cobalto);opacity:.7;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:6px;cursor:pointer}
.toast button:active{background:rgba(27,79,160,.12);opacity:1}
.card.restaurada{animation:resaltar 1.4s ease}
@keyframes resaltar{0%{box-shadow:0 0 0 3px var(--verde);transform:translateY(-6px);opacity:.4}30%{opacity:1;transform:none}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.hechas-pie{width:100%;background:none;border:none;color:var(--cal);opacity:.55;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;padding:10px;cursor:pointer;margin-bottom:8px}
.hecha{opacity:.55;align-items:flex-start;white-space:normal;line-height:1.4}
.hecha .tit{flex:1;min-width:0}
.hecha .rest{margin-left:auto;align-self:center;border:1px solid rgba(244,246,242,.4);background:none;color:var(--cal);border-radius:999px;padding:5px 10px;font-family:'Space Mono',monospace;font-size:10px;cursor:pointer;white-space:nowrap}
@keyframes aparecer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vermas2{display:block;width:100%;background:var(--cal);border:none;border-radius:6px;overflow:hidden;cursor:pointer;padding:0 0 16px;text-align:center;margin-bottom:12px}
.vermas2 .vm-eye{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,42,94,.55);padding:14px 0 12px}
.vermas2 .vm-img{display:block;height:150px;background-size:cover;background-position:center}
.vermas2 .vm-key{display:inline-block;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);border:1.5px solid var(--tinta);border-radius:4px;padding:10px 18px;margin-top:16px;font-weight:700}
.vermas2:active .vm-key{background:var(--tinta);color:var(--cal)}
.vermas{width:100%;background:none;border:1px solid rgba(244,246,242,.25);color:var(--cal);border-radius:4px;padding:12px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;cursor:pointer;margin-bottom:16px}
.lista li .x{background:none;border:none;color:var(--rosa);font-size:16px;cursor:pointer;padding:4px 8px}
.vacio{opacity:.6;font-size:15px;font-style:italic}

dialog.x{background:var(--cal);color:var(--tinta);border:none;border-radius:6px;padding:22px;max-width:420px;width:calc(100% - 40px);font-family:'Newsreader',serif}
dialog::backdrop{background:rgba(14,42,87,.75)}
dialog h2{font-family:'Bricolage Grotesque',sans-serif;margin:0 0 6px;font-size:22px}
dialog p{font-size:14px;line-height:1.55;margin:0 0 16px}
dialog input{width:100%;padding:11px;font-family:'Space Mono',monospace;font-size:13px;border:1px solid rgba(14,42,87,.3);border-radius:4px;margin-bottom:14px}
dialog .go{background:var(--cobalto);color:var(--cal);font-size:16px;padding:13px}
dialog .fila{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:14px}
dialog .fila .seg{border-color:rgba(14,42,87,.3)}
dialog .fila .seg button{color:var(--tinta)}
dialog .fila .seg button.on{background:var(--tinta);color:var(--cal)}
.close{background:none;border:none;color:var(--cobalto);font-family:'Space Mono',monospace;font-size:12px;text-decoration:underline;cursor:pointer;padding:10px 0 0}
details summary{cursor:pointer;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalto);margin-bottom:10px}
button:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*:not(.cg):not(.cred-mas):not(#credito-chip){transition:none!important;animation:none!important}}   /* the credit beat has its own reduced variants */

/* ---------- v3 design ---------- */
.keys{display:inline-flex;gap:4px}
.keys button,.key{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;height:30px;padding:0 14px;border:1px solid rgba(244,246,242,.3);border-radius:2px;background:transparent;color:var(--cal);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.keys button.off{opacity:.45}
.keys button.on{background:var(--cal);color:var(--tinta);border-color:var(--cal);font-weight:700}
h1.marca{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:46px;letter-spacing:-.015em;line-height:1;margin:14px 0 6px;font-variation-settings:'opsz' 72}
h1.marca em{font-style:italic;font-weight:400;color:var(--oro)}
/* .libre forces upright, but the wordmark's Tuesday is italic - keep it, slices included */
h1.marca .libre, h1.marca .libre::before, h1.marca .libre::after{font-style:italic;font-weight:400}
.sub{font-size:17px;font-style:italic;color:rgba(244,246,242,.88);margin:0 0 18px}
.nivelrow{display:flex;align-items:center;gap:12px;margin:4px 0 6px}
.nivelrow .label{margin:0}
#picker{border:none;padding:0;margin:0}
.continuar{margin-top:14px;background:rgba(244,246,242,.07);border:1px solid rgba(244,246,242,.18);border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--cal);cursor:pointer;text-align:left;font-family:'Newsreader',serif}
.continuar .k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.continuar .t{font-size:18px;margin-top:4px}
.continuar .r{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.62)}
.grupo{margin:22px 0 2px}
/* How it works: the numbered membership headers carry the page, so they lead in gold */
.p-como .grupo{color:var(--oro);opacity:1;font-weight:700}
.fila{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;border:none;border-bottom:1px solid rgba(244,246,242,.16);background:none;color:var(--cal);cursor:pointer;padding:0;text-align:left}
.fila .n{font-family:'Newsreader',serif;font-size:18px}
.fila .s{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,242,.62);display:flex;align-items:center;gap:6px}
.fila .s.listo{color:rgba(244,246,242,.6)}
.fila .s.fetch::after{content:"\2193";color:rgba(232,163,61,.65);font-weight:700;font-size:13px}
.fila .s.done .dot{width:14px;height:2px;border-radius:1px;background:rgba(244,246,242,.38)}
.fila.hecha-fila .n{color:rgba(244,246,242,.4)}
.fila .s.cargando{color:var(--oro)}
.puntos span{opacity:0;animation:punto 1.2s infinite}
.puntos span:nth-child(2){animation-delay:.2s}
.puntos span:nth-child(3){animation-delay:.4s}
@keyframes punto{0%,60%{opacity:0}30%{opacity:1}}
.fila .s .dot{width:6px;height:6px;border-radius:50%;background:var(--verde);display:inline-block}
.fila:disabled{opacity:.4;cursor:default}
.barra{background:none;border:none;padding:0;margin:0 0 6px;min-height:44px;gap:8px;align-items:center}
.barra .volver{width:44px;height:44px;margin-left:-12px;display:flex;align-items:center;justify-content:center;color:var(--cal)}
.barra .bt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.barra .eyebrow2{display:block;max-width:100%;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,246,242,.62);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .barra-tema{display:block;font-size:20px;line-height:1;flex:none}
.nivelpill{border-radius:4px;padding:5px 9px;font-weight:700}
.modo{position:sticky;top:var(--barra-alta);z-index:5;margin:4px -16px 12px;padding:8px 16px;min-height:30px;background:var(--tinta);box-shadow:0 8px 16px -8px rgba(0,0,0,.35)}
.modo .keys button{height:30px;padding:0 10px}
.actualizar{border:none;padding:0;margin:0 0 12px;color:var(--oro)}
.actualizar .slow{border-color:var(--oro);color:var(--oro);border-radius:2px;padding:6px 10px}
.narra{margin:2px 0 14px}
.bloque{background:var(--cal);border-radius:6px;overflow:hidden;margin-bottom:12px;position:relative;background-size:cover;background-position:center}
.bloque img{display:block;width:100%;height:100%;object-fit:cover;opacity:.85}
.bloque.cargando img{animation:pulso-lento 3.2s ease-in-out infinite}
.bloque::before,.bloque::after{content:"";position:absolute;left:0;right:0;z-index:2;background:inherit;background-size:cover;background-position:center;opacity:.85;pointer-events:none}
.bloque::before{top:28%;height:9%;animation:tear1 2.8s steps(1,end) infinite}
.bloque::after{top:61%;height:6%;animation:tear2 3.7s steps(1,end) infinite .9s}
@keyframes pulso-lento{50%{opacity:.6}}
.carg-txt{position:absolute;left:12px;bottom:10px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);background:rgba(244,246,242,.75);padding:4px 8px;border-radius:2px;opacity:.85;animation:pulso-txt 2.4s ease-in-out infinite;pointer-events:none}
@keyframes pulso-txt{50%{opacity:.45}}
@keyframes tear1{0%,86%{transform:none;opacity:0}87%{transform:translateX(-14px);opacity:.85}90%{transform:translateX(9px)}93%{transform:translateX(-4px)}96%,100%{transform:none;opacity:0}}
@keyframes tear2{0%,78%{transform:none;opacity:0}79%{transform:translateX(11px);opacity:.85}83%{transform:translateX(-7px)}86%,100%{transform:none;opacity:0}}
@media (prefers-reduced-motion:reduce){.bloque::before,.bloque::after{display:none}}
.card{border-left:none;padding:22px 20px 6px;border-radius:6px}
.num{display:flex;align-items:center;gap:8px;letter-spacing:.12em;color:var(--cobalto)}
.num .g{opacity:.45;letter-spacing:.06em}
.genero{color:rgba(21,42,94,.55)}
.word{background:none;color:inherit;border-bottom:1.5px dotted rgba(21,42,94,.4);padding:0;border-radius:0}
.word.on{background:none;color:var(--cobalto);border-bottom-color:var(--cobalto)}
.word.sabida{border-bottom-color:rgba(21,42,94,.18)}
.glossslot{display:none}
.glossslot.on{display:inline}
.gloss-en{color:var(--cobalto);font-size:.92em}   /* 7.2:1 on cream; gold was 1.98:1 */
.gloss-star{border:none;background:none;color:var(--oro);font-size:1.05em;line-height:1;cursor:pointer;padding:0 2px;vertical-align:-0.06em}
.acciones{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:14px}
.acciones .cl{display:flex;gap:6px}
.acciones .cap{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(21,42,94,.5);margin-top:6px}
.acciones .der{text-align:right}
.acciones .der .cl{justify-content:flex-end}
.card .key{border-color:rgba(21,42,94,.3);color:var(--tinta);padding:0 10px;height:30px}
.card .key.primario{background:var(--cobalto);border-color:var(--cobalto);color:#fff;font-weight:700}
.card .key.on{background:var(--tinta);border-color:var(--tinta);color:var(--cal)}
.card .key:disabled{opacity:.4}
.card .key .stop{display:none}
.card .key.on .lbl{display:none}
.card .key.on .stop{display:inline}
.etq{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rosa);margin:14px 0 6px}
.spin{width:10px;height:10px;border:1.5px solid rgba(21,42,94,.25);border-top-color:var(--tinta);border-radius:50%;display:inline-block;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.card .key:disabled{opacity:1;color:rgba(21,42,94,.6)}
.regla{display:flex;align-items:center;gap:10px;margin:14px 0}
.regla span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--tinta);opacity:.3;line-height:1}
.regla i{flex:1;height:1px;background:rgba(21,42,94,.12)}
.pregunta{margin:0;border:none;padding:0}
.pregunta input{border-color:rgba(21,42,94,.25);border-radius:4px}
.pregunta button[type=submit]{border-radius:4px;background:transparent;border:1px solid rgba(21,42,94,.3);color:var(--tinta)}
.quiz{margin:0;border:none;padding:0}
.quiz .btns{gap:6px}
.quiz .btns button{font-size:10px;letter-spacing:.12em;text-transform:uppercase;height:34px;padding:0;border-radius:2px;border:1px solid rgba(21,42,94,.3);color:var(--tinta);background:transparent}
.quiz .btns button.sel{background:var(--tinta);border-color:var(--tinta);color:var(--cal);font-weight:700}
.quiz .btns button.bien,.quiz .btns button.mal{background:transparent;border-color:rgba(21,42,94,.3);color:var(--tinta)}
.quiz .btns button.sel.bien,.quiz .btns button.sel.mal{background:var(--tinta);border-color:var(--tinta);color:var(--cal)}
.quiz .res{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0}
.quiz .res.ok{color:var(--cobalto)} .quiz .res.ko{color:var(--rosa)}
.pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pie .src{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(14,42,87,.7);text-decoration:none;white-space:nowrap}
.pie .hecho{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#3A7D63;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 0}
.pie .src .ar{font-size:13px;line-height:1}
.pie .hecho.ico{color:rgba(14,42,87,.7)}
.pie .hecho.ico svg{display:block}
.marcar{display:none}
.peli,.fuente{margin-top:12px}
.fin{border:1px dashed rgba(244,246,242,.25);border-radius:6px;padding:26px 20px;text-align:left;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.fin small{font-family:'Newsreader',serif;text-transform:none;letter-spacing:0;font-size:17px;opacity:.7;margin-top:8px}
.glosa{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));margin:0 auto;max-width:608px;background:var(--cal);color:var(--tinta);border-radius:6px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:19;transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-family:'Newsreader',serif}
.glosa.on{opacity:1;transform:none;pointer-events:auto}
.glosa .w{flex:1;font-size:16px;min-width:0}
.glosa .w b{font-weight:600}
.glosa .w span{opacity:.7}
.glosa .mini{width:30px;height:30px;border-radius:50%;border:1px solid rgba(21,42,94,.3);background:transparent;color:var(--tinta);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.glosa .mini.on{background:var(--oro);border-color:var(--oro)}
.hechas-pie{text-align:left;padding:10px 0}
.toast{background:rgba(244,246,242,.92);border-radius:6px}
dialog .seg,dialog .fila .seg{display:inline-flex;gap:4px;border:none;border-radius:0;overflow:visible}
dialog .seg button{font-size:10px;letter-spacing:.12em;text-transform:uppercase;height:30px;padding:0 12px;border:1px solid rgba(21,42,94,.3);border-radius:2px;color:var(--tinta);background:transparent}
dialog .seg button.on{background:var(--tinta);color:var(--cal);border-color:var(--tinta);font-weight:700}
.fuentes{max-height:260px;overflow:auto;margin-bottom:14px}
.fuentes .ft{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(21,42,94,.6);margin:10px 0 2px}
.fuentes .fd{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.fuentes .dom{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;border:1px solid rgba(21,42,94,.25);border-radius:2px;padding:4px 6px;display:inline-flex;align-items:center;gap:6px;color:var(--tinta)}
.fuentes .dom.off{opacity:.45;text-decoration:line-through}
.fuentes .dom.mio{border-color:var(--cobalto);color:var(--cobalto)}
.fuentes .dom button{background:none;border:none;padding:0;cursor:pointer;font-size:11px;color:inherit;line-height:1}
.fuentes form{display:flex;gap:6px;margin:2px 0 8px}
.fuentes input{flex:1;min-width:0;padding:7px 9px;font-family:'Space Mono',monospace;font-size:11px;border:1px solid rgba(21,42,94,.25);border-radius:2px;margin:0}
.fuentes form button{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:0 10px;border:1px solid rgba(21,42,94,.3);border-radius:2px;background:transparent;color:var(--tinta);cursor:pointer}
.selidioma{font-family:'Space Mono',monospace;font-size:11px;padding:6px 8px;border:1px solid rgba(21,42,94,.3);border-radius:2px;background:#fff;color:var(--tinta)}
#boot{position:fixed;inset:0;background:var(--tinta);z-index:99;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease}
#boot.off{opacity:0;pointer-events:none}
.boot-m{position:relative;font-family:'Newsreader',serif;font-size:34px;color:var(--cal)}
.boot-m em{font-style:italic}
.boot-m::before,.boot-m::after{content:attr(data-t);position:absolute;left:0;top:0;color:var(--cal);opacity:0;font-style:normal}
.boot-m::before{animation:boot-a .75s steps(1) 1}
.boot-m::after{animation:boot-b .75s steps(1) 1}
@keyframes boot-a{18%{opacity:1;clip-path:inset(0 0 55% 0);transform:translateX(4px)}30%{opacity:1;clip-path:inset(10% 0 50% 0);transform:translateX(-3px)}38%,100%{opacity:0}}
@keyframes boot-b{22%{opacity:1;clip-path:inset(60% 0 0 0);transform:translateX(-4px)}34%{opacity:1;clip-path:inset(45% 0 12% 0);transform:translateX(5px)}42%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.boot-m::before,.boot-m::after{animation:none}}
#hoja{position:fixed;inset:0;z-index:80}
#hoja[hidden]{display:none}
.hoja-fondo{position:absolute;inset:0;background:rgba(21,42,94,.55)}
.hoja-panel{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--cal);color:var(--tinta);border-radius:14px 14px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.35);animation:hoja-sube .28s cubic-bezier(.2,.8,.2,1)}
@keyframes hoja-sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.hoja-x{position:absolute;top:10px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:rgba(21,42,94,.5);cursor:pointer;padding:6px 10px}
.hoja-eye{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,42,94,.55);margin:0 0 8px}
.hoja-h{font-family:'Newsreader',serif;font-size:23px;line-height:1.25;margin:0 0 6px}
.hoja-p{font-family:'Newsreader',serif;font-size:15px;color:rgba(21,42,94,.7);margin:0 0 14px;font-style:italic}
.hoja-panel .sin{background:rgba(21,42,94,.06);color:var(--tinta);border-color:rgba(21,42,94,.3)}
.hoja-panel .sin::placeholder{color:rgba(21,42,94,.45)}
.hoja-panel .key{background:var(--tinta);color:var(--cal);border-color:var(--tinta);width:100%;height:46px;font-size:12px;font-weight:700;margin-top:4px}
.hoja-panel .snote{color:rgba(21,42,94,.7)}
.hoja-fin{font-family:'Newsreader',serif;font-size:20px;text-align:center;margin:10px 0}
.hoja-nota{font-family:'Newsreader',serif;font-style:italic;font-size:13px;color:rgba(21,42,94,.6);margin:14px 0 0;text-align:center}
.hoja-nota a{color:var(--tinta)}
.bienvenida{background:var(--cal);color:var(--tinta);border-radius:6px;padding:16px 18px;margin-bottom:12px;font-family:'Newsreader',serif;font-size:18px;text-align:center}
#gate{position:fixed;inset:0;background:var(--tinta);z-index:50;overflow:auto;padding:calc(28px + env(safe-area-inset-top)) 24px 40px}
#gate[hidden]{display:none}
.gate-in{max-width:420px;margin:0 auto}
.qr{background:var(--cal);border-radius:6px;padding:18px;width:200px;margin:14px 0 10px}
.gate-h{font-family:'Newsreader',serif;font-size:23px;line-height:1.3;margin:22px 0 8px}
.gate-sub{font-size:15px;color:rgba(244,246,242,.75);line-height:1.5;margin:0 0 18px}
.gate-sec{text-align:center;margin-top:10px;font-size:18px;color:rgba(244,246,242,.85)}
.twitch{display:inline-block;font-style:normal;animation:tw 7s steps(1) infinite}
@keyframes tw{0%,93%{transform:none}94%{transform:translate(1px,-1px)}95%{transform:translate(-1px,1px)}96%,100%{transform:none}}
.libre{position:relative;display:inline-block;font-style:normal;color:var(--oro)}
.libre::before,.libre::after{content:attr(data-t);position:absolute;left:0;top:0;color:var(--oro);opacity:0;pointer-events:none}
.libre::before{animation:corte-a 5s steps(1) infinite}
.libre::after{animation:corte-b 5s steps(1) infinite}
@keyframes corte-a{0%,90%{opacity:0}91%{opacity:1;clip-path:inset(0 0 55% 0);transform:translateX(2px)}93%{opacity:1;clip-path:inset(15% 0 45% 0);transform:translateX(-2px)}94%,100%{opacity:0}}
@keyframes corte-b{0%,90%{opacity:0}91.5%{opacity:1;clip-path:inset(60% 0 0 0);transform:translateX(-2px)}93%{opacity:1;clip-path:inset(40% 0 15% 0);transform:translateX(3px)}94.5%,100%{opacity:0}}
.gate-acc{text-align:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,246,242,.85);margin:0 0 18px}
.gate-acc b{color:var(--oro);font-weight:400;margin:0 3px}
.paso-g{display:flex;gap:12px;align-items:baseline;font-family:'Newsreader',serif;font-size:16px;padding:7px 0;color:rgba(244,246,242,.9)}
.paso-g span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--oro)}
.unete{background:var(--cal);color:var(--tinta);border-radius:6px;padding:20px 18px;margin-bottom:12px;text-align:center}
.unete .ue{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,42,94,.55)}
.unete p{font-family:'Newsreader',serif;font-size:17px;line-height:1.5;margin:10px 0 14px}
.unete button{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:var(--tinta);color:var(--cal);border:none;border-radius:4px;padding:12px 22px;cursor:pointer}
.sincredito{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--oro);margin:10px 0 0;line-height:1.5}
.sincredito .lnk{background:none;border:none;color:var(--oro);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.p-join,.p-como,.p-cuenta,.p-contacto{display:none}
#vista-plan[data-mode="join"] .p-join{display:block}
#vista-plan[data-mode="como"] .p-como{display:block}
#vista-plan[data-mode="cuenta"] .p-cuenta{display:block}
#vista-plan[data-mode="contacto"] .p-contacto{display:block}
#vista-plan[data-mode="contacto"] > .bloque{display:none}
/* Secondary form actions. Mono + gold, not italic serif: the serif reads as prose and
   made these look like the footnotes below them rather than controls. Rank below .go
   comes from having no fill, no border and shrink-wrapped width. */
.lnk-re{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;margin:0;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--oro);text-decoration:underline;text-decoration-color:rgba(232,163,61,.4);text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:text-decoration-color .15s ease,opacity .15s ease}
.lnk-re:hover,.lnk-re:focus-visible{text-decoration-color:var(--oro)}
.lnk-re:focus-visible{outline:1px solid rgba(232,163,61,.6);outline-offset:4px;border-radius:2px}
.lnk-re:active{opacity:.6}
/* One slot, one link: the invite reveal belongs to step 1, Resend to step 2. */
.acc-aux{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin:2px 0 0}
#acc-reenviar{display:none}
#acc-paso2:not([hidden]) ~ .acc-aux #acc-ref-abrir{display:none}
#acc-paso2:not([hidden]) ~ .acc-aux #acc-reenviar{display:inline-flex}
.gate-lang{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 24px 6px 9px;border:1px solid rgba(244,246,242,.28);border-radius:3px;color:rgba(244,246,242,.85);appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E8A33D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center}
.inst-tabs{display:flex;gap:0;margin:0 0 14px;border-bottom:1px solid rgba(244,246,242,.18)}
.inst-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:rgba(244,246,242,.5);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:11px 4px;cursor:pointer;margin-bottom:-1px}
.inst-tab.on{color:var(--oro);border-bottom-color:var(--oro)}
.inst-step{display:flex;gap:10px;align-items:baseline;margin:0 0 8px;font-family:'Newsreader',serif;font-size:16px;color:rgba(244,246,242,.9)}
.inst-step b{font-family:'Space Mono',monospace;font-size:10px;color:var(--oro);border:1px solid rgba(232,163,61,.5);border-radius:50%;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-weight:400}
/* app footer: same links as the site, quiet enough to stay out of the reading experience */
.pie-app{max-width:640px;margin:34px auto 0;padding:18px 20px 0;position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.5)}
.pie-app::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:#0E1D42;border-top:1px solid rgba(244,246,242,.14);z-index:-1}
.pie-app b{font-family:'Newsreader',serif;font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:rgba(244,246,242,.75)}
/* the story someone was sent, marked just long enough to find it */
.card.llegada{box-shadow:0 0 0 2px var(--oro)}
@media (prefers-reduced-motion:no-preference){.card.llegada{transition:box-shadow .4s}}
/* the card form, mounted in the app rather than a redirect away from it */
.pago-velo{position:fixed;inset:0;z-index:60;background:rgba(14,29,66,.72);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:20px 12px calc(20px + env(safe-area-inset-bottom))}
.pago-velo[hidden]{display:none}
.pago-cargando{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(21,42,94,.5);text-align:center;padding:56px 0;margin:0}
.pago{position:relative;width:100%;max-width:460px;background:var(--cal);border-radius:6px;padding:14px 12px 12px;margin-top:24px}
.pago-x{position:absolute;top:6px;right:8px;z-index:1;background:none;border:none;font-size:24px;line-height:1;color:rgba(21,42,94,.5);cursor:pointer;padding:4px 8px}
.pie-app-brand{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pie-legal{flex-basis:100%;margin-top:8px;padding:10px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(244,246,242,.16);text-align:center;font-size:9px;letter-spacing:.12em;color:rgba(244,246,242,.35)}
.pie-legal a{color:inherit}
.pie-app-links{display:flex;flex-direction:column;gap:6px;text-align:right}
.pie-app a{color:rgba(244,246,242,.5);text-decoration:none}
.pie-app a:active{color:var(--oro)}
.gate-det{margin-top:26px}
.gate-det details{border-top:1px solid rgba(244,246,242,.16)}
.gate-det summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;min-height:44px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.75)}
.gate-det summary::-webkit-details-marker{display:none}
.gate-det .mas-i{font-size:15px;transition:transform .25s ease}
.gate-det details[open] .mas-i{transform:rotate(45deg)}
.gate-det p{font-family:'Newsreader',serif;font-size:16px;line-height:1.5;margin:0 0 16px;color:rgba(244,246,242,.9)}
.gate-det details.pulso{animation:borde-p 1s ease 1}
.gate-pie{margin-top:34px;border-top:1px solid rgba(244,246,242,.16);padding-top:14px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.5);display:flex;justify-content:space-between}
.gate-pie a{color:rgba(244,246,242,.5)}
@keyframes borde-p{30%{border-top-color:var(--oro)}}
.qr svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.gate-img{height:200px;border-radius:4px;background:var(--cal);margin:22px 0 6px;position:relative;overflow:hidden}
.gate-img .gi{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.6s ease}
.gate-img .gi.on{opacity:1}
.gate-tags{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;font-family:'Space Mono',monospace;font-size:clamp(7px,2.2vw,10px);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta);background:rgba(244,246,242,.78);padding:4px 8px;border-radius:2px;white-space:nowrap;max-width:none}
.pantalla{padding-bottom:40px}
.pantalla[hidden]{display:none}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-bottom:1px solid rgba(244,246,242,.16);width:100%;background:none;border-top:none;border-left:none;border-right:none;color:var(--cal);text-align:left;padding:6px 0;cursor:default}
.srow.link{cursor:pointer}
.scol{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-bottom:1px solid rgba(244,246,242,.16)}
.sl{font-family:'Newsreader',serif;font-size:17px}
.sv{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,242,.7)}
.sv.rosa{color:#E08AA0}
.snote{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:rgba(244,246,242,.6);margin:8px 0 4px;line-height:1.5}
.sel{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:0 30px 0 12px;height:30px;border:1px solid rgba(244,246,242,.3);border-radius:2px;color:var(--cal);appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E8A33D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center}
.selx{position:relative;display:inline-flex;align-items:center;min-width:120px;max-width:100%;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 30px 9px 12px;border:1px solid rgba(244,246,242,.3);border-radius:3px;color:var(--cal);cursor:pointer;user-select:none;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E8A33D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center}
.selx.w100{display:flex;width:100%}
.selx.abierto{border-color:var(--oro)}
.selx-menu{position:absolute;right:0;left:auto;top:calc(100% + 5px);z-index:60;min-width:100%;width:max-content;max-width:min(78vw,340px);background:var(--tinta);border:1px solid var(--oro);border-radius:5px;max-height:min(60vh,320px);overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.selx-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(244,246,242,.08);color:var(--cal);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:13px 14px;cursor:pointer;white-space:nowrap}
.selx-menu button:last-child{border-bottom:none}
.selx-menu button[aria-selected="true"]{color:var(--oro)}
.selx-menu button[aria-selected="true"]::after{content:"●";font-size:8px}
.selx-menu button:active{background:rgba(232,163,61,.14)}
.sel option{background:var(--tinta);color:var(--cal)}
.sin{width:100%;padding:10px 12px;font-family:'Newsreader',serif;font-size:16px;border:1px solid rgba(244,246,242,.25);border-radius:4px;background:rgba(244,246,242,.06);color:var(--cal);margin:0 0 8px}
.sin::placeholder{color:rgba(244,246,242,.4)}
.keys.wrap{flex-wrap:wrap;gap:6px}
.keys.wrap button{height:30px;padding:0 12px}
.keys.wrap button.auto{opacity:.55}
.plan-h{font-family:'Newsreader',serif;font-size:24px;line-height:1.3;margin:18px 0 8px}
/* How-it-works legend: the real control on the left, a few words on the right. Story
   controls live on cream cards, so those specimens sit on a cream swatch; the chip and
   the keys are shown as they are on navy. Specimens are inert. */
.como-l{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid rgba(244,246,242,.08)}
.como-l:last-of-type{border-bottom:0}
.como-ej{flex:0 0 auto;display:inline-flex;align-items:center;min-width:96px;pointer-events:none}
.como-ej.tarjeta{background:var(--cal);color:var(--tinta);border-radius:4px;padding:5px 10px;font-family:'Newsreader',serif;font-size:15px;line-height:1.3}
.como-ej.tarjeta .word{background:none;color:inherit;border-bottom:1.5px dotted rgba(21,42,94,.4);padding:0;border-radius:0}
.como-ej.tarjeta .gloss-en{margin-left:4px}
.como-ej.tarjeta .gloss-star{color:var(--oro);font-size:1.05em;padding:0 2px}
.como-ej.tarjeta .hecho{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#3A7D63}
.como-ej .gear{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:1px solid rgba(244,246,242,.25);border-radius:999px;font-family:'Space Mono',monospace;font-size:14px}
.como-ej .keys{display:inline-flex;gap:4px}
.como-ej .keys span,.como-ej .key{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;height:30px;padding:0 12px;border:1px solid rgba(244,246,242,.3);border-radius:2px;color:var(--cal);display:inline-flex;align-items:center}
.como-ej .keys span.on{background:var(--cal);color:var(--tinta);border-color:var(--cal);font-weight:700}
.como-t{font-family:'Newsreader',serif;font-size:16px;line-height:1.5;color:var(--cal)}
.plan-p{font-family:'Newsreader',serif;font-size:17px;line-height:1.55;margin:0 0 12px}
.fila .s.plus{color:var(--oro)}
.avanzado{margin-top:22px}
#menu-gear{position:absolute;top:100%;right:0;z-index:40;background:var(--cal);border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.35);overflow:hidden;min-width:190px}
#menu-gear button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);padding:14px 16px}
#menu-gear button + button{border-top:1px solid rgba(21,42,94,.15)}
#menu-gear button:active{background:rgba(21,42,94,.08)}
#aj-resto.bloqueado{opacity:.45;pointer-events:none;user-select:none}
.avanzado summary{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.55);cursor:pointer;margin-bottom:8px;list-style:none}
.avanzado .key{border-color:rgba(244,246,242,.3);color:var(--cal)}
.fuentes{max-height:none;overflow:visible;color:var(--cal)}
.fuentes .ft{color:rgba(244,246,242,.6);margin:18px 0 6px}
.fuentes .dom{border-color:rgba(244,246,242,.3);color:var(--cal)}
.fuentes .dom.mio{border-color:var(--oro);color:var(--oro)}
.fuentes input{background:rgba(244,246,242,.06);color:var(--cal);border-color:rgba(244,246,242,.25)}
.fuentes input::placeholder{color:rgba(244,246,242,.4)}
.fuentes form button{border-color:rgba(244,246,242,.3);color:var(--cal)}
.b-otra,.b-med,.b-se,.b-ver{border-radius:6px!important;font-family:'Space Mono',monospace!important;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase}
.b-otra{background:var(--cal)!important;border:1px solid rgba(21,42,94,.14)!important;color:var(--rosa)!important}
.b-med{background:var(--cal)!important;border:1px solid rgba(21,42,94,.14)!important;color:var(--oro)!important}
.b-se{background:var(--cal)!important;border:1px solid rgba(21,42,94,.14)!important;color:var(--tinta)!important}
.b-ver{background:var(--cobalto)!important}
.flash{border-left:none;border-radius:6px;background-color:var(--cal);background-image:repeating-conic-gradient(var(--cal) 0 25%, transparent 0 50%), radial-gradient(circle, rgba(21,42,94,.28) .6px, transparent .8px);background-size:28px 28px, 3px 3px}
/* ============================================================
   DESKTOP OVERRIDES — every wide-screen rule lives in this one block.
   Nothing above this line is desktop-aware, so mobile and desktop
   cannot break each other. Add wide-screen fixes here only.
   ============================================================ */
@media (min-width:720px){
  /* The engraving blocks are sized in px for a phone column. At 640px wide the same
     height crops tall portraits to a middle band, so show them whole instead. */
  .bloque{height:300px!important;background-size:contain;background-repeat:no-repeat}
  .bloque img{object-fit:contain}
  .bloque.cargando::before,.bloque.cargando::after{background-size:contain;background-repeat:no-repeat}
  .gate-img{height:300px}
  .gate-img .gi{background-size:contain}
  .vermas2 .vm-img{height:220px;background-size:contain;background-repeat:no-repeat}
  .skeleton{height:300px}
  /* the tear slices read as noise when they are 640px wide: keep them to the image itself */
  .bloque.cargando::before{height:7%}
  .bloque.cargando::after{height:5%}
}
@media (prefers-reduced-motion:reduce){.twitch,.libre::before,.libre::after{animation:none}}

/* Hit areas. The visuals stay as they are; the tappable box grows to 44px through a
   transparent pseudo-element, so a miss on a 30px key or a 20px star still lands. */
.gear::before,.keys button::before,.key::before,.gloss-star::before,.fuentes .dom button::before,.lista li .x::before,.pie .hecho::before{content:"";position:absolute;inset:-7px}
.keys button,.key,.gloss-star,.fuentes .dom button,.lista li .x,.pie .hecho{position:relative}
.barra-palabras{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin:6px 0 0}

/* Where there is no voice, the audio row says so instead of offering a Play that lies. */
.sinvoz{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(21,42,94,.55);display:inline-flex;align-items:center;height:30px}
.idr-nota{font-family:'Newsreader',serif;font-style:italic;font-size:13px;color:#8a2d47;margin:-4px 0 6px;line-height:1.4}

/* The question box as a specimen: the field and its ? key, as on the card. */
.como-ej.preg-ej{gap:6px;padding:4px 4px 4px 10px}
.preg-in{font-family:'Newsreader',serif;font-style:italic;font-size:13px;color:rgba(21,42,94,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.preg-b{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--cal);background:var(--tinta);border-radius:3px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

/* Three ways to read: a label column and a line each, in the legend's rhythm. */
.tier{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid rgba(244,246,242,.08);align-items:baseline}
.tier:last-of-type{border-bottom:0}
.tier-k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.tier p{font-family:'Newsreader',serif;font-size:16px;line-height:1.5;margin:0;color:var(--cal)}

/* The one specimen that is live. */
.como-ej.tarjeta.viva{pointer-events:auto;cursor:pointer}
.como-ej.tarjeta.viva .gloss-star{cursor:pointer}

/* One grid for the whole legend: the specimen column is as wide as the widest specimen,
   so every line of text starts on the same edge. Rows are display:contents so the grid
   sees their cells; the rule beneath each row lives on the cells. */
.como-legend{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;column-gap:14px;align-items:center}
.como-l{display:contents}
.como-l>.como-t{padding:12px 0;border-bottom:1px solid rgba(244,246,242,.08);align-self:center}
.como-l>.como-ej{margin:12px 0;align-self:center;justify-content:center}   /* margin, not padding: the card keeps its own 5px 10px inside */
.como-l:last-child>.como-ej,.como-l:last-child>.como-t{border-bottom:0}
.como-ej{min-width:0}
.como-ej.tarjeta{width:max-content;max-width:min(220px,62vw);overflow:hidden;white-space:nowrap}   /* cards hug their content; a long translation still cannot eat the text column */
.como-ej.tarjeta>*{flex-shrink:0}                         /* the card is as wide as its contents, never narrower */
.preg-in{max-width:68px}

/* Google door on the join card: same shape as the primary button, cream on navy, the G in colour */
.go-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--cal);color:var(--tinta);border:1px solid var(--cal);margin-bottom:0}
.go-google:disabled{opacity:.6}
.acc-o{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,242,.55)}
.acc-o::before,.acc-o::after{content:"";flex:1;height:1px;background:rgba(244,246,242,.18)}
/* one primary: when Google is on offer, the email button steps back to an outline */
#acc-google:not([hidden]) ~ #acc-form .go{background:transparent;color:var(--cal);border:1px solid rgba(244,246,242,.5)}

/* Account: the reader's picture as a two-ink dither stamp, with the occasional slip of a bad signal */
.acc-quien{display:inline-flex;align-items:center;gap:10px}
.avatar{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:3px;background:var(--av) center/cover;image-rendering:pixelated;overflow:hidden}
.avatar::before{content:"";position:absolute;inset:0;background:var(--av) center/cover;image-rendering:pixelated;opacity:0;animation:av-glitch 7s steps(1,end) infinite}
@keyframes av-glitch{0%,92%{opacity:0;clip-path:none;transform:none}93%{opacity:1;clip-path:inset(12% 0 62% 0);transform:translateX(-3px)}94.5%{opacity:1;clip-path:inset(58% 0 18% 0);transform:translateX(3px)}96%{opacity:1;clip-path:inset(34% 0 44% 0);transform:translateX(-2px);filter:invert(1)}97%,100%{opacity:0;clip-path:none;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.avatar::before{animation:none}}

/* country suggestions under the birthplace field */
.srow,.idr,.scol{position:relative}
.scol .sug{left:0;right:auto}
.sug{position:absolute;right:0;top:calc(100% - 6px);min-width:210px;max-width:92%;background:#fff;color:var(--tinta);border:1px solid rgba(21,42,94,.35);border-radius:3px;list-style:none;margin:0;padding:4px 0;z-index:6;box-shadow:0 10px 26px rgba(0,0,0,.28);text-align:left}
.sug li{padding:10px 12px;font-family:'Newsreader',serif;font-size:15px;line-height:1.2;cursor:pointer}
.sug li:hover{background:rgba(21,42,94,.08)}
.sin[type=search]{-webkit-appearance:none;appearance:none}

#apikey{-webkit-text-security:disc}   /* masked like a password without being one */

/* Settings: quick links to the sections, pills so they read as navigation, not options */
.aj-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin:0 0 6px;padding:10px 0 8px;position:sticky;top:var(--barra-alta,56px);z-index:5;background:var(--tinta);border-bottom:1px solid rgba(244,246,242,.12)}
.aj-nav button{border:0;border-bottom:1px solid rgba(232,163,61,.35);border-radius:0;height:auto;padding:4px 0 5px;background:none;color:var(--oro);opacity:.8}   /* the app's link look: gold, faint underline */
.aj-nav button.cur{opacity:1;border-bottom:2px solid var(--oro);padding-bottom:4px}
.aj-nav button{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.aj-nav button:active{opacity:1}
.grupo[id]{scroll-margin-top:calc(var(--barra-alta, 56px) + 54px)}   /* top bar plus the sticky index, so the heading lands just under both */

#aj-build{font-family:'Space Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.1em;opacity:.5}

/* countries: the keys and the search share one line; the field takes whatever room the keys leave */
.fila-pais{display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:relative}
.fila-pais .keys{justify-content:flex-start}
.fila-pais .sin{flex:1 1 96px;min-width:96px;width:auto;margin:0;height:30px;padding:0 10px;font-size:14px}
.fila-pais .sug{left:auto;right:0}

/* a quiet beta next to the wordmark */
.marca .beta{font-family:'Space Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);opacity:.7;vertical-align:top;position:relative;top:.55em;margin-left:8px}

.idr-nota.invitado{color:#8a6a1f;font-style:normal;font-family:'Newsreader',serif;font-size:15px;margin:0 0 12px;line-height:1.4}   /* invited: warm, readable on the cream card */

.invitado-home{background:var(--cal);color:var(--tinta);border-radius:6px;padding:16px 18px;margin:0 0 16px;text-align:center;font-family:'Newsreader',serif;font-size:17px;line-height:1.4}   /* its own class: the story loader sweeps every .unete away */
.invitado-home button{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--tinta);color:var(--cal);border:0;border-radius:4px;padding:12px 22px;cursor:pointer}

.invitado-home{position:sticky;top:calc(var(--barra-alta,56px) + 6px);z-index:4;box-shadow:0 8px 24px rgba(0,0,0,.25)}   /* pinned under the top bar while the visitor scrolls, until they sign up */

/* ---------- Today prototype (?today=fixture) ----------
   Everything is off unless body carries data-today, which only the prototype sets, so normal
   readers and the marketing page (which shares this stylesheet) are untouched. Visibility is
   driven from that one attribute because pintarBarra() rewrites the hidden attribute of
   #picker, #tema-vista and #sub on every repaint. */
.today-landing,.today-head,.today-end,.today-bar{display:none}
body[data-today="landing"] .today-landing{display:block}
body[data-today="end"] .today-end{display:block}
body[data-today="regular"] .today-head{display:block}
body[data-today="regular"] .today-bar{display:block}
body[data-today="landing"] #picker,body[data-today="landing"] #tema-vista,
body[data-today="end"] #picker,body[data-today="end"] #tema-vista,body[data-today="end"] #sub{display:none!important}
body[data-today="regular"] #barra,body[data-today="regular"] #actualizar,body[data-today="regular"] #barra-palabras{display:none!important}
body[data-today="regular"] #salida .unete,body[data-today="regular"] #salida .fin,body[data-today="regular"] #salida .hechas-pie,
body[data-today="regular"] #salida .hecha,body[data-today="regular"] #salida .vermas2,body[data-today="regular"] #salida .card > .num,
body[data-today="regular"] #salida [data-share]{display:none!important}
body[data-today="regular"] #salida{padding-bottom:calc(116px + env(safe-area-inset-bottom))}
/* Reader: the bar is the bottom of the screen, so no footer under it. The place indicator is what stays pinned while
   scrolling; the stock mode row below it scrolls away and carries the story label instead of a second date. */
body[data-today="regular"] #vista-noticias:not([hidden]) ~ .pie-app{display:none}
/* Reading is the one screen without the app bar (date, word count, credit, settings): those are one tap away on the landing. The pinned row becomes the top of the screen and takes over the status-bar inset. */
body[data-today="regular"] .wrap:has(> #vista-noticias:not([hidden])) > .topbar{display:none}
body[data-today="regular"] .today-head{position:sticky;top:0;z-index:5;margin:-10px -16px 0;padding:calc(6px + env(safe-area-inset-top)) 16px 12px;background:var(--tinta)}
body[data-today="regular"] .modo{position:static;box-shadow:none;margin:0 0 12px;padding:0;flex-wrap:nowrap}
body[data-today="regular"] #fecha2{display:none}
body[data-today="regular"] .modo .today-colophon{display:block}
body[data-today="regular"] .glosa,body[data-today="regular"] .toast{bottom:calc(112px + env(safe-area-inset-bottom))}
body[data-today="regular"] .aviso-red{bottom:calc(114px + env(safe-area-inset-bottom))}

/* Top bar readouts (word count, credit) lose their outlines: they are status, not calls to action, and three pills competed with the wordmark. Same size and tap area; the word count stays gold when there is something to review. */
body[data-today] .topbar #repaso,body[data-today] .topbar #credito-chip{border-color:transparent;padding:0 6px}   /* the settings gear keeps its circle */
/* A short prototype screen keeps the footer at the bottom of the screen instead of leaving bare navy under it.
   The transparent border keeps the 34px gap above the footer; its background starts at the padding box. */
body[data-today] .wrap{min-height:calc(100dvh - 10px);display:flex;flex-direction:column}
body[data-today] .wrap > .pie-app{margin:auto 0 0;border-top:34px solid transparent}
/* Landing: the engraving takes up the slack. It shrinks a little when the screen is tight, so the page never scrolls while there is loose space, and grows to its full 16:9 when there is room. */
@media (max-width:719px){
  /* The landing is pinned to the visible screen itself, not to 100dvh: in the installed app on a phone that unit came out taller than what is visible and the page scrolled. Fixed edges are what already place the reader bar correctly. Content that truly cannot fit still scrolls inside the body. */
  body[data-today="landing"]:has(.wrap > #vista-noticias:not([hidden])){position:fixed;inset:0;overflow-y:auto;overscroll-behavior:none}
  body[data-today="landing"] .wrap:has(> #vista-noticias:not([hidden])){height:100%;min-height:0}
  body[data-today="landing"] #vista-noticias:not([hidden]){flex:1 1 auto;display:flex;flex-direction:column}
  body[data-today="landing"] .today-landing{flex:1 1 auto;display:flex;flex-direction:column}
  body[data-today="landing"] .today-landing .today-art{height:auto!important;flex:1 1 112px;max-height:calc((100vw - 32px)*9/16)}   /* base is the smallest it may get: a flex column's own minimum is built from the base size, not from min-height */
}
.today-art{margin:0}
.today-eyebrow{margin:18px 0 12px}
.today-doors{display:flex;flex-direction:column;gap:10px}
.today-door{width:100%;min-height:68px;border-radius:4px;border:1px solid rgba(244,246,242,.4);background:transparent;color:var(--cal);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif}
.today-door.pri{border-color:var(--cal);background:var(--cal);color:var(--tinta)}
.today-door-t{display:flex;flex-direction:column;gap:3px}
.today-door b{font-weight:800;font-size:21px;letter-spacing:-.01em;line-height:1.1}
.today-door small{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,246,242,.75)}
.today-door.pri small{color:rgba(21,42,94,.75)}
.today-door.flat{min-height:50px;justify-content:center;font-weight:600;font-size:17px}
.today-arrow{display:flex;align-items:center}
.today-btn{display:flex;align-items:center;justify-content:center;gap:10px}
.today-btn.ghost svg{transform:scaleX(-1)}

.today-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:0 0 6px;min-height:44px}
.today-nav .today-back{justify-self:start}
.today-nav .today-count{justify-self:end}
.today-menu-nav{display:none}
body[data-today="menu"] .today-menu-nav{display:grid}
.today-back{height:44px;margin-left:-13px;padding:0 8px;border:none;background:transparent;color:var(--cal);display:flex;align-items:center;gap:6px;cursor:pointer;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
/* One quiet mono voice in the reader header; only the progress bar carries colour. The brand stays as a small wordmark in the pinned row. */
.today-count{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,246,242,.8);white-space:nowrap}
.today-brand{height:44px;padding:0 6px;border:none;background:none;color:var(--cal);cursor:pointer;font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.today-brand em{font-style:italic;font-weight:400;color:var(--oro)}
body[data-today="regular"] .wrap:has(> #vista-noticias:not([hidden])) > #marca-home,body[data-today="end"] .wrap:has(> #vista-noticias:not([hidden])) > #marca-home{display:none}   /* the big wordmark belongs to the landing; Settings and My Words opened from here keep it */
.today-progress{display:flex;gap:4px;margin:0}
.today-progress span{flex:1;height:5px;border-radius:2px;box-sizing:border-box;border:1px solid rgba(244,246,242,.6)}
.today-progress span.read{border-color:var(--verde);background:var(--verde)}
.today-progress span.now{border-color:var(--oro);background:var(--oro)}
.today-colophon{display:none;flex:1;min-width:0;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,246,242,.7);line-height:1.4}

.today-bar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:#0E1D42;border-top:1px solid rgba(244,246,242,.14)}
.today-bar-in{max-width:640px;margin:0 auto;padding:10px 16px calc(6px + env(safe-area-inset-bottom))}
.today-bar-row{display:flex;gap:10px}
.today-btn{height:48px;border-radius:4px;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-size:16px}
.today-btn.ghost{flex:none;width:48px;padding:0;border:1px solid rgba(244,246,242,.4);background:transparent;color:var(--cal)}
.today-btn.ghost:disabled{opacity:.35;cursor:default}
.today-btn.pri{flex:1;border:none;background:var(--cal);color:var(--tinta);font-weight:800;font-size:17px}
.today-bar-links{display:flex;justify-content:space-between;align-items:center;gap:10px}
.today-link{position:relative;height:32px;border:none;background:none;padding:0;cursor:pointer;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,246,242,.8)}
.today-link.gold{color:var(--oro)}
.today-link::after{content:"";position:absolute;inset:-2px -6px -10px}

.today-art-wrap{position:relative}
/* End ribbon: the plain bookmark, slightly see-through so the engraving shows behind it. */
.today-ribbon{position:absolute;top:0;right:18px;z-index:3;min-width:48px;height:60px;box-sizing:border-box;padding:13px 8px 0;background:var(--oro);background:color-mix(in srgb,var(--oro) 82%,transparent);color:var(--tinta);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);display:flex;align-items:flex-start;justify-content:center;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em}
/* End screen: the engraving shown whole, two lines with air around them, a closing line, one quiet footnote, the doors. */
@media (max-width:719px){.today-end .today-art{height:auto!important;aspect-ratio:2/1;margin-bottom:0}}
/* One visible gap (--g) between engraving, headline pair, quote, saved words and doors. Each margin is --g minus that block's own line spacing, measured on the render. */
.today-end{--g:clamp(26px,4.2dvh,40px)}
.today-end-rest{padding:calc(var(--g) - 1px) 0 0}
.today-end-title{font-family:'Newsreader',Georgia,serif;font-weight:400;font-variation-settings:'opsz' 72;font-size:clamp(32px,8.8vw,38px);line-height:1.08;letter-spacing:-.02em;color:var(--cal);margin:0 0 10px;text-wrap:balance}
.today-end-sub{font-size:clamp(20px,5.2vw,22px);font-style:italic;line-height:1.25;color:rgba(244,246,242,.9);margin:0;text-wrap:balance}
.today-end-sub em{color:var(--oro);font-style:inherit}
.today-end-marks{max-width:150px;margin:18px 0 0}
.today-end-quote{margin:calc(var(--g)*1.5 - 3px) 0 0;padding:6px 0 6px 18px;border-left:1px solid rgba(232,163,61,.7)}
.today-end-quote p{margin:0}
.today-end-quote .q{font-size:clamp(19px,5vw,21px);line-height:1.5;color:rgba(244,246,242,.94)}
.today-end-quote .tr{font-size:clamp(16px,4.2vw,17px);line-height:1.5;font-style:italic;color:rgba(244,246,242,.68);margin-top:14px;text-wrap:pretty}
.today-end-quote footer{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.6);margin-top:20px}
.today-end-kept{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:calc(var(--g)*1.5 - 1px) 0 0}
.today-end-kept:has(.today-end-words:empty){display:none}
.today-end-k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,246,242,.66)}
.today-end-words{font-size:17px;font-style:italic;line-height:1.35;color:rgba(244,246,242,.9);text-wrap:pretty}
.today-end .today-doors{margin-top:calc(var(--g) - 5px)}
.today-end-kept:has(.today-end-words:empty) ~ .today-doors{margin-top:calc(var(--g)*1.5 - 1px)}