/* ===========================================================
   e-Punto · brand.css
   Fuentes oficiales + tokens + componentes base (compartidos)
   Las 3 direcciones visuales viven en variants.css
   =========================================================== */

/* ---- FUENTES OFICIALES (locales) ---- */
@font-face { font-family:'Liebling'; src:url('../fonts/Liebling-Light.otf')   format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Liebling'; src:url('../fonts/Liebling-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Liebling'; src:url('../fonts/Liebling-Medium.otf')  format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Liebling'; src:url('../fonts/Liebling-Bold.otf')    format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Liebling'; src:url('../fonts/Liebling-Heavy.otf')   format('opentype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Liebling'; src:url('../fonts/Liebling-Black.otf')   format('opentype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-Medium.ttf')    format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-SemiBold.ttf')  format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('../fonts/Nunito-Black.ttf')     format('truetype'); font-weight:900; font-display:swap; }

/* ---- TOKENS DE MARCA ---- */
:root{
  --navy:   #0A1F3C;
  --navy-700:#0E2A4F;
  --navy-600:#143560;
  --teal:   #16C7D1;
  --teal-strong:#0E9AA3;
  --teal-soft:#2DD4DE;
  --carbon: #2D2D2D;
  --cement: #F0F4F8;
  --cement-200:#E2E8F0;
  --white:  #FFFFFF;

  --accent: var(--teal);           /* configurable por Tweak */
  --accent-ink:#04222a;            /* texto sobre accent */

  --font-brand:'Liebling','Nunito',sans-serif;
  --font-ui:'Nunito',sans-serif;

  /* tokens que las variantes sobreescriben */
  --page-bg: var(--navy);
  --page-fg: #EAF1F8;
  --page-fg-dim: rgba(234,241,248,.62);
  --surface: rgba(255,255,255,.04);
  --surface-fg: #EAF1F8;
  --surface-dim: rgba(234,241,248,.6);
  --border: rgba(255,255,255,.12);
  --hairline: rgba(255,255,255,.1);
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: none;
  --section-py: clamp(72px,9vw,140px);
  --maxw: 1200px;

  --display-weight:700;
  --display-tracking:-.02em;
  --display-leading:1.02;
}

/* ---- RESET / BASE ---- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ui);
  background:var(--page-bg);
  color:var(--page-fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---- LAYOUT ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.section{ padding-block:var(--section-py); position:relative; }
.eyebrow{
  font-family:var(--font-ui); font-weight:700; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:1.6em; height:2px; background:var(--accent); display:inline-block; }

/* ---- TIPOGRAFÍA DISPLAY ---- */
.display{
  font-family:var(--font-brand);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:var(--display-leading);
  text-wrap:balance;
}
h1.display{ font-size:clamp(2.6rem,6.4vw,5.4rem); }
h2.display{ font-size:clamp(2rem,4.4vw,3.6rem); }
h3.display{ font-size:clamp(1.4rem,2.4vw,2.1rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.35rem); color:var(--page-fg-dim); line-height:1.55; max-width:40ch; text-wrap:pretty; }

/* ---- BOTONES ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-ui); font-weight:800; font-size:1rem;
  padding:.95em 1.5em; border-radius:var(--radius); line-height:1;
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ box-shadow:0 12px 30px -10px var(--accent); }
.btn-ghost{ background:transparent; color:var(--surface-fg); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn .ico{ width:1.15em; height:1.15em; }
.btn-lg{ font-size:1.08rem; padding:1.08em 1.7em; }

/* ---- ISOTIPO ---- */
.iso{ display:inline-block; }
.iso svg{ height:100%; width:auto; }

/* ---- CARDS / SUPERFICIES ---- */
.card{
  background:var(--surface); color:var(--surface-fg);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(22px,2.6vw,34px);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card .k{ color:var(--surface-dim); }

/* ---- PLACEHOLDER DE IMAGEN ---- */
.ph{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(22,199,209,.10) 0 12px, transparent 12px 24px),
    var(--surface);
  border:1px dashed var(--border);
  display:flex; align-items:flex-end; min-height:200px;
}
.ph::after{
  content:attr(data-label);
  font-family:'Courier New',monospace; font-size:.74rem; letter-spacing:.02em;
  color:var(--surface-dim); padding:14px 16px; line-height:1.4;
  display:block; width:100%;
  background:linear-gradient(to top, rgba(0,0,0,.18), transparent);
}
.ph .ph-tag{
  position:absolute; top:14px; left:14px;
  font-family:'Courier New',monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:100px; padding:.25em .75em;
}

/* ---- NÚMEROS / STATS ---- */
.stat-num{ font-family:var(--font-ui); font-weight:900; line-height:.95; color:var(--accent);
  font-size:clamp(2.4rem,4.6vw,3.6rem); letter-spacing:-.02em; }
.stat-unit{ font-size:.42em; font-weight:800; color:var(--page-fg-dim); letter-spacing:0; }

/* ---- HAIRLINE / DIVIDERS ---- */
.hr{ height:1px; background:var(--hairline); border:0; }

/* ---- REVEAL (animaciones sutiles) ---- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-stagger]>*{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal-stagger].in>*{ opacity:1; transform:none; }

/* bold: movimiento más dramático y stagger más largo */
body[data-motion="bold"] [data-reveal]{ transform:translateY(48px) scale(.972); transition:opacity .95s cubic-bezier(.16,.86,.3,1), transform .95s cubic-bezier(.16,.86,.3,1); }
body[data-motion="bold"] [data-reveal].in{ opacity:1; transform:none; }
body[data-motion="bold"] [data-reveal-stagger]>*{ transform:translateY(34px) scale(.982); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.86,.3,1); }
body[data-motion="bold"] [data-reveal-stagger].in>*{ opacity:1; transform:none; }

body[data-motion="min"] [data-reveal],
body[data-motion="min"] [data-reveal-stagger]>*{ opacity:1 !important; transform:none !important; transition:none !important; }
/* red de seguridad: si las transiciones no avanzan (iframes throttled), forzar visible */
body.reveal-done [data-reveal],
body.reveal-done [data-reveal-stagger]>*{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  [data-reveal],[data-reveal-stagger]>*{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- FOCUS ---- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }