/* ============================================================
   Aula ML v2 — Tema base (tokens + Welcome)  ·  Fase 0
   ============================================================ */

:root {
  /* Colores de marca */
  --teal:#1A4A4F; --teal-deep:#143A3E; --teal-soft:#2A6066;
  --rose:#E8B5A0; --rose-deep:#D9967A; --rose-soft:#F2D4C3;
  --cream:#F7F1EA; --cream-deep:#EFE6D9; --paper:#FBF8F4;
  --ink:#1F1B16; --ink-soft:#4A4138; --mute:#8A7F72; --line:#E8DFD3;

  /* Tipografía */
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
  --script:"Allura", cursive;

  /* Radios y sombras */
  --r-card:18px; --r-pill:999px; --r-input:12px;
  --shadow-cta:0 4px 14px rgba(26,74,79,0.18);
  --shadow-soft:0 2px 10px rgba(31,27,22,0.06);

  /* Safe areas (PWA en iPhone) */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
em{font-style:italic;}

/* Kicker (etiqueta superior en mayúsculas) */
.kicker{
  font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--mute);margin:0;
}
.kicker--light{color:rgba(247,241,234,0.7);}

/* ---- Pantalla Welcome ---- */
.screen{min-height:100dvh;display:flex;flex-direction:column;}
.screen--welcome{
  background:radial-gradient(120% 80% at 50% 0%, var(--teal-soft) 0%, var(--teal) 55%, var(--teal-deep) 100%);
  color:var(--cream);
  padding:calc(var(--safe-top) + 8vh) 28px calc(var(--safe-bottom) + 28px);
  align-items:center;text-align:center;justify-content:space-between;
}
.welcome{display:flex;flex-direction:column;align-items:center;gap:16px;margin:auto 0;max-width:420px;}
.welcome__mark{width:172px;max-width:54vw;height:auto;display:block;margin:0 auto 2px;}
.welcome__title{
  font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.08;margin:6px 0 0;
}
.welcome__title em{color:var(--rose-soft);}
.welcome__sub{
  font-size:15px;line-height:1.55;color:rgba(247,241,234,0.82);margin:0;max-width:34ch;
}
.welcome__actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:14px;}
.welcome__foot{font-size:11px;letter-spacing:0.4px;color:rgba(247,241,234,0.55);margin:0;}

/* CTA principal (pill claro sobre teal) */
.cta{
  background:var(--cream);color:var(--teal-deep);
  font-size:15px;font-weight:600;
  padding:15px 22px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-cta);width:100%;min-height:52px;
  transition:transform .12s ease, opacity .12s ease;
}
.cta:active{transform:translateY(1px);opacity:.92;}

/* Botón secundario tipo enlace */
.linkbtn{
  color:rgba(247,241,234,0.9);font-size:14px;font-weight:500;
  text-decoration:underline;text-underline-offset:3px;padding:8px;min-height:44px;
}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 28px);transform:translate(-50%,16px);
  background:var(--ink);color:var(--cream);font-size:13px;font-weight:500;
  padding:11px 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-soft);
  opacity:0;transition:opacity .25s ease, transform .25s ease;z-index:50;max-width:88vw;text-align:center;
}
.toast--in{opacity:1;transform:translate(-50%,0);}

@media (min-width:480px){
  .screen--welcome{max-width:480px;margin:0 auto;}
}