/* =========================================
   MyData — Landing Pre-inscripción (v5)
   Generado el 2026-05-03 desde preview integrado.
   Tipografía: Manrope (Google Fonts)
   Paleta: brand #1C3E8A, acento #3B82F6
   ========================================= */

/* ====== Reset y globales ====== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #FAFBFE; color: #0B1229;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}

/* ============================================================
   SITE HEADER (Opción A) — namespace .site-header
   ============================================================ */
.site-header {
  --sh-brand:       #1C3E8A;
  --sh-brand-hover: #162F6B;
  --sh-accent:      #3B82F6;
  --sh-bg:          #FAFBFE;
  --sh-surface:     #FFFFFF;
  --sh-text:        #0B1229;
  --sh-text-muted:  #5e6b7a;
  --sh-border:      #E5E7EB;
  --sh-brand-bg:    #EEF1F8;
  --sh-h-top:       72px;
  --sh-h-scrolled:  56px;

  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1),
              box-shadow      250ms cubic-bezier(0.4,0,0.2,1),
              border-color    250ms cubic-bezier(0.4,0,0.2,1);
}
.site-header[data-state="scrolled"] {
  background: var(--sh-surface);
  border-bottom-color: var(--sh-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.site-header__inner {
  max-width: 1120px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--sh-h-top);
  transition: height 250ms cubic-bezier(0.4,0,0.2,1);
}
.site-header[data-state="scrolled"] .site-header__inner { height: var(--sh-h-scrolled); }
.site-header__brand {
  display: inline-flex; align-items: center; text-decoration: none; line-height: 0;
}
.site-header__brand:focus-visible {
  outline: 3px solid var(--sh-accent); outline-offset: 4px; border-radius: 4px;
}
.site-header__logo {
  height: 38px; width: auto; display: block;
  transition: height 250ms cubic-bezier(0.4,0,0.2,1);
}
.site-header[data-state="scrolled"] .site-header__logo { height: 32px; }
.site-header__actions { display: none; align-items: center; gap: 8px; }
.site-header__signin {
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--sh-text); text-decoration: none;
  padding: 10px 14px; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: 8px; border: 1px solid transparent;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1),
              color 150ms, border-color 150ms;
}
.site-header__signin:hover {
  background: var(--sh-brand-bg); color: var(--sh-brand);
}
.site-header__signin:focus-visible {
  outline: 3px solid var(--sh-accent); outline-offset: 2px;
}

/* Header CTA primario (Pre-inscribirme) — añadido en revisión 2026-05-04. */
.site-header__cta {
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  background: var(--sh-brand); color: #fff; text-decoration: none;
  padding: 10px 16px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid transparent;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.site-header__cta:hover { background: var(--sh-brand-hover); }
.site-header__cta:focus-visible {
  outline: 3px solid var(--sh-accent); outline-offset: 2px;
}

/* Header nav inline — visible solo en desktop (≥880px). */
.site-header__nav { display: none; }
.site-header__nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; align-items: center;
}
.site-header__nav-link {
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--sh-text); text-decoration: none;
  padding: 10px 14px; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: 8px;
  transition: background-color 150ms ease, color 150ms ease;
}
.site-header__nav-link:hover {
  background: var(--sh-brand-bg); color: var(--sh-brand);
}
.site-header__nav-link:focus-visible {
  outline: 3px solid var(--sh-accent); outline-offset: 2px;
}

/* Mobile menu — usa <details>/<summary> para evitar JS.
   El botón hamburguesa es el <summary>; el panel se abre con [open]. */
.site-header__mobile { position: static; display: inline-block; }
.site-header__menu-toggle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--sh-border);
  background: transparent; color: var(--sh-text);
  cursor: pointer;
  list-style: none;
  -webkit-appearance: none; appearance: none;
}
.site-header__menu-toggle::-webkit-details-marker { display: none; }
.site-header__menu-toggle::marker { content: ''; }
.site-header__menu-toggle:focus-visible {
  outline: 3px solid var(--sh-accent); outline-offset: 2px;
}
.site-header__menu-icon { width: 22px; height: 22px; }
.site-header__menu-icon--close { display: none; }
.site-header__mobile[open] .site-header__menu-icon--open { display: none; }
.site-header__mobile[open] .site-header__menu-icon--close { display: inline; }

/* Panel deslizable: cubre el ancho del viewport, posicionado bajo el header. */
.site-header__mobile-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--sh-surface);
  border-top: 1px solid var(--sh-border);
  border-bottom: 1px solid var(--sh-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 8px 20px 20px;
  display: flex; flex-direction: column; gap: 0;
}
.site-header__mobile-panel .site-header__nav-link {
  width: 100%;
  padding: 14px 4px;
  border-bottom: 1px solid var(--sh-border);
  font-size: 16px; border-radius: 0;
}
.site-header__mobile-panel .site-header__cta {
  width: 100%; margin-top: 16px; justify-content: center;
  font-size: 15px;
}
.site-header__mobile-panel .site-header__signin {
  width: 100%; margin-top: 4px; justify-content: center;
  font-size: 15px;
}

@media (min-width: 768px) {
  .site-header { --sh-h-top: 84px; --sh-h-scrolled: 64px; }
  .site-header__inner { padding: 12px 32px; }
  .site-header__logo { height: 44px; }
  .site-header[data-state="scrolled"] .site-header__logo { height: 34px; }
  .site-header__signin { font-size: 15px; padding: 10px 18px; }
  .site-header__cta { font-size: 15px; padding: 10px 18px; }
}

/* Desktop ≥880: nav inline + actions visibles, hamburguesa oculta. */
@media (min-width: 880px) {
  .site-header__nav {
    display: flex;
    flex: 1;
    justify-content: center;
    margin: 0 24px;
  }
  .site-header__actions { display: flex; }
  .site-header__mobile { display: none; }
}

@media (min-width: 1100px) {
  .site-header__inner { padding: 12px 40px; }
  .site-header__nav-list { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .site-header__logo { transition: none; }
}

/* ============================================================
   HERO v5 final — namespace .hero
   ============================================================ */
.hero {
  --h-brand:       #1C3E8A;
  --h-brand-hover: #162F6B;
  --h-accent:      #3B82F6;
  --h-green:       #16A34A;
  --h-bg:          #FAFBFE;
  --h-surface:     #FFFFFF;
  --h-text:        #0B1229;
  --h-text-muted:  #5e6b7a;
  --h-border:      #E5E7EB;
  --h-brand-bg:    #EEF1F8;
  --h-brand-light: #C8D4F0;

  background: var(--h-bg);
  color: var(--h-text);
  /* padding-top compensa el header fijo (72px mobile / 84px ≥768) */
  padding: 88px 20px 32px;
}
@media (min-width: 768px) { .hero { padding: 104px 32px 40px; } }
@media (min-width: 880px) { .hero { padding: 104px 40px 40px; } }
@media (min-width: 1100px) { .hero { padding: 116px 40px 56px; } }

.hero__inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}
@media (min-width: 1100px) {
  .hero__inner { gap: 64px; }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--h-brand);
  background: var(--h-brand-bg);
  padding: 6px 12px; border-radius: 9999px;
  margin: 0 0 20px;
}
.hero__eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.hero__title {
  font-size: clamp(32px, 6vw, 52px); line-height: 1.1; font-weight: 800;
  letter-spacing: -0.01em; color: var(--h-text);
  margin: 0 0 20px; text-wrap: balance;
}
.hero__title .accent { color: var(--h-brand); }
.hero__sub {
  font-size: clamp(16px, 2.2vw, 18px); line-height: 1.55;
  color: var(--h-text-muted);
  margin: 0 0 20px; max-width: 52ch; text-wrap: pretty;
}

/* Hero promise — diferenciador funcional ("se completa solo").
   Bloque destacado entre subtítulo y CTAs. Añadido en revisión 2026-05-04. */
