@font-face {
    font-family: encabezados;
    src: url("img/Agosto Página web/cabin font v1.5/Cabin-Bold-TTF.ttf");
}

@font-face {
    font-family: subitulos;
    src: url("img/Agosto Página web/cabin font v1.5/Cabin-SemiBold-TTF.ttf");
}

@font-face {
    font-family: cuerpo;
    src: url("img/Agosto Página web/cabin font v1.5/Cabin-Regular-TTF.ttf");
}

:root {
    --encabezadospagina: #FF0000;
    --parrafos: #00877A;
    --secondparraf: #FFF8E6;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: cuerpo;
}

/* Estilos para la barra de navegación */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
}

.logo img {
    width: 220px;
    height: auto;
    margin-left: 1rem;
}

.menu {
    display: flex;
    align-items: center;
    gap: 40px; /* Aumentado de 30px a 40px para más espacio entre elementos */
}

.dropdown {
    position: relative;
    width: 100%;
}

.dropbtn {
    text-decoration: none;
    color: var(--parrafos);
    font-size: 1.8em;
    transition: color 0.3s ease;
    white-space: nowrap; /* Asegura que el texto no se envuelva */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 240px; /* Asegúrate de que este mínimo sea suficiente o ajústalo según sea necesario */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 100%; /* Esto debería hacer que se extienda completamente bajo el elemento padre */
    left: 0;
    top: 100%;
}

.dropdown-content a {
    color: var(--parrafos);
    padding: 12px 16px; /* Ajusta el padding si es necesario para que el fondo cubra todo el texto */
    text-decoration: none;
    display: block;
    font-size: 1em;
    white-space: nowrap; /* Esto evitará que el texto se envuelva y asegurará que el fondo cubra todo horizontalmente */
    margin-top: 2rem;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: var(--encabezadospagina);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: var(--encabezadospagina);
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px), (max-width: 525px) {
    .dropdown-content {
        position: absolute; /* Cambiado de fixed a absolute para mejor control relativo al padre */
        box-shadow: none;
        border-top: 1px solid #ccc; /* Opcional: añade un borde superior para mejor visualización */
    }

    .dropdown-content a {
        padding: 10px 20px;
        font-size: 1.2em;
    }

    .bx-menu {
        display: block; /* Muestra el icono del menú en pantallas pequeñas */
        font-size: 2em;
        cursor: pointer;
    }
}

.language-selector {
    margin-left: auto; /* Empuja el selector de idioma al final del menú */
}

.language-selector select {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    color: var(--parrafos);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.language-selector select:hover {
    background-color: #f0f0f0;
    color: var(--encabezadospagina);
}

.menu a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--parrafos);
    font-size: 1.8em; /* Aumenta el tamaño de la letra */
    transition: color 0.3s ease;
}

.menu a:hover {
    color: var(--encabezadospagina); /* Cambia el color al pasar el ratón */
}

.icons {
    display: flex;
    align-items: center;
}

.icons a {
    margin: 0 10px;
    color: var(--parrafos);
    font-size: 1.5em;
    transition: color 0.3s ease;
    margin-right: 2rem;
}

.icons a:hover {
    color: var(--encabezadospagina); /* Cambia el color al pasar el ratón */
}

