@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&display=swap");
/* Soy Digital — design system tokens (fusionados) + componentes + layout v4 */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Soy Digital — Webfonts
   Body / UI:   Montserrat (brand font, shipped as .ttf)
   Display:     Archivo    (impactful editorial display, Google Fonts)
   ============================================================ */

/* --- Montserrat (brand, local binaries) --- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* --- Archivo (display, Google Fonts) ---
   Deliberate addition per brief: a more powerful display face to pair
   with Montserrat. Loaded from Google so consumers get full weight range. */

/* ===== tokens/colors.css ===== */
/* ============================================================
   Soy Digital — Color tokens
   Palette extracted verbatim from the official communications
   templates (00 final Plantillas Comunicaciones). DO NOT alter hex
   values — only the ROLE / usage is organized here for WCAG AA.
   Flag-derived institutional palette: navy + azure + red.
   ============================================================ */
:root {
  /* ---- Brand primitives ---- */
  --sd-navy-900: #00205c;   /* deepest, shadow of navy */
  --sd-navy-800: #002f6b;
  --sd-navy:     #003876;   /* PRIMARY — institutional navy */
  --sd-navy-700: #173d6e;
  --sd-navy-600: #20396e;

  --sd-azure:     #0988ff;  /* SECONDARY — bright accessible blue */
  --sd-azure-600: #0a78e0;  /* darkened azure for text-on-white AA */
  --sd-sky-300:   #9ccfff;  /* light sky tint */
  --sd-sky-100:   #c5e8f9;  /* palest sky wash */

  --sd-red:      #ed3124;   /* ACCENT — flag red, used sparingly */
  --sd-red-600:  #cf2418;   /* darkened red for AA text/links */

  --sd-sand:     #d7c09f;   /* warm neutral accent (humanity) */
  --sd-sand-100: #f3ece0;   /* warm wash background */

  /* ---- Neutrals ---- */
  --sd-ink:       #1d1d1b;  /* near-black text */
  --sd-slate:     #404041;  /* secondary text */
  --sd-gray-500:  #6c7480;
  --sd-gray-400:  #989898;
  --sd-gray-300:  #c7ccd3;
  --sd-gray-200:  #e3e7ec;
  --sd-gray-100:  #f2f5f8;
  --sd-paper:     #ffffff;

  /* ---- Semantic: surfaces ---- */
  --surface-page:        var(--sd-paper);
  --surface-subtle:      var(--sd-gray-100);
  --surface-card:        var(--sd-paper);
  --surface-navy:        var(--sd-navy);     /* dark section bg */
  --surface-navy-deep:   var(--sd-navy-900);
  --surface-sky:         var(--sd-sky-100);  /* soft highlight section */
  --surface-sand:        var(--sd-sand-100); /* warm highlight section */

  /* ---- Semantic: text ---- */
  --text-strong:    var(--sd-ink);
  --text-body:      var(--sd-slate);
  --text-muted:     var(--sd-gray-500);
  --text-on-navy:   var(--sd-paper);
  --text-on-navy-muted: #b9cae3;
  --text-link:      var(--sd-azure-600);
  --text-brand:     var(--sd-navy);

  /* ---- Semantic: interactive ---- */
  --action-primary:        var(--sd-navy);
  --action-primary-hover:  var(--sd-navy-800);
  --action-primary-press:  var(--sd-navy-900);
  --action-accent:         var(--sd-azure);
  --action-accent-hover:   var(--sd-azure-600);
  --action-danger:         var(--sd-red);
  --focus-ring:            var(--sd-azure);

  /* ---- Semantic: borders / lines ---- */
  --border-subtle:  var(--sd-gray-200);
  --border-default: var(--sd-gray-300);
  --border-strong:  var(--sd-navy);
  --divider-on-navy: rgba(255, 255, 255, 0.16);

  /* ---- Status ---- */
  --status-success: #1f8a4c;
  --status-warning: #e0a516;
  --status-error:   var(--sd-red-600);
  --status-info:    var(--sd-azure-600);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Soy Digital — Typography tokens
   Display: Archivo (big, confident headlines)
   Body/UI: Montserrat (brand)
   Type scale is generous & editorial — large headlines, comfortable
   line-height, strong hierarchy. Fluid clamps for mobile-first.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Archivo", "Montserrat", system-ui, sans-serif;
  --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    var(--font-sans);

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind other */
  --fw-regular:   400; /* @kind other */
  --fw-medium:    500; /* @kind other */
  --fw-semibold:  600; /* @kind other */
  --fw-bold:      700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */
  --fw-black:     900; /* @kind other */

  /* ---- Fluid display sizes (min .. max) ---- */
  --text-display-1: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);  /* @kind spacing */ /* hero */
  --text-display-2: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);  /* @kind spacing */ /* section hero */
  --text-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* @kind spacing */
  --text-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem); /* @kind spacing */
  --text-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.625rem); /* @kind spacing */
  --text-h4: clamp(1.125rem, 1.02rem + 0.45vw, 1.3rem); /* @kind spacing */

  /* ---- Body / UI sizes ---- */
  --text-lead:  clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem); /* @kind spacing */ /* intro paragraph */
  --text-base:  1.0625rem;   /* 17px — comfortable reading default */
  --text-sm:    0.9375rem;   /* 15px */
  --text-xs:    0.8125rem;   /* 13px */
  --text-stat:  clamp(2.75rem, 1.8rem + 4vw, 4.5rem); /* @kind spacing */ /* big impact numbers */

  /* ---- Line heights ---- */
  --lh-tight:   1.04;   /* @kind other */
  --lh-snug:    1.16;   /* @kind other */
  --lh-normal:  1.55;   /* @kind other */
  --lh-relaxed: 1.7;    /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.02em;  /* @kind other */
  --ls-snug:    -0.01em;  /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-wide:    0.04em;   /* @kind other */
  --ls-wider:   0.14em;   /* @kind other */

  /* ---- Semantic roles ---- */
  --eyebrow-size: var(--text-sm);
  --eyebrow-weight: var(--fw-bold);
  --eyebrow-spacing: var(--ls-wider);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Soy Digital — Spacing, layout, radii
   8px base rhythm. Generous vertical spacing for an airy, editorial
   feel ("menos es más"). Mobile-first content widths.
   ============================================================ */
:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* ---- Section rhythm (vertical padding of page sections) ---- */
  --section-y:        clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */
  --section-y-tight:  clamp(2.5rem, 1.5rem + 4vw, 4.5rem); /* @kind spacing */

  /* ---- Content widths ---- */
  --container-max:   1200px;  /* full page gutter container */
  --container-wide:  1320px;  /* edge-to-edge feature rows */
  --content-measure: 68ch;    /* readable prose max */
  --content-narrow:  44ch;    /* hero / lead measure */
  --gutter:          clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* @kind spacing */

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width:  1px;
  --border-width-strong: 2px;
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   Soy Digital — Effects: shadows, transitions, focus
   Soft, low-contrast shadows. Calm motion. No flashy gradients.
   ============================================================ */
:root {
  /* ---- Elevation (soft, navy-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(0, 32, 92, 0.06);
  --shadow-sm:  0 2px 8px rgba(0, 32, 92, 0.07);
  --shadow-md:  0 8px 24px rgba(0, 32, 92, 0.09);
  --shadow-lg:  0 18px 48px rgba(0, 32, 92, 0.12);
  --shadow-card: 0 6px 22px rgba(0, 32, 92, 0.08);

  /* ---- Focus ---- */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-shadow: 0 0 0 var(--focus-ring-width) rgba(9, 136, 255, 0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0.32, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-standard);

  /* ---- Accent rule (brand divider device) ---- */
  --rule-accent: linear-gradient(90deg, var(--sd-azure) 0%, var(--sd-navy) 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}

/* ===== styles.css ===== */
/* ============================================================
   Soy Digital — Global stylesheet entry point.
   Consumers link THIS file only. It is an @import manifest plus a
   thin base reset so tokens + brand defaults apply everywhere.
   ============================================================ */






/* ---- Minimal base reset / brand defaults ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--text-link); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================================
   Soy Digital — v4 · componentes y layout (estático, sin React)
   Réplica CSS de los componentes del design system:
   Button · Badge · Card · Stat · Quote · Eyebrow · Input · Logo
   ============================================================ */

/* ---- Base ---- */
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:var(--font-sans);color:var(--text-body)}
a{color:var(--text-link)}a:hover{color:var(--sd-navy)}
img{max-width:100%}
.sd-wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.ic{display:inline-flex;flex:none;width:1em;height:1em;color:currentColor}
.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---- Eyebrow ---- */
.sd-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-sans);font-weight:700;font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--sd-azure-600)}
.sd-eyebrow::before{content:"";width:24px;height:3px;border-radius:2px;background:currentColor;display:inline-block}
.sd-eyebrow--notick::before{display:none}
.sd-eyebrow--white{color:#fff}.sd-eyebrow--navy{color:var(--sd-navy)}

/* ---- Button ---- */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-sans);font-weight:700;font-size:1rem;line-height:1;padding:.72rem 1.35rem;min-height:48px;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-base);border:var(--border-width-strong) solid transparent}
.sd-btn .ic{width:18px;height:18px}
.sd-btn--sm{font-size:.9375rem;padding:.5rem .95rem;min-height:40px;gap:.45rem}.sd-btn--sm .ic{width:16px;height:16px}
.sd-btn--lg{font-size:1.0625rem;padding:.95rem 1.8rem;min-height:56px;gap:.6rem}
.sd-btn--full{display:flex;width:100%}
.sd-btn--primary{background:var(--action-primary);color:#fff;border-color:var(--action-primary)}
.sd-btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:#fff}
.sd-btn--accent{background:var(--action-accent);color:#fff;border-color:var(--action-accent)}
.sd-btn--accent:hover{background:var(--action-accent-hover);border-color:var(--action-accent-hover);color:#fff}
.sd-btn--secondary{background:transparent;color:var(--sd-navy);border-color:var(--sd-navy)}
.sd-btn--secondary:hover{background:var(--sd-gray-100);color:var(--sd-navy)}
.sd-btn--ghost{background:transparent;color:var(--sd-navy)}
.sd-btn--ghost:hover{background:var(--sd-gray-100);color:var(--sd-navy)}
.sd-btn--onazure{background:#fff;color:var(--sd-azure-600);border-color:#fff}
.sd-btn--onazure:hover{background:var(--sd-sky-100);border-color:var(--sd-sky-100);color:var(--sd-azure-600)}
.sd-btn[disabled]{opacity:.6;cursor:progress}

/* ---- Badge ---- */
.sd-badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-sans);font-weight:700;font-size:.8125rem;letter-spacing:.02em;line-height:1.2;padding:.32rem .75rem;border-radius:var(--radius-pill);border:1px solid transparent}
.sd-badge .ic{width:14px;height:14px}
.sd-badge--azure{background:#e3f1ff;color:var(--sd-azure-600)}
.sd-badge--azure-solid{background:var(--sd-azure);color:#fff}
.sd-badge--navy{background:var(--sd-sky-100);color:var(--sd-navy)}
.sd-badge--sky{background:var(--sd-sky-300);color:var(--sd-navy)}

/* ---- Card ---- */
.sd-card{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6);overflow:hidden;transition:var(--transition-base)}
.sd-card--lg{box-shadow:var(--shadow-lg)}.sd-card--md{box-shadow:var(--shadow-md)}
.sd-card--flush{padding:0}
.sd-card--accent::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--rule-accent)}
.sd-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* ---- Stat ---- */
.sd-stat{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;text-align:left}
.sd-stat__v{font-family:var(--font-display);font-weight:800;font-size:var(--text-stat);line-height:1;letter-spacing:-.03em;color:var(--sd-navy);display:flex;align-items:baseline}
.sd-stat__v .u{font-size:.5em;font-weight:700;margin-left:.08em}
.sd-stat__l{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);line-height:1.4;color:var(--text-body);max-width:22ch}
.sd-stat--white .sd-stat__v{color:#fff}.sd-stat--white .sd-stat__l{color:var(--text-on-navy-muted)}

/* ---- Quote ---- */
.sd-quote{margin:0;display:flex;flex-direction:column;gap:var(--space-5)}
.sd-quote__mark{font-family:var(--font-display);font-weight:900;font-size:3.5rem;line-height:.7;color:var(--sd-azure)}
.sd-quote blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--text-h3);line-height:1.3;letter-spacing:-.01em;color:var(--text-strong);text-wrap:pretty}
.sd-quote figcaption{display:flex;flex-direction:column;line-height:1.3}
.sd-quote figcaption b{font-weight:700;font-size:1rem;color:var(--text-strong)}
.sd-quote figcaption span{font-size:var(--text-sm);color:var(--text-muted)}

