/* --------------------------------------------------------------------------
   Tipografia
   BL-Melody es la fuente de marca de WISD, pero el fichero que sirve la web es
   un SUBSET de ASCII basico: no trae a e i o u con tilde, ni n con virgulilla,
   ni % + · —. En castellano eso significa que cada acento cae a la fuente de
   sistema y el titular se parte en dos tipografias a media palabra.
   Asi que BL-Melody se queda donde es correcta y suficiente: el logotipo.
   Para el texto se auto-hospeda Outfit (geometrica, misma familia de gesto,
   set latino completo) e Inter para interfaz. Auto-hospedadas y no por CDN
   para que el render sea identico siempre y no dependa de la red.
   -------------------------------------------------------------------------- */
@font-face{font-family:'BL-Melody';src:url('../assets/fonts/BL-Melody/BLMelody-Bold.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'BL-Melody';src:url('../assets/fonts/BL-Melody/BLMelody-SemiBold.woff2') format('woff2');font-weight:600;font-display:block}

@font-face{font-family:'Outfit';font-style:normal;font-weight:100 700;font-display:block;src:url('../assets/fonts/gf/Outfit-100-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 700;font-display:block;src:url('../assets/fonts/gf/Outfit-100-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:block;src:url('../assets/fonts/gf/Inter-300-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:block;src:url('../assets/fonts/gf/Inter-300-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* --- tinta --- */
  --ink:#27272a;          /* near-black, botones y bordes */
  --ink-soft:#303536;     /* texto principal */
  --ink-mute:#6b7280;     /* texto secundario */

  /* --- acentos WISD --- */
  --teal:#5C9099;         /* el color firma */
  --teal-bright:#14B8A6;  /* acento vivo: checks, chispas */
  --mist:#9bbdc3;
  --sky:#a4bdde;
  --sage:#8a8b80;
  --sand:#d7d8d2;

  /* --- papel --- */
  --paper:#f7f8f6;
  --paper-warm:#eef0ec;
  --white:#ffffff;

  --display:'Outfit','Inter',system-ui,sans-serif;   /* titulares y cifras */
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mark:'BL-Melody','Outfit',sans-serif;            /* SOLO el logotipo */
}

/* --------------------------------------------------------------------------
   El escenario mide SIEMPRE 1080x1920. Todo se compone en esas unidades y
   luego se escala. Así el preview del navegador y el render a 1080p son el
   mismo frame, no dos maquetaciones distintas.
   -------------------------------------------------------------------------- */
.stage{
  position:relative;
  width:1080px;height:1920px;
  transform-origin:top left;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--ui);
  isolation:isolate;
  contain:strict;
}
.stage *{box-sizing:border-box;margin:0;padding:0}

/* Papel WISD: degradado suavísimo + grano. Nunca blanco plano. */
.stage-paper{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 700px at 18% 12%, rgba(164,189,222,.28), transparent 62%),
    radial-gradient(800px 900px at 86% 30%, rgba(155,189,195,.26), transparent 60%),
    radial-gradient(1000px 800px at 50% 104%, rgba(138,139,128,.20), transparent 64%),
    linear-gradient(160deg,#ffffff 0%,#f6f7f5 44%,#eceee9 100%);
}
.stage-grain{
  position:absolute;inset:-30%;
  opacity:.5;mix-blend-mode:multiply;pointer-events:none;
  background-image:var(--grain-url);
  background-size:180px 180px;
}
.stage-vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 220px rgba(48,53,54,.10);
}

/* --- tipografía de escena --- */
.d{font-family:var(--display);letter-spacing:-.035em;line-height:.94;color:var(--ink-soft)}
.d-xl{font-size:132px;font-weight:200}
.d-l{font-size:96px;font-weight:200}
.d-m{font-size:68px;font-weight:300}
.d-s{font-size:46px;font-weight:400}
.teal{color:var(--teal)}
.bright{color:var(--teal-bright)}
.sage{color:var(--sage)}

.kicker{
  font-family:var(--ui);font-size:22px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--teal);
}
.body{font-family:var(--ui);font-size:30px;line-height:1.5;color:var(--ink-mute);font-weight:400}

/* --- la píldora: el componente firma de WISD --- */
.pill{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid rgba(39,39,42,.34);
  background:var(--white);
  border-radius:999px;padding:16px 30px;
  font-family:var(--ui);font-size:24px;font-weight:500;color:var(--ink-soft);
  box-shadow:0 10px 30px rgba(48,53,54,.10);
  white-space:nowrap;
}
.pill.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill .dot{width:12px;height:12px;border-radius:50%;background:var(--teal-bright);flex:none}

/* --- tarjeta de papel --- */
.card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(155,189,195,.55);
  border-radius:28px;
  box-shadow:0 18px 50px rgba(48,53,54,.09);
  backdrop-filter:blur(6px);
}

/* --- marca de agua de la firma --- */
.wisd-mark{
  position:absolute;left:72px;bottom:74px;
  font-family:var(--mark);font-weight:700;font-size:34px;
  letter-spacing:.34em;color:var(--ink-soft);
}
.wisd-mark small{
  display:block;font-family:var(--ui);font-size:17px;font-weight:400;
  letter-spacing:.14em;color:var(--sage);margin-top:10px;text-transform:none;
}

/* --- utilidades de composición --- */
.abs{position:absolute}
.safe{position:absolute;left:96px;right:96px}
.center-x{left:50%;transform:translateX(-50%)}
.will{will-change:transform,opacity,filter}