/*
 * GOV-STYLES.CSS — Sistema de diseño compartido
 * Todas las páginas de gobierno usan esta hoja base.
 * Cada página define --accent y --accent-dark como variables locales.
 */

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:      #0F4C81;
  --primary-dark: #0A3560;
  --secondary:    #00B2A9;
  --dark:         #1E2D40;
  --gray:         #52616B;
  --light:        #F4F7FB;
  --white:        #ffffff;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --shadow-sm:    0 2px 8px rgba(0,0,0,.07);
  --shadow-md:    0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:    0 16px 48px rgba(0,0,0,.13);
  --transition:   .25s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── Typography ───────────────────────────────────────────────── */
h1,h2,h3,h4,h5 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem,5.5vw,3.5rem); }
h2 { font-size: clamp(1.6rem,4vw,2.5rem); }
h3 { font-size: clamp(1.1rem,2.5vw,1.4rem); }
p  { color: var(--gray); line-height: 1.75; }
a  { color: var(--accent,var(--primary)); text-decoration: none; transition: var(--transition); }

/* ── Layout utilities ─────────────────────────────────────────── */
.container   { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section     { padding: 5rem 0; }
.section-sm  { padding: 3rem 0; }
.section-lg  { padding: 7rem 0; }
.bg-light    { background: var(--light); }
.bg-dark     { background: var(--dark); color: var(--white); }
.bg-accent   { background: var(--accent,var(--primary)); color: var(--white); }
.text-center { text-align: center; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; }
.flex    { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-1   { gap:.5rem; }
.gap-2   { gap:1rem; }
.gap-3   { gap:1.5rem; }

/* ── Eyebrow label ────────────────────────────────────────────── */
.eyebrow {
  display:inline-block;
  font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--accent,var(--primary));
  margin-bottom:.75rem;
}
.eyebrow::before {
  content:''; display:inline-block;
  width:18px; height:2px;
  background: var(--accent,var(--primary));
  margin-right:.5rem; vertical-align:middle;
}

/* ── Section title ────────────────────────────────────────────── */
.section-title {
  margin-bottom: 1rem;
  color: var(--dark);
}
.section-title span { color: var(--accent,var(--primary)); }
.section-lead {
  font-size:1.1rem; color:var(--gray);
  max-width:640px; margin: 0 auto 3rem;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 2rem; border-radius:50px;
  font-weight:600; font-size:.95rem;
  cursor:pointer; border:2px solid transparent;
  transition: var(--transition); white-space:nowrap;
}
.btn-primary {
  background: var(--accent,var(--primary));
  color: var(--white);
  border-color: var(--accent,var(--primary));
}
.btn-primary:hover {
  background: var(--accent-dark,var(--primary-dark));
  border-color: var(--accent-dark,var(--primary-dark));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--accent,var(--primary));
  border-color: var(--accent,var(--primary));
}
.btn-outline:hover {
  background: var(--accent,var(--primary));
  color: var(--white);
  transform: translateY(-2px);
}
.btn-white {
  background: var(--white);
  color: var(--accent,var(--primary));
  border-color: var(--white);
}
.btn-white:hover {
  background: transparent;
  color: var(--white);
  transform: translateY(-2px);
}

/* ── Navbar ───────────────────────────────────────────────────── */
.gov-navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: box-shadow var(--transition);
}
.gov-navbar.scrolled { box-shadow: var(--shadow-md); }
.gov-navbar .nav-inner {
  display: flex; align-items:center; justify-content:space-between;
  height:70px; gap:1.5rem;
}
.nav-logo {
  flex-shrink:0;
  font-size:1.2rem; font-weight:800;
  color: var(--primary);
  display:flex; align-items:center; gap:.5rem;
}
.nav-logo span { color: var(--accent,var(--secondary)); }
.nav-links {
  display:flex; align-items:center; gap:.25rem; list-style:none;
}
.nav-links a {
  padding:.45rem .9rem; border-radius:var(--radius-sm);
  font-size:.88rem; font-weight:500; color:var(--gray);
}
.nav-links a:hover { color:var(--accent,var(--primary)); background:var(--light); }
.nav-links a.active { color:var(--accent,var(--primary)); font-weight:600; }
.nav-dropdown { position:relative; }
.nav-dropdown:hover .dropdown-panel { opacity:1; pointer-events:all; transform:translateY(0); }
.dropdown-panel {
  position:absolute; top:calc(100% + .5rem); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:680px; background:var(--white); border-radius:var(--radius-lg);
  box-shadow: var(--shadow-lg); border:1px solid rgba(0,0,0,.07);
  padding:1.5rem; opacity:0; pointer-events:none;
  transition: opacity var(--transition), transform var(--transition);
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
}
.dp-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem; border-radius:var(--radius-md);
  transition: background var(--transition);
}
.dp-item:hover { background:var(--light); }
.dp-icon {
  width:36px; height:36px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  background: color-mix(in srgb, var(--accent,var(--primary)) 12%, white);
  color: var(--accent,var(--primary));
}
.dp-text strong { display:block; font-size:.82rem; font-weight:600; color:var(--dark); }
.dp-text span   { font-size:.75rem; color:var(--gray); }
.nav-cta { margin-left:auto; }
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:.5rem; background:none; border:none;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--dark); border-radius:2px; transition:var(--transition);
}

