/* Contenedor principal */
*{
    scroll-behavior: smooth;
    
}
.inicio {
    display: flex;
    justify-content: flex-start; /* Recuadro pegado al borde izquierdo */
    align-items: flex-start; /* Ajusta la posición vertical del recuadro */
    width: 100%;
    height: 140vh; /* Altura ajustada al viewport */
    background-color: #fff; /* Fondo para contraste */
    position: relative;
    overflow: visible;
    padding-top: 95px; /* Espaciado entre el recuadro y la barra de navegación */
    overflow-x: hidden;
}

/* Caja de información */
.info-box {
    background-color: #C93790; /* Color de fondo del recuadro */
    color: #fff; /* Color del texto */
    width: 48%; /* Ajusta el ancho del recuadro */
    padding: 80px; /* Espaciado interno */
    border-top-right-radius: 450px; /* Bordes redondeados arriba-derecha */
    border-bottom-right-radius: 450px; /* Bordes redondeados abajo-derecha */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centro visual */
    text-align: justify; /* Texto justificado */
    position: relative;
    z-index: 2; /* Por encima de la imagen */
    margin-top: 8%;
}

/* Cita o frase */
.frase {
    font-size: 3rem; /* Tamaño más grande */
    font-family: 'Nunito'; /* Fuente personalizada */
    font-weight: normal; /* Sin negritas */
    line-height: 1; /* Espaciado entre líneas ajustado */
    margin-bottom: 30px; /* Espaciado inferior */
    text-align: left; /* Centrado del texto */
    padding: 0 20px;
}

.decorative-line {
    position: absolute; /* Posiciona respecto al contenedor padre */
    height: 8px;
    background-color: #E0D543;
    width: 55%; /* Ajusta el ancho según lo necesario */
    border-radius: 10px;
    top: 80%; /* Ajusta para colocar debajo del texto */
    left: 12px; /* Alinea al borde izquierdo del contenedor */
    transform: translateX(45%);
}

/* Botón */
.cta-button {
    background-color: #E0D543;
    color: #fff;
    border: none;
    border-radius: 60px;
    padding: 20px 40px; /* Tamaño más grande del botón */
    font-size: 1.4rem; /* Tamaño del texto del botón ajustado */
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-in-out;
    position: relative; /* Habilita el ajuste con 'top' */
    top: 100px; /* Baja el botón sin afectar al tamaño del recuadro */
    left: 30px;
    font-family: 'Nunito';
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
    font-family: 'Nunito';
}

/* Imagen decorativa */
.image-decorative {
    position: absolute;
    top: 15px; /* Baja la imagen */
    right: -10%; /* Ajusta la visibilidad de la imagen */
    width: auto; /* Asegura que el ancho sea 100% dentro del contenedor */
    height: auto; /* Mantén las proporciones originales */
    max-width: 165%; /* Limita el tamaño máximo al 50% del ancho de la pantalla */
    max-height: 95%; /* Limita el tamaño máximo al 50% del alto de la pantalla */
    
    z-index: 1; /* Detrás del recuadro */
    opacity: 0.9; /* Transparencia ligera */
}


/* Contenedor general para los íconos laterales */
.side-icons {
    position: fixed; /* Fija la posición respecto a la ventana */
    left: 10px; /* Márgen izquierdo */
    bottom: 50px; /* Ajusta la distancia desde la parte inferior de la ventana */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000; /* Asegura que los iconos estén por encima de otros elementos */
}

.side-icons a img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
}

.side-icons a img:hover {
    transform: scale(1.1);
}

/* Flecha para volver al inicio */
.scroll-to-top {
    position: fixed; /* Fija la posición respecto a la ventana */
    right: 10px; /* Márgen derecho */
    bottom: 50px; /* Distancia desde la parte inferior de la ventana */
    cursor: pointer;
    transition: transform 0.3s;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.scroll-to-top img {
    width: 50px;
    height: 50px;
}

.scroll-to-top:hover img {
    transform: scale(1.1);
}

#donac{
    width: 100%;
    height: 10vh;
}
/*
.bloque-paypal {
  max-width: 600px;
  margin: 40px auto 40px 500px;  mueve hacia la derecha 
  text-align: center;
  padding:10px;
  box-sizing: border-box;
}
*/  /* 
.bloque-paypal * {
  all: unset;         Elimina estilos heredados problemáticos 
  display: revert;       Restaura comportamiento predeterminado 
  text-align: center;
  white-space: normal;
  font-family: inherit;
}

#paypal-container-QTFHW54UL8NS2 {
  margin-top: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
*/

@media screen and (max-width: 769px) {
    .inicio {
        padding-top: 50px;
        height: 40vh; /* Reduce la altura para pantallas más pequeñas */
    }

    .info-box {
        height: 85%;
        width: 40%; /* Cambia el ancho para que ocupe menos espacio */
        padding: 0 20px; /* Reduce el espaciado interno */
        margin-top: 3%;
        border-top-right-radius: 250px; /* Mantiene los bordes redondeados */
        border-bottom-right-radius: 250px;
    }

    .frase {        
        font-size: 0.9rem; /* Disminuye el tamaño del texto */
        margin-top: 45px;
        margin-bottom: 50px; /* Reduce el espaciado inferior */
        padding: 10px 0 20px;
        
    }

    .decorative-line {
        display: none !important;
    }

    .cta-button {
        padding: 10px 10px; /* Reduce el tamaño del botón */
        font-size: 0.6rem; /* Disminuye el tamaño del texto */
        top: -50px; /* Ajusta la posición del botón */
        left:-18px;
        font-family: 'Nunito';
    }

    .image-decorative {
        top: 10px; 
        right: 0; 
        max-width: 85%; /* Ajusta el tamaño máximo de la imagen */
        max-height: auto; /* Mantiene las proporciones de la imagen */
        right: -20%; /* Ajusta la visibilidad de la imagen */
    }



    .scroll-to-top {
        display: none !important; 
    }

   
}