body {
      font-family: 'Open Sans', sans-serif;
      background-color: #f1f1f1 !important;
      font-size: 18px;
    }
.landing-container {
    max-width: 1200px;
    margin: 0 auto;
}
/* Header fijo */
.landing-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* Proporciones 40/60 y 50/50 en desktop */
.ratio-40 { flex: 0 0 40%; max-width: 40%; }
.ratio-60 { flex: 0 0 60%; max-width: 60%; }
.ratio-50 { flex: 0 0 50%; max-width: 50%; }

.width-75 {width: 75% !important;} 
.width-80 {width: 80% !important; margin: 0 auto !important;}

button.navbar-toggler {margin-right: 3%;}




h2,h3,h4 {
    font-family: 'Acumin Pro Condensed', sans-serif !important;
}

.color-2  {color: #bd9e56 !important;}
.color-3  {color: #7c1337 !important;}
.color-white {color: #fff !important;}


#modulo-6 {
    margin-top: 6.5rem !important;
    text-align: center !important;
}

/* Pastillas */
.pill-block {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.pill-inner {
    position: relative;
    border-radius: 25px;
    background: #f1f1f1;
    overflow: hidden;
    margin: 10% auto 0;
}
.pill-inner-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -30%);
    background: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    white-space: nowrap;
}
.flex-30 {
  flex: 0 0 30% !important; /* ← Width fijo 30%, no crece */
  min-width: 0 !important; /* Permite flex correcto */
}

.card-pill {
  border-radius: 20px !important;
  padding: 1.75rem 1.25rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}


.card-pill > p {
    max-width: 80% !important;
    margin: 8% auto !important;
    text-align: center !important;
    flex-grow: 1 !important; /* Ocupa espacio restante */
    display: flex;
    align-items: flex-start !important; /* ← TEXTO ARRIBA */
    line-height: 1.4;
}

/* Slider / contadores placeholder */
.progress-slider {
    width: 100%;
}

/* SOLUCIÓN SIMPLE: navbar-nav ocupa 70% desde el logo */
.navbar {
  padding: 0;
}

.navbar-brand {
  flex-shrink: 0;
}

.navbar-collapse {
  margin-left: 20%;
  width: 70%; 
  max-width: 70%;
}

.navbar-nav {
  display: flex !important;
  gap: 2rem !important;  /* 16px fijo entre elementos → ajusta a 0.75rem (12px), 1.25rem (20px), etc. */
  width: 100% !important;
  justify-content: flex-start !important; /* O space-between para extremos */
}


/* Nav-link centrado con subrayado */
.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  color: #bd9e56 !important;
  position: relative !important;
  display: inline-block !important;
  padding: 1rem 0 !important;
  flex: 1 !important;
  text-align: center !important;
}

.navbar-nav .nav-link::after,
.navbar-nav .dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #bd9e56;
  transition: width 0.3s ease-out;
}

.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link.active,
.navbar-nav .dropdown-toggle:hover {
  color: #000 !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after,
.navbar-nav .dropdown-toggle:hover::after {
  width: 100%;
}

/* Centra botón en navbar verticalmente */
.navbar-nav .nav-item a.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important; /* Ocupa altura del navbar */
  padding: 0rem 1rem !important; /* Ajusta padding interno */
  margin: 0 !important;
  background-color: #bf6547 !important;
  border: 1px solid #bf6547 !important;
}

.navbar-nav .nav-item a.btn:hover {
    background-color: #fff !important; 
    color: #bf6547 !important;
}

/* Opcional: Quita padding extra del li */
.navbar-nav .nav-item:has(a.btn) {
  padding: 0.25rem 0 !important;
}

#modulo-2 .row.align-items-start {
  align-items: flex-start !important;
}

#modulo-2 .col-lg-2 img {
  max-height: 80px; /* Controla altura estrellas */
  object-fit: contain;
}

