/* =====================================================================
   ARAUZA SOLAR — sub-acento solar (sobre family-kit.css + arauza.css)
   v1.0 · 2026-06-29 · ver comando/marca/identidad-corporativa-arauza.md

   El frente solar (arauzaindustrial.com) CONSERVA el cobre Arauza como ancla
   de marca (logo, títulos, footer) y usa SOL-ORO + VERDE-ENERGÍA como
   personalidad del frente (hero, acentos vivos, CTA, tarjetas).
   Cargar DESPUÉS de family-kit.css y arauza.css.
   ===================================================================== */

:root {
  /* La "señal viva" pasa de cobre a sol-oro; el verde marca lo renovable. */
  --brand-accent: #f4a92e;       /* sol-oro — puntos, realces, mono en oscuro */
  --brand-accent-ink: #b5741a;   /* ámbar legible como texto pequeño sobre claro */
  --solar: #f4a92e;
  --green: #2e9e6b;
  /* Gradiente del frente (amanecer → energía verde): CTA y barras de tarjeta */
  --brand-gradient: linear-gradient(100deg, #f4a92e 0%, #6cbf59 58%, #2e9e6b 100%);
  /* --brand (cobre) se conserva para títulos, botón primario y footer (ancla). */
}

/* theme-color y favicon los fija Base.astro */

/* ===================== HERO (personalidad solar) ===================== */
.hero::before {
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(244,169,46,.26), transparent 60%),
    radial-gradient(800px 420px at 8% 110%, rgba(46,158,107,.20), transparent 55%);
}
.eyebrow { color: var(--solar); border-color: rgba(244,169,46,.38); background: rgba(244,169,46,.10); }
.eyebrow .dot { background: var(--solar); box-shadow: 0 0 0 4px rgba(244,169,46,.20); }
.hero h1 .accent { color: var(--solar); }

/* sol radiante detrás del panel de ficha */
.spec-card { border-color: rgba(244,169,46,.26); }
.spec-card h2::before { background: var(--solar); box-shadow: 0 0 12px var(--solar); }

/* ===================== TARJETAS DE SERVICIO ===================== */
.svc-card:hover { border-color: rgba(244,169,46,.35); }
.svc-card .ico { background: rgba(244,169,46,.12); color: var(--brand-accent-ink); border-color: rgba(244,169,46,.18); }
.svc-card .tags span { color: var(--brand-accent-ink); background: rgba(244,169,46,.14); }
.band--machine .svc-card .ico { background: rgba(244,169,46,.16); color: var(--solar); border-color: rgba(244,169,46,.30); }

/* tarjeta "renovable" — realce verde opcional con .is-green */
.svc-card.is-green .ico { background: rgba(46,158,107,.12); color: #1f7d51; border-color: rgba(46,158,107,.22); }

/* ===================== CONTACTO / FORM ===================== */
.contact-item .ico { background: rgba(244,169,46,.12); color: var(--brand-accent-ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--solar); box-shadow: 0 0 0 4px rgba(244,169,46,.18); }

/* ===================== MEDIA / BADGE ===================== */
.media-frame .badge { border-color: rgba(244,169,46,.34); }

/* CTA final ya usa --brand-gradient (sol→verde). Texto invert hover cálido. */
.cta-final .btn--invert:hover { background: #fff6e6; color: var(--brand-deep); }

/* Tira de ecosistema: resaltar el frente solar */
.ecosystem__list .dot.sol { --c: #f4a92e; }