/* ── Mobile nav ───────────────────────────────────────────────── */
@media(max-width:900px){
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  .gov-navbar.open .nav-links {
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:70px; left:0; right:0;
    background:var(--white); padding:1rem 1.5rem 1.5rem;
    box-shadow:var(--shadow-lg); border-top:1px solid rgba(0,0,0,.06);
    gap:.25rem;
  }
  .gov-navbar.open .nav-cta { display:block; padding:1rem 1.5rem 1.5rem; }
  .dropdown-panel { position:static; transform:none; opacity:1; pointer-events:all;
    box-shadow:none; border:none; padding:.5rem 0 0; grid-template-columns:1fr; min-width:auto; }
}

/* ── Footer ───────────────────────────────────────────────────── */
.gov-footer {
  background: var(--dark); color:rgba(255,255,255,.75);
  padding: 4rem 0 2rem;
}
.gov-footer h5 {
  color:var(--white); font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1rem;
}
.gov-footer a { color:rgba(255,255,255,.6); font-size:.88rem; }
.gov-footer a:hover { color:var(--accent,var(--secondary)); padding-left:4px; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:3rem; margin-bottom:3rem;
}
.footer-logo { font-size:1.3rem; font-weight:800; color:var(--white); margin-bottom:1rem; }
.footer-logo span { color: var(--accent,var(--secondary)); }
.footer-social { display:flex; gap:.75rem; margin-top:1.25rem; }
.footer-social a {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.1); display:flex;
  align-items:center; justify-content:center;
  font-size:.9rem; transition:var(--transition);
}
.footer-social a:hover { background:var(--accent,var(--secondary)); color:var(--white); transform:translateY(-2px); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.5rem; display:flex;
  justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; font-size:.82rem;
}
@media(max-width:768px){
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:480px){
  .footer-grid { grid-template-columns:1fr; }
}

/* ── Feature cards (variant A — border-left accent) ──────────── */
.feat-card-a {
  background:var(--white); padding:1.75rem;
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  border-left:4px solid var(--accent,var(--primary));
  transition: transform var(--transition), box-shadow var(--transition);
}
.feat-card-a:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.feat-card-a .card-icon {
  width:48px; height:48px; border-radius:var(--radius-sm); margin-bottom:1rem;
  background: color-mix(in srgb, var(--accent,var(--primary)) 12%, white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--accent,var(--primary));
}

/* ── Feature cards (variant B — top-color solid header) ─────── */
.feat-card-b {
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--white);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feat-card-b:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.feat-card-b .card-head {
  padding:1.5rem; display:flex; align-items:center; gap:1rem;
  background: color-mix(in srgb, var(--accent,var(--primary)) 10%, white);
}
.feat-card-b .card-head i { font-size:1.75rem; color:var(--accent,var(--primary)); }
.feat-card-b .card-body { padding:1.5rem; }

/* ── Feature cards (variant C — floating icon badge) ─────────── */
.feat-card-c {
  background:var(--white); padding:2rem 1.75rem 1.75rem;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  border:1px solid rgba(0,0,0,.06); position:relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feat-card-c:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.feat-card-c .float-icon {
  width:56px; height:56px; border-radius:var(--radius-md);
  background: var(--accent,var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--white); margin-bottom:1.25rem;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent,var(--primary)) 35%, transparent);
}

/* ── Stat strip ───────────────────────────────────────────────── */
.stat-strip {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); overflow:hidden;
  border-top:4px solid var(--accent,var(--primary));
}
.stat-cell {
  padding:1.75rem 1.25rem; text-align:center;
  border-right:1px solid rgba(0,0,0,.06);
}
.stat-cell:last-child { border-right:none; }
.stat-num {
  font-size: clamp(1.75rem,4vw,2.5rem);
  font-weight:800; color:var(--accent,var(--primary)); line-height:1;
}
.stat-label { font-size:.8rem; color:var(--gray); margin-top:.35rem; }

