/* ============================================================
   NovaGreen Energy Solutions — estilos base
   Paleta de marca (placeholder hasta recibir manual): verde / blanco / naranja
   Todo en variables para reemplazar fácil cuando llegue el branding.
   ============================================================ */
/* ===== Lenis (scroll suave) ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* ===== Fuente de marca: Aero Matics Display ===== */
@font-face {
  font-family: 'Aero Matics Display';
  src: url('/fonts/AeroMaticsDisplay-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aero Matics Display';
  src: url('/fonts/AeroMaticsDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aero Matics Display';
  src: url('/fonts/AeroMaticsDisplay-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aero Matics Display';
  src: url('/fonts/AeroMaticsDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Paleta oficial NovaGreen (brandboard Volando) */
  --verde:        #5B9D50;  /* verde principal */
  --verde-claro2: #6FB965;  /* verde claro de marca */
  --verde-osc:    #3f7536;  /* derivado para gradientes/hover */
  --verde-claro:  #eaf4e8;  /* tinte claro para fondos */
  --naranja:      #F28F1A;  /* naranja (rayo) */
  --naranja-osc:  #d97d12;
  --amarillo:     #F1C447;  /* amarillo/dorado de marca */
  --negro:        #12160f;  /* negro de marca (identidad tech) */
  --negro-2:      #1c221c;  /* negro para degradés de cards */
  --blanco:       #ffffff;
  --gris-bg:      #f5f8f4;
  --texto:        #1f2b22;
  --texto-suave:  #5a6b60;
  --borde:        #e1e8df;
  --radio:        14px;
  --sombra:       0 10px 30px rgba(63, 117, 54, 0.10);
  --max:          1320px;
  --fuente:       'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fuente-titulo:'Aero Matics Display', 'Saira', 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente); color: var(--texto); background: var(--blanco); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .logo, .seccion-titulo, .hero-card .big, .split .pct {
  font-family: var(--fuente-titulo); letter-spacing: -0.3px;
}
.contenedor { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }
.seccion-titulo { font-size: 2rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.5px; }
.seccion-bajada { color: var(--texto-suave); max-width: 620px; margin-bottom: 48px; }
.centro { text-align: center; margin-left: auto; margin-right: auto; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px;
  font-weight: 700; font-size: .98rem; cursor: pointer; border: none; transition: .2s; }
.btn-primario { background: linear-gradient(120deg, var(--naranja), var(--amarillo)); color: #fff; }
.btn-primario:hover { background: linear-gradient(120deg, var(--naranja-osc), var(--naranja)); transform: translateY(-2px); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: var(--verde-osc); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--verde); border: 2px solid var(--verde); }
.btn-ghost:hover { background: var(--verde); color: #fff; }

/* Header */
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 9px; }
.logo-img { height: 44px; width: auto; display: block; }
.logo-txt { display: inline-flex; flex-direction: column; line-height: 1; }
.logo-nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.42rem; letter-spacing: .5px; }
.logo-txt .nova { color: var(--verde-claro2); }
.logo-txt .green { color: var(--verde); }
.logo-sub { font-family: var(--fuente-titulo); font-weight: 600; font-size: .56rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--verde); margin-top: 3px; }
.logo span.verde { color: var(--verde); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--texto-suave); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--verde); }
.nav-links a.nav-active { color: var(--verde); position: relative; }
.nav-links a.nav-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; background: var(--verde); border-radius: 2px; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; }

/* ===== Hero / Stage (paneles con transición, estilo Dar Sonrisas) ===== */
.hero.stage { position: relative; overflow: hidden; background: var(--blanco); min-height: 82vh; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-blur { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 56%);
          mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 56%); }
/* Luces suaves en movimiento (colores del video) */
.hero-glows { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.hero-glows span { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
.hero-glows span:nth-child(1) { width: 440px; height: 440px; left: 52%; top: 8%; opacity: .4;
  background: radial-gradient(circle, rgba(111,185,101,.9), transparent 70%); animation: glowA 17s ease-in-out infinite; }
.hero-glows span:nth-child(2) { width: 360px; height: 360px; left: 74%; top: 46%; opacity: .34;
  background: radial-gradient(circle, rgba(241,196,71,.85), transparent 70%); animation: glowB 21s ease-in-out infinite; }
.hero-glows span:nth-child(3) { width: 320px; height: 320px; left: 40%; top: 58%; opacity: .3;
  background: radial-gradient(circle, rgba(150,205,120,.8), transparent 70%); animation: glowC 25s ease-in-out infinite; }
@keyframes glowA { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-60px,45px) scale(1.12); } }
@keyframes glowB { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(50px,-40px) scale(1.15); } }
@keyframes glowC { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(45px,-35px) scale(1.2); } }
.hero.stage::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(0,0,0,.30); }
/* Aurora verde sutil (movimiento de fondo, solo CSS) */
.hero-aurora { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-aurora span { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.hero-aurora span:nth-child(1) { width: 560px; height: 560px; left: 55%; top: -18%; opacity: .5;
  background: radial-gradient(circle, rgba(111,185,101,.6), transparent 70%); animation: aur1 24s ease-in-out infinite; }
.hero-aurora span:nth-child(2) { width: 480px; height: 480px; left: -10%; top: 28%; opacity: .42;
  background: radial-gradient(circle, rgba(91,157,80,.5), transparent 70%); animation: aur2 28s ease-in-out infinite; }
.hero-aurora span:nth-child(3) { width: 420px; height: 420px; left: 72%; top: 55%; opacity: .3;
  background: radial-gradient(circle, rgba(241,196,71,.35), transparent 70%); animation: aur3 32s ease-in-out infinite; }
@keyframes aur1 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-70px,50px) scale(1.15); } }
@keyframes aur2 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(60px,-35px) scale(1.12); } }
@keyframes aur3 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-45px,-55px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .hero-aurora span { animation: none; } }

