/* ============================================================
   WattHarvest — styles.css
   Paleta y sistema visual según documento maestro
   ============================================================ */

:root {
  --wh-bg: #071b17;
  --wh-light: #f3f1e9;
  --wh-ink: #f7f8f3;
  --wh-ink-dark: #0b2821;
  --wh-energy: #b8f24a;
  --wh-water: #4ed6b2;
  --wh-line: #29443d;
  --wh-muted: #9caea8;
  --wh-muted-dark: #5b6f68;

  --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1360px;
  --gutter: clamp(20px, 4vw, 72px);
  --section-y: clamp(64px, 10vw, 160px);

  --h1: clamp(2.4rem, 6.8vw, 7.5rem);
  --h2: clamp(2.2rem, 4.6vw, 5.2rem);
  --body: clamp(1.05rem, 1.4vw, 1.35rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wh-bg);
  color: var(--wh-ink);
  font: 400 var(--body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--wh-energy); color: var(--wh-ink-dark);
  padding: 12px 20px; border-radius: 8px; font-weight: 600;
  text-decoration: none; transition: top 180ms ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--wh-energy);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--light { background: var(--wh-light); color: var(--wh-ink-dark); }

h2 {
  font-size: var(--h2);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
h3 { font-weight: 600; font-size: 1.35rem; }

.section__intro {
  margin-top: 1.5rem;
  max-width: 52ch;
  color: var(--wh-muted);
  font-size: var(--body);
}
.section--light .section__intro { color: var(--wh-muted-dark); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wh-muted);
  margin: 0 0 1.25rem;
}
.eyebrow--accent { color: var(--wh-energy); }
.eyebrow--dark { color: var(--wh-muted-dark); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.5em;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem;
  text-decoration: none;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn--primary {
  background: var(--wh-energy); color: var(--wh-ink-dark);
}
.btn--primary:hover { transform: translateY(-2px); background: #c8fa62; }
.btn--ghost {
  background: transparent; color: var(--wh-ink);
  border-color: var(--wh-line);
}
.btn--ghost:hover { border-color: var(--wh-energy); }
.section--light .btn--ghost { color: var(--wh-ink-dark); }
.btn--sm { min-height: 42px; padding: 0.45em 1.2em; font-size: 0.92rem; }
.btn--lg { font-size: 1.1rem; padding: 0.85em 1.9em; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  max-height: 80px;
  transition: background 250ms ease, backdrop-filter 250ms ease, box-shadow 250ms ease;
}
.site-header.is-scrolled {
  background: rgba(7, 27, 23, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--wh-line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 80px;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand__mark, .footer__brand-mark {
  display: block;
  flex: none;
  width: clamp(240px, 18vw, 280px);
  height: auto;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand__descriptor {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wh-muted);
}

.site-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.site-nav__list a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  color: var(--wh-ink); opacity: 0.85; transition: opacity 180ms ease;
  padding: 0.4em 0;
}
.site-nav__list a:hover { opacity: 1; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--wh-line);
  border-radius: 10px; width: 46px; height: 46px;
  position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: ""; position: absolute; height: 2px;
  background: var(--wh-ink); border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.nav-toggle__bar { top: 50%; margin-top: -1px; left: 12px; right: 12px; }
.nav-toggle__bar::before,
.nav-toggle__bar::after { left: 0; right: 0; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .brand__descriptor { display: none; }
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 80px 0 auto 0;
    background: rgba(7, 27, 23, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--wh-line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform 220ms ease, opacity 220ms ease, visibility 220ms;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav__list {
    flex-direction: column; align-items: flex-start;
    padding: 1.5rem var(--gutter) 2rem; gap: 1.1rem;
  }
  .site-nav__list a { font-size: 1.2rem; }
  .site-nav__cta-item { margin-top: 0.5rem; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding-top: clamp(120px, 18vh, 190px);
  padding-bottom: clamp(40px, 6vh, 80px);
  min-height: 92svh;
  display: flex; align-items: center;
}
.hero__title {
  font-size: var(--h1);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 24ch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hero__grid {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero__lead { color: var(--wh-muted); max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__micro {
  margin-top: 2.25rem; font-size: 0.78rem;
  letter-spacing: 0.12em; color: var(--wh-muted);
}
@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__title, h2 { hyphens: auto; overflow-wrap: break-word; }
}

/* ---------- Animación principal: Energy-to-Digital Flow ---------- */
.energy-flow { width: min(100%, 760px); margin: 0; color: var(--wh-ink); }
.energy-flow__svg { display: block; width: 100%; height: auto; overflow: visible; }

.energy-flow__wave, .energy-flow__rail { fill: none; stroke-linecap: round; }
.energy-flow__wave--ghost { stroke: var(--wh-line); stroke-width: 2; }
.energy-flow__wave--active {
  stroke: url(#energyGradient); stroke-width: 4;
  stroke-dasharray: 80 520;
  animation: harvest-flow 4s linear infinite;
  filter: url(#softGlow);
}
.energy-flow__rail { stroke: var(--wh-line); stroke-width: 2; }

.energy-flow__pulse { fill: var(--wh-energy); filter: url(#softGlow); }
.energy-flow__pulse--one {
  offset-path: path("M420 260 H760");
  animation: harvest-pulse 3s linear infinite;
}
.energy-flow__pulse--two {
  offset-path: path("M420 260 H760");
  animation: harvest-pulse 3s 1.5s linear infinite;
}

.energy-flow__rack {
  fill: rgba(255, 255, 255, 0.025);
  stroke: var(--wh-line); stroke-width: 2;
}
.energy-flow__modules rect {
  fill: rgba(184, 242, 74, 0.06);
  stroke: var(--wh-line);
  transition: fill 300ms ease, stroke 300ms ease;
  animation: harvest-module 4s ease-in-out infinite;
}
.energy-flow__modules rect:nth-child(2) { animation-delay: 0.35s; }
.energy-flow__modules rect:nth-child(3) { animation-delay: 0.7s; }
.energy-flow__modules rect:nth-child(4) { animation-delay: 1.05s; }

.energy-flow__value circle {
  fill: var(--wh-energy); opacity: 0.2;
  animation: harvest-value 3.2s ease-in-out infinite;
}
.energy-flow__value circle:nth-child(3n + 2) { animation-delay: 0.3s; }
.energy-flow__value circle:nth-child(3n) { animation-delay: 0.6s; }

.energy-flow__labels {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 0; margin: 0; list-style: none;
  font: 500 0.75rem/1.3 var(--font-mono);
  color: var(--wh-muted);
}
.energy-flow__labels li {
  padding-top: 10px; border-top: 1px solid var(--wh-line);
  transition: color 250ms ease, border-color 250ms ease;
}
.energy-flow__labels li.is-active { color: var(--wh-ink); border-color: var(--wh-energy); }

@keyframes harvest-flow { to { stroke-dashoffset: -600; } }
@keyframes harvest-pulse {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes harvest-module {
  0%, 25%, 100% { fill: rgba(184, 242, 74, 0.06); stroke: var(--wh-line); }
  45%, 70% { fill: rgba(184, 242, 74, 0.22); stroke: var(--wh-energy); }
}
@keyframes harvest-value {
  0%, 35%, 100% { opacity: 0.16; transform: scale(0.8); }
  60%, 80% { opacity: 1; transform: scale(1); }
}
.energy-flow.is-paused * { animation-play-state: paused !important; }

@media (max-width: 640px) {
  .energy-flow__labels { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Manifiesto
   ============================================================ */
.manifesto__title { max-width: 16ch; }
.manifesto__text {
  margin-top: 2rem; max-width: 58ch;
  color: var(--wh-muted-dark); font-size: var(--body);
}
.principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.principle { position: relative; padding-top: 1.25rem; }
.principle::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--wh-line); opacity: 0.35;
}
.principle::after {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--wh-water), var(--wh-energy));
  transition: width 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.principles.is-visible .principle::after { width: 100%; }
.principles.is-visible .principle:nth-child(2)::after { transition-delay: 180ms; }
.principles.is-visible .principle:nth-child(3)::after { transition-delay: 360ms; }
.principle h3 { color: var(--wh-ink-dark); }
.principle p { margin-top: 0.5rem; color: var(--wh-muted-dark); }
@media (max-width: 767px) {
  .principles { grid-template-columns: 1fr; }
}

/* ============================================================
   Cómo funciona
   ============================================================ */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  counter-reset: step;
}
.step {
  border-top: 1px solid var(--wh-line);
  padding-top: 1.25rem;
}
.step__num { color: var(--wh-energy); font-size: 0.85rem; letter-spacing: 0.1em; }
.step h3 { margin-top: 0.6rem; }
.step p { margin-top: 0.5rem; color: var(--wh-muted); font-size: 1rem; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Adaptive Load ---------- */
.adaptive {
  margin-top: clamp(4rem, 7vw, 6rem);
  border: 1px solid var(--wh-line);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.015);
}
.adaptive__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.adaptive__legend { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.adaptive__key { position: relative; padding-left: 1.4em; color: var(--wh-muted); }
.adaptive__key::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0.9em; height: 0.9em; border-radius: 3px;
}
.adaptive__key--energy::before { background: transparent; border: 2px solid var(--wh-water); border-radius: 50%; }
.adaptive__key--load::before { background: var(--wh-energy); opacity: 0.7; }
.adaptive__indicator { text-align: right; color: var(--wh-ink); }
.adaptive__indicator span { display: block; font-size: 1.9rem; color: var(--wh-energy); transition: opacity 300ms ease; }
.adaptive__indicator small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wh-muted); }

.adaptive__svg { display: block; width: 100%; height: auto; }
.adaptive__curve {
  fill: none; stroke: var(--wh-water); stroke-width: 3; stroke-linecap: round;
  opacity: 0.9;
}
.adaptive__bars rect {
  fill: var(--wh-energy);
  opacity: 0.55;
  animation: adaptive-breathe 10s ease-in-out infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}
.adaptive__bars rect:nth-child(odd) { animation-delay: -2.5s; }
.adaptive__bars rect:nth-child(3n) { animation-delay: -5s; }
.adaptive__bars rect:nth-child(4n) { animation-delay: -7.5s; }
@keyframes adaptive-breathe {
  0%, 100% { opacity: 0.55; transform: scaleY(1); }
  35% { opacity: 0.25; transform: scaleY(0.82); }
  65% { opacity: 0.75; transform: scaleY(1); }
}
.adaptive.is-paused .adaptive__bars rect { animation-play-state: paused; }

.adaptive__message {
  margin-top: 1.75rem; font-size: 1.3rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.adaptive__note { margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wh-muted); }

/* ============================================================
   Fuentes de energía
   ============================================================ */
.source-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.source-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(41, 68, 61, 0.35);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fbfaf5;
  min-height: 300px;
  display: flex; flex-direction: column;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
@media (hover: hover) {
  .source-card:hover {
    transform: translateY(-6px);
    border-color: var(--wh-water);
    box-shadow: 0 18px 40px rgba(11, 40, 33, 0.12);
  }
}
.source-card h3 { color: var(--wh-ink-dark); position: relative; z-index: 1; }
.source-card p { margin-top: 0.6rem; color: var(--wh-muted-dark); font-size: 0.98rem; flex: 1; position: relative; z-index: 1; }
.source-card__tag {
  margin-top: 1.25rem; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wh-muted-dark);
  border-top: 1px solid rgba(41, 68, 61, 0.25); padding-top: 0.8rem;
  position: relative; z-index: 1;
}

.source-card__texture {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 400ms ease;
  background-repeat: repeat; pointer-events: none;
}
@media (hover: hover) { .source-card:hover .source-card__texture { opacity: 1; } }
.source-card.is-centered .source-card__texture { opacity: 1; }

/* Hidro: líneas fluidas */
.source-card--hydro .source-card__texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20q15-12 30 0t30 0 30 0 30 0' fill='none' stroke='%234ED6B2' stroke-opacity='.22' stroke-width='1.5'/%3E%3C/svg%3E");
  animation: tex-drift-x 8s linear infinite;
}
/* Biomasa: partículas orgánicas ascendentes */
.source-card--bio .source-card__texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90'%3E%3Ccircle cx='12' cy='75' r='2.2' fill='%23B8F24A' fill-opacity='.3'/%3E%3Ccircle cx='40' cy='45' r='1.6' fill='%234ED6B2' fill-opacity='.3'/%3E%3Ccircle cx='25' cy='15' r='1.2' fill='%23B8F24A' fill-opacity='.25'/%3E%3C/svg%3E");
  animation: tex-rise 7s linear infinite;
}
/* Biogás: burbujas lentas */
.source-card--biogas .source-card__texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='110'%3E%3Ccircle cx='20' cy='90' r='5' fill='none' stroke='%234ED6B2' stroke-opacity='.3' stroke-width='1.2'/%3E%3Ccircle cx='55' cy='50' r='3.4' fill='none' stroke='%23B8F24A' stroke-opacity='.28' stroke-width='1.2'/%3E%3Ccircle cx='35' cy='18' r='2.2' fill='none' stroke='%234ED6B2' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E");
  animation: tex-rise 11s linear infinite;
}
/* Solar/eólica: ondas de luz y viento */
.source-card--wind .source-card__texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56'%3E%3Cpath d='M0 14h60q10 0 10 8t-10 8H0' fill='none' stroke='%23B8F24A' stroke-opacity='.2' stroke-width='1.4'/%3E%3Cpath d='M40 42h70' stroke='%234ED6B2' stroke-opacity='.2' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: tex-drift-x 6s linear infinite;
}
@keyframes tex-drift-x { to { background-position-x: 140px; } }
@keyframes tex-rise { to { background-position-y: -110px; } }

@media (max-width: 1023px) { .source-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .source-cards { grid-template-columns: 1fr; } }

/* ============================================================
   Modelo de colaboración
   ============================================================ */
.collab-list {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; gap: 0;
  border-top: 1px solid var(--wh-line);
}
.collab-item {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 1rem; padding: 1.6rem 0;
  border-bottom: 1px solid var(--wh-line);
  transition: background 250ms ease;
}
.collab-item dt { font-weight: 600; font-size: 1.2rem; }
.collab-item dd { color: var(--wh-muted); }
.collab__note {
  margin-top: 2rem; color: var(--wh-muted); font-size: 0.95rem; max-width: 60ch;
}
@media (max-width: 640px) {
  .collab-item { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ============================================================
   Proyectos
   ============================================================ */
.project {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  border: 1px solid rgba(41, 68, 61, 0.3);
  border-radius: 24px; overflow: hidden;
  background: #fbfaf5;
}
.project--feature { display: grid; grid-template-columns: 3fr 2fr; }
.project--feature .project__media { height: 100%; aspect-ratio: auto; min-height: 320px; }
.projects__pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.projects__pair .project { display: flex; flex-direction: column; }

.placeholder {
  position: relative;
  background:
    linear-gradient(rgba(184, 242, 74, 0.03), rgba(78, 214, 178, 0.03)),
    var(--wh-bg);
  background-image:
    linear-gradient(rgba(156, 174, 168, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 174, 168, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  padding: 0rem;
}
.placeholder__label {
  color: var(--wh-muted); font-size: 0.75rem; line-height: 1.7;
  letter-spacing: 0.08em; text-align: center;
}

.project__body { padding: clamp(1.5rem, 3vw, 2.5rem); }
.badge {
  display: inline-block; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wh-ink-dark); background: rgba(184, 242, 74, 0.35);
  border: 1px solid rgba(11, 40, 33, 0.15);
  padding: 0.35em 0.9em; border-radius: 999px;
}
.project__name { margin-top: 1rem; font-size: 1rem; letter-spacing: 0.22em; color: var(--wh-muted-dark); }
.project__headline { margin-top: 0.4rem; font-size: 1.45rem; font-weight: 600; color: var(--wh-ink-dark); line-height: 1.25; }
.project__body > p:not(.project__headline) { margin-top: 0.9rem; color: var(--wh-muted-dark); font-size: 1rem; }
.project__data { margin-top: 1.5rem; display: grid; gap: 0.5rem; font-size: 0.8rem; }
.project__data div { display: flex; gap: 0.75rem; border-top: 1px solid rgba(41, 68, 61, 0.18); padding-top: 0.5rem; }
.project__data dt { color: var(--wh-muted-dark); min-width: 9.5em; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; padding-top: 0.15em; }
.project__data dd { color: var(--wh-ink-dark); }

@media (max-width: 1023px) {
  .project--feature { grid-template-columns: 1fr; }
  .project--feature .project__media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .projects__pair { grid-template-columns: 1fr; }
}

/* ============================================================
   Evaluación
   ============================================================ */
.checklist {
  margin-top: clamp(3rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2rem;
  counter-reset: check;
  max-width: 1000px;
}
.checklist li {
  counter-increment: check;
  position: relative;
  padding: 0.9rem 0 0.9rem 3rem;
  border-top: 1px solid var(--wh-line);
  font-size: 0.92rem; color: var(--wh-ink);
}
.checklist li::before {
  content: counter(check, decimal-leading-zero);
  position: absolute; left: 0; top: 0.95rem;
  color: var(--wh-energy); font-size: 0.8rem; letter-spacing: 0.08em;
}
.evaluation__cta { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.evaluation__cta .micro { margin-top: 1rem; color: var(--wh-muted); font-size: 0.85rem; }
@media (max-width: 1023px) { .checklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }

/* ============================================================
   Cierre
   ============================================================ */
.final { position: relative; overflow: hidden; }
.final__bg {
  position: absolute; inset: 0; opacity: 0.2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.final__bg svg { width: min(1400px, 160%); height: auto; }
.final__inner { position: relative; text-align: center; }
.final__inner h2 { margin-inline: auto; max-width: 22ch; }
.final__inner .btn { margin-top: 2.5rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--wh-line);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.footer__brand {
  padding-right: 5rem;
}
.footer__name { margin-top: 1rem; font-weight: 700; line-height: 1.5; }
.footer__name span { font-weight: 400; font-size: 0.8rem; color: var(--wh-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.footer__tagline { margin-top: 1rem; color: var(--wh-muted); }
.footer__nav ul { display: grid; gap: 0.6rem; }
.footer__nav a { text-decoration: none; color: var(--wh-muted); transition: color 180ms ease; }
.footer__nav a:hover { color: var(--wh-ink); }
.footer__contact { color: var(--wh-muted); font-size: 0.85rem; }
.footer__disclaimer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem; border-top: 1px solid var(--wh-line);
  color: var(--wh-muted); font-size: 0.8rem; max-width: 90ch;
}
.footer__legal { margin-top: 1.5rem; color: var(--wh-muted); font-size: 0.75rem; }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Modales
   ============================================================ */
.modal {
  border: 1px solid var(--wh-line);
  border-radius: 24px;
  background: var(--wh-bg);
  color: var(--wh-ink);
  padding: 0;
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100svh - 48px);
}
.modal::backdrop { background: rgba(4, 14, 12, 0.7); backdrop-filter: blur(6px); }
.modal__inner { padding: clamp(1.5rem, 4vw, 3rem); }
.modal__title { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 20ch; letter-spacing: -0.02em; }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--wh-line); background: transparent;
  color: var(--wh-ink); font-size: 1.4rem; line-height: 1;
}
.modal__close:hover { border-color: var(--wh-energy); }

.form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem; margin-top: 2rem;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field__hint { font-weight: 400; font-size: 0.68rem; color: var(--wh-muted); letter-spacing: 0.05em; margin-left: 0.5em; }
.req { color: var(--wh-energy); }
.field input, .field select, .field textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--wh-line);
  border-radius: 10px;
  color: var(--wh-ink);
  padding: 0.75em 1em;
  font: inherit; font-size: 0.95rem;
  min-height: 48px;
  transition: border-color 200ms ease;
}
.field textarea { min-height: auto; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--wh-energy); outline-offset: 1px; border-color: transparent;
}
.field input[type="file"] { padding: 0.6em; }
.field select option { background: var(--wh-bg); }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: #e2694f; }
.field__error { color: #f0906f; font-size: 0.8rem; min-height: 1em; margin: 0; }
.field--check { flex-direction: row; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.field--check input { min-height: auto; width: 1.25rem; height: 1.25rem; accent-color: var(--wh-energy); margin-top: 0.2rem; }
.field--check label { font-weight: 400; }
.field--check .field__error { flex-basis: 100%; }
.file-list { display: grid; gap: 0.25rem; font-size: 0.75rem; color: var(--wh-muted); }

.hp { position: absolute; left: -9999px; top: -9999px; }

.form__status { margin-top: 1rem; color: #f0906f; font-size: 0.9rem; min-height: 1.2em; }
.form__submit { margin-top: 1rem; }

.form-success { text-align: center; padding: 3rem 1rem; }
.form-success__title { font-size: 1.6rem; font-weight: 600; margin-bottom: 0.75rem; }
.form-success .btn { margin-top: 2rem; }

.privacy__body { margin-top: 1.5rem; display: grid; gap: 1rem; color: var(--wh-muted); font-size: 0.98rem; }
.privacy__body .mono { font-size: 0.75rem; letter-spacing: 0.08em; }

/* ============================================================
   Reveal genérico
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .energy-flow * { animation: none !important; transition: none !important; }
  .energy-flow__wave--active { stroke-dasharray: none; }
  .energy-flow__value circle { opacity: 0.85; }
  .adaptive__bars rect { animation: none !important; opacity: 0.55; }
  [data-reveal] { opacity: 1; transform: none; }
  .principles .principle::after { width: 100%; transition: none; }
}