:root {
    --dif-rosa: #E91E63;
    --dif-rosa-light: #F8BBD0; 
    --muni-verde: #2E7D32;
    --muni-verde-light: #E8F5E9;
    --texto-oscuro: #2c3e50;
    --blanco: #ffffff; 
    --color-salud: #00BCD4;
    --color-prevencion: #FF9800;
    --color-familia: #9C27B0;
    
    --gradiente-principal: linear-gradient(135deg, var(--dif-rosa) 0%, #C2185B 100%);
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--texto-oscuro);
    background-color: #f8f9fa;
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }

.navbar-custom {
    background-color: transparent;
    transition: all 0.4s ease;
}
.navbar-custom.scrolled {
    background-color: var(--blanco);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.carousel-organic {
    border-radius: 0 0 50% 50% / 0 0 10% 10%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.carousel-item { height: 85vh; background-color: #000; }
.carousel-item img { opacity: 0.9; object-fit: cover; object-position: center; height: 100%; width: 100%; image-rendering: -webkit-optimize-contrast; }

.tilt-card {
    transition: transform 0.1s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
}

.action-bar { margin-top: -50px; position: relative; z-index: 20; }

.action-card {
    background: white; padding: 2rem; border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 15px;
    border-left: 5px solid transparent;
}
.action-card.cita { border-left-color: var(--muni-verde); }
.action-card.denuncia { border-left-color: var(--dif-rosa); }

/* Animaciones */
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
.floating-icon { animation: float 4s ease-in-out infinite; }

.revelar { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.revelar.activo { opacity: 1; transform: translateY(0); }

.social-hub-container { background: linear-gradient(to bottom, #ffffff, #f0f2f5); }
.social-widget { border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); }

.header-fb-dif { background: linear-gradient(45deg, #1877F2, #3b5998); color: white; padding: 1.5rem; }
.header-fb-presi { background: linear-gradient(45deg, #E91E63, #C2185B); color: white; padding: 1.5rem; }
.header-x { background: #000000; color: white; padding: 1.5rem; }
.social-avatar { width: 60px; height: 60px; border-radius: 50%; border: 3px solid white; margin-top: -30px; object-fit: cover; background: #eee; }

.buzon-widget {
    background-color: #f8f9fa; border: 2px dashed #ced4da; border-radius: 20px; transition: all 0.3s;
}
.buzon-widget:hover { border-color: var(--dif-rosa); background-color: white; transform: translateY(-5px); }

.impact-section { background: var(--gradiente-principal); color: white; padding: 4rem 0; position: relative; }
.impact-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 30px 30px;
}
.counter-number { font-size: 3.5rem; font-weight: 800; font-family: 'Montserrat', sans-serif; }

.btn-ripple { position: relative; overflow: hidden; }
.ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    animation: ripple 0.6s linear; background-color: rgba(255, 255, 255, 0.5);
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.accordion-dif .accordion-item { border: none; margin-bottom: 15px; border-radius: 15px !important; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.accordion-dif .accordion-button:not(.collapsed) { background-color: var(--muni-verde-light); color: var(--muni-verde); }


/* 1. Cursor Gigante */
body.a11y-cursor-grande, 
body.a11y-cursor-grande * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 320 512"><path fill="%231a1a1a" stroke="%23ffffff" stroke-width="20" d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C22.279 468.831 0 454.832 0 443.14V19.428C0 2.571 19.443-6.285 30.554 5.429l284.441 281.424c10.832 10.856 2.777 28.571-12.806 28.571z"/></svg>') 10 10, auto !important;
}
/* 2. Resaltar Enlaces */
body.a11y-resaltar-enlaces a, 
body.a11y-resaltar-enlaces button {
    outline: 4px solid #ffeb3b !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 235, 59, 0.2) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
}

/* 3. Pausar Animaciones */
body.a11y-pausar-animaciones * {
    animation: none !important;
    transition: none !important;
}

/* 4. Alto Contraste (Modo estricto para debilidad visual) */
body.a11y-alto-contraste {
    background-color: #000000 !important;
    color: #ffff00 !important;
}
body.a11y-alto-contraste * {
    background-color: transparent !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}
body.a11y-alto-contraste img {
    filter: grayscale(100%) contrast(120%) !important;
}
body.a11y-alto-contraste a {
    color: #00ff00 !important; 
}


.btn-accesibilidad {
    background-color: #E91E63 !important; 
}
.btn-accesibilidad:hover {
    background-color: #C2185B !important; /
}

/* 5. Escala de Grises CORREGIDA (No rompe los botones flotantes) */
body.a11y-escala-grises > *:not(.btn-accesibilidad):not(#panelAccesibilidad):not(#guiaLecturaBarra) {
    filter: grayscale(100%) !important;
}

.btn-a11y-activo {
    background-color: var(--muni-verde) !important;
    color: white !important;
    border-color: var(--muni-verde) !important;
}

/* 6. Modo Dislexia (Fuente adaptada y espaciado amplio) */
body.a11y-dislexia, 
body.a11y-dislexia * {
    font-family: 'Comic Sans MS', 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.15em !important;
    word-spacing: 0.3em !important;
    line-height: 1.8 !important;
}

/* 7. Ocultar Imágenes (Para TDAH y espectro autista) */
body.a11y-ocultar-imagenes img,
body.a11y-ocultar-imagenes iframe,
body.a11y-ocultar-imagenes video {
    visibility: hidden !important;
}
/* Reemplaza las imágenes de fondo de los banners con un color sólido */
body.a11y-ocultar-imagenes .carousel-item {
    background-image: none !important;
    background-color: #343a40 !important;
}

/* 8. Efecto Visual para el Lector de Voz (Click-to-read) */
body.a11y-lector-activo p:hover,
body.a11y-lector-activo h1:hover,
body.a11y-lector-activo h2:hover,
body.a11y-lector-activo h3:hover,
body.a11y-lector-activo h4:hover,
body.a11y-lector-activo h5:hover,
body.a11y-lector-activo h6:hover,
body.a11y-lector-activo span:hover,
body.a11y-lector-activo a:hover,
body.a11y-lector-activo li:hover {
    outline: 3px dashed var(--dif-rosa) !important;
    background-color: rgba(233, 30, 99, 0.1) !important;
    cursor: pointer !important;
    transition: 0.2s;
}
/* Clases para forzar el Verde Institucional en el panel */
.texto-verde-dif { 
    color: var(--muni-verde) !important; 
}
.btn-outline-verde-dif { 
    color: var(--muni-verde); 
    border-color: var(--muni-verde); 
}
.btn-outline-verde-dif:hover { 
    background-color: var(--muni-verde); 
    color: white; 
}