/* ============================================
   RESPONSIVE OPTIMIZADO - TODOS LOS DISPOSITIVOS
   Mobile First Approach
   ============================================ */

:root {
    --site-padding: 5%;
    --border-offset: 40px;
    --border-width: 3px;
    --border-length: 250px;
}

/* Tablet (1024px) */
@media (max-width: 1023px) {

    /* Hero Index Mobile */
    .hero-final {
        height: auto !important;
        min-height: 80vh !important;
        padding: 100px 15px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        background-position: center center !important;
    }

    .hero-content-final {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: auto !important;
        padding-bottom: 20px !important;
    }

    .hero-content-final h1 {
        font-size: 1.8rem !important;
        padding: 30px 20px !important;
        max-width: 90% !important;
    }

    :root {
        --site-padding: 30px;
        --border-offset: 25px;
        --border-length: 180px;
    }

    .product-section-page {
        padding: 60px var(--site-padding) !important;
        min-height: auto !important;
    }

    /* Ajuste de grids generales */
    .cat-layout,
    .hero-grid,
    .zigzag-flow .row-item,
    .clavos-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Reset de anchos para cajas que eran parciales */
    .img-box,
    .text-box,
    .text-box.wide-text,
    .img-box.small-img,
    .clavos-images,
    .clavos-list {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .right-aligned {
        text-align: left !important;
    }

    .shifted-down {
        margin-top: 0 !important;
    }

    /* Asegurar que la imagen siempre vaya primero en el zigzag */
    .row-item.right {
        flex-direction: column !important;
    }

    .row-item .img-box {
        order: -1 !important;
    }

    /* Reset de bordes para tablet */
    .border-tr::before,
    .border-bl::before,
    .border-tl::before,
    .border-br::before,
    .product-section-page.border-vl::before {
        width: var(--border-length) !important;
        top: var(--border-offset) !important;
        right: var(--border-offset) !important;
        left: auto !important;
        display: block !important;
    }

    .border-bl::before,
    .border-br::before {
        top: auto !important;
        bottom: var(--border-offset) !important;
    }

    .border-bl::before,
    .border-tl::before,
    .product-section-page.border-vl::before {
        right: auto !important;
        left: var(--border-offset) !important;
    }

    /* Corte y Doblado - Borde horizontal largo mantenido en Tablet */
    .product-section-page:nth-of-type(4).border-vl::before {
        width: auto !important;
        top: auto !important;
        bottom: var(--border-offset) !important;
        left: var(--border-offset) !important;
        right: var(--border-offset) !important;
        display: block !important;
    }

    .border-tr::after,
    .border-bl::after,
    .border-tl::after,
    .border-br::after,
    .border-vr::after,
    .border-vl::after,
    .product-section-page:nth-of-type(4).border-vl::after {
        height: var(--border-length) !important;
        top: var(--border-offset) !important;
        right: var(--border-offset) !important;
        left: auto !important;
        display: block !important;
    }

    .border-bl::after,
    .border-br::after {
        top: auto !important;
        bottom: var(--border-offset) !important;
    }

    .border-bl::after,
    .border-vl::after,
    .product-section-page:nth-of-type(4).border-vl::after {
        right: auto !important;
        left: var(--border-offset) !important;
    }

    /* Hero Tablet */
    .page-hero {
        height: auto !important;
        min-height: 90vh !important;
        padding: 100px var(--site-padding) 60px !important;
        display: flex !important;
        align-items: flex-end !important;
    }

    .hero-title-quote::before,
    .hero-title-quote::after {
        display: none !important;
    }

    .hero-title-quote,
    .hero-description-card {
        height: auto !important;
        max-width: 100% !important;
        padding: 100px var(--site-padding) 40px !important;
        background: rgba(26, 26, 26, 0.7) !important;
    }

    /* Corte y Doblado Tablet - Ajuste para que no sea absolute */
    .cat-layout {
        position: relative !important;
    }

    .video-box-doblado {
        width: 100% !important;
        height: 500px !important;
        /* Aumentado de 400px para evitar corte de video */
        margin-bottom: 120px !important;
        /* Espacio para el texto flotante */
        position: relative !important;
        order: 1 !important;
        background: transparent !important;
        border-radius: 20px !important;
        overflow: visible !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .video-container-bg {
        position: absolute !important;
        /* Cambiado a absolute para que object-fit funcione bien */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 20px !important;
        z-index: 1 !important;
    }

    .video-overlay-dark {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(26, 26, 26, 0.3) !important;
        z-index: 2 !important;
        border-radius: 20px !important;
    }

    .text-floating-glass {
        position: absolute !important;
        bottom: -90px !important;
        /* Ajustado para flotar mejor */
        left: 30px !important;
        right: 30px !important;
        margin: 0 !important;
        width: auto !important;
        order: 2 !important;
        background: rgba(26, 26, 26, 0.8) !important;
        z-index: 10 !important;
        padding: 30px !important;
        border-radius: 15px !important;
        top: auto !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 15px 35px rgba(26, 26, 26, 0.4) !important;
        color: white !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .buttons-vertical-stack {
        order: 3 !important;
        margin-top: 50px !important;
        /* Aumentado para dar aire después del texto flotante */
        padding: 0 var(--site-padding) !important;
        gap: 12px !important;
    }

    /* Header Index Tablet */
    .header-final {
        padding: 10px 0 !important;
        background: rgba(26, 26, 26, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .header-container {
        padding: 0 var(--site-padding) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo-final span {
        font-size: 1.5rem !important;
    }

    .desktop-nav,
    .nav-right {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Modales responsivos */
    .modal-content {
        width: 95% !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* FIXES PARA PRODUCTOS - CATALOGOS TABLET */
    .btn-catalogo-float {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 40px auto 10px !important;
        /* Centrado con espacio */
        display: block !important;
        text-align: center !important;
        padding: 16px 30px !important;
        box-shadow: 0 10px 20px rgba(26, 26, 26, 0.15) !important;
    }

    .grid-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .grid-buttons.one-column {
        grid-template-columns: 1fr !important;
    }

    .clavos-images {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        order: -1 !important;
        /* Imágenes arriba en tablet */
        margin-bottom: 20px !important;
    }

    .clavos-images img {
        width: 30% !important;
        max-width: 180px !important;
        height: auto !important;
    }

    .clavos-images .btn-catalogo-float {
        order: 10 !important;
        /* El botón de esta sección al final */
        width: 100% !important;
        margin-top: 20px !important;
    }

    .img-box.full-width img {
        height: 350px !important;
        /* Reducido para tablet */
    }

    /* ============================================
       INDEX SPECIFIC - TABLET
       ============================================ */

    /* Header Index Tablet */
    .header-final {
        padding: 10px 0 !important;
        background: rgba(26, 26, 26, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        height: auto !important;
    }

    .header-container {
        padding: 0 var(--site-padding) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
    }

    .logo-final {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        /* Más espacio entre logo y texto */
    }

    .logo-final img {
        height: 45px !important;
        width: auto !important;
    }

    .logo-final span {
        font-size: 1.4rem !important;
        margin-left: 0 !important;
        /* Quitar el margen negativo que lo desalinea */
        color: #fff !important;
    }

    .header-productos-desktop {
        padding: 10px 0 !important;
        background: rgba(26, 26, 26, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        height: 70px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    .header-container-productos-desktop {
        padding: 0 var(--site-padding) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .logo-link-productos {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .logo-img-productos {
        height: 50px !important;
        width: auto !important;
    }

    .logo-text-productos {
        font-size: 1.4rem !important;
        margin-left: 8px !important;
        color: #fff !important;
    }

    .simple-header {
        display: none !important;
    }

    .desktop-nav,
    .nav-right {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Hero Index */
    .hero-final {
        height: auto !important;
        min-height: 70vh !important;
        padding: 120px var(--site-padding) 60px !important;
        display: flex !important;
        flex-direction: column !important;
        /* Asegurar dirección columna */
        align-items: center !important;
        justify-content: flex-end !important;
        /* Movido hacia abajo */
        background-attachment: scroll !important;
        background-position: center !important;
        margin-top: 70px !important;
    }

    .hero-content-final {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .hero-content-final {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: auto !important;
        padding-bottom: 30px !important;
    }

    .hero-content-final h1 {
        font-size: 2.5rem !important;
        width: auto !important;
        max-width: 85% !important;
        padding: 45px 35px !important;
        text-align: center !important;
        line-height: 1.2 !important;
        background: rgba(26, 26, 26, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 15px !important;
        border-left: none !important;
        border-bottom: none !important;
        margin: 0 !important;
        box-shadow: 0 15px 35px rgba(26, 26, 26, 0.3) !important;
    }

    /* Industries Section */
    .industries-section {
        padding: 80px 0 !important;
    }

    .industries-section {
        padding: 60px 0 !important;
    }

    .industries-section {
        padding: 60px 0 !important;
    }

    .industries-container {
        padding: 0 var(--site-padding) !important;
    }

    .industries-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .industry-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .industry-btn {
        flex: 0 1 auto !important;
        min-width: 140px !important;
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        height: auto !important;
    }

    .industries-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .industries-images {
        height: auto !important;
        min-height: 350px !important;
        width: 100% !important;
        position: relative !important;
        border-radius: 15px !important;
        overflow: visible !important;
        order: 1 !important;
        margin-bottom: -30px !important;
        /* Superposición visual */
        z-index: 1 !important;
    }

    .industry-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* Llenar el contenedor */
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    .industry-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Barra de Estadísticas - Tablet 3x2 */
    .stats-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 370px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        padding: 30px 25px !important;
        background: rgba(26, 26, 26, 0.7) !important;
        border-radius: 20px !important;
        z-index: 20 !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 15px 40px rgba(26, 26, 26, 0.3) !important;
    }

    .stat-item {
        flex: none !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px !important;
    }

    .stat-item:nth-child(n+4) {
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 20px !important;
    }

    .stat-item:last-child {
        grid-column: span 1 !important;
    }

    .stat-number {
        font-size: 2rem !important;
        margin-bottom: 5px !important;
        color: #f9751c !important;
    }

    .stat-label {
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .industries-descriptions {
        order: 2 !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        /* Por encima de la imagen */
        padding: 0 15px !important;
        /* Pequeño sangrado lateral */
    }

    .industries-descriptions::before {
        display: none !important;
    }

    .description-box {
        position: relative !important;
        opacity: 0 !important;
        display: none !important;
        padding: 35px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 15px !important;
        width: 100% !important;
        border-left: 5px solid #f9751c !important;
        box-shadow: 0 10px 30px rgba(26, 26, 26, 0.3) !important;
    }

    .description-box.active {
        opacity: 1 !important;
        display: block !important;
    }

    .description-box p {
        font-size: 1.05rem !important;
        line-height: 1.8 !important;
        margin: 0 !important;
        color: #fff !important;
    }

    .contact-button-container {
        justify-content: center !important;
        padding: 0 !important;
        margin-top: 30px !important;
    }

    /* Values Section */
    .values-section {
        padding: 80px 0 !important;
    }

    .values-container {
        padding: 0 var(--site-padding) !important;
    }

    .values-content-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 50px !important;
    }

    .values-center-col {
        order: 2 !important;
        height: auto !important;
        min-height: 350px !important;
        width: 100% !important;
        position: relative !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 30px !important;
    }

    .values-center-col img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 450px !important;
        object-fit: contain !important;
        border-radius: 15px !important;
    }

    .values-left-col {
        order: 1 !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .values-left-col::before {
        display: none !important;
    }

    .values-title-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 35px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 15px !important;
        border-left: 5px solid #f9751c !important;
    }

    .values-title-box h2 {
        font-size: 1.6rem !important;
        line-height: 1.4 !important;
    }

    .values-intro-box {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        padding: 30px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
        border-radius: 15px !important;
    }

    .values-intro {
        color: #fff !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }

    .values-btn-container {
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

    .values-right-col {
        order: 3 !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 !important;
        position: relative !important;
    }

    .values-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 15px !important;
    }

    .value-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 15px rgba(26, 26, 26, 0.03) !important;
        border-radius: 12px !important;
    }

    .value-card h3 {
        color: #fff !important;
        font-size: 1rem !important;
        text-align: center !important;
    }

    .value-card.active {
        background: rgba(26, 26, 26, 0.85) !important;
        border-color: #f9751c !important;
    }

    .value-card.active h3 {
        color: #f9751c !important;
    }

    /* News Section */
    .news-section {
        padding: 80px 0 !important;
    }

    .news-section::before,
    .news-section::after {
        display: none !important;
    }

    .news-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .news-left-column {
        width: 100% !important;
    }

    .news-left-box {
        width: 100% !important;
        padding: 35px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 15px !important;
        border-left: 5px solid #f9751c !important;
    }

    .news-video-placeholder {
        width: 100% !important;
        height: 350px !important;
        margin-top: 25px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .news-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .news-right-column {
        width: 100% !important;
    }

    .news-right-box-full {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 35px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 15px rgba(26, 26, 26, 0.3) !important;
        border-radius: 15px !important;
    }

    .news-text {
        color: #f5f5f5 !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }

    .partners-grid-buttons {
        margin: 30px 0 0 0 !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .partner-btn {
        min-width: 150px !important;
        padding: 12px 18px !important;
    }

    /* Header & Nav Tablet */
    .simple-header,
    .fixed-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: rgba(26, 26, 26, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        height: 70px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .back-button,
    .back-btn {
        display: flex !important;
        align-items: center !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 0.9rem !important;
    }

    .flecha-retorno {
        height: 25px !important;
        width: auto !important;
    }

    .logo-img {
        height: 35px !important;
        margin-right: 10px !important;
    }

    .nav-inner {
        padding: 0 !important;
        width: 100% !important;
    }

    .desktop-nav {
        gap: 15px !important;
    }

    .search-box-header {
        width: 180px !important;
        /* Ancho fijo para evitar saltos */
    }

    .search-box-header input {
        width: 100% !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    /* Footer Tablet */
    .footer-design5,
    .footer-productos-page,
    footer {
        flex-direction: column !important;
        gap: 40px !important;
        padding: 50px 20px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-top-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .footer-link-large {
        font-size: 1.1rem !important;
    }

    .footer-bottom-row,
    .footer-container {
        flex-direction: column !important;
        gap: 35px !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .footer-bottom-left,
    .footer-bottom-row .footer-bottom-center,
    .footer-bottom-right,
    .footer-logo,
    .footer-nav-links,
    .footer-copy {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        position: static !important;
        text-align: center !important;
    }

    .footer-logo-large {
        justify-content: center !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .footer-logo-large span {
        margin-left: 10px !important;
        /* Corregido: margen positivo para separar logo de texto */
        font-size: 2.2rem !important;
    }

    .footer-logo-large img {
        height: 80px !important;
    }

    .footer-nav-links {
        flex-direction: row !important;
        gap: 20px !important;
        margin-top: 10px !important;
    }

    .contact-mini-info {
        height: auto !important;
        padding: 10px 15px !important;
    }

    .social-buttons-row {
        justify-content: center !important;
        margin-bottom: 15px !important;
    }

    .footer-bottom-center {
        flex-direction: row !important;
        gap: 20px !important;
    }

    .footer-bottom-left {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 30px !important;
        align-items: center !important;
    }

    .footer-bottom-center {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
        gap: 40px !important;
    }

    .footer-bottom-center a {
        font-size: 1rem !important;
    }

    .footer-bottom-right {
        position: static !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
    }

    /* Especial para el borde largo de Corte y Doblado en Tablet */
    .product-section-page:nth-of-type(4).border-vl::after {
        height: calc(100% - (var(--border-offset) * 2)) !important;
    }

    /* ============================================
       CONTENT PAGES (Nosotros, Historia, etc.) - TABLET
       ============================================ */
    .content-page {
        padding-top: 70px !important;
    }

    .hero-content {
        height: 300px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding-bottom: 40px !important;
    }

    .hero-content h1 {
        font-size: 2.2rem !important;
        padding: 0 20px !important;
    }

    .content-section {
        padding: 60px var(--site-padding) !important;
    }

    .text-content {
        max-width: 100% !important;
    }

    .values-grid,
    .download-section {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 20px !important;
    }

    .download-card {
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        padding: 25px !important;
        border-radius: 12px !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }

    .download-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        color: #1a1a1a !important;
    }

    /* Quiénes Somos Tablet */
    .mvvp-section .container {
        padding: 60px var(--site-padding) !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .grid-mvvp {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        transform: none !important;
        margin-left: 0 !important;
        justify-content: center !important;
        margin-bottom: 25px !important;
    }

    /* Recuadro de Descripción (Misión, Visión, etc.) */
    .mvvp-descriptions .description-box {
        background: rgba(26, 26, 26, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        padding: 35px !important;
        margin-top: 20px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
        color: #f5f5f5 !important;
        /* Blanco Humo para el contenido general */
        opacity: 0 !important;
        display: none !important;
    }

    .mvvp-descriptions .description-box h3 {
        color: #f5f5f5 !important;
        /* Blanco Humo para el título */
        margin-bottom: 20px !important;
    }

    .mvvp-descriptions .description-box.active {
        opacity: 1 !important;
        display: block !important;
    }

    /* Recuadro de Mensaje (Cita inferior) */
    .message-box {
        background: rgba(26, 26, 26, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 12px !important;
        margin: 80px auto 0 !important;
        width: 100% !important;
        max-width: 700px !important;
        position: relative !important;
        padding: 25px 35px !important;
        text-align: center !important;
        z-index: 10 !important;
    }

    .message-box::before {
        display: none !important;
    }

    /* Asumo que se refiere al texto principal por coherencia */
    .message-box p,
    .message-box h3 {
        color: #f5f5f5 !important;
        /* Blanco Humo */
        font-style: italic !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
    }

    .hero-video-section {
        height: 450px !important;
    }

    .intro-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-top: 30px !important;
    }

    .company-card {
        margin: 0 auto !important;
        padding: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .company-card:first-child,
    .company-card:last-child {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .company-intro-section {
        min-height: auto !important;
        padding: 60px var(--site-padding) !important;
    }

    .ethics-header {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .ethics-quote {
        width: 100% !important;
        margin: 0 !important;
        padding: 40px !important;
        min-height: auto !important;
        order: 2 !important;
    }

    .ethics-quote::before {
        display: none !important;
    }

    .ethics-top-quote {
        margin: 0 0 30px 0 !important;
        transform: none !important;
        max-width: 100% !important;
    }

    .ethics-right-content {
        width: 100% !important;
        order: 1 !important;
    }

    .ethics-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        padding-left: 0 !important;
        justify-content: center !important;
    }

    .split-layout {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .commitment-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .bottom-commitment-box {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 30px !important;
        padding: 20px !important;
    }

    .section-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 92% !important;
        max-width: 380px !important;
        height: auto !important;
        max-height: 85vh !important;
        padding: 45px 25px 30px !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        box-shadow: 0 20px 50px rgba(26, 26, 26, 0.8) !important;
        border: 2px solid #f9751c !important;
        background: rgba(26, 26, 26, 0.98) !important;
        border-radius: 20px !important;
    }

    .modal-close {
        top: 15px !important;
        right: 15px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 18px !important;
    }

    .modal-border {
        display: none !important;
    }

    /* Puntos de Venta Tablet */
    .map-content {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .map-sidebar {
        border-right: none !important;
        border-bottom: 1px solid #e9ecef !important;
        max-height: 400px !important;
    }

    .hero-stats {
        gap: 2rem !important;
    }

    .contact-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ============================================
       NOSOTROS FOLDER - TABLET
       ============================================ */
    .mvvp-section .container {
        padding-left: var(--site-padding) !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .grid-mvvp {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        transform: none !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }

    .card-mvvp-btn,
    .back-to-all-btn {
        width: 100% !important;
        background: rgba(26, 26, 26, 0.8) !important;
        color: white !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        min-height: 55px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
    }

    .section-image {
        margin-left: 0 !important;
        text-align: center !important;
    }

    .section-image img {
        max-width: 100% !important;
    }

    .message-box {
        margin-left: 0 !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }

    .company-intro-section {
        min-height: auto !important;
        background-size: cover !important;
    }

    .intro-grid {
        margin-top: 30px !important;
        gap: 20px !important;
    }

    .company-card:first-child,
    .company-card:last-child {
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        padding: 30px 20px !important;
    }

    .ethics-top-quote {
        margin-left: 0 !important;
        max-width: 100% !important;
        transform: none !important;
    }

    .ethics-quote {
        padding: 40px 20px !important;
        margin-left: 0 !important;
        min-height: auto !important;
    }

    .ethics-quote::before {
        display: none !important;
    }

    .ethics-grid {
        padding-left: 0 !important;
        justify-content: center !important;
    }

    .community-section {
        padding: 60px 0 !important;
    }

    .split-layout.reverse {
        flex-direction: column !important;
    }

    .split-image {
        padding: 0 !important;
        transform: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Eliminar espacio vacío arriba de los botones */
    .split-content {
        display: none !important;
    }

    .image-with-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        gap: 0 !important;
        margin: 0 !important;
        order: 2 !important;
        /* Panel e Imagen van después de botones */
    }

    /* 1. Botones */
    .commitment-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        padding: 0 !important;
        order: 1 !important;
        /* Primero */
    }

    /* 2. Recuadros de Info - ANCHO TOTAL Y ESPACIADO SEGURO */
    .info-panel {
        display: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        /* Reset transform desktop */

        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(26, 26, 26, 0.8) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        padding: 25px !important;

        /* BAJAR MÁS EL RECUADRO: 50px de separación con botones */
        margin: 50px 0 40px 0 !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        order: 1 !important;
        /* Primero dentro de image-with-info */
    }

    .info-panel .panel-close {
        display: none !important;
    }

    .info-panel:not(.hidden) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 3. Imagen */
    .image-with-info img {
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
        margin: 0 !important;
        order: 2 !important;
        /* Segundo dentro de image-with-info */
    }

    /* 4. Recuadro inferior */
    .bottom-commitment-box {
        position: relative !important;
        width: 100% !important;
        margin-top: 15px !important;
        padding: 20px !important;
        background: rgba(26, 26, 26, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 12px !important;
        order: 3 !important;
        /* Tercero dentro de image-with-info */
        text-align: center !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .bottom-commitment-box p {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        color: #f5f5f5 !important;
    }

    .border-container,
    .modal-border {
        display: none !important;
    }

    /* Clientes Page - Tablet */
    .clientes-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .clientes-image img {
        height: 350px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .left-column .text-box {
        position: static !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .text-box.small {
        margin-top: 30px !important;
        width: 100% !important;
        align-self: center !important;
    }

    .mapa-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .mapa-container iframe {
        height: 450px !important;
    }

    .mapa-y-botones {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }

    .botones-filtrado {
        margin: 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Contact Page - Tablet */
    .contact-cover-hero {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .hero-layout-flex {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 100px 30px 50px !important;
        min-height: 100vh !important;
        gap: 30px !important;
    }

    .hero-quote-container {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 700px !important;
    }

    .hero-quote-box {
        max-width: 100% !important;
        width: 100% !important;
        padding: 35px 30px !important;
        margin: 0 !important;
    }

    .hero-quote-box p {
        font-size: 1.15rem !important;
    }

    .contact-bottom-nav {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 700px !important;
        padding: 0 !important;
        gap: 15px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .contact-nav-item {
        width: 100% !important;
        padding: 18px 24px !important;
        min-height: 60px !important;
    }

    .area-interest-buttons {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
    }

    /* Inversores Page - Tablet */
    .inversores-vision,
    .inversores-project {
        height: auto !important;
        min-height: 100vh !important;
        padding: 100px 0 !important;
    }

    .relative-content {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }

    .vision-card,
    .collaboration-card,
    .project-card {
        max-width: 90% !important;
        margin: 0 auto !important;
        position: relative !important;
        float: none !important;
        grid-column: 1 !important;
    }

    .vision-card::before,
    .project-card::before,
    .collaboration-card::before {
        display: none !important;
        /* Quitar líneas decorativas que se rompen */
    }

    .video-container-centered {
        grid-column: 1 !important;
        height: auto !important;
        margin-top: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .inversores-video {
        width: 100% !important;
        max-width: 800px !important;
        height: auto !important;
        max-height: 60vh !important;
    }

    .video-container-centered .navigation-bar-bottom {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        margin-top: 30px !important;
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    :root {
        --site-padding: 20px;
        --border-offset: 15px;
        --border-length: 100px;
    }

    .product-section-page {
        padding: 50px var(--site-padding) !important;
    }

    /* Hero específico para mobile */
    .page-hero {
        height: auto !important;
        min-height: 80vh !important;
        padding: 120px var(--site-padding) 60px !important;
        display: flex !important;
        align-items: flex-end !important;
    }

    .hero-title-quote {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        padding: 60px 20px 20px !important;
    }

    .hero-description-card {
        padding: 40px 20px 60px !important;
        font-size: 0.95rem !important;
    }

    /* ============================================
       UNIVERSAL COMPONENTS - MOBILE
       ============================================ */

    /* Footer Reset Universal */
    .footer-final {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        position: relative !important;
        padding: 40px 20px !important;
        box-sizing: border-box !important;
        height: auto !important;
        display: block !important;
        background: #1a1a1a !important;
    }

    .footer-container {
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .footer-design5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important;
    }

    .footer-top-row,
    .footer-bottom-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        text-align: center !important;
    }

    .footer-bottom-left,
    .footer-bottom-center,
    .footer-bottom-right {
        width: 100% !important;
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        gap: 15px !important;
    }

    /* Corrección Logo Footer */
    .footer-logo-large,
    div.footer-logo-large {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .footer-logo-large img {
        margin-bottom: 0 !important;
        height: 120px !important;
        width: auto !important;
    }

    .footer-logo-large span {
        display: none !important;
    }

    .footer-link-large {
        font-size: 1.1rem !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    .footer-divider {
        width: 100% !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        margin: 10px 0 !important;
    }

    /* Redes Sociales Centradas */
    .social-buttons-row {
        justify-content: center !important;
        gap: 15px !important;
        display: flex !important;
    }

    /* ============================================
       INDEX SPECIFIC - MOBILE
       ============================================ */

    /* Header Index/Global Mobile */
    .header-final {
        padding: 5px 0 !important;
        background: rgba(26, 26, 26, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Ocultar Header de Productos/Contacto Desktop en móvil */
    /* Ocultar Header de Productos/Contacto Desktop en móvil - ELIMINADO para unificación */
    /*
    .header-productos-desktop,
    header.header-productos-desktop {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    */

    .header-container {
        height: 60px !important;
        padding: 0 15px !important;
    }

    /* Unificación GLOBAL para headers en mobile (gap reducido) */
    .logo-final,
    .logo-link-productos,
    .logo-section-inversores {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        /* Force 0 gap */
    }

    .logo-final img,
    .logo-img-productos,
    .logo-section-inversores img {
        height: 35px !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .logo-final span,
    .logo-text-productos,
    .logo-section-inversores span {
        font-size: 1.1rem !important;
        margin-left: -5px !important;
        /* Negative margin to pull text closer */
        line-height: 1 !important;
        padding: 0 !important;
    }

    /* Hero Index Mobile */
    .hero-final {
        height: auto !important;
        min-height: 70vh !important;
        padding: 100px var(--site-padding) 50px !important;
        display: flex !important;
        flex-direction: column !important;
        /* Asegurar dirección columna */
        align-items: center !important;
        justify-content: flex-end !important;
        /* Movido hacia abajo */
        margin-top: 60px !important;
        background-attachment: scroll !important;
    }

    .hero-content-final {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: auto !important;
        padding-bottom: 30px !important;
    }

    .hero-content-final h1 {
        font-size: 1.8rem !important;
        padding: 30px 20px !important;
        border-radius: 12px !important;
        max-width: 90% !important;
        line-height: 1.3 !important;
        border-left: none !important;
        border-bottom: none !important;
        background: rgba(26, 26, 26, 0.7) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 10px 25px rgba(26, 26, 26, 0.4) !important;
    }

    /* Corte y Doblado Mobile */
    .video-box-doblado {
        width: 100% !important;
        height: 350px !important;
        margin-bottom: 120px !important;
        position: relative !important;
        order: 1 !important;
        background: #000 !important;
        border-radius: 15px !important;
        overflow: visible !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .video-container-bg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 15px !important;
        z-index: 1 !important;
    }

    .video-overlay-dark {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(26, 26, 26, 0.3) !important;
        z-index: 2 !important;
        border-radius: 15px !important;
    }

    .text-floating-glass {
        position: absolute !important;
        bottom: -100px !important;
        left: 20px !important;
        right: 20px !important;
        margin: 0 !important;
        width: auto !important;
        order: 2 !important;
        background: rgba(26, 26, 26, 0.8) !important;
        z-index: 10 !important;
        padding: 25px !important;
        border-radius: 12px !important;
        top: auto !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 30px rgba(26, 26, 26, 0.4) !important;
        color: white !important;
        font-size: 0.95rem !important;
        /* Aumentado ligeramente para legibilidad */
        line-height: 1.6 !important;
        /* Mejorado el interlineado */
    }

    .buttons-vertical-stack {
        order: 3 !important;
        margin-top: 60px !important;
        /* Aumentado para dar aire después del texto flotante */
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .buttons-vertical-stack .grey-button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.85rem !important;
    }

    .btn-catalogo-float {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 20px !important;
        text-align: center !important;
        padding: 16px !important;
        display: block !important;
    }

    /* Reset de bordes específicos para mobile en Corte y Doblado */
    .product-section-page:nth-of-type(4).border-vl::before {
        display: none !important;
    }

    .product-section-page:nth-of-type(4).border-vl::after {
        height: 150px !important;
        top: var(--border-offset) !important;
        left: var(--border-offset) !important;
    }

    .industries-container {
        padding: 0 var(--site-padding) !important;
    }

    .industry-buttons {
        gap: 10px !important;
        margin-bottom: 40px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .industry-btn {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        min-width: 110px !important;
        flex: 1 1 30% !important;
    }

    .industries-images {
        height: auto !important;
        min-height: 250px !important;
        width: 100% !important;
        position: relative !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 25px !important;
        /* Espaciado positivo limpio */
        order: 2 !important;
        z-index: 1 !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .industry-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 280px !important;
        /* Altura fija para el área de imagen mobile */
        border-radius: 12px !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .industry-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Barra de Estadísticas - Mobile 2x3 */
    .stats-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 280px !important;
        /* Espacio reservado para la imagen absoluta */
        margin-bottom: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 20px !important;
        background: rgba(26, 26, 26, 0.75) !important;
        /* Un poco más oscuro para separar */
        border-radius: 12px !important;
        z-index: 10 !important;
        order: unset !important;
        /* El margen controla la posición visual */
        backdrop-filter: blur(12px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    .stat-item {
        flex: none !important;
        width: 100% !important;
        padding: 12px 5px !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .stat-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .stat-item:last-child {
        grid-column: span 2 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 8px !important;
        padding-top: 18px !important;
        border-bottom: none !important;
    }

    .stat-number {
        font-size: 1.6rem !important;
        color: #f9751c !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .industries-descriptions {
        order: 1 !important;
        position: relative !important;
        z-index: 2 !important;
        padding: 0 !important;
        margin-bottom: 25px !important;
        /* Separación de la imagen */
    }

    .description-box {
        padding: 20px 15px !important;
        border-radius: 12px !important;
        background: rgba(26, 26, 26, 0.6) !important;
        /* Más sutil */
        border-left: 3px solid #f9751c !important;
        box-shadow: none !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        margin-bottom: 20px !important;
    }

    .description-box p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #f7f6f2 !important;
    }

    /* Values Mobile */
    .values-section {
        padding: 60px 0 !important;
    }

    .values-content-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Romper la columna izquierda para ordenar sus hijos independientemente */
    .values-left-col {
        display: contents !important;
    }

    .values-title-box {
        order: 1 !important;
        margin-bottom: 10px !important;
        /* Reducido de 25px */
        padding: 20px !important;
        border-radius: 12px !important;
        background: rgba(26, 26, 26, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        border-left: 4px solid #f9751c !important;
    }

    .values-center-col {
        order: 2 !important;
        height: auto !important;
        min-height: auto !important;
        /* Quitar altura forzada */
        margin-bottom: 15px !important;
        /* Reducido de 25px */
        width: 100% !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        transform: none !important;
    }

    .values-center-col img {
        width: 100% !important;
        height: auto !important;
        max-height: 350px !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        /* Más redondeado */
    }

    /* Style included in previous block */

    .values-title-box h2 {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    .subtitle-comunidad {
        font-size: 0.9rem !important;
    }

    .values-intro-box {
        order: 4 !important;
        padding: 20px !important;
        border-radius: 12px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin: 25px 0 0 0 !important;
    }

    /* Botón de Contacto al final */
    .values-btn-container {
        order: 5 !important;
        width: 100% !important;
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
        /* Alinear a la derecha como en desktop o center si prefieres */
    }

    .values-right-col {
        order: 3 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .values-intro {
        font-size: 0.95rem !important;
        color: #fff !important;
        line-height: 1.5 !important;
    }

    .values-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 20px !important;
        width: 100% !important;
        padding: 0 10px !important;
        /* Evitar que toquen los bordes */
    }

    .value-card {
        width: 100% !important;
        margin: 0 !important;
        /* Reset márgenes raros */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Alinear contenido a la izquierda */
        gap: 15px !important;
    }

    .value-card {
        padding: 15px 20px !important;
        border-radius: 10px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 10px rgba(26, 26, 26, 0.02) !important;
    }

    .value-card h3 {
        font-size: 0.95rem !important;
        color: #fff !important;
    }

    /* News Mobile */
    .news-section {
        padding: 60px 0 !important;
    }

    .news-left-box {
        padding: 25px 20px !important;
        border-radius: 12px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-left: 4px solid #f9751c !important;
    }

    .news-left-box h2 {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }

    .news-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .news-video-placeholder {
        height: 250px !important;
        border-radius: 12px !important;
        margin-top: 20px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .news-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .news-right-box-full {
        padding: 25px 20px !important;
        border-radius: 12px !important;
        background: rgba(26, 26, 26, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 30px !important;
    }

    .news-text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #f5f5f5 !important;
    }

    .partners-grid-buttons {
        gap: 10px !important;
        margin-top: 25px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .partner-btn {
        padding: 10px 15px !important;
        font-size: 0.8rem !important;
        min-width: 120px !important;
        flex: 1 1 40% !important;
    }

    /* Clientes Page - Mobile */
    .back-button {
        position: relative !important;
        margin-bottom: 20px !important;
        padding: 12px 20px !important;
        min-width: 50px !important;
        min-height: 44px !important;
    }

    .clientes-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .clientes-image {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .clientes-image img {
        width: 100% !important;
        height: auto !important;
        /* Permitir altura natural o fija según diseño */
        min-height: 250px !important;
        max-height: 400px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        display: block !important;
    }

    .left-column .text-box {
        width: 100% !important;
        top: 0 !important;
        margin-top: -30px !important;
        padding: 25px !important;
        background: rgba(26, 26, 26, 0.8) !important;
    }

    .text-box.small {
        width: 100% !important;
        margin-top: 30px !important;
        align-self: center !important;
    }

    .text-box.vertical {
        display: none !important;
        /* Demasiado grande para mobile */
    }

    .mapa-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .mapa-y-botones {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .botones-filtrado {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    .btn-filtro {
        flex: 1 1 45% !important;
        min-height: 50px !important;
        font-size: 0.9rem !important;
    }

    .mapa-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .mapa-container iframe {
        height: 400px !important;
    }

    .info-panels-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10000 !important;
        pointer-events: none !important;
    }

    .info-panel {
        pointer-events: auto !important;
    }

    /* ============================================
       CONTACTO MÓVIL - SOLO CORRECCIÓN DE LAYOUT
       Mantiene los mismos estilos visuales del desktop
       ============================================ */

    /* ===== RESETEO DE POSICIONAMIENTO ABSOLUTE ===== */
    .hero-quote-container {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 20px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .contact-bottom-nav {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 20px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* ===== HEADER MÓVIL SIMPLIFICADO LINK LOGO ===== */
    .contact-page .simple-header {
        height: 70px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
    }

    .header-container-mobile {
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        width: 100% !important;
    }

    .mobile-logo-link {
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        transition: transform 0.2s ease !important;
        cursor: pointer !important;
    }

    .mobile-logo-link:active {
        transform: scale(0.96) !important;
        opacity: 0.8 !important;
    }

    .mobile-logo-section {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .mobile-logo-img {
        height: 35px !important;
        width: auto !important;
        margin: 0 !important;
    }

    .mobile-logo-text {
        font-family: 'Neo Sans', 'Arial', sans-serif !important;
        font-weight: 500 !important;
        font-size: 1.1rem !important;
        color: #fff !important;
        margin-left: -5px !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    /* FIX CRITICO: Overlay Menu Móvil */
    .mobile-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.98) !important;
        /* Muy oscuro para tapar todo */
        z-index: 99999 !important;
        /* Encima de todo */
        display: none !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .mobile-nav-overlay.active {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-nav-content {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }

    .mobile-nav-close {
        position: absolute !important;
        top: 30px !important;
        right: 30px !important;
        background: none !important;
        border: none !important;
        color: #f9751c !important;
        /* Color destacado para cerrar */
        font-size: 2.5rem !important;
        cursor: pointer !important;
        z-index: 100000 !important;
        padding: 10px !important;
    }

    .mobile-nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .mobile-link {
        color: white !important;
        font-size: 1.5rem !important;
        text-decoration: none !important;
        font-family: 'Neo Sans', sans-serif !important;
        display: block !important;
        padding: 10px !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        z-index: 1100 !important;
        /* Asegurar que sea clickable */
        cursor: pointer !important;
    }

    .mobile-logo-img {
        height: 38px !important;
        /* Ajuste para matching visual */
        width: auto !important;
        filter: drop-shadow(0 2px 4px rgba(26, 26, 26, 0.5)) !important;
    }

    .mobile-logo-text {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        margin-left: 10px !important;
        text-shadow: 0 2px 4px rgba(26, 26, 26, 0.5) !important;
    }

    /* Ocultar header desktop - ELIMINADO para unificación */
    /*
    .header-productos-desktop {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
    }
    */

    /* ===== SOLUCIÓN DEFINITIVA ESPACIO NEGRO ===== */
    /* 1. Ponemos la imagen en el body SOLO en página de contacto */
    body.contact-page {
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url('../Images/contacto/img-contacto.png') no-repeat top center / cover !important;
        background-attachment: scroll !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Hacemos transparentes los contenedores internos - SOLO CONTACTO */
    .contact-page .contact-cover-main,
    .contact-page main.contact-cover-main {
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .contact-page .contact-cover-hero {
        background: transparent !important;
        /* Quitamos el fondo de aquí porque ya está en body */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. Ajustamos el contenido para que flote correctamente */
    /* 3. Ajustamos el contenido para que flote correctamente */
    .contact-page .hero-layout-flex {
        padding: 100px 20px 40px !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 25px !important;
    }

    /* ===== QUOTE BOX - MISMOS ESTILOS DEL DESKTOP ===== */
    .hero-quote-box {
        background: rgba(40, 40, 40, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        padding: 35px 25px !important;
        border-radius: 20px !important;
        max-width: 90% !important;
        width: auto !important;
        box-shadow: 0 10px 30px rgba(26, 26, 26, 0.4) !important;
    }

    .hero-quote-box p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        margin: 0 !important;
        font-weight: 500 !important;
        font-style: normal !important;
    }

    /* ===== BOTONES DE CONTACTO - MISMOS ESTILOS DEL DESKTOP ===== */
    .contact-bottom-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .contact-nav-item {
        background: rgba(26, 26, 26, 0.85) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border-left: 3px solid transparent !important;
        padding: 12px 25px !important;
        border-radius: 8px !important;
        text-align: center !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: auto !important;
        width: 100% !important;
    }

    .contact-nav-item:active {
        background: rgba(26, 26, 26, 0.95) !important;
        transform: scale(0.98) !important;
        box-shadow: 0 5px 15px rgba(26, 26, 26, 0.3) !important;
    }

    .nav-label {
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* ===== ÁREA DE INTERÉS - DROPDOWN EN MÓVIL ===== */
    .contact-nav-item.area-interest-toggle {
        position: relative !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .area-interest-buttons {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        display: none !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .area-interest-buttons:not(.hidden) {
        display: flex !important;
    }

    .area-btn {
        background: rgba(26, 26, 26, 0.85) !important;
        color: white !important;
        border: none !important;
        padding: 12px 25px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        text-align: center !important;
    }

    .area-btn:active {
        background: rgba(26, 26, 26, 0.95) !important;
        transform: scale(0.98) !important;
    }

    /* Inversores Page - Mobile Refinement */
    .header-inversores {
        height: 60px !important;
        background: #1a1a1a !important;
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        max-width: 100% !important;
    }

    .header-content-inversores {
        display: flex !important;
        flex-direction: row !important;
        /* CRÍTICO: Forzar fila horizontal */
        justify-content: space-between !important;
        /* Separar extremos */
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        height: auto !important;
        /* Altura flexible */
        min-height: 60px !important;
        gap: 0 !important;
        /* Sin gap central */
    }

    .logo-section-inversores {
        gap: 8px !important;
        flex-shrink: 1 !important;
        /* Permitir encoger si es necesario */
        min-width: 0 !important;
        /* Permitir flex shrink real */
        display: flex !important;
        /* Asegurar Flex */
        align-items: center !important;
        /* Centrado Vertical */
        justify-content: flex-start !important;
        height: 100% !important;
    }

    .logo-section-inversores span {
        font-size: 1.25rem !important;
        /* Más grande */
        font-weight: 700 !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        /* Ajuste linea */
        padding-top: 2px !important;
        /* Ajuste visual optico */
    }

    .logo-section-inversores img {
        height: 40px !important;
        /* Más grande */
        width: auto !important;
        display: block !important;
    }

    /* Ocultar SOLO el texto de bienvenida */
    .user-info-inversores {
        display: none !important;
    }

    /* Restaurar visualización de sección de botones, optimizada al máximo */
    .user-section-inversores {
        display: flex !important;
        flex-direction: row-reverse !important;
        /* INVERTIR ORDEN DE BOTONES */
        gap: 10px !important;
        flex-shrink: 0 !important;
        /* No encoger botones */
        align-items: center !important;
        /* Centrado Vertical */
        justify-content: flex-end !important;
        height: 100% !important;
    }

    .logout-btn-inversores {
        padding: 4px 8px !important;
        /* Padding mínimo */
        font-size: 0.7rem !important;
        /* Fuente pequeña */
        white-space: nowrap !important;
        height: 28px !important;
        /* Altura controlada */
        line-height: 1 !important;
        display: flex;
        align-items: center !important;
        border-radius: 4px !important;
    }

    /* Corrección Logo Footer - ALTA ESPECIFICIDAD */
    .footer-logo-large,
    div.footer-logo-large {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .footer-logo-large img {
        margin-bottom: 5px !important;
        height: 60px !important;
        /* Logo visible */
        width: auto !important;
    }

    /* Selector encadenado para vencer cualquier otro estilo */
    .footer-final .footer-bottom-row .footer-bottom-right .footer-logo-large span,
    .footer-logo-large span {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        font-size: 2rem !important;
        /* Tamaño legible */
    }

    .footer-container {
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .footer-design5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        /* Más espacio vertical */
        width: 100% !important;
    }

    .footer-top-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    /* Enlaces Footer */
    .footer-link-large {
        font-size: 1.1rem !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    .footer-portal-link {
        width: 100% !important;
        text-align: center !important;
    }

    .whatsapp-circle-btn {
        margin-top: 10px !important;
    }

    /* Línea divisoria visbible */
    .footer-divider {
        width: 100% !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        margin: 10px 0 !important;
    }

    .footer-bottom-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        width: 100% !important;
    }

    .footer-bottom-left,
    .footer-bottom-center,
    .footer-bottom-right {
        width: 100% !important;
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .social-buttons-row {
        justify-content: center !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }

    .contact-mini-info p {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Secciones Principales */
    .inversores-vision,
    .inversores-project {
        height: auto !important;
        min-height: auto !important;
        padding: 80px 0 60px !important;
        display: block !important;
        background-attachment: scroll !important;
        background-position: center !important;
        background-size: cover !important;
    }

    .relative-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 20px !important;
        width: 100% !important;
    }

    /* Cards - Reset total para mobile */
    .vision-card,
    .collaboration-card,
    .project-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 25px !important;
        box-sizing: border-box !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        float: none !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* Eliminar decoraciones complejas que rompen el mobile */
    .vision-card::before,
    .vision-card::after,
    .project-card::before,
    .project-card::after,
    .collaboration-card::before,
    .collaboration-card::after {
        display: none !important;
    }

    .vision-card blockquote,
    .project-card blockquote {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        text-align: left !important;
    }

    .collaboration-card p {
        font-size: 1rem !important;
        color: #ddd !important;
    }

    /* Video Section Mobile */
    .video-container-centered {
        width: 100% !important;
        padding: 0 !important;
        margin-top: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .inversores-video {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .video-container-centered .navigation-bar-bottom {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 20px !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .nav-item {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 5px !important;
        font-size: 0.8rem !important;
        box-sizing: border-box !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
        color: white !important;
        text-decoration: none !important;
    }

    .nav-item.active,
    .nav-item:active {
        background: rgba(26, 26, 26, 0.6) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    /* Contacto Inversor Page - Mobile Specifics */
    .page-title {
        padding: 50px 20px 20px !important;
        margin-bottom: 20px !important;
    }

    .page-title h1 {
        font-size: 1.8rem !important;
    }

    .page-title p {
        font-size: 0.95rem !important;
        padding: 0 10px !important;
    }

    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 20px 40px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .contact-form {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .contact-form iframe {
        height: 800px !important;
        /* Altura suficiente para el form */
        border-radius: 8px !important;
    }

    .contact-info {
        width: 100% !important;
        padding: 25px !important;
        height: auto !important;
        overflow: visible !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
        margin-top: 0 !important;
    }

    .info-item h3 {
        font-size: 1.1rem !important;
    }

    .mobile-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(26, 26, 26, 0.98) !important;
        /* Estilo Acser */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        display: none;
        /* Por defecto oculto, JS lo activa con .active */
    }

    .mobile-nav-overlay.active {
        display: block !important;
    }

    .mobile-nav-content {
        width: 100% !important;
        height: 100% !important;
        padding: 60px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* Centrado vertical real */
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .mobile-link {
        font-size: 1.3rem !important;
        /* Ajuste fino: ni muy grande ni muy chico, legible */
        padding: 15px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Línea un poco más visible */
        font-weight: 400 !important;
        /* Peso regular para legibilidad */
        text-align: left !important;
        /* Alineación a la izquierda para mayor orden según screenshot */
        color: #fff !important;
        width: 85% !important;
        /* Que coincida con el ancho del buscador */
        display: block !important;
    }

    /* Estilo para los botones de cierre (X) en overlays - Perfeccionado */
    .mobile-nav-close,
    .nav-panel-close,
    .close-panel,
    .modal-close,
    .panel-close {
        position: fixed !important;
        top: 25px !important;
        right: 25px !important;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        z-index: 20001 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 4px 15px rgba(26, 26, 26, 0.4) !important;
    }

    .mobile-nav-close:hover,
    .nav-panel-close:hover,
    .close-panel:hover,
    .modal-close:hover,
    .panel-close:hover {
        transform: scale(1.05) !important;
        background: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
    }

    .mobile-nav-close:active,
    .nav-panel-close:active,
    .close-panel:active,
    .modal-close:active,
    .panel-close:active {
        transform: scale(0.95) !important;
    }

    /* Asegurar que el contenedor tenga posición relativa */
    .nav-panel-content,
    .mobile-nav-content {
        position: relative !important;
    }

    .mobile-nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        /* Espacio más equilibrado */
        width: 100% !important;
    }

    .mobile-link {
        font-size: 1.4rem !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        display: block !important;
        text-align: left !important;
        /* Alineado a la izquierda para un look de sidebar más natural */
        transition: all 0.2s ease !important;
        font-weight: 500 !important;
    }

    .mobile-link:active {
        color: #f7f6f2 !important;
        padding-left: 10px !important;
        /* Pequeño efecto de desplazamiento al tocar */
    }

    .mobile-link:hover {
        color: #f7f6f2 !important;
    }

    .mobile-search {
        margin: 0 0 25px 0 !important;
        /* Margen limpio sin top exagerado */
        width: 85% !important;
        /* Ancho controlado */
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        /* Bordes un poco menos redondeados, más técnicos */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        padding: 5px 15px !important;
        transition: all 0.3s ease !important;
    }

    .mobile-search:focus-within {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.12) !important;
    }

    .mobile-search input {
        flex: 1 !important;
        background: none !important;
        border: none !important;
        padding: 8px 0 !important;
        font-size: 0.9rem !important;
        /* Fuente más fina para el input */
        color: #fff !important;
        outline: none !important;
        font-family: 'Open Sans', sans-serif !important;
    }

    .mobile-search button {
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        /* Icono blanco */
    }

    .mobile-search button i {
        font-size: 1rem !important;
    }

    .mobile-search input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .mobile-search button {
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        padding: 0 15px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-search {
        margin: 0 0 30px 0 !important;
        /* Reducir margen */
        width: 85% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-search input {
        font-size: 0.95rem !important;
        /* Input más discreto */
        padding: 10px 0 !important;
    }

    /* Nav Panel Empresarial Mobile */
    .nav-panel-overlay {
        z-index: 9999 !important;
    }

    .nav-panel-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateY(-100%) !important;
        z-index: 10000 !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #121212 !important;
    }

    .nav-panel-overlay.active .nav-panel-content {
        transform: translateY(0) !important;
    }

    .nav-panel-header {
        padding: 75px 25px 20px !important;
    }

    .mobile-nav-close:active,
    .nav-panel-close:active {
        transform: scale(0.92) !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
    }

    .nav-panel-body {
        flex-direction: column !important;
        overflow-y: auto !important;
        height: calc(100vh - 130px) !important;
        flex: 1 !important;
    }

    .nav-panel-main {
        display: none !important;
        /* Ocultamos el main panel en mobile para usar solo lista simple */
    }

    .nav-panel-sidebar {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        background: transparent !important;
        overflow-y: auto !important;
    }

    .nav-sidebar-item {
        width: 100% !important;
        padding: 20px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-size: 1.2rem !important;
        color: #fff !important;
        text-align: left !important;
        background: transparent !important;
    }

    .nav-sidebar-item:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .nav-panel-body::after {
        display: none !important;
        /* Quitar marca de agua en mobile para limpiar vista */
    }

    .product-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Footer Mobile - Estilo Premium Centrado */
    .footer-final,
    .footer-productos-page,
    footer {
        padding: 40px 0 !important;
        text-align: center !important;
    }

    .footer-design5 {
        flex-direction: column !important;
        gap: 35px !important;
        padding: 0 20px !important;
        align-items: center !important;
    }

    .footer-top-row {
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .footer-link-large {
        font-size: 1.2rem !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .footer-portal-link {
        width: 100% !important;
    }

    .footer-divider {
        margin: 10px 0 !important;
        width: 80% !important;
        opacity: 0.3 !important;
    }

    .footer-bottom-row,
    .footer-container {
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-bottom-left,
    .footer-bottom-row .footer-bottom-center,
    .footer-bottom-right,
    .footer-logo,
    .footer-nav-links,
    .footer-copy {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        position: static !important;
        text-align: center !important;
    }

    .footer-logo-large span {
        margin-left: 8px !important;
        font-size: 1.5rem !important;
    }

    .social-buttons-row {
        justify-content: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        display: flex !important;
    }

    .contact-mini-info {
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .footer-logo-large {
        justify-content: center !important;
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    .footer-logo-large img {
        height: 60px !important;
    }

    .footer-nav-links {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .footer-bottom-center {
        gap: 15px !important;
    }

    .footer-bottom-left,
    .footer-bottom-center,
    .footer-bottom-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        position: static !important;
    }

    .social-buttons-row {
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .social-rect-btn {
        width: 45px !important;
        height: 45px !important;
    }

    .contact-mini-info {
        text-align: center !important;
        gap: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .footer-bottom-center {
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .footer-bottom-center a {
        font-size: 0.95rem !important;
        color: #ccc !important;
        text-decoration: none !important;
        padding: 8px 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        width: 80% !important;
        max-width: 300px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    .footer-bottom-center a:active {
        background: rgba(249, 117, 28, 0.2) !important;
        border-color: #f9751c !important;
        color: #f9751c !important;
    }

    .footer-logo-large {
        display: flex !important;
        flex-direction: column !important;
        /* Cambiado a columna para mejor balance en pantallas pequeñas */
        align-items: center !important;
        justify-content: center !important;
        margin: 30px 0 !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .footer-logo-large img {
        height: 70px !important;
        /* Un poco más grande */
        width: auto !important;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1)) !important;
    }

    .footer-logo-large span {
        font-family: 'Neo Sans', 'Arial', sans-serif !important;
        font-weight: 600 !important;
        font-size: 26px !important;
        /* Más grande y legible */
        margin-left: 0 !important;
        /* Reset margin since it's now column */
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: #fff !important;
        text-shadow: 0 2px 4px rgba(26, 26, 26, 0.3) !important;
    }

    /* Barra de Estadísticas - Ajuste de 5 elementos */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stats-bar .stat-item:last-child {
        grid-column: span 2 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 10px !important;
    }

    /* Grid de botones en mobile */
    .grid-buttons {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .grey-button {
        width: 100% !important;
        padding: 14px !important;
    }

    /* Ajuste de imágenes full-width */
    .img-box.full-width img {
        height: 250px !important;
    }

    /* Corte y Doblado Mobile - Perfeccionado */
    .video-box-doblado {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 50px !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        border-radius: 15px !important;
        overflow: visible !important;
        order: 1 !important;
    }

    .video-container-bg {
        position: relative !important;
        height: 250px !important;
        width: 100% !important;
        border-radius: 15px !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }

    .text-floating-glass {
        position: relative !important;
        top: -40px !important;
        /* Superposición elegante */
        left: 0 !important;
        right: 0 !important;
        margin: 0 10px !important;
        padding: 25px !important;
        width: auto !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 30px rgba(26, 26, 26, 0.5) !important;
        z-index: 10 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #fff !important;
        bottom: auto !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .buttons-vertical-stack {
        gap: 12px !important;
        order: 3 !important;
        margin-top: 10px !important;
        padding: 0 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .buttons-vertical-stack .grey-button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 0.9rem !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 10px !important;
    }

    .btn-catalogo-float {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        display: block !important;
        width: 100% !important;
        margin-top: 25px !important;
        text-align: center !important;
        padding: 18px !important;
        background: rgba(26, 26, 26, 0.75) !important;
        color: white !important;
        border-radius: 12px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }

    /* Ajuste de los bordes para Corte y Doblado en Mobile */
    .product-section-page:nth-of-type(4).border-vl::before {
        width: auto !important;
        right: var(--border-offset) !important;
        left: var(--border-offset) !important;
        bottom: var(--border-offset) !important;
        display: block !important;
    }

    .product-section-page:nth-of-type(4).border-vl::after {
        height: calc(100% - (var(--border-offset) * 2)) !important;
        left: var(--border-offset) !important;
        top: var(--border-offset) !important;
        display: block !important;
    }

    .box-productos-linea.small {
        height: 60px !important;
        font-size: 0.8rem !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

    /* Etiquetas de imágenes más discretas en mobile */
    .label-box {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    /* Botones de catálogo en mobile - No absolutos para evitar solapamiento */
    .btn-catalogo-float {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        display: block !important;
        width: 100% !important;
        margin-top: 30px !important;
        text-align: center !important;
    }

    .zigzag-flow {
        gap: 40px !important;
    }

    /* ============================================
       CONTENT PAGES (Nosotros, Historia, etc.) - MOBILE
       ============================================ */
    .hero-content {
        height: 200px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding-bottom: 30px !important;
    }

    .hero-content h1 {
        font-size: 1.8rem !important;
    }

    .content-section {
        padding: 40px var(--site-padding) !important;
    }

    .text-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    blockquote {
        padding: 20px !important;
        font-size: 1.1rem !important;
        margin: 30px 0 !important;
    }

    .values-grid,
    .download-section {
        grid-template-columns: 1fr !important;
    }

    /* Quiénes Somos Mobile - MVVVP y Modales */
    .mvvp-section .container {
        padding: 0 var(--site-padding) !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .grid-mvvp {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        transform: none !important;
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .card-mvvp-btn,
    .back-to-all-btn {
        width: 100% !important;
        min-height: 55px !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        color: white !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
    }

    .card-mvvp-btn h3,
    .back-to-all-btn {
        font-size: 0.95rem !important;
        margin: 0 !important;
    }

    .section-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 92% !important;
        max-width: 420px !important;
        height: auto !important;
        max-height: 85vh !important;
        padding: 55px 25px 35px !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        box-shadow: 0 25px 60px rgba(26, 26, 26, 0.8) !important;
        border: 2px solid #f9751c !important;
        background: rgba(26, 26, 26, 0.98) !important;
        border-radius: 20px !important;
    }

    .section-modal h3 {
        font-size: 1.5rem !important;
        color: #f9751c !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
    }

    .section-modal p {
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.95) !important;
        margin: 0 !important;
    }

    /* Community Section Mobile */
    .community-section {
        padding: 40px 0 !important;
        position: relative !important;
        background: #f5f5f5 !important;
    }

    .split-layout.reverse {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .split-content {
        order: 1 !important;
        /* Primero el contenido si hubiera */
        display: none !important;
        /* Ocultar si está vacío */
    }

    .split-image {
        order: 2 !important;
        padding: 0 5px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .image-with-info {
        position: relative !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .image-with-info img {
        width: 100% !important;
        height: 250px !important;
        /* Altura controlada */
        object-fit: cover !important;
        border-radius: 12px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    }

    .commitment-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 5px !important;
    }

    .commitment-btn {
        width: 100% !important;
        white-space: normal !important;
        font-size: 0.85rem !important;
        padding: 12px 10px !important;
        min-height: 75px !important;
        line-height: 1.3 !important;
        background: rgba(26, 26, 26, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        border-radius: 12px !important;
        font-family: 'Inter', sans-serif !important;
        transition: all 0.3s ease !important;
    }

    .commitment-btn:active {
        background: #f9751c !important;
        border-color: #f9751c !important;
        transform: scale(0.98) !important;
    }

    /* Paneles de Información Integrados: Debajo de la imagen */
    .info-panel {
        position: relative !important;
        /* Flujo normal, no overlay */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        /* Altura automática según contenido */
        max-width: none !important;
        max-height: none !important;
        margin-top: 15px !important;
        /* Separación de arriba */
        transform: none !important;
        background: rgba(26, 26, 26, 0.8) !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 25px 20px !important;
        display: none !important;
        /* Controlado con display en :not(.hidden) */
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 1 !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease !important;
    }

    .info-panel:not(.hidden) {
        display: flex !important;
        /* Flex cuando visible */
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Fin de estilos Info Panel */

    .bottom-commitment-box {
        order: 3 !important;
        /* Forzar al final */
        margin-top: 15px !important;
        width: 100% !important;
        padding: 15px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border-left: 3px solid #f9751c !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Ocultar botón cerrar en móvil */
@media (max-width: 768px) {

    .panel-close,
    .modal-close {
        display: none !important;
    }

    .image-with-info {
        display: flex !important;
        flex-direction: column !important;
    }

    .image-with-info img {
        order: 1 !important;
    }

    .info-panel {
        order: 2 !important;
        /* Panel debajo de la imagen por defecto en mobile? No, el usuario quiere botones > panel > imagen */
        position: relative !important;
        top: auto !important;
        transform: none !important;
        margin: 30px 0 !important;
    }

    /* Asegurar orden en mobile también */
    .image-with-info {
        display: flex !important;
        flex-direction: column !important;
    }

    .image-with-info .info-panel {
        order: 1 !important;
        /* Panel antes que imagen */
    }

    .image-with-info img {
        order: 2 !important;
        /* Imagen después que panel */
    }




    .bottom-commitment-box {
        margin-top: 15px !important;
        width: 100% !important;
        padding: 15px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        border-left: 3px solid #f9751c !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .bottom-commitment-box p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        font-style: italic !important;
        color: #fff !important;
    }


    .pdf-modal {
        padding: 15px !important;
        width: 95% !important;
        max-width: 1000px !important;
    }

    .pdf-container {
        height: 60vh !important;
        min-height: 400px !important;
    }

    /* Ajuste del Panel de Navegación para Mobile */
    .nav-panel-body {
        flex-direction: column !important;
    }

    .nav-panel-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px !important;
    }

    .nav-sidebar-item {
        padding: 10px 12px !important;
        border-left: none !important;
        border-bottom: none !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .nav-sidebar-item.active {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: #adadac !important;
    }

    .nav-panel-main {
        width: 100% !important;
        transform: none !important;
        padding: 15px !important;
    }

    .nav-panel-body::after {
        display: none !important;
    }

    /* Ajuste de clavos en mobile */
    .clavo-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .grid-mvvp {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-left: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    .card-mvvp-btn,
    .back-to-all-btn {
        width: 100% !important;
        min-height: 50px !important;
        padding: 10px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        color: white !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
        font-size: 0.85rem !important;
    }


    .section-image {
        margin-left: 0 !important;
        margin-top: 20px !important;
        text-align: center !important;
    }

    .section-image img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .message-box {
        margin: 20px 0 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: rgba(26, 26, 26, 0.70) !important;
        /* Mismo que desktop */
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        padding: 20px !important;
    }

    .message-box p {
        color: #f5f5f5 !important;
        /* Blanco humo */
        font-style: italic !important;
    }

    .mvvp-descriptions {
        background: transparent !important;
        /* Eliminar fondo gris feo */
        border-radius: 12px !important;
        padding: 0 !important;
        /* Quitar padding para que no ocupe espacio extra */
        margin-top: 20px !important;
        border: none !important;
        /* Quitar borde */
        box-shadow: none !important;
    }

    /* .description-box.active {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    } ESTILO ELIMINADO PARA RESTAURAR INDEX */

    .description-box h3 {
        color: #f5f5f5 !important;
        /* Blanco humo */
        margin-bottom: 10px !important;
    }

    .description-box p {
        color: #fff !important;
    }

    .modal-border {
        display: none !important;
    }

    .border-container {
        display: none !important;
    }

    .clavo-label {
        width: 100% !important;
        min-width: auto !important;
    }

    .commitment-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .commitment-btn {
        width: 100% !important;
        white-space: normal !important;
        font-size: 11px !important;
        padding: 8px !important;
        min-height: 60px !important;
    }

    .card-mvvp-btn {
        width: 100% !important;
        min-height: 50px !important;
        padding: 10px !important;
    }

    .section-image {
        margin-left: 0 !important;
        margin-top: 20px !important;
        text-align: center !important;
    }

    .section-image img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .message-box {
        margin: 20px 0 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .modal-border {
        display: none !important;
    }

    .border-container {
        display: none !important;
    }

    /* Puntos de Venta Mobile */
    .map-content {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .map-sidebar {
        max-height: 300px !important;
        padding: 15px !important;
    }

    .map-container #map {
        height: 350px !important;
    }

    .hero-stats {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .contact-cards {
        grid-template-columns: 1fr !important;
    }

    /* Clientes Page - Mobile/Tablet */
    .clientes-intro .container,
    .clientes-mapa .container,
    footer .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .clientes-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .clientes-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
    }

    .left-column .text-box {
        position: static !important;
        width: 100% !important;
        margin-top: 20px !important;
        top: 0 !important;
    }

    .text-box.small {
        width: 100% !important;
        margin-top: 20px !important;
        align-self: center !important;
    }

    .text-box.vertical {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }

    .mapa-wrapper {
        grid-template-columns: 1fr !important;
    }

    .mapa-text-box {
        max-width: 100% !important;
        min-height: auto !important;
        margin-bottom: 20px !important;
    }

    .mapa-y-botones {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .botones-filtrado {
        margin: 20px 0 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        gap: 10px !important;
    }

    .btn-filtro {
        flex: 1 1 140px !important;
        min-height: 50px !important;
        /* Touch target */
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pais-item {
        padding: 10px 5px !important;
        /* Larger touch area */
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .back-button {
        padding: 12px 20px !important;
        min-height: 44px !important;
    }

    .info-panels-container {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        display: block !important;
    }

    .info-panel-clientes {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 92% !important;
        max-width: 420px !important;
        z-index: 11000 !important;
        background: rgba(26, 26, 26, 0.98) !important;
        border: 2px solid #f9751c !important;
        border-radius: 20px !important;
        padding: 55px 25px 35px !important;
        box-shadow: 0 25px 60px rgba(26, 26, 26, 0.9) !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
    }

    .info-panel-clientes.hidden {
        display: none !important;
    }

    .info-panel-clientes:not(.hidden) {
        display: block !important;
    }

    #etica-terceros-modal.section-modal {
        display: none;
    }

    #etica-terceros-modal.section-modal.active {
        display: block !important;
    }

    .mapa-container {
        width: 100% !important;
        height: 350px !important;
    }

    .mapa-container iframe {
        height: 100% !important;
    }

    .pdf-modal {
        width: 95% !important;
        max-width: 95% !important;
        padding: 40px 15px 20px !important;
    }

    .pdf-container {
        height: 400px !important;
    }

    /* Simple Header Universal Fix */
    .simple-header {
        left: 0 !important;
        width: 100% !important;
        padding: 15px 20px !important;
        top: 0 !important;
        position: absolute !important;
    }

    .simple-header .container {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Contact Page - Mobile/Tablet - Refuerzo de estilos */
    .contact-cover-hero {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        background-attachment: scroll !important;
    }

    .hero-layout-flex {
        padding: 90px 0 30px !important;
    }

    .hero-quote-container {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        justify-content: center !important;
        padding: 0 15px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .hero-quote-box {
        max-width: 100% !important;
        padding: 24px 20px !important;
        width: 100% !important;
    }

    .hero-quote-box p {
        font-size: 0.95rem !important;
    }

    .contact-bottom-nav {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        padding: 0 15px !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .contact-nav-item {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 16px !important;
        min-height: 52px !important;
    }

    .area-interest-buttons {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
    }
}

/* Mobile Small (480px) */
@media (max-width: 480px) {
    :root {
        --border-length: 60px;
    }

    .hero-title-quote {
        font-size: 1.4rem !important;
    }

    .product-section-page {
        padding: 40px 15px !important;
    }

    .modal-content {
        width: 95% !important;
        padding: 20px !important;
    }

    /* Refinamientos para 480px */
    .stat-number {
        font-size: 1.3rem !important;
    }

    .stat-label {
        font-size: 0.65rem !important;
    }

    .text-floating-glass {
        padding: 20px 15px !important;
        font-size: 0.85rem !important;
        margin: 0 5px !important;
    }

    .industry-buttons {
        gap: 8px !important;
    }

    .industry-btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Nosotros Folder - Mobile Small */
    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .grid-mvvp {
        grid-template-columns: 1fr !important;
    }

    .company-card {
        padding: 20px 15px !important;
    }

    .company-card h3 {
        font-size: 1.2rem !important;
    }

    .company-card p {
        font-size: 1rem !important;
    }

    .ethics-quote {
        padding: 30px 15px !important;
    }

    .ethics-grid {
        grid-template-columns: 1fr !important;
    }

    .commitment-buttons {
        grid-template-columns: 1fr !important;
    }

    .video-container {
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }

    .video-container iframe {
        height: 100% !important;
    }

    /* Clientes Page - Mobile Small */
    .clientes-hero h1 {
        font-size: 2.2rem !important;
    }

    .btn-filtro {
        flex: 1 1 100% !important;
        min-height: 55px !important;
        font-size: 0.85rem !important;
    }

    .pais-item {
        padding: 12px 10px !important;
    }

    .clientes-intro-grid .left-column,
    .clientes-intro-grid .right-column {
        width: 100% !important;
    }

    .clientes-image img {
        height: 220px !important;
    }

    .text-box {
        padding: 20px 15px !important;
        font-size: 0.9rem !important;
    }

    .text-box.small h3 {
        font-size: 1rem !important;
    }

    .mapa-container iframe {
        height: 320px !important;
    }

    .info-panel {
        width: 95% !important;
        padding: 40px 15px 25px !important;
    }

    /* Inversores Page - Mobile Small */
    .logo-section-inversores span {
        font-size: 12px !important;
    }

    .vision-card blockquote,
    .project-card blockquote {
        font-size: 1rem !important;
    }

    .collaboration-card p {
        font-size: 0.95rem !important;
    }

    .video-container-centered .navigation-bar-bottom {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .nav-item {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Contact Page - Mobile Small (480px) */
    .contact-cover-hero {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .hero-layout-flex {
        padding: 80px 0 25px !important;
        gap: 20px !important;
    }

    .hero-quote-container {
        padding: 0 12px !important;
    }

    .hero-quote-box {
        padding: 20px 16px !important;
    }

    .hero-quote-box p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }

    .contact-bottom-nav {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .contact-nav-item {
        padding: 12px 14px !important;
        min-height: 50px !important;
        border-radius: 12px !important;
    }

    .contact-nav-item .nav-label {
        font-size: 0.85rem !important;
    }

    .area-btn {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
    }

    .simple-header {
        height: 60px !important;
    }

    .mobile-logo-text {
        font-size: 1.3rem !important;
    }

    .mobile-logo-img {
        height: 32px !important;
    }


}

/* =========================================
   DEFINITIVE MOBILE NAV OVERRIDES (FINAL)
   ========================================= */
@media (max-width: 768px) {

    /* Fondo oscuro sólido traslúcido para legibilidad perfecta */
    .mobile-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(18, 18, 18, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none;
    }

    .mobile-nav-overlay.active {
        display: block !important;
    }

    /* Centrado absoluto del contenido */
    .mobile-nav-content {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 25px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Buscador refinado: pequeño, elegante y sin márgenes gigantes */
    .mobile-search {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 0 35px 0 !important;
        padding: 8px 15px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 50px !important;
        /* Más redondeado y moderno */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .mobile-search input {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        font-family: 'Work Sans', sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 300 !important;
        padding: 0 !important;
    }

    .mobile-search input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .mobile-search button {
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 0 !important;
        margin-left: 10px !important;
        cursor: pointer !important;
    }

    /* Enlaces: limpios, finos y legibles */
    .mobile-nav-links {
        width: 100% !important;
        max-width: 320px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        /* El padding del link da el espacio */
    }

    .mobile-link {
        font-family: 'Work Sans', sans-serif !important;
        font-size: 1.4rem !important;
        font-weight: 300 !important;
        color: #fff !important;
        text-align: left !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
        width: 100% !important;
        transition: color 0.3s ease !important;
    }

    .mobile-link:last-child {
        border-bottom: none !important;
    }

    .mobile-link:active {
        color: #f9751c !important;
        padding-left: 10px !important;
    }

    /* Botón de cierre posicionado fixamente */
    .mobile-nav-close {
        position: absolute !important;
        top: 25px !important;
        right: 25px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 100000 !important;
        cursor: pointer !important;
    }

    /* ===== FOOTER MOBILE REFINEMENT ===== */
    .footer-final {
        padding: 40px 0 !important;
        background: #1a1a1a !important;
    }

    .footer-container {
        padding: 0 20px !important;
    }

    .footer-top-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        text-align: center !important;
    }

    .footer-link-large {
        font-size: 1.1rem !important;
        width: 100% !important;
    }

    .footer-divider {
        margin: 30px 0 !important;
        opacity: 0.1 !important;
    }

    .footer-bottom-row {
        flex-direction: column !important;
        gap: 40px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-bottom-left,
    .footer-bottom-center,
    .footer-bottom-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .social-buttons-row {
        justify-content: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .contact-mini-info {
        text-align: center !important;
    }

    .footer-bottom-center {
        gap: 15px !important;
    }

    .footer-logo-large {
        justify-content: center !important;
        margin-top: 20px !important;
    }

    .footer-logo-large img {
        height: 40px !important;
    }

    /* Sales Points Modal Fix */
    .sales-modal {
        width: 95% !important;
        padding: 30px 15px !important;
        max-height: 90vh !important;
    }

    .sales-points-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .sales-point-card {
        padding: 20px !important;
    }

    .sales-map-container {
        height: 250px !important;
        margin-top: 20px !important;
    }

    .whatsapp-circle-btn {
        width: 60px !important;
        height: 60px !important;
    }
}

/* =========================================
   TABLET RESPONSIVE FIXES (768px - 1024px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    /* HEADER: Mostrar Burger, Ocultar Desktop */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
        margin-right: 20px;
    }

    .mobile-menu-toggle span {
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 2px;
    }

    .header-final .desktop-nav {
        display: none !important;
    }

    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
        grid-template-columns: auto auto !important;
        /* Reset layout */
    }

    /* Ajuste de Logo en Tablet */
    .logo-final img {
        height: 45px !important;
    }

    .logo-final span {
        font-size: 1.5rem !important;
        margin-left: -15px !important;
        /* Ajuste visual */
    }

    /* INDUSTRIAS: 1 Columna en Tablet */
    /* INDUSTRIAS: Reordenamiento Flex Tablet */
    .industries-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
        /* grid-template-columns eliminado a favor de flex */
    }

    /* 1. Botones */
    .industries-buttons {
        order: 1 !important;
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .industry-btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        font-size: 0.9rem !important;
        padding: 10px 15px !important;
    }

    /* 2. Descripciones (Arriba de la imagen) */
    .industries-descriptions {
        order: 2 !important;
        width: 100% !important;
        min-height: auto !important;
        margin-top: 0 !important;
        position: relative !important;
        margin-bottom: 20px !important;
    }

    /* 3. Imagen y Stats (Al final) */
    .industries-images {
        order: 3 !important;
        height: auto !important;
        min-height: 300px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    .industries-descriptions .description-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        padding: 25px !important;
        background: rgba(26, 26, 26, 0.85) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .industries-descriptions .description-box.active {
        opacity: 1 !important;
    }

    /* CORRECCIONES RESTANTES INDUSTRIAS */
    .industries-descriptions .description-box {
        display: none !important;
    }

    .industries-descriptions .description-box.active {
        display: block !important;
    }

    /* Contenedor Flex para imagen y stats */
    .industries-images {
        display: flex !important;
        flex-direction: column !important;
    }

    .industry-image {
        position: relative !important;
        width: 100% !important;
        height: 350px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        display: none !important;
        order: 1 !important;
        /* IMAGEN ARRIBA */
        margin-bottom: 15px !important;
    }

    .industry-image.active {
        display: block !important;
    }

    /* Barra de estadísticas reducida y ABAJO */
    .stats-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        width: 100% !important;
        background: rgba(26, 26, 26, 0.95) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 15px 10px !important;
        border-radius: 12px !important;
        z-index: 1 !important;
        order: 2 !important;
        /* STATS ABAJO */
    }

    /* Ajustar tamaño de textos en stats para que no sea gigante */
    .stat-item {
        flex: 0 1 auto !important;
        padding: 0 10px !important;
    }

    .stat-number {
        font-size: 1.2rem !important;
        margin-bottom: 2px !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    /* Ajuste de Hero Tablet */
    .hero-final {
        padding-left: 40px !important;
        background-position: center center !important;
        height: 60vh !important;
        /* Altura más razonable para tablet */
    }

    .hero-content-final h1 {
        font-size: 2.2rem !important;
        max-width: 90% !important;
        padding: 20px !important;
    }

    /* =========================================
       VALORES (Tablet Reordering)
       Orden: Title, Imagen, Botones, Intro, Contacto
       ========================================= */
    .values-container {
        padding: 40px 20px !important;
    }

    .values-content-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* "Rompemos" la columna izquierda para ordenar sus hijos libremente */
    .values-left-col {
        display: contents !important;
    }

    /* 1. Título */
    .values-title-box {
        order: 1 !important;
        text-align: center !important;
        margin-bottom: 25px !important;

        background: rgba(26, 26, 26, 0.75) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 15px 25px !important;

        width: 90% !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        border: none !important;
        box-shadow: none !important;
    }

    .values-title-box h2 {
        font-family: 'Outfit', sans-serif !important;
        font-size: 28px !important;
        line-height: 1.3 !important;
        color: #f5f5f5 !important;
        text-align: center !important;
    }

    .values-title-box .subtitle-comunidad {
        display: block !important;
        font-size: 16px !important;
        color: #f5f5f5 !important;
        /* Blanco Humo */
        margin-top: 10px !important;
        text-align: center !important;
    }

    /* 2. Imagen */
    .values-center-col {
        order: 2 !important;
        width: 100% !important;
        max-width: 800px !important;
        /* Más ancha */
        margin: 0 auto 20px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .values-center-col img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        /* Suavizado sutil */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
        /* Sombra sutil para separar */
    }

    /* 3. Botones (Lista de valores) */
    .values-right-col {
        order: 3 !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    .values-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    .value-card {
        flex: 1 1 140px !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }

    /* 4. Intro Text (Descripción) */
    /* 4. Intro Text - Centrado y Limpio */
    /* 4. Intro Text - Glassmorphism Oscuro exacto Desktop */
    .values-intro-box {
        order: 4 !important;
        text-align: center !important;
        padding: 35px 20px !important;
        /* Padding original desktop */

        width: 90% !important;
        max-width: 700px !important;
        margin: 0 auto !important;

        background: rgba(26, 26, 26, 0.75) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        border: 1px solid transparent !important;

        box-shadow: none !important;
        transform: none !important;
        /* Reset transform desktop */
        opacity: 1 !important;
    }

    .values-intro {
        font-family: 'Work Sans', 'Arial', sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
        color: #f5f5f5 !important;
        /* Blanco Humo */
    }

    /* 5. Contacto */
    /* 5. Contacto - Centrado */
    .values-btn-container {
        order: 5 !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 0 !important;
        padding: 0 0 30px 0 !important;
        border-left: none !important;
    }
}

/* =========================================
   MENU HAMBURGUESA - TABLET & MOBILE FIX
   ========================================= */
@media (max-width: 1023px) {

    /* Mostrar toggle */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
        padding: 10px;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #fff;
        transition: 0.3s;
    }

    /* Ocultar navegación desktop */
    .desktop-nav,
    .nav-right {
        display: none !important;
    }

    /* Overlay del Menú */
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
        display: block !important;
    }

    /* Contenido del Menú Lateral */
    /* Contenido del Menú Lateral */
    .mobile-nav-content {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        /* Ancho cómodo en tablet */
        max-width: 350px;
        height: 100%;

        background: rgba(26, 26, 26, 0.85);
        /* Glassmorphism */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-left: 1px solid rgba(255, 255, 255, 0.1);

        padding: 25px;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        box-shadow: -5px 0 35px rgba(0, 0, 0, 0.6);
        overflow-y: auto;
    }

    .mobile-nav-overlay.active .mobile-nav-content {
        transform: translateX(0);
    }

    /* Botón Cerrar - Oculto por pedido */
    .mobile-nav-close {
        display: none !important;
    }



    /* Buscador */
    .mobile-search {
        display: flex;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 10px 15px;
        margin-bottom: 30px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-search input {
        background: none;
        border: none;
        color: #fff;
        flex: 1;
        outline: none;
        font-size: 16px;
    }

    .mobile-search input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .mobile-search button {
        background: none;
        border: none;
        color: #f9751c;
        cursor: pointer;
        font-size: 18px;
    }

    /* Enlaces */
    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mobile-link {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-family: 'Neo Sans', sans-serif;
        transition: color 0.3s, padding-left 0.3s;
    }

    .mobile-link:hover {
        color: #f9751c;
        padding-left: 10px;
    }
}

/* =========================================
   TEXT VISIBILITY UTILITIES
   ========================================= */
.mobile-text-only {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-text-only {
        display: none !important;
    }

    .mobile-text-only {
        display: block !important;
    }
}