/* VARIABLES GLOBALES */
:root {
    --bg-light: #F8F9FA;
    --bg-dark: #1A2E3E; 
    --bg-footer: #162836; 
    --brand-blue: #2A5D84; 
    --accent-gold: #C5A059;
    --text-main: #222;
    --text-gray: #666;
    --white: #fff;
    --transition: all 0.3s ease;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg-light); color: var(--text-main); line-height: 1.6;}
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; width: 100%; }
.mt-4 { margin-top: 20px; }
.text-center { text-align: center; }

/* TOP BAR */
.top-bar { background: var(--brand-blue); color: #fff; padding: 8px 0; font-size: 0.8rem; letter-spacing: 1px; width: 100%; }
.tb-flex { display: flex; justify-content: space-between; align-items: center; }
.tb-right a { color: #fff; text-decoration: none; margin-left: 20px; transition: var(--transition); }
.tb-right a:hover { color: var(--accent-gold); }

/* NAVBAR */
.navbar { background: #fff; border-bottom: 1px solid #EAEAEA; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.03); width: 100%; }
.nav-content { display: flex; justify-content: space-between; align-items: center; height: 90px; }
.logo img { height: 50px; }
.nav-links { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--text-main); font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; display: flex; align-items: center; gap: 5px; transition: var(--transition); }
.nav-links a:hover { color: var(--brand-blue); }
.text-xs { font-size: 0.6rem; }

/* BOTONES */
.btn-green { background: #375F46; color: #fff; padding: 14px 24px; text-decoration: none; font-weight: bold; font-size: 0.8rem; letter-spacing: 1px; border-radius: 4px; transition: var(--transition); display: inline-block; }
.btn-green:hover { background: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

.btn-black { background: var(--brand-blue); color: #fff; padding: 16px 32px; text-decoration: none; font-weight: bold; font-size: 0.85rem; letter-spacing: 2px; border-radius: 4px; transition: var(--transition); display: inline-block; }
.btn-black:hover { background: var(--bg-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(42, 93, 132, 0.3); }

.btn-outline-white { border: 2px solid #fff; color: #fff; padding: 14px 30px; text-decoration: none; font-weight: bold; font-size: 0.85rem; letter-spacing: 2px; border-radius: 4px; transition: var(--transition); display: inline-block; }
.btn-outline-white:hover { background: #fff; color: #080808; }

/* HERO EDITORIAL */
.hero-editorial { height: 85vh; position: relative; background: url('https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=1920') center/cover; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; }
.hero-overlay { position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(26, 46, 62, 0.7), rgba(0,0,0,0.4)); }
.hero-text { position: relative; z-index: 2; max-width: 900px; color: #fff; padding: 0 20px; }
.hero-text h3 { font-size: 1rem; letter-spacing: 4px; font-weight: normal; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero-text h1 { font-size: 4.5rem; line-height: 1.1; margin: 0 0 30px 0; font-weight: 800; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.hero-text p { font-size: 1.2rem; margin-bottom: 40px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* PRODUCTOS GRID */
.productos-grid-section { padding: 100px 0; background: var(--bg-light); width: 100%; }
.section-heading { font-size: 3rem; margin: 0 0 60px 0; font-weight: 800; color: var(--bg-dark); }
.t-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.t-card { background: #fff; display: flex; flex-direction: column; transition: var(--transition); border-radius: 24px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.04); overflow: hidden; }
.animated-card:hover { box-shadow: 0 25px 50px rgba(42, 93, 132, 0.15); transform: translateY(-12px); border-color: var(--brand-blue); }

.t-img { height: 300px; overflow: hidden; position: relative; background: #f0f0f0; }
.t-img::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: linear-gradient(to top, rgba(0,0,0,0.15), transparent); z-index: 1; }
.t-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 0; }
.animated-card:hover .t-img img { transform: scale(1.08); }

.tag-nuevo, .tag-premium { position: absolute; top: 20px; right: 20px; color: #fff; padding: 6px 16px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; z-index: 2; border-radius: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.tag-nuevo { background: var(--brand-blue); }
.tag-premium { background: var(--accent-gold); color: #080808; }

.t-info { padding: 35px 30px; flex-grow: 1; text-align: center; }
.t-info h3 { margin: 0 0 15px 0; font-size: 1.3rem; display: flex; justify-content: center; align-items: center; gap: 10px; color: #080808; font-weight: 800; }
.t-info h3 i { color: var(--brand-blue); font-size: 1.1rem; }
.card-divider { width: 40px; height: 3px; background: var(--accent-gold); margin: 0 auto 15px auto; border-radius: 2px; transition: width 0.3s ease; }
.animated-card:hover .card-divider { width: 80px; background: var(--brand-blue); }
.t-info p { margin: 0; color: var(--text-gray); font-size: 0.95rem; line-height: 1.7; }

/* FIX: COMPARADOR ALINEADO, PERFECTO Y ESTABLE */
.comparador-section { padding: 40px 0 120px; background: var(--bg-light); width: 100%; }
.table-responsive { width: 100%; overflow-x: auto; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.06); background: #fff; }
.comparador-table { width: 100%; border-collapse: collapse; text-align: center; min-width: 1000px; border: 1px solid #EAEAEA; }
.comparador-table th, .comparador-table td { border: 1px solid #EAEAEA; padding: 22px 15px; vertical-align: middle; }
.comparador-table th { background: var(--bg-dark); color: #fff; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border: 1px solid #1A2E3E; }
.comparador-table th.th-features { background: var(--brand-blue); text-align: left; padding-left: 30px; border: 1px solid var(--brand-blue); }
.comparador-table td { font-size: 0.95rem; color: var(--text-main); position: relative; } /* Eliminamos transition para evitar movimientos raros */
.feature-col { text-align: left; font-weight: bold; color: var(--bg-dark) !important; padding-left: 30px !important; }
.feature-col i { color: var(--brand-blue); font-size: 1.2rem; width: 25px; text-align: center; display: inline-block; }
.comparador-table small { display: block; color: var(--text-gray); margin-top: 5px; font-size: 0.8rem; }
.badge-gold { background: rgba(197, 160, 89, 0.1); color: #9A7B3E; padding: 6px 14px; border-radius: 50px; font-weight: bold; font-size: 0.85rem; border: 1px solid rgba(197, 160, 89, 0.4); display: inline-block; }

/* Fix Animación estable: Solo cambia el color, NADA de grosor ni transformaciones locas */
.hover-row:hover td { background: rgba(42, 93, 132, 0.05); color: var(--brand-blue); }
.hover-row:hover .feature-col { color: var(--brand-blue) !important; }
.hover-row:hover .badge-gold { background: var(--accent-gold); color: #fff; border-color: var(--accent-gold); }

/* DARK COLLECTION BANNER */
.dark-collection { background: #080808; color: #fff; padding: 0; width: 100%; }
.flex-collection { display: flex; min-height: 500px; padding: 0; }
.dc-text { flex: 1; padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.gold-text { color: var(--accent-gold); letter-spacing: 3px; font-size: 0.8rem; margin-bottom: 10px; font-weight: bold; }
.dc-text h2 { font-size: 4rem; line-height: 1; margin: 0 0 30px 0; font-weight: 800; }
.dc-text h2 span { font-weight: 300; font-size: 3rem; font-style: italic; color: #88A2B8; }
.dc-tags { margin: 30px 0; font-size: 0.85rem; letter-spacing: 2px; color: #88A2B8; }
.dc-bottom { font-size: 1.1rem; font-weight: normal; margin: 0; color: #E5E4E2; }
.dc-image { flex: 1; }
.dc-image img { width: 100%; height: 100%; object-fit: cover; }

/* TRANSFORMA TUS ESPACIOS */
.transforma-section { padding: 100px 0; background: #fff; width: 100%; }
.flex-transforma { display: flex; gap: 80px; align-items: center; }
.tr-text { flex: 1; }
.tr-text h2 { font-size: 3.5rem; line-height: 1.1; margin: 0 0 30px 0; color: var(--bg-dark); }
.tr-text p { font-size: 1.1rem; color: var(--text-gray); margin-bottom: 20px; }
.tr-image { flex: 1; height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(42, 93, 132, 0.1); }
.tr-image img { width: 100%; height: 100%; object-fit: cover; }

/* TECHNICAL SPECS */
.technical-specs { padding: 0 0 100px 0; background: #fff; width: 100%; }
.flex-specs { display: flex; border: 1px solid #EEE; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
.spec-box { flex: 1; padding: 50px 30px; text-align: center; border-right: 1px solid #EEE; }
.spec-box:last-child { border-right: none; }
.dark-spec { background: var(--bg-light); }
.spec-box i { font-size: 2.5rem; margin-bottom: 20px; color: var(--brand-blue); }
.spec-box h4 { margin: 0 0 15px 0; font-size: 1.1rem; font-weight: 800; color: var(--bg-dark); }
.spec-box h3 { font-size: 3rem; margin: 0; line-height: 1; color: var(--accent-gold); }
.spec-box span { display: block; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; color: var(--text-gray); }
.spec-box p { font-size: 0.9rem; color: var(--text-gray); margin: 0; }

/* FIX: RAZONES VERTICALES Y CREADAS EN 4 COLUMNAS CON ICONOS SUPERIORES */
.razones-tecnoline { padding: 120px 0; background: var(--bg-light); border-top: 1px solid #EEE; width: 100%; }
.grid-4-reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; margin-top: 50px; }
.rz-item-vertical { padding: 40px 20px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #EAEAEA; transition: var(--transition); }
.rz-item-vertical:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(42, 93, 132, 0.1); border-color: var(--brand-blue); }
.rz-icon-v { font-size: 3rem; color: var(--accent-gold); margin-bottom: 20px; display: block; }
.rz-item-vertical h4 { font-size: 1.1rem; margin: 0 0 15px 0; font-weight: 800; color: var(--bg-dark); }
.rz-item-vertical p { color: var(--text-gray); margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* AUTOMATIZACIÓN BANNER */
.automatizacion-banner { background: #fff; padding: 50px 0; width: 100%; }
.flex-auto { display: flex; align-items: center; padding: 0; gap: 50px; }
.au-text { flex: 1; padding: 50px 40px 50px 0; }
.au-text h2 { font-size: 3.5rem; line-height: 1.1; margin: 0 0 30px 0; color: var(--bg-dark); }
.au-text p { font-size: 1.1rem; color: var(--text-gray); margin-bottom: 25px; }
.au-image { flex: 1; height: 500px; padding-right: 40px;}
.au-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 40px rgba(42, 93, 132, 0.15);}

/* SECCIÓN MAPAS ARMONIOSA */
.mapas-harmonious { padding: 100px 0 120px; background: var(--bg-light); border-top: 1px solid #EAEAEA; width: 100%; }
.mapas-header { margin-bottom: 60px; }
.gold-text-center { color: var(--accent-gold); letter-spacing: 3px; font-size: 0.85rem; font-weight: bold; display: block; text-align: center; margin-bottom: 10px; }
.sub-mapas { color: var(--text-gray); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.mapas-grid-clean { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.mapa-card-clean { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: var(--transition); border: 1px solid #EAEAEA; }
.mapa-card-clean:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(42, 93, 132, 0.15); border-color: var(--brand-blue); }
.mapa-frame-clean { height: 350px; width: 100%; }
.mapa-frame-clean iframe { width: 100%; height: 100%; }
.mapa-info-clean { padding: 30px; text-align: center; }
.mapa-info-clean h4 { font-size: 1.2rem; color: var(--bg-dark); margin: 0 0 10px 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; }
.mapa-info-clean h4 i { color: var(--brand-blue); }
.mapa-info-clean p { color: var(--text-gray); margin: 0; }

/* FIX: FOOTER A PANTALLA COMPLETA Y LOGO MASIVO */
.harmonious-footer { background: var(--bg-footer); color: #A0B2C1; padding-top: 80px; width: 100%; box-sizing: border-box; }
.footer-top-btn { text-align: center; margin-bottom: 80px; }
.btn-outline-gold { display: inline-block; border: 2px solid var(--accent-gold); color: var(--accent-gold); padding: 18px 50px; font-weight: 900; letter-spacing: 2px; border-radius: 4px; text-decoration: none; transition: var(--transition); }
.btn-outline-gold:hover { background: var(--accent-gold); color: var(--bg-dark); box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2); }

.footer-main-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; }
.f-logo-massive { height: auto; max-height: 120px; width: auto; max-width: 100%; filter: brightness(0) invert(1); margin-bottom: 25px; }

.f-col-brand p { font-size: 0.95rem; line-height: 1.8; max-width: 320px; }
.f-socials-blue { display: flex; gap: 15px; margin-top: 25px; }
.f-socials-blue a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.05); color: #fff; border-radius: 50%; text-decoration: none; transition: var(--transition); }
.f-socials-blue a:hover { background: var(--brand-blue); transform: translateY(-3px); }

.f-col-links h4, .f-col-contact h4 { font-size: 0.9rem; letter-spacing: 2px; margin: 0 0 25px 0; color: #fff; font-weight: 900; }
.f-col-links ul { list-style: none; padding: 0; margin: 0; }
.f-col-links li { margin-bottom: 15px; }
.f-col-links a { color: #A0B2C1; text-decoration: none; font-size: 0.9rem; transition: var(--transition); font-weight: 600; }
.f-col-links a:hover { color: var(--accent-gold); padding-left: 5px; }

.f-col-contact p { font-size: 0.9rem; margin: 0 0 10px 0; line-height: 1.6; display: flex; gap: 15px; align-items: flex-start; }
.f-col-contact i { color: var(--accent-gold); font-size: 1.1rem; margin-top: 2px; }
.f-col-contact span { display: block; }
.f-col-contact strong { color: #fff; display: block; margin-bottom: 2px; font-weight: 800; letter-spacing: 1px; }

.footer-bottom-bar { border-top: 1px solid rgba(255,255,255,0.05); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #88A2B8; }
.fb-right { display: flex; gap: 30px; }
.fb-right a { color: #88A2B8; text-decoration: none; font-weight: bold; letter-spacing: 1px; transition: var(--transition); }
.fb-right a:hover { color: #fff; }

/* FIX: CRÉDITOS ARCADIAN FULL WIDTH Y ELEGANTE */
.arcadian-credits-harmonious { 
    background: #0d151c; /* Gris casi negro, muy sutil */
    width: 100%; 
    box-sizing: border-box; 
    padding: 20px 0; 
    text-align: center; 
    border-top: 1px solid rgba(255,255,255,0.02); 
}
.arcadian-credits-harmonious p {
    margin: 0;
    color: #4a6375;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    font-weight: 500;
}
.arcadian-link-hover { 
    color: #61849c; /* Platino sutil */
    text-decoration: none; 
    font-weight: 900; 
    margin-left: 5px; 
    letter-spacing: 2px; 
    transition: var(--transition); 
    display: inline-block; 
}
.arcadian-link-hover:hover { 
    color: var(--accent-gold); /* Brilla en dorado al pasar el mouse */
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.4); 
    transform: scale(1.02); 
}

/* FLOATING WIDGETS */
.floating-widgets { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 1000; }
.scroll-top { background: var(--brand-blue); color: #fff; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; text-decoration: none; transition: var(--transition); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.scroll-top:hover { background: var(--bg-dark); transform: translateY(-3px); }
.wa-btn { background: #25D366; color: #fff; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 30px; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: var(--transition); }
.wa-btn:hover { background: #1ebd5a; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.wa-pulse { animation: waPulse 2s infinite; }

/* MEDIA QUERIES */
@media (max-width: 1200px) {
    .t-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-main-grid { grid-template-columns: repeat(2, 1fr); gap: 50px; }
    .grid-4-reasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .nav-links, .nav-buttons, .top-bar { display: none; } 
    .flex-collection, .flex-transforma, .flex-auto { flex-direction: column; }
    .au-text { padding: 50px 0; }
    .au-image { padding-right: 0; height: 400px; width: 100%; }
    .dc-text, .tr-text { padding: 50px 0; }
    .dc-image, .tr-image { height: 400px; width: 100%; }
    .flex-specs { flex-direction: column; border-radius: 12px; }
    .spec-box { border-right: none; border-bottom: 1px solid #EEE; }
    .hero-text h1 { font-size: 3rem; }
    .mapas-grid-clean { grid-template-columns: 1fr; }
    .footer-main-grid { grid-template-columns: 1fr; text-align: center; }
    .f-col-contact p { justify-content: center; text-align: center; }
    .f-socials-blue { justify-content: center; }
    .footer-bottom-bar { flex-direction: column; gap: 20px; text-align: center; }
    .grid-4-reasons { grid-template-columns: 1fr; }
}