/* =========================
   RESET
========================= */

*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   -webkit-tap-highlight-color:transparent;
}

html,
body{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

/* =========================
   GLOBAL
========================= */

body{
    font-family:'Poppins', sans-serif;
    background:#ffffff;
    color:#333;
    line-height:1.6;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
}

/* =========================
   ANIMACIÓN LOGO
========================= */


.logo{
    height:60px;
    width:auto;
    cursor:pointer;
    transition:.3s ease;
    animation: heartbeat 3s infinite;
    filter: drop-shadow(0 0 5px rgba(253, 253, 253, 0.979));
}


@keyframes heartbeat {

0%{
transform:scale(1);
}

10%{
transform:scale(1.08);
}

20%{
transform:scale(1);
}

30%{
transform:scale(1.08);
}

40%{
transform:scale(1);
}

100%{
transform:scale(1);
}

}

.logo:hover{
    transform:scale(1.05);
}
/* =========================
   HEADER
========================= */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(2, 13, 168, 0.596);
    backdrop-filter:blur(10px);
    z-index:9999;
    box-shadow:0 2px 10px rgba(0, 0, 0, 0.966);
    padding-top:env(safe-area-inset-top);
}



@keyframes donatePulse{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(255, 255, 255, 0.4);
    }

    50%{
        transform:scale(1.08);
        box-shadow:0 0 20px rgba(255, 253, 253, 0.7);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(255, 255, 255, 0.4);
    }
}

.header .btn-primary{
    animation: donatePulse 2s infinite;
}

nav{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 5%;
}

/* =========================
   MENU
========================= */

.menu{
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
}

.menu li a{
    color:#ffffff;
    font-weight:600;
    transition:.3s;
}

.menu li a:hover{
    color:#000000;
}

/*=========================
MENÚ ACTIVO
=========================*/

.menu li a{
    position:relative;
    text-decoration:none;
}

.menu li a.active{
    color:#FF9800;
}

.menu li a.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:3px;
    background:#FF9800;
    border-radius:20px;
}



/* =========================
   MENU HAMBURGUESA
========================= */

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fce6e6;
    font-size:2rem;
    cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1024px){

    /* NAV */

nav{
    position:relative;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}

.menu-toggle{
    display:block;
}

.menu{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:20px;
    position:absolute;
    top:76px;
    left:0;
    width:100%;
    background:#0a3f8fe7;
    padding:30px 0;
    box-shadow:0 10px 20px rgb(247, 250, 58);
    z-index:999;
}

.menu.active{
    display:flex;
}

nav .btn-primary{
    position:fixed;
}
}

/*==============================
BOTÓN DONAR
==============================*/

.btn-donar{
    display:flex;
    align-items:center;
    justify-content:center;
}

.btn-donar img{
    height:65px;
    width:auto;
    animation:latido 1.6s infinite;
    transition:.35s ease;
    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.9))
        drop-shadow(0 0 12px rgba(255,255,255,.8))
        drop-shadow(0 0 24px rgba(255,255,255,.6));
}

.btn-donar:hover img{
    animation-play-state:paused;
    transform:scale(1.12);
    filter:
        drop-shadow(0 0 10px #fff)
        drop-shadow(0 0 20px #fff)
        drop-shadow(0 0 35px rgba(255,255,255,.95));
}

/*==============================
LATIDO
==============================*/

@keyframes latido{

    0%{
        transform:scale(1);
    }

    15%{
        transform:scale(1.08);
    }

    30%{
        transform:scale(.98);
    }

    45%{
        transform:scale(1.12);
    }

    60%{
        transform:scale(1);
    }

    100%{
        transform:scale(1);
    }
}


/*=========================
CELULARES
=========================*/

@media (max-width: 768px){

    .btn-donar img{
        height:48px; /* Ajusta el tamaño que desees */
        width:auto;
    }

    .btn-donar::before{
        width:55px;
        height:55px;
    }
}


/* =========================
   HERO
========================= */

#hero{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    padding:80px 7% 140px;
}

/* =========================
   CARRUSEL HERO (3 imágenes)
========================= */

.hero-slides{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:#00000098;
    opacity:0;
    transition:opacity 1.5s ease;
}

.hero-slide.activo{
    opacity:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(3, 3, 3, 0.185) 0%,
        rgba(5, 5, 5, 0.164) 55%,
        rgba(0, 0, 0, 0.918) 100%);
    z-index:1;
}


