/* ESTILOS RESPONSIVE ORIGINAL */
@media (max-width: 900px){
  nav{ padding:0.75rem 1rem; flex-wrap:wrap; }
  nav ul{ gap:1rem; }
  .hero{ padding:6rem 1rem; min-height:70vh; }
  .hero h1{ font-size:2rem; }
  .hero p{ font-size:1.1rem; }
  .container{ padding:2rem 1rem; }
}
@media (max-width: 480px){
  nav ul{ width:100%; }
  .service-block{ padding:1.25rem; }
  .hero{ padding:4rem 1rem; min-height:60vh; }
}

/* MODO OSCURO */
html.dark {
  --primary:#e6efe9;
  --secondary:#d9b71a;
  --light:#0b3d2e;
  --bg:#0b1e1a;
}
html.dark body {
  background: var(--bg);
  color: var(--primary);
}
html.dark nav {
  background: rgba(11, 30, 26, .95);
}
html.dark .service-block {
  background: rgba(0, 0, 0, .2);
  color: var(--primary);
}
html.dark #final-footer-section .site-footer {
  background: #0a2a24;
}
html.dark .tarjeta {
  background: linear-gradient(135deg, #1a4b42, #0a2a24);
}