/**
 * site.css — ESGARI Propuesta 1 — Design System Global
 * ============================================================================
 *
 * Sistema de diseño para el sitio corporativo ESGARI.
 * Define tokens, layouts, componentes y responsive breakpoints.
 *
 * Índice:
 *   1. Design Tokens (colores, tipografía)
 *   2. Reset y base
 *   3. Navegación (navbar + menú móvil)
 *   4. Hero
 *   5. Contenido principal (main, sections)
 *   6. Grids
 *   7. Cards
 *   8. Chips y badges
 *   9. Timeline
 *  10. Media
 *  11. Logo wall
 *  12. CTA
 *  13. Botones
 *  14. Formularios
 *  15. Footer
 *  16. Responsive (≤980px, ≤760px)
 */


/* ═══════════════════════════════════════════════════════════════════
 *  1. DESIGN TOKENS
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Colores principales */
  --esgari-blue: #2e2c72;    /* Azul institucional — títulos, nav, fondos */
  --esgari-red: #da0613;     /* Rojo acento — CTA, líneas activas, íconos */
  --esgari-slate: #475569;   /* Gris slate — texto secundario, párrafos */

  /* Tipografía (sobrescrita por site.js según FONT_ACTIVA) */
  --font-sans: "Montserrat", sans-serif;
  --font-display: "Montserrat", sans-serif;
  --font-mono: "Montserrat", sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════
 *  2. RESET Y BASE
 * ═══════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: #0f172a;
  background: #ffffff;
}

