/*V 1.6 Común a las 26 páginas del layout base, antes del CSS de cada página: las reglas usan variables, nunca colores fijos (A4, 27 y 28/10)*/
/* 0. Valor por defecto de las variables propias de site.css: una página lo cambia en su :root (los socios declaran el suyo) */
:root {--color-nav-active:#209b41; --color-rating-bg:#209b41; --color-link:#10a02c; --color-link-hover:#0b7a20; --color-link-hover-bg:#f0f8ff; --color-footer-muted:#ccc; --color-standard-bg:var(--primary-white); --color-standard-card:var(--light-gray); --color-standard-icon:var(--primary-green); --color-standard-title:var(--primary-black); --color-standard-text:#666; --color-faq-bg:var(--primary-white); --color-faq-card:var(--light-gray); --color-faq-icon:var(--primary-green); --color-faq-answer:#666; --color-service-line:#e4ebe6; --color-service-muted:#4a554e;}
/* 1. Base: reset, contenedor y utilidades */
* {margin:0; padding:0; box-sizing:border-box; font-family:"Montserrat", Arial, sans-serif;}
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;}
.section-header {text-align:center; margin-bottom:40px;}
.visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.content-link {font-weight:700; text-decoration:underline; color:inherit; transition:color 0.3s ease;}
.content-link:hover {color:var(--primary-green);}
.inline-link {color:var(--color-link); text-decoration:underline; font-weight:600; cursor:pointer; transition:color 0.3s ease, background-color 0.3s ease;}
.inline-link:hover {color:var(--color-link-hover); background-color:var(--color-link-hover-bg); text-decoration:none;}
/* 2. Cabecera y menú de escritorio */
.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; padding:0; background-color:var(--primary-black); min-height:60px;}
.logo-container {padding:10px 15px; background-color:var(--primary-black); display:flex; justify-content:center; align-items:center; flex-shrink:0;}
.header-right {display:flex; align-items:center; gap:15px; padding:0 15px; flex-shrink:0; margin-left:auto;}
.google-reviews {display:flex; align-items:center; gap:8px; color:var(--primary-white);}
.review-info {display:flex; flex-direction:column; align-items:flex-start;}
.rating-badge {background-color:var(--color-rating-bg); color:var(--primary-white); padding:6px 10px; border-radius:4px; font-weight:bold; font-size:12px;}
.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);}
.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: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,
.desktop-nav a.active {color:var(--color-nav-active);}
.desktop-nav a:hover:after,
.desktop-nav a.active:after {width:100%;}
/* 3. Menú móvil (botones con zona de toque de 44 px) */
.mobile-menu-phone-container {display:none; align-items:center; gap:10px; margin-left:auto; padding:0 15px;}
.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);}
.mobile-menu-btn {display:none; font-size:24px !important; cursor:pointer; padding:15px; color:var(--primary-white); z-index:1001; min-width:44px; min-height:44px;}
.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:10px; right:10px; color:var(--primary-white); cursor:pointer; z-index:1002; width:44px; height:44px; font-size:24px; display:flex; align-items:center; justify-content:center; border-radius:50%;}
.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;}
/* 4. Pie y AREAS WE SERVE */
.find-us {display:flex; align-items:center; gap:8px;}
.service-areas-with-map {background-color:var(--primary-black); padding:clamp(40px, 8vw, 80px) 0; width:100%;}
.service-areas-content {display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 50px); align-items:flex-start; max-width:1200px; margin:0 auto; padding:0 20px;}
.area-item {color:var(--primary-white); font-size:clamp(12px, 2vw, 16px); font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.service-areas-left h2 {color:var(--primary-green); font-size:clamp(20px, 4vw, 32px); font-weight:700; text-transform:uppercase; margin-bottom:clamp(20px, 4vw, 30px); text-wrap:balance; -webkit-text-wrap:balance;}
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%;}
.footer-section ul li {margin-bottom:8px;}
.footer-section h3 {font-size:clamp(16px, 2.5vw, 18px); margin-bottom:20px; color:var(--primary-white); font-weight:700;}
.footer-section a:hover {color:var(--primary-green);}
.footer-category {font-size:clamp(12px, 2vw, 14px); color:var(--color-footer-muted); margin-bottom:15px; line-height:1.5;}
.licenses {margin-bottom:20px;}
.license-row {display:flex; flex-wrap:wrap; gap:15px; margin-bottom:10px;}
.social-media {display:flex; gap:10px; margin-top:15px; margin-bottom:30px; flex-wrap:wrap;}
.social-icon:hover {background-color:var(--primary-green); transform:translateY(-3px);}
.footer-copyright p {margin: 0; padding: 0; line-height: 1.5;}
.footer-legal-links {margin-top:10px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;}
.footer-legal-links a:hover {color:var(--primary-green);}
.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); }
/* En pantallas angostas el grupo de la izquierda (columnas y marcas) ocupa todo el ancho; antes lo repetia cada hoja de pagina (Eco, 29/10) */
@media (max-width:768px) {.footer-left-group {grid-column:1 / -1;}}
.footer-legal-standalone a:hover {color:var(--primary-green);}
@media (max-width:767px) {.footer-logo {max-width:150px;}}
/* En el celular las ciudades van en filas que se reparten el ancho, a 15 px (B6) */
@media (max-width:768px) {.service-areas-with-map .areas-horizontal-list {flex-direction:row; flex-wrap:wrap; gap:12px 18px;}
 .service-areas-with-map .area-item {font-size:15px;}
}
/* 5. Hero: botones de las dos variantes; la página declara hero--promo (servicios) o hero--simple (About y Contact) en su <section class="hero"> */
:where(.hero--promo) .cta-button {background:linear-gradient(135deg, var(--primary-green), var(--accent-green)); border:2px solid var(--primary-green); color:var(--primary-black); padding:clamp(13px, 2vw, 16px) clamp(22px, 4vw, 32px); font-size:clamp(14px, 2vw, 16px); font-weight:700; cursor:pointer; border-radius:50px; transition:all 0.3s ease; text-transform:uppercase; box-shadow:0 6px 18px rgba(40, 167, 69, 0.35); min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
:where(.hero--promo) .cta-button:hover {transform:translateY(-3px); box-shadow:0 10px 26px rgba(40, 167, 69, 0.5);}
:where(.hero--promo) .cta-button-outline {background:transparent; border:2px solid rgba(255, 255, 255, 0.85); color:var(--primary-white); text-shadow:0 1px 4px rgba(0, 0, 0, 0.8); box-shadow:0 2px 14px rgba(0, 0, 0, 0.35); text-decoration:none; padding:clamp(13px, 2vw, 16px) clamp(20px, 3.6vw, 28px); font-size:clamp(14px, 2vw, 16px); font-weight:700; cursor:pointer; border-radius:50px; transition:all 0.3s ease; text-transform:uppercase; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px;}
:where(.hero--promo) .cta-button-outline:hover {background:var(--primary-white); border-color:var(--primary-white); color:var(--primary-black); text-shadow:none; transform:translateY(-3px); box-shadow:0 10px 26px rgba(0, 0, 0, 0.35);}
:where(.hero--simple) .cta-button {background:var(--primary-green); border:2px solid var(--primary-green); color:var(--primary-black); text-decoration:none; padding:clamp(10px, 1.5vw, 12px) clamp(16px, 2.8vw, 24px); font-size:clamp(13px, 1.7vw, 15px); font-weight:700; cursor:pointer; border-radius:50px; transition:all 0.3s ease; text-transform:uppercase; box-shadow:0 3px 10px rgba(40, 167, 69, 0.30); min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
:where(.hero--simple) .cta-button:hover {transform:translateY(-3px); box-shadow:0 8px 20px rgba(40, 167, 69, 0.45);}
:where(.hero--simple) .cta-button-outline {background:transparent; border:2px solid transparent; color:var(--primary-white); text-decoration:none; padding:clamp(10px, 1.5vw, 12px) clamp(12px, 2.2vw, 18px); font-size:clamp(13px, 1.7vw, 15px); font-weight:700; cursor:pointer; border-radius:50px; transition:all 0.3s ease; text-transform:uppercase; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px;}
:where(.hero--simple) .cta-button-outline:hover {background:rgba(255, 255, 255, 0.14); border-color:rgba(255, 255, 255, 0.40); color:var(--primary-white);}
:where(.hero--promo, .hero--simple) .cta-button:focus-visible,
:where(.hero--promo, .hero--simple) .cta-button-outline:focus-visible {outline:3px solid var(--primary-white); outline-offset:3px; box-shadow:0 0 0 6px rgba(0, 0, 0, 0.55);}
@media (max-width:360px) {:where(.hero--promo) .cta-button {font-size:13px;}}
/* 6. Beneficios (.family-first, THE ECOENERGY STANDARD en el home): rejilla de tarjetas (.benefits-grid) o la del home y Lake Havasu (.family-benefits-grid); colores en --color-standard-* */
.family-first {background-color:var(--color-standard-bg); padding:clamp(20px, 4vw, 40px) 0 clamp(40px, 8vw, 80px) 0; width:100%;}
.family-first .section-header p {text-align:left; max-width:900px; margin:0 auto; font-size:clamp(14px, 2.5vw, 16px); line-height:1.8; padding:0 20px;}
.benefits-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(15px, 3vw, 20px); margin-top:clamp(30px, 6vw, 40px); padding:0 20px; max-width:1200px; margin-left:auto; margin-right:auto;}
.benefit-item {padding:clamp(15px, 3vw, 20px); border-radius:8px; background-color:var(--color-standard-card); box-shadow:0 3px 10px rgba(0, 0, 0, 0.05); transition:transform 0.3s ease, box-shadow 0.3s ease; display:flex; align-items:flex-start; gap:clamp(10px, 2vw, 15px);}
.benefit-item:hover {transform:translateY(-5px); box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);}
.family-benefits-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:clamp(15px, 3vw, 20px); margin-top:clamp(30px, 6vw, 40px); padding:0 20px; max-width:1200px; margin-left:auto; margin-right:auto;}
.family-benefit-item {padding:clamp(15px, 3vw, 20px); border-radius:8px; transition:transform 0.3s ease; display:flex; align-items:center; gap:clamp(10px, 2vw, 15px);}
.family-benefit-item:hover {transform:translateY(-5px);}
.benefit-icon {flex-shrink:0; width:clamp(25px, 4vw, 30px); height:clamp(25px, 4vw, 30px); display:flex; align-items:center; justify-content:center;}
.benefit-icon i {font-size:clamp(20px, 3vw, 24px); color:var(--color-standard-icon);}
.benefit-content {flex:1;}
.benefit-content h3 {font-size:clamp(13px, 2.5vw, 16px); margin-bottom:10px; color:var(--color-standard-title); font-weight:700; line-height:1.3;}
.benefit-content p {color:var(--color-standard-text); font-size:clamp(12px, 2vw, 14px); line-height:1.6;}
@media (max-width:480px) {.benefits-grid {grid-template-columns:1fr;}
 .family-benefits-grid {grid-template-columns:1fr; gap:20px;}
 .benefit-item {flex-direction:column; align-items:center; text-align:center; gap:10px;}
 .family-benefit-item {flex-direction:row; align-items:flex-start; text-align:left;}
}
/* En el celular, letra legible (16 y 14 px) y la rejilla del home y Lake Havasu más compacta (B6) */
@media (max-width:576px) {.family-first .benefit-content h3 {font-size:16px; margin-bottom:6px;}
 .family-first .benefit-content p {font-size:14px;}
 .family-benefits-grid {padding:0 6px; gap:4px;}
 .family-benefit-item {padding:12px 10px;}
}
/* 7. FAQ (componente faq): colores en --color-faq-* */
.faq {background-color:var(--color-faq-bg); padding:clamp(40px, 8vw, 80px) 0; width:100%;}
.faq-container {max-width:800px; margin:0 auto; width:100%; padding:0 20px;}
.faq-item {margin-bottom:15px; border-radius:8px; overflow:hidden; background-color:var(--color-faq-card); box-shadow:0 3px 10px rgba(0, 0, 0, 0.05); width:100%;}
.faq-question {padding:clamp(15px, 3vw, 20px); cursor:pointer; display:flex; align-items:center; transition:background-color 0.3s ease; min-height:60px;}
.faq-question:hover {background-color:rgba(0, 0, 0, 0.02);}
.faq-arrow {margin-right:clamp(10px, 2vw, 15px); font-size:clamp(14px, 2.5vw, 16px); color:var(--color-faq-icon); transition:transform 0.3s ease; flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center;}
.faq-item.active .faq-arrow i {transform:rotate(45deg);}
.faq-question h3 {font-size:clamp(14px, 2.5vw, 18px); font-weight:600; color:var(--primary-black); line-height:1.3; flex:1;}
.faq-answer {padding:0 clamp(15px, 3vw, 20px) clamp(15px, 3vw, 20px) clamp(45px, 8vw, 55px); background-color:var(--color-faq-card); color:var(--color-faq-answer); line-height:1.6; display:none; font-size:clamp(13px, 2vw, 15px);}
.faq-item.active .faq-answer {display:block;}
@media (max-width:576px) {.faq-question h3 {font-size:15px;}}
/* 8. Reseñas de Google del hero tipo A: sello Google Verified y calificación, enlazados al panel de reseñas (B6, Eco 29/10) */
.hero-reviews {display:inline-flex; align-items:stretch; height:44px; max-width:min(100%, 680px); text-decoration:none; color:var(--primary-white, #ffffff); border-radius:40px; box-shadow:0 4px 14px rgba(0, 0, 0, 0.35); line-height:1;}
.hero-reviews__seal {display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 20px 0 18px; background:var(--primary-white, #ffffff); border-radius:40px; position:relative; z-index:1; flex-shrink:0; transition:background-color 0.3s ease;}
.hero-reviews__seal svg {width:16px; height:16px; flex-shrink:0; display:block;}
.hero-reviews__seal span {font-size:14px; font-weight:600; line-height:1; color:#202124; white-space:nowrap; transition:color 0.3s ease;}
.hero-reviews__clip {display:flex; align-items:center; min-width:0; flex:1 1 auto; margin-left:-26px; padding:0 16px 0 38px; background:#000000; border:1px solid rgba(255, 255, 255, 0.22); border-left:0; border-radius:0 40px 40px 0; overflow:hidden; transition:background-color 0.3s ease;}
.hero-reviews__track {display:flex; align-items:center; width:max-content;}
.hero-reviews__item {display:block; padding-right:40px; white-space:nowrap; font-size:clamp(12px, 1.9vw, 14px); font-weight:600; color:#f2f2f2;}
.hero-reviews__item b {color:var(--primary-white, #ffffff); font-weight:700; margin-right:7px;}
.hero-reviews__stars {color:#fbbc04; letter-spacing:1px; margin-right:8px;}
.hero-reviews:hover .hero-reviews__seal {background:#eef3ff;}
.hero-reviews:hover .hero-reviews__seal span {color:#1a73e8;}
.hero-reviews:hover .hero-reviews__clip {background:#141414;}
.hero-reviews:focus-visible {outline:3px solid var(--primary-white, #ffffff); outline-offset:3px;}
/* Deslizamiento solo con CSS: el texto nunca cabe (pide ~750px y la pildora mide 680 como maximo); si cambia mucho el texto de las reseñas, recalcular este punto de corte y las duraciones */
@media (prefers-reduced-motion:no-preference) {.hero-reviews__clip {-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 16px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 16px), transparent 100%);}
 .hero-reviews__track {animation:hero-reviews-scroll 16.8s linear infinite;}
}
@media (prefers-reduced-motion:no-preference) and (max-width:736px) {.hero-reviews__track {animation-duration:15.5s;}}
@media (prefers-reduced-motion:no-preference) and (max-width:631px) {.hero-reviews__track {animation-duration:14.1s;}}
.hero-reviews:hover .hero-reviews__track,
.hero-reviews:focus-visible .hero-reviews__track {animation-play-state:paused;}
@keyframes hero-reviews-scroll {from {transform:translateX(0);} to {transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce) {.hero-reviews {height:auto; min-height:44px;}
 .hero-reviews__clip {padding-top:6px; padding-bottom:6px;}
 .hero-reviews__item {padding-right:0; white-space:normal; line-height:1.35;}
 .hero-reviews__item[aria-hidden="true"] {display:none;}
}
@media (max-width:576px) {.hero-reviews {width:100%;}}

/* 9. Cabecera: sello de BBB y reseñas de Google, enlazados a su perfil (Eco, 29/10) */
.header-bbb {display:inline-flex; align-items:center; border-radius:5px; transition:transform 0.2s ease, box-shadow 0.2s ease;}
.header-bbb img {display:block; width:auto; height:34px; border-radius:5px;}
.header-bbb:hover {transform:translateY(-1px); box-shadow:0 4px 12px rgba(255, 255, 255, 0.18);}
.header-google {display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border:1px solid rgba(255, 255, 255, 0.22); border-radius:20px; background:rgba(255, 255, 255, 0.06); color:var(--primary-white); font-size:14px; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.header-google svg {width:18px; height:18px; flex-shrink:0;}
.header-google__stars {color:#fbbc04; font-size:13px; letter-spacing:1px;}
.header-google__count {color:rgba(255, 255, 255, 0.7); font-size:12px; font-weight:400; transition:color 0.2s ease;}
.header-google:hover {background:#eef3ff; border-color:#eef3ff; color:#1a73e8;}
.header-google:hover .header-google__count {color:#5f6368;}
.header-bbb:focus-visible,
.header-google:focus-visible {outline:3px solid var(--primary-white); outline-offset:3px;}
@media (max-width:1250px) {.header-google__count {display:none;}}