/* Generales */
:root {
    --primary-color: #1d2124;
    --secondary-color: #6C757D;
    --text-color: #343a40;
    --bg-light: #f8f9fa;
    --bg-dark: #e9ecef;
    --white: #ffffff;
    --border-color: #dee2e6;
    /* Actualizadas con las nuevas fuentes */
    --font-heading: monospace;
    --font-body: monospace; /* Inter para párrafos */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body); /* Usar Inter como fuente principal del body */
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}

/* Clases específicas para fuentes */
.inter-paragraph {
    font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 400; /* Puedes ajustar el peso según necesites */
    font-style: normal;
}

.outfit-heading-1 { /* Para H1 si quieres un peso específico */
   font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.outfit-heading-2 { /* Para H2 */
  font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.outfit-heading-2-2 { /* Para H2 */
  font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 0px!important;
}

.outfit-heading-3 { /* Para H3 */
   font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    line-height: 125%;
}

.outfit-button { /* Para botones de tabs, si quieres */
   font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.outfit-creative-text {
   font-family: monospace;
    font-optical-sizing: auto;
    font-weight: 400; /* O el peso que prefieras para esta sección */
    font-style: italic;
}


h1, h2, h3 {
    font-family: var(--font-heading); /* Usa la variable general para títulos */
    color: var(--primary-color);
    margin-bottom: 0.5em;
}
/* Reajuste de tamaños de h1, h2, h3 si es necesario con las nuevas fuentes */
h1 { font-size: 2.8em; } /* Puedes ajustar el tamaño base o usar la clase .outfit-heading-1 */
h2 { font-size: 2.2em; text-align: center; margin-bottom: 1.5em; } /* o .outfit-heading-2 */
h3 { font-size: 1.5em; } /* o .outfit-heading-3 */


p {
    margin-bottom: 1em;
    font-family: var(--font-body); /* Asegura que los p por defecto usen Inter */
    font-size: 16px;
    line-height: 170%;
}

/* --- Nueva Sección: Carrusel de Conceptos --- */
.concepts-carousel-section {
    width: 100%;
    overflow: hidden; /* Oculta lo que se desborda */
    background-color: #fff; /* Color de fondo para la sección */
    padding: 1.5em 0; /* Padding vertical */
    white-space: nowrap; /* Asegura que los items estén en una sola línea */
    position: relative;

}

.concepts-carousel {
    display: inline-block; /* Permite que el contenedor se desborde horizontalmente */
    animation: scroll-concepts 25s linear infinite; /* Animación de desplazamiento */
    /* Duplicamos el contenido en el HTML, por eso el 50% de la distancia total */
}

.concept-item {
    display: inline-block; /* Para que cada palabra esté en línea */
    font-family: var(--font-heading); /* Outfit para los conceptos */
    font-size: 2.5em; /* Tamaño grande de las palabras */
    font-weight: 700; /* Negrita */
    color: var(--primary-color); /* Color de las palabras */
    padding: 0 1.5em; /* Espacio entre palabras */
    text-transform: uppercase; /* Mayúsculas */
    opacity: 0.7; /* Ligeramente transparentes */
    transition: opacity 0.3s ease;
       
}

.concept-item:hover {
    opacity: 1; /* Al pasar el ratón, se vuelven completamente visibles */
}

/* Animación de desplazamiento infinito */
@keyframes scroll-concepts {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Desplaza a la mitad de los items para el efecto infinito */
    }
}

/* Responsive para el Carrusel de Conceptos */
@media (max-width: 768px) {
    .concept-item {
        font-size: 1.8em; /* Reduce el tamaño de fuente en móviles */
        padding: 0 1em;
    }
    .concepts-carousel {
        animation-duration: 20s; /* Más rápido en móviles si es necesario */
    }
}


/* ... (resto de tu CSS existente) ... */


h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-bottom: 0.5em;
}

h1 { font-size: 2.2em; }
h2 { font-size: 2em; text-align: center; margin-bottom: 1.5em; }
h3 { font-size: 1.5em; }

p {
    margin-bottom: 1em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
}

/* Botones */
.hero-buttons { /* Nuevo estilo para el contenedor de botones */
    display: flex;
    gap: 1em;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: row;
}

.btn-cta {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: var(--font-heading);
    font-weight: 600;
    white-space: nowrap; /* Evita que el texto del botón se rompa */
}

.btn-cta:hover {
    background-color: #fa7516; /* Un azul más oscuro */
}

/* Nuevo estilo para el botón secundario (outline) */
.btn-secondary-outline {
    display: inline-block;
    background-color: var(--white); /* Fondo blanco */
    color: var(--primary-color); /* Texto negro/primary */
    border: 2px solid var(--primary-color); /* Borde negro/primary */
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap; /* Evita que el texto del botón se rompa */
}

.btn-secondary-outline:hover {
    background-color: var(--primary-color); /* Fondo negro al pasar el mouse */
    color: var(--white); /* Texto blanco al pasar el mouse */
}


/* Header/Hero Section */
.hero-section {
    background-color: var(--white);
    padding: 1em 0;
}

.hero-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
    gap: 2em; /* Espacio entre texto e imagen */
}