.stage-panel { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 48px; align-items: center; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 96px 24px 72px; visibility: hidden; pointer-events: none; }
.stage-panel.sp-active { visibility: visible; pointer-events: auto; }
.stage-panel.sp-exit { z-index: 1; opacity: 0; visibility: hidden; }
.stage-panel.sp-enter { visibility: visible; z-index: 3; animation: panelIn .5s ease both; }
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }

/* dots */
.stage-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 9px; align-items: center; padding: 8px 13px; border-radius: 999px;
  background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12); }
.sdot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55);
  transition: background .3s, width .3s; }
.sdot-active { background: var(--naranja); width: 28px; border-radius: 5px; box-shadow: 0 0 10px rgba(242,143,26,.6); }

.stage-arrow { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer; color: #fff;
  border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; transition: background .2s, transform .2s, border-color .2s; }
.stage-arrow:hover { background: rgba(255,255,255,.28); border-color: #fff; transform: translateY(-50%) translateX(4px); }
.stage-arrow svg { width: 26px; height: 26px; }
.stage-arrow--left { right: auto; left: 26px; display: none; }
.stage-arrow--left.is-visible { display: grid; }
.stage-arrow.is-hidden { display: none; }
.stage-arrow--left:hover { transform: translateY(-50%) translateX(-4px); }
@media (max-width: 900px) { .stage-arrow, .stage-arrow--left.is-visible { display: none; } }

/* Textos de los paneles legibles sobre el video */
.stage-panel .seccion-titulo { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.stage-panel .seccion-titulo em { color: var(--naranja); }
.stage-panel .seccion-bajada, .nosotros-texto { color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.nosotros-texto { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.55); }
.stage-panel:not(.stage-panel--full) .seccion-titulo em { color: #fff; }
/* Panel oscuro translúcido detrás del texto de Quiénes somos → contraste sobre el video */
.nosotros-copy { background: rgba(10,14,10,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 32px 34px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.nosotros-copy .seccion-titulo { margin-bottom: 14px; }
.nosotros-copy .nosotros-texto { margin-bottom: 0; }

.hero-eyebrow { display: inline-flex; align-items: center; font-family: var(--fuente-titulo); font-size: .76rem;
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--verde-osc);
  background: var(--verde-claro); border: 1px solid rgba(91,157,80,.25); padding: 7px 15px;
  border-radius: 999px; margin-bottom: 20px; }
/* Recuadro negro del inicio (estilo referencia) con backlight giratorio */
@property --glow-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --beam-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hero-left { position: relative; max-width: 570px; }
/* Halo oscuro difuso detrás → profundidad (el recuadro flota) + un toque de color muy sutil */
.hero-glow-bg { position: absolute; inset: -16px; border-radius: 32px; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--glow-a),
    rgba(111,185,101,.7), rgba(241,196,71,.6), rgba(150,205,120,.55),
    rgba(111,185,101,.25), rgba(241,196,71,.6), rgba(111,185,101,.7));
  filter: blur(28px); opacity: .28; animation: glowSpin 14s linear infinite; }
@keyframes glowSpin { to { --glow-a: 360deg; } }
.hero-copy { position: relative; z-index: 1;
  background: linear-gradient(158deg, var(--negro-2), var(--negro)); color: #fff;
  border-radius: 22px; padding: 62px 44px; max-width: 100%;
  box-shadow: 0 26px 60px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.06); }
/* Una línea de luz que recorre el borde */
.hero-copy::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--beam-a),
    transparent 0deg, transparent 300deg, rgba(150,225,130,.55) 324deg, rgba(241,196,71,.65) 348deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: blur(1.5px); animation: beamSpin 14s linear infinite; }
