/* ============================================
   EcoApo — Hoja de estilos principal
   Colores de marca: verde #41c406 / teal #00987e
   Mobile-first, sin frameworks.
   ============================================ */

:root {
  --green: #41c406;
  --green-dark: #35a005;
  --teal: #00987e;
  --teal-dark: #00745f;
  --lime: #b2d235;
  --dark: #1c2621;
  --text: #333d38;
  --muted: #6c757d;
  --bg-alt: #f4f8f5;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(28, 38, 33, 0.08);
  --font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Degradados de marca (tomados de la web original) */
  --grad-text: linear-gradient(270deg, #b2d235, #99ce26, #59c60a, #41c406);
  --grad-btn: linear-gradient(0deg, hsl(101, 94%, 40%) 0%, hsl(94, 97%, 40%) 55%, hsl(83, 96%, 44%) 100%);
  --grad-card: linear-gradient(135deg, #35a005, #41c406 55%, #59c60a);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 1.0625rem; /* 17px: mejor lectura en móvil */
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--green-dark); }

/* text-wrap: balance reparte las palabras entre los renglones en vez de
   dejar el último con una sola. Los títulos largos dejan de verse
   desprolijos en pantallas anchas, sin tener que meter <br> a mano. */
h1, h2, h3 { line-height: 1.15; color: var(--dark); font-weight: 800; text-wrap: balance; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding: 64px 0; }
/* Para secciones seguidas del mismo color: evita el doble espacio en blanco.
   Lleva doble clase para ganarle a la regla de escritorio de .section */
.section.section-tight { padding-top: 0; }
/* Franja del botón "Más Proyectos": pegada a lo de arriba pero con aire
   suficiente antes del corte de sección siguiente */
.section.section-volver { padding-top: 0; padding-bottom: 52px; }
.alt-bg { background: var(--bg-alt); }

.pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.pretitle::after {
  content: "";
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: var(--lime);
}

/* Escala tipográfica unificada:
   Volanta de hero: 0.95rem en versales          → .page-hero-eyebrow
   H1 hero: clamp(2.3rem → 3.4rem)
   H2-XL (intro de página): clamp(1.9rem → 2.6rem)  → .intro-title
   H2 sección: 1.85rem móvil / 2.1rem desktop
   H3 subtítulo de contenido: 1.5rem                → .split-text h3, .text-grad h3
   H3 de tarjeta: 1.2rem
   Cuerpo: 1.0625rem (17px) */
.section-title { text-align: center; font-size: 1.85rem; margin-bottom: 40px; }
.intro-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 16px; }

/* Títulos con degradado verde → lima, como en la web original */
.section-title,
.split-text h2,
.cta-banner h2,
.text-grad {
  color: var(--green);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-weight: 700;
  border-radius: 50px;
  white-space: nowrap; /* los botones nunca se parten en dos renglones */
  padding: 12px 28px;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background-image: var(--grad-btn);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.88rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0 16px 32px -12px;
}
.btn-primary:hover { filter: brightness(1.08); color: var(--white); }
.btn-light { background: var(--white); color: var(--green-dark); }
.btn-light:hover { color: var(--green); }
.btn-lg { padding: 13px 22px; font-size: 0.8rem; letter-spacing: 0.5px; }
.btn-sm { padding: 8px 18px; font-size: 0.78rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 16px;
}
/* El logo nunca se achica: sin esto, en pantallas medianas el menú lo
   comprime hasta hacerlo desaparecer */
