/* --- Variables de Color (Basadas en el Logo) --- */
:root {
    --primary-color: #002D62; /* Azul Oscuro */
    --accent-color: #F37021;  /* Naranja */
    --text-dark: #333333;
    --text-light: #FFFFFF;
    --bg-light: #F9F9F9;
    --bg-white: #FFFFFF;
}

/* --- Reseteo y Estilos Globales --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-white);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.container-full {
    width: 100%;
    margin: 0 auto;
    padding: 1rem 1rem;
}

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

h1, h2, h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    text-align: center;
}

section {
    padding: 4rem 0;
}

/* --- Encabezado y Navegación --- */
.main-header {
    background: var(--bg-white);
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
    width: auto;
    margin-right: 0.5rem;
}

.logo-container h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    line-height: 18px;
    height: 50px;
    display: flex;
    justify-content: center;
    flex-flow: column;
}

.logo-container h1 .logistics {
    font-size: 0.8rem;
    color: var(--accent-color);
    vertical-align: super;
    font-weight: 700;
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li {
    margin-left: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 700;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--accent-color);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--primary-color);
    cursor: pointer;
}
/* --- Sección Hero (Modificada) --- */
.hero {
    background-image: linear-gradient(rgba(0, 45, 98, 0.7), rgba(0, 45, 98, 0.7)), url('assets/imgs/hero.jpg');
    background-size: cover;
    background-position: center;
    height: 70vh; /* Aumentamos un poco la altura para el texto */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
    position: relative; /* Para posibles animaciones o elementos extra */
}

.hero-content h2 {
    font-size: 3.8rem; /* Tamaño base para "Making a" */
    color: var(--text-light);
    font-weight: 900;
    margin-bottom: 1.5rem; /* Espacio debajo del título */
    display: flex; /* Para alinear el texto y el script */
    align-items: baseline; /* Alinea por la línea base del texto */
    justify-content: center;
    gap: 1.5rem; /* Espacio entre "Making a" y "Difference" */
}

.hero-script-text {
    font-family: 'Dancing Script', cursive; /* Aplica la fuente script */
    font-size: 6.5rem; /* Tamaño mucho más grande para "Difference" */
    font-weight: 700; /* Negrita */
    position: relative; /* Para el subrayado */
    line-height: 0.8; /* Ajusta la altura de línea */
    padding-bottom: 0.5rem; /* Espacio para el subrayado */
}

/* Subrayado con el color naranja de RODBER LLC */
.hero-script-text::after {
    content: '';
    position: absolute;
    left: 5%; /* Un poco de margen */
    bottom: 0;
    width: 90%; /* Ancho del subrayado */
    height: 5px; /* Grosor del subrayado */
    background-color: var(--accent-color); /* Naranja de RODBER LLC */
    border-radius: 2px;
}


.hero-content p {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2rem; /* Espacio encima del subtítulo */
}

/* Estilo para la flecha */
.hero-content p .arrow-icon {
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.3s ease-out;
}

.hero-content p:hover .arrow-icon {
    transform: translateX(5px); /* Pequeño movimiento de la flecha al hacer hover */
}


/* --- Responsividad para el Hero (Ajustes) --- */
@media (max-width: 768px) {
    .hero {
        height: 50vh; /* Menos altura en móvil */
    }

    .hero-content h2 {
        flex-direction: column; /* Apila "Making a" y "Difference" */
        font-size: 2.5rem; /* Reduce el tamaño base */
        gap: 0.5rem; /* Menos espacio entre ellos */
    }

    .hero-script-text {
        font-size: 4.5rem; /* Reduce el tamaño de la fuente script */
        padding-bottom: 0.3rem;
    }
    
    .hero-script-text::after {
        height: 3px; /* Subrayado más fino */
        left: 10%;
        width: 80%;
    }

    .hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 1.8rem;
    }
    .hero-script-text {
        font-size: 3.5rem;
    }
}

/* --- Sección Noticias --- */
.news {
    background-color: var(--bg-light);
}

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

.news-card {
    background: var(--bg-white);
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card .card-content .card-description{
    font-size: 0.7rem;
    color: #555;
    margin-bottom: 1rem;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.news-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-card.featured {
    grid-column: span 2; /* El destacado ocupa 2 columnas */
}

.news-card.featured img {
    height: 350px;
}

.card-content {
    padding: 1.5rem;
}

.card-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.card-content .date {
    font-size: 0.85rem;
    color: #777;
}

/* --- Secciones de Dos Columnas (Cultura, Carreras) --- */
.two-column-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
}

.two-column-layout > div {
    flex: 1;
    min-width: 300px;
}

.column-text h3 {
    font-size: 2rem;
}

.column-text p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.column-image img {
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Modificador para invertir columnas */
.two-column-layout.reversed {
    flex-direction: row-reverse;
}

/* Sección Carreras tiene fondo de color */
.careers {
    background-color: var(--bg-light);
}

/* --- Botones --- */
.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--text-light);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #d95c0a; /* Naranja más oscuro */
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: #001f44; /* Azul más oscuro */
}