.hero__promise {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--h-brand-bg);
  border-left: 3px solid var(--h-brand);
  border-radius: 0 12px 12px 0;
  max-width: 52ch;
}
.hero__promise svg {
  width: 22px; height: 22px;
  color: var(--h-brand);
  flex-shrink: 0; margin-top: 2px;
}
.hero__promise-text {
  margin: 0;
  font-size: 15px; line-height: 1.55;
  color: var(--h-text);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.hero__promise-text strong {
  color: var(--h-brand); font-weight: 800;
}
@media (min-width: 768px) {
  .hero__promise-text { font-size: 16px; }
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 8px; padding: 14px 22px; min-height: 48px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1),
              color 150ms cubic-bezier(0.4,0,0.2,1),
              border-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.hero__cta--primary { background: var(--h-brand); color: #fff; }
.hero__cta--primary:hover { background: var(--h-brand-hover); }
.hero__cta--primary:focus-visible {
  outline: 3px solid var(--h-accent); outline-offset: 2px;
}
.hero__cta--secondary {
  background: transparent; color: var(--h-brand);
  border-color: var(--h-border);
}
.hero__cta--secondary:hover {
  background: var(--h-brand-bg); border-color: var(--h-brand-light);
}
.hero__cta--secondary:focus-visible {
  outline: 3px solid var(--h-accent); outline-offset: 2px;
}
.hero__cta svg { width: 16px; height: 16px; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 18px 22px;
  padding: 0; margin: 0; list-style: none;
}
.hero__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--h-text-muted); line-height: 1.4;
}
.hero__trust svg {
  width: 16px; height: 16px; color: var(--h-green); flex-shrink: 0;
}
.hero__trust-todo {
  color: #D97706; font-style: italic; font-weight: 500;
}
.hero__visual {
  width: 100%; aspect-ratio: 1 / 1;
  max-width: 520px; margin: 0 auto;
}
.hero__photo {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 16px;
  background: var(--h-brand-bg);
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero__visual *,
  .hero__visual *::before,
  .hero__visual *::after {
    animation: none !important; transition: none !important;
  }
}

/* ============================================================
   SECCIÓN "QUÉ CENTRALIZAS" — namespace .qc
   ============================================================ */
.qc {
  --qc-brand:        #1C3E8A;
  --qc-brand-bg:     #EEF1F8;
  --qc-brand-light:  #C8D4F0;
  --qc-bg:           #1C3E8A;
  --qc-surface:      #FFFFFF;
  --qc-text:         #FFFFFF;
  --qc-text-muted:   rgba(255,255,255,0.78);
  --qc-border:       rgba(255,255,255,0.12);
  --qc-card-text:    #0B1229;
  --qc-card-muted:   #5e6b7a;

  background: var(--qc-bg);
  color: var(--qc-text);
  font-family: 'Manrope', system-ui, sans-serif;
  padding: 32px 20px;
  border-top: 1px solid var(--qc-border);
}
.qc__inner { max-width: 1120px; margin: 0 auto; }
.qc__head { margin: 0 0 24px; max-width: 56ch; }
.qc__title {
  font-size: clamp(26px, 4vw, 36px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.15;
  margin: 0 0 12px; color: var(--qc-text); text-wrap: balance;
}
.qc__sub {
  font-size: 16px; line-height: 1.55;
  color: var(--qc-text-muted); margin: 0; text-wrap: pretty;
}
.qc__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
.qc__card {
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-radius: 12px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  color: var(--qc-card-text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.qc__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qc-brand-bg); color: var(--qc-brand);
  border-radius: 10px; flex-shrink: 0;
}
.qc__icon svg { width: 22px; height: 22px; }
.qc__card-title {
  margin: 0; font-size: 17px; font-weight: 700;
  letter-spacing: -0.005em; color: var(--qc-card-text);
  line-height: 1.3; text-wrap: balance;
}
.qc__card-desc {
  margin: 0; font-size: 14.5px; line-height: 1.55;
  color: var(--qc-card-muted); text-wrap: pretty;
}
.qc__card-items {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.qc__card-items li {
  background: var(--qc-brand-bg); color: var(--qc-brand);
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 9999px;
}
@media (min-width: 760px) {
  .qc { padding: 40px 32px; }
  .qc__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .qc__card { padding: 28px; }
}
@media (min-width: 1100px) {
  .qc { padding: 56px 40px; }
}

/* ============================================================
   SECCIÓN "CÓMO EMPIEZAS" v3 — namespace .cf
   Timeline horizontal en desktop (≥760px), vertical en mobile.
   Reemplaza la lista numerada de v2.  Revisión 2026-05-04.
   ============================================================ */
.cf {
  --cf-brand:        #1C3E8A;
  --cf-brand-hover:  #162F6B;
  --cf-brand-bg:     #EEF1F8;
  --cf-brand-light:  #C8D4F0;
  --cf-accent:       #3B82F6;
  --cf-bg:           #FFFFFF;
  --cf-surface:      #FFFFFF;
  --cf-text:         #0B1229;
  --cf-text-muted:   #1F2937;
  --cf-border:       #E5E7EB;
  /* Tokens del timeline — recalculados por viewport más abajo. */
  --cf-circle-size:  88px;
  --cf-badge-h:      26px;
  --cf-badge-gap:    10px;

  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: 'Manrope', system-ui, sans-serif;
  padding: 40px 20px 32px;
  border-top: 1px solid var(--cf-border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cf::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('media/cf-bg-v1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.cf__inner { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }
.cf__head  { margin: 0 auto 28px; max-width: 56ch; text-align: center; }
.cf__title {
  font-size: clamp(26px, 4vw, 36px); font-weight: 900;
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 12px;
  text-wrap: balance;
}
.cf__sub {
  font-size: 16px; line-height: 1.55; color: var(--cf-text-muted);
  margin: 0; text-wrap: pretty;
  font-weight: 600;
}

/* Steps container — mobile: stack vertical. Desktop: 3 columnas. */
.cf__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}

/* Cada step: badge → círculo → título → descripción, todos centrados. */
.cf__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}

/* Badge con número (sobre el círculo). */
.cf__num-badge {
  height: var(--cf-badge-h); min-width: var(--cf-badge-h);
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cf-brand-bg); color: var(--cf-brand);
  border-radius: 9999px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--cf-badge-gap);
}

/* Círculo brand grande con icono blanco al centro. */
.cf__circle {
  width: var(--cf-circle-size); height: var(--cf-circle-size);
  border-radius: 50%;
  background: var(--cf-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(28,62,138,0.18);
  margin-bottom: 18px;
}
.cf__circle svg { width: 36px; height: 36px; }

.cf__step-title {
  margin: 0; font-size: 18px; font-weight: 900;
  letter-spacing: -0.005em; color: var(--cf-text); line-height: 1.3;
  text-wrap: balance;
}
.cf__step-desc {
  margin: 0; font-size: 14.5px; line-height: 1.6;
  color: var(--cf-text-muted); text-wrap: pretty;
  max-width: 38ch;
  font-weight: 600;
}

/* Highlight en step 3: "se completa solo". Echo del hero promise. */
.cf__step-highlight {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--cf-brand); font-weight: 800;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 38ch;
}

/* Connector vertical (mobile) entre steps consecutivos.
   gap del grid es 24px → conector 10px alto centrado: bottom:-17px. */
.cf__step:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -17px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 10px;
  background: var(--cf-brand-light);
  z-index: 0;
}

