/* ============================================================
   SGD – Municipalidad Provincial de Huaylas
   styles.css  |  Hoja de estilos principal
   ============================================================ */

/* ===== 1. TOKENS DE DISEÑO (variables CSS) ===== */
:root {
  --azul:            #1a3a8c;
  --azul-medio:      #1e4db7;
  --azul-claro:      #3a6fd8;
  --dorado:          #c9940a;
  --dorado-suave:    #e8b84b;
  --blanco:          #ffffff;
  --gris-bg:         #f4f6fb;
  --gris-borde:      #d8dde8;
  --gris-texto:      #5a6378;
  --oscuro-1:        #0d1b3e;
  --oscuro-2:        #142254;
  --oscuro-3:        #1a2d6b;

  /* Semánticas – tema claro por defecto */
  --nav-bg:          var(--blanco);
  --nav-sombra:      rgba(26, 58, 140, 0.12);
  --hero-desde:      #eef1fa;
  --hero-hasta:      #dde4f5;
  --texto-principal: #0d1b3e;
  --texto-secund:    #5a6378;
  --card-bg:         var(--blanco);
  --card-borde:      var(--gris-borde);
  --footer-bg:       var(--blanco);
  --footer-txt:      var(--gris-texto);
}

/* ===== 2. TEMA OSCURO ===== */
html.dark {
  --nav-bg:          #142254;
  --nav-sombra:      rgba(0, 0, 0, 0.45);
  --hero-desde:      #0d1b3e;
  --hero-hasta:      #142254;
  --texto-principal: #e8edf8;
  --texto-secund:    #9aaac8;
  --card-bg:         #1a2d6b;
  --card-borde:      rgba(255, 255, 255, 0.09);
  --footer-bg:       #142254;
  --footer-txt:      #9aaac8;
  --gris-bg:         #0d1b3e;
  --gris-borde:      rgba(255, 255, 255, 0.09);
}

/* ===== 3. RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--gris-bg);
  color: var(--texto-principal);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background .3s, color .3s;
}
a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ===== 4. SCROLLBAR ===== */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--azul-claro); border-radius: 3px; }

/* ============================================================
   5. NAVBAR
============================================================ */
nav.navbar {
  background: var(--nav-bg);
  box-shadow: 0 2px 16px var(--nav-sombra);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .3s;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* — Logo — */
.nav-logo  { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.nav-escudo {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-escudo img {
  width: 52px; height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .18));
}
html.dark .nav-escudo img {
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, .12)) brightness(1.05);
}
.nav-sep {
  width: 2px; height: 36px;
  background: linear-gradient(to bottom, var(--dorado), transparent);
}
.nav-texto { display: flex; flex-direction: column; line-height: 1.15; }
.nav-muni {
  font-size: .6rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--azul);
}
html.dark .nav-muni { color: var(--dorado-suave); }
.nav-nombre {
  font-family: 'Merriweather', serif;
  font-size: .9rem; font-weight: 900; color: var(--azul);
}
html.dark .nav-nombre { color: var(--blanco); }

/* — Links — */
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-links a {
  font-size: .84rem; font-weight: 600; color: var(--texto-secund);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover,
.nav-links a.active             { color: var(--azul-medio);   border-bottom-color: var(--dorado); }
html.dark .nav-links a:hover,
html.dark .nav-links a.active   { color: var(--dorado-suave); border-bottom-color: var(--dorado-suave); }

/* — Controles (toggle + hamburguesa) — */
.nav-controls { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

#theme-toggle {
  background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: var(--azul);
  transition: background .2s;
}
#theme-toggle:hover            { background: rgba(26, 58, 140, .08); }
html.dark #theme-toggle        { color: var(--dorado-suave); }
html.dark #theme-toggle:hover  { background: rgba(255, 255, 255, .08); }

#hamburger {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--azul); font-size: 1.15rem; padding: .3rem;
}
html.dark #hamburger { color: var(--dorado-suave); }

/* ============================================================
   6. HERO
============================================================ */
.hero {
  background: linear-gradient(135deg, var(--hero-desde) 0%, var(--hero-hasta) 100%);
  transition: background .3s;
  position: relative;
  overflow: hidden;
}

/* Fondo decorativo */
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(26, 58, 140, .07)  0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 15% 85%, rgba(201, 148, 10, .05) 0%, transparent 55%);
}
html.dark .hero::before {
  background:
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(58, 111, 216, .14) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 15% 85%, rgba(232, 184, 75, .06)  0%, transparent 55%);
}

