/* ================= SYCAP - CSS Personalizado ================= */

/* ===== BOTÓN SCROLL TO TOP ===== */
.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #204181 0%, #1a366e 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(32, 65, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-top-btn:hover {
    background: linear-gradient(135deg, #1a366e 0%, #204181 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(32, 65, 129, 0.6);
}

.scroll-to-top-btn:active {
    transform: translateY(-1px);
}

/* Cuando el botón está visible */
.scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* Responsive para mobile */
@media (max-width: 768px) {
    .scroll-to-top-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Efecto de pulso sutil */
.scroll-to-top-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: rgba(32, 65, 129, 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
}

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

/* ===== SKIP TO CONTENT LINK ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #204181;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 6px;
}

/* ===== ESTILOS PARA LA SECCIÓN CONTROL DE EMBARQUE ===== */
#control-embarque {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}

.control-embarque-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #204181;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.control-embarque-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 2rem;
}

.control-embarque-cta {
    display: inline-block;
    background-color: white;
    color: #204181;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.control-embarque-cta:hover {
    background-color: #1a366e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== ESTILOS PARA LA SECCIÓN ADN ===== */
#adn {
    position: relative;
    z-index: 1; /* Asegura que esté por debajo de 'compromiso' */
    overflow: hidden; /* Evita que la imagen de fondo se desborde */
    padding: 6rem 0 6rem;
    min-height: 400px;
    margin-top: 0;
    background-image: linear-gradient(rgba(32, 65, 129, 0.5), rgba(26, 60, 138, 0.5)), url('../images/sections/ADN.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#adn .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.adn-title {
    font-size: 2.5rem;
    color: white;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    width: 100%;
    text-align: center;
}

/* ===== ESTILOS PARA LA SECCIÓN QUIÉNES SOMOS ===== */
#quienes-somos {
    background-image: linear-gradient(rgba(32, 65, 129, 0.6), rgba(26, 60, 138, 0.6)), url('../images/sections/quienes_somos.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

#quienes-somos .container {
    position: relative;
    z-index: 1;
}

/* ===== ESTILOS PARA LA SECCIÓN COMPROMISO ===== */
.compromiso-title {
    color: #204181; /* Azul corporativo */
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    margin-bottom: 2rem; /* Más espacio antes del texto */
    text-transform: uppercase;
    letter-spacing: 1px;
}

#compromiso .compromiso-text {
    color: #374151; /* Un gris un poco más oscuro para mejor legibilidad */
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    text-align: center;
    font-weight: 400; /* Asegura que el peso de la fuente sea consistente */
}

/* ===== AJUSTES RESPONSIVOS PARA COMPROMISO MÓVIL ===== */
@media (max-width: 768px) {
    .compromiso-title {
        font-size: 2rem; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 1.5rem;
        line-height: 1.2;
    }
    
    #compromiso .compromiso-text {
        font-size: 0.95rem; /* Reducido de 1.125rem a 0.95rem */
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .compromiso-title {
        font-size: 1.75rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 1rem;
    }
    
    #compromiso .compromiso-text {
        font-size: 0.875rem; /* 14px */
        line-height: 1.5;
    }
}

/* ===== ESTILOS PARA BOTONES DE CALIDAD EN MOBILE ===== */
@media (max-width: 768px) {
    .inline-block.bg-white\/20 {
        text-align: center !important;
    }
    
    /* Asegurar que los botones en la página de calidad estén centrados */
    #calidad .inline-block {
        text-align: center !important;
    }
    
    /* Centrar contenido de botones en versión mobile */
    #calidad .mt-8.flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #calidad .mt-8.flex a {
        text-align: center !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ===== ESTILOS ESPECÍFICOS PARA BOTONES EN PÁGINA CALIDAD ===== */
#calidad .documentacion-link {
    background: white !important;
    color: #204181 !important;
    border: 2px solid #204181 !important;
}

#calidad .documentacion-link:hover {
    background: #f8fafc !important;
    color: #204181 !important;
    border-color: #1a366e !important;
    transform: translateY(-2px) !important;
}