@keyframes beamSpin { to { --beam-a: 360deg; } }
.hero-copy h1 { font-size: 2.9rem; line-height: 1.08; font-weight: 800; letter-spacing: -1px; color: #fff; }
.hero-copy h1 em { font-style: normal;
  background: linear-gradient(100deg, var(--naranja), var(--amarillo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-line { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--naranja); margin: 22px 0; }
.hero-copy p { font-size: 1.1rem; color: rgba(255,255,255,.78); margin: 0 0 30px; max-width: 460px; }
.hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn-ghost:hover { background: #fff; color: var(--negro); border-color: #fff; }
.hero-chips { display: flex; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.chip-stat { display: flex; flex-direction: column; }
.chip-stat strong { font-family: var(--fuente-titulo); font-size: 1.7rem; color: var(--verde-osc); line-height: 1; }
.chip-stat span { font-size: .8rem; color: var(--texto-suave); margin-top: 3px; }

/* Molécula del hero (SVG animado) */
.hero-molecula { display: flex; align-items: center; justify-content: flex-end; }
.hero-contacto-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 350px; }
.hero-cta { width: 100%; justify-content: center; }
.hero-contacto.contacto-info { background: rgba(0,0,0,.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28); max-width: 350px; width: 100%; }
.hero-contacto ul { margin: 0; }
.hero-contacto li { color: rgba(255,255,255,.82); }
.hero-contacto li:last-child { margin-bottom: 0; }
.hero-contacto strong { color: #fff; }
.hero-contacto.contacto-info .ico { background: rgba(242,143,26,.16); color: var(--naranja); }
.molecula { width: 100%; max-width: 430px; filter: drop-shadow(0 22px 44px rgba(63,117,54,.28));
  animation: molSpin 55s linear infinite; transform-origin: center; will-change: transform; }
@keyframes molFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes molSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* stat gigante */
.hero-stat { text-align: right; }
.hs-num { font-family: var(--fuente-titulo); font-weight: 800; font-size: 6.5rem; line-height: .9;
  background: linear-gradient(120deg, var(--verde-osc), var(--verde));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hs-lbl { color: var(--texto-suave); font-size: .98rem; margin-top: 6px; }
.hs-mini { display: flex; gap: 26px; justify-content: flex-end; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid var(--borde); }
.hs-mini div { display: flex; flex-direction: column; text-align: right; }
.hs-mini strong { font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--texto); line-height: 1; }
.hs-mini span { font-size: .78rem; color: var(--texto-suave); margin-top: 4px; }

/* Panel Nosotros */
.stage-panel:not(.stage-panel--full) .seccion-titulo { text-align: left; }
.stage-panel .seccion-titulo em { font-style: normal; color: var(--verde); }
.nosotros-texto { color: #fff; font-size: 1.1rem; line-height: 1.7; margin: 16px 0 28px; max-width: 520px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.55); }
.explore-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--verde-claro);
  border: 1.5px solid rgba(91,157,80,.3); border-radius: 999px; padding: 10px 20px; font-family: var(--fuente-titulo);
  font-weight: 700; font-size: .92rem; color: var(--verde-osc); cursor: pointer; transition: .2s; }
.explore-pill:hover { background: #fff; border-color: var(--verde); transform: translateX(-3px); }
.galeria-nosotros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.galeria-nosotros .item { aspect-ratio: 4/3; }
.galeria-nosotros .item-wide { grid-column: 1 / -1; aspect-ratio: 16/6; }

/* Un solo recuadro que va cambiando de imagen */
.nosotros-slider { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radio);
  overflow: hidden; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.ns-slide { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20,26,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .9s ease; }
.ns-slide.ns-active { opacity: 1; }
.ns-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Foto real (lámina sobre fondo blanco): mostrar completa, no recortar */
.nosotros-foto { background: #fff; aspect-ratio: 16/9; }
.nosotros-foto .ns-slide { background: #fff; }
.nosotros-foto .ns-slide img { object-fit: contain; padding: 16px; }
.ns-slide .ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.75); }
.ns-slide .ph svg { width: 44px; height: 44px; }
.ns-slide .ph small { font-size: .85rem; font-weight: 600; }

/* Panel Qué hacemos (full width, columna) */
.stage-panel--full { display: flex; flex-direction: column; justify-content: center; padding-top: 44px; padding-bottom: 96px; }
.panel-full { width: 100%; max-width: 1120px; margin: 0 auto; text-align: center; }
.panel-full .seccion-titulo em { font-style: normal; color: #fff; }
.panel-full .grid-3 { margin-top: 8px; }
.panel-full .card { text-align: left; }
.stage-panel--full.sp-exit { z-index: 2; }

@media (max-width: 900px) {
  .hero.stage { min-height: auto; }
  .stage-panel { position: relative; display: none; grid-template-columns: 1fr; gap: 28px; padding: 56px 20px; }
  .stage-panel.sp-active { display: grid; }
  .stage-panel.sp-enter, .stage-panel.sp-enter-active,
  .stage-panel.sp-exit .sp-left, .stage-panel.sp-exit .sp-right { transform: none; opacity: 1; }
  .stage-dots { display: none; }
  .hero-stat { text-align: left; }
  .hs-mini { justify-content: flex-start; }
  .hs-mini div { text-align: left; }
  .hs-num { font-size: 4.6rem; }
  .hero-copy h1 { font-size: 2.3rem; }
}

/* Reveal al scroll (solo si hay JS) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
.grid-3 .card:nth-child(2), .pasos .paso:nth-child(2) { transition-delay: .09s; }
.grid-3 .card:nth-child(3), .pasos .paso:nth-child(3) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .bubbles span, .flow-dot, .chip::before { animation: none; }
}

/* Beneficios / propuesta */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* Cards oscuras de marca (negro + ícono naranja) */
.grid-4 .card { background: linear-gradient(160deg, var(--negro-2), var(--negro));
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 38px rgba(0,0,0,.28); }
.grid-4 .card h3 { color: #fff; }
.grid-4 .card p { color: rgba(234,243,236,.72); }
.grid-4 .card .ico { background: rgba(242,143,26,.14); color: var(--naranja);
  border: 1px solid rgba(242,143,26,.32); }

/* Mercados (Nuestras soluciones) */
.mercados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mercado { position: relative; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 34px 28px 28px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.mercado::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--verde), var(--verde-claro2, #6FB965)); opacity: 0;
  transition: opacity .28s ease; }
.mercado:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(63,117,54,.18); border-color: transparent; }
.mercado:hover::before { opacity: 1; }
.mercado-ico { width: 58px; height: 58px; border-radius: 16px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--naranja), var(--amarillo)); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(242,143,26,.32); transition: transform .28s ease; }
.mercado:hover .mercado-ico { transform: scale(1.06) rotate(-3deg); }
.mercado-ico svg { width: 28px; height: 28px; }
.mercado h3 { font-size: 1.25rem; margin-bottom: 10px; }
.mercado p { color: var(--texto-suave); font-size: .95rem; flex: 1; }
.mercado-tag { display: inline-flex; align-self: flex-start; margin-top: 20px; padding: 7px 14px;
  border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--verde-osc);
  background: var(--verde-claro); border: 1px solid rgba(91,157,80,.22); }
@media (max-width: 860px) { .mercados { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px; box-shadow: var(--sombra); }
.card .ico { width: 52px; height: 52px; border-radius: 13px; background: var(--verde-claro);
  color: var(--verde); display: grid; place-items: center; margin-bottom: 16px; }
.card .ico svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card p { color: var(--texto-suave); font-size: .96rem; }

/* ===== Explicador tecnología (ciclo hidrógeno) ===== */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fuente-titulo);
  font-size: .78rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--verde);
  background: var(--verde-claro); border: 1px solid rgba(91,157,80,.25); padding: 7px 14px;
  border-radius: 999px; margin-bottom: 18px; }
.centro-flex { margin-left: auto; margin-right: auto; }
.explicador .seccion-bajada { margin-left: auto; margin-right: auto; }
.explicador { text-align: center; overflow: hidden; }

/* Flujo simple (presentación, no manual) */
.flujo-simple { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 6px; margin-top: 14px; }
.fs-paso { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 108px; }
.fs-ico { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center;
  background: var(--verde-claro); border: 1px solid rgba(91,157,80,.22); color: var(--verde);
  transition: transform .25s ease, box-shadow .25s ease; }
.fs-ico svg { width: 34px; height: 34px; }
.fs-paso:hover .fs-ico { transform: translateY(-4px); box-shadow: var(--sombra); }
.fs-ico.fs-h2 { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--verde), var(--verde-claro2)); border-color: transparent; }
.fs-ico.fs-fuego { color: var(--naranja); border-color: rgba(242,143,26,.25);
  background: linear-gradient(135deg, rgba(242,143,26,.14), rgba(241,196,71,.14)); }