h1{color: #7c1337;}
h2{color: #bd9e56; font-weight: bold;}
.lead{ color: #bd9e56;}

/* PODIUM SOFT: más alto y estrecho */
#modulo-2 h1 {
  font-family: "podium-soft-variable", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(3.2rem, 7vw, 5.5rem) !important;
  line-height: 1.05 !important; /* ← LIGERAMENTE más aire */
  letter-spacing: -0.015em !important; /* Espaciado natural */
  font-variation-settings: "wdth" 50 !important; /* ← Peso medio */
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  margin-bottom: 0.5rem !important;
  font-size: 5.9em !important;
}

#modulo-2 .lead {
    font-family: "podium-soft-variable", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(3.2rem, 7vw, 5.5rem) !important;
    line-height: 1.05 !important; /* ← LIGERAMENTE más aire */
    letter-spacing: -0.015em !important; /* Espaciado natural */
    font-variation-settings: "wdth" 80 !important; /* ← Peso medio */
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    margin-bottom: 0.5rem !important;
    font-size: 2em !important;
}

#modulo-4{
    position: relative !important;
}
.bt-dona-1 {
  background-color: #7c1337 !important; 
  font-weight: 700 !important; 
  border: 0 !important; 
  padding-left: 15% !important; 
  padding-right: 2% !important;
  position: relative !important;
  height: 47px !important;
  color: white !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important; /* ← Solo color suave */
}

/* HOVER: solo colores */
.bt-dona-1:hover,
.bt-dona-1:focus {
  background-color: transparent !important;
  color: #7c1337 !important;
  border: 1px solid #7c1337 !important;
  box-shadow: none !important;
}

/* ACTIVE: igual */
.bt-dona-1:active {
  background-color: transparent !important;
  color: #7c1337 !important;
  border: 1px solid #7c1337 !important;
}

/* Imagen SIN animación */
.bt-dona-1 img {
  position: absolute !important;
  top: -15% !important;
  left: 3% !important;
}

.img-equipo {max-width: 80%;}

.separator-dots {
  height: 20px; /* Altura contenedor */
  background-image: url('../img/separador.png'); /* ← Tu imagen pequeña */
  background-repeat: repeat-x; /* Repite horizontal */
  background-position: center; /* Centrado vertical */
  width: 100%;
  position: absolute;
  bottom: -10px;
  z-index: 10;
}

/* Variante más compacta */
.separator-dots.compact {
  height: 8px;
  background-size: 8px auto;
}


#modulo-5 {
  background: linear-gradient(to bottom, #bd9e55 0%, #f1f1f1 70%) !important;
  padding: 5rem 0 !important;
}

#modulo-5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  z-index: -1;
}

.text-white{color: #fff !important;}
.position-relative {position: relative !important;}
#str_red{ 
    position: absolute;
    bottom: -10%;
    right: -6%;
}
#str_gris{ 
    position: absolute;
    bottom: 60%;
    right: -8%;
}

#modulo-6 h1 {
  font-weight: 700 !important;
  font-size: 5em !important;
  color: #bd9e55 !important;
  font-family: "acumin-pro-condensed", sans-serif !important;
  font-weight: 800 !important; /* Bold Condensed */
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-align: center;
  position: relative;
}

#str_color{ 
    position: absolute;
    top:-8%;
    right: -5%;
    z-index: 999;
}

#str_yllw{ 
    position: absolute;
    left: 25%;
}

#star4{ 
    position: absolute;
    right: -2%;
    top: 35%;
}

#star3{ 
    position: absolute;
    left: -1%;
    top: 1%;
}


/* Tarjeta de cada slide */
.carousel-card {
  max-width: 590px;
  text-align: center;
  padding: 2rem 1.5rem;
}

/* Imagen del carrusel */
.carousel-card img {
  border-radius: 12px;
  object-fit: cover;
}

/* Título y texto (puedes poner Podium/Acumin aquí si quieres) */
.carrusel-title {
  font-family: "acumin-pro-condensed", sans-serif;
  font-weight: 800;
  margin: 1rem auto;
    color: #bd9e56 !important;
    font-size: 2.5em;
}

.carrusel-text {
  font-family:  sans-serif;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

/* Subrayado tipo “pie” al 50% centrado */
.carrusel-underline {
  width: 50%;
  height: 3px;
  background-color: #bd9e56;
  margin: 0 auto; /* centrado */
  border-radius: 999px;
}

/* Botones imagen redondos */
.carousel-control-prev-img,
.carousel-control-next-img {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-color: white !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  z-index: 10;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s ease !important;
}

.carousel-control-prev-img {
  left: -30px !important;
}

.carousel-control-next-img {
  right: -30px !important;
}

/* Imagen dentro del botón */
.btn-carousel-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 50% !important;
}

