/* ========================================================================== VW SEGURIDAD PATRIMONIAL — BRAND COMPLIANCE PATCH vw_brand_fixes.css HOW TO USE: Add this line AFTER all other CSS links in : This file fixes brand deviations identified in the audit report. Each rule is annotated with WHY it was added. ========================================================================== */ /* ======================================================================== FIX 1 — TYPOGRAPHY: Override Titillium Web residue from custom-style.css WHY: custom-style.css sets font-family: 'Titillium Web' on the body. Titillium Web is NOT the brand font. The manual specifies Manrope (Bold/Medium/Regular). While style.css overrides this, a late-loading or cached custom-style.css can expose the wrong typeface. This ensures Manrope always wins regardless of load order. ======================================================================== */ body, h1, h2, h3, h4, h5, h6, p, a, li, span, input, textarea, button { font-family: 'Manrope', sans-serif !important; } /* ======================================================================== FIX 2 — COLORS: Neutralize orange and sky-blue template remnants WHY: custom-style.css defines --e-global-color-hover: #d88730 (orange) and --accent-color: #4aa5f0 (bright sky blue). Neither color appears in the brand manual (which only allows #0b2d5d, #606060, #ffffff, #000000). special-classes.css references these variables in hover states and tags. Mapping them to on-brand values eliminates any risk of off-brand color bleeding into the UI. ======================================================================== */ :root { /* Remap all off-brand variables to brand-approved colors */ --e-global-color-hover: #0b2d5d !important; /* Was: #d88730 orange — now: brand blue */ --accent-color: #0b2d5d !important; /* Was: #4aa5f0 sky blue — now: brand blue */ --primary--color: #1a2037 !important; /* Was: #242b44 — aligned to dark section bg */ } /* ======================================================================== FIX 3 — SECTION BACKGROUND HARMONY: valores-section WHY: The valores-section currently uses background-color: #0b2d5d (the brand's primary blue). This is the ONLY full-section instance of this color as a background. All other content sections use dark navy variants (~#1a2037). This inconsistency makes the section feel out of place. Using the dark navy aligns it with the surrounding sections, while the brand blue is reserved for the hero area and CTAs where it has maximum impact. ======================================================================== */ .valores-section { background-color: #1a2037 !important; } /* Add a branded blue accent line at the top of the section to maintain the brand blue's presence without overwhelming the background */ .valores-section::before { content: ""; display: block; height: 4px; background-color: #0b2d5d; width: 80px; margin: 0 auto; margin-bottom: 0; border-radius: 2px; } /* Give the valor cards a subtle left-border in brand blue as a typographic/branding accent — consistent with the manual's use of vertical rules as a design element. */ .card-valor-corporativo { border-left: 3px solid #0b2d5d !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } /* ======================================================================== FIX 4 — ANIMATION: Tone down the decorative background pulse animation WHY: The .star CSS keyframe animation causes decorative PNGs to pulse from invisible to fully visible and back, creating a cinematic, dramatic effect. The brand is serious and institutional (30-year security company). Kinetic background elements undermine the sense of stability and trustworthiness. Replacing the animation with a very subtle static presence preserves the design intention without compromising brand tone. ======================================================================== */ @keyframes star { 0% { opacity: 0.04; transform: scale(1); } 50% { opacity: 0.10; transform: scale(1.01); } 100% { opacity: 0.04; transform: scale(1); } } /* Ensure decorative elements never draw attention away from content */ .star { animation: star 14s ease-in-out infinite; pointer-events: none; } /* ======================================================================== FIX 5 — PARTNERS SECTION: Align background to brand blue WHY: style.css already sets partners-section to background: #0B2D5D, which is correct per the brand palette. This rule ensures the override is not lost to specificity battles with the template's original dark navy. ======================================================================== */ .partners-section { background-color: #0b2d5d !important; } .partners-section .partners-box figure img:hover { opacity: 1; } /* ======================================================================== FIX 6 — CONTACT FORM: Ensure consistent button styling WHY: The send button (.btn-enviar-vw) uses border-radius: 8px while all other primary buttons on the page use border-radius: 15px. Visual consistency in button shape is a basic UI discipline — mixing corner radii signals a lack of design system coherence. Aligning to 15px matches the established button language across the page. ======================================================================== */ .btn-enviar-vw { border-radius: 15px !important; font-family: 'Manrope', sans-serif !important; letter-spacing: 0.5px; } /* ======================================================================== FIX 7 — NAVBAR CONTACT BUTTON: Subtle hover state improvement WHY: The current hover turns the "Contáctenos" button from solid blue to transparent with a white border. On the dark header, transparent reveals the dark background, which reduces the button's prominence at the moment of user intent. A lighter blue hover maintains the filled shape while providing clear feedback. ======================================================================== */ .home-header-section .main-header .navbar-collapse .btn-talk a:hover { background: #163d7a !important; /* Lighter shade of brand blue */ border-color: #163d7a !important; color: #ffffff !important; } /* ======================================================================== FIX 8 — SERVICE CARDS HOVER: Remove white border, use brand blue glow WHY: The current card hover adds a white border. On a dark background, white borders are high-contrast and jarring. A subtle box-shadow in brand blue is more sophisticated and consistent with the palette. ======================================================================== */ .our-services-section .services-content:hover { border: 2px solid rgba(11, 45, 93, 0.8) !important; box-shadow: 0 8px 30px rgba(11, 45, 93, 0.4); } /* ======================================================================== FIX 9 — FOOTER: Strengthen the brand blue presence WHY: The footer currently uses the same very dark navy as the body sections, causing it to blend in rather than close the page with authority. Using the brand's primary blue as the footer background matches the folleto's contact page, which also uses brand blue. ======================================================================== */ .footer-section { background-color: #0b2d5d !important; } .footer-bar-stacked { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; } /* ======================================================================== FIX 10 — LIMPIEZA SERVICE CARD: Styles for the new 7th service card WHY: The folleto dedicates a full page to the Limpieza, Higiene y Desinfección service. On the website it is barely mentioned. This CSS ensures the new card (see HTML fixes file) visually matches the existing six service cards perfectly. ======================================================================== */ /* No additional CSS needed — the new card uses the same classes as the existing six cards (.services-content, .icons-rounded-box, .services-box). It will inherit all existing styles automatically. */ /* ======================================================================== FIX 11 — VALORES CARDS: Fix the unclosed style attribute consequence WHY: Lines 767, 779, and 791 in index2.html have unclosed quote marks in their style attributes. The h5 text is consumed as CSS property value and never rendered. Until the HTML is fixed, this CSS provides a fallback that makes the h5 at least visible (the browser still creates the element, just without text content). The REAL fix is in the HTML — see vw_html_fixes.md. ======================================================================== */ .card-valor-corporativo h5 { color: #e2e8f0 !important; font-size: 16px !important; letter-spacing: 2px !important; font-weight: 600 !important; margin-bottom: 12px !important; text-transform: uppercase; } .card-valor-corporativo .autor-cita h6 { color: #0b2d5d; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background-color: rgba(255, 255, 255, 0.12); display: inline-block; padding: 4px 12px; border-radius: 20px; } /* ======================================================= MEJORA DE SECCIÓN FILOSOFÍA Y VALORES ======================================================= */ /* 1. Quitamos la línea que estaba arriba del todo */ .valores-section::before { display: none !important; } /* 2. Creamos la línea por debajo de los títulos */ .valores-section .col-12 h2::after { content: ""; display: block; width: 60px; height: 3px; background-color: #0b2d5d; /* Azul Marca */ margin: 20px auto 0; /* Centrada y con espacio arriba */ border-radius: 2px; } /* 3. Mejoramos la legibilidad de las etiquetas (Gestión, Canales, Inversión) */ .card-valor-corporativo .autor-cita h6 { color: #ffffff !important; /* Texto Blanco para máximo contraste */ background-color: #0b2d5d !important; /* Fondo Azul VW para que resalte */ font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; padding: 6px 15px !important; border-radius: 50px !important; display: inline-block; margin-top: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sutil sombra para dar profundidad */ } /* Ajuste opcional: mejorar el color de las comillas para que se vean más finas */ .card-valor-corporativo .icon-quote i { color: rgba(255, 255, 255, 0.2) !important; font-size: 24px; } /* ======================================================= REPARACIÓN Y MEJORA: SECCIÓN FILOSOFÍA ======================================================= */ .valores-section { background-color: #1a2037 !important; /* Fondo azul oscuro profundo */ padding: 80px 0 !important; } /* Línea decorativa debajo del título */ .tit-filosofia { position: relative; padding-bottom: 20px; margin-bottom: 20px; } .tit-filosofia::before { content: ""; display: block; width: 60px; height: 3px; background-color: #0b2d5d; /* Azul Marca */ margin: 15px auto 0; border-radius: 2px; } /* Tarjetas de Valores */ .card-valor-corporativo { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 15px; padding: 40px 30px; display: flex; flex-direction: column; transition: all 0.3s ease; } .card-valor-corporativo:hover { background: rgba(255, 255, 255, 0.06) !important; transform: translateY(-5px); } .card-valor-corporativo .icon-quote i { color: #0b2d5d; font-size: 28px; opacity: 0.8; } .card-valor-corporativo h5 { color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; margin: 15px 0; text-transform: uppercase; letter-spacing: 1px; } .card-valor-corporativo .texto-cita { color: #cbd5e1 !important; font-size: 15px !important; line-height: 1.6; font-style: italic; } /* ETIQUETAS INFERIORES (Gestión, Canales, Inversión) */ .card-valor-corporativo .autor-cita h6 { display: inline-block; background-color: #0b2d5d !important; /* Azul sólido */ color: #ffffff !important; /* Texto blanco */ padding: 8px 18px !important; border-radius: 50px; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px; border: 1px solid rgba(255,255,255,0.2); } /* ======================================================= AJUSTE DE LÍNEA DE FILOSOFÍA (ENTRE TEXTOS) ======================================================= */ /* 1. Quitamos la línea de abajo */ .tit-filosofia::after { display: none !important; } /* 2. Creamos la línea arriba del título (quedará entre el h6 y el h2) */ .tit-filosofia::before { content: ""; display: block; width: 60px; height: 3px; background-color: #0b2d5d; /* Azul Marca */ margin: 20px auto 20px; /* 0 arriba para pegarse al h6, 20px abajo para separarse del h2 */ border-radius: 2px; } /* Ajuste opcional para el h6 para que no tenga tanto margen inferior */ .valores-section h6 { margin-bottom: 15px !important; } /* FORZAR IDENTIDAD VW */ :root { --vw-azul: #0b2d5d; --vw-gris: #606060; --accent-color: var(--vw-azul) !important; /* Reemplaza el celeste/naranja */ } body, h1, h2, h3, h4, h5, h6, p { font-family: 'Manrope', sans-serif !important; } /* Corregir el naranja de las comillas y hovers */ .card-valor-corporativo .icon-quote i, .social-icons a:hover .social-networks { color: var(--vw-azul) !important; } .card-valor-corporativo .autor-cita h6 { background-color: var(--vw-azul) !important; color: #ffffff !important; padding: 8px 15px !important; border-radius: 50px; font-size: 12px !important; display: inline-block; } .star { opacity: 0.1 !important; /* Que sea un detalle sutil, no una distracción */ } /* ======================================================= REPARACIÓN DE SECCIÓN "LA EMPRESA" (IMÁGENES) ======================================================= */ /* Evita que las imágenes se corten por arriba o por abajo */ .about-us-section { overflow: visible !important; padding-top: 140px !important; padding-bottom: 180px !important; /* Espacio extra para la imagen f3 que sobresale */ } /* Alineación vertical del texto con el bloque de imágenes */ .about-us-section .row.align-items-center { display: flex; align-items: center; } /* Asegura que el bloque de imágenes tenga espacio suficiente */ .about-content-img { position: relative; min-height: 550px; /* Altura mínima para que quepan las 3 fotos */ margin-bottom: 50px; } /* ======================================================= MEJORA DE COMILLAS (PILARES OPERATIVOS) ======================================================= */ .card-valor-corporativo .icon-quote i { color: #ffffff !important; /* Comillas Blancas */ opacity: 1 !important; font-size: 30px; } /* Forzar visibilidad del texto en La Empresa */ .about-us-content p.aboutus-p { display: block !important; opacity: 1 !important; visibility: visible !important; color: #cbd5e1 !important; } /* Alineación de iconos de check */ .checklist-vw-fixed i { flex-shrink: 0; } .checklist-vw-fixed span { line-height: 1.2; } /* ======================================================= CONSISTENCIA VISUAL: REDONDEADO DE IMÁGENES (10px) ======================================================= */ /* 1. Aplicar a todas las imágenes de contenido */ img { border-radius: 10px !important; } /* 2. EXCEPCIONES: Imágenes que NO deben redondearse (Texturas de fondo, estrellas, decoraciones) */ .star, .banner-right-img img, .about-left-back-img img, .who-we-right-fig img, .navbar-brand img { border-radius: 0 !important; } /* 3. Ajuste especial para las fotos de las Sucursales (Oficinas) y fotos de Acreditaciones para que el borde se vea limpio */ .services-content figure img, .teams-fig img, .about-content-img img { object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */ overflow: hidden; } /* 4. Si las tarjetas de "Pilares Operativos" o "Sucursales" tienen fondos que sobresalen, aseguramos que el contenedor también respete el redondeado */ .card-valor-corporativo, .services-content, .partners-box { border-radius: 10px !important; overflow: hidden; /* Esto obliga a que cualquier cosa adentro respete el borde */ } /* ======================================================= REPARACIÓN SECCIÓN OFICINAS (TARJETAS PREMIUM) ======================================================= */ /* 1. Evitar que se corte la parte de arriba (etiquetas de provincias) */ .pricing-plan-section { overflow: visible !important; padding-top: 140px !important; /* Espacio para que respiren las etiquetas */ } /* 2. Hacer que la imagen ocupe todo el ancho de la tarjeta */ .pricing-plan-section .services-content { padding: 0 !important; /* Quitamos el padding general para que la imagen toque los bordes */ overflow: hidden; display: flex; flex-direction: column; } /* Contenedor de la imagen */ .pricing-plan-section .icons-rounded-box { width: 100% !important; height: 220px !important; /* Altura fija para que todas las fotos queden iguales */ margin: 0 0 25px 0 !important; border-radius: 0 !important; /* Que llegue al borde */ padding: 0 !important; background: none !important; } .pricing-plan-section .icons-rounded-box figure, .pricing-plan-section .icons-rounded-box img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Evita que la foto se deforme */ border-radius: 0 !important; } /* 3. Devolver el padding solo al texto y al botón para que no toquen los bordes */ .pricing-plan-section .pricing-plan-color, .pricing-plan-section .pricing-free-text, .pricing-plan-section .office-info-list, .pricing-plan-section .order-now-btn { padding-left: 25px !important; padding-right: 25px !important; } .pricing-plan-section .order-now-btn { margin-bottom: 30px !important; /* Espacio al final de la tarjeta */ } /* 4. Ajuste de la etiqueta de Provincia (Chubut, Santa Cruz, etc) */ .pricing-plan-section .pricing-plan-h5 { top: -20px !important; /* La posicionamos sobre el borde superior */ z-index: 10; left: 25px !important; right: auto !important; margin: 0 !important; } /* 5. Asegurar que los títulos no se pisen */ .pricing-plan-section .pricing-plan-color { font-size: 24px !important; margin-bottom: 35px !important; } /* ======================================================= REPOSICIONAMIENTO DE ETIQUETAS DE PROVINCIA ======================================================= */ .pricing-plan-section .pricing-plan-h5 { position: absolute !important; top: 15px !important; /* Bajamos la etiqueta adentro de la foto */ left: 15px !important; /* La alineamos al margen interno izquierdo */ right: auto !important; margin: 0 !important; /* Estética de "Badge" (Placa) */ background-color: #0b2d5d !important; /* Azul Marca */ color: #ffffff !important; padding: 6px 14px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; /* Aseguramos que se vea por encima de la imagen */ z-index: 20; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } /* Forzar que el contenedor de la tarjeta sea el punto de referencia */ .pricing-plan-section .services-content { position: relative !important; overflow: hidden !important; /* Esto asegura que el redondeado de 10px que pediste antes se aplique a la foto */ } /* ======================================================= ETIQUETAS DE PROVINCIA CENTRADAS SOBRE LA IMAGEN ======================================================= */ .pricing-plan-section .pricing-plan-h5 { position: absolute !important; top: 20px !important; /* Espacio desde el borde superior */ left: 50% !important; /* Lo movemos al centro exacto */ transform: translateX(-50%) !important; /* Truco para compensar el ancho del texto y que quede centrado real */ right: auto !important; margin: 0 !important; width: auto !important; /* Que el ancho se ajuste al texto */ white-space: nowrap !important; /* Evita que el nombre de la provincia se parta en dos líneas */ /* Estética de la Placa */ background-color: #0b2d5d !important; color: #ffffff !important; padding: 6px 20px !important; /* Un poco más de aire a los costados */ border-radius: 30px !important; /* Forma de píldora, más moderna */ font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; z-index: 20; box-shadow: 0 4px 15px rgba(0,0,0,0.4); } /* ======================================================= FIX ICONOS SOCIALES (WHATSAPP Y MAIL) ======================================================= */ /* 1. Tamaño base de los iconos */ .social-icons .social-networks { font-size: 20px !important; /* Aumentamos el tamaño general */ transition: all 0.3s ease-in-out !important; } /* 2. Ajuste específico para WhatsApp (suele verse más chico que el sobre) */ .social-icons .fa-whatsapp { font-size: 26px !important; /* Lo hacemos destacar más */ } /* 3. FIX DE COLOR EN HOVER: Glyph blanco sobre fondo azul */ .social-icons a:hover .social-networks { color: #ffffff !important; /* Icono Blanco */ background-color: #0b2d5d !important; /* Fondo Azul Marca */ transform: scale(1.1); /* Efecto sutil de crecimiento */ } /* Asegurar que el icono de Mail también responda igual */ .social-icons .fa-envelope { font-size: 22px !important; } /* ======================================================= STICKY HEADER PREMIUM - VW SEGURIDAD ======================================================= */ /* 1. Estado Base de la Cabecera */ .header { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 1000 !important; /* Siempre por encima de todo */ transition: all 0.4s ease-in-out; padding: 10px 0; background: transparent; /* Empieza transparente sobre el banner */ } /* 2. Estado cuando el usuario hace Scroll (Clase añadida por JS) */ .header.sticky-active { background-color: rgba(27, 33, 55, 0.98) !important; /* Azul muy oscuro casi sólido */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); padding: 5px 0; /* Se achica un poco para ganar espacio visual */ } /* Ajuste del Logo al achicarse la cabecera */ .header.sticky-active .diverge-logo { max-height: 80px !important; /* Achicamos el logo sutilmente */ transform: scale(0.95); } /* Ajuste para que el Banner no se meta debajo del header al cargar */ /* Como el header ahora es fixed, deja de ocupar espacio real. Añadimos un margen al banner para compensar. */ .home-banner-section { padding-top: 180px !important; /* Ajusta este valor según el alto de tu header */ } @media (max-width: 991px) { .header { background-color: #1b2137 !important; /* En móviles mejor fondo sólido siempre */ } .home-banner-section { padding-top: 140px !important; } } /* ======================================================= OPTIMIZACIÓN MOBILE: STICKY + ANTI-SCROLL HORIZONTAL ======================================================= */ /* 1. ELIMINAR SCROLL HORIZONTAL (Global) */ html, body { overflow-x: hidden !important; width: 100%; position: relative; } /* Forzar a que las filas de Bootstrap no se desborden */ .row { margin-right: 0 !important; margin-left: 0 !important; } /* 2. STICKY HEADER EN MOBILE */ @media (max-width: 991px) { .header { position: fixed !important; top: 0; background-color: #171d34 !important; /* Fondo sólido desde el inicio en mobile */ padding: 10px 0 !important; height: auto; } /* Achicamos un poco el logo en mobile para que no ocupe media pantalla */ .header .diverge-logo { max-height: 60px !important; } /* Ajuste del menú desplegable cuando se abre */ .navbar-collapse { background-color: #171d34 !important; position: absolute; top: 100%; left: 0; width: 100%; padding: 20px; border-bottom: 3px solid #0b2d5d; box-shadow: 0 10px 20px rgba(0,0,0,0.5); } /* Evitar que el banner se meta debajo del header fijo en mobile */ .home-banner-section { padding-top: 120px !important; } /* Ocultar imágenes decorativas que suelen romper el ancho en mobile */ .banner-right-img, .about-left-back-img, .who-we-right-fig { display: none !important; /* En mobile menos es más */ } } /* 3. FIX ESPECÍFICO PARA EL FORMULARIO (Suele causar desborde) */ .contact-us-wrapper { max-width: 100% !important; padding: 0 15px; overflow: hidden; } /* --- SEPARACIÓN DE BOTONES EN EL BANNER --- */ .discover-btn-banner a:first-child { margin-right: 15px !important; /* Aumentamos la separación (estaba en 10px o 15px) */ } /* Opcional: Si usás flexbox en el contenedor, podés usar gap */ .discover-btn-banner { display: flex !important; justify-content: flex-start; /* Alinea a la izquierda en desktop */ gap: 20px; /* Crea espacio uniforme entre elementos */ } @media (max-width: 991px) { .discover-btn-banner { justify-content: center; /* Centra los botones en mobile */ gap: 15px; /* Espacio vertical cuando están uno sobre otro */ } .discover-btn-banner a:first-child { margin-right: 0 !important; /* Quitamos el margen lateral en mobile para que el centrado sea perfecto */ } }