.hero-content .text-content {
    flex: 1; /* Ocupa más espacio el texto */
}

.hero-content .image-content {
    flex: 2; /* Ocupa menos espacio la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content .image-content img {
    width: 100%;
    max-width: 680px; /* Tamaño máximo para la imagen cuadrada */
    height: auto;
    /* animation: 
            glitch-effect 0.5s linear infinite alternate;*/

}

/* Responsive Hero Section */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    .hero-content .image-content {
        order: -1; /* Mueve la imagen arriba en móviles */
        margin-bottom: 2em;
    }
    .hero-content .text-content {
        flex: auto;
    }
    h1 { font-size: 2.2em; }
    .hero-buttons {
        flex-direction: column; /* Apila los botones en móviles */
        align-items: center; /* Centra los botones apilados */
    }
}



/* secondary Section */
.secondary-section {
    background-color: var(--white);
    padding: 2em 0;
   /* border-bottom: 1px solid var(--border-color);*/
}

.secondary-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
    gap: 2em; /* Espacio entre texto e imagen */
}

.secondary-content .text-content {
    flex: 1; /* Ocupa más espacio el texto */
}

.secondary-content .image-content {
    flex: 2; /* Ocupa menos espacio la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.secondary-content .image-content img {
    width: 100%;
    max-width: 680px; /* Tamaño máximo para la imagen cuadrada */
    height: auto;
    border-radius: 8px; /* Bordes ligeramente redondeados */

}

/* Responsive secondary Section */
@media (max-width: 768px) {
    .secondary-content {
        flex-direction: column;
        text-align: center;
    }
    .secondary-content .image-content {
        order: -1; /* Mueve la imagen arriba en móviles */
        margin-bottom: 2em;
    }
    .secondary-content .text-content {
        flex: auto;
    }
    h1 { font-size: 2.2em; }
}





/* Banner Section */
.banner-section {
    background-image: url('images/ar.png'); /* Cambia esto por tu imagen */
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
    padding: 8em 1.5em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px; /* Altura mínima para asegurar que se vea bien */
}

.banner-overlay {
   /* background-color: rgba(0, 0, 0, 0.5);  Overlay oscuro para legibilidad del texto */
    padding: 3em 2em;
    border-radius: 10px;
    max-width: 800px;
    backdrop-filter: blur(3px); /* Efecto de desenfoque sutil */
}

.banner-overlay blockquote {
    font-size: 2em;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.banner-overlay p {
    font-size: 1.1em;
    font-family: var(--font-body);
    font-weight: 300;
}

@media (max-width: 768px) {
    .banner-section {
        padding: 5em 1em;
        min-height: 300px;
    }
    .banner-overlay blockquote {
        font-size: 1.5em;
    }
}

/* Portfolio Section - Tabs */
.portfolio-section {
    padding: 4em 0;
    background-color: var(--white);
}

.tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
    margin-bottom: 1em;
    border-bottom: 2px solid var(--border-color);
}

