/* ============================================================= */
/* GREENOVA — styles-dark.css · TEMA OSCURO (v2)                  */
/* Fondo verde oscuro + letras beige. Se carga al final, solo    */
/* en index-v2.html. Invierte la paleta redefiniendo variables.  */
/* ============================================================= */

:root {
  --cream:        #0D3B1F;   /* fondo principal: verde oscuro */
  --cream-2:      #0A2E18;   /* secciones alternas (más oscuro) */
  --paper:        #134A29;   /* tarjetas / inputs (verde más claro) */
  --ink:          #F4F1EA;   /* texto principal: beige */
  --ink-soft:     rgba(244,241,234,0.86);
  --ink-muted:    rgba(244,241,234,0.62);
  --on-dark:      #F4F1EA;
  --on-dark-soft: rgba(244,241,234,0.70);
  --line:         rgba(244,241,234,0.14);
  --line-strong:  rgba(244,241,234,0.26);
  --line-dark:    rgba(244,241,234,0.16);
  /* El verde "llamativo" no gustó: los acentos y botones pasan a BEIGE claro.
     El fondo sigue verde oscuro. */
  --green-bright: #F4F1EA;   /* acentos (labels, itálicas, números) -> beige */
  --green-vivid:  #F4F1EA;   /* botones primarios -> beige */
  --green-glow:   rgba(244,241,234,0.12);
}

body { background: var(--cream); color: var(--ink); }

/* ----- Acentos verdes más claros (para que resalten sobre lo oscuro) ----- */
.label { color: var(--green-bright); }
.text-green { color: var(--green-bright); }
.rule { background: var(--green-bright); }
.que__features li span { background: rgba(244,241,234,0.14); color: var(--green-bright); }
.app-card__icon, .que__icon { color: var(--green-bright); }