.logo { flex: 0 0 auto; }
.logo img { width: 150px; height: auto; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.main-nav {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--white);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* Tope generoso y con scroll propio por si aun así no entra (pantallas
   muy bajas o con zoom). Al sumar las páginas por audiencia el submenú
   creció, así que el menú se compacta un poco más abajo. */
.main-nav.open { max-height: min(85vh, 700px); overflow-y: auto; }
.main-nav ul { list-style: none; padding: 12px 20px 20px; }
.main-nav a {
  display: block;
  padding: 10px 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
}
.main-nav a.active, .main-nav a:hover { color: var(--green); }

/* ---------- Submenú de Servicios ----------
   En móvil se muestra siempre desplegado dentro del menú (indentado):
   es más simple y no obliga a un segundo toque. En escritorio aparece
   al pasar el mouse (ver el bloque de escritorio más abajo). */
/* Lleva .main-nav adelante para ganarle en especificidad a
   .main-nav ul, que si no le impone su propio padding y su flex. */
.main-nav .submenu { list-style: none; padding: 0 0 0 16px; }
.main-nav .submenu a { font-size: 0.98rem; font-weight: 500; color: #5b6660; padding: 7px 0; }
.nav-chevron { display: none; }
.nav-cta { margin-top: 8px; }

/* Redes sociales en el header (como en la web original) */
.header-social {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 0 4px;
  border-top: 1px solid #e9ecef;
  margin-top: 10px;
}
.header-social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.header-social a:hover { color: var(--green); background: #f0fae8; }
.main-nav .nav-cta .btn {
  display: inline-block;
  padding: 9px 18px;
  color: var(--white);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-media video.is-ready { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 30, 20, 0.55), rgba(15, 30, 20, 0.75));
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-block: 90px;
}
.hero-content h1 {
  color: var(--white);
  font-size: clamp(2.3rem, 8vw, 3.4rem);
  font-weight: 900;
  margin-bottom: 14px;
  text-wrap: balance;
}
.hero-content > p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.15rem, 4.5vw, 1.35rem);
  font-weight: 500;
  margin-bottom: 34px;
}

/* ---------- Hero interno (páginas secundarias) ---------- */
.page-hero {
  position: relative;
  /* Antes eran 320px fijos: al lado del hero del home (82vh) quedaban
     como una franja fina. Ahora acompañan mejor sin robarle el
     protagonismo a la portada. */
  min-height: min(58vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 30, 20, 0.5), rgba(15, 30, 20, 0.72));
}
.page-hero h1 {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: clamp(2.3rem, 8vw, 3.4rem);
  font-weight: 900;
}
.page-hero-inner { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.page-hero-inner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 500;
  margin-top: 8px;
}
/* Volanta: la línea corta que va ARRIBA del H1.
   Existe por la campaña de Google Ads, no por diseño. El H1 de las
   landings dice el dolor ("La luz ya no es un gasto fijo") y no nombra
   el rubro, así que el visitante que llega buscando "paneles solares
   empresas" no ve en el primer pantallazo que llegó al lugar correcto
   — y Google evalúa la correspondencia anuncio-landing sobre el texto
   visible, no sobre el <title>. Esto lo resuelve sin tocar el copy.
   Va antes del H1 en el HTML, por eso el margin-top se anula.

   El selector lleva .page-hero-inner a propósito: ".page-hero-inner p"
   está más arriba y tiene más especificidad (0,1,1) que una clase sola
   (0,1,0), así que le ganaría el tamaño y el color sin avisar. */
.page-hero-inner .page-hero-eyebrow {
  color: var(--lime);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
}

/* ---------- Grilla de proyectos ---------- */
.project-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.project-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.project-card:hover img { transform: scale(1.06); }
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 20, 14, 0.8));
}
.project-card h3 {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  z-index: 2;
  color: var(--white);
  font-size: 1.2rem;
}

/* ---------- Formulario de contacto ---------- */
.contact-grid { display: flex; flex-direction: column; gap: 40px; }
.contact-form .form-group { margin-bottom: 18px; }
.contact-form label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--dark);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #d7ded9;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(65, 196, 6, 0.18);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
/* En móvil el botón de envío ocupa todo el ancho: más fácil de tocar */
.contact-form button[type="submit"] { width: 100%; padding-block: 15px; }
@media (min-width: 900px) {
  .contact-form button[type="submit"] { width: auto; }
}
/* Honeypot anti-spam: oculto para humanos */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-error {
  display: none;
  background: #fdf0f0;
  border-left: 4px solid #dc3545;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.form-error.visible { display: block; }

.contact-aside > div {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.contact-aside h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-aside p { font-size: 0.98rem; margin-bottom: 8px; }
.contact-aside .map-link img { border-radius: 10px; }

.wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: var(--white);
  font-weight: 700;
  border-radius: 50px;
  padding: 12px 22px;
}
.wa-inline:hover { color: var(--white); filter: brightness(1.06); }

/* ---------- Detalle de proyecto ---------- */
.project-video {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #000;
  display: block;
}
.project-body { max-width: 820px; margin: 0 auto; }
.project-body h2 { font-size: 1.85rem; margin-bottom: 16px; }
.project-body h3 { font-size: 1.5rem; margin: 28px 0 8px; }
/* Los títulos de la lista de beneficios NO llevan el tamaño ni el margen
   de los subtítulos del cuerpo: si no, el texto baja y el punto verde
   queda desalineado arriba. */
.project-body .mini-benefits h3 { font-size: 1.2rem; margin: 0 0 4px; }
.project-body p { margin-bottom: 16px; }
.project-body .mini-benefits { margin-top: 24px; }

/* Reutiliza .project-card (para que el lightbox funcione), pero sin
   el degradado ni el título sobreimpreso: acá las fotos van limpias. */
.gallery-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.gallery-grid .project-card::after { display: none; }
.sr-only-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 36px;
}

