:root {
  --texto: #1d1d1b;
  --fondo: #ffffff;
  --acento: #3a5a40;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --texto: #eeeeea; --fondo: #161614; --acento: #a3c4a8; }
}
:root[data-theme="dark"] { --texto: #eeeeea; --fondo: #161614; --acento: #a3c4a8; }

body { margin: 0; background: var(--fondo); color: var(--texto); font-family: system-ui, sans-serif; line-height: 1.6; }
.cabecera { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem; }
.cabecera ul { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.marca { font-weight: 700; color: var(--texto); text-decoration: none; }
a { color: var(--acento); }
.contenido { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.pie { max-width: 46rem; margin: 3rem auto 1rem; padding: 0 1rem; font-size: 0.9rem; }
.notas { list-style: none; padding: 0; }
.notas li { margin-bottom: 1.25rem; }
.formulario .campo { margin-bottom: 1rem; }
.formulario label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.formulario input, .formulario textarea { width: 100%; box-sizing: border-box; padding: 0.5rem; font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--acento); border-radius: 4px; }
.formulario button { padding: 0.6rem 1.4rem; font: inherit; color: var(--fondo); background: var(--acento); border: 0; border-radius: 4px; cursor: pointer; }
.formulario .error { color: #a12a2a; margin: 0.25rem 0 0; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: 0.75rem 1rem; border-left: 4px solid var(--acento); }
.aviso.ok { border-left-color: var(--acento); }

/* Aviso de reconstrucción: diálogo a pantalla completa. Oculto hasta que lo muestra aviso.js. */
.aviso-reconstruccion { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); overscroll-behavior: contain; }
.aviso-reconstruccion[hidden] { display: none; }
.aviso-reconstruccion__panel { box-sizing: border-box; width: 100%; max-width: 32rem; max-height: 100%; overflow-y: auto; padding: 1.5rem; color: var(--texto); background: var(--fondo); border-top: 4px solid var(--acento); border-radius: 4px; }
.aviso-reconstruccion__titulo { font-size: 1.4rem; line-height: 1.2; margin: 0 0 0.75rem; }
.aviso-reconstruccion__panel p { margin: 0 0 1.25rem; }
.aviso-reconstruccion__boton { padding: 0.6rem 1.4rem; font: inherit; color: var(--fondo); background: var(--acento); border: 0; border-radius: 4px; cursor: pointer; }
.aviso-reconstruccion__boton:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
body.aviso-abierto { overflow: hidden; }

/* Portada de inicio: bloques a ancho completo. Sin JS: el carrusel es CSS. */
body { overflow-x: hidden; overflow-x: clip; }
.portada-hero, .portada-servicios, .portada-socios-marco { position: relative; left: 50%; width: 100vw; margin-left: -50vw; box-sizing: border-box; }
.portada-hero, .portada-servicios { overflow: hidden; color: #ffffff; background: #082a57; display: flex; align-items: center; padding: 3rem 1rem; min-height: 18rem; }
.portada-hero::after, .portada-servicios::after { content: ""; position: absolute; inset: 0; background: #082a57; opacity: 0.5; z-index: 1; }
.portada-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.portada-hero__texto, .portada-servicios__texto { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; width: 100%; }
.portada-encabezado { font-size: 2.6rem; line-height: 1.1; margin: 0; color: #ffffff; }
.portada-carrusel { display: grid; font-size: 1.4rem; font-weight: 700; color: #0070e8; margin-top: 0.75rem; }
.portada-carrusel__item { grid-area: 1 / 1; margin: 0; opacity: 0; animation: portada-rotar 15s infinite; }
.portada-carrusel__item:nth-child(2) { animation-delay: 5s; }
.portada-carrusel__item:nth-child(3) { animation-delay: 10s; }
@keyframes portada-rotar { 0% { opacity: 0; } 5% { opacity: 1; } 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .portada-carrusel__item { animation: none; opacity: 0; }
  .portada-carrusel__item:first-child { opacity: 1; }
}
.portada-socios-marco { background: #ffffff; padding: 1.5rem 0; }
.portada-socios { display: flex; gap: 2rem; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 1rem; }
.portada-socios li { flex: 0 0 auto; scroll-snap-align: center; }
.portada-socios img { display: block; height: 64px; width: auto; }
.portada-servicios { text-align: center; min-height: 26rem; }
.portada-servicios h2 { font-size: 2.2rem; color: #ffffff; margin: 0 0 0.5rem; }
.portada-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.portada-boton { display: inline-block; padding: 0.75rem 1.25rem; border: 2px solid #ffffff; color: #ffffff; font-weight: 700; text-decoration: none; }
.portada-boton:hover, .portada-boton:focus { background: #ffffff; color: #082a57; }
.portada-video { margin: 0.75rem 0 0; }
.portada-video a { color: #ffffff; font-weight: 700; }
.whatsapp-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 99; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #ffffff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); text-decoration: none; }
.whatsapp-flotante:hover, .whatsapp-flotante:focus { background: #1fb857; }
.whatsapp-flotante svg { width: 34px; height: 34px; display: block; }
@media (max-width: 767px) { .whatsapp-flotante { right: 16px; bottom: 16px; width: 54px; height: 54px; } }