/* ==========================================================================
   ESTILOS INSTITUCIONALES RETENSUR V2 - INSPIRADO EN SGI
   ========================================================================== */

   :root {
    --verde-retensur: #00875a;
    --naranja-retensur: #f97316;
    --gris-oscuro: #0f172a;
    --gris-texto: #334155;
    --gris-mutado: #64748b;
    --fondo-claro: #f8fafc;
    --blanco: #ffffff;
    --borde: 1px solid #e2e8f0;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--blanco);
    color: var(--gris-texto);
    line-height: 1.6;
}

/* --- HEADER DINÁMICO (Se esconde al bajar, aparece al subir) --- */
#header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 8%;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: var(--borde);
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 2000;
    transition: transform 0.3s ease-in-out;
}

/* Clases de control para JS */
#header-v2.hide {
    transform: translateY(-100%);
}

.logo-v2 {
    font-weight: 700;
    font-size: 20px;
    color: var(--gris-oscuro);
    letter-spacing: -0.5px;
}
.logo-v2 span { color: var(--naranja-retensur); }
.logo-v2 small { font-size: 10px; color: var(--gris-mutado); font-weight: 400; margin-left: 3px; }

nav a {
    margin-left: 28px;
    text-decoration: none;
    color: var(--gris-texto);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
nav a:hover, nav a.active { color: var(--verde-retensur); }

/* --- CONTENEDORES PRINCIPALES --- */
.seccion-v2 {
    padding: 100px 8%;
    border-bottom: var(--borde);
}
.seccion-v2.gris { background-color: var(--fondo-claro); }

/* --- ANIMACIONES FADE IN UP --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- HERO / PORTADA V2 --- */
/* --- NUEVA PORTADA HERO CON CARROUSEL DE FONDO --- */
.hero-v2 {
    position: relative;
    height: 80vh;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: var(--borde);
    padding: 0 20px;
}

/* Contenedor del carrusel infinito de fondo */
.hero-slider-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.hero-slider-bg .slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slider-bg .slide.active {
    opacity: 1;
}

/* Contenedor flotante y centrado del texto */
/* Contenedor flotante y centrado con Efecto Glassmorphism */
/* Contenedor flotante y centrado con Efecto Vidrio Real (Glassmorphism) */
/* Contenedor flotante y centrado con Efecto Vidrio Ultra Traslúcido */
.hero-content-v2 {
    position: relative;
    z-index: 2;
    /* Fondo blanco al 15% de opacidad combinado con un sutil gradiente brillante */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.10) 100%
    );
    /* Desenfoque del fondo */
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    
    padding: 50px 60px;
    border-radius: 12px;
    /* Borde blanco semi-transparente para dar el efecto de refracción del cristal */
    border: 1px solid rgba(255, 255, 255, 0.4); 
    max-width: 850px;
    width: 100%;
    text-align: center;
    /* Sombra suave y dispersa para despegar la tarjeta del fondo */
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
}

/* --- SOMBRAS INTENSAS REFORZADAS PARA MÁXIMA LEGIBILIDAD --- */

.hero-content-v2 span {
    color: #f97316; 
    font-weight: 800; 
    font-size: 18px; 
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
    
    /* Sombra negra múltiple reforzada (Dirección e intensidad) */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
       -1px -1px 2px rgba(0, 0, 0, 0.8),
        1px -1px 2px rgba(0, 0, 0, 0.8),
       -1px 1px 2px rgba(0, 0, 0, 0.8),
        0px 2px 5px rgba(0, 0, 0, 0.9);
}