/* =========================
   CONTADORES HERO
========================= */

.hero-counters{
    position:absolute;
    bottom:-50px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:1100px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    z-index:10;
}

/* =========================
   COUNTERS
========================= */


.counter-card{
    background:#ffffffca;
    border-radius:20px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 5px 15px rgba(0, 0, 0, 0.945);
}

.counter-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:1.4rem;
    flex-shrink:0;
}

.orange{
    background:#ff7f6b;
}

.yellow{
    background:#f8c537;
}

.blue{
    background:#3b82f6;
}

.green{
    background:#4caf50;
}

.counter-info h3{
    font-size:1.8rem;
    color:#ff0000;
    margin-bottom:3px;
    line-height:1;
}

.counter-info p{
    font-size:.9rem;
    color:#070707;
    line-height:1.3;
}

@media(max-width:768px){

    #hero{
        min-height:60svh;
        padding:80px 5% 120px;
        justify-content:flex-start;
    }

    .hero-content{
        max-width:100%;
        text-align:center;
        margin-top:50px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-counters{
        position:absolute;
        bottom:10px;
        left:50%;
        transform:translateX(-50%);
        width:95%;
        grid-template-columns:repeat(4,1fr);
        gap:8px;
    }

    .counter-card{
        flex-direction:column;
        text-align:center;
        padding:8px;
    }

    .counter-icon{
        width:30px;
        height:30px;
        font-size:.8rem;
    }

    .counter-info h3{
        font-size:.7rem;
    }

    .counter-info p{
        font-size:.5rem;
        line-height:1.2;
    }

}

@media(max-width:992px){

    #hero{
        min-height:60svh;
        padding:80px 5% 120px;
        justify-content:flex-start;
    }

    .hero-content{
        max-width:100%;
        text-align:center;
        margin-top:50px;
    }

}


/* =========================
   ODS (Objetivos de Desarrollo Sostenible)
========================= */

#ods{
    padding:40px 5%;
    background:#8da0b480;
    text-align:center;
}

#ods h2{
    font-size:1.6rem;
    color:#103599;
    margin-bottom:10px;
}

.ods-subtitulo{
    color:#6b7280;
    margin-bottom:40px;
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
}

.ods-carousel{
    max-width:1250px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.ods-viewport{
    overflow:hidden;
    width:100%;
}

.ods-track{
    display:flex;
    --ods-visibles:4;
    transition:transform .7s cubic-bezier(.65,0,.35,1);
}

.ods-slide{
    flex:0 0 calc(100% / var(--ods-visibles));
    box-sizing:border-box;
    padding:0 12px;
    display:flex;
    justify-content:center;
}

.ods-card{
    background:#fff;
    border-radius:25px;
    padding:28px 20px;
    box-shadow:0 15px 40px rgba(0, 0, 0, 0);
    width:100%;
    text-align:center;
    transition:.3s;
}

.ods-badge{
    width:90px;
    height:auto;
    margin:0 auto 20px;
    display:block;
}

.ods-card h3{
    font-size:0.8rem;
    font-weight:800;
    color:#111;
    line-height:1.35;
    margin-bottom:14px;
}

.ods-card p{
    font-size:.6rem;
    font-weight:700;
    color:#333;
    line-height:1.5;
    margin-bottom:20px;
}

.ods-foto{
    width:100%;
    height:170px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}

.ods-arrow{
    flex:0 0 auto;
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background:#0D47A1;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ods-arrow:hover{
    background:#FF8C00;
    transform:scale(1.08);
}

.ods-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:25px;
}

.ods-dots span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#bbb;
    cursor:pointer;
    transition:.3s;
}

.ods-dots span.activo{
    background:#0D47A1;
    width:28px;
    border-radius:20px;
}

/* =========================
   ODS TABLET
========================= */

@media(max-width:992px){

    .ods-slide{
        padding:0 8px;
    }

}

/* =========================
   ODS MOBILE
========================= */

@media(max-width:768px){

    #ods{
        padding:30px 4%;
    }

    #ods h2{
        font-size:1.2rem;
        line-height:1.2;
    }

    .ods-subtitulo{
        font-size:.7rem;
    }

    .ods-carousel{
        gap:8px;
    }

    .ods-slide{
        padding:0 4px;
    }

    .ods-arrow{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .ods-card{
        padding:20px 16px;
    }

    .ods-badge{
        width:70px;
    }

    .ods-card h3{
        font-size:.7rem;
    }

    .ods-card p{
        font-size:.6rem;
    }

    .ods-foto{
        height:130px;
    }

}




/* =========================
   SECCIÓN AYUDAR
========================= */

#ayudar{
    padding:20px 5%;
    background:#030350;
    text-align:center;
}

/* =========================
   TÍTULO
========================= */

#ayudar h2{
    font-size:2rem;
    color:#ffffff;
    margin-bottom:10px;
    font-weight:700;
}

/* =========================
   LÍNEAS DECORATIVAS
========================= */

.titulo-linea{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:50px;
}

.titulo-linea span{
    width:60px;
    height:2px;
    background:#f59e0b;
}

.titulo-linea i{
    color:#f59e0b;
    font-size:1.2rem;
}



/*=========================================
            GRID
=========================================*/

.ayudar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
}

/*=========================================
            TARJETA
=========================================*/

.ayudar-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:18px;
    border-radius:22px;
    background:#dad6d2;
    text-align:left;
    cursor:pointer;
    transition:.45s;
    box-shadow:
        0 8px 20px rgba(255, 255, 255, 0.64);
}

/* brillo */

.ayudar-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.8s;

}

/* hover */

.ayudar-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 20px 45px rgba(0,0,0,.28);
}

.ayudar-card:hover::before{
    left:140%;
}

/*=========================================
ICONO
=========================================*/

.ayudar-icon{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:1.5rem;
    flex-shrink:0;
    transition:.35s;
}

.ayudar-card:hover .ayudar-icon{
    transform:scale(1.15) rotate(-10deg);
}

/* colores */

.rojo{
    background:#F44336;
}

.amarillo{
    background:#F4B400;
}

.azul{
    background:#2196F3;
}

/*=========================================
CONTENIDO
=========================================*/

.ayudar-info{
    flex:1;
}

.ayudar-info h3{
    color:#0D47A1;
    font-size:1.2rem;
    margin-bottom:10px;
    transition:.35s;
}

.ayudar-card:hover h3{
    color:#FF8C00;
}

.ayudar-info p{
    color:#444;
    line-height:1.6;
    font-size:.8rem;
    margin-bottom:8px;
}

/*=========================================
BOTÓN
=========================================*/

.ayudar-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#FF8C00;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
}

.ayudar-link i{
    transition:.35s;
}

.ayudar-card:hover .ayudar-link{
    color:#0D47A1;
    gap:14px;
}

.ayudar-card:hover .ayudar-link i{
    transform:translateX(6px);
}

/*=========================================
ANIMACIÓN ICONO
=========================================*/

@keyframes pulseIcon{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}

.ayudar-icon{
    animation:pulseIcon 3s infinite;
}

.ayudar-card::before{
    pointer-events:none;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px){
    #ayudar{
        padding:10px 5%;
    }

    #ayudar h2{
        font-size:1rem;
    }

    .titulo-linea{
        margin-bottom:30px;
    }

    .ayudar-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .ayudar-card{
        padding:8px;
        gap:6px;
    }

    .ayudar-icon{
        width:40px;
        height:40px;
        font-size:1.1rem;
    }

    .ayudar-info h3{
        font-size:0.9rem;
    }

    .ayudar-info p{
        font-size:.75rem;
        margin-bottom:12px;
    }

    .ayudar-link{
        font-size:.75rem;
    }

}

/* =========================
   videos
========================= */
:root{
  --ts-blue-deep:    #0B3D91;   /* azul base de toda la sección */
  --ts-blue-mid:     #12509E;
  --ts-blue-dark:    #082C6B;
  --ts-coral:        #FF6F4F;
  --ts-gold:         #FFC857;
  --ts-cream:        #FBF3E7;
  --ts-cream-dim:    #DCE6F4;
  --ts-card-bg:      #082C6B;

  /* Variables que usaba el footer pero nunca estaban definidas
     (antes apuntaban a un archivo externo "galeria2001a2005.css"
     que no existe en este proyecto) */
  --font-body:          'Poppins', sans-serif;
  --font-heading:       'Poppins', sans-serif;
  --accent-cyan:        #3b9ee0;
  --accent-cyan-soft:   rgba(59, 158, 224, .45);
}

