/* =========================
   styles.css — Ganemos Opinando (header azul con scroll)
   ========================= */
:root{
  --primary:#0ea5e9;
  --accent:#10b981;
  --brand:#1D5EAB;     /* azul del header */
  --brand-dark:#1D5EAB;
  --brand-darker:#1D5EAB;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --alt:#f1f5f9;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Suaviza el scroll a anclas y compensa la altura del header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* ajusta si tu header es más alto/bajo */
}

/* Por si navegas a secciones intermedias */
#inicio,
.section,
.hero {
  scroll-margin-top: 88px; /* mismo valor que scroll-padding-top */
}

.container{width:min(1100px, 92%); margin-inline:auto}
img{max-width:100%; display:block}

/* =========================
   HEADER + NAV
   ========================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--brand);
  border-bottom:1px solid var(--brand-dark);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  transition: padding .18s ease;
}
/* Estado al hacer scroll: ligeramente más oscuro + sombra + compacidad */
.site-header.scrolled{
  background:var(--brand-darker);
  border-bottom-color:var(--brand-darker);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.site-header.scrolled .header-inner{ padding:10px 0 }

.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand .logo{height:72px; width:auto}
.brand-text{color:#fff; font-weight:700}

.nav{display:flex; gap:1rem; align-items:center}
.nav a{
  color:#fff; text-decoration:none; font-weight:600;
}
.nav a:hover{color:#dbeafe}
.nav .btn.small{
  background:#fff; color:var(--brand);
  border-radius:999px; font-weight:700; padding:.45rem .8rem;
}
.nav .btn.small:hover{background:#f1f5f9}

.nav-toggle{
  display:none; font-size:1.6rem; background:none; border:none; cursor:pointer; color:#fff;
}

/* =========================
   HERO
   ========================= */
.hero{
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%);
  padding:56px 0;
}
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height:1.2; margin:0 0 .4rem}
.hero p{color:var(--muted); margin-top:.2rem; margin-bottom:1rem}

.hero-media img {
  max-height: 380px;   /* Ajusta la altura máxima */
  width: auto;         /* Mantiene proporción */
  margin: 0 auto;      /* Centrada */
}

/* =========================
   SECCIONES
   ========================= */
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.step{background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); padding:1rem}
.step-num{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:700;margin-bottom:.5rem}

.section-media img{border-radius:var(--radius)}

.cta{
  text-align:center;
  background:linear-gradient(90deg, rgba(14,165,233,.12), rgba(16,185,129,.12));
  border-block:1px solid #e2e8f0
}
.center{text-align:center}

/* =========================
   BOTONES / LINKS
   ========================= */
.btn{
  --bg: var(--primary);
  display:inline-block; background:var(--bg); color:#fff; text-decoration:none;
  padding:.8rem 1.1rem; border-radius:999px; font-weight:700; border:none; cursor:pointer;
  transition: transform .08s ease-in-out, filter .15s;
}
.btn:hover{filter:brightness(0.95)}
.btn:active{transform:translateY(1px)}
.btn.large{padding:1rem 1.4rem; font-size:1.05rem}
.btn.small{padding:.4rem .7rem; font-size:.9rem}

.aviso-privacidad p,
.aviso-privacidad em {
  text-align: justify;
  text-justify: inter-word;   /* mejora el espaciado en algunos navegadores */
  hyphens: auto;              /* permite guiones automáticos */
  line-height: 1.7;           /* mejor legibilidad en bloques justificados */
}

/* =========================
   FOOTER
   ========================= */
.site-footer{background:var(--brand); color:#cbd5e1; padding:28px 0; margin-top:28px}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.site-footer a{color:#e2e8f0; text-decoration:none}
.copy{opacity:.8}

/* =========================
   COOKIE BANNER
   ========================= */
.cookie-banner{
  position:fixed; inset:auto 0 20px 0;
  display:block; background:#111827; color:#e5e7eb; padding:12px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.25); border-top:1px solid rgba(255,255,255,.1);
  z-index:40;
}
.cookie-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between}
.cookie-actions{display:flex; gap:.6rem; align-items:center}
.cookie-banner .link{color:#93c5fd; text-decoration:underline}

/* =========================
   RESPONSIVE & MENÚ MÓVIL
   ========================= */
@media (max-width:900px){
  .hero-inner, .grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}

@media (max-width:760px){
  /* Mostrar botón hamburguesa */
  .nav-toggle{display:block}

  /* Base del contenedor nav en móvil: oculto por defecto */
  .nav{ display:none; }

  /* Al abrir, usamos panel superpuesto con fondo azul */
  .nav.open{
    display:flex;
    position:fixed;
    inset:64px 0 0 0;                /* debajo del header */
    background:var(--brand);
    border-top:1px solid var(--brand-dark);
    flex-direction:column;
    gap:.2rem;
    padding:16px;
    animation: slideDown .18s ease-out;
  }

  .nav.open a{
    color:#fff;
    padding:.8rem 12px;
    border-radius:10px;
  }
  .nav.open a:hover{
    background:rgba(255,255,255,.08);
    color:#dbeafe;
  }

  /* Botón "Regístrate" dentro del panel móvil */
  .nav.open .btn.small{
    background:#fff; color:var(--brand);
    padding:.7rem 1rem; margin-top:.2rem;
  }

  /* Evitar scroll del fondo cuando el menú móvil está abierto */
  body.menu-open{ overflow:hidden; }
}

@keyframes slideDown{
  from{transform:translateY(-8px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

/* ===== Justificar todos los párrafos del sitio ===== */
main p {
  text-align: justify;
  text-justify: inter-word;  /* mejora el espaciado entre palabras */
  hyphens: auto;             /* guiones automáticos (requiere lang="es-MX") */
  line-height: 1.7;          /* más legible al justificar */
}

/* ===== Excepciones (CTA y elementos centrados) ===== */
p.center,
.center p {
  text-align: center !important;
}