/* Tipografías autoalojadas (subconjunto latino, SIL Open Font License). Antes venían de Google Fonts. */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/poppins-600.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/poppins-700.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/poppins-800.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/poppins-900.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/spacemono-400.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/spacemono-700.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ============================================================
   GreEnergy — Sistema de diseño del sitio web
   Paleta y tipografía tomadas del Manual de Marca v1.0 (ago. 2026)
   ============================================================ */


:root{
  /* Colores del logo */
  --logo-green: #4FAE3E;
  --eco-green:  #A7DD87;
  --mint:       #EAF7E2;
  --night:      #17301A;

  /* Colores institucionales (materiales / catálogo) */
  --forest:      #1F7A3D;
  --forest-dark: #145C2C;
  --gold:        #D9A441;
  --gold-deep:   #946513;   /* texto: #B9821F daba 3,35:1 sobre blanco */

  /* Neutrales */
  --ink:     #16211a;
  --muted:   #5b6b5e;
  --line:    #dfe6dc;
  --surface: #ffffff;
  --page:    #f7f9f5;

  /* Tipografía */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-data: 'Space Mono', 'Courier New', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 4px rgba(20,40,25,.05), 0 10px 30px -14px rgba(20,40,25,.18);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.15; letter-spacing:-.01em; }
.eyebrow{
  font-family: var(--font-data); font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color: var(--forest); font-weight:700;
}
.data, .price, .kw{ font-family: var(--font-data); }

.wrap{ max-width: 1120px; margin:0 auto; padding: 0 24px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:700; font-size:14.5px;
  padding: 13px 24px; border-radius: 999px; border: none; cursor:pointer;
  text-decoration:none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--gold); color: var(--night); box-shadow: 0 8px 20px -8px rgba(217,164,65,.55); }
