/* ==========================================================================
   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;
  --content-max: 1240px;

  /* 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;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 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. */
}

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. */
.egs-h1,
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  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: 34px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--color-ink);
}

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

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

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

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

@media (min-width: 768px) {
  .egs-h1, h1 { font-size: 65px; line-height: 0.86; }
  .egs-h2, h2 { font-size: 55px; }
  .egs-h3, h3 { font-size: 32px; }
}

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

/* Palabra destacada dentro de un titular: cursiva + opacidad, tal como el Figma */
.egs-em {
  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: 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: 18px;
  line-height: 1.45;
  color: var(--color-text);
}

/* 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-site > *,
.egs-hero,
.egs-section,
.egs-feature-banner,
.egs-testimonials,
.egs-closing,
.egs-footer {
  max-width: 100%;
  overflow-x: clip;
}

/* 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; }