.hero-content-v2 h1 {
    font-size: 42px; 
    color: var(--gris-oscuro);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 22px;
    /* El texto principal mantiene su sombra sutil original */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.hero-content-v2 p {
    font-size: 18px; 
    color: #00875a; 
    font-weight: 700; 
    margin: 0 auto;
    max-width: 700px;
    line-height: 1.6;
    
    /* Sombra negra múltiple reforzada (Dirección e intensidad) */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
       -1px -1px 2px rgba(0, 0, 0, 0.8),
        1px -1px 2px rgba(0, 0, 0, 0.8),
       -1px 1px 2px rgba(0, 0, 0, 0.8),
        0px 2px 5px rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
    .hero-content-v2 { padding: 30px 20px; }
    .hero-content-v2 h1 { font-size: 26px; }
}

/* --- CONTADORES / CONTENEDORES INFORMATIVOS SGI --- */
.grid-metricas-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.card-metrica-v2 {
    background-color: var(--blanco);
    border: var(--borde);
    padding: 30px;
    border-radius: 4px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}
.card-metrica-v2 h3 {
    font-size: 36px;
    color: var(--verde-retensur);
    font-weight: 700;
    margin-bottom: 5px;
}
.card-metrica-v2 h4 {
    font-size: 13px;
    color: var(--gris-oscuro);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.card-metrica-v2 p {
    font-size: 12px;
    color: var(--gris-mutado);
    line-height: 1.5;
}

/* --- GRILLA DE PRODUCTOS CON MODAL --- */
.productos-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.item-producto-v2 {
    background-color: var(--blanco);
    border: var(--borde);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.item-producto-v2:hover {
    border-color: var(--verde-retensur);
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}
.item-producto-v2 .box-foto {
    background-color: var(--fondo-claro);
    height: 180px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}
.item-producto-v2 .box-foto i { font-size: 48px; color: #cbd5e1; }
.item-producto-v2 h4 { font-size: 14px; color: var(--gris-oscuro); font-weight: 600; }

/* --- CARRUSEL INFINITO DE CLIENTES --- */
.carrusel-marcas {
    overflow: hidden;
    padding: 40px 0;
    background: var(--blanco);
    position: relative;
    display: flex;
    align-items: center;
}
.carrusel-track {
    display: flex;
    gap: 60px;
    width: calc(200px * 12);
    animation: scrollCarrusel 25s linear infinite;
}
.carrusel-track span {
    font-size: 16px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
@keyframes scrollCarrusel {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-200px * 6)); }
}

/* --- SECCIÓN PIE: FORMULARIO INTEGRADO AL PIE --- */
.footer-formulario-v2 {
    background-color: var(--fondo-claro);
    padding: 80px 8% 40px 8%;
    border-top: var(--borde);
}
.footer-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-info-v2 h2 { font-size: 24px; color: var(--gris-oscuro); margin-bottom: 15px; text-transform: uppercase; }
.footer-form-v2 form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.footer-form-v2 .full-width { grid-column: span 2; }
.footer-form-v2 input, .footer-form-v2 textarea {
    width: 100%; padding: 14px; border: var(--borde); border-radius: 4px; font-family: 'Montserrat'; font-size: 13px;
}
.footer-form-v2 button {
    grid-column: span 2; background-color: var(--verde-retensur); color: var(--blanco); border: none; padding: 15px; font-weight: 600; text-transform: uppercase; cursor: pointer; border-radius: 4px;
}

/* --- MODAL FLOTANTE --- */
.modal-v2 {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 3000;
}
.modal-v2.show { opacity: 1; pointer-events: auto; }
.modal-content-v2 { background: var(--blanco); padding: 40px; border-radius: 4px; max-width: 500px; width: 90%; position: relative; text-align: left; }
.modal-close-v2 { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gris-mutado); }

@media (max-width: 768px) {
    .footer-grid-v2 { grid-template-columns: 1fr; gap: 40px; }
    .footer-form-v2 form { grid-template-columns: 1fr; }
    .footer-form-v2 .full-width { grid-column: span 1; }
    .footer-form-v2 button { grid-column: span 1; }
}
/* --- SECCIÓN DE RUBROS / INDUSTRIAS --- */
.grid-rubros-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-top: 20px;
}

.card-rubro-v2 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.icon-box-rubro {
    background-color: #fab005; /* El color amarillo/dorado característico de los íconos de SGI */
    color: var(--blanco);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

.info-rubro h3 {
    font-size: 18px;
    color: var(--gris-oscuro);
    font-weight: 700;
    margin-bottom: 6px;
}

.info-rubro p {
    font-size: 13px;
    color: var(--gris-mutado);
    line-height: 1.5;
}

/* Adaptación para pantallas medianas y celulares */
@media (max-width: 992px) {
    .grid-rubros-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-rubros-v2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .card-rubro-v2 {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* --- NUEVA ESTRUCTURA DE COMPONENTES SIMILAR A LA CAPTURA --- */
.seccion-productos-v2 {
    padding: 120px 8% 80px 8%;
    background-color: var(--blanco);
}

.subtitulo-productos {
    color: var(--naranja-retensur);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
    text-align: center;
}

.titulo-productos {
    text-align: center;
    margin-bottom: 40px;
    color: var(--gris-oscuro);
    font-size: 28px;
    font-weight: 700;
}

/* MENÚ SUPERIOR DE CATEGORÍAS */
.categorias-nav-v2 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.btn-categoria-v2 {
    background-color: var(--blanco);
    border: var(--borde);
    padding: 20px 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 190px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.btn-categoria-v2 .icon-cat {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--fondo-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gris-mutado);
    transition: all 0.3s ease;
}

.btn-categoria-v2 span {
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-texto);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estado activo del botón (Igual al azul corporativo destacado de tu foto) */
.btn-categoria-v2.active {
    background-color: #0033aa; /* Cambiá por var(--verde-retensur) si preferís seguir la línea de la marca */
    border-color: #0033aa;
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 51, 170, 0.2);
}

.btn-categoria-v2.active .icon-cat {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--blanco);
}

.btn-categoria-v2.active span {
    color: var(--blanco);
}

/* CONTENEDORES DE FOTOS REALES DE PRODUCTO */
.item-producto-v2 .box-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Esto hace que la foto técnica no se deforme */
    padding: 10px;
}