/* --- Pie de Página --- */
.main-footer {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 2rem 0;
    margin-top: 2rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
}

.footer-nav a {
    color: var(--text-light);
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}

.social-links a {
    color: var(--text-light);
    text-decoration: none;
    margin-left: 0.5rem;
    font-size: 1.2rem;
}

/* --- Responsividad Móvil --- */
@media (max-width: 768px) {
    .main-nav {
        display: none; /* Ocultar menú principal */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 81px; /* Altura del header */
        left: 0;
        background: var(--bg-white);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .main-nav.active {
        display: flex; /* Mostrar menú al hacer clic */
    }

    .main-nav li {
        margin: 0;
        text-align: center;
    }

    .main-nav a {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #eee;
    }

    .mobile-menu-toggle {
        display: block; /* Mostrar ícono de hamburguesa */
    }

    .news-card.featured {
        grid-column: span 1; /* El destacado ocupa 1 columna en móvil */
    }

    .news-card.featured img {
        height: 250px;
    }

    .hero-content h2 {
        font-size: 2.5rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}


/* --- Estilos del Footer Mejorado --- */

/* Variables de color de RODBER */
:root {
    --primary-color: #002D62; /* Azul Oscuro */
    --accent-color: #F37021;  /* Naranja */
    --text-light: #FFFFFF;
    --text-muted: #CCCCCC;     /* Gris claro para texto secundario */
}

/* Contenedor principal del footer */
.footer {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 4rem 0;
    margin-top: 2rem;
    position: relative;
    overflow: hidden; /* Para las líneas de grid (si se usan) */
}

.footer-wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Primera Fila (Logo, Nav, Social) --- */
.footer-first-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Col 1: Logo */
.first-row-col {
    flex: 1;
    min-width: 150px;
}

.footer-logo {
    max-width: 180px;
    height: auto;
}

/* Col 2: Menú de Navegación */
.first-row-col-2 {
    flex: 3; /* Darle más espacio al menú */
    min-width: 300px;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
}

/* Estilo de cada ítem del menú */
.footer-menu > .inline_block {
    flex-basis: 33.33%; /* 3 columnas en escritorio */
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.footer-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    position: relative; /* Clave para el subrayado */
    padding-bottom: 5px;
}

/* Efecto de subrayado naranja */
.link-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width 0.3s ease-in-out;
}

.footer-a:hover .link-underline {
    width: 100%;
}

/* Col 3: Redes Sociales */
.first-row-col-3 {
    flex: 1;
    min-width: 150px;
    text-align: right;
}

.socials-ul .socials a {
    display: inline-block;
    margin-left: 0.75rem;
    transition: opacity 0.3s;
}

.socials-ul .socials a:hover {
    opacity: 0.8;
}

/* --- Segunda Fila (Copyright, Legal) --- */
.footer-second-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.second-row-col,
.second-row-col-2,
.second-row-col-3 {
    flex: 1;
    min-width: 250px;
}

.second-row-col-3 {
    text-align: right;
}

.terms-flex {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.terms-flex span {
    color: rgba(255, 255, 255, 0.3);
}

.footer-second-row a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-second-row a:hover {
    color: var(--text-light);
    text-decoration: underline;
}

/* --- Responsividad --- */

@media (max-width: 1024px) {
    .footer-first-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .first-row-col-3 {
        text-align: left;
        margin-top: 1rem;
    }
    
    .socials-ul .socials a {
        margin-left: 0;
        margin-right: 0.75rem;
    }

    .footer-second-row {
        flex-direction: column;
        gap: 1rem;
    }

    .second-row-col-3, .terms-flex {
        text-align: left;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    /* 2 columnas en móvil para el menú */
    .footer-menu > .inline_block {
        flex-basis: 50%;
    }
}

/* REEMPLAZA el bloque .socials-ul .socials a 
  y .socials-ul .socials a:hover 
  de tu 'style.css' con esto:
*/

.socials-ul .socials a {
    display: inline-block;
    margin-left: 1rem; /* Un poco más de espacio */
    text-decoration: none;
    color: var(--text-light); /* Color base del icono (blanco) */
    transition: color 0.3s, transform 0.3s; /* Transición suave */
}

.socials-ul .socials a i {
    font-size: 1.75rem; /* Tamaño de icono (aprox 28px) */
    vertical-align: middle;
}

.socials-ul .socials a:hover {
    color: var(--accent-color); /* Cambia a naranja */
    transform: scale(1.1); /* Efecto de zoom */
}

/* Y ASEGÚRATE de que la regla de responsividad
  también esté actualizada así:
*/
@media (max-width: 1024px) {
    /* ... (tus otros estilos responsivos) ... */

    .first-row-col-3 {
        text-align: left;
        margin-top: 1rem;
    }

    .socials-ul .socials a {
        margin-left: 0;
        margin-right: 1.25rem; /* Espacio a la derecha en móvil */
    }
}


/* --- Estilos para la Nueva Sección de Cultura (Pestañas) --- */

/* Párrafo de introducción */
.culture-vision {
    font-size: 1.15rem;
    color: #555;
    text-align: left;
    max-width: 80%; /* Para que no sea tan ancho */
    margin: 0 auto 2.5rem auto;
}

/* Contenedor principal de las dos columnas (Nav y Contenido) */
.culture-interactive-wrapper {
    display: flex;
    flex-wrap: wrap; /* Para responsividad */
    gap: 2rem;
}

/* Columna Izquierda: Navegación */
.culture-nav {
    flex: 1; /* Ocupa 1 parte del espacio */
    min-width: 250px; /* Ancho mínimo antes de envolver */
    background-color: var(--primary-color); /* Azul RODBER */
    border-radius: 8px;
    padding: 1rem;
    /* Altura fija para que no se mueva */
    align-self: flex-start; 
}

.culture-nav ul {
    list-style: none;
}

.culture-nav-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: var(--text-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative; /* Para la línea naranja */
    transition: background-color 0.3s ease;
}
.culture-nav-item:last-child {
    border-bottom: none;
}

.culture-nav-item .nav-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 1.5rem;
}

.culture-nav-item .nav-text {
    font-size: 1.1rem;
    font-weight: 700;
}

/* --- Estilo de la pestaña ACTIVA --- */

/* Línea naranja al costado */
.culture-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 4px;
    background-color: var(--accent-color); /* Naranja RODBER */
    border-radius: 0 4px 4px 0;
}

/* Texto más brillante para el ítem activo */
.culture-nav-item.active .nav-number,
.culture-nav-item.active .nav-text {
    color: var(--text-light);
}

/* Columna Derecha: Contenido */
.culture-content {
    flex: 2.5; /* Ocupa 2.5 partes, es más ancho */
    min-width: 300px;
    position: relative; /* Clave para el efecto de "slider" */
    /* Ajusta esta altura si tu contenido es más alto o bajo */
    min-height: 400px; 
}

/* --- Paneles de Contenido --- */
.culture-panel {
    /* --- Lógica del "Slider" --- */
    /* 1. Todos los paneles están ocultos y fuera de vista por defecto */
    display: none;
    opacity: 0;
    
    /* 2. Definimos la animación de entrada */
    animation: fade-in 0.5s ease-out forwards;
}

/* 3. El panel ACTIVO es el único que se muestra */
.culture-panel.active {
    display: grid; /* Usamos Grid para el layout interno (texto e imagen) */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    /* 4. Hacemos que se muestre */
    opacity: 1; 
}

/* Animación de "Fade In" (como un slider) */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px); /* Entra desde abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Estilos del contenido de cada panel */
.panel-text {
    /* Ordenado para móvil, se invierte en escritorio */
    order: 2; 
}