/* Asegura que no haya herencia de colores no deseados */
#compromiso p {
    color: inherit;
    margin-bottom: 0;
}

.compromiso-text strong {
    color: #204181; /* Azul corporativo para el texto resaltado */
    font-weight: 600;
    opacity: 1; /* Asegura que no haya transparencia */
}

/* Responsive */
@media (max-width: 768px) {
    #adn {
        background-image: linear-gradient(rgba(32, 65, 129, 0.45), rgba(26, 60, 138, 0.45)), url('../images/sections/ADN.png');
    }

    #adn::before {
        top: 350px; /* Aumentado para bajar la imagen en móviles */
    }

    #compromiso {
        padding: 4rem 1rem;
    }

    .compromiso-container {
        padding: 1.5rem;
        margin: 0 auto 1.5rem;
        backdrop-filter: blur(4px);
    }

    .compromiso-title {
        font-size: 1.5rem;
    }

    .compromiso-text {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* Estilos para la sección Quienes Somos - Responsivo */
.quienes-somos-container {
    position: relative;
    min-height: 340px;
    background: #204181;
}

.quienes-somos-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url('../images/sections/quienes_somos.png') no-repeat left top / auto 100%;
    background-position: 0 0;
    transition: width 0.3s ease, clip-path 0.3s ease;
    margin: 0;
    padding: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.quienes-somos-content {
    position: relative;
    z-index: 20;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Media Queries */
@media (min-width: 768px) {
    .quienes-somos-image {
        width: 80%;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    }
    
    @media (min-width: 1200px) {
        .quienes-somos-image {
            clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
        }
    }
    
    @media (min-width: 1600px) {
        .quienes-somos-image {
            clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%);
        }
    }
    
    .quienes-somos-content {
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    #quienes-somos {
        background-size: 170%; /* Ajuste para hacer zoom out y alejar la imagen */
        background-position: 40% 60%; /* Ajuste de posición: 40% horizontal (más a la izquierda) y 60% vertical */
    }
    .quienes-somos-image {
        display: none;
    }
    
    .quienes-somos-content {
        justify-content: center;
        text-align: center !important;
    }
    
    .quienes-somos-content div {
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }
}

.diagonal-blue-overlay {
  position: absolute;
  inset: 0;
  background: #204181; /* Azul corporativo */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
}

/* ===== ESTILOS PARA LOS DIVISORES DE SECCIÓN ===== */
.section-divider {
    width: 100%;
    height: 1px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: none;
    margin: 0 0 -1px 0;
    position: relative;
    z-index: 10;
    opacity: 0.25;
}

/* Asegurar que los divisores sean visibles sobre fondos oscuros */
#compromiso + .section-divider,
#adn + .section-divider {
    background: rgba(255,255,255,0.3);
}

/* Asegurar que los divisores sean visibles sobre fondos claros */
#control-embarque + .section-divider,
#documentacion + .section-divider,
#clientes + .section-divider {
    background: rgba(0,0,0,0.1);
}