.ts-section{
  position: relative;
  background:rgba(50, 50, 196, 0.771); /* 100% azul, sin degradado a otro color */
  padding: 80px 10px 58px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

.ts-inner{ max-width: 1180px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }

.ts-eyebrow{
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12.5px;
  margin: 0 0 10px;
}
.ts-title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--ts-cream);
  font-size: clamp(30px, 2vw, 46px);
  line-height: 1.08;
  margin: 0 0 40px;
}

/* ---- VIDEO INSTITUCIONAL (horizontal, ocupa toda la sección) ---- */
.ts-video-institucional{
  position: relative;
  width: 75%;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ts-card-bg);
  box-shadow: 0 20px 50px rgba(201, 190, 190, 0.653);
  border: 1px solid rgb(0, 0, 0);
}

.ts-video-institucional video,
.ts-video-institucional iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* Segunda sección (grilla de videos): menos padding arriba
   ya que viene justo debajo de la sección del video institucional */
.ts-section--video{
  padding-bottom: 30px;
}

.ts-section--grid{
  padding-top: 20px;
}

/* ---- 4 VIDEOS EN GRILLA (como estaba antes) ---- */
.ts-videos{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ts-video-card{
  position: relative;
  aspect-ratio: 9 / 13;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ts-card-bg);
  box-shadow: 0 10px 26px rgba(255, 255, 255, 0.808);
  border: 1px solid rgba(255,255,255,.08);
}

.ts-video-card::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