.tab-button {
    background-color: transparent;
    border: none;
    padding: 1em 1.5em;
    font-size: 1.1em;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; /* Para que el borde activo no empuje el contenido */
}



.tab-button.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: var(--bg-light);
}

.tabs-content .tab-pane {
    display: none;
   /* padding-top: 1em;*/
}

.tabs-content .tab-pane.active {
    display: block;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
}

.portfolio-card {
    background-color: var(--bg-light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura si el contenido lo permite */
}

.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.portfolio-card img {
    width: 100%;
    height: 250px; /* Altura fija para todas las imágenes de la tarjeta */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    display: block;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-card h3 {
    margin: 1em 1em 0.5em 1em;
    color: var(--text-color);
    font-size: 1.3em;
}

.portfolio-card p {
    margin: 0 1em 1em 1em;
    font-size: 0.9em;
    color: var(--secondary-color);
}

@media (max-width: 600px) {
    .tab-button {
        flex-basis: 50%; /* Dos botones por fila */
        margin-bottom: 5px;
    }
}


.intro {
    width:100%;
    margin: 3em;
    text-align: center;
}

.intro h3 {
        width: 60%;
    margin: auto;
    font-size: 22px;
    font-style: italic;
}

.intro p {
        width: 60%;
    margin: auto;
    font-size: 13px;
}
/* Modal Styling */
.modal {
    display: none; /* Hidden by default - ESTO ES CRUCIAL */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    /* Eliminar 'display: flex;' de aquí, se añade con JS */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--white);
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    width: 95%; /* Responsive width */
    height: 100vh; /* 90% of viewport height */
    /*max-width: 1280px;  Max width for larger screens */
    position: relative;
    overflow: hidden; /* Hide scrollbars of modal-content itself */
    display: flex;
    flex-direction: column;
}

.close-button {
    color: var(--secondary-color);
    font-size: 2em;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 25px;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above carousel */
}

.close-button:hover,
.close-button:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-carousel-container {
    position: relative;
    width: 100%;
    flex-grow: 1; /* Allows carousel to fill available space */
    overflow: hidden; /* Important for horizontal scrolling */
    padding: 20px 0; /* Padding for nav buttons */
}




/* El carrusel de imágenes */
.modal-carousel {
    display: flex;
    overflow-x: scroll; /* SÍ queremos scroll horizontal */
    overflow-y: hidden; /* ASEGURARSE de que NO haya scroll vertical aquí */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    height: 100%; /* Ocupa toda la altura disponible en su contenedor */
    align-items: center; /* Centra las imágenes verticalmente */
    padding-left: calc(236px + 40px); /* Ajusta este padding si el overlay cambia */
    box-sizing: border-box;
}

/* Para el overlay de texto, especialmente en móvil si puede ser largo */
@media (max-width: 768px) {
    .project-info-overlay {
        /* ... otros estilos ... */
        max-height: 150px; /* O un valor que te funcione para que no ocupe demasiado */
        overflow-y: auto; /* Añade scroll si el texto es muy largo en móvil */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Puedes añadir una sombra sutil */
    }
}


.modal-carousel::-webkit-scrollbar {
    height: 8px;
    background-color: var(--bg-dark);
    border-radius: 4px;
}

.modal-carousel::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.modal-carousel-item {
    flex: 0 0 auto; /* Do not grow, do not shrink, auto width */
   /* width: 50%;  Each item takes 80% of carousel width */
    max-width: 700px; /* Max width for a single image container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 45px; /* Space between items */
    scroll-snap-align: start; /* Snap to start of item */
}

.modal-carousel-item:last-child {
    margin-right: 0; /* No margin on the last item */
}


.modal-carousel-item img {
    max-width: 100%;
    max-height: 70%; /* Limit image height to leave space for description */
    object-fit: contain; /* Ensure image fits without cropping */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.modal-carousel-item p {
    margin-top: 1em;
    text-align: center;
    max-width: 80%;
    font-size: 1em;
    color: var(--text-color);
}

.modal-carousel .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.6);
    color: var(--white);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 50%;
    z-index: 100;
    transition: background-color 0.3s ease;
}