.font-sans { font-family: var(--font-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
.font-display { font-family: var(--font-display), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
.font-mono { font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace !important; }

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


/* ═══════════════════════════════════════════════════════════════════
 *  3. NAVEGACIÓN
 *  Navbar fija con blur, hide/reveal on scroll (controlado por site.js)
 * ═══════════════════════════════════════════════════════════════════ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e8ecf4;
  backdrop-filter: blur(10px);
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.site-nav.nav-hidden {
  transform: translateY(-100%);
}
.site-nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 30px -24px rgba(15, 23, 42, .45);
}
body.has-fixed-nav {
  padding-top: 80px;
}
.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand img { height: 46px; width: auto; display: block; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.nav-links a {
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--esgari-blue);
  border-color: var(--esgari-red);
}
.nav-cta {
  background: var(--esgari-red);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Menú hamburguesa (mobile) */
.menu-btn {
  display: none;
  border: 0;
  background: transparent;
  font-size: 24px;
  color: var(--esgari-blue);
}
.mobile-menu {
  display: none;
  border-top: 1px solid #e8ecf4;
  background: #fff;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}


/* ═══════════════════════════════════════════════════════════════════
 *  4. HERO
 *  Bloque principal de cada página (split: copy + sidebar)
 * ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 20px 64px;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}
.hero::before {
  width: 360px;
  height: 360px;
  top: -120px;
  right: -70px;
  background: radial-gradient(circle, rgba(46,44,114,.2), rgba(46,44,114,0));
}
.hero::after {
  width: 280px;
  height: 280px;
  bottom: -120px;
  left: -90px;
  background: radial-gradient(circle, rgba(218,6,19,.16), rgba(218,6,19,0));
}
.hero-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}
.hero-main,
.hero-side {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 24px;
  box-shadow: 0 26px 60px -50px rgba(46,44,114,.5);
}
.hero-main { padding: 28px; }
.hero-side { padding: 20px; display: grid; gap: 10px; }

/* Eyebrow label (etiqueta superior roja) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--esgari-red);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--esgari-red);
}
.hero h1 {
  margin: 16px 0 12px;
  color: var(--esgari-blue);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-size: clamp(36px, 6vw, 60px);
}
.hero p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: clamp(16px, 2vw, 20px);
}

/* Stats en sidebar del hero */
.stat {
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  background: linear-gradient(130deg, #fff, #fafbff);
  padding: 12px;
}
.stat strong {
  display: block;
  color: var(--esgari-blue);
  font-size: 27px;
}
.stat span {
  color: #475569;
  font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════════
 *  5. CONTENIDO PRINCIPAL
 * ═══════════════════════════════════════════════════════════════════ */

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 78px;
}
.section {
  margin-top: 24px;
  border: 1px solid #e8ecf4;
  border-radius: 22px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 26px 55px -50px rgba(46,44,114,.5);
}
.section h2 {
  margin: 0;
  color: var(--esgari-blue);
  line-height: 1.1;
  font-size: clamp(26px, 4.4vw, 38px);
}
.section-head { margin-bottom: 22px; }
.section-head p {
  margin: 10px 0 0;
  color: #475569;
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════════
 *  6. GRIDS — Layouts de columnas reutilizables
 * ═══════════════════════════════════════════════════════════════════ */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }


/* ═══════════════════════════════════════════════════════════════════
 *  7. CARDS — Tarjetas de contenido
 * ═══════════════════════════════════════════════════════════════════ */

.card {
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, #fafbff);
  padding: 18px;
}
.card h3 {
  margin: 0 0 8px;
  color: var(--esgari-blue);
  font-size: 20px;
}
.card p { margin: 0; color: #475569; line-height: 1.7; }
.card ul { margin: 10px 0 0; padding-left: 18px; color: #475569; }
.card li { margin: 7px 0; }


/* ═══════════════════════════════════════════════════════════════════
 *  8. CHIPS Y BADGES
 * ═══════════════════════════════════════════════════════════════════ */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid #e8ecf4;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  background: #f5f7fc;
  color: #334155;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
 *  9. TIMELINE — Línea vertical con nodos
 * ═══════════════════════════════════════════════════════════════════ */

.timeline {
  position: relative;
  padding-left: 20px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--esgari-blue), #c7d2fe);
}
.t-item {
  position: relative;
  padding-left: 14px;
  margin-bottom: 16px;
}
.t-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--esgari-red);
  box-shadow: 0 0 0 4px #fee2e2;
}
.t-item h4 { margin: 0 0 5px; color: var(--esgari-blue); }
.t-item p { margin: 0; color: #475569; }


/* ═══════════════════════════════════════════════════════════════════
 *  10. MEDIA — Contenedores de imagen
 * ═══════════════════════════════════════════════════════════════════ */

.media {
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════
 *  11. LOGO WALL — Grid de logos de clientes/certificaciones
 * ═══════════════════════════════════════════════════════════════════ */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.logo {
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  min-height: 72px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.logo img { max-width: 100%; max-height: 40px; object-fit: contain; }


/* ═══════════════════════════════════════════════════════════════════
 *  12. CTA — Call to Action final de cada página
 * ═══════════════════════════════════════════════════════════════════ */

.cta {
  margin-top: 24px;
  border-radius: 20px;
  padding: 28px;
  background: linear-gradient(125deg, var(--esgari-blue), #1e1b4b);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
}
.cta h3 { margin: 0 0 6px; font-size: 28px; }
.cta p { margin: 0; line-height: 1.6; opacity: .9; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════════════
 *  13. BOTONES
 * ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.btn-primary { background: var(--esgari-red); color: #fff; }
.btn-light { background: #fff; color: var(--esgari-blue); }
.btn-outline { border-color: #c7d2fe; color: #fff; }


/* ═══════════════════════════════════════════════════════════════════
 *  14. FORMULARIOS
 * ═══════════════════════════════════════════════════════════════════ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: #334155; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
}
.field textarea { min-height: 120px; resize: vertical; }
.span-2 { grid-column: span 2; }
.feedback { margin-top: 8px; font-size: 13px; font-weight: 700; }
.feedback.ok { color: #047857; }
.feedback.err { color: #b91c1c; }


/* ═══════════════════════════════════════════════════════════════════
 *  15. FOOTER — Pie de página institucional oscuro
 * ═══════════════════════════════════════════════════════════════════ */

.footer {
  margin-top: 40px;
  background: #0f1530;
  color: #d1d9ff;
}
.footer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 20px 22px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
}
.footer h4 { color: #fff; margin: 0 0 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer p { margin: 0; line-height: 1.7; }
.footer small { display: block; margin-top: 22px; opacity: .72; }


/* ═══════════════════════════════════════════════════════════════════
 *  16. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════ */

/* --- Tablet (≤980px) --- */
@media (max-width: 980px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .cta { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Mobile (≤760px) --- */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .grid-2, .grid-3, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section { padding: 22px; }
}