.ts-video-card video{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.ts-video-caption{
  position: absolute; left: 12px; top: 10px;
  color: var(--ts-cream);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  text-align: left;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   RESPONSIVE — tablet y celular
   ============================================================ */

/* Tablet horizontal / pantallas medianas */
@media (max-width: 1024px){
  .ts-title{ font-size: clamp(26px, 4.5vw, 38px); margin-bottom: 32px; }
  .ts-videos{ gap: 16px; }
  .ts-video-caption{ font-size: 13px; }
}

/* Tablet vertical: la grilla pasa a 2x2 */
@media (max-width: 860px){
  .ts-section{ padding: 30px 16px 52px; }
  .ts-section--grid{ padding-top: 20px; }
  .ts-title{ font-size: 28px; margin-bottom: 28px; }
  .ts-video-institucional{ border-radius: 14px; }
  .ts-btn-mas{ font-size: 14px; padding: 12px 26px; }
  .ts-videos{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .ts-video-card{ border-radius: 14px; }
  .ts-video-caption{ font-size: 14px; }
}

/* Celular grande */
@media (max-width: 600px){
  .ts-eyebrow{ font-size: 10px; }
  .ts-title{ font-size: 22px; line-height: 1.15; margin-bottom: 18px; }
  .ts-video-institucional{ border-radius: 10px; }
  .ts-btn-mas{ font-size: 13.5px; padding: 11px 22px; margin-top: 22px; }
  .ts-videos{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ts-video-card{ border-radius: 10px; }
  .ts-video-caption{ font-size: 11.5px; left: 8px; top: 6px; }
}

/* Celular pequeño */
@media (max-width: 380px){
  .ts-title{ font-size: 19px; }
  .ts-btn-mas{ font-size: 13px; padding: 10px 20px; }
  .ts-videos{ gap: 8px; }
  .ts-video-caption{ font-size: 10.5px; }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

#counters,
#programs,
#stories,
#call-to-action,
footer{
padding:40px 5%;
}
}

/* =========================================================
   FOOTER — usa los mismos tokens (--space-*, --accent-cyan, etc.)
   ya definidos en :root de galeria2001a2005.css
========================================================= */

.site-footer{
  position:relative;
  z-index:1;
  background:rgb(15, 47, 151);
  border-top:1px solid rgba(251, 254, 255, 0.055);
  backdrop-filter:blur(6px);
  padding:18px 24px 0;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding-bottom:24px;
}

/* Logo + descripción */
.footer-brand{
  display:flex;
  align-items:center;
  gap:40px;
  max-width:480px;
}
.footer-logo{
  width:200px;
  height:100px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgb(255, 255, 255));
}
.footer-desc{
  font-family:var(--font-body);
  font-size:11px;
  line-height:1.3;
  color:rgb(255, 255, 255);
  margin:0;
}


/* Redes sociales */
.footer-social{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.footer-social__label{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgb(255, 253, 253);
}
.footer-social__icons{
  display:flex;
  gap:10px;
}

.social-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255, 255, 255, 0.938);
  background:rgba(238, 224, 224, 0.973);
  color:rgb(109, 79, 79);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 0 12px rgb(255, 249, 249);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.social-icon:hover{
  transform:scale(1.1);
  box-shadow:0 0 18px var(--accent-cyan-soft);
}
.social-icon:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:3px;
}

/* Colores de marca por red — el ícono se pinta con el color siempre,
   y el borde/glow se pinta igual solo al hacer hover */
.social-icon--facebook{ color:#1877f2; }
.social-icon--instagram{ color:#e1306c; }
.social-icon--tiktok{ color:#000000; }
.social-icon--youtube{ color:#ff0000; }
.social-icon--email{ color:#0048ff; }
 
.social-icon--facebook:hover{ border-color:#1877f2; box-shadow:0 0 18px rgba(24,119,242,.45); }
.social-icon--instagram:hover{ border-color:#e1306c; box-shadow:0 0 18px rgba(225,48,108,.45); }
.social-icon--tiktok:hover{ border-color:#000000; box-shadow:0 0 18px rgba(0, 0, 0, 0.45); }
.social-icon--youtube:hover{ border-color:#ff0000; box-shadow:0 0 18px rgba(255, 0, 0, 0.808); }
.social-icon--email:hover{ border-color:blue; box-shadow:0 0 18px rgba(0, 0, 255, 0.781); }

/* Línea inferior */
.footer-bottom{
  border-top:1px solid rgb(252, 253, 255);
  text-align:center;
  padding:14px 0;
}
.footer-bottom p{
  margin:0;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.04em;
  color:white;
}

/* =========================================================
   MÓVIL
========================================================= */
@media (max-width:768px){
  .site-footer{
    padding:5px 16px 0;
  }
  .footer-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
    padding-bottom:18px;
  }
  .footer-brand{
    flex-direction:column;
    text-align:center;
    gap:8px;
  }
  .footer-social{
    align-items:center;
  }
  .footer-logo{
    width:200px;
    height:100px;
  }
  .footer-desc{
    padding: 2px;
    font-size:10px;
  }
  .social-icon{
    width:34px;
    height:34px;
  }
  .footer-bottom p{
    font-size:10px;
  }
}


/* =========================
   WHATSAPP FLOTANTE
========================= */

.whatsapp-float{
    position:fixed;
    bottom:calc(20px + env(safe-area-inset-bottom));
    right:calc(20px + env(safe-area-inset-right));
    width:60px;
    height:60px;
    background:#25D366;
    color:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    text-decoration:none;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
    z-index:99999;
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover{
    transform:scale(1.1);
}

/* Animación */

@keyframes whatsappPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }

}

@media(max-width:768px){

    .whatsapp-float{
        width:40px;
        height:40px;
        font-size:1.6rem;
        bottom:calc(15px + env(safe-area-inset-bottom));
        right:calc(15px + env(safe-area-inset-right));
    }

}

/* =========================
   MAPA SANTANDER
========================= */

#mapa-santander{
    padding:50px 10%;
    background:
linear-gradient(
135deg,
#ffffffb9,
#5c81b4
);
}

.mapa-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:150px;
    max-width:1400px;
    margin:auto;
}

/* =========================
   MAPA
========================= */

.mapa-svg{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.info-provincia{
    width:90%;
    max-width:500px;
    margin-top:15px;
    background:#fff;
    padding:15px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.767);
}

.info-provincia h2{
    text-align:center;
    color:#023685;
    margin-bottom:20px;
}

.dato-box{
    background:#dbdfe6;
    padding:15px;
    border-radius:12px;
    margin-bottom:12px;
    font-weight:600;
}

.mensaje-mapa{
    text-align:center;
    color:#d11616;
    margin-top:15px;
}

/*=========================
TÍTULO DEL MAPA
=========================*/

.titulo-mapa{
    width:100%;
    text-align:center;
    margin-bottom:25px;
}

.titulo-mapa h2{
    color:#0A3D91;
    font-size:2rem;
    font-weight:600;
    margin-bottom:15px;

}

.linea-titulo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.linea-titulo span{
    width:70px;
    height:3px;
    background:#F39C12;
    border-radius:50px;
}

.linea-titulo i{
    color:#F39C12;
    font-size:20px;
}

.titulo-mapa p{
    max-width:750px;
    margin:auto;
    color:#555;
    font-size:0.9rem;
    line-height:1.8;
}

@media(max-width:768px){

.titulo-mapa{
    margin-bottom:5px;
}

.titulo-mapa h2{
    font-size:1.2rem;
}

.titulo-mapa p{
    font-size:.7rem;
    padding:0 15px;
}

.linea-titulo span{
    width:45px;
}
}


/* =========================
   MAPA INTERACTIVO
========================= */

/* Provincias */

#velez,
#comunera,
#guanenta,
#garcia_rovira,
#yariguies,
#soto_norte,
#metropolitana{

    cursor:pointer;
    transition:all .35s ease;
    transform-box:fill-box;
    transform-origin:center;
}

/* Hover */

#velez:hover,
#comunera:hover,
#guanenta:hover,
#garcia_rovira:hover,
#yariguies:hover,
#soto_norte:hover,
#metropolitana:hover{

    transform:scale(1.0);

    filter:
    brightness(1.1)
    drop-shadow(0 0 12px rgba(255, 0, 0, 0.9));
}

/* Provincia seleccionada */

.provincia-activa{

    transform:scale(1.0) !important;

    filter:
    brightness(1.0)
    drop-shadow(0 0 18px rgb(253, 0, 0));
}

/* COLORES PROVINCIAS */

#velez path,
#velez polygon{
    fill:#FEBF7A !important;
}

#comunera path,
#comunera polygon{
    fill:#C09BBA !important;
}

#guanenta path,
#guanenta polygon{
    fill:#A5D984 !important;
}

#garcia_rovira path,
#garcia_rovira polygon{
    fill:#F9A3B0 !important;
}

#yariguies path,
#yariguies polygon{
    fill:#7BC3E9 !important;
}