.panel-image {
    order: 1;
}

.panel-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.panel-subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color); /* Azul RODBER */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.panel-text h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.panel-text p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.panel-link {
    color: var(--accent-color); /* Naranja RODBER */
    font-weight: 700;
    text-decoration: none;
}

.panel-link .arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}

.panel-link:hover .arrow {
    transform: translateX(5px); /* Flecha se mueve al hacer hover */
}


/* --- Responsividad para esta sección --- */

@media (max-width: 900px) {
    .culture-vision {
        max-width: 100%;
        text-align: left;
    }
    
    .culture-interactive-wrapper {
        flex-direction: column; /* Apila las columnas */
    }

    .culture-nav {
        /* Permite que los ítems de la nav se pongan en horizontal */
        overflow-x: auto; 
    }

    .culture-nav ul {
        display: flex;
        flex-direction: row; /* Nav se vuelve horizontal */
        width: max-content; /* Evita que se rompa la línea */
    }

    .culture-nav-item {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .culture-nav-item.active::before {
        /* Movemos la línea naranja a la parte inferior en móvil */
        height: 4px;
        width: 70%;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        border-radius: 4px 4px 0 0;
    }
}

@media (max-width: 768px) {
    .culture-panel.active {
        /* Apila el texto y la imagen en móvil */
        grid-template-columns: 1fr;
    }

    .panel-text {
        order: 1; /* Texto primero */
    }

    .panel-image {
        order: 2; /* Imagen después */
    }
}

/* --- Estilos para la Información de Contacto en el Footer --- */

.footer-contact-info {
    margin-top: 1.5rem; /* Espacio debajo del logo */
    font-style: normal; /* Quita la cursiva por defecto de la etiqueta <address> */
    line-height: 1.7; /* Espaciado entre líneas */
    font-size: 0.9rem; /* Un tamaño de letra legible pero no enorme */
    color: var(--text-muted); /* Usamos el color gris claro (secundario) */
}

.footer-contact-info a {
    color: var(--text-light); /* El email resalta en blanco */
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

.footer-contact-info a:hover {
    color: var(--accent-color); /* Cambia a naranja al pasar el ratón */
}

/* contact */

#contact .contact-info {
    margin-top: 2rem;
    font-size: 1rem;
    color: #555;
}
#contact .contact-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}
#contact .contact-info a:hover {
    color: var(--accent-color);
}

