html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Asegura que el cuerpo ocupe toda la altura de la ventana */
  
}

/* Contenedor principal */

@font-face {
    font-family: 'Pally-blod';
    src: url('/fonts/Pally-Bold.woff2') format('woff2');
    font-weight: 700; /* Valores válidos: normal (400), bold (700), etc. */
    font-style: normal; /* Usa valores válidos: normal, italic */
  }
  
  @font-face {
    font-family: 'Pally-medium';
    src: url('/fonts/Pally-Medium.woff2') format('woff2');
    font-weight: regular;
    font-style: regular; 
  }
  
  @font-face {
    font-family: 'Pally-regular';
    src: url('/fonts/Pally-Regular.woff2') format('woff2');
    font-weight: light;
    font-style: light; 
  }
  
.container {
    margin: 0 auto; /* Centra el div horizontalmente */
    margin-top: 150px;
    width: 119rem;
    position: relative; /* Asegura que los elementos hijos con position: absolute se posicionen relativamente a este contenedor */
}
@media(max-width: 1800px){
  .container {
    width: 100%;

  }
}
@media(max-width: 1130px){
  html body {
    margin-top: 180px;

  }
}
@media(max-width: 620px){
  html body {
    margin-top: 80px;
  }
}
.container-sub {
    width: 85%;
    margin: 0 auto; /* Centra el div horizontalmente */

}

.container-arrow{
  position: absolute;
  transform: translateX(-150%);
  font-size: 70px; /* Ajusta el tamaño de la flecha según sea necesario */
  cursor: pointer;
}
.arrow-icon {
  color: #272727  ; /* Ajusta el color de la flecha según sea necesario */
}

.container-imagen {
  margin: 0 auto;
  width: 100%;
  background-color: #E73246;
}

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


.container-text{
    color: white;
    width: 100%;
    font-family: 'Pally-regular', sans-serif;
    position: absolute; /* Permite posicionar el elemento en relación al contenedor */
    font-size: 40px;
    top: 91%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el elemento horizontal y verticalmente */
    text-align: center;

}
@media(max-width: 1358px){
  .container-text{
    font-size: 2.5vw;

  }
}

/*-----------------------INFORMACION.---------------------*/

.container-informacion{
    width: 70%;
    margin: 0 auto;
    font-family: 'Pally-regular', sans-serif;
    text-align: center;
    margin-top: 1%;
    font-size: 40px;
}
.cancelar-sub{
  font-size: 20px;
}
@media(max-width: 1200px){
  .cancelar-sub{
    font-size: 2.3vw;

  }
}
.costes{
    font-family: 'Pally-medium';
    color: #0AA6E0;
}
.PROYECTO{
    font-family: 'Pally-medium';
    color:#FBBB17;
}
.KENIA{
    font-family: 'Pally-medium';
    color: #E73246;
}
.lista{
  width: 100%;
  margin: 5% auto 0 auto; /* Centra el div horizontalmente y añade margen superior */
}

@media(max-width: 750px){
  .container-informacion{
    font-size: 3.3vw;

  }
}

/*-----------------------------*/

.container-buttons {
    display: none;
    justify-content: center;
    gap:2%; /* Espacio entre los botones */
    margin-bottom: 5%;
}

.s4 {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    border: none;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s;
    cursor: pointer;

    font-size: 22px;
    font-family: 'Pally-medium', sans-serif;
    border-radius: 1vw;
    height: auto;

    justify-content: center;
    align-items: center;
    background-color: #333;
    color: #f5f5f5;
}

.s4:focus {
  border: 3px solid #272727;

    outline: none;
    background-color: white;
    color: #272727;
  }
/*--------------botones tipo de donacion --------------*/

.container-buttons-donacion-tipo{
  width: 80%;
  height: 5.5vw;


  margin: 0 auto;
  gap: 11vw; /* Espacio entre los botones */
  justify-content: center; /* Centra los botones horizontalmente */
  display: flex;
  margin-top: 6%;
  margin-bottom: 8%;
  font-family: 'Pally-regular', sans-serif;

}	
.show-one-time, .show-subscription{
  transition: transform 0.2s;
  cursor: pointer;
  font-size: 1.3vw;

  font-family: 'Pally-medium', sans-serif;
  width: 13vw;
  height: auto;
  appearance: none; /* Elimina el estilo por defecto del navegador */
  -webkit-appearance: none; /* Elimina el estilo por defecto en Safari/Chrome */
  border-radius: 1vw;
  border: 0.3vw solid #272727;
  color:#272727;
  background-color: white; 
}