.logo-claros-bg {
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Carrusel funcional y responsivo */
.clientes-swiper {
  width: 100%;
  padding: 20px 0;
}

.clientes-swiper .swiper-wrapper {
    display: flex;
    align-items: center; /* Centra los logos verticalmente */
}

.clientes-swiper .swiper-slide {
  width: 200px; /* Ancho fijo para cada logo, clave para el modo 'auto' */
  height: 140px; /* Altura unificada para todos los slides */
  display: flex;
  align-items: center;
  justify-content: center;
}

.clientes-swiper .swiper-slide img {
  max-height: 90px; /* Reducido 10% de 100px a 90px */
  max-width: 162px; /* Reducido 10% de 180px a 162px */
  width: auto;
  object-fit: contain;
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
  .clientes-swiper .swiper-slide img {
    max-height: 65px; /* Reducido más significativamente para ser más visible */
  }
}

@media (max-width: 480px) {
  .clientes-swiper .swiper-slide img {
    max-height: 50px; /* Reducido más significativamente para ser más visible */
  }
}

/* ===== FIX PARA SCROLL HORIZONTAL EN MÓVIL ===== */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #797979;
    background-color: #ffffff;
    width: 100%;
    position: relative;
}
.bg-sycap-header { background-color: #f5f2e9; }
.bg-sycap-blue-dark { background-color: #204181; }

footer {
    background: #fff !important;
    color: #0057a0 !important;
}

footer img[alt*="Certificación ISO"],
footer img[alt*="ISO"] {
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

footer .footer-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1rem !important;
}

footer p {
    margin: 0 !important;
    text-align: center !important;
    flex: 1 !important;
}

@media (max-width: 768px) {
    footer .footer-content {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    footer img[alt*="ISO"] {
        max-width: 120px !important;
    }
}



.bg-sycap-blue-medium, .bg-sycap-blue-dark, .bg-sycap-blue-title, .bg-sycap-blue, .bg-sycap-light-blue { background-color: #204181 !important; }
.text-sycap-blue-title, .text-sycap-blue-dark, .text-sycap-blue, .text-sycap-light-blue { color: #204181 !important; }
.text-sycap-blue-dark { color: #204181; }
.text-sycap-light-blue { color: #D9E2F3; }
.border-sycap-blue-title, .border-sycap-blue-dark, .border-sycap-blue, .border-sycap-light-blue { border-color: #204181 !important; }
.border-sycap-light-blue { border-color: #D9E2F3; }
.bg-sycap-clients { background-color: #ede8dd; }

.section-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 2.5rem;
    text-align: center;
    color: #0057a0;
}

/* ===== AJUSTES RESPONSIVOS PARA SECTION-TITLE (CLIENTES) MÓVIL ===== */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 2rem;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.75rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 1.5rem;
    }
}
/* =============== ESTILOS DE NAVEGACIÓN MEJORADOS =============== */
/* =================================================================== */

/* --- Estilos para los enlaces de navegación (Desktop) --- */
.header-nav-link {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #2d3748;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.6rem;
    margin: 0 0.1rem;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    line-height: 1.5;
}

.header-nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: #0057a0;
    transition: width 0.3s ease;
}

.header-nav-link:hover::after {
    width: 100%;
}

.header-nav-link:hover {
    color: #0057a0;
}

/* --- Estilos del Menú Móvil y Animaciones --- */

/* Panel del menú móvil (inicialmente oculto y fuera de la pantalla) */
#mobile-menu {
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s;
}

/* Cuando el menú está abierto */
header.menu-open #mobile-menu {
    visibility: visible;
    transform: translateY(0);
}

/* Estilos de los enlaces dentro del menú móvil */
#mobile-menu .header-nav-link {
    display: block;
    text-align: center;
    padding: 1rem;
    font-size: 1rem;
    border-bottom: 1px solid #f0f4fa;
}

#mobile-menu .header-nav-link:last-child {
    border-bottom: none;
}

#mobile-menu .header-nav-link:hover {
    background-color: #f8fafd;
    color: #1a3c8a;
}

/* Animación del icono de hamburguesa a 'X' */
header.menu-open #menu-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

header.menu-open #menu-toggle span:nth-child(2) {
    opacity: 0;
}

header.menu-open #menu-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Reglas de Responsividad para el Menú --- */

/* --- Layout de Cabecera Definitivo --- */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-logo {
    /* En móvil, el logo debe poder centrarse. Lo movemos al centro absoluto. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    /* Logo sobresale del nav para maximizar tamaño */
}

