/* =========================================================
   root.css · Tokens del rediseño
   Portados literales de la maqueta aprobada:
   https://client.codrex.ai/oygmx/web/index.html

   Estrategia de color: DRENCH. El verde bosque entra a sangre en
   los campos decisivos (hero, herencia, ruta, cierre, pie). Las cuatro
   categorías son bloques de color plenos. Oro como acento con función.
   Claro sobre color, nunca modo oscuro por defecto.

   Las familias se declaran en fonts.css, que carga antes que este.
   ========================================================= */

:root{
  --font:'Work Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Aboreto','Work Sans',Georgia,serif;

  /* Primarios */
  --bosque:#1D3123;  --pino:#314B39;  --sage:#617869;  --oro:#E9B632;
  --oro-tinta:#8a6c14;

  /* Neutros de utilidad */
  --crema:#FAF7F1;  --papel:#F1ECE1;  --blanco:#ffffff;
  --texto:#1e2a21;  --texto-2:#5a6b5e;
  --linea:rgba(33,48,36,.14);
  --linea-clara:rgba(255,255,255,.15);

  /* Color por programa (sistema modular) */
  /* Colores de categoria, tomados del manual de marca (aprobado por Claudia el
     2026-09-02). Cada uno tiene nombre propio en el manual:
       DEBATE (maestrias) · PULSO (Espana) · VINCULO (educacion continua)
       SENAL (verde lima) · LABORATORIO (azul)
     El verde del Acuerdo 286 se mantiene: es el verde institucional, no secundario. */
  --c-mae:#681A2A;  --c-286:#1C4A34;  --c-esp:#DF642B;  --c-con:#B7ACE8;
  --c-ciruela:#5E3A6A;
  --c-senal:#D3E829;  --c-laboratorio:#2869F9;
  /* Sobre el naranja PULSO el texto claro se queda en 3,3 de contraste (minimo 4,5),
     asi que ahi el texto va oscuro: sube a 4,9 y se lee. */
  --tinta-sobre-pulso:#FAF7F1;  /* REGLA: sobre el naranja, letra BLANCA. Antes
                                 era marron oscuro y no se leia. Corregido tres
                                 veces; no volver a ponerlo oscuro. */

  --ancho:1280px;

  /* z-index semántico */
  --z-nav:60; --z-menu:70; --z-loader:9999;

  --e-out:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  color:var(--texto);
  background:var(--crema);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2{
  font-family:var(--font-display);
  color:var(--bosque);
  line-height:1.1;
  letter-spacing:.02em;
  font-weight:400;
  font-synthesis:none;
  text-wrap:balance;
}
h1,h1.elementor-heading-title{font-size:var(--fs-h1)}
/* Punto 63 de la reunión del 28 de agosto: un solo tamaño de encabezado en toda la
   web. Antes cada sección repetía el suyo y convivían cinco tamaños distintos de H2
   (52, 48, 44, 34 y 32 píxeles), a veces en la misma página: en la ficha de maestría
   "Plan de estudios" salía a 32 y "Tu título, con dos sellos" a 48. La escala ya
   estaba definida arriba en --fs-h2 y --fs-h3, pero casi nadie la usaba. Aquí se
   aplica de una vez a los encabezados, y las secciones que quieran otra cosa tendrán
   que pedirlo con una clase propia, no por descuido. */
h2,h2.elementor-heading-title{font-size:var(--fs-h2)}
h3,h3.elementor-heading-title{font-size:var(--fs-h3)}
h3{
  font-family:var(--font);
  color:var(--bosque);
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:600;
  text-wrap:balance;
}
/* Palabras largas (títulos en Aboreto, URLs, tecnicismos) parten en móvil en
   vez de empujar la página unos píxeles. */
p,.oyg-fp-title,.oyg-fp-lead,.oyg-fp-note{overflow-wrap:break-word}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* La maqueta hace reset con `*{margin:0;padding:0}`. Aquí no se copia tal
   cual: dentro de WordPress arrasaría con el escritorio y con los widgets.
   Se aplica solo a los componentes del sistema. */
[class*="oyg-"],[class*="oyg-"]::before,[class*="oyg-"]::after{box-sizing:border-box}

/* Contenedor del sistema, 1280 centrado. Mobile-first: el aire base es 22px
   (móvil) y crece a 40px de tablet hacia arriba. Las dos formas: el HTML
   portado de la maqueta lleva la clase prefijada, y .wrap se mantiene por si
   alguien pega marcado de la maqueta tal cual. */
.oyg-wrap,.wrap{max-width:var(--ancho);margin:0 auto;padding:0 22px}

/* Salto al contenido: oculto hasta que llega el foco por teclado. */
.oyg-skip-link,.skip-link{
  position:fixed;top:-64px;left:16px;z-index:10000;
  background:var(--oro);color:var(--bosque);
  font-family:var(--font);font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:0 0 12px 12px;
  transition:top .2s var(--e-out);
}
.oyg-skip-link:focus,.skip-link:focus{top:0;outline:2px solid var(--bosque);outline-offset:2px}

@media(min-width:601px){
  .oyg-wrap,.wrap{padding:0 40px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Escala tipográfica y borde, tomados de la maqueta de referencia (tokens) */
:root{
  --fs-h1:clamp(38px,6vw,58px);   /* hero: tope 58px (baja solo en movil) */
  --fs-h2:clamp(34px,4vw,52px);   /* títulos de sección */
  --fs-h2-texto:clamp(24px,3vw,34px); /* títulos DENTRO del texto de un artículo: más pequeños a propósito, un título de sección a 52px partiría la lectura */
  --fs-h3:clamp(24px,2.7vw,32px); /* subtítulos, precio */
  --fs-titulo-tarjeta:clamp(19px,2.2vw,23px); /* título de una tarjeta (categoría, artículo, episodio): un solo tamaño en toda la web */
  --fs-lead:18px;
  --linea-fuerte:rgba(33,48,36,.55); /* borde de inputs del formulario, claramente más oscuro que --linea (.14) */
  --linea-gris:rgba(60,56,50,.26); /* borde de cajas de información: gris mate neutro, no negro ni verde */
}