.modal-carousel .carousel-nav:hover {
    background-color: rgba(0,0,0,0.8);
}

.modal-carousel .carousel-nav.prev {
    left: 10px;
}

.modal-carousel .carousel-nav.next {
    right: 10px;
}

.project-info-overlay {
    position: fixed;
    top: 50%;
    left: 21%;
    transform: translate(-50%, -50%);
    width: 236px;
    /* max-width: 600px; */
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;
    border-radius: 10px;
   /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);*/
    z-index: 10000;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    height: 80%;
    font-family: monospace;
}


/* Para que el enlace dentro del overlay sea clickeable */
.project-modal-link {
    display: inline-block; /* O block, dependiendo de cómo quieras que se muestre */
    margin-top: 15px; /* Espacio por encima de la descripción */
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: var(--font-heading);
    font-weight: 600;

    align-self: center; /* Si el overlay es flex, esto lo centra horizontalmente */
}

.project-modal-link:hover {
    background-color: #fa7516; /* Color de hover para el enlace */
}

/* Asegúrate de que los otros elementos dentro del overlay no bloqueen el enlace */
/* Por ejemplo, si tienes un <p> que lo cubre */
#overlay-project-description {
    /* ... tus estilos actuales ... */
    flex-grow: 1; /* Permite que la descripción ocupe el espacio disponible, empujando el enlace hacia abajo si hay espacio */
}

/* Para que el overlay sea visible cuando el modal esté activo y se muestra */
.modal.active .project-info-overlay {
    opacity: 1;
}

/* Estilos para el título y descripción dentro del overlay */
#overlay-project-title {
    font-family: monospace;
    font-weight: 700;
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
    text-align: left;
    line-height: 120%;
}

#overlay-project-description {
   font-family: monospace;
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.5;
    text-align: left;
}

/* Ajustes al carrusel para el padding izquierdo y z-index */
.modal-carousel {
    display: flex;
    overflow-x: scroll; /* Habilita el scroll horizontal */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Para un scroll más suave en iOS */
    position: relative; /* Asegura su posición relativa dentro del contenedor */
    z-index: 10; /* Menor que el overlay */
    padding: 0 100px; /* Padding actual para botones de navegación */
    padding-left: calc(236px + 40px); /* ¡NUEVO! 236px (ancho del overlay) + 20px (left overlay) + 20px (margin para separación) */
    box-sizing: border-box; /* Incluye padding en el ancho */
    height: 100%; /* El carrusel debe ocupar el alto del contenedor */
    align-items: center; /* Centra las imágenes verticalmente */
}


/* Asegurarse de que el carrusel tenga un z-index menor para que el overlay se vea encima */
/* y que el overflow-x esté configurado para el scroll horizontal */
.modal-carousel-container {
    position: relative; /* Necesario para que z-index y posición del carrusel funcionen correctamente si el overlay es fixed */
    width: 100%;
    height: 100%; /* Ajusta según sea necesario para que ocupe el espacio del modal-content */
    overflow: hidden; /* Oculta cualquier desbordamiento fuera de este contenedor */
}










/* Ajustes para los botones de navegación del carrusel */
.modal-carousel-container .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 50%;
    z-index: 20; /* Mayor que el carrusel, pero menor que el overlay si el overlay no necesita ser clickeable */
    transition: background-color 0.3s ease;
}

.modal-carousel-container .carousel-nav.prev {
    left: 10px;
}

.modal-carousel-container .carousel-nav.next {
    right: 10px;
}