/* ---------- YouTube con carga diferida ----------
   Se muestra la miniatura; el reproductor (pesado) recién se
   descarga cuando el visitante hace clic en reproducir. */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #000 center/cover no-repeat;
  box-shadow: var(--shadow);
}
.yt-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease;
}
.yt-facade:hover::after { background: rgba(0, 0, 0, 0.05); }
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 72px;
  height: 50px;
  border-radius: 14px;
  background: rgba(22, 22, 22, 0.8);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.yt-facade:hover .yt-play { background: #ff0000; transform: translate(-50%, -50%) scale(1.06); }
.yt-play svg { fill: var(--white); }
/* Reproductor ya cargado (reemplaza a la miniatura) */
.yt-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bloque "EcoApo está en YouTube" */
.yt-cta { text-align: center; }
.yt-cta h2 { margin-bottom: 10px; }
.yt-cta p { color: var(--muted); margin-bottom: 24px; }
.btn-youtube {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ff0000;
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  border-radius: 50px;
  padding: 13px 26px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn-youtube:hover { color: var(--white); filter: brightness(1.1); transform: translateY(-2px); }

/* ---------- Formulario calificador (landing de empresas) ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(28, 38, 33, 0.13);
  padding: 30px 24px;
  max-width: 820px;
  margin: 0 auto;
}
.form-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
.form-card > p { color: var(--muted); margin-bottom: 24px; }
/* Dos columnas en escritorio; los campos anchos ocupan la fila entera */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.form-grid .ancho { grid-column: 1 / -1; }
/* El botón de envío ocupa el ancho del formulario: alineado con los campos
   y con la nota de abajo. Suelto quedaba corrido a la izquierda en escritorio
   y se salía de la tarjeta en móvil. */
.form-card button[type="submit"] { width: 100%; }
.form-nota {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
}
.campo-destacado {
  background: #f6faf2;
  border: 1px solid #dcecd0;
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.campo-destacado label { color: var(--green-dark); }
.campo-ayuda { display: block; font-weight: 500; font-size: 0.85rem; color: var(--muted); margin-top: -2px; margin-bottom: 8px; }

/* ---------- Puertas de la home (segmentador por audiencia) ---------- */
.puertas { display: grid; gap: 20px; grid-template-columns: 1fr; }
.puerta {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.puerta:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(28, 38, 33, 0.16); }
.puerta-img { aspect-ratio: 16 / 10; overflow: hidden; }
.puerta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.puerta:hover .puerta-img img { transform: scale(1.06); }
.puerta-txt { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.puerta h3 { font-size: 1.25rem; margin-bottom: 8px; }
.puerta p { color: var(--muted); font-size: 0.97rem; flex: 1; }
.puerta .flecha {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green-dark);
}
.puerta .flecha svg { transition: transform 0.18s ease; }
.puerta:hover .flecha svg { transform: translateX(4px); }

/* Caminos secundarios (instaladores, obra eléctrica) */
.otros-caminos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 22px;
}
.otro-camino {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 18px 20px;
  color: var(--text);
}
.otro-camino:hover { background: #eaf4ec; color: var(--green-dark); }
.otro-camino .feature-icon { flex: 0 0 44px; height: 44px; background: var(--white); }
.otro-camino strong { display: block; color: var(--dark); font-size: 1.02rem; }
.otro-camino span { font-size: 0.92rem; color: var(--muted); }

/* ---------- Calculadora de ahorro ---------- */
.calc {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(28, 38, 33, 0.13);
  padding: 28px 22px;
  max-width: 860px;
  margin: 0 auto;
}
.calc-campos { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 20px; }
.calc label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; color: var(--dark); }
.calc-ayuda { display: block; font-weight: 500; font-size: 0.85rem; color: var(--muted); margin: -2px 0 8px; }
.calc input, .calc select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #d7ded9;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
}
.calc input:focus, .calc select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(65, 196, 6, 0.18);
}
.calc-pesos { position: relative; }
.calc-pesos span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.calc-pesos input { padding-left: 30px; }