.fs-paso span { font-weight: 700; font-size: .95rem; color: var(--texto); }
.fs-arrow { color: var(--verde); font-size: 1.5rem; font-weight: 700; opacity: .45; padding: 0 6px; margin-bottom: 26px; }
@media (max-width: 620px) {
  .flujo-simple { flex-direction: column; }
  .fs-arrow { transform: rotate(90deg); margin: 4px 0; }
}

.ciclo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start;
  gap: 8px; margin: 20px 0 40px; }
.etapa { position: relative; padding: 8px 6px; }
.etapa-visual { height: 130px; display: grid; place-items: center; margin-bottom: 8px; }
.etapa-num { font-family: var(--fuente-titulo); font-weight: 800; font-size: .9rem; color: var(--verde);
  letter-spacing: 1px; opacity: .55; }
.etapa h3 { font-size: 1.1rem; margin: 4px 0 8px; }
.etapa p { color: var(--texto-suave); font-size: .9rem; max-width: 230px; margin: 0 auto; }

/* activación secuencial al entrar en vista */
.js .ciclo .etapa, .js .ciclo .conector { opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease; }
.js .ciclo.activo .etapa, .js .ciclo.activo .conector { opacity: 1; transform: none; }
.ciclo.activo .etapa[data-step="2"] { transition-delay: .18s; }
.ciclo.activo .conector:nth-of-type(2) { transition-delay: .28s; }
.ciclo.activo .etapa[data-step="3"] { transition-delay: .36s; }
.ciclo.activo .conector:nth-of-type(4) { transition-delay: .46s; }
.ciclo.activo .etapa[data-step="4"] { transition-delay: .54s; }
.ciclo.activo .conector:nth-of-type(6) { transition-delay: .64s; }

/* conector con flujo */
.conector { align-self: center; width: 100%; min-width: 34px; height: 3px; position: relative;
  margin-top: 56px; background: repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 12px);
  opacity: .4; border-radius: 2px; }
.conector .flujo { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 8px 1px rgba(91,157,80,.6); transform: translate(-50%,-50%);
  animation: flujo-anim 2s infinite linear; }
@keyframes flujo-anim { 0%{ left: 0%; } 100%{ left: 100%; } }

/* Etapa 1 — agua */
.v-agua { position: relative; width: 70px; height: 90px; display: grid; place-items: center; }
.v-agua .gota { width: 40px; height: 48px; background: linear-gradient(180deg, var(--verde-claro2), var(--verde));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(45deg); position: relative;
  box-shadow: 0 8px 18px rgba(91,157,80,.3); animation: flota 2.6s ease-in-out infinite; }
