/* ==========================================================================
   EGS — Sistema de diseño: fuentes, variables, reset y tipografía base
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @font-face
   -------------------------------------------------------------------------- */

/* SansPlomb — condensada. El "95" y el "98" del nombre son los pesos internos
   de la fundición; en CSS los mapeamos a 400 y 600 respectivamente. */
@font-face {
  font-family: 'SansPlomb';
  src: url('../fonts/sansplomb/SansPlomb-95.woff2') format('woff2'),
       url('../fonts/sansplomb/SansPlomb-95.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansPlomb';
  src: url('../fonts/sansplomb/SansPlomb-95Oblique.woff2') format('woff2'),
       url('../fonts/sansplomb/SansPlomb-95Oblique.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansPlomb';
  src: url('../fonts/sansplomb/SansPlomb-98.woff2') format('woff2'),
       url('../fonts/sansplomb/SansPlomb-98.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansPlomb';
  src: url('../fonts/sansplomb/SansPlomb-98Oblique.woff2') format('woff2'),
       url('../fonts/sansplomb/SansPlomb-98Oblique.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansPlomb';
  src: url('../fonts/sansplomb/SansPlomb-Super.woff2') format('woff2'),
       url('../fonts/sansplomb/SansPlomb-Super.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansPlomb';
  src: url('../fonts/sansplomb/SansPlomb-SuperOblique.woff2') format('woff2'),
       url('../fonts/sansplomb/SansPlomb-SuperOblique.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Bastardo Groteskish. Ojo: el archivo Thin declara internamente usWeightClass
   400 pero visualmente es más fino que el Medium, así que lo servimos como 300. */
@font-face {
  font-family: 'Bastardo Groteskish';
  src: url('../fonts/bastardo/BastardoGroteskish-Thin.woff2') format('woff2'),
       url('../fonts/bastardo/BastardoGroteskish-Thin.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bastardo Groteskish';
  src: url('../fonts/bastardo/BastardoGroteskish-Medium.woff2') format('woff2'),
       url('../fonts/bastardo/BastardoGroteskish-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Custom properties
   -------------------------------------------------------------------------- */

:root {
  /* Color */
  --color-primary: #57A09A;
  --color-primary-dark: #216E68;
  --color-primary-light: #5BC1B8;
  --color-border-accent: #86CFCA;
  --color-ink: #0B1F1E;
  --color-text: #666668;
  --color-card-title: #3E3E3E;
  --color-light-bg: #F5F5F5;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-form-label: #737373;
  --color-off-white: #EAF6F4;

  /* Tipografía */
  --font-display: 'SansPlomb', 'Arial Narrow', sans-serif;
  --font-body: 'Bastardo Groteskish', system-ui, -apple-system, sans-serif;
  --font-ui: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Radios */
  --radius-btn: 6px;
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-card-lg: 16px;

  /* Espaciado */
  --gutter: 20px;
  --section-gap: 64px;
  /* Igual que el ancho máximo del header (.egs-header__inner): todas las
     secciones deben compartir el mismo margen lateral en desktop. */
  --content-max: 1700px;

  /* Transiciones */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .3s;

  /* Header (lo usa el menú para desplegarse justo por debajo) */
  --header-h: 76px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-gap: 96px;
    --header-h: 88px;
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Parte del patrón sticky footer (ver body más abajo): con
     height:100% aquí, el min-height:100% del body resuelve contra el
     alto real disponible, que YA descuenta el margin-top que WordPress
     inyecta en html para su barra de admin — a diferencia de 100vh,
     que mide siempre la ventana completa y provocaba 32px de scroll
     fantasma con el usuario logueado. */
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 0.3vw + 13px, 18px);
  line-height: 1.45;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nada de overflow-x hidden en body: rompe position:sticky en varios
     navegadores. El overflow se contiene en cada componente. */

  /* Sticky footer: en páginas cortas (404, búsqueda sin resultados, una
     página con poco contenido) el footer terminaba a media pantalla y
     debajo quedaba el fondo blanco del body a la vista.
     min-height:100% (no 100vh/svh/dvh) a propósito: con usuario
     logueado, WordPress añade la clase .admin-bar e inyecta
     html{margin-top:32px} (46px por debajo de 783px) para su barra, y
     las unidades de viewport siguen resolviendo contra la ventana
     COMPLETA — el body pedía 32px más de los que quedaban y reaparecían
     esos 32px de blanco bajo el footer, justo el bug que esto arregla.
     El porcentaje resuelve contra html{height:100%}, que sí descuenta
     ese margen, así que funciona con y sin barra de admin sin
     hardcodear sus breakpoints. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Absorbe todo el espacio vertical sobrante, empujando el footer al
   fondo de la ventana en páginas cortas. Reemplaza al min-height:100vh
   del body (ver comentario de arriba: rompía con la barra de admin). */
#content,
main {
  flex: 1 0 auto;
}

img, svg, video, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { margin: 0; }

/* Titulares display (SansPlomb). El diseño los usa siempre en mayúsculas.
   clamp() en vez de un salto único a 768px: hasta ahora el tamaño "grande"
   (65px) se quedaba fijo también en monitores anchos (1440px+), donde el
   container de 1240px deja el titular pequeño respecto al espacio
   disponible. clamp(min, preferido-en-vw, max) escala de forma continua
   entre el tamaño de móvil y uno mayor en desktop grande, sin saltos. */
.egs-h1,
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(46px, 4vw + 20px, 78px);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
}

.egs-h2,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3vw + 14px, 60px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--color-ink);
}

.egs-h3,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 1.4vw + 15px, 38px);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--color-ink);
}

h4, .egs-h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(20px, 0.6vw + 16px, 24px);
  line-height: 1.1;
  color: var(--color-ink);
}

h5, .egs-h5 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(16px, 0.4vw + 14px, 19px);
  line-height: 1.3;
  color: var(--color-ink);
}

h6, .egs-h6 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(14px, 0.3vw + 12px, 16px);
  line-height: 1.35;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .egs-h1, h1 { line-height: 0.86; }
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Palabra destacada dentro de un titular: en el Figma es el mismo SansPlomb
   pero en su corte fino ("95 Oblique", peso 400) en vez del grueso ("98",
   peso 600) del resto del titular — no solo cursiva + opacidad. */
.egs-em {
  font-weight: 400;
  font-style: italic;
  opacity: 0.6;
}
/* Sobre fondo claro la variante en color teal claro lee mejor que la opacidad */
.egs-em--light { font-style: italic; color: var(--color-primary-light); opacity: 1; }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.egs-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.egs-section { padding-block: var(--section-gap); }
.egs-section--tight { padding-block: calc(var(--section-gap) * .6); }
.egs-section--flush-top { padding-top: 0; }

.egs-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(10px, 0.15vw + 9px, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.egs-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 0.4vw + 16px, 21px);
  line-height: 1.45;
  color: var(--color-text);
}

/* En desktop, un párrafo suelto en un container de 1240px de ancho
   completo se lee mal (líneas muy largas); 65ch es la longitud de línea
   recomendada para lectura. No aplica en mobile (el container ya es
   estrecho) y los casos con max-width inline ya definido siguen ganando
   por especificidad. */
@media (min-width: 992px) {
  .egs-lead { max-width: 65ch; }
}

/* Párrafo de intro del catálogo de cursos: centrado, no alineado a la
   izquierda como el resto de usos genéricos de .egs-lead. */
.egs-shop-lead {
  text-align: center;
  margin-inline: auto;
}

/* Accesibilidad: texto solo para lectores de pantalla */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-ink);
  clip: auto;
  width: auto; height: auto;
}