.header-logo img {
    height: 80px !important; /* Aumentamos de 64px (h-16) a 80px */
    width: auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

@media (min-width: 1081px) {
    .header-logo {
        position: static;
        transform: none;
        flex-shrink: 0; /* El logo NUNCA se encoge en desktop */
        z-index: 100;
    }
    
    .header-logo img {
        height: 90px !important; /* En desktop aún más grande */
    }
}

.header-nav {
    display: none; /* Oculto por defecto */
    flex-wrap: wrap; /* Permite que los enlaces se ajusten */
    justify-content: flex-end; /* Alinea los enlaces a la derecha */
    align-items: center;
    gap: 0.2rem; /* Espacio entre elementos del menú reducido */
    min-width: 0; /* Necesario para que flexbox se encoja correctamente */
}

.header-social-mobile {
    display: flex; /* Visible por defecto en móvil */
    align-items: center;
    gap: 0.75rem; /* 12px */
}

.header-social-icon {
    color: #204181; /* Azul SYCAP oscuro */
    font-size: 1.5rem; /* 24px, para que coincida con el tamaño de los SVGs anteriores */
    padding: 0.25rem; /* Pequeño padding para área de click */
    transition: color 0.3s ease;
}

.header-social-icon:hover {
    color: #3b82f6; /* Azul SYCAP más brillante para hover */
}

.header-menu-toggle {
    display: block; /* Visible por defecto (enfoque mobile-first) */
    position: relative;
    width: 2rem;
    height: 2rem;
    color: #204181;
}

/* --- Puntos de Quiebre para el Menú (1080px optimizado para monitores 19") --- */

/* En pantallas grandes... */
@media (min-width: 1081px) {
    /* ...mostramos el menú de navegación de escritorio */
    .header-nav {
        display: flex;
    }
    /* ...y ocultamos el botón de hamburguesa */
    .header-menu-toggle {
        display: none;
    }
    /* ...y también los iconos sociales de móvil */
    .header-social-mobile {
        display: none;
    }
}

/* Resto del código */

/* Ajuste de anclaje para Header Fijo */
section[id] {
    scroll-margin-top: 100px; /* Espacio para que el header no tape el título */
}
.hero-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
}
.hero-text {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: #fff;
}
.hero-cta-container {
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    padding: 1.25rem;
    border-radius: 0.375rem;
}
.hero-cta-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}

/* ===== AJUSTES RESPONSIVOS PARA HERO/BIENVENIDOS MÓVIL ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 3rem !important; /* Aumentado a 3rem con !important para forzar el espaciado */
        line-height: 1.2;
        padding-bottom: 1rem !important; /* Padding adicional para más separación */
    }
    
    .hero-text {
        font-size: 0.95rem; /* Reducido de 1.125rem a 0.95rem */
        margin-bottom: 0.75rem;
        line-height: 1.5;
    }
    
    .hero-cta-container {
        padding: 1rem;
        margin-top: 1.5rem;
    }
    
    .hero-cta-text {
        font-size: 1rem; /* Reducido de 1.125rem a 1rem */
        font-weight: 600;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 0.5rem;
    }
    
    .hero-text {
        font-size: 0.875rem; /* 14px */
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }
    
    .hero-cta-container {
        padding: 0.875rem;
        margin-top: 1rem;
    }
    
    .hero-cta-text {
        font-size: 0.9rem;
    }
}
.quienes-somos-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #0057a0;
}
.quienes-somos-text {
    line-height: 1.625;
    color: #fff;
    font-size: 1.125rem;
}

.adn-intro-text {
    font-size: 1.125rem;
}

/* ===== AJUSTES RESPONSIVOS PARA QUIENES SOMOS MÓVIL ===== */
@media (max-width: 768px) {
    .quienes-somos-title {
        font-size: 2rem; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 0.75rem;
        line-height: 1.2;
    }
    
    .quienes-somos-text {
        font-size: 0.95rem; /* Reducido de 1.125rem a 0.95rem */
        line-height: 1.5;
    }
    
    .adn-intro-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .quienes-somos-title {
        font-size: 1.75rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 0.5rem;
    }
    
    .quienes-somos-text {
        font-size: 0.875rem; /* 14px */
        line-height: 1.4;
    }
    
    .adn-intro-text {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }
}
.compromiso-container {
    border: 2px solid #D9E2F3;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #fff;
}
.compromiso-title {
    font-size: 1.5rem;
    font-weight: 600;
}
.compromiso-text {
    font-size: 1.125rem;
    color: #D9E2F3;
}
.adn-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 2.5rem;
    text-align: center;
    color: #fff;
}
.adn-mission-vision-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
}
.adn-text {
    color: #d1d5db;
    line-height: 1.625;
    font-size: 1.125rem;
}
.control-embarque-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #0057a0;
}

