/*
Theme Name: Cuidémonos
Theme URI: https://cuidemonos.pe
Description: Tema a medida para la campaña Cuidémonos — Fenómeno del Niño. Landings a medida, sección de cursos sin login. Sin page builders.
Version: 0.4.0
Author: Fundación Romero
Text Domain: cuidemonos
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------------------------------------
   DESIGN TOKENS  (extraídos del Figma FEN - WEB)
   ------------------------------------------------------------------------- */
:root {
  /* Color */
  --color-bg: #ffffff;
  --color-surface: #fff1f1;        /* tinte rosado suave */
  --color-surface-2: #fafafa;
  --color-ink: #111111;            /* titulares casi-negro */
  --color-text: #2a2a2a;           /* cuerpo */
  --color-muted: #717171;
  --color-primary: #da5b3e;        /* terracota — acento principal */
  --color-primary-dark: #be4338;   /* rust — hover / secciones */
  --color-primary-contrast: #ffffff;
  --color-border: #d9d9d9;
  --color-dark: #1a1a1a;           /* footer / overlay hero */

  /* Colores de estado (semánticos) — antes literales repetidos por todo el LMS */
  --color-success: #1c7a30;        /* verde texto/acento "logrado" */
  --color-success-strong: #279b3e; /* verde vivo (knob, fill, check) */
  --color-success-bg: #e7f6ea;     /* fondo suave aprobado */
  --color-success-border: #9bd4a8; /* borde aprobado */
  --color-warning: #a8730a;        /* ámbar certificación/pendiente */
  --color-warning-bg: #fdeecf;     /* fondo ámbar */
  --color-danger-bg: #fff3f2;      /* fondo aviso error/reprobado */
  --color-danger-tint: #fdecea;    /* tinte rojo icono */

  /* Escala de z-index (orden de apilamiento explícito) */
  --z-header: 100;
  --z-modal: 1000;
  --z-modal-video: 9999;
  --z-modal-exito: 10001;
  --z-confetti: 10002;

  /* Tipografía */
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-sm: 0.875rem;             /* 14px */
  --text-base: 0.9375rem;          /* 15px — cuerpo Figma */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);   /* 18–21px */
  --text-card: clamp(1.25rem, 1rem + 1vw, 1.5625rem);    /* 20–25px títulos card */
  --text-h2: clamp(2rem, 1rem + 4.5vw, 3.75rem);         /* títulos de sección ~60px (Figma) */
  --text-hero: clamp(2.25rem, 1rem + 5.5vw, 3.75rem);    /* hero ~60px */
  --text-mega: clamp(2.5rem, 1rem + 8vw, 6.25rem);       /* cifra gigante ~100px */

  /* Pesos */
  --weight-body: 500;
  --weight-strong: 700;
  --weight-display: 900;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-section: clamp(3rem, 2rem + 5vw, 7rem);

  /* Layout */
  --container: 1232px;             /* ancho de contenido Figma (1440 − márgenes) */
  --header-h: 100px;               /* isla del header: 16px margen sup + 84px alto barra */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-btn: 15px;              /* botones (rounded rect, no píldora) */
  --radius-pill: 999px;            /* chips, badges, círculos alargados */

  /* Motion */
  --duration: 250ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   BREAKPOINTS — escala canónica de referencia
   (CSS @media no acepta var(); esto documenta, no impone.)
   Al añadir media queries, usar SIEMPRE uno de estos cortes:
     560px  → móvil grande: grids 2→1 col, sliders a 1 visible
     640px  → móvil: ocultar detalles del header, formularios 1 col
     900px  → tablet: grids con sidebar (curso/reproductor/examen) a 1 col
     960px  → tablet ancho: secciones de portada 3→2/1 col, footer 2 col
   (min-width: 560 / 920 en cursos.css es mobile-first del catálogo — misma familia.)
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   RESET LIGERO
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  /* Guard de overflow horizontal reforzado para iOS Safari: clip en html no
     siempre frena el "panning" si un hijo desborda; repetirlo en body + acotar
     el ancho lo corta de raíz. */
  overflow-x: clip;
  max-width: 100%;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--weight-display);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 0.5em;
}

/* -------------------------------------------------------------------------
   LAYOUT BASE
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}
.section { padding-block: var(--space-section); }

/* Accesibilidad: link saltar al contenido */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-text);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  z-index: 999;
}
.skip-link:focus { left: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}