/* Línea diagonal heráldica */
.hero::after {
  content: ''; position: absolute;
  top: -10%; right: 37%; width: 2px; height: 130%;
  background: linear-gradient(
    to bottom,
    transparent               0%,
    rgba(201, 148, 10, .22)  45%,
    rgba(26,  58,  140, .12) 80%,
    transparent             100%
  );
  transform: rotate(10deg); pointer-events: none;
}
html.dark .hero::after {
  background: linear-gradient(
    to bottom,
    transparent              0%,
    rgba(232, 184, 75, .16) 45%,
    rgba(58,  111, 216, .1) 80%,
    transparent             100%
  );
}

/* Contenedor interior */
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 68px - 72px);
}

/* — Columna izquierda — */
.hero-left {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 1.1rem;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dorado);
  background: rgba(201, 148, 10, .09);
  border: 1px solid rgba(201, 148, 10, .22);
  padding: .3rem .85rem; border-radius: 999px; width: fit-content;
}
html.dark .hero-eyebrow {
  color: var(--dorado-suave);
  background: rgba(232, 184, 75, .09);
  border-color: rgba(232, 184, 75, .22);
}

.hero-h1 {
  font-family: 'Merriweather', serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 900; line-height: 1.22;
  color: var(--texto-principal);
}
.hero-h1 .accent                { color: var(--azul-medio); position: relative; }
html.dark .hero-h1 .accent      { color: var(--dorado-suave); }
.hero-h1 .accent::after {
  content: ''; position: absolute;
  left: 0; bottom: -3px; width: 100%; height: 3px;
  background: linear-gradient(to right, var(--dorado), transparent);
  border-radius: 2px;
}

.hero-desc {
  font-size: .95rem; line-height: 1.7;
  color: var(--texto-secund); max-width: 460px;
}

/* — Grid de botones de acceso — */
.hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  max-width: 480px;
  margin-top: .2rem;
}

.btn {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .72rem 1rem;
  border-radius: .65rem; font-size: .83rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap; line-height: 1;
}
.btn i            { font-size: .85rem; flex-shrink: 0; }
.btn span         { transition: transform .2s; }
.btn:hover span   { transform: translateX(2px); }

/* Iniciar sesión */
.btn-primary {
  background: linear-gradient(135deg, var(--azul), var(--azul-medio));
  color: var(--blanco);
  box-shadow: 0 3px 12px rgba(26, 58, 140, .32);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--azul-medio), var(--azul-claro));
  box-shadow: 0 5px 18px rgba(26, 58, 140, .42);
  transform: translateY(-2px);
}