.item-producto-v2 .fallback-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #cbd5e1;
}

.item-producto-v2 h4 {
    font-size: 13px;
    color: var(--gris-texto);
    margin-top: 10px;
    font-weight: 500;
}

/* Lógica de ocultado para el filtro */
.prod-card {
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.prod-card.hidden {
    display: none;
}
/* --- DISEÑO DE LA PÁGINA EMPRESA --- */

/* Hero Simple */
.hero-empresa {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 140px 8% 80px 8%;
    text-align: center;
    color: #ffffff;
}

.tag-empresa {
    color: var(--naranja-retensur);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.hero-empresa h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.hero-empresa p {
    color: #94a3b8;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

/* Subtítulos de sección comunes */
.subtitulo-marca {
    color: var(--verde-retensur);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.subtitulo-marca.de-centro {
    text-align: center;
}

/* Secciones Base / Alternadas */
.seccion-historia, .seccion-produccion {
    padding: 90px 8%;
    background-color: #ffffff;
}

.seccion-pilares {
    padding: 90px 8%;
    background-color: var(--fondo-claro); /* Color gris/azul muy tenue de fondo */
}

/* Contenedores de dos columnas */
.contenedor-historia, .contenedor-produccion {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.contenedor-produccion {
    flex-direction: row-reverse; /* Alterna el orden de imagen/texto */
}

.col-texto {
    flex: 1;
}

.col-texto h2 {
    font-size: 28px;
    color: var(--gris-oscuro);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.col-texto p {
    color: var(--gris-texto);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.col-imagen {
    flex: 1;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background-color: #f1f5f9;
}

.col-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback si la imagen no carga */
.fallback-empresa {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: #cbd5e1;
}

/* Grilla de Pilares (Sección Centro) */
.grilla-pilares {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.tarjeta-pilar {
    background-color: #ffffff;
    border: var(--borde);
    padding: 40px 30px;
    border-radius: 12px;
    flex: 1;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease;
}

.tarjeta-pilar:hover {
    transform: translateY(-5px);
}

.icono-pilar {
    width: 50px;
    height: 50px;
    background-color: rgba(240, 120, 0, 0.1); /* Fondo naranja suave */
    color: var(--naranja-retensur);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.tarjeta-pilar h3 {
    font-size: 18px;
    color: var(--gris-oscuro);
    margin-bottom: 12px;
    font-weight: 600;
}

.tarjeta-pilar p {
    color: var(--gris-texto);
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 968px) {
    .contenedor-historia, .contenedor-produccion {
        flex-direction: column;
        gap: 40px;
    }
    .col-imagen {
        width: 100%;
        height: 280px;
    }
}
/* --- BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Efecto Hover (Elevación) */
.whatsapp-float:hover {
    background-color: #20ba5a;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    color: #fff;
}

/* Ajuste responsive para pantallas chicas */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 24px;
    }
}
/* Listado Estilizado de Productos */
.lista-productos-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.item-lista-v2 {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-left: 4px solid var(--verde-retensur, #16a34a);
    border-radius: 8px;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.item-lista-v2:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background: #f8fafc;
}

.bullet-v2 {
    color: var(--verde-retensur, #16a34a);
    font-size: 14px;
    margin-right: 16px;
    transition: transform 0.2s ease;
}

.item-lista-v2:hover .bullet-v2 {
    transform: translateX(3px);
}

.info-producto-v2 h4 {
    margin: 0 0 2px 0;
    font-size: 16px;
    color: var(--gris-oscuro, #0f172a);
    font-weight: 600;
}

.info-producto-v2 p {
    margin: 0;
    font-size: 13px;
    color: var(--gris-texto, #64748b);
}
/* ==========================================
   AJUSTES RESPONSIVE PARA CELULARES
   ========================================== */
   @media (max-width: 768px) {
    /* 1. Evita que el header tape el contenido y arregla el menú */
    #header-v2 {
      flex-direction: column;
      padding: 15px 5%;
      position: relative; /* Cambia a relativo en cel para no solapar */
    }
  
    nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
    }
  
    nav a {
      margin-left: 0; /* Quita el margen lateral previo */
    }
  
    /* 2. Ajuste para que las tarjetas de productos queden parejas */
    .productos-grid-v2 {
      grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
      gap: 15px;
    }
  
    .item-producto-v2 {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }