:root {
    --color-principal: #f5cccb;
    --font-nav: "Annie Use Your Telescope", cursive, "google";
    --font-h1: "Playfair Display",serif,"google";
}

h1{
    font-family: var(--font-h1);
}

h2{
    font-family: var(--font-h1);
    font-size: 35px !important;
}

h3{
    font-family: var(--font-h1);
}

h4{
    font-family: var(--font-h1);
}

p{
    font-family: 'Open Sans', sans-serif;
}

.texto-playfair{
    font-family: var(--font-h1);
}

.texto-cursivo{
    font-family: 'Bilbo Swash Caps', cursive !important;
    font-size: 60px !important;
}

a{
    text-decoration: none;
}

.boton-contacto{
    background-color: var(--color-principal);
}
.boton-contacto:hover{
    background-color: #e9aaa9;
    color: white;
}

.icono-contacto{
    color: var(--color-principal);
}

.caja-circulo-fiesma {
    background-color: rgb(114, 228, 207) !important;
    color: white;
}

.caja-circulo-rcircular{
    background-color: rgb(89, 223, 66) !important;
    color: white;
}

.caja-circulo-reutilizar{
    background-color: rgb(210, 54, 54) !important;
    color: white;
}

.caja-circulo-comterrema{
    background-color: purple !important;
    color: white;
}

.caja-circulo-propoi{
    background-color: rgb(182, 182, 31) !important;
    color: white;
}

.caja-circulo-historias{
    background-color: rgb(87, 190, 231) !important;
    color: white;
}

/*BOTON ESTILOS*/

.btn-enlace {
    display: inline-block;
    background-color: var(--color-principal);
    /* naranjo */
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 8px;
    /* bordes ligeramente redondos */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-enlace:hover {
    transform: translateY(-5px);
    /* efecto de levantarse */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
    color: black;
    background-color: var(--color-principal);
}

/*Menu de Navegacion HEADER*/
.nav-link {
    font-family: var(--font-nav);
    font-size: 14px;
}

.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    /* permite que bajen a otra fila */
    justify-content: center;
    /* centra horizontalmente */
    align-items: center;
    gap: 10px;
    /* espacio entre links */
    width: 100%;
    text-align: center;
    padding: 0px 70px 0px 70px;
}

.navbar-nav .nav-link {
    padding: 8px 12px;
    white-space: normal;
    /* permite salto de texto si es muy largo */
}

/*====LOGOS ESTILOS =====*/
.logo-principal {
    width: 200px;
    height: auto;
    margin-left: 50px;
}

.logo-footer {
    width: 170px;
    height: 170px;
}

.logo-footer-2 {
    width: 170px;
    height: 100px;
}

/*fOOTER*/
.caja-footer {
    background-color: var(--color-principal);
    color: white;
}


/*ACORDEON ESTILOS AVISO LEGAL*/
.accordion-button:not(.collapsed) {
    background-color: #ffffff !important;
    /* color de fondo */
    color: #000000 !important;
    /* color del texto */
    box-shadow: none !important;
    /* quita sombra azul */
}

.accordion-button:focus {
    box-shadow: none !important;
    /* quita borde azul al hacer click */
    border-color: transparent !important;
}

.accordion-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    text-align: center !important;
    padding-right: 3rem; /* espacio para la flecha */
}

.accordion-button::after {
    position: absolute;
    right: 1.25rem;
}

.titulo-acordeon{
    font-size: 25px !important;
}
/*======Pagina de Inicio======*/
.imagen-hero-carrusel{
    width: 100%;
    height: 520px;
}

/* Contenedor responsive para video youtube pagina inicio*/
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* Proporción 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ajuste extra para mobile */
@media (max-width: 768px) {
    .video-container {
        padding-bottom: 60%;
    }

    .col-lg-6 .p-5 {
        padding: 2rem !important;
    }

    h1 {
        font-size: 28px;
    }
}