/* index.css — HVAC Instant Quote Landing v2.0 (rediseño 2026-05-14) */
/* Prefijo lq- en todas las clases nuevas para evitar colisiones con index.css */
/* =============================================
 FONTS — Monument Extended (display font, hero + headings)
 ============================================= */
@font-face {font-family:'Monument Extended'; src:url('../fonts/MonumentExtended-Regular.otf') format('opentype'); font-weight:400; font-display:swap;}
@font-face {font-family:'Monument Extended'; src:url('../fonts/MonumentExtended-Ultrabold.otf') format('opentype'); font-weight:800; font-display:swap;}
/* =============================================
 1. VARIABLES & TOKENS (extiende index.css)
 ============================================= */
:root {--primary-green:#38ed24; --primary-black:#000000; --primary-white:#ffffff; --border-color:#e0e0e0; --card-shadow-hover:0 10px 28px rgba(0, 0, 0, 0.14); /* === Tokens del rediseño (Sprint 5+) === */
 --c-neon:#00FF26; --c-neon-dim:rgba(0, 255, 38, 0.35); --c-glass:rgba(217, 211, 211, 0.2); --c-divider:#AAAAAA; --space-xs:8px; --space-sm:16px; --space-md:24px; --space-lg:40px; --space-xl:60px; --space-2xl:80px; --radius-sm:15px; --radius-md:16px; --radius-lg:25px; --font-display:'Monument Extended', sans-serif; --font-ui:'Inter', sans-serif;}
/* =============================================
 UTILIDADES — Section Glow (rediseño)
 ============================================= */
.lq-section-glow {position:relative;}
.lq-section-glow::before {content:''; position:absolute; width:1000px; height:1000px; background:radial-gradient(circle, rgba(0, 255, 38, 0.45) 0%, rgba(0, 255, 38, 0) 70%); border-radius:50%; filter:blur(150px); z-index:-1; pointer-events:none; top:50%; transform:translateY(-50%);}
.lq-glow-right::before {right:-500px;}
.lq-glow-left::before {left:-500px;}
/* =============================================
 2. RESET & BASE (necesario porque hvac-quote.css
 se carga de forma independiente)
 ============================================= */
* {margin:0; padding:0; box-sizing:border-box; font-family:"Montserrat", Arial, sans-serif;}
html {overflow-x:clip;}
body {background-color:#ffffff; color:#333; line-height:1.6; overflow-x:clip;}
a {text-decoration:none; color:inherit; transition:all 0.3s ease;}
ul {list-style:none;}
.container {width:100%; max-width:1200px; margin:0 auto; padding:0 20px;}
img {max-width:100%; height:auto;}
h1, h2, h3, h4 {font-weight:700;}
section {width:100%;}
/* =============================================
 3. HEADER — copiado literal de index.css
 ============================================= */
.main-header {position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,0.1); width:100%;}
.top-header {display:flex; align-items:center; justify-content:space-between; padding:0; background-color:var(--primary-black); min-height:60px;}
.logo-container {padding:10px 15px; background-color:var(--primary-black); display:flex; justify-content:flex-start; align-items:center; flex-shrink:0;}
.logo {max-width:clamp(100px, 15vw, 200px); height:auto;}
.header-right {display:flex; align-items:center; gap:15px; padding:0 15px; flex-shrink:0; justify-content:flex-end;}
.find-us {display:flex; align-items:center; gap:8px;}
.map-icon {background-color:#4285f4; color:white; width:35px; height:35px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.rating-badge {background-color:#209b41; color:white; padding:6px 10px; border-radius:4px; font-weight:bold; font-size:12px;}
.google-reviews {display:flex; align-items:center; gap:8px; color:var(--primary-white);}
.google-reviews i {font-size:20px; color:#4285f4;}
.review-info {display:flex; flex-direction:column; align-items:flex-start;}
.rating {font-size:12px; font-weight:600; color:#ffc107;}
.phone-button {background:transparent; border:2px solid var(--primary-green); color:var(--primary-white); padding:8px 16px; border-radius:20px; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase; white-space:nowrap;}
.phone-button:hover {background-color:var(--primary-green); color:var(--primary-white);}
.location-switcher {flex-grow:1; flex-shrink:1; display:none; justify-content:center; align-items:center; padding:0 20px; overflow:hidden;}
.location-switcher a {display:flex; align-items:center; color:var(--primary-white); font-size:18px; font-weight:700; text-decoration:none; white-space:nowrap; transition:all 0.3s ease;}
.location-switcher a:hover {color:var(--primary-green); transform:scale(1.05);}
.location-switcher i {color:var(--primary-green); font-size:18px; margin-right:10px; animation:spin-3d 3s linear infinite;}
.location-switcher .loc-highlight {color:var(--primary-green); margin:0 4px; display:inline-block; transition:all 0.3s ease;}
.location-switcher a:hover .loc-highlight {color:var(--primary-white);}
@keyframes spin-3d {from {transform:rotateY(0deg);}to {transform:rotateY(360deg);}}
.mobile-menu-phone-container {display:none; align-items:center; gap:10px; margin-left:auto; padding:0 15px;}
.mobile-menu-btn {display:none; font-size:24px; cursor:pointer; padding:15px; color:var(--primary-white); z-index:1001;}
.mobile-phone-button {background:transparent; border:2px solid var(--primary-green); color:var(--primary-white); padding:6px 12px; border-radius:15px; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase; white-space:nowrap; text-decoration:none;}
.mobile-phone-button:hover {background-color:var(--primary-green); color:var(--primary-white);}
.bottom-nav {background-color:var(--primary-white); border-bottom:1px solid var(--border-color); padding:0;}
.desktop-nav {background-color:var(--primary-white); display:flex; justify-content:center; width:100%;}
.desktop-nav ul {display:flex; justify-content:center; align-items:center; padding:0; margin:0; gap:clamp(15px, 3vw, 40px); max-width:1200px; width:100%; flex-wrap:wrap;}
.desktop-nav li {padding:0;}
.desktop-nav a {color:var(--primary-black); font-weight:600; font-size:clamp(12px, 1.5vw, 13px); transition:color 0.3s; position:relative; text-transform:uppercase; padding:15px 0; display:block; white-space:nowrap;}
.desktop-nav a:hover, .desktop-nav a.active {color:#209b41;}
.desktop-nav a:after {content:""; position:absolute; width:0; height:3px; bottom:0; left:0; background-color:var(--primary-green); transition:width 0.3s;}
.desktop-nav a:hover:after, .desktop-nav a.active:after {width:100%;}
.mobile-nav-container {display:none; position:fixed; top:0; right:-100%; width:100%; height:100%; background-color:var(--primary-black); z-index:1000; transition:right 0.3s ease; overflow-y:auto;}
.mobile-nav-container.active {right:0;}
.close-menu-btn {position:absolute; top:15px; right:15px; font-size:24px; color:var(--primary-white); cursor:pointer; z-index:1002;}
.mobile-nav {background-color:var(--primary-black); height:calc(100% - 50px); overflow-y:auto;}
.mobile-nav ul {display:flex; flex-direction:column; padding:0;}
.mobile-nav li {border-bottom:1px solid rgba(255,255,255,0.1);}
.mobile-nav a {color:var(--primary-white); font-weight:600; display:block; padding:15px 20px; font-size:16px;}
.mobile-nav a:hover, .mobile-nav a.active {color:var(--primary-green); background-color:rgba(255,255,255,0.05);}
/* =============================================
 4. HERO (rediseño + LERP animation)
 ============================================= */
.lq-hero {position:relative; display:flex; justify-content:flex-start; align-items:center; max-width:1200px; margin:0 auto; padding:var(--space-2xl) var(--space-md); min-height:clamp(400px, 60vh, 700px); z-index:2;}
.lq-hero__text {width:579px; max-width:100%; position:relative; z-index:5;}
.lq-hero__title {font-size:clamp(36px, 6vw, 66px); line-height:1.15; letter-spacing:-1px; margin-bottom:var(--space-md); display:block; color:var(--primary-black); text-wrap:balance; -webkit-text-wrap:balance;}
.lq-hero__title-regular {font-family:var(--font-display); font-weight:400; display:block; text-wrap:balance; -webkit-text-wrap:balance;}
.lq-hero__title-bold {font-family:var(--font-display); font-weight:800; display:block;}
.lq-hero__subtitle {font-size:clamp(15px, 1.6vw, 18px); color:var(--primary-black); line-height:1.5; margin-bottom:var(--space-lg); max-width:520px;}
/* Animation layer — HVAC image que viaja con scroll vía LERP JS */
.lq-animation-layer {position:fixed; bottom:30px; right:15px; width:600px; height:600px; z-index:1; pointer-events:none; will-change:transform;}
.lq-animation-fixed {width:100%; height:100%; object-fit:contain;}
.lq-btn-primary {display:inline-flex; align-items:center; justify-content:center; background:#000; color:#fff; padding:clamp(13px, 1.5vw, 17px) clamp(28px, 3.5vw, 44px); border-radius:50px; font-size:clamp(13px, 1.2vw, 15px); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; border:2px solid #000; cursor:pointer; min-height:48px; transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.lq-btn-primary:hover {background:var(--primary-green); border-color:var(--primary-green); color:#000; transform:translateY(-2px); box-shadow:0 6px 22px rgba(56, 237, 36, 0.38);}
/* Scroll container:el video sticky vive dentro de este bloque */
.lq-scroll-container {position:relative; overflow-x:clip;}
/* =============================================
 5. SERVICE CARDS (rediseño)
 ============================================= */
.lq-section-title {text-align:center; font-size:clamp(22px, 3vw, 32px); font-weight:700; color:#000; margin-bottom:clamp(32px, 5vw, 48px);}
.lq-services {display:flex; justify-content:center; align-items:stretch; gap:51px; flex-wrap:wrap; padding:var(--space-xl) var(--space-md); position:relative; z-index:2;}
.lq-service-card {width:365px; height:400px; background:var(--c-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255, 255, 255, 0.4); border-radius:var(--radius-lg); padding:var(--space-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 10px 30px rgba(0, 0, 0, 0.05); position:relative; z-index:5; transition:transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease; cursor:pointer; color:var(--primary-black);}
.lq-service-card:hover {transform:translateY(-12px); border-color:rgba(0, 255, 38, 0.5); box-shadow:0 20px 40px rgba(0, 255, 38, 0.15), inset 0 0 20px rgba(0, 255, 38, 0.05);}
.lq-service-card__icon {width:80px; height:80px; margin-bottom:var(--space-sm); transition:transform 0.4s ease, color 0.4s ease; color:var(--primary-black);}
.lq-service-card:hover .lq-service-card__icon {transform:scale(1.15); color:var(--c-neon);}
.lq-service-card__title {font-size:clamp(22px, 2.5vw, 30px); font-weight:700; margin-bottom:var(--space-xs); line-height:1.2;}
.lq-service-card__desc {font-size:clamp(14px, 1.4vw, 18px); opacity:0.7; line-height:1.5;}
/* =============================================
 6. TRUST BAR (rediseño)
 ============================================= */
.lq-trust-bar {display:flex; align-items:center; justify-content:space-around; gap:var(--space-md); max-width:1193px; height:130px; margin:var(--space-lg) auto; padding:0 var(--space-lg); background:var(--c-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255, 255, 255, 0.4); border-radius:var(--radius-lg); box-shadow:0 10px 30px rgba(0, 0, 0, 0.05); position:relative; z-index:2; color:var(--primary-black);}
.lq-trust-item {display:flex; align-items:center; gap:var(--space-sm);}
.lq-trust-item__icon {width:clamp(36px, 4vw, 54px); height:clamp(36px, 4vw, 54px); flex-shrink:0; color:var(--primary-black);}
.lq-trust-item__label {font-size:clamp(15px, 1.8vw, 25px); font-weight:600; line-height:1.2;}
/* =============================================
 7. BRAND LOGOS — marquee infinito (rediseño)
 ============================================= */
.lq-brands {padding:var(--space-lg) 0; width:100%; overflow:hidden; position:relative; z-index:2; -webkit-mask-image:linear-gradient(to right, transparent, black 15%, black 85%, transparent); mask-image:linear-gradient(to right, transparent, black 15%, black 85%, transparent);}
.lq-brands__track {display:flex; width:max-content; animation:lq-marquee-loop 35s linear infinite;}
.lq-brands__track:hover {animation-play-state:paused;}
.lq-brands__group {display:flex; align-items:center; gap:clamp(40px, 6vw, 100px); padding-right:clamp(40px, 6vw, 100px); flex-shrink:0;}
.lq-brands__logo {height:clamp(40px, 4vw, 60px); width:auto; object-fit:contain; opacity:0.6; filter:grayscale(100%); transition:opacity 0.3s ease, filter 0.3s ease; flex-shrink:0;}
.lq-brands__logo:hover {opacity:1; filter:grayscale(0);}
@keyframes lq-marquee-loop {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}}
/* Accessibility:pausa el marquee si el usuario prefiere reduced motion */
@media (prefers-reduced-motion:reduce) {.lq-brands__track {animation:none;}}
/* =============================================
 8. HOW IT WORKS (rediseño)
 ============================================= */
.lq-how-it-works {display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:var(--space-2xl) var(--space-md); gap:var(--space-xl); position:relative; z-index:2;}
.lq-hiw__gear {width:clamp(280px, 35vw, 466px); height:auto; flex-shrink:0; will-change:transform; /* preparado para la rotación scroll-driven del Sprint 13 */}
.lq-hiw__content {flex:1; min-width:0;}
.lq-hiw__title {font-family:var(--font-display); font-size:clamp(36px, 5vw, 51px); font-weight:800; color:var(--primary-black); line-height:1.1; margin-bottom:var(--space-xs);}
.lq-hiw__subtitle {font-family:var(--font-display); font-size:clamp(22px, 3vw, 34px); font-weight:400; color:var(--primary-black); line-height:1.2; margin-bottom:var(--space-lg);}
.lq-hiw__steps {display:flex; flex-direction:column; gap:var(--space-lg);}
.lq-hiw-step {padding-left:var(--space-sm); border-left:2px solid rgba(0, 0, 0, 0.15);}
.lq-hiw-step__title {display:block; font-size:clamp(16px, 1.6vw, 20px); font-weight:700; color:var(--primary-black); margin-bottom:8px; line-height:1.2;}
.lq-hiw-step__desc {font-size:clamp(14px, 1.4vw, 18px); color:var(--primary-black); opacity:0.8; line-height:1.5;}
/* =============================================
 9. TESTIMONIALS — marquee infinito (rediseño)
 ============================================= */
.lq-testimonials {padding:var(--space-2xl) 0; position:relative; z-index:2;}
.lq-testimonials__header {font-family:var(--font-display); font-size:clamp(36px, 5vw, 55px); font-weight:800; text-align:center; margin-bottom:var(--space-xl); color:var(--primary-black); line-height:1.1;}
.lq-testimonials__track-container {overflow:hidden; width:100%; position:relative; z-index:5; padding:var(--space-sm) 0;}
.lq-testimonials__track {display:flex; width:max-content; animation:lq-marquee-loop 50s linear infinite;}
.lq-testimonials__track:hover {animation-play-state:paused;}
.lq-testimonials__group {display:flex; align-items:center; gap:22px; padding-right:22px; flex-shrink:0;}
.lq-testi-card {width:336px; height:280px; flex-shrink:0; background:var(--c-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255, 255, 255, 0.4); border-radius:var(--radius-md); padding:32px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 10px 30px rgba(0,0,0,0.05); position:relative; z-index:5;}
.lq-testi-card__quote {font-family:var(--font-ui); font-size:16px; font-weight:500; line-height:1.5; color:var(--primary-black); flex:1;}
.lq-testi-card__author {display:flex; align-items:center; gap:14px;}
.lq-testi-card__avatar {width:44px; height:44px; border-radius:7px; object-fit:cover; flex-shrink:0;}
.lq-testi-card__info {display:flex; flex-direction:column; gap:2px;}
.lq-testi-card__name {font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--primary-black);}
.lq-testi-card__role {font-family:var(--font-ui); font-size:14px; font-weight:400; color:rgba(0,0,0,0.55);}
/* Accessibility:pausa el marquee si el usuario prefiere reduced motion */
@media (prefers-reduced-motion:reduce) {.lq-testimonials__track {animation:none;}}
/* =============================================
 10. SMART TECHNOLOGY — CARRIER INFINITY (rediseño)
 ============================================= */
.lq-smart-tech {display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:var(--space-2xl) var(--space-md); gap:60px; position:relative; z-index:2;}
.lq-smart-tech__content {flex:1; max-width:588px; min-width:0;}
.lq-smart-tech__title {font-family:var(--font-display); font-size:clamp(36px, 5vw, 56px); font-weight:800; color:var(--primary-black); line-height:1.1; margin-bottom:var(--space-sm);}
.lq-smart-tech__subtitle {font-size:clamp(16px, 1.8vw, 20px); font-weight:700; color:var(--primary-black); margin-bottom:var(--space-sm);}
.lq-smart-tech__text {font-size:clamp(15px, 1.6vw, 20px); font-weight:400; color:var(--primary-black); line-height:1.5; margin-bottom:var(--space-md);}
.lq-smart-tech__list {list-style:disc; padding-left:24px; font-size:clamp(15px, 1.6vw, 20px); color:var(--primary-black);}
.lq-smart-tech__list li {margin-bottom:8px; line-height:1.4;}
.lq-smart-tech__image {width:466px; flex-shrink:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.12);}
.lq-smart-tech__image img {width:100%; height:auto; object-fit:cover; display:block;}
/* =============================================
 11. COMPARISON TABLE
 ============================================= */
.lq-comparison {padding:clamp(60px, 8vw, 100px) 0; position:relative;}
.lq-table-wrap {overflow-x:auto; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.06); margin-top:clamp(32px, 5vw, 48px); -webkit-overflow-scrolling:touch; background:#fff; max-width:100%;}
.lq-table {width:100%; border-collapse:separate; border-spacing:0; min-width:600px;}
.lq-table thead th {padding:16px 20px; font-weight:800; font-size:clamp(13px, 1.3vw, 15px); color:#000; text-align:left; background:#00ff00; border-bottom:2px solid rgba(0,0,0,0.1); white-space:nowrap;}
.lq-table thead th:first-child {border-radius:12px 0 0 0;}
.lq-table thead th:last-child {border-radius:0 12px 0 0;}
.lq-table tbody tr {transition:background 0.2s ease;}
.lq-table tbody tr:nth-child(even) td {background:#f9f9f9;}
.lq-table tbody tr:nth-child(odd) td {background:#ffffff;}
.lq-table tbody tr:hover td {background:rgba(56, 237, 36, 0.07);}
.lq-table tbody td {padding:15px 20px; font-size:clamp(13px, 1.3vw, 15px); color:#444; border-bottom:1px solid #efefef; white-space:nowrap;}
.lq-table tbody td:first-child {font-weight:700; color:#000;}
/* 2026 UX:Sticky First Column */
.lq-table th:first-child, .lq-table td:first-child {position:sticky; left:0; z-index:2;}
.lq-table th:first-child {z-index:3;}
.lq-table th:first-child::after, .lq-table td:first-child::after {content:""; position:absolute; top:0; right:-6px; width:6px; height:100%; background:linear-gradient(to right, rgba(0,0,0,0.08), transparent); pointer-events:none;}
/* =============================================
 12. MARKET DEMAND CHART (rediseño)
 ============================================= */
.lq-market-demand {padding:var(--space-2xl) var(--space-md); text-align:center; position:relative; z-index:2;}
.lq-market-demand__title {font-family:var(--font-display); font-size:clamp(26px, 5vw, 48px); font-weight:800; color:var(--primary-black); line-height:1.15; margin-bottom:var(--space-md); text-wrap:balance; -webkit-text-wrap:balance;}
.lq-market-demand__desc {font-size:clamp(16px, 2.2vw, 30px); font-weight:400; color:var(--primary-black); line-height:1.4; max-width:937px; margin:0 auto var(--space-xl);}
.lq-market-demand__chart {max-width:1000px; margin:0 auto; position:relative; z-index:1;}
.lq-market-demand__chart svg {width:100%; height:auto; display:block;}
/* =============================================
 13. CTA FINAL
 ============================================= */
.lq-cta-final {position:relative; min-height:clamp(360px, 45vw, 560px); display:flex; align-items:center; justify-content:center; overflow:hidden; background-size:cover; background-position:center;}
.lq-cta-final::before {content:""; position:absolute; inset:0; background:rgba(0, 0, 0, 0.52); z-index:0;}
.lq-cta-inner {position:relative; z-index:1; text-align:center; padding:clamp(48px, 7vw, 80px) 20px;}
.lq-cta-inner h2 {font-family:var(--font-display); font-size:clamp(28px, 5vw, 56px); font-weight:800; color:#fff; margin-bottom:32px; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,0.35); text-wrap:balance; -webkit-text-wrap:balance;}
.lq-cta-inner h2 .lq-green {font-family:var(--font-display); color:var(--primary-green);}
.lq-btn-green {display:inline-flex; align-items:center; justify-content:center; background:var(--primary-green); color:#000; padding:clamp(14px, 1.8vw, 18px) clamp(36px, 5vw, 60px); border-radius:50px; font-size:clamp(13px, 1.3vw, 16px); font-weight:800; text-transform:uppercase; letter-spacing:1px; border:2px solid var(--primary-green); cursor:pointer; min-height:52px; transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.lq-btn-green:hover {background:transparent; color:var(--primary-green); transform:translateY(-3px); box-shadow:0 8px 24px rgba(56, 237, 36, 0.45);}
/* =============================================
 14. FOOTER — copiado literal de index.css
 ============================================= */
footer {background-color:var(--primary-black); color:var(--primary-white); padding:clamp(40px, 8vw, 60px) 0 20px; width:100%; margin-bottom:-5px;}
.footer-logo-section {text-align:center; margin-bottom:clamp(30px, 6vw, 40px); padding:0 20px;}
.footer-logo {max-width:clamp(250px, 30vw, 400px); height:auto;}
.footer-content {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:clamp(20px, 4vw, 40px); max-width:1200px; margin:0 auto; padding:0 20px; width:100%;}
.map-container {height:clamp(150px, 25vw, 200px); border-radius:8px; overflow:hidden; margin-bottom:20px; margin-top:20px;}
.map-container iframe {width:100%; height:100%; border:0;}
.footer-section h3 {font-size:clamp(16px, 2.5vw, 18px); margin-bottom:20px; color:var(--primary-white);}
.footer-section ul li {margin-bottom:8px;}
.column ul {display:flex; flex-wrap:wrap;}
.column ul li {width:48%; margin:0 1% 8px;}
.footer-section a {color:#ccc; transition:color 0.3s ease; font-size:clamp(12px, 2vw, 14px); line-height:1.5;}
.footer-section a:hover {color:var(--primary-green);}
.licenses {margin-bottom:20px;}
.license-row {display:flex; flex-wrap:wrap; gap:15px; margin-bottom:10px;}
.license-row span {font-size:clamp(12px, 2vw, 14px); color:#ccc;}
.social-media {display:flex; gap:10px; margin-top:15px; margin-bottom:30px; flex-wrap:wrap;}
.social-icon {display:flex; justify-content:center; align-items:center; width:clamp(35px, 6vw, 40px); height:clamp(35px, 6vw, 40px); background-color:rgba(255,255,255,0.1); border-radius:50%; transition:all 0.3s ease; font-size:clamp(14px, 2.5vw, 16px);}
.social-icon:hover {background-color:var(--primary-green); transform:translateY(-3px);}
.visually-hidden {position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.footer-category {margin-bottom:20px; font-size:0.9rem; line-height:1.5; color:#ccc;}
.footer-copyright {width:100%; padding:25px 0 15px 0; margin-top:30px; border-top:1px solid #333; text-align:center; font-size:14px; color:#999;}
.footer-copyright p {margin:0; padding:0; line-height:1.5;}
.carrier-auth-footer {display:flex; flex-direction:column; align-items:flex-start; margin-top:20px; gap:15px; width:100%;}
.carrier-auth-text {display:flex; flex-direction:column; gap:16px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); width:100%;}
.carrier-auth-text strong {font-size:18px; font-weight:800; color:var(--primary-white); letter-spacing:0.5px; text-transform:uppercase; line-height:1.3;}
.carrier-auth-logos {display:flex; flex-direction:column; align-items:center; gap:25px;}
.carrier-foot-logo {height:auto; max-width:250px; border-radius:12px;}
.footer-left-group {grid-column:span 2; display:flex; flex-direction:column;}
.footer-left-top {display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 4vw, 40px);}
/* =============================================
 16. ON-SCROLL ANIMATIONS (Moved from JS)
 ============================================= */
.lq-animate {opacity:0; transform:translateY(22px); transition:opacity 0.55s ease, transform 0.55s ease;}
.lq-animate.lq-visible {opacity:1; transform:translateY(0);}
.lq-table-wrap[data-scrollable]::after {content:"← Scroll →"; display:block; text-align:center; font-size:12px; color:#888; padding:8px 0 0;}
/* =============================================
 17. RESPONSIVE
 ============================================= */
/* Header breakpoints (igual que index.css) */
@media (min-width:992px) {.location-switcher {display:flex;}}
@media (max-width:1150px) {.bottom-nav {display:none;}
.header-right {display:none;}
.mobile-menu-phone-container {display:flex;}
.mobile-menu-btn {display:block;}
.mobile-nav-container {display:block;}
}
@media (min-width:1100px) {.lq-hero__title-regular,
 .lq-hero__title-bold {font-size:65px;}
}
@media (max-width:991px) {.top-header {flex-wrap:wrap; min-height:0;}
.location-switcher {display:flex; flex-basis:100%; order:3; justify-content:center; background-color:var(--primary-black); padding:8px 15px; border-top:1px solid #111;}
}
@media (min-width:992px) and (max-width:1150px) {.mobile-menu-phone-container {margin-left:0 !important;}}
/* iPad — ajustes de landing (< 1024px) */
@media (max-width:1024px) {.lq-how-it-works {gap:var(--space-lg); padding:var(--space-xl) var(--space-md);}
 .lq-smart-tech {gap:36px;}
 .lq-testimonials__group {gap:16px; padding-right:16px;}
}
/* Hero stacked (< 1100px) — apaga sticky/grid 2-col en tablets y móviles */
@media (max-width:1099px) {.lq-hero {flex-direction:column; gap:var(--space-lg); text-align:center; min-height:auto;}
 .lq-hero__text {width:100%; padding:0 var(--space-md);}
 .lq-hero__subtitle {margin-left:auto; margin-right:auto; max-width:100%;}
 .lq-animation-layer {width:400px; height:400px; bottom:20px; right:10px; opacity:0.7;}
 .lq-services {gap:32px; padding:var(--space-lg) var(--space-md);}
 .lq-trust-bar {flex-wrap:wrap; height:auto; padding:var(--space-md); gap:20px; justify-content:center;}
 .lq-how-it-works {flex-direction:column; text-align:center;}
 .lq-hiw__gear {width:clamp(220px, 40vw, 320px); margin:0 auto;}
 .lq-hiw__content {text-align:left; width:100%; max-width:580px; margin:0 auto;}
 .lq-hiw__title, .lq-hiw__subtitle {text-align:center;}
 .lq-smart-tech {flex-direction:column; text-align:left;}
 .lq-smart-tech__content {max-width:100%; width:100%;}
 .lq-smart-tech__image {width:100%; max-width:466px; margin:0 auto;}
 .lq-market-demand__desc {font-size:clamp(15px, 2.2vw, 22px);}
}
/* Mobile stack (< 768px) — colapsa el resto de grids a 1 columna */
@media (max-width:768px) {.lq-service-card {width:100%; max-width:365px; height:auto; min-height:300px;}
 .lq-hiw__gear {width:220px;}
 .lq-hiw__title {font-size:clamp(32px, 6vw, 42px);}
 .lq-hiw__subtitle {font-size:clamp(22px, 5vw, 28px);}
 .lq-testimonials__track {animation-duration:30s;}
 .lq-testi-card {width:280px; height:auto; min-height:260px; padding:24px;}
 .lq-smart-tech {gap:28px; padding:var(--space-xl) var(--space-md);}
 .lq-smart-tech__title {text-align:center;}
 .lq-smart-tech__subtitle {text-align:center;}
 .lq-smart-tech__text, .lq-smart-tech__list {font-size:16px;}
 .lq-market-demand {padding:var(--space-xl) var(--space-md);}
 .lq-market-demand__title {font-size:clamp(22px, 6vw, 32px);}
 .lq-market-demand__desc {font-size:16px;}
 .lq-brands__track {animation-duration:30s;}
 .lq-brands__group {gap:var(--space-md); padding-right:var(--space-md);}
 .lq-trust-bar {gap:30px;}
 .lq-trust-item {flex-direction:column; text-align:center; gap:8px;}
 .footer-left-group {grid-column:1 / -1;}
 .footer-section.column ul li {width:100%; margin:0 0 8px;}
 .lq-hero__title {font-size:clamp(32px, 8vw, 48px); line-height:1.1;}
 .lq-hero__subtitle {font-size:16px;}
 .lq-animation-layer {position:relative !important; width:350px !important; height:350px !important; bottom:auto !important; right:auto !important; margin:0 auto var(--space-md) auto !important; opacity:1 !important; display:block !important; z-index:1;}
}
/* Small mobile (< 576px) */
@media (max-width:576px) {.container {padding:0 15px;}
 .lq-hero__title {font-size:clamp(28px, 8vw, 36px);}
 .lq-service-card {padding:var(--space-md);}
 .lq-brands__logo {height:32px;}
 .footer-content {grid-template-columns:1fr;}
 .footer-left-top {grid-template-columns:1fr;}
 .carrier-auth-footer {align-items:center;}
 .carrier-auth-text {align-items:center; text-align:center;}
 .footer-section.column ul {display:grid; grid-template-columns:1fr 1fr; gap:8px;}
 .footer-section.column ul li {width:100%; margin:0;}
 .mobile-phone-button {font-size:11px; padding:5px 10px;}
 .location-switcher a, .location-switcher i {font-size:16px;}
 .lq-hiw__gear {display:none;}
}
/* Extra small (< 480px) */
@media (max-width:480px) {.lq-trust-bar {flex-direction:column; align-items:center; padding:var(--space-md);}
 .footer-section.column ul {grid-template-columns:1fr;}
 .location-switcher a, .location-switcher i {font-size:13px;}
 .lq-animation-layer {width:80vw !important; height:80vw !important; max-width:280px !important; max-height:280px !important;}
}
@media (max-width:360px) {.location-switcher {padding:6px 10px;}
 .location-switcher a, .location-switcher i {font-size:12px; margin-right:6px;}
}
@media (max-width:300px) {.location-switcher {padding:5px !important;}
 .location-switcher a {font-size:10px !important; display:block; text-align:center;}
}