/* ============================================================
   Efecto 3D / neumorfismo para el rediseno (header, hero, footer)
      Basado en imagenes de referencia entregadas por la usuaria.
         No se tocan colores base ni tipografia del tema: se reutilizan
            las variables ya existentes en style.css (#ACBDAA verde salvia,
               #3c3a3a texto oscuro, "Playfair Display" / "Inter").
                  ============================================================ */
                  
                  /* Barra superior oscura en forma de pill */
                  .header--one .header__top{
                        margin: 14px 24px 0;
                          border-radius: 999px;
                            box-shadow: 0 10px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
                  }
                  
                  /* Menu principal en forma de pill embossed */
                  .header--one .header__bottom{
                        margin: 10px 24px 14px;
                          border-radius: 999px;
                            box-shadow: 0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.08);
                  }
                  
                  /* Boton "Donar Ahora" del menu */
                  .header--one .header__btn a{
                        border-radius: 999px;
                          box-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
                  }
                  
                  /* Iconos circulares de telefono / correo en la barra superior */
                  .header--one .header__topcontact ul li .icon{
                        width: 34px;
                          height: 34px;
                            border-radius: 50%;
                              display: flex;
                                align-items: center;
                                  justify-content: center;
                                    background: rgba(255,255,255,.08);
                                      box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
                  }
                  
                  /* Iconos sociales circulares 3D (header y footer) */
                  .header--one .header__socialicon a,
                  .footer--one .footer__logo .socialicon .icon a{
                        border-radius: 50%;
                          box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
                  }
                  
                  /* Selector de idioma con icono de globo, estilo chip */
                  .lang-3d-pill{
                        display: inline-flex;
                          align-items: center;
                            gap: 8px;
                  }
                  .lang-3d-pill i{
                        display: inline-flex;
                          align-items: center;
                            justify-content: center;
                              width: 26px;
                                height: 26px;
                                  border-radius: 50%;
                                    background: rgba(255,255,255,.08);
                                      box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
                  }
                  
                  /* ===== Hero / banner principal ===== */
                  .hero-3d{
                        position: relative;
                  }
                  .hero-3d .hero-3d-btns{
                        display: flex;
                          align-items: center;
                            gap: 14px;
                              flex-wrap: wrap;
                  }
                  .hero-3d .hero-3d-btns .or{
                        display: flex !important;
                          align-items: center;
                            justify-content: center;
                              color: #fff;
                                font-style: italic;
                                  font-family: "Playfair Display", serif;
                  }
                  .hero-3d .hero-3d-btns a:last-child{
                        display: inline-block !important;
                  }
                  .hero-3d .btn-3d{
                        border-radius: 999px !important;
                          box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
                  }
                  .hero-3d .btn-3d--light{
                        background: #fff !important;
                          color: #3c3a3a !important;
                  }
                  .hero-progress-badge{
                        position: absolute;
                          right: 6%;
                            bottom: 8%;
                              width: 74px;
                                height: 74px;
                                  border-radius: 50%;
                                    background: #A3201F;
                                      color: #fff;
                                        display: flex;
                                          align-items: center;
                                            justify-content: center;
                                              font-weight: 700;
                                                font-size: 20px;
                                                  box-shadow: 0 14px 26px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.25);
                                                    z-index: 5;
                  }
                  
                  /* ===== Footer ===== */
                  .footer--one .footer__gallery .innerimg{
                        border-radius: 14px;
                          overflow: hidden;
                            box-shadow: 0 10px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
                  }
                  
                  /* Boton circular rojo de volver arriba, con efecto 3D */
                  #scroll-percentage{
                        border-radius: 50% !important;
                          background: #A3201F !important;
                            box-shadow: 0 12px 22px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.25) !important;
                  }
                  
                  /* Ajustes responsive: mismos efectos, con menos margen en pantallas chicas */
                  @media (max-width: 1199.98px){
                        .header--one .header__top,
                          .header--one .header__bottom{
                                  margin-left: 12px;
                                      margin-right: 12px;
                          }
                  }
                  @media (max-width: 575.98px){
                        .header--one .header__top,
                          .header--one .header__bottom{
                                  margin-left: 8px;
                                      margin-right: 8px;
                                          border-radius: 22px;
                          }
                            .hero-progress-badge{
                                    width: 58px;
                                        height: 58px;
                                            font-size: 16px;
                                                right: 4%;
                                                    bottom: 6%;
                            }
                  }

/* ===== Logo sizing (header/mobile/offcanvas/footer) ===== */
.header__logo{ margin-left: 22px; }
.header__logo img{ max-height: 68px; width: auto; object-fit: contain; }
.header__mobilelogo img{ max-height: 52px; width: auto; object-fit: contain; }
.offcanvas__logo img{ max-height: 60px; width: auto; object-fit: contain; }
.footer__logo-lockup{ display:flex; align-items:center; margin-bottom:18px; }
.footer__logo-new{ height:64px; width:auto; object-fit:contain; }

/* ===== Hero text legibility over photo ===== */
.hero-3d .swiper-slide.banner__bg{ position: relative; background-size: auto 180% !important; background-position: center top !important; }
.hero-3d .swiper-slide.banner__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.05) 75%);
  z-index: 1;
}
.hero-3d .container{ position: relative; z-index: 2; }
.hero-3d .slidetext h2,
.hero-3d .slidetext p{ text-shadow: 0 2px 8px rgba(0,0,0,.55); }


/* Ocultar el indicador circular de % de scroll; dejar solo el boton de volver arriba */
#scroll-percentage:not(.active){ display: none !important; }


/* Flechas del carrusel de ninos en /apadrinar, mismo efecto 3D del boton circular de volver arriba */
.guardian__slider .swiper-button-prev,
.guardian__slider .swiper-button-next{
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  background: #ACBDAA !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.25) !important;
  top: 50%;
  margin-top: -23px;
}
.guardian__slider .swiper-button-prev:after,
.guardian__slider .swiper-button-next:after{
  font-size: 16px;
  color: #fff;
  font-weight: 900;
}
.guardian__slider .swiper-button-prev{ left: 10px; }
.guardian__slider .swiper-button-next{ right: 10px; }
.guardian__slider .swiper-button-prev:hover,
.guardian__slider .swiper-button-next:hover{
  background: #8fa38c !important;
}
.guardian__slider .swiper-button-disabled{
  opacity: .35 !important;
}
@media (max-width: 575.98px){
  .guardian__slider .swiper-button-prev,
  .guardian__slider .swiper-button-next{
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }
  .guardian__slider .swiper-button-prev:after,
  .guardian__slider .swiper-button-next:after{
    font-size: 13px;
  }
  .guardian__slider .swiper-button-prev{ left: 4px; }
  .guardian__slider .swiper-button-next{ right: 4px; }
}