/* ============================================================
   JLN · style.css — base, tokens, header, screens, botones
   Colores de marca: celeste #5bc2e5 · turquesa #36a4a8 · amarillo #ffbe59
   Font: Acrom (Regular texto · Bold botones)
   ============================================================ */

/* ---------- Acrom ---------- */
@font-face{font-family:'Acrom';src:url('../assets/fonts/Acrom-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Acrom';src:url('../assets/fonts/Acrom-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Acrom';src:url('../assets/fonts/Acrom-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Acrom';src:url('../assets/fonts/Acrom-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --white:#ffffff;
  --black:#111111;
  --celeste:#5bc2e5;
  --turquesa:#36a4a8;
  --turquesa-dark:#2c898c;
  --amarillo:#ffbe59;
  --ink-60:#5b5b5b;
  --ink-40:#8a8a8a;
  --line:#e6e6e6;
  --field-bg:#f6f7f8;
  --radius:14px;
  --radius-sm:10px;
  --err:#d64545;
  --ok:#2e9e5b;
  --ease:cubic-bezier(.4,0,.2,1);
  --font:'Acrom','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  font-weight:400;
  color:var(--black);
  background:var(--white);
  background-image:radial-gradient(ellipse at 15% 0%,rgba(91,194,229,.14),transparent 55%),
                   radial-gradient(ellipse at 100% 100%,rgba(54,164,168,.12),transparent 50%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block}
button{font-family:inherit}
[hidden]{display:none!important}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__logo{height:30px;width:auto}

/* ---------- Selector de idioma ---------- */
.lang-switch{display:flex;gap:4px;background:var(--field-bg);border:1px solid var(--line);border-radius:50px;padding:4px}
.lang-switch__btn{
  border:none;background:transparent;cursor:pointer;
  font-size:1rem;line-height:1;padding:6px 9px;border-radius:50px;
  opacity:.45;transition:.18s var(--ease);
}
.lang-switch__btn:hover{opacity:.8}
.lang-switch__btn.is-active{opacity:1;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ---------- Screens ---------- */
.stage{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:32px 18px}
.screen{display:none;width:100%}
.screen.is-active{display:flex;justify-content:center;width:100%;min-width:0;animation:screenIn .45s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  padding:13px 22px;border-radius:50px;border:1.6px solid transparent;
  cursor:pointer;transition:.18s var(--ease);white-space:nowrap;
}
.btn--block{width:100%}
.btn--primary{background:var(--turquesa);color:#fff}
.btn--primary:hover{background:var(--turquesa-dark);transform:translateY(-1px);box-shadow:0 8px 20px rgba(54,164,168,.32)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:#fff;color:var(--black);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--turquesa);color:var(--turquesa)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.linkbtn{
  background:none;border:none;cursor:pointer;font-family:var(--font);font-weight:700;
  color:var(--turquesa);font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:2px;
}
.linkbtn:hover{color:var(--celeste)}
.linkbtn--muted{color:var(--ink-40);font-weight:500;font-size:.82rem;display:inline-block;margin-top:2px}
.linkbtn--muted:hover{color:var(--turquesa)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--black);color:#fff;font-size:.84rem;font-weight:500;
  padding:12px 20px;border-radius:50px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:100;max-width:90vw;text-align:center;
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Admin placeholder ---------- */
.admin-ph{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:48px 34px;text-align:center;max-width:420px;width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.admin-ph__logo{height:40px;width:auto;margin:0 auto 22px}
.admin-ph h1{font-weight:800;font-size:1.5rem;margin-bottom:8px}
.admin-ph p{color:var(--ink-60);font-size:.9rem;margin-bottom:24px}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}