.show-one-time.selected, .show-subscription.selected {
  background-color: #272727;
  color: white;
}

/* Button shadow and interaction styles */
.show-one-time, .show-subscription, .donacion, .donar-btn, .button-contacto, .s4 {
  /* subtle elevated look */
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  transition: box-shadow 200ms ease, transform 120ms ease, opacity 150ms ease;
}

.show-one-time:hover, .show-subscription:hover, .donacion:hover, .donar-btn:hover, .button-contacto:hover, .s4:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transform: translateY(-3px);
}

.show-one-time:active, .show-subscription:active, .donacion:active, .donar-btn:active, .button-contacto:active, .s4:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

/* Slight visual tweak for primary CTA */
.donar-btn {
  /* stronger shadow for primary call-to-action */
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

/* -------------MOSTRAR DONACIONES---------------*/
.container-pagar{
  margin: 0 auto;
  width: 72rem;
}
.pagar-titulo{
  font-family: 'Pally-medium', sans-serif;
  font-size:75px;
  text-align: center;
  margin-bottom: 4%;
  
}
@media(max-width: 1358px){
  .pagar-titulo{
    font-size: 5vw;

  }
}
.donaciones{
    font-family: 'Pally-regular', sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    
    gap: 2%;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.grupo1{
    display: flex;
  width: 45%;
  gap: 5%;
  }	
  .grupo2{
  display: flex;
  width: 45%;
  gap: 5%;

  }

.donacion {
    border: none;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s;
    cursor: pointer;

    font-size: 2.5vw; /* Ajusta el tamaño del texto de los botones */
    font-family: 'Pally-medium', sans-serif; /* Aplica la fuente Pally al texto */
    border-radius: 1vw;
    padding: 2.5%;

    width: 320px; /* Ajusta el ancho de los botones */
    height: auto;

    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
}


.donacion-10{
    background-color: #0AA6E0;
}
.donacion-20{
    background-color: #E73246;
}
.donacion-30{
    background-color: #FBBB17;
}
.donacion:hover {
    transform: scale(1.05);
}
.precio {
    color: #f5f5f5; /* Cambia el color del texto según tu preferencia */
    font-size: 35px;
    
}

@media (max-width: 1152px){
  .container-pagar{
    width: 90%;

  }
  .donaciones{
    width: 90%;
  }
  .s4{ font-size: 1.4vw;}

}
/* --------------------donacion personalizado------------------*/

.container-donar-personalizado{
    font-size: 2vw;
    display: none;
    font-family: 'Pally-medium', sans-serif;
    text-align: center;
    align-items: center;
    margin-top: 2%;
}

@media (max-width: 820px) {
  .donaciones {
    display: block;
    gap: 10px; /* Espacio entre los elementos */

    }
    .precio{ font-size: 4vw;}

    .donacion {
      width: 30%; /* Ajusta el ancho del botón */
      height: 5vw; /* Ajusta la altura del botón */
    }
    .s4 {
      font-size: 2.5vw;
      width: 27vw; /* Ajusta el tamaño del texto de los botones */
    }
    .grupo1{
      justify-content: center;
      width: auto;
    }
    .grupo2{
      margin-top: 5%;
      justify-content: center;
      width: auto;

    }
    .container-pagar{
      margin-bottom: 4%;
    }
    .show-one-time, .show-subscription{
      width: 27.5%;
      height: 140%;
      font-size: 2.5vw;
    }
    .container-donar-personalizado{
      font-size: 2.7vw;
    }

}
/*------checkbox-----*/

.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox {
  position: relative;

  padding-left: 6vw;
  margin-right: 15px;
  cursor: pointer;
  
  font-size: 2vw;
  user-select: none;
}
.custom-checkbox .checkmark {
  position: absolute;
  margin-left: 15%;
  top: 5%;
  left: 3%;
  height: 2vw;
  width: 2vw;
  background-color: #fff;
  border-radius: 0.3vw; /* Hace que el checkmark sea cuadrado */
  border: 0.15vw solid #272727; /* Borde del checkmark */

}
.custom-checkbox input:checked ~ .checkmark.unica {
  background-color: #0AA6E0; /* Color verde para "unica" */
}
.custom-checkbox input:checked ~ .checkmark.suscripcion {
  background-color: #FBBB17; /* Color naranja para "suscripcion" */
}
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}
.custom-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 0.7vw;
  height: 1.3vw;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.frecuenciaSuscripcion{
  display: none;
  margin-top: 2%;
  
}
.donar-btn{
  font-family: 'Pally-medium', sans-serif;
  margin-top: 2%;
  padding: 1%;
  display: inline-block;
  background-color: #FBBB17;
  color: white;
  font-size: 2vw;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 1vw;
  border: 2px solid #272727;
  cursor: pointer;
}

@media(max-width: 1247px){
  .custom-checkbox .checkmark:after {
    left: 7.5px;
    top: 1px;
  }
}
@media(max-width: 970px){
  .custom-checkbox .checkmark:after {
    left: 5.5px;
    top: 1px;
  }
  @media(max-width: 711px){
    .custom-checkbox .checkmark:after {
      left: 2.5px;
      top: 0.1px;
    }

  }
}


/*-----Selector frecuencia de pago------*/
.frecuenciaSuscripcion {
  display: none;
  margin-top: 2%;
}


#frecuencia {
  width: 9vw;
  height:  3vw;
  font-size: 2vw;
  border: 0.2vw solid #ccc;
  border-radius: 0.3vw;
  background-color: #fff;
  color: #333;
  appearance: none; /* Elimina el estilo por defecto del navegador */
  -webkit-appearance: none; /* Elimina el estilo por defecto en Safari/Chrome */
  -moz-appearance: none; /* Elimina el estilo por defecto en Firefox */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 0L0 2h4z"/></svg>');
  font-family: 'Pally-medium', sans-serif;
  text-align: center;
}

