/* ============================================= BLP Chile – Energía Solar Sin Límites styles.css ============================================= */ /* Fuentes: se cargan desde (inc/head.php) con preconnect, en vez de @import aquí, para no encadenar peticiones bloqueantes. */ /* ─── RESET & VARIABLES ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --bg-soft: #f6f9f6; --bg-mid: #edf5ed; --blue: #002d92; --blue-dark: #001f66; --accent: #4faf4f; --accent-lt: #e8f5e9; --text: #1a202c; --muted: #4a5568; --border: #e2e8f0; --radius: 8px; --trans: all .18s cubic-bezier(.4,0,.2,1); } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } ul { list-style: none; } /* ─── UTILITIES ─── */ .container { max-width: 1220px; margin: 0 auto; padding: 0 24px; } .section-tag { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; } .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 800; line-height: 1.1; color: var(--blue-dark); } .section-title.light { color: #fff; } /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; padding: .6rem 1.4rem; border-radius: 50px; font-family: 'Barlow Condensed', sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: var(--trans); border: 2px solid transparent; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: #007aaa; transform: translateY(-2px); } .btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--blue-dark); transform: translateY(-2px); } .btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); } .btn-outline:hover { background: var(--blue); color: #fff; transform: translateY(-2px); } .btn-outline-white { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; } .btn-outline-white:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); } /* ─── SITE HEADER WRAPPER ─── */ #site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.3s ease; } /* ─── HEADER / NAV ─── */ header { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1000; /* Estado inicial transparente (efecto glass suave) */ background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(79, 175, 79, 0.5); /* Contorno verde sutil y profesional */ border-radius: 100px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); width: 94%; max-width: 1200px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Scrolled State (al bajar se pone blanco, sólido y profesional con contorno) */ #site-header.scrolled header { background: rgba(255, 255, 255, 0.98); /* Blanco premium */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 2px solid var(--accent); /* Borde verde elegante */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); top: 0.5rem; /* Sube un poco más para quedar compacto */ } /* Colores de links y logo en estado inicial (transparente) */ #site-header:not(.scrolled) .nav-link { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } #site-header:not(.scrolled) .nav-link:hover { color: var(--accent); border-color: var(--accent); opacity: 1; text-shadow: none; } /* Sobre el hero oscuro: se muestra la versión clara del logo (sin chip blanco) */ #site-header:not(.scrolled) .nav-logo-img--dark { display: none; } #site-header:not(.scrolled) .nav-logo-img--light { display: block; } #site-header:not(.scrolled) .hamburger span { background: #ffffff; } /* Colores originales al Scrollear (Blanco) */ #site-header.scrolled .nav-link { color: var(--text); } #site-header.scrolled .nav-link:hover { color: var(--blue); border-color: var(--accent); opacity: 1; } /* Header blanco (scroll): se muestra el logo a color */ #site-header.scrolled .nav-logo-img--light { display: none; } #site-header.scrolled .nav-logo-img--dark { display: block; filter: none; } #site-header.scrolled .hamburger span { background: var(--text); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 1.5rem; } /* El logo crece SIN alterar la altura del header: .nav-logo conserva fija la altura que aporta al layout (45px, la de siempre), y la imagen se agranda dentro de esa caja, centrada, sin empujar nada. flex-shrink:0 impide que el menú aplaste el logo en pantallas medianas. */ .nav-logo { display: flex; align-items: center; gap: .75rem; height: 40px; flex-shrink: 0; transition: transform 0.2s ease; } .nav-logo:hover { transform: scale(1.02); } .nav-logo-img { height: 48px; width: auto; object-fit: contain; flex-shrink: 0; } /* ── Tamaño del logo del header ─────────────────────────────── El cliente pidió que se lea el lema ("Energía Solar Sin Límites"), que a 48px quedaba en 6px: ilegible. Con el archivo antiguo (300x167, con aire transparente alrededor) hacía falta declarar 76px para que la marca visible midiera 66 y el lema 11.8 — y a esa altura el logo SE SALÍA de la píldora, 6px por arriba y 6 por abajo. El archivo actual viene recortado al contenido, así que la altura declarada es la que se ve: a 56px la marca mide 56 y el lema 9.8. Se lee igual de bien —es la misma cantidad de puntos, y ahora nítidos, porque el archivo pasó de 300 a 1019px de ancho— y entra completo en un header de 65px. */ .nav-logo { position: relative; z-index: 2; } .nav-logo-img { height: 56px; /* Sombra corta: despega el logo de la barra sobre el hero. */ filter: drop-shadow(0 2px 6px rgba(4, 10, 26, .35)); } #site-header.scrolled .nav-logo-img { filter: drop-shadow(0 1px 3px rgba(4, 10, 26, .12)); } /* En pantallas medianas el logo se modera para no apretar el menú. */ @media (max-width: 1024px) { .nav-logo-img { height: 50px; } } .nav-menu { display: flex; align-items: center; gap: 2rem; } .nav-item { position: relative; } .nav-link { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); padding: .4rem 0; display: flex; align-items: center; gap: .25rem; opacity: .8; transition: var(--trans); border-bottom: 2px solid transparent; } .nav-link:hover, .nav-item:hover > .nav-link { color: var(--blue); opacity: 1; border-color: var(--accent); } .nav-dropdown { position: absolute; top: calc(100% + .8rem); left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); min-width: 220px; padding: .4rem 0; opacity: 0; pointer-events: none; transition: var(--trans); box-shadow: 0 12px 36px rgba(0,0,0,.1); } .nav-item:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .nav-dropdown::before { content: ""; position: absolute; top: -1.5rem; left: 0; width: 100%; height: 1.5rem; } .nav-dropdown a { display: block; padding: .6rem 1.25rem; font-size: .88rem; color: var(--muted); transition: var(--trans); } .nav-dropdown a:hover { background: var(--accent-lt); color: var(--accent); padding-left: 1.6rem; } .nav-dropdown a.nav-dropdown-todo { display: none; } /* sólo celular: en escritorio la fila del menú ya navega */ .nav-cta { margin-left: 1rem; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; /* Es un