/* Hover botón */
.carousel-control-prev-img:hover,
.carousel-control-next-img:hover {
  background-color: #f8f9fa !important;
  box-shadow: 0 6px 20px rgba(189, 158, 86, 0.4) !important;
  transform: translateY(-50%) scale(1.1) !important;
  opacity: 1 !important;
}

#carruselHistorias {
    width: 80% !important;
    margin: 2% auto;
}

/* Lista SIN bullets por defecto */
.lista-customizada {
  list-style: none !important;
  padding-left: 0 !important;
  max-width: 78%;
}

/* Cada ítem con imagen personalizada */
.lista-customizada li {
  position: relative;
  padding-left: 2.5rem !important;
  margin-bottom: 0.75rem;;
}

/* Imagen como bullet */
.lista-customizada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 20px;
  height: 20px;
  background-image: url('../img/str_indice.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.resaltado {
  color: #7c1337 !important;
  font-weight: bold !important;
}

.bt-conoce {
    height: auto !important;
    text-align: center;
    padding-left: 2% !important;
    width: 60%;
}

#modulo-7, #modulo-8{
    background-color: #f1f1f1 !important;
}

h3 {
    font-weight: bold;
    font-size: 2em !important;
}


#modulo-9 > .landing-container{
    background: url(../img/bg_estrellas.png) no-repeat;
    background-position: top;
    background-size: contain;
    padding-top: 5%;
}

.bt-descarga,.bt-descarga:hover,.bt-descarga:focus,.bt-descarga:active {
    margin-top: 10%;
    background-color: #bd9e55 !important;
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: white !important;
    font-weight: bold;
}

.bt-descarga:hover,.bt-descarga:focus,.bt-descarga:active {
    background-color: white !important;
    color: #bd9e55 !important;
    border-color: #bd9e55 !important;
}

.bt-dona-2 {
  background-color: #bd9e55 !important; 
  font-weight: 700 !important; 
  border: 0 !important; 
  padding-left: 7% !important; 
  padding-right: 2% !important;
  position: relative !important;
  height: 47px !important;
  color: white !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important; /* ← Solo color suave */
  margin: 2% auto;
}

/* HOVER: solo colores */
.bt-dona-2:hover,
.bt-dona-2:focus,
.bt-dona-2:active {
  background-color: transparent !important;
  color: #bd9e55 !important;
  border: 1px solid #bd9e55 !important;
  box-shadow: none !important;
}

/* Imagen SIN animación */
.bt-dona-2 img {
  position: absolute !important;
  top: -15% !important;
  left: 3% !important;
}

.cuadro-contacto p {
    color: initial !important;
    font-weight: bold;
    margin: 0px auto !important;
}



.bt-contacto {
  background-color: #bd9e55 !important; 
  font-weight: 700 !important; 
  border: 0 !important; 
  position: relative !important;
  height: 47px !important;
  color: white !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important; /* ← Solo color suave */
  margin: 2% auto;
}

/* HOVER: solo colores */
.bt-contacto:hover,
.bt-contacto:focus,
.bt-contacto:active {
  background-color: WHITE !important;
  color: #bd9e55 !important;
  border: 1px solid #bd9e55 !important;
  box-shadow: none !important;
}


.bt-compra {
  background-color: #bd9e55 !important; 
  font-weight: 700 !important; 
  border: 0 !important; 
  position: relative !important;
  height: 47px !important;
  color: white !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important; /* ← Solo color suave */
  margin: 2% auto;
}

/* HOVER: solo colores */
.bt-compra:hover,
.bt-compra:focus,
.bt-compra:active {
  background-color: WHITE !important;
  color: #bd9e55 !important;
  border: 1px solid #bd9e55 !important;
  box-shadow: none !important;
}

#str_red2{ 
    position: absolute;
    top: -15%;
    right: -6%;
}