/* ---- Input / field ---- */
.sd-field{display:flex;flex-direction:column;gap:.4rem}
.sd-field label{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);color:var(--text-strong)}
.sd-field .req{color:var(--sd-red);margin-left:3px}
.sd-field input,.sd-field select,.sd-field textarea{width:100%;font-family:var(--font-sans);font-size:1rem;color:var(--text-strong);background:#fff;border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:.8rem 1rem;line-height:1.45;outline:none;transition:var(--transition-base);min-height:50px}
.sd-field input:focus,.sd-field select:focus,.sd-field textarea:focus{border-color:var(--sd-azure);box-shadow:var(--focus-shadow)}
.sd-field .hint{font-size:var(--text-xs);color:var(--text-muted)}
.sd-error{margin:0;font-size:.85rem;color:var(--sd-red-600);font-weight:600}
.sd-consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:var(--radius-md);background:var(--surface-subtle);border:1px solid var(--border-subtle);cursor:pointer;font-size:.88rem;line-height:1.55;color:var(--text-body)}
.sd-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--sd-azure)}
.sd-chips{display:flex;gap:8px;flex-wrap:wrap}
.sd-chip{font-family:var(--font-sans);font-weight:600;font-size:.88rem;padding:9px 15px;border-radius:var(--radius-pill);cursor:pointer;border:1.5px solid var(--border-default);background:#fff;color:var(--text-body);transition:var(--transition-base)}
.sd-chip[aria-pressed="true"]{border-color:var(--sd-azure);background:var(--sd-sky-100);color:var(--sd-azure-600)}
.sd-contact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--text-muted);margin:0}
.sd-contact a{font-weight:700;color:var(--sd-azure-600)}
.sd-alert{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:var(--radius-md);background:#fde6e4;border:1px solid #f5b5ae;color:var(--text-strong);font-size:.9rem;line-height:1.5}
.sd-alert .ic{width:20px;height:20px;color:var(--sd-red-600);margin-top:1px}
.sd-alert a{font-weight:700;color:var(--sd-red-600)}
.sd-success{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:10px 0}
.sd-success__ic{width:56px;height:56px;border-radius:var(--radius-pill);background:var(--sd-sky-100);display:flex;align-items:center;justify-content:center;color:var(--sd-azure-600)}
.sd-success__ic .ic{width:28px;height:28px}
.sd-success h3{font-size:var(--text-h3);margin:0}.sd-success p{margin:0}

/* ---- Motion ---- */
.sd-fade{animation:sdfade .35s var(--ease-out,ease-out)}
@keyframes sdfade{from{opacity:0;transform:translateY(8px)}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.sd-fade{animation:none}.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   Layout de la portada (index)
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.nav__logo{display:inline-flex;line-height:0}.nav__logo img{height:40px;width:auto;display:block}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{font-weight:600;font-size:.95rem;color:var(--text-strong);text-decoration:none}
.nav__links a:hover{color:var(--sd-azure-600)}
.nav__right{display:flex;align-items:center;gap:12px}
.nav__burger{display:none;background:none;border:0;cursor:pointer;color:var(--sd-navy);padding:6px}
.nav__burger .ic{width:26px;height:26px}
.nav__mobile{display:none;flex-direction:column;gap:4px;padding-bottom:18px}
.nav__mobile a{font-weight:600;padding:12px 4px;color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--border-subtle)}
.nav.is-open .nav__mobile{display:flex}
.nav .back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--text-strong);text-decoration:none}