/* --- Estilos Sección de Contacto --- */
.contact-section {
    background-color: #fff; /* Fondo gris muy suave */
    padding: 5rem 0;
}

.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    align-items: flex-start;
}

/* Columna Info */
.contact-info {
    flex: 1;
    min-width: 300px;
}

.section-subtitle {
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.5rem;
}

.contact-info h2 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-top: 2rem;
}

.info-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-right: 1rem;
    margin-top: 5px;
}

.info-item h4 {
    margin-bottom: 0.2rem;
    color: var(--primary-color);
}

.info-item p {
    color: #666;
    font-size: 0.95rem;
}

/* Columna Formulario */
.contact-form-container {
    flex: 1.2;
    min-width: 300px;
    background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.btn-block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Mensajes de estado */
.form-message {
    margin-top: 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    min-height: 1.5rem; /* Reserva espacio */
}

.form-message.success {
    color: #28a745; /* Verde */
}

.form-message.error {
    color: #dc3545; /* Rojo */
}

@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    
    .contact-form-container {
        padding: 1.5rem;
    }
}

/* --- Responsividad para la sección CULTURA (Optimizado) --- */

@media (max-width: 1024px) {
    /* Ajuste intermedio para tablets */
    .culture-interactive-wrapper {
        flex-direction: column; /* Apila las columnas (Nav arriba, Contenido abajo) */
    }

    .culture-nav {
        width: 100%; /* Ocupa todo el ancho */
        overflow-x: auto; /* Habilita scroll horizontal */
        margin-bottom: 2rem;
        /* Ocultar barra de scroll fea en navegadores webkit */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .culture-nav::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }

    .culture-nav ul {
        display: flex;
        flex-direction: row;
        width: max-content; /* Permite que los items se extiendan lo necesario */
        padding-bottom: 5px; /* Espacio para el indicador */
    }

    .culture-nav-item {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0.8rem 1.5rem; /* Botones más compactos */
        white-space: nowrap; /* IMPORTANTE: Evita que el texto se parta en dos líneas */
    }

    /* Indicador naranja en la parte inferior para móvil/tablet */
    .culture-nav-item.active::before {
        height: 4px;
        width: 100%;
        left: 0;
        top: auto;
        bottom: 0;
        transform: none;
        border-radius: 4px 4px 0 0;
    }
    
    .culture-content {
        min-height: auto; /* Quitamos altura mínima fija para evitar espacios vacíos */
    }
}

@media (max-width: 768px) {
    /* Ajustes específicos para teléfonos */
    
    .culture-content {
        min-width: 100%; /* Asegura que no se salga de la pantalla */
    }

    .culture-panel.active {
        /* Apila imagen y texto en una sola columna */
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .panel-text {
        order: 1; /* Texto primero para que se lea el título */
        text-align: center; /* Centramos texto en móvil para mejor estética */
    }
    
    .panel-subtitle {
        justify-content: center;
        display: flex;
    }

    .panel-text h3 {
        font-size: 1.75rem; /* Título un poco más pequeño */
    }

    .panel-image {
        order: 2; /* Imagen después */
    }
    
    .panel-image img {
        max-height: 250px; /* Limitamos la altura de la imagen en móvil */
        object-fit: cover;
        width: 100%;
    }
    
    .culture-vision {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}