#imageSlider .carousel-control-prev-img,
#imageSlider .carousel-control-next-img,
#imageSliderEquipo .carousel-control-prev-img,
#imageSliderEquipo .carousel-control-next-img{
    background: none !important;
    box-shadow: none !important;
}
#imageSlider .carousel-control-prev-img,
#imageSliderEquipo .carousel-control-prev-img {
    left: 2% !important;
}
#imageSlider .carousel-control-next-img,
#imageSliderEquipo .carousel-control-next-img {
    left: 90% !important;
}

#imageSlider .carousel-control-prev-img,
#imageSlider .carousel-control-next-img {display: none !important;}



#modulo-12 {
    background-color: #7d1336 !important;
}

a.link_negro {color: #000;font-weight: bold; text-decoration: none;} 


.slider-container {
  margin: 15% 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.slider-track {
  width: 100%;
  height: 30px;
  background: #d4d8e0;
  border-radius: 15px;
  position: relative;
  margin: 20px 0;
}

.slider-fill {
  height: 100%;
  background: linear-gradient(90deg, #7d1336, #7d1336);
  border-radius: 15px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px #7d1336;
}

/* IMAGEN COMO HANDLE */
.slider-handle-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 5;
  transition: filter 0.3s;
  left: 0;
}

.slider-handle-img:hover {
  filter: brightness(1.3);
}

/* BOCADILLO CON IMAGEN */
.percent-bubble {
    position: absolute;
    top: -80px;
    left: 25px;
    transform: translateX(-50%);
    background-image: url(../img/bocadillo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 68px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    transition: all 0.3s ease;
    padding-bottom: 1%;
}


/* QUITA flechas CSS */
.percent-bubble::after,
.percent-bubble::before {
  display: none;
}


.slider-value {
  text-align: center;
  font-size: 24px;
  color:#7d1336;
  font-family: monospace;
  display: none;
}

#modulo-13{
    background-color: #bea059;
}

.p-fundacio {
    margin: 0px auto !important;
    max-width: 780px;
    font-size: 1.4em !important;
    color: #fff;
    font-weight: bold;
}

#modulo-14 .card-pill {
    padding-bottom: 10% !important;
}

#modulo-14 .card-pill > p {
    max-width: 80% !important;
    margin: 2% auto !important;
    text-align: center !important;
    flex-grow:inherit !important; /* Ocupa espacio restante */
    display: block !important;
    align-items: inherit !important;
    line-height: inherit !important;
}

.cont-fundacio{
    padding-left: 6%;
}

.text-fundacio {
    font-size: .9em !important;
}


.flapper.XXL {
    font-size: 6.5em;
    line-height: 1.1em;
    height: auto;

}

.flapper.XXL .digit {
    border-radius: 8px;
}

.flapper.XXL .digit div {
    border-radius: 6px;
}

.flapper.XXL .digit {
    height: 128px;
    width: 96px;
    font-size: inherit;
    line-height: inherit;
}

.flapper.XXL .digit .top {
    clip: rect(0px, auto, 64px, 0px);
}

.flapper.XXL .digit .bottom {
    clip: rect(65px, auto, 128px, 0px); 
}


@media (max-width: 992px) {
    .flapper.XXL {
        font-size: 66px;
        line-height: 70px;
        height: 76px;
    }
    
    .flapper.XXL .digit {
        height: 72px;
        width: 54px;
        border-radius: 6px;
    }
    
    .flapper.XXL .digit .top {
        clip: rect(0px, auto, 35px, 0px);
    }
    
    .flapper.XXL .digit .bottom {
        clip: rect(36px, auto, 72px, 0px); 
    }
}

/* Mobile (≤768px) → usa tamaño L+ (más grande) */
@media (max-width: 768px) {
    .flapper.XXL {
        font-size: 80px;
        line-height: 84px;
        height: 90px;
    }
    
    .flapper.XXL .digit {
        height: 86px;
        width: 64px;
        border-radius: 6px;
        margin: 0 0 0 3px;
    }
    
    .flapper.XXL .digit .top {
        clip: rect(0px, auto, 42px, 0px);
    }
    
    .flapper.XXL .digit .bottom {
        clip: rect(43px, auto, 86px, 0px); 
    }
}