/* CTA block al final de la sección. */
.cf__cta-block {
  margin: 32px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.cf__cta-lead {
  margin: 0;
  font-size: 18px; font-weight: 800; letter-spacing: -0.005em;
  color: var(--cf-text);
}
.cf__cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em;
  background: var(--cf-brand); color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 14px 24px; min-height: 48px;
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.cf__cta-btn:hover { background: var(--cf-brand-hover); }
.cf__cta-btn:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 2px; }
.cf__cta-btn svg { width: 16px; height: 16px; }

/* Desktop ≥760: 3 columnas + línea horizontal detrás de los círculos.
   La línea atraviesa los 3 círculos; los círculos (z-index 1, fondo opaco)
   tapan la línea donde están sentados, dejando solo los segmentos visibles
   entre ellos. Línea acotada por inset-inline para no salir más allá. */
@media (min-width: 760px) {
  .cf {
    --cf-circle-size: 96px;
    padding: 56px 32px 40px;
  }
  .cf__head { margin-bottom: 40px; }
  .cf__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .cf__steps::before {
    content: '';
    position: absolute;
    top: calc(var(--cf-badge-h) + var(--cf-badge-gap) + var(--cf-circle-size) / 2 - 1px);
    left: calc(100% / 6); right: calc(100% / 6);
    height: 2px;
    background: var(--cf-brand-light);
    z-index: 0;
  }
  .cf__step:not(:last-child)::after { display: none; }
  .cf__step-title { font-size: 20px; }
  .cf__step-desc { font-size: 15px; }
  .cf__step-highlight { font-size: 15px; }
}

@media (min-width: 1100px) {
  .cf {
    --cf-circle-size: 104px;
    padding: 64px 40px 48px;
  }
  .cf__circle svg { width: 40px; height: 40px; }
  .cf__cta-block { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf *, .cf *::before, .cf *::after {
    animation: none !important; transition: none !important;
  }
}

/* ============================================================
   SECCIÓN "TU INFORMACIÓN, PROTEGIDA" — namespace .sec
   ============================================================ */
.sec {
  --sec-brand:       #1C3E8A;
  --sec-brand-bg:    #EEF1F8;
  --sec-brand-light: #C8D4F0;
  --sec-bg:          #FAFBFE;
  --sec-surface:     #FFFFFF;
  --sec-text:        #0B1229;
  --sec-text-muted:  #5e6b7a;
  --sec-border:      #E5E7EB;
  --sec-warning:     #D97706;
  --sec-green:       #16A34A;

  background: var(--sec-bg);
  color: var(--sec-text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 32px 20px;
  border-top: 1px solid var(--sec-border);
  box-shadow: inset 0 1px 0 rgba(28,62,138,0.04);
}
.sec__inner { max-width: 1120px; margin: 0 auto; }
.sec__head { margin: 0 0 32px; max-width: 56ch; }
.sec__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--sec-brand);
  background: var(--sec-brand-bg); padding: 6px 12px;
  border-radius: 9999px; margin: 0 0 16px;
}
.sec__eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.sec__title {
  font-size: clamp(26px, 4vw, 36px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 12px;
  text-wrap: balance;
}
.sec__sub {
  font-size: 16px; line-height: 1.55; color: var(--sec-text-muted);
  margin: 0; text-wrap: pretty;
}
.sec__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.sec__card {
  background: var(--sec-surface);
  border: 1px solid var(--sec-border);
  border-radius: 12px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 2px rgba(11,18,41,0.03);
}
.sec__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sec-brand-bg); color: var(--sec-brand);
  border-radius: 10px;
}
.sec__icon svg { width: 22px; height: 22px; }
.sec__card-title {
  margin: 0; font-size: 17px; font-weight: 700;
  letter-spacing: -0.005em; color: var(--sec-text); line-height: 1.3;
  text-wrap: balance;
}
.sec__card-desc {
  margin: 0; font-size: 14.5px; line-height: 1.6;
  color: var(--sec-text-muted); text-wrap: pretty;
}
.sec__card-desc--pending {
  color: var(--sec-warning); font-style: italic; font-weight: 500;
}
.sec__card-ref {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--sec-border);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sec-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.sec__card-ref::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--sec-brand-light);
}
@media (min-width: 760px) {
  .sec { padding: 40px 32px; }
  .sec__head { margin-bottom: 28px; }
  .sec__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sec__card { padding: 28px; }
}
@media (min-width: 1100px) {
  .sec { padding: 56px 40px; }
  .sec__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sec *, .sec *::before, .sec *::after {
    animation: none !important; transition: none !important;
  }
}

/* ============================================================
   SECCIÓN "LA HISTORIA DETRÁS" — namespace .vid
   ============================================================ */
.vid {
  --vid-brand:       #1C3E8A;
  --vid-brand-hover: #162F6B;
  --vid-brand-bg:    #EEF1F8;
  --vid-brand-light: #C8D4F0;
  --vid-accent:      #3B82F6;
  --vid-bg:          #FFFFFF;
  --vid-text:        #0B1229;
  --vid-text-muted:  #5e6b7a;
  --vid-border:      #E5E7EB;

  background: var(--vid-bg);
  color: var(--vid-text);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 32px 20px;
  border-top: 1px solid var(--vid-border);
}
.vid__inner { max-width: 1120px; margin: 0 auto; }
.vid__head { margin: 0 auto 32px; max-width: 56ch; text-align: center; }
.vid__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--vid-brand);
  background: var(--vid-brand-bg); padding: 6px 12px;
  border-radius: 9999px; margin: 0 0 16px;
}
.vid__eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.vid__title {
  font-size: clamp(26px, 4vw, 36px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 12px;
  text-wrap: balance;
}
.vid__sub {
  font-size: 16px; line-height: 1.55; color: var(--vid-text-muted);
  margin: 0; text-wrap: pretty;
}
.vid__player { max-width: 800px; margin: 0 auto; position: relative; }
.vid__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #0B1229;
  box-shadow: 0 1px 2px rgba(11,18,41,0.04),
              0 12px 40px rgba(11,18,41,0.10);
}
.vid__facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  background-color: #0B1229;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font: inherit; color: inherit;
  background-image: url("media/video/poster-fundador.webp");
  transition: filter 200ms ease, transform 300ms cubic-bezier(0.4,0,0.2,1);
}
.vid__facade::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%),
    radial-gradient(circle at center, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
  pointer-events: none;
  transition: opacity 200ms ease;
}
.vid__facade:hover { filter: brightness(1.05); }
.vid__facade:hover .vid__play {
  transform: translate(-50%, -50%) scale(1.05);
  background: #fff;
}
.vid__facade:focus-visible {
  outline: 3px solid var(--vid-accent); outline-offset: 4px;
}
.vid__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.95);
  color: var(--vid-brand);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1),
              background-color 150ms ease;
  pointer-events: none;
}
.vid__play svg { width: 28px; height: 28px; margin-left: 4px; }
.vid__duration {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(11,18,41,0.85); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  letter-spacing: 0.02em; pointer-events: none;
  backdrop-filter: blur(2px);
}
.vid__iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.vid__caption {
  margin: 16px 0 0; text-align: center;
  font-size: 13px; color: var(--vid-text-muted);
  letter-spacing: 0.02em;
}
.vid__caption b { color: var(--vid-text); font-weight: 700; }
.vid__caption .sep { display: inline-block; margin: 0 8px; color: var(--vid-brand-light); }
@media (min-width: 760px) { .vid { padding: 40px 32px; } }
@media (min-width: 1100px) {
  .vid { padding: 56px 40px; }
  .vid__head { margin-bottom: 28px; }
  .vid__play { width: 96px; height: 96px; }
  .vid__play svg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .vid *, .vid *::before, .vid *::after {
    animation: none !important; transition: none !important;
  }
}