/* ── Benefit list ─────────────────────────────────────────────── */
.benefit-list { list-style:none; }
.benefit-list li {
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.85rem 0; border-bottom:1px solid rgba(0,0,0,.06);
}
.benefit-list li:last-child { border-bottom:none; }
.benefit-check {
  width:24px; height:24px; border-radius:50%; flex-shrink:0; margin-top:2px;
  background: color-mix(in srgb, var(--accent,var(--primary)) 15%, white);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:var(--accent,var(--primary));
}

/* ── Process steps ────────────────────────────────────────────── */
.process-steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem; counter-reset:step;
}
.process-step {
  background:var(--white); border-radius:var(--radius-md);
  padding:1.5rem; box-shadow:var(--shadow-sm); text-align:center;
  position:relative;
}
.step-circle {
  width:44px; height:44px; border-radius:50%; margin:0 auto 1rem;
  background: var(--accent,var(--primary)); color:var(--white);
  font-weight:800; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}

/* ── Case study card ──────────────────────────────────────────── */
.case-card {
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  transition: transform var(--transition), box-shadow var(--transition);
}
.case-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.case-card-band {
  padding:1.25rem 1.5rem; font-weight:700; font-size:.9rem;
  background: var(--accent,var(--primary)); color:var(--white);
}
.case-card-body { padding:1.5rem; }
.case-metric {
  display:inline-block; font-size:1.6rem; font-weight:800;
  color:var(--accent,var(--primary)); margin-bottom:.25rem;
}

/* ── CTA banner ───────────────────────────────────────────────── */
.cta-banner {
  background: var(--accent,var(--primary));
  border-radius:var(--radius-xl); padding:4rem 3rem;
  text-align:center; position:relative; overflow:hidden;
  color:var(--white);
}
.cta-banner::before {
  content:''; position:absolute; right:-80px; top:-80px;
  width:300px; height:300px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.cta-banner::after {
  content:''; position:absolute; left:-60px; bottom:-60px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.cta-banner h2 { color:var(--white); margin-bottom:.75rem; }
.cta-banner p  { color:rgba(255,255,255,.85); margin-bottom:2rem; max-width:560px; margin-left:auto; margin-right:auto; }
.cta-banner .flex { justify-content:center; flex-wrap:wrap; gap:1rem; position:relative; z-index:1; }

/* ── Tag pills ────────────────────────────────────────────────── */
.tag {
  display:inline-block; padding:.3rem .9rem;
  border-radius:50px; font-size:.78rem; font-weight:600;
  background: color-mix(in srgb, var(--accent,var(--primary)) 10%, white);
  color: var(--accent,var(--primary));
  border: 1px solid color-mix(in srgb, var(--accent,var(--primary)) 25%, white);
}

/* ── Accordion (módulos) ──────────────────────────────────────── */
.accordion-item {
  border:1px solid rgba(0,0,0,.08); border-radius:var(--radius-md);
  margin-bottom:.75rem; overflow:hidden;
}
.accordion-trigger {
  width:100%; background:var(--white); border:none; cursor:pointer;
  padding:1.1rem 1.5rem; display:flex; align-items:center; gap:1rem;
  text-align:left; transition:background var(--transition);
}
.accordion-trigger:hover { background:var(--light); }
.accordion-trigger.open  { background: color-mix(in srgb, var(--accent,var(--primary)) 8%, white); }
.accordion-trigger .acc-icon { font-size:1.1rem; color:var(--accent,var(--primary)); width:28px; flex-shrink:0; }
.accordion-trigger strong { flex:1; font-size:.95rem; color:var(--dark); }
.accordion-trigger .chevron { font-size:.8rem; color:var(--gray); transition:transform var(--transition); }
.accordion-trigger.open .chevron { transform:rotate(180deg); }
.accordion-body { display:none; padding:1.25rem 1.5rem 1.5rem; background:var(--light); }
.accordion-body.open { display:block; }

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:768px){
  .section { padding:3.5rem 0; }
  .stat-strip { grid-template-columns:repeat(2,1fr); }
  .stat-cell { border-right:none; border-bottom:1px solid rgba(0,0,0,.06); }
  .cta-banner { padding:2.5rem 1.5rem; }
  .process-steps { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .process-steps { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}