/* Respeto por prefers-reduced-motion: se aplica en cada componente animado */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   6. Contención de desbordamiento horizontal
   -------------------------------------------------------------------------- */

/* Ninguna sección debe empujar el ancho de la página. El scroll horizontal
   solo existe dentro de los carruseles, que lo declaran explícitamente.
   .egs-hero y .egs-footer quedan fuera de esta regla por simetría con sus
   decoraciones desbordantes (.egs-hero__veil, .egs-closing__bleed), pero
   ojo con el motivo: overflow-x:clip recorta SOLO el eje X y deja
   overflow-y en visible, así que no habría impedido ese desbordamiento
   vertical de todos modos. El que sí lo recortaría en ambos ejes es
   overflow-x:hidden, porque fuerza el valor calculado de overflow-y a
   auto. No confiar en que esta regla contenga verticalmente nada: el
   recorte vertical del resplandor del footer lo hace
   .egs-footer-wrap{overflow:hidden} (ver layout.css).

   .egs-site > * incluye <main>/#content, el ancestro COMPARTIDO entre
   .egs-testimonials y .egs-footer-wrap — su propio overflow-x:clip,
   aunque en teoría solo recorta el eje X, en la práctica el navegador
   trata cualquier valor de overflow que no sea "visible" en un eje
   como una señal para recortar también el otro eje ("overflow
   interference" del spec CSS), cortando en seco el resplandor de
   .egs-testimonials__glow justo en el límite inferior de <main>
   cuando se extiende hacia el footer (dato confirmado por captura: un
   corte recto justo ahí). #content queda fuera de esta regla, igual
   que .egs-hero/.egs-footer. */
.egs-site > *:not(#content),
.egs-section,
.egs-feature-banner,
.egs-testimonials {
  max-width: 100%;
  overflow-x: clip;
}
#content { max-width: 100%; }

.egs-hero { max-width: 100%; }

/* Un titular condensado muy largo no debe forzar el ancho. */
h1, h2, h3, h4, h5, h6, p, li, a {
  overflow-wrap: break-word;
}

/* Las direcciones de correo largas del footer se parten donde haga falta. */
.egs-footer__contact a { overflow-wrap: anywhere; }