/* Título específico para Control de Embarque en desktop */
#control-embarque h2 {
    margin-top: 4rem !important;
}

/* Título específico para Documentación Legal en desktop */
.documentacion-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 4rem;
    color: #0057a0;
}
/* ===== AJUSTES PARA DESKTOP CONTROL DE EMBARQUE ===== */
/* Sobrescribir Tailwind para desktop únicamente */
@media (min-width: 769px) {
    /* Párrafo sin margen inferior en desktop */
    #control-embarque .mb-6 {
        margin-bottom: 0 !important;
    }
    
    /* Container del botón sin margin-top auto */
    #control-embarque .mt-auto {
        margin-top: 2rem !important; /* Exactamente 2 líneas de espacio */
    }
    
    /* Hacer la sección más compacta en desktop */
    #control-embarque {
        padding: 3rem 0 !important; /* Reducido de py-24 (6rem) a 3rem */
    }
    
    /* Subir solo el título en desktop */
    #control-embarque h2 {
        transform: translateY(-2rem) !important; /* Subir solo el título independientemente */
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Margen superior para el contenedor de la imagen en desktop */
    #control-embarque .hidden.md\\:block {
        margin-top: 2rem !important; /* Espacio en la parte superior del contenedor de imagen */
    }
    
    /* Alternativa: padding superior para el contenedor */
    #control-embarque .overflow-hidden {
        padding-top: 2rem !important; /* Espacio interno superior */
    }
}

/* ===== AJUSTES RESPONSIVOS PARA CONTROL DE EMBARQUE MÓVIL ===== */
/* SOLO AFECTA MÓVIL - Desktop mantiene diseño original */
@media (max-width: 768px) {
    .control-embarque-title {
        font-size: 2rem !important; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 0.75rem !important;
        line-height: 1.2 !important;
        text-align: center !important; /* Centrado en móvil */
    }
    
    .control-embarque-text {
        font-size: 0.95rem !important; /* Reducido para consistencia */
        line-height: 1.5 !important;
        margin-bottom: 4rem !important; /* Aumentado significativamente a 4rem SOLO EN MÓVIL */
        text-align: center !important; /* Centrado en móvil */
    }
    
    /* Centrar toda la columna de texto en móvil */
    #control-embarque .px-8 {
        text-align: center !important;
    }
    
    /* Reducir padding inferior de la sección en móvil */
    #control-embarque {
        padding-bottom: 2rem !important; /* Reducido para menos espacio con la siguiente sección */
    }
}

@media (max-width: 480px) {
    .control-embarque-title {
        font-size: 1.75rem !important; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 0.5rem !important;
        text-align: center !important;
    }
    
    .control-embarque-text {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
        margin-bottom: 3rem !important; /* Aumentado significativamente a 3rem SOLO EN MÓVIL */
        text-align: center !important;
    }
    
    /* Reducir aún más el padding inferior en móviles pequeños */
    #control-embarque {
        padding-bottom: 1.5rem !important; /* Menos espacio con la siguiente sección */
    }
}
.control-embarque-cta {
    display: inline-block;
    background: #204181;
    color: #fff;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    transition: all 0.3s;
    transform: none;
}
.control-embarque-cta:hover {
    background: #204181;
}

/* ===== AJUSTES RESPONSIVOS PARA DOCUMENTACIÓN LEGAL MÓVIL ===== */
@media (max-width: 768px) {
    .documentacion-title {
        font-size: 2rem; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 2.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .documentacion-title {
        font-size: 1.75rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 2rem;
    }
}
.documentacion-link {
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #204181;
    color: #fff;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: none;
}
.documentacion-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    background-color: #1a366e; /* Un azul ligeramente más oscuro */
    color: #fff;
}
.cliente-card {
    border: 2px solid #0057a0;
    padding: 1rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: box-shadow 0.3s;
}
.cliente-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.contacto-subtitle {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #204181;
}
.contacto-text-address {
    line-height: 1.625;
    color: #374151;
    font-size: 1.125rem;
}
.contacto-email {
    color: #0057a0;
}
.contacto-email:hover {
    text-decoration: underline;
}