#frecuencia option {
  background-color: #fff;
  color: #333;
  padding: 10px;
}
/*---------------FORMAS DE COLABORAR----------------*/

.container-formas{
  margin: 0 auto;
  margin-top: 5%;
  margin-bottom: 100px;
  width: 119rem;
}

@media(max-width: 1800px){
  .container-formas{
    width: 100%;
    height: auto;
  }
}

.formas-titulo{
  font-family: 'Pally-medium', sans-serif;
  font-size: 75px;
  text-align: center;
  margin-bottom: 6%;

}
@media(max-width: 1358px){
  .formas-titulo{
    font-size: 5vw;

  }
}
.container-formas-donar-1{
  display: flex;
  justify-content: center;
  margin-top: 2%;
}

.container-forma-donar-texto{
  font-family: 'Pally-regular', sans-serif;
  font-size: 34.56px;
  text-align: left;
  width: 43%;
  line-height: 1.5;
  padding: 0; /* Elimina el relleno del contenedor */
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
  height: 100%;
}
.forma-donar-texto {
  margin: 0; /* Elimina los márgenes del párrafo */
  padding: 10px; /* Añade relleno al párrafo si es necesario */
  width: 85%; /* Asegura que el párrafo ocupe todo el ancho del contenedor */
  box-sizing: border-box; /* Incluye el relleno en el tamaño total del elemento */
}
.container-imagen-formas{
  width: 33%;
  position: relative;
}
.img-formas{
  margin-top: -4%;
  margin-left: 10%;
  width: 45%;
}
.img-formas2{
  position: absolute;
  width: 60%;
  top: 40%;
  z-index: -20;
  left: 30%;
}
.container-button-formas{
  width: 100%;
  text-align: center; /* Centra el texto y los elementos inline */
  margin-top: 5%;
  font-family: 'Pally-regular', sans-serif;
  font-size: 1.7rem;

  height: auto;
}
.button-contacto{
  padding: 1.5%;
  height: 20%;
  margin-top: -0.5%;
  width: 40%;
  border-radius: 1vw;
  border: none  ;
  font-size: 35px;
  background-color: #0AA6E0;
  color: white;
  font-family: 'Pally-medium', sans-serif;
  cursor: pointer;
}
@media(max-width: 1405px){
  .container-button-formas{
    font-size: 1.9vw;
  }
}

@media(max-width: 750px){
  .container-forma-donar-texto{
    font-size: 2.7vw;
    width: 60%;
  }
  .container-forma-donar-texto{
    font-size: 3.1vw;
  }
  .img-formas{
    margin-left: -6%;
    margin-top: 17%;
    width: 24vw;
  }
  .img-formas2{
    position: absolute;
    width: 27vw;
    top: 50%;
    z-index: 20;
    left: 15%;
  }
  .button-contacto{
    font-size: 2.6vw;
  }
  
}

/*-----flecha----------*/
@media (max-width: 1027px) {
  .arrow-icon {
    top: -10%;
    transform: translateX(-130%);
  }
}

/*-------contenido informacion---*/

@media (max-width: 1440px) {
  .container-informacion {
    width: 85%;

  }
}