.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--sd-sky-100) 100%)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:var(--section-y)}
.hero__copy{max-width:600px}
.hero h1{font-size:var(--text-display-1);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:20px 0 0;color:var(--sd-navy)}
.hero h1 .accent{color:var(--sd-azure)}
.hero__lead{font-size:var(--text-lead);color:var(--text-body);margin:22px 0 0;max-width:46ch}
.hero__actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero__seals{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero__seals span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--text-body)}
.hero__seals .ic{width:18px;height:18px;color:var(--sd-azure)}
.hero__photo{position:relative}
.hero__photo img{width:100%;height:520px;object-fit:cover;object-position:center 55%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);display:block}
.hero__pill{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.94);border-radius:var(--radius-pill);padding:10px 18px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-md);font-weight:700;font-size:.9rem;color:var(--sd-navy)}
.hero__pill .ic{width:17px;height:17px;color:var(--sd-azure)}

.impact{background:var(--sd-navy);color:#fff;padding-block:var(--section-y)}
.impact__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.impact h2{color:#fff;font-size:var(--text-h1);margin:14px 0 6px;max-width:18ch}
.impact__lead{color:var(--text-on-navy-muted);max-width:52ch;margin:0;font-size:var(--text-lead)}
.sd-tabs{display:flex;gap:6px;padding:5px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid var(--divider-on-navy);max-width:100%;overflow-x:auto;scrollbar-width:none}
.sd-tabs::-webkit-scrollbar{display:none}
.sd-tabs button{font-family:var(--font-sans);font-weight:700;font-size:.86rem;padding:9px 16px;border-radius:var(--radius-pill);border:0;cursor:pointer;white-space:nowrap;flex:none;background:transparent;color:#fff;transition:var(--transition-base)}
.sd-tabs button[aria-selected="true"]{background:#fff;color:var(--sd-navy)}
.impact__period{color:var(--text-on-navy-muted);font-size:var(--text-sm);font-weight:600;margin:36px 0 22px;display:flex;align-items:center;gap:8px}
.impact__period .ic{width:16px;height:16px}
.sd-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.sd-stats-grid>div{border-top:2px solid var(--divider-on-navy);padding-top:20px}
.impact__links{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px;align-items:center}
.impact__links>span{color:var(--text-on-navy-muted);font-size:var(--text-sm);font-weight:600;margin-right:6px}
.sd-linkchip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-pill);border:1px solid var(--divider-on-navy);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;transition:var(--transition-base)}
.sd-linkchip:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.sd-linkchip .ic{width:16px;height:16px;color:var(--sd-sky-300)}.sd-linkchip .ic.sm{width:14px;height:14px;color:#fff}
.impact__src{color:var(--text-on-navy-muted);font-size:var(--text-xs);margin-top:26px;opacity:.85}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--subtle{background:var(--surface-subtle)}
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head h2{font-size:var(--text-h1);margin:14px 0 12px}
.sec-head p{font-size:var(--text-lead);color:var(--text-body);margin:0}
.sec-head--center{text-align:center;max-width:620px;margin:0 auto 40px}
.sec-head--center h2{margin:12px 0 0}

.sd-prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prog__ic{display:inline-flex;width:52px;height:52px;border-radius:var(--radius-md);background:var(--sd-sky-100);align-items:center;justify-content:center;margin-bottom:18px;color:var(--sd-navy)}
.prog__ic .ic{width:26px;height:26px}
.sd-prog-grid h3{font-size:var(--text-h4);margin:0 0 8px}
.sd-prog-grid p{font-size:.96rem;margin:0;color:var(--text-body)}

.feria{background:linear-gradient(180deg,var(--sd-sky-100) 0%,#fff 100%)}
.sd-feria-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.sd-feria-grid h2{font-size:var(--text-h1);margin:14px 0}
.sd-feria-grid .lead{font-size:var(--text-lead);color:var(--text-body);margin:0 0 22px}
.feria__badges{display:flex;gap:10px;flex-wrap:wrap}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:18px;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-xs)}
.steps .n{flex:none;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--sd-navy);color:#fff;font-family:var(--font-display);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center}
.steps h3{font-size:1.1rem;margin:2px 0 4px}.steps p{margin:0;font-size:.95rem;color:var(--text-body)}

.sd-story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.story__photo{position:relative;border-radius:var(--radius-xl);aspect-ratio:4/5;overflow:hidden;box-shadow:var(--shadow-md)}
.story__photo img{width:100%;height:100%;object-fit:cover;display:block}
.story__more{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.story__more img{width:100%;height:220px;object-fit:cover;display:block}
.story__more .bd{padding:22px}
.story__more .q{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.4;margin:0 0 14px;color:var(--text-strong)}
.story__more .a{margin:0;font-weight:700;font-size:.92rem}.story__more .r{margin:0;font-size:.85rem;color:var(--text-muted)}

.allies{background:var(--surface-subtle)}
.allies h2{font-size:var(--text-h2)}
.allies__logos{display:flex;flex-direction:column;align-items:center;gap:30px}
.allies__lab{color:var(--text-muted);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.allies__rule{width:100%;max-width:880px;height:1px;background:var(--border-default);margin:8px 0 4px}

.sd-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cta{color:#fff;border:0}
.cta--azure{background:var(--sd-azure)}.cta--navy{background:var(--sd-navy)}
.cta__in{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;height:100%}
.cta__ic{display:inline-flex;width:52px;height:52px;border-radius:var(--radius-md);background:rgba(255,255,255,.16);align-items:center;justify-content:center;margin-bottom:20px;color:#fff}
.cta__ic .ic{width:26px;height:26px}
.cta h2{font-size:var(--text-h2);margin:0 0 12px;color:#fff}
.cta p{font-size:var(--text-base);color:rgba(255,255,255,.86);margin:0 0 26px;max-width:40ch;flex:1}

.footer{background:var(--sd-navy-900);color:#fff;padding-top:var(--section-y-tight)}
.sd-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.footer__logo img{height:58px;width:auto;display:block}
.footer p{color:var(--text-on-navy-muted);max-width:40ch;margin:18px 0 0;font-size:.95rem}
.footer h4{color:#fff;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer li,.footer li a{color:var(--text-on-navy-muted);text-decoration:none;font-size:.95rem}
.footer li a:hover{color:#fff}
.footer__bottom{border-top:1px solid var(--divider-on-navy)}
.footer__bottom .sd-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-block:20px;color:var(--text-on-navy-muted);font-size:.85rem}
.footer__bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal__bg{position:absolute;inset:0;background:rgba(0,32,92,.55);backdrop-filter:blur(6px)}
.modal__box{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto}
.modal__close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.modal__close .ic{width:18px;height:18px}
.modal form{display:grid;gap:16px}
.modal h3{font-size:var(--text-h3);margin:10px 0 6px}
.modal .intro{margin:0;color:var(--text-body);font-size:.95rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.modal-open{overflow:hidden}

/* ---- Responsive ---- */
@media(max-width:1000px){.sd-tabs button{font-size:.8rem;padding:8px 12px}}
@media(max-width:880px){
.nav__links{display:none}.nav__burger{display:inline-flex}.nav__cta{display:none}
.hero__grid{grid-template-columns:1fr}.hero__photo img{max-height:360px}
.sd-stats-grid{grid-template-columns:repeat(2,1fr);gap:28px}
.sd-prog-grid{grid-template-columns:repeat(2,1fr)}
.sd-feria-grid,.sd-story-grid,.sd-cta-grid,.sd-footer-grid,.story__more{grid-template-columns:1fr}
.story__photo{max-width:380px}
.field-row{grid-template-columns:1fr}}
@media(max-width:560px){.sd-stats-grid,.sd-prog-grid{grid-template-columns:1fr}}

/* ===== Franja institucional (requisito INDOTEL) ===== */
.gov-bar{background:var(--sd-navy);color:#fff;font-size:13px;line-height:1.3;font-weight:500;letter-spacing:.01em}
.gov-bar__in{display:flex;align-items:center;gap:10px;padding:7px 0;min-height:30px}
.gov-bar img{display:block;width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35);flex:none}
.gov-bar span{opacity:.95}
@media (max-width:640px){.gov-bar{font-size:12px}.gov-bar__in{gap:8px;padding:6px 0}}

/* Honeypot anti-spam: fuera de pantalla, nunca display:none (algunos bots lo detectan) */
.sd-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Aviso de medición ---------------------------------------------------------------------- */
/* Franja al pie: informa y pide permiso sin tapar el contenido. Lo inyecta js/analitica.js, así que las tres
   páginas lo tienen sin repetir marcado. Ojo: .sd-consent es la casilla del formulario, no esto. */
.sd-aviso{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface-card);border-top:1px solid var(--border-subtle);box-shadow:0 -10px 30px rgba(0,26,56,.10);animation:sd-aviso-in .35s cubic-bezier(.16,1,.3,1) both}
.sd-aviso__in{width:100%;max-width:var(--container-max);margin-inline:auto;padding:18px var(--gutter);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.sd-aviso__txt{margin:0;flex:1 1 420px;font-size:.92rem;line-height:1.55;color:var(--text-body)}
.sd-aviso__txt strong{color:var(--text-strong)}
.sd-aviso__txt a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
.sd-aviso__btns{display:flex;gap:10px;flex:0 0 auto}
@keyframes sd-aviso-in{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.sd-aviso{animation:none}}
@media(max-width:620px){.sd-aviso__in{gap:14px}.sd-aviso__btns{width:100%}.sd-aviso__btns .sd-btn{flex:1}}