/* =========================================
   style.css - NEW VISION SOFTLAN (NVSL)
   Versión Premium: Rojo/Grafito + Tarjetas Tricolor Centradas
   ÚLTIMA CORRECCIÓN: Logo del footer más grande
========================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: #0b1120; color: #ffffff; overflow-x: hidden; }
html { scroll-behavior: smooth; }

:root{
  --accent: #E11D2E;

    --brand-red: #E30613;      /* Rojo corporativo NVSL */
    --brand-red-dark: #B30000; 
    --brand-grey: #8E9196;     /* Gris corporativo NVSL */
    --dark-bg: #0b1120;        /* Pizarra oscuro */
    --dark-surface: #0f172a;   /* Superficie para tarjetas base */
    --white: #ffffff;
}

/* =========================================
   1. NAVBAR & LOGO (FONDO BLANCO)
========================================= */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 90px; 
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 5%; z-index: 1000; 
    background: #ffffff; 
    border-bottom: 2px solid var(--brand-red); 
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.logo { height: 100%; display: flex; align-items: center; }
.logo img { height: auto; max-height: 50px; width: auto; object-fit: contain; }

.nav-menu { display: flex; gap: 30px; list-style: none; }
.nav-item { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #475569; cursor: pointer; transition: color 0.3s; }
.nav-item a { text-decoration: none; color: inherit; }
.nav-item:hover, .nav-item a:hover { color: var(--brand-red); }
.mobile-menu-toggle { display: none; } 

/* =========================================
   2. SECCIÓN HERO
========================================= */
.hero-fabricante {
    position: relative; width: 100%; min-height: 90vh; display: flex; align-items: center; 
    background-color: var(--dark-bg); overflow: hidden; padding-top: 90px;
}
.hero-bg { position: absolute; top:0; left:0; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; filter: brightness(0.72) contrast(1.08) saturate(1.05); opacity: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(7, 10, 18, 1) 0%, rgba(7, 10, 18, 0.82) 52%, rgba(7, 10, 18, 0.35) 72%, rgba(7, 10, 18, 0.0) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; width: 100%; padding-left: 8%; padding-right: 5%; }

h1 { color: #ffffff; font-weight: 900; font-size: clamp(36px, 6vw, 65px); line-height: 1.1; margin-bottom: 25px; letter-spacing: -1px; }
h1 span { color: var(--brand-red); } 
p.subtitle { color: #cbd5e1; font-size: clamp(16px, 3vw, 20px); font-weight: 400; margin-bottom: 50px; line-height: 1.6; max-width: 650px; }

/* =========================================
   3. COMPONENTES GLOBALES (BOTONES Y BADGES)
========================================= */
.container { max-width: 1200px; margin: 0 auto; }

.badge-red { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: #cbd5e1; text-transform: uppercase; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid var(--brand-red); padding: 8px 16px; border-radius: 4px; margin-bottom: 25px; letter-spacing: 1px; }
.badge-dark { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: #475569; text-transform: uppercase; border: 1px solid #cbd5e1; border-left: 3px solid var(--brand-red); padding: 8px 16px; border-radius: 4px; margin-bottom: 25px; letter-spacing: 1px; }

/* Botones Principales */
.btn-primary-red { background-color: transparent; color: #fff; padding: 18px 40px; font-size: 15px; font-weight: 800; text-transform: uppercase; border-radius: 4px; border: 2px solid var(--brand-red); cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; letter-spacing: 1px; }
.btn-primary-red:hover { background-color: var(--brand-red); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(227, 6, 19, 0.2); }

.btn-solid-red { background-color: var(--brand-red); color: #ffffff; padding: 18px 40px; font-size: 15px; font-weight: 800; text-transform: uppercase; border-radius: 4px; border: 2px solid var(--brand-red); cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; letter-spacing: 1px; }
.btn-solid-red:hover { background-color: var(--brand-red-dark); border-color: var(--brand-red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(227, 6, 19, 0.3); }

/* =========================================
   4. SOLUCIONES Y TECNOLOGÍA (TARJETAS TRICOLOR)
========================================= */
.solution-section { padding: 120px 5%; position: relative; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
.solution-title { font-size: clamp(32px, 5vw, 48px); font-weight: 900; margin-bottom: 20px; color: #ffffff; letter-spacing: -1px; }
.solution-subtitle { font-size: 18px; color: #94a3b8; line-height: 1.6; }

.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; }

/* Contenedor principal de la tarjeta TRICOLOR */
.solution-card { 
    border: 1px solid #334155; 
    border-top: 4px solid var(--brand-red); /* COLOR 1: RAYA ROJA */
    border-radius: 8px; 
    position: relative; 
    transition: all 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    overflow: hidden; /* Evita que el fondo blanco se salga de las esquinas */
    background-color: #0f172a; 
}

.solution-card:hover { 
    transform: translateY(-8px); 
    border-color: #475569; 
    box-shadow: 0 20px 40px rgba(227, 6, 19, 0.15); 
}

/* COLOR 2: CAJA BLANCA PARA LOGOS CENTRADOS */
.card-logo-white {
    background-color: #ffffff;
    height: 160px; /* ALTURA FIJA MATEMÁTICA */
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado Horizontal */
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

.card-logo-white img {
    max-height: 100%; 
    width: auto;
    max-width: 100%;
    object-fit: contain; /* Encaja sin deformar */
    object-position: center; /* Centrado de la imagen dentro de su espacio */
}

/* Etiqueta dentro de la caja blanca */
.solution-card .tech-badge { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    background: var(--brand-red); 
    color: #fff; 
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 6px 12px; 
    border-radius: 4px; 
}

/* COLOR 3: CAJA AZUL OSCURO PARA EL TEXTO */
.card-text-blue {
    background-color: #111827; 
    padding: 40px;
    flex-grow: 1; /* Rellena el espacio sobrante para igualar alturas */
    display: flex;
    flex-direction: column;
}

.card-text-blue p { 
    font-size: 15px; 
    color: #94a3b8; 
    line-height: 1.6; 
    margin-bottom: 30px; 
    flex-grow: 1; /* Empuja el botón hacia abajo */
    transition: color 0.3s;
    text-align: left;
}

.solution-card:hover .card-text-blue p { 
    color: #cbd5e1; 
}

/* Botón inferior gris/rojo */
.btn-glow-grey { 
    background-color: #1e293b; 
    color: #ffffff; 
    border: 1px solid #475569; 
    padding: 16px 30px; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    text-decoration: none; 
    border-radius: 4px; 
    transition: all 0.3s; 
    text-align: center;
    width: 100%;
    display: block;
    margin-top: auto;
}
.btn-glow-grey:hover { 
    background-color: var(--brand-red); 
    border-color: var(--brand-red); 
    color: #fff; 
}

/* =========================================
   5. PREMIOS Y GALARDONES
========================================= */
.award-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform 0.3s; height: 100%; }
.award-item:hover { transform: translateY(-5px); }

/* Tamaños compensados para que los dos JPG luzcan igual de grandes */
.award-img-isa { height: 160px; width: auto; margin-bottom: 15px; mix-blend-mode: multiply; }
.award-img-csa { height: 120px; width: auto; margin-bottom: 25px; mix-blend-mode: multiply; }

/* =========================================
   6. FOOTER CORPORATIVO
========================================= */
.footer { background-color: var(--dark-bg); color: #cbd5e1; padding: 80px 5% 40px; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1.5fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer-info p { line-height: 1.6; font-size: 14px; color: #64748b; }
.footer-col h4 { font-size: 14px; color: var(--white); margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }

.contact-item { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #94a3b8; }
.contact-item a { color: #cbd5e1; text-decoration: none; transition: color 0.3s; }
.contact-item a:hover { color: var(--white); }

.footer-legal ul { list-style: none; padding: 0; }
.footer-legal li { margin-bottom: 12px; font-size: 14px; }
.footer-legal a { color: #64748b; text-decoration: none; transition: color 0.3s; }
.footer-legal a:hover { color: var(--white); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); text-align: center; padding-top: 30px; color: #475569; font-size: 13px; }

/* =========================================
   7. MODALES Y FORMULARIOS
========================================= */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 17, 32, 0.9); backdrop-filter: blur(5px); z-index: 9999; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background: #fff; padding: 40px; border-radius: 8px; width: 90%; max-width: 650px; position: relative; color: #0f172a; max-height: 90vh; overflow-y: auto; text-align: left; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
.modal-header { margin-bottom: 30px; }
.modal-header h3 { font-size: 26px; font-weight: 900; margin-bottom: 10px; color: #0f172a; letter-spacing: -0.5px; }
.modal-header p { font-size: 15px; color: #64748b; margin: 0; line-height: 1.5; }
.close-modal { position: absolute; top: 20px; right: 20px; font-size: 28px; cursor: pointer; color: #94a3b8; background: none; border: none; z-index: 10; transition: color 0.3s; }
.close-modal:hover { color: #0f172a; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;}
.form-group input { padding: 14px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 15px; color: #0f172a; font-family: 'Inter', sans-serif; transition: border-color 0.3s;}
.form-group input:focus { border-color: var(--brand-red); outline: none; box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.1); }
.full-width { grid-column: span 2; }

/* Checkboxes obligatorios Partner */
.product-selection-box { background: #f8fafc; padding: 20px; border-radius: 4px; border: 1px solid #e2e8f0; margin-top: 10px; }
.checkbox-group { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; font-size: 14px; color: #334155; margin: 0; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand-red); }

.legal-error-text { color: var(--brand-red); font-size: 13px; font-weight: 700; display: none; margin-top: 12px; }

/* Privacidad */
.privacy-box { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #64748b; margin-top: 15px; }
.privacy-box input { margin-top: 2px; width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-red); }
.privacy-box label { font-size: 13px; color: #64748b; font-weight: 400; cursor: pointer; margin: 0; line-height: 1.5; }
.privacy-box a { color: var(--brand-red); text-decoration: underline; font-weight: 600; }

.submit-btn-red { background: var(--brand-red); color: #fff; border: none; padding: 16px; font-size: 15px; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 4px; width: 100%; transition: all 0.3s; margin-top: 15px; letter-spacing: 1px;}
.submit-btn-red:hover { background: var(--brand-red-dark); box-shadow: 0 4px 15px rgba(227, 6, 19, 0.3); }

/* Textos Legales Completos */
.modal-content.legal-box-complete { max-width: 800px; padding: 50px; text-align: justify; line-height: 1.7; color: #475569; }
.modal-content.legal-box-complete h2 { color: #0f172a; margin-bottom: 25px; font-weight: 900; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; letter-spacing: -0.5px;}
.modal-content.legal-box-complete h3 { color: #0f172a; margin-top: 30px; margin-bottom: 12px; font-size: 1.1rem; }
.modal-content.legal-box-complete ul { padding-left: 20px; margin-bottom: 15px; }

#modal-privacy, #modal-terms, #modal-cookies { z-index: 20000 !important; }
.honey-field { display: none; }

/* =========================================
   8. RESPONSIVE COMPLETO (TABLET Y MÓVIL)
========================================= */
@media (max-width: 1024px) {
    .nav-menu { display: none; }
    .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; background: transparent; border: none; }
    .mobile-menu-toggle span { display: block; width: 100%; height: 3px; background-color: #334155; border-radius: 2px; transition: 0.3s; }
}

@media (max-width: 900px) {
    .navbar { height: 75px !important; padding: 0 20px !important; }
    .logo img { max-height: 35px; }
    
    .hero-content { padding-left: 5%; padding-right: 5%; text-align: center; }
    h1 { font-size: 36px !important; }
    p.subtitle { font-size: 16px !important; margin: 0 auto 40px auto; }
    .buttons { justify-content: center; }
    
    .solution-section { padding: 80px 10px !important; }
    .solution-title { font-size: 30px !important; line-height: 1.2; }
    
    /* Reajuste de tarjetas para móvil */
    .solution-grid { display: flex; flex-direction: column; gap: 30px; }
    .solution-card { width: 100% !important; margin: 0 0 20px 0 !important; }
    .card-logo-white { padding: 30px 20px; height: 140px; } 
    .card-text-blue { padding: 30px 20px; }
    .solution-card .tech-badge { top: 10px; right: 10px; }
    
    .footer-container { display: flex; flex-direction: column; gap: 40px; text-align: center; }
    .footer-info { align-items: center; }
    .contact-item { justify-content: center; text-align: center; }
    
    .modal-content { width: 95% !important; padding: 30px 20px !important; max-height: 85vh !important; margin: 10px auto !important; }
    .form-grid { display: flex !important; flex-direction: column !important; gap: 15px !important; }
    .form-group { width: 100% !important; }
    .form-group input { width: 100% !important; box-sizing: border-box !important; }
    .checkbox-group { flex-direction: column; gap: 10px; }
    .full-width { width: 100% !important; }
}

/* =========================================
   REVISIÓN FINAL FOOTER (LOGO MÁS GRANDE)
   He reducido el padding de la caja y aumentado la anchura
   del logo para que ocupe más espacio interno.
========================================= */
.footer-logoCard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* CAMBIO 1: Reducimos padding para que el logo se acerque a los bordes */
  padding: 10px 15px; 
  border-radius: 8px;   
  background: #ffffff !important;  
  border: 1px solid #e2e8f0; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  margin-bottom: 25px;
  transition: transform 0.3s ease;
}

.footer-logoCard:hover {
  transform: translateY(-3px); 
}

.footer-logo {
  /* CAMBIO 2: Aumentamos la anchura explícita del logo */
  width: 230px;
  height: auto;
  display: block;
  filter: none !important; 
}

.footer .contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.35;
}

.footer .contact-item .ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 3px;
  color: var(--accent, #E11D2E);
  opacity: 0.95;
}

.footer .contact-item a,
.footer .contact-item span {
  color: rgba(255, 255, 255, 0.78);
}

.footer .contact-item a:hover {
  color: rgba(255, 255, 255, 0.92);
}