/* ============================================================
   SECCIÓN "PRE-INSCRIPCIÓN" — namespace .pre
   ============================================================ */
.pre {
  --pre-brand:        #1C3E8A;
  --pre-brand-hover:  #162F6B;
  --pre-brand-bg:     #EEF1F8;
  --pre-brand-light:  #C8D4F0;
  --pre-accent:       #3B82F6;
  --pre-bg:           #FAFBFE;
  --pre-surface:      #FFFFFF;
  --pre-text:         #0B1229;
  --pre-text-muted:   #5e6b7a;
  --pre-border:       #E5E7EB;
  --pre-error:        #DC2626;
  --pre-error-bg:     #FEE2E2;
  --pre-success:      #16A34A;
  --pre-success-bg:   #DCFCE7;

  background: var(--pre-bg);
  color: var(--pre-text);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 32px 20px;
  border-top: 1px solid var(--pre-border);
}
.pre__inner { max-width: 1120px; margin: 0 auto; }
.pre__head { margin: 0 auto 32px; max-width: 56ch; text-align: center; }
.pre__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--pre-brand);
  background: var(--pre-brand-bg); padding: 6px 12px;
  border-radius: 9999px; margin: 0 0 16px;
}
.pre__eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.pre__title {
  font-size: clamp(26px, 4vw, 36px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 12px;
  text-wrap: balance;
}
.pre__sub {
  font-size: 16px; line-height: 1.55; color: var(--pre-text-muted);
  margin: 0; text-wrap: pretty;
}
.pre__sub b { color: var(--pre-text); font-weight: 700; }
.pre__card {
  max-width: 560px; margin: 0 auto;
  background: var(--pre-surface);
  border: 1px solid var(--pre-border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(11,18,41,0.03),
              0 12px 40px rgba(11,18,41,0.06);
}
.pre__form { display: flex; flex-direction: column; gap: 18px; }
.pre__field { display: flex; flex-direction: column; gap: 6px; }
.pre__label {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--pre-text);
}
.pre__label .req { color: var(--pre-text-muted); font-weight: 500; margin-left: 2px; }
.pre__input {
  font-family: inherit; font-size: 16px;
  font-weight: 500; color: var(--pre-text);
  background: var(--pre-surface);
  border: 1px solid var(--pre-border);
  border-radius: 8px;
  padding: 12px 14px; min-height: 48px; line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.pre__input::placeholder { color: var(--pre-text-muted); opacity: 0.65; }
.pre__input:hover { border-color: var(--pre-brand-light); }
.pre__input:focus {
  outline: 0;
  border-color: var(--pre-brand);
  box-shadow: 0 0 0 3px rgba(28,62,138,0.15);
}
.pre__input:user-invalid,
.pre__input--invalid {
  border-color: var(--pre-error);
  background: #FEFAFA;
}
.pre__input:user-invalid:focus,
.pre__input--invalid:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}
.pre__error {
  font-size: 12.5px; line-height: 1.4;
  color: var(--pre-error); font-weight: 500;
  display: none; align-items: flex-start; gap: 6px;
  margin: 0;
}
.pre__error svg { width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; }
.pre__input:user-invalid ~ .pre__error,
.pre__input--invalid ~ .pre__error { display: inline-flex; }
.pre__captcha {
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
}
.pre__captcha-mock {
  width: 304px; max-width: 100%;
  height: 78px;
  background: #F9F9F9;
  border: 1px solid #D3D3D3;
  border-radius: 3px;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 12px;
  font-family: 'Roboto', Arial, sans-serif;
  color: #555; font-size: 14px;
}
.pre__captcha-mock input[type="checkbox"] {
  width: 24px; height: 24px;
  accent-color: var(--pre-brand);
  cursor: pointer;
}
.pre__captcha-mock .label { flex: 1; }
.pre__captcha-mock .brand {
  text-align: center; font-size: 9px; color: #9AA;
  line-height: 1.2;
}
.pre__captcha-mock .brand b { color: #555; font-weight: 700; font-size: 10px; }
.pre__captcha-error {
  font-size: 12.5px; color: var(--pre-error); font-weight: 500;
  display: none; align-items: center; gap: 6px;
  margin: 0;
}
.pre__captcha-error.is-visible { display: inline-flex; }
.pre__submit {
  font-family: inherit;
  font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
  color: #fff;
  background: var(--pre-brand);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 14px 22px;
  min-height: 52px;
  cursor: pointer;
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color 150ms ease, transform 100ms ease;
}
.pre__submit:hover { background: var(--pre-brand-hover); }
.pre__submit:active { transform: translateY(1px); }
.pre__submit:focus-visible { outline: 3px solid var(--pre-accent); outline-offset: 2px; }
.pre__submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.pre__submit .spinner {
  width: 16px; height: 16px; border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  animation: pre-spin 700ms linear infinite;
  display: none;
}
.pre__submit.is-loading .spinner { display: inline-block; }
.pre__submit.is-loading .label { opacity: 0.85; }
@keyframes pre-spin { to { transform: rotate(360deg); } }
.pre__privacy {
  margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--pre-text-muted);
  text-align: center; text-wrap: pretty;
}
.pre__privacy b { color: var(--pre-text); font-weight: 700; }
.pre__feedback {
  display: none;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 14px; line-height: 1.55;
  align-items: flex-start; gap: 12px;
  margin: 0 0 16px;
}
.pre__feedback.is-visible { display: flex; }
.pre__feedback svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
#form-success {
  background: var(--pre-success-bg);
  color: #14532D;
  border: 1px solid #BBF7D0;
}
#form-success svg { color: var(--pre-success); }
#form-success b { color: #166534; font-weight: 700; }
#form-success a { color: #166534; text-decoration: underline; font-weight: 600; }
#form-error {
  background: var(--pre-error-bg);
  color: #7F1D1D;
  border: 1px solid #FCA5A5;
}
#form-error svg { color: var(--pre-error); }
#form-error b { color: #991B1B; font-weight: 700; }
#form-error a { color: #991B1B; text-decoration: underline; font-weight: 600; }
.pre__card.is-success .pre__form { display: none; }
@media (min-width: 760px) {
  .pre { padding: 40px 32px; }
  .pre__head { margin-bottom: 28px; }
  .pre__card { padding: 40px 36px; }
}
@media (min-width: 1100px) {
  .pre { padding: 56px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pre *, .pre *::before, .pre *::after {
    animation: none !important; transition: none !important;
  }
}

/* ============================================================
   SECCIÓN "EQUIPO + MISIÓN" — namespace .team
   ============================================================ */
.team {
  --team-brand:        #1C3E8A;
  --team-brand-bg:     #EEF1F8;
  --team-brand-light:  #C8D4F0;
  --team-bg:           #FAFBFE;
  --team-surface:      #FFFFFF;
  --team-text:         #0B1229;
  --team-text-muted:   #5e6b7a;
  --team-border:       #E5E7EB;
  --team-warning:      #D97706;

  background: var(--team-bg);
  color: var(--team-text);
  font-family: 'Manrope', system-ui, sans-serif;
  padding: 32px 20px;
  border-top: 1px solid var(--team-border);
}
.team__inner { max-width: 1120px; margin: 0 auto; }
.team__head { margin: 0 0 32px; max-width: 56ch; text-align: left; }
.team__title {
  font-size: clamp(26px, 4vw, 36px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 12px;
  text-wrap: balance;
}
.team__sub {
  font-size: 16px; line-height: 1.55; color: var(--team-text-muted);
  margin: 0; text-wrap: pretty; max-width: 60ch;
}
.team__grid {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
.team__card {
  background: var(--team-surface);
  border: 1px solid var(--team-border);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.team__photo {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--team-brand-bg);
  color: var(--team-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--team-brand-light);
  position: relative;
}
.team__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
  position: relative; z-index: 1;
}
.team__photo-fallback {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  pointer-events: none;
}
.team__meta { display: flex; flex-direction: column; gap: 2px; }
.team__name {
  margin: 0; font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--team-text); line-height: 1.25;
}
.team__role {
  margin: 0; font-size: 13.5px; font-weight: 600;
  color: var(--team-brand); letter-spacing: 0.005em;
}
.team__bio {
  margin: 0; font-size: 14.5px; line-height: 1.55;
  color: var(--team-text-muted); text-wrap: pretty;
}
.team__bio--pending {
  color: var(--team-warning);
  font-style: italic;
  font-weight: 500;
}
.team__mission {
  background: var(--team-surface);
  border: 1px solid var(--team-border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.team__mission-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--team-brand-bg); color: var(--team-brand);
  border-radius: 12px;
}
.team__mission-icon svg { width: 22px; height: 22px; }
.team__mission-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--team-brand);
  margin: 0;
}
.team__mission-text {
  margin: 0; font-size: 18px; line-height: 1.5;
  color: var(--team-text); font-weight: 500; letter-spacing: -0.005em;
  text-wrap: pretty;
}
.team__mission-text b { font-weight: 700; color: var(--team-text); }
@media (min-width: 760px) {
  .team { padding: 40px 32px; }
  .team__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .team__card { padding: 24px; flex-direction: column; align-items: flex-start; }
  .team__photo { width: 96px; height: 96px; font-size: 28px; }
  .team__card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .team__mission { padding: 36px 32px; flex-direction: row; align-items: flex-start; gap: 24px; }
  .team__mission-icon { width: 56px; height: 56px; flex-shrink: 0; }
  .team__mission-icon svg { width: 28px; height: 28px; }
  .team__mission-body { flex: 1; }
  .team__mission-text { font-size: 20px; line-height: 1.5; max-width: 60ch; }
}
@media (min-width: 1100px) {
  .team { padding: 56px 40px; }
}