/* ===== AJUSTES RESPONSIVOS PARA CONTACTO MÓVIL ===== */
@media (max-width: 768px) {
    .contacto-subtitle {
        font-size: 1.25rem; /* Reducido de 1.5rem a 1.25rem */
        margin-bottom: 0.75rem;
        line-height: 1.2;
    }
    
    .contacto-text-address {
        font-size: 0.95rem; /* Reducido para consistencia */
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .contacto-subtitle {
        font-size: 1.125rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 0.5rem;
    }
    
    .contacto-text-address {
        font-size: 0.875rem; /* 14px */
        line-height: 1.4;
    }
}
.enlaces-title {
    font-size: 2.25rem;
    font-weight: bold;
    margin-bottom: 2.5rem;
    text-align: center;
    color: #0057a0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ===== AJUSTES RESPONSIVOS PARA ENLACES RECOMENDADOS MÓVIL ===== */
@media (max-width: 768px) {
    .enlaces-title {
        font-size: 2rem; /* Reducido de 2.25rem a 2rem */
        margin-bottom: 2rem;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .enlaces-title {
        font-size: 1.75rem; /* Aún más pequeño para móviles muy pequeños */
        margin-bottom: 1.5rem;
    }
}




.enlaces-card {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s;
}
.enlaces-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.enlaces-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #204181;
}
.enlaces-link {
    color: #0057a0;
}
.enlaces-link:hover {
    text-decoration: underline;
}
.btn-hover-primary {
    transition: background 0.3s;
}

.btn-hover-primary:hover {
    background: #204181;
}
.btn-hover-secondary {
    transition: background 0.3s;
}
.btn-hover-secondary:hover {
    background: #204181;
}

/* ===== ESTILOS PARA LA SECCIÓN CALIDAD (EMPRESARIAL) ===== */
.calidad-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #204181 35%, #1a365d 100%);
    position: relative;
    overflow: hidden;
}

.calidad-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.calidad-iso-container {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    border-radius: 1rem;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.calidad-iso-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 49%, rgba(59, 130, 246, 0.05) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(96, 165, 250, 0.05) 50%, transparent 51%);
    background-size: 20px 20px;
    pointer-events: none;
}

.calidad-iso-container:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 35px 70px -12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Responsive para sección calidad */
@media (max-width: 768px) {
    .calidad-iso-container {
        padding: 2rem;
        margin: 0 1rem;
    }
}

/* ===== REDUCIR TAMAÑO DE ICONOS ENLACES RECOMENDADOS ===== */
#enlaces img {
    height: 6rem !important; /* Reducido 25% de h-32 (8rem) a 6rem */
    width: 12rem !important; /* Reducido 25% de w-64 (16rem) a 12rem */
    transition: all 0.3s ease !important; /* Transición suave */
    filter: grayscale(0%) !important; /* Color normal por defecto */
    opacity: 0.9 !important; /* Ligeramente transparente */
}

/* ===== REDUCIR TAMAÑO ADICIONAL EN MOBILE ===== */
@media (max-width: 768px) {
    #enlaces img {
        height: 4.8rem !important; /* Reducido 20% de 6rem a 4.8rem */
        width: 9.6rem !important; /* Reducido 20% de 12rem a 9.6rem */
    }
}

/* Efecto hover para los iconos de enlaces */
#enlaces a:hover img {
    transform: scale(1.12) !important; /* Solo escala más pronunciada */
    filter: brightness(1.2) saturate(1.1) !important; /* Más brillante y saturado */
    opacity: 1 !important; /* Completamente opaco */
}

/* Efecto en el contenedor del enlace */
#enlaces a {
    display: block !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