/* ----- Botones ----- */
.btn--primary { background: var(--green-vivid); color: #0D3B1F; }
.btn--primary:hover { background: #FFFFFF; color: #0D3B1F; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: #F4F1EA; background: rgba(244,241,234,0.10); }

/* ----- Navbar ----- */
.nav.is-scrolled { background: rgba(13,59,31,0.95); border-bottom-color: var(--line); }
.nav__links a { color: var(--ink); }
.nav__cta { color: var(--ink); border-color: var(--line-strong); }
.nav__cta:hover { background: var(--green-vivid); color: #06210F; border-color: var(--green-vivid); }
.nav__burger span { background: var(--ink); }
.mobile-menu { background: var(--cream); }

/* ----- Hero: velo oscuro para que el texto beige se lea sobre la imagen ----- */
.hero--media .hero__scrim {
  background: linear-gradient(100deg,
    rgba(6,28,15,0.94) 0%, rgba(6,28,15,0.9) 28%,
    rgba(6,28,15,0.7) 46%, rgba(6,28,15,0.35) 64%,
    rgba(6,28,15,0.05) 85%, transparent 100%);
}
.hero__topfade { background: linear-gradient(180deg, rgba(6,28,15,0.96) 0%, rgba(6,28,15,0.55) 50%, transparent 100%); }
.hero__stat { background: var(--paper); }
.hero__stat-num { color: var(--green-bright); }
.hero__scroll-text { color: var(--on-dark-soft); }
.hero__scroll-line { background: linear-gradient(var(--green-bright), transparent); }

@media (max-width: 820px) {
  .hero--media .hero__scrim {
    background: linear-gradient(180deg,
      rgba(6,28,15,0.30) 0%, rgba(6,28,15,0.15) 30%,
      rgba(6,28,15,0.85) 72%, var(--cream) 100%);
  }
}

/* ----- Secciones que eran verde profundo: más oscuras para mantener contraste ----- */
.stats, .quote, .footer { background: #0D3B1F; }
.stat__num { color: var(--green-bright); }

/* ----- Tarjetas, chips y badges ----- */
.app-card { background: var(--cream-2); border-color: var(--line); }
.app-card:hover { background: var(--paper); border-color: var(--green-bright); box-shadow: 0 30px 70px rgba(0,0,0,0.3); }
.que__card, .compara__table { background: var(--paper); border-color: var(--line); }
.compara__row { border-color: var(--line); }
.compara__row--head { background: rgba(244,241,234,0.05); }
.compara__green { color: var(--green-bright); }
.compara__green::before { background: var(--line-strong); }
.chip { background: var(--paper); border-color: var(--line); color: var(--ink-soft); }
.chip::before { color: var(--green-bright); }
.badge { color: var(--green-bright); border-color: var(--line-strong); }

/* ----- Formularios / select personalizado ----- */
.calc__controls { background: var(--paper); border-color: var(--line); }
.field input, .field select, .field textarea,
.cselect__native, .cselect__trigger { background: var(--cream-2); border-color: var(--line); color: var(--ink); }
.cselect__trigger:hover { border-color: var(--line-strong); }
.cselect__panel { background: var(--cream-2); border-color: var(--line); }
.cselect__opt { color: var(--ink-soft); }
.cselect__opt:hover, .cselect__opt.is-active { background: rgba(244,241,234,0.07); color: var(--ink); }
.cselect__chevron, .cselect__opt[aria-selected="true"], .cselect__opt[aria-selected="true"]::after { color: var(--green-bright); }
.calc__scale { color: var(--ink-muted); }
.calc__range { background: rgba(244,241,234,0.22); }
.calc__range::-webkit-slider-thumb { background: var(--green-bright); border-color: var(--cream); }
.calc__range::-moz-range-thumb { background: var(--green-bright); border-color: var(--cream); }

/* Tarjeta de resultado: invertida -> fondo beige con letras verdes (resalta sobre lo oscuro) */
.calc__result { background: #F4F1EA; color: #0D3B1F; box-shadow: 0 40px 90px rgba(0,0,0,0.35); }
.calc__result-label { color: rgba(13,59,31,0.6); }
.calc__result-intro { color: rgba(13,59,31,0.66); }
.calc__result-amount { color: #0D3B1F; }
.calc__result-unit { color: rgba(13,59,31,0.62); }
.calc__summary { border-color: rgba(13,59,31,0.16); }
.calc__summary li { border-color: rgba(13,59,31,0.12); }
.calc__summary li span:first-child { color: rgba(13,59,31,0.62); }
.calc__summary li span:last-child { color: #0D3B1F; }
.calc__result .btn--whatsapp { background: #1A6B35; color: #F4F1EA; }
.calc__result .btn--whatsapp:hover { background: #0D3B1F; color: #F4F1EA; }
.calc__disclaimer { color: rgba(13,59,31,0.55); }

/* ----- Contacto ----- */
/* "Escribinos por WhatsApp" igual que los demás botones: fondo beige, letras verdes */
.contacto__cta .btn--whatsapp { background: #F4F1EA; color: #0D3B1F; }
.contacto__cta .btn--whatsapp:hover { background: #FFFFFF; color: #0D3B1F; }
.contacto__alt a { border-color: var(--line); }
.contacto__alt a:hover { color: var(--green-bright); border-color: var(--green-bright); }
.contacto__sep { color: var(--ink-muted); }

/* ----- Cursor personalizado ----- */
.cursor { background: var(--green-bright); }
.cursor.is-hover { border-color: var(--green-bright); }

/* ----- Correcciones (ronda 2) ----- */
/* Slider antes/después: handle visible (círculo beige + flecha verde) */
.ba__handle-circle { background: #F4F1EA; color: #0D3B1F; }

/* Presupuestador: ambas columnas de igual altura */
.calc { align-items: stretch; }

/* Comparativa y textos finos: más contraste y un poco más de cuerpo */
.compara__trad { color: var(--ink-soft); }
.compara__row--head { color: var(--ink-soft); }
.body-lg, .section-sub, .compara__row, .que__features li { font-weight: 400; }

/* "GREENOVA" del encabezado del cuadro comparativo: igual de visible que las celdas */
.compara__row--head .compara__green { color: var(--green-bright); }

/* El "de alto impacto" del hero (tenía color verde propio) -> beige */
.hero__title .italic { color: #F4F1EA; }

/* "Superficie a intervenir": el valor en m² en blanco (se perdía en verde) */
.calc__controls .field label strong { color: #F4F1EA; }

/* ============================================================= */
/* ALTERNANCIA DE SECCIONES                                       */
/* Verde (fondo verde, letra beige) <-> Beige (fondo beige, verde) */
/* Las secciones beige re-escalan las variables al contexto claro */
/* ============================================================= */
.ba, .que, .compara, .casos, .eco {
  background: #F4F1EA;
  color: #14211A;
  --ink: #14211A;
  --ink-soft: rgba(20,33,26,0.74);
  --ink-muted: rgba(20,33,26,0.50);
  --on-dark-soft: rgba(20,33,26,0.60);
  --green-bright: #1A6B35;   /* acentos en verde sobre beige */
  --green-vivid: #1A6B35;
  --paper: #FFFFFF;
  --cream-2: #FAF8F2;
  --line: rgba(20,33,26,0.12);
  --line-strong: rgba(20,33,26,0.20);
  --line-dark: rgba(20,33,26,0.12);
  --green-glow: rgba(26,107,53,0.12);
}
/* tintes que estaban pensados para fondo oscuro, corregidos para beige */
.compara .compara__row--head { background: rgba(20,33,26,0.04); }
.que .que__features li span { background: rgba(26,107,53,0.12); }

/* ----- Mobile: "Contactanos" y "Escribinos por WhatsApp" igual que el primario (beige) ----- */
@media (max-width: 480px) {
  .hero__cta .btn--ghost,
  .contacto__cta .btn--whatsapp { background: var(--green-vivid); color: #0D3B1F; border-color: var(--green-vivid); }
  .hero__cta .btn--ghost:hover,
  .contacto__cta .btn--whatsapp:hover { background: #FFFFFF; color: #0D3B1F; border-color: #FFFFFF; }
}