.calc-resultado { display: none; border-top: 1px solid #e9ecef; padding-top: 24px; margin-top: 4px; }
.calc-resultado.visible { display: block; }
.calc-numeros { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 20px; }
.calc-dato {
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
}
.calc-dato .valor {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--green);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.calc-dato .etiqueta { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 6px; }
.calc-supuestos {
  background: #f6faf2;
  border: 1px solid #dcecd0;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.calc-supuestos strong { color: var(--dark); }
.calc-error {
  display: none;
  background: #fdf0f0;
  border-left: 4px solid #dc3545;
  border-radius: 8px;
  padding: 11px 15px;
  margin-bottom: 16px;
  font-size: 0.93rem;
}
.calc-error.visible { display: block; }

/* ---------- Proceso numerado (01, 02, 03…) ---------- */
.pasos { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: paso; }
.paso {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px 24px;
}
.paso::before {
  counter-increment: paso;
  content: "0" counter(paso);
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--green);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.paso h3 { font-size: 1.12rem; margin-bottom: 6px; }
.paso p { font-size: 0.97rem; color: var(--muted); }

/* ---------- Fichas de casos (proyectos relacionados) ---------- */
.casos { display: grid; gap: 20px; grid-template-columns: 1fr; }
/* Cada caso es la foto del proyecto MÁS su ficha técnica, juntas.
   Así en móvil la descripción cae debajo de su obra y no en un bloque aparte. */
.caso { display: flex; flex-direction: column; gap: 14px; }
.caso .project-card { margin: 0; }
.caso-ficha {
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 18px 22px;
  flex: 1;
}
.caso-ficha h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 8px; }
.caso-ficha p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 15, 12, 0.93);
  display: none;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; }
.lightbox-caption { color: var(--white); text-align: center; margin-top: 12px; font-weight: 700; }

/* ---------- Grilla de tarjetas (2 columnas en desktop) ---------- */
.card-grid { grid-template-columns: 1fr; }

/* ---------- Botonera de servicios (anclas con icono) ---------- */
.service-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.service-nav a {
  background: var(--white);
  border-radius: var(--radius);
  color: #495057;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 22px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-shadow: 0 14px 32px rgba(28, 38, 33, 0.09);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Dos líneas fijas (con <br>), para que todas las cajas midan igual.
   En móvil las cajas son angostas: se achica un poco la letra y se
   equilibra el corte para que no queden 4 renglones. */
.sn-label { line-height: 1.35; text-wrap: balance; }
@media (max-width: 480px) {
  .service-nav a { font-size: 0.76rem; letter-spacing: 0.3px; padding: 18px 8px 12px; gap: 8px; }
  .service-nav .sn-icon { width: 38px; height: 38px; }
}
.service-nav a:hover {
  transform: translateY(-4px);
  color: var(--green-dark);
  box-shadow: 0 18px 38px rgba(28, 38, 33, 0.14);
}
.sn-icon { color: var(--green); }
.sn-chevron { color: var(--green); margin-top: auto; }
/* El de Climatización sale a otro sitio: icono de enlace externo */
.sn-external { opacity: 0.85; }

/* ---------- Mini beneficios (viñeta de punto verde) ---------- */
.mini-benefits { list-style: none; display: grid; gap: 18px; margin-top: 20px; }
.mini-benefits li { display: flex; gap: 12px; align-items: flex-start; }
/* El punto (16px) centrado con la primera línea del título (1.2rem) */
.mini-benefits svg { flex: 0 0 16px; color: var(--green); margin-top: 3px; }
.mini-benefits h3 { font-size: 1.2rem; margin-bottom: 4px; }
.mini-benefits p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Nota destacada en cajita gris ---------- */
.note-box {
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 14px 22px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 22px;
}

/* Ancla con margen para el header fijo */
section[id] { scroll-margin-top: 84px; }

/* ---------- Bloques divididos (texto + imagen) ---------- */
@media (min-width: 560px) and (max-width: 899px) {
  .project-grid { grid-template-columns: 1fr 1fr; }
}

.split { display: flex; flex-direction: column; gap: 36px; align-items: center; }
.split-text h2 { font-size: 1.85rem; margin-bottom: 16px; }
.split-text h3 { font-size: 1.5rem; margin-bottom: 8px; }
.split-text > p { margin-bottom: 24px; color: var(--muted); }
.split-media img,
.split-media video { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Video en bucle que acompaña un texto. El width/height del HTML reserva el
   lugar antes de que baje nada, así la página no salta cuando aparece. */
.split-media video.loop-video { width: 100%; height: auto; background: var(--dark); }

.feature-list { list-style: none; display: grid; gap: 18px; }
.feature-list li {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--grad-card);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 12px 26px rgba(53, 160, 5, 0.28);
}
.feature-icon {
  flex: 0 0 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--green-dark);
  background: var(--white);
  border-radius: 50%;
}
.feature-list h3 { font-size: 1.2rem; margin-bottom: 4px; color: var(--white); }
.feature-list p { font-size: 0.98rem; color: rgba(255, 255, 255, 0.94); }