@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        height: 95vh;
        padding: 15px;
    }
    .modal-carousel-item {
        width: 90%;
        margin-right: 15px;
    }
    .modal-carousel {
        padding: 0 30px;
    }
    .modal-carousel .carousel-nav {
        padding: 8px 12px;
        font-size: 1.2em;
    }
    .close-button {
        font-size: 1.8em;
        top: 10px;
        right: 15px;
    }
    .project-info-overlay { /* Ajuste de posición para el overlay en móviles */
        width: 90%;
        position: relative; /* Quitar fixed en móvil para que fluya */
        top: auto;
        left: auto;
        transform: none;
        margin: 1em auto; /* Centrar y darle margen */
        height: auto;
        box-shadow: none;
        padding: 15px;
    }
    .modal-carousel { /* Ajuste del padding izquierdo del carrusel en móviles */
        padding-left: 15px; /* Restablecer padding izquierdo en móvil */
        padding-right: 15px;
    }
}


/* Styles for Video Modal */
.video-modal-content {
    background-color: var(--primary-color); /* Fondo oscuro para el modal de video */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Eliminar padding para que el video ocupe casi todo el espacio */
    overflow: hidden; /* Asegurar que el video no se desborde */
}

.video-modal-content .close-button {
    color: var(--white); /* Botón de cierre blanco en fondo oscuro */
    right: 20px;
    top: 20px;
    z-index: 1002; /* Asegurar que esté por encima del video */
}

.video-container {
    position: relative;
    width: 90%; /* Ancho máximo para el video */
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura / ancho = 9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    background-color: black;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que el video se ajuste dentro del contenedor */
}

/* Responsive para el modal de video */
@media (max-width: 768px) {
    .video-modal-content {
        width: 100%;
        height: 100vh; /* Ocupa toda la pantalla en móviles */
        border-radius: 0;
    }
    .video-container {
        width: 100%;
        height: 100%;
        padding-bottom: 0; /* Eliminar padding-bottom para ocupar todo el alto */
        display: flex; /* Para centrar el video verticalmente */
        align-items: center;
        justify-content: center;
    }
    .video-container video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}


/* Awards Section */
.awards-section {
    padding: 4em 0;
    background-color: var(--bg-dark);
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.award-item {
    background-color: var(--white);
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    text-align: center;
}

.award-item h3 {
    color: var(--primary-color);
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.award-item p {
    font-size: 0.9em;
    color: var(--secondary-color);
}

/* Testimonials Section */
.testimonials-section {
    padding: 1em 0;
    background-color: var(--white);
}

.testimonial-carousel-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden; /* This hides the overflowing slides */
    padding: 0 1.5em;
}

/* Contenedor interno que se moverá */
.testimonial-carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Animación de la transición */
    width: 100%; /* El ancho total será manejado por los flex-items y el translateX */
}