#soto_norte path,
#soto_norte polygon{
    fill:#D9AF7D !important;
}

#metropolitana path,
#metropolitana polygon{
    fill:#F8DE4D !important;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .mapa-wrapper{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:2px;
    }

    .mapa-svg{
        width:100%;
        padding:1px;
    }

    .mapa-svg svg{
        width:100%;
        max-width:380px;
    }

    .info-provincia{
        width:60%;
        padding:5px;
        border-radius:20px;
    }

    .info-provincia h2{
        font-size:0.6rem;
        margin-bottom:2px;
    }

    .dato-box{
        padding:10px;
        font-size:.5rem;
        margin-bottom:8px;
    }

    #info-descripcion{
        display:none; /* Ocultamos el texto largo en celular */
    }
}

@media(max-width:768px){
    #mapa-santander{
        padding:10px 2%;
    }

}



/* formulario  */

.modal{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:9999;

    justify-content:center;
    align-items:center;
}

.modal-content{

    background:white;
    padding:30px;
    border-radius:20px;
    width:90%;
    max-width:450px;
}

.modal-content input{

    width:100%;
    padding:12px;
    margin-bottom:12px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
}

.modal-content button{

    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#0d47a1;
    color:white;
    cursor:pointer;
}

/*=========================
ALIADOS
=========================*/

.aliados{
    padding:10px 5%;
    background:#fff;
}

.titulo-aliados{
    text-align:center;
    margin-bottom:4px;
}

.titulo-aliados h2{
    color:#0A3D91;
    font-size:2rem;
    font-weight:700;
}

.titulo-aliados p{
    margin-top:20px;
    color:#666;
    max-width:700px;
    margin-inline:auto;
}

.slider-logos{
    overflow:hidden;
    width:100%;
    position:relative;
}

.logos{
    display:flex;
    align-items:center;
    gap:30px;
    width:max-content;
    animation:scrollLogos 35s linear infinite;
}

.logos img{
    height:80px;
    width:auto;
    object-fit:contain;
    transition:0.4s ease;
}

.logos img:hover{
    transform:scale(1.08);
}

@keyframes scrollLogos{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

@media(max-width:768px){

.aliados{
    padding:10px 5%;
}

.logos{
    gap:30px;
}

.logos img{
    height:50px;
}

.titulo-aliados h2{
    font-size:1.2rem;

}

.titulo-aliados p{
    font-size:.78rem;
    padding:0 15px;
}

.linea-titulo span{
    width:45px;
}
.logos{
    gap:15px;
}
}