.v-agua .gota::after { content:''; position:absolute; top:9px; left:9px; width:11px; height:14px;
  background: rgba(255,255,255,.6); border-radius: 50%; transform: rotate(-45deg); }
.v-agua .onda { position: absolute; bottom: 4px; width: 46px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(91,157,80,.3); animation: onda-anim 2.6s ease-in-out infinite; }
@keyframes flota { 0%,100%{ transform: rotate(45deg) translateY(0);} 50%{ transform: rotate(45deg) translateY(-7px);} }
@keyframes onda-anim { 0%,100%{ transform: scaleX(.8); opacity:.6;} 50%{ transform: scaleX(1.2); opacity:.2;} }

/* Etapa 2 — celda electrólisis */
.v-celda { position: relative; width: 92px; height: 108px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(111,185,101,.12), rgba(91,157,80,.28));
  border: 1.5px solid rgba(91,157,80,.4); }
.v-celda .electrodo { position: absolute; top: 12px; bottom: 12px; width: 6px; border-radius: 3px; }
.v-celda .electrodo.izq { left: 24px; background: linear-gradient(var(--naranja), var(--naranja-osc)); }
.v-celda .electrodo.der { right: 24px; background: linear-gradient(#8a8f92, #5f6467); }
.burbujas-e { position: absolute; inset: 0; }
.burbujas-e span { position: absolute; bottom: -12px; border-radius: 50%; opacity: .85;
  background: radial-gradient(circle at 35% 30%, #fff, var(--verde-claro2)); animation: sube-b 2.4s infinite ease-in; }
.burbujas-e span:nth-child(1){ left:26px; width:8px; height:8px; animation-delay:0s; }
.burbujas-e span:nth-child(2){ left:24px; width:6px; height:6px; animation-delay:.7s; }
.burbujas-e span:nth-child(3){ left:29px; width:7px; height:7px; animation-delay:1.3s; }
.burbujas-e span:nth-child(4){ left:23px; width:9px; height:9px; animation-delay:1.9s; }
.burbujas-e span:nth-child(5){ right:26px; width:5px; height:5px; animation-delay:.3s; background: radial-gradient(circle at 35% 30%, #fff, #b9c0c4); }
.burbujas-e span:nth-child(6){ right:24px; width:4px; height:4px; animation-delay:1s; background: radial-gradient(circle at 35% 30%, #fff, #b9c0c4); }
.burbujas-e span:nth-child(7){ right:28px; width:5px; height:5px; animation-delay:1.6s; background: radial-gradient(circle at 35% 30%, #fff, #b9c0c4); }
.burbujas-e span:nth-child(8){ right:25px; width:4px; height:4px; animation-delay:2.1s; background: radial-gradient(circle at 35% 30%, #fff, #b9c0c4); }
@keyframes sube-b { 0%{ transform: translateY(0) scale(.5); opacity:0;} 18%{opacity:.9;} 100%{ transform: translateY(-104px) scale(1); opacity:0;} }

/* Etapa 3 — H2 on-demand */
.v-h2 { position: relative; width: 100px; height: 96px; display: grid; place-items: center; }
.v-h2 .molecula { position: relative; display: inline-flex; gap: 4px; animation: flota2 2.6s ease-in-out infinite; }
.v-h2 .molecula i { width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--verde-claro2), var(--verde));
  box-shadow: 0 0 14px rgba(91,157,80,.5); position: relative; }
.v-h2 .molecula i::after { content:'H'; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-family:var(--fuente-titulo); font-weight:800; font-size:.8rem; }
.v-h2 .via { position: absolute; bottom: 8px; left: 8px; right: 8px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--verde) 0 5px, transparent 5px 10px); opacity:.4; }
.v-h2 .via-dot { position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  background: var(--verde); box-shadow:0 0 8px 1px rgba(91,157,80,.6); transform: translate(-50%,-50%);
  animation: flujo-anim 1.8s infinite linear; }
@keyframes flota2 { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }

/* Etapa 4 — combustión limpia */
.v-fuego { position: relative; width: 80px; height: 100px; display: grid; place-items: end center; }
.v-fuego .llama { width: 40px; height: 56px; border-radius: 50% 50% 50% 50% / 70% 70% 40% 40%;
  background: linear-gradient(180deg, var(--amarillo), var(--naranja) 60%, var(--naranja-osc));
  transform: rotate(-2deg); box-shadow: 0 0 22px rgba(242,143,26,.5); animation: fuego 1s ease-in-out infinite alternate; }
.v-fuego .vapor { position: absolute; top: 2px; left: 34px; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(150,170,160,.5); animation: vapor-anim 2.4s ease-in infinite; }
.v-fuego .vapor.v2 { left: 44px; animation-delay: 1.2s; }
@keyframes fuego { 0%{ transform: rotate(-3deg) scaleY(.94);} 100%{ transform: rotate(3deg) scaleY(1.06);} }
@keyframes vapor-anim { 0%{ transform: translateY(0) scale(.6); opacity:0;} 30%{opacity:.6;} 100%{ transform: translateY(-46px) scale(1.3); opacity:0;} }

/* cierre */
.ciclo-cierre { display: inline-flex; flex-direction: column; gap: 8px; padding: 22px 34px;
  background: var(--verde-claro); border: 1px solid rgba(91,157,80,.25); border-radius: 18px; }
.cierre-ciclo { color: var(--verde-osc); font-weight: 700; font-size: .9rem; }
.ciclo-cierre strong { font-family: var(--fuente-titulo); font-size: 1.4rem; color: var(--texto); }
.ciclo-cierre strong span { background: linear-gradient(120deg, var(--verde), var(--verde-claro2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

@media (max-width: 860px) {
  .ciclo { grid-template-columns: 1fr; gap: 0; }
  .ciclo .conector { width: 3px; height: 34px; min-width: 0; margin: 4px auto;
    background: repeating-linear-gradient(180deg, var(--verde) 0 6px, transparent 6px 12px); }
  .ciclo .conector .flujo { animation: flujo-vert 2s infinite linear; }
  @keyframes flujo-vert { 0%{ top:0%; left:50%; } 100%{ top:100%; left:50%; } }
  .etapa { padding: 14px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-agua .gota, .v-agua .onda, .burbujas-e span, .v-h2 .molecula, .v-h2 .via-dot,
  .v-fuego .llama, .v-fuego .vapor, .conector .flujo { animation: none; }
}

/* ===== Franja de números ===== */
.franja { padding: 54px 0;
  background: radial-gradient(900px 300px at 50% -40%, rgba(91,157,80,.3), transparent 60%),
              linear-gradient(160deg, #0e1a13, #0a120d); color: #eaf3ec; }
.franja-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fr-item { text-align: center; position: relative; }
.fr-item:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 12%; height: 76%;
  width: 1px; background: rgba(255,255,255,.12); }
.fr-num { font-family: var(--fuente-titulo); font-weight: 800; font-size: 3.2rem; line-height: 1;
  background: linear-gradient(120deg, var(--verde-claro2), var(--amarillo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fr-lbl { color: rgba(234,243,236,.72); font-size: .9rem; margin-top: 8px; }
@media (max-width: 760px) {
  .franja-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .fr-item:nth-child(2)::after { display: none; }
}

/* Cómo funciona — 3 pasos de un vistazo, conectados */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 980px;
  margin: 40px auto 0; position: relative; }
.flow-step { position: relative; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 40px 26px 30px; text-align: center; box-shadow: var(--sombra);
  transition: transform .28s ease, box-shadow .28s ease; }
.flow-step:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(63,117,54,.16); }
/* Conector entre pasos (flecha) */
.flow-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -25px;
  width: 26px; height: 2px; background: linear-gradient(90deg, var(--verde), transparent);
  z-index: 2; }
.flow-num { position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--naranja), var(--amarillo)); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(242,143,26,.35); }
.flow-ico { width: 92px; height: 92px; border-radius: 24px; margin: 6px auto 20px;
  background: linear-gradient(160deg, var(--verde-claro), #dcefd6); display: grid; place-items: center; color: var(--verde); }
.flow-ico svg { width: 44px; height: 44px; }
.flow-step h3 { font-size: 1.22rem; margin-bottom: 10px; }
.flow-step p { color: var(--texto-suave); font-size: .95rem; }
@media (max-width: 780px) {
  .flow { grid-template-columns: 1fr; max-width: 420px; gap: 34px; }
  .flow-step:not(:last-child)::after { top: auto; bottom: -30px; right: 50%; transform: translateX(50%);
    width: 2px; height: 30px; background: linear-gradient(180deg, var(--verde), transparent); }
}

/* Swap Soluciones ↔ Cómo funciona (mismo lugar, altura fija → el botón no se mueve) */
.swap { display: grid; }
.swap-view { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
.swap-view.swap-oculta { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
.como-toggle-wrap { text-align: center; margin-top: 40px; }
.como-toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--blanco);
  border: none; border-radius: 999px; padding: 14px 28px; font-family: inherit;
  font-weight: 700; font-size: 1rem; color: #262626; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .22s ease, box-shadow .22s ease; }
.como-toggle:hover { transform: scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,.2); animation: none; }
.como-toggle .chev { width: 18px; height: 18px; transition: transform .3s ease; color: #555; }
.como-toggle.abierto { box-shadow: var(--sombra); }
.como-toggle.abierto .chev { transform: rotate(180deg); }
/* Atención sutil: leve zoom (se acerca y vuelve), continuo */
@keyframes comoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
  50% { transform: scale(1.028); box-shadow: 0 11px 28px rgba(0,0,0,.17); }
}
.como-toggle:not(.abierto) { animation: comoPulse 1.5s ease-in-out infinite; }

/* Franja de datos (80% / $0 / 50-50) */
/* padding-top calculado: el hero mide 82vh, así que dejamos blanco hasta el borde inferior
   de la pantalla y los números arrancan justo debajo (se ve blanco = "hay más abajo"). */
.stats-band { padding: calc(18vh - 58px) 0 46px; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.stats-band-inner { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; text-align: center; }
.sb-item strong { display: block; font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.7rem; line-height: 1;
  background: linear-gradient(120deg, var(--verde-osc), var(--verde));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-item span { display: block; color: var(--texto-suave); font-size: .95rem; margin-top: 6px; }
@media (max-width: 560px) {
  /* Franja: los 3 datos en una fila */
  .stats-band-inner { flex-wrap: nowrap; gap: 8px; justify-content: space-around; align-items: flex-start; }
  .stats-band .sb-item { flex: 1 1 0; min-width: 0; }
  .sb-item strong { font-size: 1.7rem; }
  .sb-item span { font-size: .74rem; margin-top: 4px; line-height: 1.25; }
  /* Recuadro negro del hero: más compacto para que entre completo */
  .hero-copy { padding: 34px 24px; border-radius: 18px; }
  .hero-copy h1 { font-size: 2rem; }
  .hero-copy p { font-size: 1rem; margin-bottom: 22px; }
  .hero-line { margin: 16px 0; }
  .stage-panel { padding: 32px 18px; }

  /* Qué hacemos: tarjetas compactas tipo fila (ícono izquierda, texto derecha) */
  .panel-full .seccion-titulo { font-size: 1.6rem; }
  .panel-full .seccion-bajada { margin-bottom: 22px; }
  .grid-4 { gap: 14px; }
  .grid-4 .card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px; align-items: start; }
  .grid-4 .card .ico { grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; margin-bottom: 0; }
  .grid-4 .card .ico svg { width: 22px; height: 22px; }
  .grid-4 .card h3 { grid-column: 2; margin-bottom: 4px; font-size: 1.05rem; }
  .grid-4 .card p { grid-column: 2; font-size: .9rem; }

  /* Quiénes somos: card de texto más compacto */
  .nosotros-copy { padding: 24px 22px; }
  .nosotros-copy .seccion-titulo { font-size: 1.6rem; }
  .nosotros-texto { font-size: 1rem; line-height: 1.6; }
}

/* Cómo funciona / 50-50 */
.bg-gris { background: var(--gris-bg); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: paso; }
.paso { position: relative; padding-top: 12px; }
.paso .num { counter-increment: paso; }
.paso .num::before { content: counter(paso); display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--naranja); color: #fff; border-radius: 50%; font-weight: 800; margin-bottom: 14px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra); margin-top: 40px; }
.split > div { padding: 32px; text-align: center; }
.split .cliente { background: var(--verde); color: #fff; }
.split .empresa { background: var(--verde-claro); }
.split .pct { font-size: 2.6rem; font-weight: 800; }

/* Calculadora — flip card 3D */
.flip-card { perspective: 2000px; }
.flip-inner { position: relative; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.45,.05,.25,1), height .7s cubic-bezier(.45,.05,.25,1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { top: 0; left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face--front { position: relative; }
.flip-face--back { position: absolute; transform: rotateY(180deg); }
.btn-volver { background: none; border: none; color: var(--verde); font-weight: 700; cursor: pointer;
  font-size: .95rem; margin-bottom: 18px; padding: 6px 0; transition: .2s; }
.btn-volver:hover { color: var(--verde-osc); transform: translateX(-3px); }
.calc-lead { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 28px; box-shadow: var(--sombra); max-width: 720px; margin: 0 auto; }
.lead-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-campos .span2 { grid-column: 1 / -1; }
.lead-campos input, .lead-campos textarea { width: 100%; padding: 13px 15px; border: 2px solid var(--borde);
  border-radius: 12px; font-size: 1rem; font-family: inherit; transition: .2s; }
.lead-campos input:focus, .lead-campos textarea:focus { outline: none; border-color: var(--verde); }
@media (max-width: 600px) { .lead-campos { grid-template-columns: 1fr; } }

.calc-legal { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: .82rem;
  color: var(--texto-suave); line-height: 1.55; }
#calculadora .seccion-titulo { font-size: 1.7rem; margin-bottom: 6px; }
#calculadora .seccion-bajada { margin-bottom: 22px; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.calc-form { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px; box-shadow: var(--sombra); }
.calc-form label { display: block; font-weight: 700; margin-bottom: 8px; }
.calc-form .input-money { position: relative; }
.calc-form .input-money span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--texto-suave); font-weight: 700; }
.calc-form input { width: 100%; padding: 8px 16px 8px 34px; border: 2px solid var(--borde);
  border-radius: 12px; font-size: 1.02rem; font-weight: 600; transition: .2s; }
.calc-form input:focus { outline: none; border-color: var(--verde); }
.calc-form .hint { color: var(--texto-suave); font-size: .82rem; margin-top: 6px; }
.calc-result { background: linear-gradient(135deg, var(--verde-osc), var(--verde)); color: #fff;
  border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.calc-result .res-lbl { text-align: center; font-weight: 800; color: #fff; font-size: 1.15rem; margin-bottom: 6px; }
.calc-result .res-big { font-size: 3rem; font-weight: 800; color: var(--naranja-claro, #ffb877); line-height: 1.1; }
.calc-result .res-row { display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.calc-result .res-row:last-of-type { border-bottom: none; }
.calc-result .res-row .v { font-size: 1.5rem; font-weight: 800; color: #fff; }
.calc-result .disclaimer { font-size: .8rem; line-height: 1.45; opacity: .95; margin-top: 14px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; padding: 10px 12px 10px 36px; position: relative; }
.calc-result .disclaimer::before { content: 'i'; position: absolute; left: 12px; top: 12px;
  width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--verde-osc);
  font-family: var(--fuente-titulo); font-weight: 800; font-size: .72rem; font-style: normal;
  display: grid; place-items: center; }
.calc-result .disclaimer b { color: #fff; }

/* Calculadora — campos y controles */
.cf-group { margin-bottom: 9px; }
.cf-group label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .95rem; }
.cf-inline { display: flex; align-items: stretch; gap: 8px; }
.cf-inline input { flex: 1; min-width: 0; }
.cf-usd { display: flex; align-items: center; padding: 0 14px; border: 2px solid var(--borde);
  border-radius: 12px; font-weight: 700; color: var(--texto-suave); background: var(--gris, #f4f6f4); }
.cf-unit { border: 2px solid var(--borde); border-radius: 12px; padding: 0 12px; font-size: 1rem;
  font-weight: 600; font-family: inherit; background: #fff; cursor: pointer; min-width: 96px; transition: .2s; }
.cf-unit:focus { outline: none; border-color: var(--verde); }
.cf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-row2 .cf-group { margin-bottom: 9px; }

/* Segmentos (combustible / porcentaje) */
.seg { display: flex; gap: 6px; background: var(--gris, #f4f6f4); padding: 5px;
  border-radius: 14px; border: 1px solid var(--borde); }
.seg-btn { flex: 1; padding: 11px 10px; border: none; background: transparent; border-radius: 10px;
  font-weight: 700; font-family: inherit; font-size: .95rem; color: var(--texto-suave); cursor: pointer; transition: .18s; }
.seg-btn:hover { color: var(--texto); }
.seg-btn.activo { background: var(--verde); color: #fff; box-shadow: 0 3px 10px rgba(91,157,80,.35); }

/* Selector de % dentro del panel verde de resultado */
.seg--pct { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); margin: 14px 0 18px; }
.seg--pct .seg-btn { color: rgba(255,255,255,.75); }
.seg--pct .seg-btn:hover { color: #fff; }
.seg--pct .seg-btn.activo { background: var(--naranja); color: #12160f; box-shadow: 0 3px 10px rgba(242,143,26,.4); }

.res-anual { text-align: center; margin: 4px 0 14px; }
.calc-result .res-anual .res-big { display: block; font-size: 2.5rem; line-height: 1.05; }
.res-anual-lbl { display: block; margin-top: 2px; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.res-nota { display: block; margin-top: 12px; font-size: .78rem; opacity: .72; }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.galeria .item { aspect-ratio: 4/3; border-radius: var(--radio); overflow: hidden;
  background: var(--verde-claro); border: 1px dashed rgba(91,157,80,.35);
  display: grid; place-items: center; position: relative; }
.galeria .item img { width: 100%; height: 100%; object-fit: cover; }
.galeria .ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--verde); opacity: .7; }
.galeria .ph svg { width: 40px; height: 40px; }
.galeria .ph small { font-size: .8rem; font-weight: 600; }

/* Contacto */
#contacto .seccion-titulo, #contacto .seccion-bajada { text-align: center; margin-left: auto; margin-right: auto; }
.contacto-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px;
  max-width: 720px; margin: 0 auto 30px; }
.contacto-datos .cd-item { display: inline-flex; align-items: center; gap: 8px; color: var(--texto);
  font-weight: 600; font-size: .95rem; text-decoration: none; transition: .2s; }
.contacto-datos a.cd-item:hover { color: var(--verde); }
.contacto-datos .cd-ico { font-size: 1.05rem; }
.contacto { display: block; max-width: 620px; margin: 0 auto; }
.contacto-info { background: var(--gris-bg); border: 1px solid var(--borde); border-radius: var(--radio); padding: 30px; }
.form-grid { display: grid; gap: 16px; }
.form-grid .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid input, .form-grid textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--borde);
  border-radius: 12px; font-size: 1rem; font-family: inherit; transition: .2s; }
.form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--verde); }
.form-msg { font-weight: 600; margin-top: 8px; }
.form-msg.ok { color: var(--verde); }
.form-msg.err { color: #c0392b; }
.contacto-info li { list-style: none; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; }
.contacto-info .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--verde-claro);
  color: var(--verde); display: grid; place-items: center; flex-shrink: 0; }
.contacto-info .ico svg { width: 20px; height: 20px; }

/* WhatsApp flotante */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 60px; height: 60px;
  border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 24px rgba(37,211,102,.45); transition: .2s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }

/* Footer */
footer { background: var(--texto); color: #cdd6d1; padding: 48px 0 28px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
footer a:hover { color: #fff; }
footer .copy { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: .85rem; opacity: .7; }

/* Responsive */
@media (max-width: 900px) {
  .hero .contenedor, .calc, .contacto { grid-template-columns: 1fr; }
  .grid-3, .pasos, .galeria { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.abierto { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; padding: 20px 24px; gap: 16px; border-bottom: 1px solid var(--borde); }
  section { padding: 60px 0; }
  footer .cols { grid-template-columns: 1fr; gap: 26px; }
  footer .cols p, footer .cols a { overflow-wrap: break-word; word-break: break-word; }
}

/* Red de seguridad: nunca permitir scroll horizontal en mobile */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}