/* Seguimiento SGD */
.btn-green              { color: #15803d; border-color: #22c55e; }
.btn-green:hover        { background: #f0fdf4; transform: translateY(-2px); }
html.dark .btn-green    { color: #86efac; border-color: #4ade80; }
html.dark .btn-green:hover { background: rgba(74, 222, 128, .07); }

/* Seguimiento SISGEDO */
.btn-red                { color: #b91c1c; border-color: #ef4444; }
.btn-red:hover          { background: #fff1f2; transform: translateY(-2px); }
html.dark .btn-red      { color: #fca5a5; border-color: #f87171; }
html.dark .btn-red:hover { background: rgba(248, 113, 113, .07); }

/* Mesa de Partes */
.btn-blue               { color: #1d4ed8; border-color: var(--azul-claro); }
.btn-blue:hover         { background: #eff6ff; transform: translateY(-2px); }
html.dark .btn-blue     { color: #93c5fd; border-color: #60a5fa; }
html.dark .btn-blue:hover { background: rgba(96, 165, 250, .07); }

/* — Stats — */
.hero-stats {
  display: flex; gap: 1.5rem; align-items: center; margin-top: .4rem;
}
.stat         { display: flex; flex-direction: column; }
.stat-num {
  font-family: 'Merriweather', serif;
  font-size: 1.45rem; font-weight: 900;
  color: var(--azul-medio); line-height: 1;
}
html.dark .stat-num { color: var(--dorado-suave); }
.stat-lbl {
  font-size: .68rem; font-weight: 600; color: var(--texto-secund);
  text-transform: uppercase; letter-spacing: .08em; margin-top: .18rem;
}
.stat-sep { width: 1px; height: 32px; background: var(--gris-borde); }
html.dark .stat-sep { background: rgba(255, 255, 255, .12); }

/* — Columna derecha: imagen — */
.hero-right {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-img-wrap {
  position: relative;
  border-radius: 1.1rem; overflow: hidden;
  border: 2.5px solid rgba(201, 148, 10, .22);
  box-shadow: 0 6px 32px rgba(26, 58, 140, .16), 0 2px 6px rgba(0, 0, 0, .07);
  width: 100%; max-width: 500px;
}
html.dark .hero-img-wrap {
  border-color: rgba(232, 184, 75, .18);
  box-shadow: 0 6px 32px rgba(0, 0, 0, .42);
}
.hero-img-wrap img { width: 100%; height: auto; }

/* Badge flotante sobre la imagen */
.hero-badge {
  position: absolute; bottom: .85rem; left: .85rem;
  background: linear-gradient(135deg, var(--azul), var(--azul-medio));
  color: var(--blanco);
  padding: .42rem .85rem; border-radius: .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  display: flex; align-items: center; gap: .38rem;
  box-shadow: 0 3px 12px rgba(26, 58, 140, .38);
}
.hero-badge i { color: var(--dorado-suave); }

/* ============================================================
   7. SECCIÓN FEATURES (tarjetas)
============================================================ */
.features {
  background: var(--gris-bg);
  padding: 3rem 2rem;
  transition: background .3s;
  border-top: 1px solid var(--gris-borde);
}
html.dark .features { border-top-color: rgba(255, 255, 255, .06); }
.features-inner { max-width: 1200px; margin: 0 auto; }

.section-hd    { text-align: center; margin-bottom: 2rem; }
.section-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dorado);
  display: block; margin-bottom: .4rem;
}
html.dark .section-tag { color: var(--dorado-suave); }
.section-title {
  font-family: 'Merriweather', serif;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 900; color: var(--texto-principal); line-height: 1.3;
}
.section-sub { font-size: .88rem; color: var(--texto-secund); margin-top: .5rem; }

/* Grid de 4 columnas */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Tarjeta individual */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-borde);
  border-radius: .9rem;
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .25s, transform .25s, background .3s;
  position: relative; overflow: hidden;
}
/* Línea animada superior al hacer hover */
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--azul), var(--dorado));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.card:hover::before              { transform: scaleX(1); }
.card:hover                      { box-shadow: 0 6px 24px rgba(26, 58, 140, .11); transform: translateY(-3px); }
html.dark .card:hover            { box-shadow: 0 6px 24px rgba(0, 0, 0, .32); }

.card-icon {
  width: 40px; height: 40px; border-radius: .65rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: rgba(26, 58, 140, .09); color: var(--azul-medio);
}
html.dark .card-icon { background: rgba(232, 184, 75, .1); color: var(--dorado-suave); }
.card-title { font-size: .88rem; font-weight: 700; color: var(--texto-principal); }
.card-desc  { font-size: .8rem;  line-height: 1.6; color: var(--texto-secund); }

/* ============================================================
   8. FOOTER
============================================================ */
footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--gris-borde);
  padding: 1.1rem 2rem;
  transition: background .3s;
}
html.dark footer { border-top-color: rgba(255, 255, 255, .07); }
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-copy            { font-size: .75rem; color: var(--footer-txt); }
.footer-copy a          { color: var(--azul-medio); font-weight: 600; }
html.dark .footer-copy a { color: var(--dorado-suave); }
.footer-copy a:hover    { text-decoration: underline; }
.footer-links           { display: flex; gap: 1.1rem; }
.footer-links a         { font-size: .75rem; color: var(--footer-txt); transition: color .2s; }
.footer-links a:hover   { color: var(--azul-medio); }
html.dark .footer-links a:hover { color: var(--dorado-suave); }

/* ============================================================
   9. RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero-inner {
    flex-direction: column;
    padding: 2rem 1.5rem;
    min-height: auto;
    gap: 2rem;
  }
  .hero-right   { display: none; }
  .hero-actions { max-width: 100%; }
}

@media (max-width: 600px) {
  .hero-actions { grid-template-columns: 1fr; max-width: 300px; }
  .hero-stats   { flex-direction: column; gap: .8rem; }
  .stat-sep     { display: none; }
  .nav-links    { display: none; }
  #hamburger    { display: flex; align-items: center; justify-content: center; }

  /* Menú desplegable móvil */
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--nav-bg);
    padding: 1rem 1.5rem; gap: .9rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    border-top: 1px solid var(--gris-borde);
    z-index: 99;
  }
}

@media (max-width: 560px) {
  .cards-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   10. ANIMACIONES DE ENTRADA
============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-left > *               { animation: fadeUp .45s ease both; }
.hero-left > *:nth-child(1)  { animation-delay: .05s; }
.hero-left > *:nth-child(2)  { animation-delay: .11s; }
.hero-left > *:nth-child(3)  { animation-delay: .17s; }
.hero-left > *:nth-child(4)  { animation-delay: .23s; }
.hero-left > *:nth-child(5)  { animation-delay: .29s; }

.hero-right                  { animation: fadeUp .55s .1s ease both; }

.card                        { animation: fadeUp .45s ease both; }
.card:nth-child(1)           { animation-delay: .08s; }
.card:nth-child(2)           { animation-delay: .15s; }
.card:nth-child(3)           { animation-delay: .22s; }
.card:nth-child(4)           { animation-delay: .29s; }

/* Respeta la preferencia del sistema: sin movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}