/* ---------- Contadores ---------- */
.counters { background: var(--bg-alt); }
.counter-grid { display: grid; gap: 20px; text-align: center; }
.count-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 24px;
}
.count-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  color: #99ce26;
  background: #f6faeb;
  border-radius: 50%;
}
.count-num { font-size: 2.6rem; font-weight: 900; display: block; color: var(--dark); }
.count-box h3 { color: var(--muted); font-size: 1.05rem; font-weight: 500; margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* El borde despega la tarjeta cuando la sección es blanca (landings),
     donde la sombra sola no alcanza para separarla del fondo. */
  border: 1px solid #e7eee9;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary:hover { color: var(--green-dark); }
.faq summary {
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--green);
  transition: transform 0.2s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 20px 16px; color: var(--muted); }
.faq-img { max-width: 380px; margin-inline: auto; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--white);
  text-align: center;
}
.cta-banner h2 {
  font-size: clamp(1.85rem, 4vw, 2.1rem);
  max-width: 800px;
  margin: 0 auto 14px;
}
.cta-banner p { margin-bottom: 28px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: rgba(255, 255, 255, 0.8); }
.footer-grid {
  display: grid;
  gap: 32px;
  padding-block: 56px;
}
.footer-col h3 {
  color: var(--white);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.footer-col p { font-size: 0.98rem; margin-bottom: 12px; }
.footer-col a { color: var(--lime); }
.footer-col a:hover { color: var(--white); }
.footer-social { display: flex; gap: 20px; margin-top: 14px; }
.footer-social a { display: inline-block; padding: 10px 0; }
.footer-col p a { display: inline-block; padding: 3px 0; }
.footer-nav { list-style: none; }
/* inline-block, no block: así el área que se puede clickear es del ancho
   del texto y no de toda la columna */
.footer-nav a { display: inline-block; padding: 9px 0; color: rgba(255, 255, 255, 0.8); }
.footer-nav a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  padding: 18px 20px;
  font-size: 0.82rem;
}

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.wa-float:hover { transform: scale(1.08); color: var(--white); }

/* ---------- Popup: elegir rubro antes de abrir WhatsApp ----------
   Solo aparece en las páginas donde el rubro no se puede deducir. En las de
   rubro (hogar, campo, industrias, eléctricas, distribuidores) el botón sigue
   abriendo WhatsApp de un toque: ahí el mensaje ya viene precargado.
   El marcado lo crea main.js, así que sin JS el botón cae en su enlace de
   siempre y nunca queda muerto. */
