/* ZOESYSTEM MLM · base.css (M06)
   Capas, en este orden: base → componentes → secciones → animaciones.
   Aquí: tokens del sistema de diseño, fuentes locales, reinicio, tipografía, foco visible por superficie y
   «reducir movimiento». Diseño desde el celular (min-width). Sin recursos de otros dominios (CSP: solo 'self'). */

@layer base, componentes, secciones, animaciones;

/* Las fuentes se piden al propio sitio y se precargan desde el HTML. */
@font-face {
  font-family: "Figtree";
  src: url("../fuentes/figtree.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fuentes/unbounded.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    /* Color de marca y neutros (skill de diseño, 3.1) */
    --zoe-100: #DDF6EE;
    --zoe-200: #74E7CA;
    --zoe-400: #2BB59B;
    --zoe-500: #189888;
    --zoe-700: #0B7A69;
    --zoe-800: #095E51;
    --pine-950: #0A2A26;
    --pine-925: #0B302C;
    --pine-900: #0F3B36;
    --pine-800: #15524B;
    --pine-700: #23574F;
    --pine-line: #2F6D64;
    --ink-900: #12302C;
    --ink-700: #33504B;
    --ink-600: #4A5F5B;
    --mist-50: #F2F7F5;
    --mist-100: #E8F1EE;
    --mist-200: #DCEAE6;
    --line: #E2ECE9;
    --white: #FFFFFF;
    --on-dark: #CFE7E1;
    --on-dark-2: #A9CFC6;
    --on-dark-3: #8FB5AC;
    --coin-400: #F5C451;
    --coin-ink: #2B2108;
    --error-700: #A3261B;
    --error-50: #FBEDEB;
    --borde-campo: #6E8C85;
    --borde-oscuro: #5A9A8F;
    --foco-claro: var(--zoe-700);
    --foco-oscuro: var(--zoe-200);
    --wa-fondo: #25D366;
    --wa-icono: #08341A;

    /* Foco: por defecto el de superficie clara; las superficies oscuras lo cambian (.sup-oscura) */
    --foco: var(--foco-claro);

    /* Tipografía */
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Unbounded", "Figtree", system-ui, sans-serif;

    /* Espacio (múltiplos de 4) */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 48px;
    --e-8: 64px;
    --e-9: 96px;
    --e-10: 128px;

    /* Contenedor: ancho útil máximo y margen lateral (16 px en menos de 400 px) */
    --ancho-max: 1240px;
    --margen: 16px;

    /* Forma y profundidad */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;
    --sombra-1: 0 1px 3px rgba(15, 59, 54, .2);
    --sombra-2: 0 18px 40px -24px rgba(15, 59, 54, .45);
    --sombra-3: 0 30px 60px -30px rgba(10, 42, 38, .6);
    --sombra-menta: 0 14px 34px -12px rgba(116, 231, 202, .55);

    /* Pulido «red bioluminiscente» (skill 1.2): solo transparencias de colores de marca ya existentes; ninguno se usa
       para texto. Contraste revisado en la skill, 3.2 y 6. */
    --sombra-suave: 0 1px 2px rgba(15, 59, 54, .06), 0 14px 32px -18px rgba(15, 59, 54, .3);
    --sombra-neon: 0 0 0 1px rgba(116, 231, 202, .32), 0 22px 56px -22px rgba(24, 152, 136, .7);
    --borde-neon: rgba(116, 231, 202, .26);
    --rejilla-oscura: rgba(116, 231, 202, .055);
    --rejilla-clara: rgba(11, 122, 105, .05);
    --halo-menta: rgba(24, 152, 136, .22);
    --vidrio-oscuro: rgba(10, 42, 38, .84);

    /* Movimiento (solo se anima transform y opacity; ver «reducir movimiento» al final) */
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 450ms;
    --dur-4: 700ms;
    --curva-salida: cubic-bezier(.2, .8, .2, 1);
    --curva-estandar: cubic-bezier(.4, 0, .2, 1);

    /* Capas */
    --z-contenido: 1;
    --z-flotante: 45;
    --z-encabezado: 50;
    --z-saltar: 100;

    /* Alto fijo del encabezado: no cambia al desplazarse (evita saltos, CLS). Lo usan sticky y los anclajes. */
    --header-h: 64px;
  }

  @media (min-width: 400px) { :root { --margen: 20px; } }
  @media (min-width: 640px) { :root { --margen: 24px; } }
  @media (min-width: 1024px) { :root { --header-h: 72px; } }
  @media (min-width: 1280px) { :root { --margen: 32px; } }

  /* Reinicio */
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-padding-bottom: 88px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
    /* Red de seguridad: ninguna página se desplaza en horizontal. Con «clip» el encabezado fijo sigue funcionando. */
    overflow-x: clip;
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-900);
    background: var(--mist-50);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas { display: block; max-width: 100%; height: auto; }
  svg { max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul, ol { margin: 0; padding: 0; }
  table { border-collapse: collapse; }

  /* «hidden» siempre gana: sin esto un display de componentes lo anularía */
  [hidden] { display: none !important; }

  /* El destino de «Saltar al contenido» recibe foco por programa, sin anillo (no es un control) */
  [tabindex="-1"]:focus { outline: none; }

  /* Tipografía (skill de diseño, sección 4) */
  h1, h2, h3, h4 {
    margin: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  h1, h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 2.6vw + 16px, 46px);
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  h3 {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(19px, .2vw + 18.3px, 21px);
    line-height: 1.25;
  }
  p { margin: 0 0 1em; max-width: 34em; }
  p:last-child { margin-bottom: 0; }
  strong, b { font-weight: 800; }

  .titular-1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 5.2vw + 14px, 76px);
    line-height: 1.04;
    letter-spacing: -.03em;
  }
  /* En horizontal o con poca altura el titular no pasa del 11 % del alto visible (CA-25.2) */
  .titular-1 { font-size: min(clamp(32px, 5.2vw + 14px, 76px), max(28px, 11vh)); }
  @supports (height: 1svh) {
    .titular-1 { font-size: min(clamp(32px, 5.2vw + 14px, 76px), max(28px, 11svh)); }
  }
  .titular-2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 2.6vw + 16px, 46px);
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .titular-3-grande {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 1vw + 16.4px, 30px);
    line-height: 1.15;
    letter-spacing: -.015em;
  }
  .titular-3 {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(19px, .2vw + 18.3px, 21px);
    line-height: 1.25;
  }
  .texto-destacado { font-size: clamp(17px, .5vw + 15.2px, 20px); line-height: 1.55; }
  .texto-chico { font-size: 15px; line-height: 1.5; }
  .etiqueta-campo { font-size: 15px; font-weight: 700; line-height: 1.3; }
  .nota { font-size: 13px; line-height: 1.45; }
  .cifras { font-variant-numeric: tabular-nums; }

  /* Enlaces: subrayados siempre (no dependen solo del color) */
  a {
    color: var(--zoe-700);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .18em;
  }
  a:hover { color: var(--zoe-800); text-decoration-thickness: 2px; }

  /* Superficies: lo que va encima de cada fondo (skill, 3.3) */
  .sup-oscura {
    --foco: var(--foco-oscuro);
    color: var(--white);
  }
  .sup-oscura a { color: var(--zoe-200); }
  .sup-oscura a:hover { color: var(--white); }

  /* Foco visible: anillo de 3 px separado 2 px; verde 700 sobre claro, menta sobre oscuro */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
  }

  /* Utilidades */
  .contenedor {
    width: 100%;
    max-width: calc(var(--ancho-max) + 2 * var(--margen));
    margin-inline: auto;
    padding-inline: var(--margen);
  }
  .solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .icono { display: block; flex: none; width: 24px; height: 24px; }
  .icono--14 { width: 14px; height: 14px; }
  .icono--16 { width: 16px; height: 16px; }
  .icono--20 { width: 20px; height: 20px; }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* Filas de botones: apilados en celular, en fila desde 640 px */
  .acciones { display: flex; flex-direction: column; gap: var(--e-3); }
  @media (min-width: 640px) {
    .acciones { flex-direction: row; flex-wrap: wrap; align-items: center; }
  }

  /* Desplazamiento suave solo si la persona no pidió reducir movimiento */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}