/* ==========================================================================
   LAYOUT.CSS
   Reset base, contenedores, estructura de secciones y sistemas de grid.
   No declarar aquí colores/tipografías de marca: usar var(--...) de variables.css
   ========================================================================== */

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

html{ scroll-behavior:smooth; }

body, h1, h2, h3, p, ul, ol, figure, blockquote, address{ margin:0; }
ul, ol{ padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; border:none; background:none; cursor:pointer; }

body{
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

/* ---------- Contenedor ---------- */
.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--space-md);
}

section{ position:relative; }

/* ---------- Ritmo vertical de secciones ---------- */
.section{ padding:var(--space-2xl) 0; }
.section--alt{ background:var(--color-mist); }

.section__title{ margin-top:var(--space-sm); }
.section__head--center{ text-align:center; max-width:720px; margin:0 auto 56px; }

/* ---------- Nav (estructura fija) ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:var(--z-nav);
  height:88px;
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
}

.nav__inner{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--space-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
}

.nav__links{ display:flex; align-items:center; gap:32px; }
.nav__toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:88px;
}
.hero__illustration{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__content{ position:relative; z-index:2; padding-top:64px; padding-bottom:64px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:36px; }
.hero__indicators{ display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:56px; }

/* ---------- Quiénes somos ---------- */
.quienes-somos__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.quienes-somos__facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-md);
  margin-top:var(--space-lg);
  padding-top:30px;
  border-top:1px solid var(--color-line);
}
.quienes-somos__diagram{ text-align:center; }

/* ---------- Grid de tarjetas ---------- */
.cards-grid{ display:grid; gap:22px; margin-top:56px; }
.cards-grid--4{ grid-template-columns:repeat(4,1fr); }
.cards-grid--3{ grid-template-columns:repeat(3,1fr); }

/* ---------- Timeline (proceso) ---------- */
.timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-md);
  margin-top:var(--space-xl);
  position:relative;
}

/* ---------- Banner destacado ---------- */
.banner{ padding:var(--space-2xl) 0; overflow:hidden; }
.banner__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  position:relative;
  z-index:1;
}
.banner__list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; }

/* ---------- Estadísticas ---------- */
.stats{ padding:var(--space-2xl) 0; overflow:hidden; }
.stats__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-md);
  margin-top:var(--space-xl);
  text-align:center;
  position:relative;
  z-index:1;
}

/* ---------- CTA final ---------- */
.cta-final{ padding:110px 0; text-align:center; }
.cta-final__inner{ max-width:720px; margin:0 auto; }

/* ---------- Footer ---------- */
.footer{ padding:72px 0 0; }
.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:48px;
}
.footer__bottom{
  margin-top:48px;
  padding:22px var(--space-md);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float{
  position:fixed;
  bottom:26px; right:26px;
  width:60px; height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:var(--z-float);
}