.testimonial-slide {
    flex: 0 0 100%; /* Cada slide ocupa el 100% del ancho del contenedor padre con overflow hidden */
    text-align: center;
    padding: 2em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testimonial-slide img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.testimonial-slide blockquote {
    font-size: 1.2em;
    font-style: italic;
    margin-bottom: 0.8em;
    color: var(--text-color);
    max-width: 600px; /* Limita el ancho de la cita */
}

.testimonial-slide .author {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.2em;
}

.testimonial-slide .role {
    font-size: 0.9em;
    color: var(--secondary-color);
}

.carousel-nav-test {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-nav-test:hover {
    background-color: rgba(0,0,0,0.7);
}

.carousel-nav-test.prev-test {
    left: 0;
}

.carousel-nav-test.next-test {
    right: 0;
}

@media (max-width: 768px) {
    .testimonial-slide {
        padding: 1em;
    }
    .testimonial-slide blockquote {
        font-size: 1em;
    }
    .carousel-nav-test {
        padding: 8px 12px;
        font-size: 1.2em;
    }
    .hide-mobile{
        display: none;
    }
}


/* Footer */
.footer-section {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 2em 1.5em;
    font-family: var(--font-heading);
}

.footer-section p {
    margin-bottom: 0.5em;
    font-size: 0.9em;
}

.footer-creative-text {
    font-style: italic;
    font-size: 1.1em;
    margin-top: 1em;
}


.grulla {
    width: 50px;  /* Ancho de un solo frame (350px / 7 poses = 50px) */
    height: 50px; /* Alto de la imagen completa */
    background-image: url('images/grulla.png'); /* Ruta a tu imagen sprite */
    background-repeat: no-repeat;
    animation: grulla 0.5s steps(7) infinite; /* 1s de duración, 7 pasos, infinito */
    position: absolute;
    z-index: 10;
           top: 2%;
    left: 57%;
}

@keyframes grulla {
    0% {
        background-position: 0 0; /* Empieza en la primera pose */
    }
    100% {
        background-position: -350px 0; /* Termina en el ancho total del sprite sheet */
                                      /* -50px * 7 poses = -350px */
    }
}

.bailarin {
    width: 194.38px;  /* Ancho de un solo frame (350px / 7 poses = 50px) */
    height: 194.38px; /* Alto de la imagen completa */
    background-image: url('images/bailarin.png'); /* Ruta a tu imagen sprite */
    background-repeat: no-repeat;
    animation: bailarin 0.8s steps(6) infinite; /* 1s de duración, 7 pasos, infinito */
    position: absolute;
    z-index: 10;
       top: 45%;
    right: -8%;
}

@keyframes bailarin {
    0% {
        background-position: 0 0; /* Empieza en la primera pose */
    }
    100% {
        background-position: -1166.29px 0; /* Termina en el ancho total del sprite sheet */
                                      /* -50px * 7 poses = -350px */
    }
}




.rotating-banner-section {
   
    width: 100%;
    height: auto; /* Altura fija para el banner */
   background-color: #fff;
   text-align: center;
  
}

.banner-image-background {
     position: relative; /* CLAVE: Para que los hijos absolutos se posicionen respecto a él */
   top: 0;
    left: 0;
margin: 6em 0 30px 0;
   
}

.banner-image-background img{
width: 80%;
   
}

.rotating-image-overlay {
    position: absolute; /* CLAVE: Posicionamiento absoluto respecto a .rotating-banner-section */
    width: 150px; /* Tamaño de la imagen giratoria */
    height: 150px;
    background-image: url('images/pollo.png'); /* Ruta a tu imagen que girará */
    background-size: contain; /* Asegura que la imagen completa se vea */
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100; /* CLAVE: Para que esté por encima del fondo del banner */
    animation: 
            glitch-effect 0.5s linear infinite alternate, rotate-element 1s linear infinite; /* Efecto glitch rápido *//* Animación de rotación */
     top: 50%;
    left: 44%;

}

.rotating-image-overlay img{ 
    width: 80%;
}
@keyframes rotate-element {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@media (max-width: 768px) {
    /* Aquí es donde necesitamos ajustar el tamaño y la posición para la imagen giratoria */
    .rotating-image-overlay {
        /* Ejemplo: Hazlo un porcentaje del ancho de su contenedor relativo */
        width: 25vw; /* 25% del ancho del viewport, ajusta según necesites */
        height: 25vw; /* Mantiene la proporción cuadrada */
        /* Para centrarla perfectamente en el medio del elemento padre, usa transform: translate */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg); /* Mueve el elemento por su propio tamaño, luego rota */
        /* Asegúrate de que el animation-delay y otras propiedades se mantengan si las quieres */
    }

    /* También revisa si el banner de fondo necesita ajustes en responsive */
    .rotating-banner-section .banner-image-background img {
        width: 95%; /* Dale un poco más de margen en móviles si es necesario */
    }
}

/* Animación para el efecto glitch */
@keyframes glitch-effect {
    0% {
        transform: translate(0, 0);
        filter: hue-rotate(0deg);
        opacity: 1;
    }
    10% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
        opacity: 0.8;
    }
    20% {
        transform: translate(3px, -1px);
        filter: hue-rotate(180deg);
        opacity: 0.9;
    }
    30% {
        transform: translate(-1px, -3px);
        filter: hue-rotate(270deg);
        opacity: 0.7;
    }
    40% {
        transform: translate(2px, 1px);
        filter: hue-rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-3px, 3px);
        filter: hue-rotate(45deg);
        opacity: 0.85;
    }
    60% {
        transform: translate(1px, -2px);
        filter: hue-rotate(135deg);
        opacity: 0.95;
    }
    70% {
        transform: translate(-2px, 0px);
        filter: hue-rotate(225deg);
        opacity: 0.75;
    }
    80% {
        transform: translate(0px, 3px);
        filter: hue-rotate(315deg);
        opacity: 0.8;
    }
    90% {
        transform: translate(2px, -1px);
        filter: hue-rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        filter: hue-rotate(0deg);
        opacity: 1;
    }
}