.wa-modal {
  position: fixed;
  inset: 0;
  z-index: 300;                  /* por encima del lightbox (200) */
  background: rgba(10, 15, 12, 0.72);
  display: none;
  /* En móvil la caja arranca abajo, al alcance del pulgar. */
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.wa-modal.open { display: flex; }

.wa-modal-caja {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(10, 15, 12, 0.35);
  padding: 22px 20px 20px;
}
.wa-modal-caja h2 { font-size: 1.2rem; margin-bottom: 6px; padding-right: 34px; }
.wa-modal-caja > p { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }

.wa-modal-opciones { display: grid; gap: 10px; }
.wa-modal-opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;              /* objetivo cómodo para el pulgar */
  padding: 12px 14px;
  border: 1px solid #e3e9e5;
  border-radius: 12px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.25;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wa-modal-opcion:hover,
.wa-modal-opcion:focus-visible {
  border-color: var(--green);
  background: var(--bg-alt);
  color: var(--text);
}
.wa-modal-opcion svg { flex: none; color: var(--green); }

.wa-modal-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wa-modal-cerrar:hover { background: var(--bg-alt); color: var(--text); }

/* En escritorio no hay pulgar que acompañar: la caja va centrada. */
@media (min-width: 900px) {
  .wa-modal { align-items: center; }
}

/* ---------- Animación de aparición ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   Desktop
   ============================================ */
@media (min-width: 900px) {
  .section { padding: 96px 0; }
  .section.section-volver { padding-bottom: 72px; }

  .btn-lg { padding: 16px 38px; font-size: 0.95rem; letter-spacing: 1.5px; }

  .nav-toggle { display: none; }
  .main-nav {
    position: static;
    max-height: none;
    box-shadow: none;
    overflow: visible;
  }
  .main-nav ul {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0;
  }
  .main-nav a { padding: 6px 0; font-size: 0.95rem; }
  .nav-cta { margin: 0; }
  .header-social {
    border-top: none;
    margin-top: 0;
    padding: 0;
    margin-left: 4px;
  }
  .header-social a { width: 30px; height: 30px; }

  /* Submenú desplegable al pasar el mouse */
  .has-submenu { position: relative; }
  .has-submenu > a { display: inline-flex; align-items: center; gap: 5px; }
  .nav-chevron { display: inline-block; transition: transform 0.2s ease; }
  .has-submenu:hover .nav-chevron { transform: rotate(180deg); }
  /* Puente invisible: evita que el submenú se cierre al bajar el mouse */
  .has-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
  }
  .main-nav .submenu {
    /* display:block para anular el flex horizontal que .main-nav ul
       le impone: si no, las opciones se despliegan en fila y el
       submenú se va del ancho del header. */
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    min-width: 235px;
    padding: 8px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(28, 38, 33, 0.17);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 120;
  }
  /* focus-within: también se abre navegando con el teclado */
  .main-nav .has-submenu:hover .submenu,
  .main-nav .has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .main-nav .submenu a {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark);
    white-space: nowrap;
  }
  .main-nav .submenu a:hover, .main-nav .submenu a.active { background: #f0fae8; color: var(--green-dark); }

  .split { flex-direction: row; gap: 60px; }
  .split > * { flex: 1; }
  .split.reverse { flex-direction: row-reverse; }
  .split-text h2 { font-size: 2.1rem; }
  .section-title { font-size: 2.1rem; }

  .counter-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .service-nav { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .project-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pasos { grid-template-columns: repeat(4, 1fr); }
  .form-card { padding: 40px 44px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .puertas { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .otros-caminos { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
  .calc { padding: 38px 40px; }
  .calc-campos { grid-template-columns: 1fr 1fr; }
  .calc-numeros { grid-template-columns: repeat(3, 1fr); }
  .calc-dato .valor { font-size: 2.1rem; }
  .casos { grid-template-columns: 1fr 1fr; gap: 24px; }
  .contact-grid { flex-direction: row; align-items: flex-start; }
  .contact-form { flex: 1.5; }
  .contact-aside { flex: 1; }
  .service-nav a { font-size: 0.95rem; padding: 26px 18px 16px; }
  .count-num { font-size: 3.4rem; }

  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 0.8fr; }
}

/* Escritorio angosto (o con zoom): el menú completo no entra a lo ancho.
   Se compacta y se esconden las redes, que igual están en el pie.
   La web original hace lo mismo en estos tamaños.
   OJO: acá van SOLO ajustes del menú. El resto del diseño de escritorio
   vive en el bloque de arriba (min-width: 900px). */
@media (min-width: 900px) and (max-width: 1219px) {
  .main-nav ul { gap: 15px; }
  .main-nav a { font-size: 0.88rem; }
  .main-nav .nav-cta .btn { padding: 8px 14px; font-size: 0.72rem; letter-spacing: 0.5px; }
  .header-social { display: none; }
}