/* ============================================================
   styles.css — Base responsive (mobile-first).
   Variables de color se inyectan desde head.php (:root).
   Sistema de espaciado en grid de 8px. Margenes y grids
   AJUSTADOS por separado para movil y desktop.
   ============================================================ */

:root{
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px;
  --radius:12px; --radius-sm:8px;
  /* REGLA DE ORO: padding lateral FIJO en px, nunca en %. Un % se ve bien
     en una pantalla y descuadra en todas las demas (el error del "86%"). */
  --container:1140px; --container-pad:16px;      /* movil */
  --fs-base:16px; --lh:1.6;
  --ring:0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

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

/* IMPRESCINDIBLE, no borrar. El JS oculta cosas con element.hidden = true,
   pero cualquier clase con display (p.ej. .cookie-banner{display:flex})
   le gana al [hidden] del navegador y el elemento NO desaparece. Sin esta
   linea, el boton "Aceptar" del banner de cookies no hace nada. */
[hidden]{display:none!important}
html{font-size:var(--fs-base);scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:var(--lh);color:var(--color-dark);background:var(--color-light);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary)}
h1,h2,h3{line-height:1.2;margin:0 0 var(--space-2)}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 var(--space-2)}

/* ── Layout ───────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--container-pad)}
.narrow{max-width:720px}
.center{text-align:center}
.section{padding-block:var(--space-5)}          /* movil: respiracion contenida */
.section-alt{background:#f4f5f7}

/* Grids: 1 columna en movil, se expanden en desktop */
.grid{display:grid;gap:var(--space-2)}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}

/* ── Skip link (accesibilidad) ────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);
  color:#fff;padding:var(--space-1) var(--space-2);z-index:1000;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

/* ── Header / nav ─────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid #eee}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:64px}
.brand{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--color-dark)}
.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav a{display:block;padding:var(--space-1) 0;text-decoration:none;color:var(--color-dark)}
.main-nav a[aria-current="page"]{color:var(--color-primary);font-weight:700}
.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;
  border:0;cursor:pointer;padding:10px}
.nav-toggle span{width:24px;height:2px;background:var(--color-dark);transition:.25s}

/* nav movil desplegable */
.main-nav{position:absolute;left:0;right:0;top:64px;background:#fff;
  border-bottom:1px solid #eee;max-height:0;overflow:hidden;transition:max-height .3s ease}
.main-nav.open{max-height:60vh}
.main-nav ul{padding:var(--space-2) var(--container-pad)}
.main-nav li+li{border-top:1px solid #f1f1f1}
.main-nav a{padding:var(--space-2) 0}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{padding-block:var(--space-5);background:linear-gradient(135deg,
  var(--color-primary),color-mix(in srgb,var(--color-primary) 60%,#000))}
.hero h1,.hero .lead{color:#fff}
.hero .lead{font-size:1.15rem;max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}

/* ── Botones (tap target >=44px) ──────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);
  font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .2s ease,opacity .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{opacity:.92}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.section .btn-ghost{color:var(--color-primary);border-color:var(--color-primary)}

/* ── Cards ────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid #ececec;border-radius:var(--radius);
  padding:var(--space-3)}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-1);list-style:none;
  margin:0;padding-block:var(--space-2);font-size:.9rem}
.breadcrumbs li+li::before{content:"›";margin-right:var(--space-1);color:#999}
.breadcrumbs a{text-decoration:none}

/* ── Formularios ──────────────────────────────────────────── */
.form{margin-top:var(--space-3)}
.field{margin-bottom:var(--space-3)}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;font-size:1rem;
  border:1px solid #cbd5e1;border-radius:var(--radius-sm);font-family:inherit}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);
  box-shadow:var(--ring)}
.field [aria-invalid="true"]{border-color:#dc2626}
.err{display:block;color:#dc2626;font-size:.85rem;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:var(--space-2);border-radius:var(--radius-sm);margin-bottom:var(--space-3)}
.alert-ok{background:#dcfce7;color:#166534;border:1px solid #86efac}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer{background:var(--color-dark);color:#cbd5e1;padding-block:var(--space-5) var(--space-3);margin-top:var(--space-6)}
.site-footer a{color:#cbd5e1;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:var(--space-3);grid-template-columns:1fr}
.footer-brand{color:#fff;font-weight:800;font-size:1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--space-3);
  padding-top:var(--space-3);font-size:.85rem}

/* ── Volver arriba ────────────────────────────────────────── */
.back-to-top{position:fixed;right:18px;bottom:18px;z-index:60;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--color-primary);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);
  transition:opacity .25s,transform .25s}
.back-to-top.show{opacity:1;transform:none}
.back-to-top:focus-visible{outline:none;box-shadow:var(--ring),0 4px 14px rgba(0,0,0,.25)}

/* ── Banner cookies ───────────────────────────────────────── */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
  background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,.18);padding:var(--space-2);
  display:flex;flex-direction:column;gap:var(--space-2)}
.cookie-banner p{margin:0;font-size:.9rem}
.cookie-actions{display:flex;gap:var(--space-1);justify-content:flex-end}
.cookie-actions .btn{min-height:40px;padding:0 var(--space-2);font-size:.9rem}
.cookie-actions .btn-ghost{color:var(--color-dark);border-color:#cbd5e1}

/* =============================================================
   DESKTOP / TABLET — se ajustan margenes, grids y espaciados
   (NO se hereda tal cual del movil; cada version compensada).
   ============================================================= */
@media (min-width:768px){
  :root{--container-pad:24px}                 /* desktop: padding fijo, no % */
  .section{padding-block:var(--space-7)}      /* mas aire en pantalla grande */
  .hero{padding-block:var(--space-7)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:var(--space-3)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr;gap:var(--space-5)}

  /* nav horizontal: desactiva el desplegable movil */
  .nav-toggle{display:none}
  .main-nav{position:static;max-height:none;border:0;background:none}
  .main-nav ul{display:flex;gap:var(--space-3);padding:0}
  .main-nav li+li{border:0}
  .main-nav a{padding:var(--space-1) 0}

  .cookie-banner{left:auto;right:24px;bottom:24px;max-width:420px}
  .back-to-top{right:24px;bottom:24px}
}
@media (min-width:1024px){
  .grid-4{gap:var(--space-4)}
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}