/* Efecto de pseudo-glitch en el overlay */
.image-glitch-overlay {
    mix-blend-mode: hard-light; /* Mezcla de colores para un efecto más glitchy */
    opacity: 0.6; /* Transparencia para que se vea la imagen de abajo */
    animation:
        change-image 9s steps(1) infinite,
        glitch-overlay 0.3s linear infinite alternate; /* Animación más rápida para el overlay */
}

@keyframes glitch-overlay {
    0% {
        transform: translate(0, 0) scale(1);
        filter: blur(0px);
    }
    25% {
        transform: translate(5px, 0px) scale(1.02);
        filter: blur(1px);
    }
    50% {
        transform: translate(-5px, 0px) scale(0.98);
        filter: blur(0px);
    }
    75% {
        transform: translate(0px, 5px) scale(1.01);
        filter: blur(2px);
    }
    100% {
        transform: translate(0, 0) scale(1);
        filter: blur(0px);
    }
}


/* Sección "Lugares donde he presentado" */
.places-section {
    padding: 1em 0;
    text-align: center;
}

.places-section .description-text {
    max-width: 800px;
    margin: 1em auto 2em auto; /* Espacio debajo del texto */
    font-size: 1.1em;
    color: var(--text-color);
}

/* Contenedor del carrusel de logos */
.logos-carousel-container {
    width: 100%;
    overflow: hidden; /* Oculta los logos que están fuera de vista */
    position: relative;
    background-color: var(--white); /* Fondo del carrusel, si es diferente al de la sección */
   
}

.logos-carousel {
    display: flex;
    align-items: center;
    width: fit-content; /* Permite que el contenedor de logos se expanda horizontalmente */
    animation: scroll-logos 70s linear infinite; /* Animación de desplazamiento */
    white-space: nowrap; /* Asegura que los logos estén en una sola línea */
}

.logos-carousel img {
    height: 60px; /* Altura de los logos, ajusta según el tamaño de tus imágenes */
    width: auto; /* Mantiene la proporción de la imagen */
    margin: 0 2em; /* Espacio entre logos, ajusta si es necesario */
    filter: grayscale(100%) opacity(0.6); /* Logos en escala de grises y semi-transparentes */
    transition: filter 0.3s ease;
    flex-shrink: 0; /* Evita que los logos se encojan */
}

.logos-carousel img:hover {
    filter: grayscale(0%) opacity(1); /* Color al pasar el ratón */
}

/* Animación de desplazamiento infinito para los logos */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Desplaza la mitad de los logos para el efecto infinito */
    }
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .places-section {
        padding: 1em 0;
    }
    .places-section .description-text {
        font-size: 1em;
        margin: 1em auto;
    }
    .logos-carousel-container {
        padding: 1em 0;
    }
    .logos-carousel img {
        height: 45px; /* Reduce el tamaño de los logos en pantallas pequeñas */
        margin: 0 1.5em;
    }
    @keyframes scroll-logos {
        100% {
            transform: translateX(-50%); /* Ajusta la velocidad si es necesario */
        }
    }
}