.btn-primary:hover{ background:#e6b355; }
.btn-outline{ background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-outline:hover{ background: rgba(255,255,255,.1); border-color:#fff; }
.btn-forest{ background: var(--forest); color:#fff; }
.btn-forest:hover{ background: var(--forest-dark); }

/* ---------- Header ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: var(--night);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between;
  /* 10px en vez de 14: con el logo mas grande, la barra se comia el hero */
  padding: 10px 24px; max-width:1120px; margin:0 auto; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
/* El logo son dos archivos en assets/, no SVG incrustado: cambiarlo es
   sustituir un archivo, no editar seis páginas.
   Va el símbolo COMPLETO, con batería. La regla del manual dice que por
   debajo de 48 px la batería se vuelve una raya — la respuesta no es
   quitarle la mitad al logo, es darle el tamaño que necesita. */
.brand img{ display:block; flex-shrink:0; }
.brand .simbolo{ height:48px; width:auto; }
/* El nombre se baja 3.4 px (11.2 % de su alto): la caja del SVG incluye las
   colas de la «g» y la «y», asi que centrarla por caja deja el bloque de
   mayusculas mas alto que el simbolo. Esto lo centra opticamente. */
.brand .wordmark{ height:30px; width:auto; position:relative; top:3.4px; }

nav.main-nav{ display:flex; align-items:center; gap:2px; }
nav.main-nav a{
  color: rgba(255,255,255,.78); text-decoration:none; font-size:14px; font-weight:600;
  padding: 9px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
nav.main-nav a:hover{ background: rgba(255,255,255,.08); color:#fff; }
nav.main-nav a.active{ background: var(--eco-green); color: var(--night); }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.menu-toggle{ display:none; background:none; border:none; color:#fff; padding:6px; cursor:pointer; }

@media (max-width: 860px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; background: var(--night);
    flex-direction:column; align-items:stretch; padding: 8px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display:none;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding:12px 14px; }
  .menu-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

/* ---------- Footer ---------- */
footer.site{ background: var(--night); color: rgba(255,255,255,.75); padding: 56px 24px 28px; margin-top: 90px; }
footer.site .foot-grid{
  max-width:1120px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1);
}
footer.site h4{ color:#fff; font-size:14px; margin-bottom:14px; }
footer.site .foot-brand p{ font-size:14px; line-height:1.6; max-width:320px; color: rgba(255,255,255,.6); }
footer.site ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer.site ul a{ text-decoration:none; color: rgba(255,255,255,.65); font-size:14px; display:inline-block; padding:4px 0; }
footer.site ul a:hover{ color: var(--eco-green); }
footer.site .tagline{ font-family: var(--font-display); font-weight:700; color: var(--eco-green); font-size:15px; margin-bottom:10px; }
.foot-bottom{
  max-width:1120px; margin:20px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12.5px; color: rgba(255,255,255,.62);
}
@media (max-width:720px){
  footer.site .foot-grid{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- Section helpers ---------- */
.section{ padding: 76px 0; }
.section-head{ max-width: 620px; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(24px,3vw,32px); color: var(--forest-dark); margin: 10px 0 10px; }
.section-head p{ color: var(--muted); font-size:15.5px; margin:0; }
.section-alt{ background: var(--mint); }
.section-dark{ background: var(--night); color: rgba(255,255,255,.85); }
.section-dark .section-head h2{ color:#fff; }
.section-dark .section-head p{ color: rgba(255,255,255,.65); }
.section-dark .eyebrow{ color: var(--eco-green); }

/* ---------- Cards & grids ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
@media (max-width:860px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}

.badge{
  display:inline-flex; align-items:center; font-family: var(--font-data); font-size:12px;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:999px; padding:6px 13px;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.stack{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:10px; }

/* Foco de teclado visible en fondos claros y oscuros: anillo oscuro por dentro
   y menta por fuera, así se ve tanto sobre blanco como sobre el verde noche. */
:focus-visible{ outline:3px solid var(--night); outline-offset:0; box-shadow:0 0 0 6px var(--mint); border-radius:6px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; }

/* Selector de idioma en la cabecera: lleva a la misma página en el otro idioma. */
.lang-switch{ color:rgba(255,255,255,.85); text-decoration:none; font-family:var(--font-data); font-size:13px; font-weight:700; letter-spacing:.08em; padding:9px 10px; border-radius:999px; }
.lang-switch:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* Dos acciones en la franja final: cotización y WhatsApp. */
.cta-band-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Saltar al contenido: invisible hasta que se llega con el teclado. */
.skip-link{ position:absolute; left:12px; top:-80px; z-index:1000; background:var(--gold); color:var(--night); padding:10px 18px; border-radius:999px; font-weight:700; text-decoration:none; }
.skip-link:focus{ top:12px; }
/* «Cotizar» dentro del panel del menú: en escritorio ya está en la cabecera. */
nav.main-nav .solo-movil{ display:none; }
@media (max-width: 860px){ nav.main-nav .solo-movil{ display:block; margin-top:8px; text-align:center; border:1.5px solid rgba(255,255,255,.5); } }

/* ══════════════════════════════════════════════════════════════════════════
   Movimiento — pase de pulido (15 de septiembre de 2026)
   Reglas que no se rompen:
   · Todo va dentro de prefers-reduced-motion: no-preference Y bajo html.js.
     html.js lo pone el <head> solo si hay IntersectionObserver y movimiento
     permitido; si site.js no llega en 3 s, lo quita. Sin JS no se oculta nada.
   · Nada toca el titular ni el texto del hero: son el LCP.
   · Solo opacity, translate y transform. «translate» y no «transform» en las
     entradas, para no pisar los hover que ya usan transform.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes rvEntra { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes rvSube { from { translate: 0 10px; } to { translate: 0 0; } }
@keyframes waPulso { 0% { box-shadow: 0 0 0 0 rgba(167,221,135,.55); } 70% { box-shadow: 0 0 0 14px rgba(167,221,135,0); } 100% { box-shadow: 0 0 0 0 rgba(167,221,135,0); } }

@media (prefers-reduced-motion: no-preference) {

  /* Aparecer al entrar en pantalla, escalonado entre hermanos (--i lo pone site.js) */
  .js :is(.section-head, .why-card, .seg-card, .step, .cta-band, .kcard, .bcard, .info-card, .hours, .calc-banner, .app-teaser .panel) {
    opacity: 0; translate: 0 18px;
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, transform .2s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js :is(.section-head, .why-card, .seg-card, .step, .cta-band, .kcard, .bcard, .info-card, .hours, .calc-banner, .app-teaser .panel).visto {
    opacity: 1; translate: 0 0;
  }

  /* Hero: el texto y los botones quedan quietos. Las etiquetas y la escena solo se
     desplazan: visibles desde el primer fotograma (nada en pantalla al cargar empieza en opacity 0). */
  .js .hero .badge { animation: rvSube .6s cubic-bezier(.2,.7,.2,1) backwards; }
  .js .hero .badge:nth-child(1) { animation-delay: .25s; }
  .js .hero .badge:nth-child(2) { animation-delay: .38s; }
  .js .hero .badge:nth-child(3) { animation-delay: .51s; }
  .js .hero .signature { animation: rvSube .9s .1s cubic-bezier(.2,.7,.2,1) backwards; }

  /* Bucles en pausa fuera de pantalla o con la pestaña oculta */
  .js .fuera *, .js .fuera::after, .js.oculto .signature *, .js.oculto .franja *, .js.oculto .btn-wa::after { animation-play-state: paused !important; }

  /* Hover sutil en las tarjetas del catálogo */
  @media (hover: hover) {
    .kcard, .bcard { transition: transform .25s ease, box-shadow .25s ease; }
    .kcard:hover, .bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  }

  /* WhatsApp: un pulso discreto, tres veces y se detiene */
  .js .btn-wa { position: relative; }
  .js .btn-wa::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; animation: waPulso 2.2s ease-out 2.4s 3; }

  /* «Cómo funciona»: la energía avanza con el scroll de 01 a 03 */
  .js .steps { position: relative; padding-top: 30px; }
  .js .flujo { position: absolute; left: 0; right: 22px; top: 6px; height: 3px; border-radius: 3px; background: var(--line); }
  .js .flujo::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, var(--forest), var(--eco-green)); transform: scaleX(var(--p, 0)); transform-origin: left; }
  .js .flujo-punto { position: absolute; left: -7px; top: -5.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(217,164,65,.25); transform: translateX(var(--px, 0)); }
  .js .step .step-num, .js .step h3 { transition: color .45s ease; }
  .js .step:not(.on) .step-num, .js .step:not(.on) h3 { color: var(--muted); }
  @media (max-width: 860px) {
    .js .steps { padding-top: 0; padding-left: 30px; }
    .js .flujo { left: 6px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
    .js .flujo::after { transform: scaleY(var(--p, 0)); transform-origin: top; }
    .js .flujo-punto { left: -5.5px; top: -7px; transform: translateY(var(--px, 0)); }
  }
}

/* Lo que ya estaba en pantalla al cargar aparece sin entrada (no retrasa el LCP). */
.js .ya{ opacity: 1 !important; translate: none !important; animation: none !important; transition: none !important; }