/* Mobile pequeño (≤576px) → usa tamaño S */
@media (max-width: 576px) {
    .flapper.XXL {
        font-size: 36px;
        line-height: 39px;
        height: 44px;
    }
    
    .flapper.XXL .digit {
        height: 40px;
        width: 30px;
        border-radius: 4px;
        margin: 0 0 0 2px;
    }
    
    .flapper.XXL .digit .top {
        clip: rect(0px, auto, 19px, 0px);
    }
    
    .flapper.XXL .digit .bottom {
        clip: rect(20px, auto, 40px, 0px); 
    }

    .slider-container {max-width: 75%;}

}

/* Móvil: más cerca */
@media (max-width: 768px) {
    .carousel-control-prev-img {
        left: -20px !important;
    }
    .carousel-control-next-img {
        right: -20px !important;
    }

    #str_color {display: none;}
    #modulo-5 {padding: 0px !important;}
    #modulo-6 {margin-top: 2rem !important;}
    #modulo-7 {padding-top: 0 !important;}
    .separator-dots {width: 116%; left: -8%;}
    .bt-dona-2 img { left: -12% !important;}  
    .width-75 {width: 100% !important; margin: 0 auto !important;}
    #modulo-12, #modulo-13 {max-width: 100% !important;}
    #modulo-12 .landing-container, #modulo-13 .landing-container {width: 85%;} 
    #modulo-12 .bt-contacto {margin: 5% auto !important;}
    .cont-fundacio{ padding-left: 0;}
    
  
}


@media (max-width: 992px) {
    #modulo-2 .landing-container img {width: 20%;}
    #modulo-5,section.bg-light {background: initial !important;}

    #modulo-8 .d-flex {
        flex-direction: column !important;
    }
    
    .flex-30 {
        flex: 0 0 100% !important; /* Móvil full width */
    }

    .ratio-40,
    .ratio-60,
    .ratio-50 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 5%;
    }
    .row > div {
        margin-bottom: 1.5rem !important;
    }
    section { max-width:85%; margin: 0 auto !important; }
    h2.text-white {color: #bd9e56 !important;}
    #carruselHistorias {width: 100% !important;}
    #modulo-carrusel {padding-top: 0!important;}
    .lista-customizada {max-width: 100%;}
    .lista-customizada + a { margin: 0px auto;}
    .card-pill > p {margin-top: 1% !important;}
    .slider-container {width: 90%;}
}


/* Responsive */
@media (max-width: 1200px) and (min-width: 992px) {
  #modulo-2 h1 {
    font-size: 3.8rem !important;
  }
  .navbar-collapse {margin-left: 0; max-width: 100%;}
  .landing-container {max-width: 90% !important;}
  .slider-container {width: 90%;}
  #modulo-14 .card-pill {width: 100% !important;}
}

@media (max-width: 768px) {
  #modulo-2 h1 {
    font-size: 3rem !important;
  }
  #modulo-2 .lead {font-size: 1.5rem !important;}
}



/* MÓVIL: reset completo */
@media (max-width: 991.98px) {
  .navbar-collapse {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  
  .navbar-nav {
    gap: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-toggle {
    flex: none !important;
    display: block !important;
    padding: 0.75rem 1rem !important;
    text-align: left !important;
  }
}

@media (max-width: 576px) {
    #modulo-carrusel {max-width:100%!important;}
    .carousel-control-prev-img, .carousel-control-next-img {width:40px!important;height:40px!important;}
    .carousel-control-prev-img{left:0px !important;}
    .carousel-control-next-img{right: 0px !important;}
    .carrusel-title {font-size:1.5rem!important;max-width:85%!important;}
    .bt-dona-1 img {left: -6% !important;}
    .bt-dona-2 img {
        left: -32% !important;
    }
    .percent-bubble {
        padding-bottom: 4% !important;
    }
    .ps-5 {padding-left:0 !important;}
    .bt-conoce {width: 100% !important;}
    #modulo-9 p {font-size: .9em !important;}
    .bt-descarga, .bt-descarga:hover, .bt-descarga:focus, .bt-descarga:active {font-size: 1.2em !important;}
    .slider-container {margin-top: 20% !important;}
    .p-fundacio {font-size: .8em !important;}

}
#contador {margin:3% auto !important;}