#enlaces a:hover {
    transform: translateY(-10px) !important; /* Flotación más pronunciada */
}

/* Efecto de ondas expansivas al hover */
#enlaces a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(32, 65, 129, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
    pointer-events: none;
    z-index: -1;
}

#enlaces a:hover::after {
    width: 200px;
    height: 200px;
    opacity: 0.8;
}

/* Efecto de partículas brillantes */
#enlaces a::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 4px;
    height: 4px;
    background: rgba(32, 65, 129, 0.6);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
    box-shadow: 
        20px 10px 0 rgba(32, 65, 129, 0.4),
        -15px 30px 0 rgba(32, 65, 129, 0.3),
        40px -20px 0 rgba(32, 65, 129, 0.5);
}

#enlaces a:hover::before {
    opacity: 1;
    transform: scale(1.5);
}

/* ===== AJUSTES RESPONSIVOS PARA ADN MÓVIL ===== */
@media (max-width: 768px) {
    .adn-text {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    .adn-title {
        font-size: 2rem !important; /* Igual que hero-title en mobile */
        margin-bottom: 2rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 480px) {
    .adn-text {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }
    
    .adn-title {
        font-size: 1.75rem !important; /* Igual que hero-title en mobile pequeño */
        margin-bottom: 1.5rem !important;
        line-height: 1.2 !important;
    }
}

/* ===== TAMAÑOS BASE PARA PÁGINA CALIDAD ===== */
#calidad p {
    font-size: 1.125rem;
    line-height: 1.625;
}

/* ===== AJUSTES RESPONSIVOS PARA PÁGINA CALIDAD.HTML ===== */
@media (max-width: 768px) {
    /* Título CALIDAD */
    #calidad h2.text-4xl {
        font-size: 2rem !important; /* Reducido de text-4xl a 2rem */
        margin-bottom: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    /* Texto de párrafos en sección calidad */
    #calidad p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Títulos de CONTACTO en página calidad */
    #contacto h2.text-4xl {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
        line-height: 1.2 !important;
    }
    
    /* Subtítulos de contacto (Administración HQ, Necochea) */
    #contacto h3.text-2xl {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    /* Texto de direcciones en contacto */
    #contacto p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* Botones PDF en sección calidad */
    #calidad .space-x-4 a {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Título CALIDAD */
    #calidad h2.text-4xl {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Texto de párrafos en sección calidad */
    #calidad p {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
    }
    
    /* Títulos de CONTACTO en página calidad */
    #contacto h2.text-4xl {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Subtítulos de contacto */
    #contacto h3.text-2xl {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Texto de direcciones en contacto */
    #contacto p {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.4 !important;
    }
    
    /* Botones PDF responsivos */
    #calidad .space-x-4 a {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    /* Botones en columna en lugar de fila */
    #calidad .space-x-4 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* ===== FIX ADICIONAL PARA CONTENEDORES RESPONSIVOS ===== */
.container {
    max-width: 100%;
    overflow-x: hidden;
}

.swiper-container, .swiper {
    overflow: visible;
}

/* Fix para elementos que pueden causar desbordamiento */
img {
    max-width: 100%;
    height: auto;
}

/* Fix específico para el grid de contacto */
@media (max-width: 768px) {
    .grid {
        overflow-x: hidden;
    }
    
    /* Asegurar que las imágenes del carousel no se desborden */
    .clientes-swiper .swiper-slide img {
        max-width: 160px !important;
        width: auto !important;
        height: 80px !important;
    }
    
    /* Fix para secciones que pueden causar desbordamiento - EXCEPTO carousel */
    section:not(#clientes) {
        overflow-x: hidden;
    }
    
    /* Sección clientes debe permitir el carrusel */
    #clientes {
        overflow-x: visible;
    }
    
    /* Fix específico para mapas de Google */
    iframe {
        max-width: 100%;
    }
    
    /* Asegurar que el carousel funcione en móvil */
    .clientes-swiper {
        overflow: visible !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    .clientes-swiper .swiper-wrapper {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .clientes-swiper .swiper-slide {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}