/* ============================================================
   FOOTER — namespace .site-footer
   ============================================================ */
.site-footer {
  --footer-bg:          #0F2559;
  --footer-bg-soft:     #15306D;
  --footer-text:        #E5E9F4;
  --footer-text-muted:  #A4B2D2;
  --footer-link:        #E5E9F4;
  --footer-link-hover:  #FFFFFF;
  --footer-border:      rgba(255,255,255,0.08);
  --footer-accent:      #C8D4F0;

  background: var(--footer-bg);
  color: var(--footer-text);
  font-family: 'Manrope', system-ui, sans-serif;
  padding: 48px 20px 28px;
}
.site-footer__inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}
.site-footer__top {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.site-footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.site-footer__logo svg { width: 32px; height: 32px; flex-shrink: 0; }
.site-footer__wordmark {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  color: #FFFFFF;
}
.site-footer__tagline {
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--footer-text-muted); text-wrap: pretty;
}
.site-footer__col h3 {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--footer-accent);
}
.site-footer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.site-footer__list a {
  color: var(--footer-link); text-decoration: none;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0;
  transition: color 150ms ease;
  border-radius: 4px;
}
.site-footer__list a:hover { color: var(--footer-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__list a:focus-visible {
  outline: 2px solid var(--footer-accent); outline-offset: 3px;
}
.site-footer__list svg { width: 16px; height: 16px; flex-shrink: 0; }
.site-footer__social { display: flex; gap: 10px; flex-wrap: wrap; }
.site-footer__social a {
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--footer-bg-soft);
  color: var(--footer-link);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, color 150ms ease;
  text-decoration: none;
}
.site-footer__social a:hover {
  background: #FFFFFF; color: var(--footer-bg);
}
.site-footer__social a:focus-visible {
  outline: 2px solid var(--footer-accent); outline-offset: 3px;
}
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__bottom {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-border);
  font-size: 12.5px; color: var(--footer-text-muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--footer-text-muted);
}
.site-footer__legal b { color: var(--footer-accent); font-weight: 700; }
@media (min-width: 760px) {
  .site-footer { padding: 64px 32px 32px; }
  .site-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 32px;
  }
  .site-footer__bottom {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 16px;
  }
}
@media (min-width: 1100px) {
  .site-footer { padding: 64px 40px 32px; }
  .site-footer__top {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer * { transition: none !important; }
}