.bx-menu {
    display: none; /* Oculta el icono del menú en pantallas grandes */
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-container input {
    display: none;
    width: 0;
    padding: 10px;
    border: 1px solid green; /* Borde verde */
    border-radius: 4px;
    transition: width 0.4s ease, padding 0.4s ease;
}

.search-container.active input {
    display: block;
    width: 200px;
    padding: 10px;
    border: 1px solid green; /* Borde verde */
}

.search-container .clear-icon {
    display: none;
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.search-container.active .clear-icon {
    display: block;
}

.search-container i {
    color: green; /* Color verde para el ícono */
    margin-right: 10px; /* Margen hacia la derecha */
    cursor: pointer;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    color: var(--parrafos);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    background-color: var(--encabezadospagina);
    color: white;
}

@media (max-width: 1400px) {
    .navbar {
        padding: 10px 10px; /* Reduce el padding del navbar */
    }

    .logo img {
        width: 180px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu a {
        font-size: 1.5em; /* Reduce el tamaño de la fuente del menú */
        margin: 0 10px; /* Reduce el margen entre los elementos del menú */
    }

    .language-selector select {
        font-size: 12px; /* Reduce el tamaño de la fuente del selector de idioma */
        padding: 5px; /* Reduce el padding del selector de idioma */
    }

    .bx-menu {
        display: block; /* Muestra el icono del menú en pantallas pequeñas */
        font-size: 2em;
        cursor: pointer;
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .section {
        width: 45%; /* Ajusta el tamaño para tablets */
    }

    .product {
        width: 45%; /* Ajusta el tamaño para tablets */
    }

    .cedis {
        flex: 0 0 45%; /* Ajusta el tamaño para tablets */
    }
}

@media (max-width: 1024px) {
    .navbar {
        padding: 10px 10px; /* Reduce el padding del navbar */
    }

    .logo img {
        width: 150px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu a {
        font-size: 1.3em; /* Reduce el tamaño de la fuente del menú */
        margin: 0 8px; /* Reduce el margen entre los elementos del menú */
    }

    .language-selector select {
        font-size: 10px; /* Reduce el tamaño de la fuente del selector de idioma */
        padding: 4px; /* Reduce el padding del selector de idioma */
    }

    .bx-menu {
        display: block; /* Muestra el icono del menú en pantallas pequeñas */
        font-size: 2em;
        cursor: pointer;
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .section {
        width: 45%; /* Ajusta el tamaño para tablets */
    }

    .product {
        width: 45%; /* Ajusta el tamaño para tablets */
    }

    .cedis {
        flex: 0 0 45%; /* Ajusta el tamaño para tablets */
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 10px 5px; /* Reduce aún más el padding del navbar */
        flex-wrap: nowrap; /* Evita que los elementos se envuelvan a la siguiente línea */
    }

    .logo img {
        width: 120px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu {
        display: none; /* Oculta el menú en pantallas pequeñas */
    }

    .bx-menu {
        display: block; /* Muestra el icono del menú en pantallas pequeñas */
        font-size: 2em;
        cursor: pointer;
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .section {
        width: 100%; /* Ajusta el tamaño para móviles */
    }

    .product {
        width: 100%; /* Ajusta el tamaño para móviles */
    }

    .cedis {
        flex: 0 0 100%; /* Ajusta el tamaño para móviles */
    }

    .events-carousel-item img {
        width: 100%;
        height: auto;
    }

    .section .content h2 {
        font-size: 2em; /* Ajusta el tamaño del texto para móviles */
    }

    .section .content p {
        font-size: 1em; /* Ajusta el tamaño del texto para móviles */
    }
}

@media (max-width: 525px) {
    .navbar {
        padding: 10px 5px; /* Reduce aún más el padding del navbar */
        flex-wrap: nowrap; /* Evita que los elementos se envuelvan a la siguiente línea */
    }

    .logo img {
        width: 100px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu a {
        font-size: 1.2em; /* Reduce el tamaño de la fuente del menú */
        margin: 0 5px; /* Reduce el margen entre los elementos del menú */
    }

    .language-selector select {
        font-size: 10px; /* Reduce el tamaño de la fuente del selector de idioma */
        padding: 3px; /* Reduce el padding del selector de idioma */
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .search-container input {
        width: 150px; /* Ajusta el tamaño del input para pantallas muy pequeñas */
    }

    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: white;
    }

    .dropdown-content a {
        padding: 10px 20px;
        font-size: 1.2em;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .section .content {
        padding: 10px; /* Reduce el padding para pantallas muy pequeñas */
    }

    .section .content h2 {
        font-size: 1.5em; /* Ajusta el tamaño del texto para pantallas muy pequeñas */
    }

    .section .content p {
        font-size: 0.9em; /* Ajusta el tamaño del texto para pantallas muy pequeñas */
    }
}

/* Banner Carrusel index.html*/

.carousel {
    width: 100%;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
}

.carousel-item img {
    width: 100%;
    display: block;
}

/* Nosotros - Gana index.html */

/* Nosotros - Gana index.html */

.sections-container {
    padding: 20px;
    text-align: center;
}

.sections-container h2 {
    font-family: encabezados;
    font-size: 2.5em;
    margin: 10px 0;
    color: var(--encabezadospagina);
    margin-bottom: 3rem;
}

.testimonios-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px; /* Espacio entre los videos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas más pequeñas */
}

.testimonio {
    flex: 1 1 30%; /* Permite que cada video ocupe el mismo espacio y se ajuste al tamaño del contenedor */
    box-sizing: border-box; /* Incluye el padding y border en el ancho total */
    text-align: center;
    font-size: 20px;
}

.video-section {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 para hacer los videos más grandes y responsivos */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.testimonio h3 {
    font-size: 1.8em;
    margin: 10px 0;
    color: var(--parrafos);
    margin-top: 2rem;
}

.testimonio p {
    font-size: 1.2em;
    margin: 10px 0;
    color: var(--encabezadospagina);
}

.testimonial-text {
    text-align: left;
}

.testimonial-text p {
    font-size: 1.2em;
    margin: 10px 0;
    color: black;
}

.more-text {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.read-more-checkbox {
    display: none;
}

.read-more-label, .read-less-label {
    display: inline-block;
    color: var(--encabezadospagina);
    cursor: pointer;
    margin-top: 10px;
}

.read-less-label {
    display: none;
}

.read-more-checkbox:checked + .testimonial-text .more-text {
    max-height: 2000px; /* Valor grande suficiente para acomodar el texto completo */
}

.read-more-checkbox:checked ~ .read-more-label {
    display: none;
}

.read-more-checkbox:checked ~ .read-less-label {
    display: inline-block;
}

/* Media Queries para Responsividad */
@media (max-width: 1024px) {
    .sections-container h2 {
        font-size: 2.2em;
    }

    .testimonio h3 {
        font-size: 1.6em;
    }

    .testimonio p {
        font-size: 1.1em;
    }

    .testimonial-text p {
        font-size: 1.1em;
    }
}

@media (max-width: 768px) {
    .testimonios-row {
        justify-content: center; /* Centra los elementos cuando se envuelven */
    }

    .testimonio {
        flex: 1 1 45%; /* Ajusta el ancho de los videos en pantallas medianas */
    }

    .sections-container h2 {
        font-size: 2em;
    }

    .testimonio h3 {
        font-size: 1.5em;
    }

    .testimonio p {
        font-size: 1em;
    }

    .testimonial-text p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .testimonios-row {
        flex-direction: column; /* Cambia a columna para apilar verticalmente en pantallas pequeñas */
        align-items: stretch; /* Estira los elementos para que ocupen todo el ancho disponible */
        gap: 120px;
    }

    .testimonio {
        flex: 1 1 auto; /* Ajusta para no forzar altura innecesaria */
    }

    .sections-container {
        padding: 10px; /* Reduce el padding en pantallas pequeñas */
    }

    .sections-container h2 {
        font-size: 1.8em;
    }

    .testimonio h3 {
        font-size: 1.4em;
        margin-bottom: 3rem;
    }

    .testimonio p {
        font-size: 0.9em;
    }

    .testimonial-text p {
        font-size: 0.9em;
    }
}

/* Estilos para el botón "Conoce más" */
.learn-more {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: var(--encabezadospagina);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.learn-more:hover {
    background-color: var(--parrafos);
}

.section:hover .learn-more {
    display: block;
    opacity: 1;
}

/* Tienda index.html*/

.products-section {
    padding: 20px;
    text-align: center;
}

.products-section h2 {
    font-family: encabezados;
    font-size: 2.5em;
    margin: 10px 0;
    color: var(--encabezadospagina);
    margin-bottom: 3rem;
}

.products-section h4 {
    font-family: encabezados;
    font-size: 2.5em;
    margin: 10px 0;
    color: var(--encabezadospagina);
    margin-bottom: 3rem;
    margin-top: 5rem;
}

.products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.product {
    position: relative;
    width: 18%;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product img {
    width: 200px; /* Establece el ancho fijo de la imagen */
    height: 200px; /* Establece la altura fija de la imagen */
    border-radius: 10px;
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}

.product img.secondary {
    position: absolute;
    top: 50px; /* Ajusta según el padding del .product */
    left: 50px; /* Ajusta según el padding del .product */
    width: 200px; /* Igual al ancho de la imagen principal */
    height: 200px; /* Igual a la altura de la imagen principal */
    opacity: 0; /* Oculta la imagen secundaria por defecto */
    border-radius: 10px;
}

.product:hover img.primary {
    opacity: 0; /* Oculta la imagen primaria al pasar el cursor */
}

.product:hover img.secondary {
    opacity: 1; /* Muestra la imagen secundaria al pasar el cursor */
}

.product h3, .product button {
    color: var(--parrafos);
    margin-top: 10px;
}

.product button {
    background-color: var(--encabezadospagina);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product button:hover {
    background-color: var(--parrafos);
}

/* Eventos index.html */

.events-section {
    padding: 20px;
    text-align: center;
    background-color: #f8f8f8;
    margin-top: 20px;
}

.events-section h2 {
    font-family: encabezados;
    margin-bottom: 20px;
    font-size: 2em;
    color: var(--encabezadospagina);
}

.events-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.events-carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.events-carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
}

.events-carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centra la imagen */
}

.learn-more-events {
    align-items: center;
    font-family: encabezados;
    margin-top: 3rem;
    font-size: 1.5em;
    padding: 10px 20px;
    background-color: var(--encabezadospagina);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.learn-more-events:hover {
    background-color: var(--parrafos);
    color: #fff;
}

/* Cedis index.html */

/* Estilos para los iconos en las secciones de CEDIS y Contáctanos */
.cedis p i, .contact-info i, .social-icons i {
    font-size: 2em; /* Tamaño más grande para los iconos */
    color: var(--parrafos); /* Color verde por defecto */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.cedis p i:hover, .contact-info i:hover, .social-icons i:hover {
    color: var(--encabezadospagina); /* Cambia a rojo al pasar el cursor */
}

.cedis-section {
    padding: 50px 0;
    background-color: #f8f8f8;
    text-align: center;
}

.cedis-section h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 40px;
}

.cedis-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas fijas */
    gap: 10px;
    justify-items: center;
}

.cedis-item {
    background-color: white;
    padding: 50px; /* Aumentado el padding para hacer los elementos más grandes */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centrando el texto */
    width: 100%;
    max-width: 250px; /* Aumentado el tamaño máximo */
}

.cedis-item img {
    width: 100%;
    height: 200px; /* Aumentado la altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que las imágenes se escalen y recorten correctamente */
    border-radius: 10px;
}

.cedis-item h3 {
    margin-top: 15px;
    font-size: 1.5em; /* Aumentado el tamaño de la fuente */
    color: var(--encabezadospagina);
}

.cedis-item p {
    margin: 10px 0;
    font-size: 1em; /* Aumentado el tamaño de la fuente */
    color: var(--parrafos);
}

.btn-maps {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: var(--encabezadospagina);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-maps:hover {
    background-color: var(--parrafos);
}

/* Estilos responsivos */
@media (max-width: 1200px) {
    .cedis-container {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
    }
}

@media (max-width: 992px) {
    .cedis-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas pequeñas */
    }
}

@media (max-width: 768px) {
    .cedis-container {
        grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas */
    }
}

/* Contactanos index.html */

.contact-section {
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    position: relative;
    background: url("../img/Agosto Página web/BANNERINICIO/banner\ Infeior.png") no-repeat center center/cover;
}

.contact-section h2 {
    font-family: encabezados;
    margin-bottom: 20px;
    font-size: 2em;
    color: var(--encabezadospagina);
}

.contact-section p {
    font-size: 1.2em;
    color: black;
    margin-bottom: 20px;
    font-weight: bold;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.social-icons a img:hover {
    transform: scale(1.2);
    color: var(--encabezadospagina);
}

.contact-info p {
    font-size: 1.1em;
    color: black;
    margin: 5px 0;
    font-weight: bold;
}

.contact-info a {
    color: var(--encabezadospagina); /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
}

.contact-info a:hover {
    text-decoration: underline; /* Subrayado al pasar el cursor */
}

/* about.html */

/* Sección de Video */
.video-section {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.video-section video {
    width: 100%;
    height: auto;
    display: block;
}

/* Scroll */

.scroll {
    position: fixed;
    bottom: 2.2rem;
    border-top: 2rem;
    right: 3.2rem;
}

.scroll i {
    font-size: 35px;
    color: white;
    background-color: var(--encabezadospagina);
    border-radius: 2rem;
}

.scroll1 {
    position: fixed;
    color: white;
    bottom: 2.2rem;
    border-top: 2rem;
    left: 3.2rem;
}

.scroll1 i {
    font-size: 35px;
    border-radius: 2rem;
    background-color: var(--parrafos);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.scroll1, .scroll {
    animation: bounce 2s infinite; /* Aplica la animación de rebote */
}

/* Estilos responsivos */
@media (max-width: 1024px) {
    .navbar {
        padding: 10px 10px; /* Reduce el padding del navbar */
    }

    .logo img {
        width: 180px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu a {
        font-size: 1.5em; /* Reduce el tamaño de la fuente del menú */
        margin: 0 10px; /* Reduce el margen entre los elementos del menú */
    }

    .language-selector select {
        font-size: 12px; /* Reduce el tamaño de la fuente del selector de idioma */
        padding: 5px; /* Reduce el padding del selector de idioma */
    }

    .bx-menu {
        display: block; /* Muestra el icono del menú en pantallas pequeñas */
        font-size: 2em;
        cursor: pointer;
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .section {
        width: 45%; /* Ajusta el tamaño para tablets */
    }

    .product {
        width: 45%; /* Ajusta el tamaño para tablets */
    }

    .cedis {
        flex: 0 0 45%; /* Ajusta el tamaño para tablets */
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 10px 5px; /* Reduce aún más el padding del navbar */
        flex-wrap: nowrap; /* Evita que los elementos se envuelvan a la siguiente línea */
    }

    .logo img {
        width: 150px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu {
        display: none; /* Oculta el menú en pantallas pequeñas */
    }

    .bx-menu {
        display: block; /* Muestra el icono del menú en pantallas pequeñas */
        font-size: 2em;
        cursor: pointer;
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .section {
        width: 100%; /* Ajusta el tamaño para móviles */
    }

    .product {
        width: 100%; /* Ajusta el tamaño para móviles */
    }

    .cedis {
        flex: 0 0 100%; /* Ajusta el tamaño para móviles */
    }

    .events-carousel-item img {
        width: 100%;
        height: auto;
    }

    .section .content h2 {
        font-size: 2em; /* Ajusta el tamaño del texto para móviles */
    }

    .section .content p {
        font-size: 1em; /* Ajusta el tamaño del texto para móviles */
    }
}

@media (max-width: 525px) {
    .navbar {
        padding: 10px 5px; /* Reduce aún más el padding del navbar */
        flex-wrap: nowrap; /* Evita que los elementos se envuelvan a la siguiente línea */
    }

    .logo img {
        width: 100px; /* Ajusta el tamaño del logo para pantallas más pequeñas */
    }

    .menu a {
        font-size: 1.2em; /* Reduce el tamaño de la fuente del menú */
        margin: 0 5px; /* Reduce el margen entre los elementos del menú */
    }

    .language-selector select {
        font-size: 10px; /* Reduce el tamaño de la fuente del selector de idioma */
        padding: 3px; /* Reduce el padding del selector de idioma */
    }

    .icons {
        margin-left: auto; /* Empuja los iconos al final del navbar */
        display: flex; /* Asegura que los iconos se mantengan en línea */
        align-items: center; /* Alinea los iconos verticalmente */
    }

    .section .content {
        padding: 10px; /* Reduce el padding para pantallas muy pequeñas */
    }

    .section .content h2 {
        font-size: 1.5em; /* Ajusta el tamaño del texto para pantallas muy pequeñas */
    }

    .section .content p {
        font-size: 0.9em; /* Ajusta el tamaño del texto para pantallas muy pequeñas */
    }
}

/* Estilos para el menú desplegable en pantallas pequeñas */
.menu-icon {
    display: none;
    font-size: 2em;
    cursor: pointer;
}

@media (max-width: 1400px) {
    .menu-icon {
        display: block;
    }

    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        text-align: center; /* Centra el texto del menú */
    }

    .menu a {
        padding: 10px 20px;
        width: 100%;
    }

    .menu a:hover {
        background-color: var(--encabezadospagina);
        color: #fff;
    }

    .menu.show {
        display: flex;
    }

    .language-selector {
        margin: 10px 20px;
        width: calc(100% - 40px);
    }

    .icons {
        margin-top: 10px;
        margin-left: 20px;
    }
}

/* about.html */

/* Fundadora */

.about-section {
    background: url('img/Agosto Página web/NOSOTROS/background.jpg') no-repeat center center/cover;
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* Asegura que el fondo ocupe todo el ancho de la pantalla */
    margin-left: calc(50% - 50vw); /* Centra el fondo */
}

.about-content {
    display: flex;
    align-items: center;
    max-width: 1800px;
    width: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
    border-radius: 10px;
    flex-direction: column; /* Asegura que el texto y la imagen estén en columna en pantallas pequeñas */
}

.about-text {
    flex: 1;
    padding: 20px;
}

.about-text h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 20px;
    text-align: center; /* Centra el texto */
}

.about-text h3 {
    font-family: subitulos;
    font-size: 2em;
    color: var(--parrafos);
    margin-bottom: 20px;
    text-align: center; /* Centra el texto */
}

.about-text p {
    font-size: 1.2em;
    color: #333;
    text-align: center; /* Centra el texto */
}

.about-image {
    flex: 1;
    padding: 20px;
}

.about-image img {
    width: 90%;
    height: auto;
    border-radius: 10px;
}

/* Estilos responsivos */
@media (min-width: 768px) {
    .about-content {
        flex-direction: row; /* Alinea el texto y la imagen en fila en pantallas grandes */
    }
}

/* Visión - Misión about.html */

/* Sección de Misión y Visión */
.mission-vision-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
    background-color: #f8f8f8;
}

.mission, .vision {
    flex: 1;
    padding: 20px;
    text-align: center;
}

.mission img, .vision img {
    width: 50%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.mission h2, .vision h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 20px;
}

.mission p, .vision p {
    font-size: 1.2em;
    color: #333;
    text-align: center; /* Centra el texto */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .mission-vision-section {
        flex-direction: column;
    }

    .mission, .vision {
        margin-bottom: 20px;
    }
}

/* Sección de Valores */
.values-section {
    padding: 50px 0;
    background-color: #f8f8f8;
    text-align: center;
}

.values-section h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 40px;
}

.values-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    margin: 50px;
}

.value-item {
    flex: 0 0 30%;
    text-align: center;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.value-item:hover {
    transform: scale(1.05);
}

.value-item img {
    width: 60%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.value-item p {
    font-size: 1.2em;
    color: var(--parrafos);
    transition: color 0.3s ease;
}

.value-item:hover p {
    color: var(--encabezadospagina); /* Cambia el color del párrafo a rojo al pasar el cursor */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .mission-vision-section {
        flex-direction: column;
    }

    .mission, .vision {
        margin-bottom: 20px;
    }

    .values-grid {
        flex-direction: column;
    }

    .value-item {
        flex: 0 0 100%;
    }

    .about-text p {
        font-size: 1em; /* Ajusta el tamaño del texto para pantallas pequeñas */
    }
}

/* Certificaciones about.html */

/* Sección de Certificaciones */
.certifications-section {
    padding: 50px 0;
    background-color: #f8f8f8;
    text-align: center;
}

.certifications-section h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 40px;
}

.certifications-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.certification-item {
    flex: 0 0 15%;
    text-align: center;
}

.certification-item img {
    width: 70%;
    height: auto;
    border-radius: 10px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .certifications-grid {
        flex-direction: column;
    }

    .certification-item {
        flex: 0 0 100%;
    }
}

/* Events.html */

/* Sección de Próximos Eventos */
.events-section {
    padding: 50px 0;
    background-color: #f8f8f8;
    text-align: center;
}

.events-section h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 40px;
}

.event-banner img {
    width: 80%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-family: encabezados;
    font-size: 1.5em;
    color: var(--encabezadospagina);
    margin-top: 5rem;
}

.countdown-item {
    text-align: center;
}

.countdown-item span {
    display: block;
    font-size: 2em;
    color: var(--parrafos);
}

.event-started {
    animation: pulse 1s infinite;
    color: var(--encabezadospagina);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .countdown {
        flex-direction: column;
    }
}

/* Tickets events.html */

/* Sección de Compra de Boletos */
.tickets-section {
    padding: 50px 0;
    background-color: #f8f8f8;
    text-align: center;
}

.tickets-section h2 {
    font-family: encabezados;
    font-size: 2.5em;
    color: var(--encabezadospagina);
    margin-bottom: 40px;
}

.tickets-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.ticket {
    flex: 0 0 22%;
    text-align: center;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ticket img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.ticket h3 {
    margin-top: 10px;
    font-size: 1.5em;
    color: var(--encabezadospagina);
}

.ticket .price {
    font-size: 1.2em;
    color: var(--parrafos);
    margin: 10px 0;
}

.quantity-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.quantity-selector button {
    background-color: var(--encabezadospagina);
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.quantity-selector input {
    width: 50px;
    text-align: center;
    margin: 0 5px;
}

.add-to-cart {
    background-color: var(--encabezadospagina);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.add-to-cart:hover {
    background-color: var(--parrafos);
}


/* Estilos responsivos */
@media (max-width: 768px) {
    .tickets-container {
        flex-direction: column;
    }

    .ticket {
        flex: 0 0 100%;
    }
}


/* login.html */


/* A continuación, puedes incluir el resto del CSS que proporcionaste */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url("../img/Agosto Página web/BANNERINICIO/Mesa de trabajo 6.png") no-repeat center center/cover;
}

.login-box {
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 350px;
    text-align: center;
    transition: transform 0.3s ease;
}

.login-box:hover {
    transform: translateY(-5px);
}

.login-box h2 {
    margin-bottom: 20px;
    color: var(--encabezadospagina);
    font-size: 24px;
    font-weight: 600;
}

.login-box input[type="text"],
.login-box input[type="password"],
.login-box input[type="email"],
.login-box input[type="tel"] {
    width: 80%;
    padding: 12px 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus,
.login-box input[type="email"]:focus,
.login-box input[type="tel"]:focus {
    border-color: var(--parrafos);
    outline: none;
}

.login-box button {
    width: 100%;
    padding: 12px 15px;
    background-color: #4a6614;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-box button:hover {
    background-color: #3a5210;
}

.login-box .error {
    color: red;
    margin-top: 10px;
    font-size: 14px;
}

.toggle-link {
    color: var(--encabezadospagina);
    cursor: pointer;
    text-decoration: underline;
    margin-top: 10px;
    display: block;
}