/* =====================================================================
   ECOTESLA — sistema visual "ingeniería"
   Oscuro técnico · grillas de plano · mono para specs · geometría recta
   Identidad: navy #1C1C4A · naranjo #F16032 · Poppins/Inter
   ===================================================================== */
:root{
  --ink:#08081A;            /* canvas principal */
  --ink-2:#0D0D22;
  --ink-3:#12122C;
  --navy:#1C1C4A;
  --navy-2:#161638;
  --paper:#F2F1EC;          /* secciones "documento" */
  --paper-2:#E7E5DC;
  --orange:#F16032;
  --orange-2:#FF7C50;
  --orange-ink:#B23F17;     /* naranjo legible sobre papel */

  --on-dark:#EDEDF5;
  --on-dark-mut:#9C9EB8;
  --on-dark-dim:#8B8EAB;
  --on-paper:#15142E;
  --on-paper-mut:#5A5A70;

  --line-d:rgba(255,255,255,.13);
  --line-d-soft:rgba(255,255,255,.07);
  --line-l:rgba(21,20,46,.16);
  --line-l-soft:rgba(21,20,46,.09);

  --display:'Poppins',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --container:1280px;
  --gutter:28px;
  --sec-y:clamp(84px,11vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.section{ position:relative; padding:var(--sec-y) 0; }
.section--paper{ background:var(--paper); color:var(--on-paper); }
.section--ink2{ background:var(--ink-2); }

/* --- grilla de plano --- */
.blueprint{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--line-d-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-d-soft) 1px, transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}
.blueprint--l{
  background-image:
    linear-gradient(to right, var(--line-l-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-l-soft) 1px, transparent 1px);
}
.section > .wrap{ position:relative; z-index:1; }

/* =====================================================================
   TIPOGRAFÍA / CABEZALES
   ===================================================================== */
.kicker{
  font-family:var(--mono); font-weight:600; font-size:.92rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; }
.kicker--deco::after{ content:attr(data-txt); }

.sec-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px 60px; align-items:end;
  padding-bottom:38px; border-bottom:1px solid var(--line-d);
}
.section--paper .sec-head{ border-bottom-color:var(--line-l); }
.sec-head__idx{
  font-family:var(--mono); font-size:.84rem; letter-spacing:.16em;
  color:var(--on-dark-dim); margin-bottom:20px; display:block;
}
.section--paper .sec-head__idx{ color:var(--on-paper-mut); }
.sec-head__idx::before{ content:attr(data-idx); }
.sec-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.35rem); line-height:1.06;
  letter-spacing:-.025em; margin:16px 0 0; color:#fff; text-wrap:balance;
}
.section--paper .sec-title{ color:var(--on-paper); }
.sec-lead{
  position:relative; margin:-20px -26px; padding:20px 26px;
  font-size:1.1rem; line-height:1.72; color:var(--on-dark-mut); max-width:60ch;
  text-wrap:pretty;
}
/* electrón orbitando el perímetro (el rectángulo en sí no se dibuja).
   Los tramos del keyframe son proporcionales al largo de cada lado,
   para que la velocidad se mantenga constante en las esquinas. */
.sec-lead::before,.sec-lead::after{
  content:""; position:absolute; left:0; top:0; border-radius:50%;
  animation:orbit 9s linear infinite;
}
.sec-lead::before{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--orange);
  box-shadow:0 0 10px 2px rgba(241,96,50,.8), 0 0 24px 7px rgba(241,96,50,.3);
}
.sec-lead::after{
  width:4px; height:4px; margin:-2px 0 0 -2px;
  background:rgba(241,96,50,.45); filter:blur(1.5px);
  animation-delay:-8.72s;
}
@keyframes orbit{
  0%{   left:0;    top:0; }
  42%{  left:100%; top:0; }
  50%{  left:100%; top:100%; }
  92%{  left:0;    top:100%; }
  100%{ left:0;    top:0; }
}
.section--paper .sec-lead{ color:var(--on-paper-mut); }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--display); font-weight:600; font-size:.98rem; line-height:1;
  padding:18px 34px; border:1px solid transparent; border-radius:0;
  cursor:pointer; white-space:nowrap;
  transition:background .22s var(--ease), color .22s, border-color .22s, transform .22s var(--ease);
}
.btn svg{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }
.btn--primary{ background:var(--orange); color:#14132E; }
.btn--primary:hover{ background:var(--orange-2); transform:translateY(-3px); }
.btn--ghost{ background:transparent; color:#fff; border-color:var(--line-d); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); transform:translateY(-3px); }
.btn--sm{ font-size:.84rem; padding:13px 24px; }
.btn--block{ width:100%; }

.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:500; font-size:.86rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange);
  padding-top:20px; border-top:1px solid var(--line-d);
  transition:gap .22s var(--ease), color .22s;
}
.section--paper .arrow-link{ border-top-color:var(--line-l); color:var(--orange-ink); }
.arrow-link:hover{ gap:18px; color:var(--orange-2); }
.section--paper .arrow-link:hover{ color:var(--orange); }

/* --- listas spec --- */
.specs{ list-style:none; margin:0; padding:0; }
.specs li{
  position:relative; padding:11px 0 11px 22px;
  border-top:1px solid var(--line-d-soft);
  font-size:.92rem; color:var(--on-dark-mut);
}
.specs li::before{
  content:""; position:absolute; left:0; top:19px;
  width:7px; height:1px; background:var(--orange);
}
.section--paper .specs li{ border-top-color:var(--line-l-soft); color:var(--on-paper-mut); }

/* =====================================================================
   TOPBAR
   ===================================================================== */
.topbar{ background:#05050F; border-bottom:1px solid var(--line-d-soft); font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; height:40px; gap:20px; }
.topbar__left{ display:flex; gap:26px; align-items:center; min-width:0; }
.topbar a,.topbar__loc{ display:inline-flex; align-items:center; gap:8px; color:var(--on-dark-mut); transition:color .2s; white-space:nowrap; }
.topbar a:hover{ color:#fff; }
.topbar svg{ width:.92rem; height:.92rem; fill:var(--orange); flex:none; }
.topbar__badge{ color:var(--on-dark-dim); white-space:nowrap; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
.nav.is-stuck{ background:rgba(8,8,26,.88); backdrop-filter:blur(14px); border-bottom-color:var(--line-d); }
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:80px; transition:height .3s var(--ease);
}
.nav.is-stuck .nav__in{ height:62px; }
.nav__brand{ display:flex; align-items:center; gap:22px; min-width:0; }
.nav__logo{ margin-left:calc(var(--gutter) * -0.55); }
.nav__logo img{ height:64px; width:auto; transform-origin:left center; transition:transform .3s var(--ease); }
.nav.is-stuck .nav__logo img{ transform:scale(.78); }
.nav__slogan{
  position:relative; padding-left:22px; white-space:nowrap;
  font-family:var(--mono); font-weight:500; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mut);
}
.nav__slogan::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:28px; background:var(--line-d);
}
@media (max-width:1340px){ .nav__slogan{ display:none; } }
.nav__links{ display:flex; align-items:center; gap:24px; position:relative; }
.nav__links a:not(.btn){
  white-space:nowrap;
  font-family:var(--mono); font-weight:500; font-size:.82rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark);
  padding:6px 0; transition:color .22s;
}
.nav__links a:not(.btn).is-active{ color:var(--orange); }
@media (hover:hover) and (pointer:fine){
  .nav__links a:not(.btn):hover{ color:var(--orange); }
}
/* traza que sigue la sección activa (transform-only) */
.nav__trace{
  position:absolute; left:0; bottom:-4px; width:100px; height:2px;
  background:var(--orange); transform-origin:0 50%;
  transform:translateX(0) scaleX(0); opacity:0; pointer-events:none;
  transition:transform .42s var(--ease), opacity .28s ease-out;
}
/* barra de progreso de lectura */
.nav__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--orange); transform-origin:0 50%; transform:scaleX(0);
  opacity:0; transition:opacity .3s ease-out; pointer-events:none;
}
.nav.is-stuck .nav__progress{ opacity:1; }
.nav__toggle{ display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; padding:8px; z-index:120; }
.nav__toggle span{ width:26px; height:2px; background:#fff; transition:.3s; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:var(--ink); margin-top:-80px; padding:180px 0 200px;
}
.hero__bg{ position:absolute; inset:0; transform:scale(1.05); }
.hero__layer{ position:absolute; inset:0; background-size:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(8,8,26,.97) 0%, rgba(8,8,26,.88) 38%, rgba(8,8,26,.42) 72%, rgba(8,8,26,.62) 100%),
    linear-gradient(to top, rgba(8,8,26,.95) 0%, transparent 45%);
}
.hero__in{ position:relative; z-index:2; width:100%; }
.hero__col{ max-width:780px; }
.hero h1{
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(2.4rem,6.2vw,4.6rem); line-height:1.02;
  letter-spacing:-.035em; margin:26px 0 0; text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero__lead{
  font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--on-dark-mut);
  margin:26px 0 40px; max-width:56ch;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__spec{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid var(--line-d); background:rgba(5,5,15,.5); backdrop-filter:blur(10px);
}
.hero__stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.hero__stats li{ padding:26px 0 26px 30px; position:relative; }
.hero__stats li + li{ border-left:1px solid var(--line-d); }
.hero__stats li:first-child{ padding-left:0; }
.hero__stats strong{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.7rem,3vw,2.5rem); color:var(--orange); line-height:1; letter-spacing:-.02em;
}
.hero__stats span{
  display:block; margin-top:10px; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-dim);
}

/* =====================================================================
   SOLUCIONES
   ===================================================================== */
.sol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-d); margin-top:64px; border:1px solid var(--line-d); }
.sol-card{ background:var(--ink); display:flex; flex-direction:column; transition:background .3s; }
.sol-card:hover{ background:var(--ink-3); }
.sol-card__media{ position:relative; aspect-ratio:16/8.5; overflow:hidden; }
.sol-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:saturate(.85) contrast(1.05); }
.sol-card:hover .sol-card__media img{ transform:scale(1.05); }
.sol-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,26,.96) 4%, rgba(8,8,26,.15) 70%); }
.sol-card__tag{
  position:absolute; left:34px; bottom:26px; z-index:1;
  font-family:var(--display); font-weight:700; font-size:clamp(1.35rem,2.4vw,1.9rem);
  color:#fff; letter-spacing:-.02em;
}
.sol-card__body{ padding:34px; display:flex; flex-direction:column; gap:26px; flex:1; }
.sol-card__body > p{ margin:0; font-size:1.02rem; color:var(--on-dark); }
.sol-card .arrow-link{ margin-top:auto; }

/* =====================================================================
   SERVICIOS (papel)
   ===================================================================== */
.srv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-l); margin-top:64px; border:1px solid var(--line-l); }
.srv-item{ background:var(--paper); padding:0; display:flex; flex-direction:column; transition:background .3s; }
.srv-item:hover{ background:#fff; }
.srv-item__media{ position:relative; aspect-ratio:16/7; overflow:hidden; }
.srv-item__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.srv-item:hover .srv-item__media img{ transform:scale(1.04); }
.srv-item__num{
  position:absolute; left:0; top:0; z-index:1;
  background:var(--orange); color:#14132E;
  font-family:var(--mono); font-weight:600; font-size:.84rem; letter-spacing:.12em;
  padding:9px 14px;
}
.srv-item__num::before{ content:attr(data-num); }
.srv-item__body{ padding:32px 34px 38px; display:flex; flex-direction:column; flex:1; }
.srv-item__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.srv-item__head svg{ width:26px; height:26px; fill:var(--orange-ink); flex:none; }
.srv-item h3{ font-family:var(--display); font-weight:700; font-size:1.28rem; color:var(--on-paper); margin:0; letter-spacing:-.02em; }
.srv-item__body > p{ font-size:.97rem; color:var(--on-paper-mut); margin:0 0 22px; }
.srv-item .specs{ margin-top:auto; }
/* la tarjeta 02 es un enlace a la landing de energia solar */
.srv-item--link{ text-decoration:none; color:inherit; cursor:pointer; }
.srv-item__more{
  display:inline-flex; align-items:center; gap:9px; margin-top:24px;
  font-family:var(--mono); font-weight:500; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange-ink);
  transition:gap .3s var(--ease);
}
.srv-item__more svg{ width:16px; height:16px; fill:currentColor; }
.srv-item--link:hover .srv-item__more{ gap:18px; }

/* =====================================================================
   AHORRO
   ===================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,86px); align-items:center; margin-top:0; }
.savings__media{ position:relative; }
.savings__frame{ position:relative; aspect-ratio:4/3.1; overflow:hidden; border:1px solid var(--line-d); }
.savings__frame img{ width:100%; height:100%; object-fit:cover; }
.savings__frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(241,96,50,.14), rgba(8,8,26,.5)); }
.savings__chip{
  position:absolute; right:-1px; bottom:-1px; z-index:2;
  background:var(--orange); color:#14132E; padding:22px 28px; max-width:78%;
}
.savings__chip strong{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1; letter-spacing:-.02em; }
.savings__chip span{ display:block; margin-top:8px; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.savings__body > p{ font-size:1.06rem; color:var(--on-dark-mut); margin:22px 0 0; max-width:54ch; }
.steps{ list-style:none; margin:38px 0 0; padding:0; }
.steps li{ display:flex; gap:22px; align-items:flex-start; padding:22px 0; border-top:1px solid var(--line-d); }
.steps li:last-child{ border-bottom:1px solid var(--line-d); }
.steps .num{ flex:none; font-family:var(--mono); font-weight:600; font-size:.86rem; letter-spacing:.1em; color:var(--orange); padding-top:3px; }
.steps strong{ display:block; font-family:var(--display); font-weight:600; font-size:1.04rem; color:#fff; margin-bottom:3px; }
.steps .desc{ font-size:.93rem; color:var(--on-dark-mut); }

/* =====================================================================
   FRANJA CTA
   ===================================================================== */
.cta-band{ position:relative; overflow:hidden; background:var(--navy); }
.cta-band__bg{ position:absolute; inset:0; background-size:cover; background-position:center 38%; }
.cta-band__scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,8,26,.95) 12%, rgba(178,63,23,.78) 100%); }
.cta-band__in{ position:relative; z-index:1; padding:clamp(78px,9vw,120px) 0; max-width:900px; }
.cta-band h2{
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.06; letter-spacing:-.03em; margin:22px 0 0; text-wrap:balance;
}
.cta-band p{ color:rgba(255,255,255,.82); margin:20px 0 34px; max-width:56ch; font-size:1.06rem; }

/* =====================================================================
   PROYECTOS (papel)
   ===================================================================== */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-l); margin-top:64px; border:1px solid var(--line-l); }
.proj-card{ background:var(--paper); display:flex; flex-direction:column; transition:background .3s; }
.proj-card:hover{ background:#fff; }
.proj-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.proj-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.proj-card:hover .proj-card__media img{ transform:scale(1.05); }
.proj-tag{
  position:absolute; left:0; bottom:0; z-index:1;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:500; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; padding:10px 15px;
}
.proj-card__body{ padding:28px 28px 30px; display:flex; flex-direction:column; flex:1; }
.proj-card h3{ font-family:var(--display); font-weight:700; font-size:1.12rem; color:var(--on-paper); line-height:1.25; margin:0 0 12px; letter-spacing:-.015em; }
.proj-card__body > p{ font-size:.93rem; color:var(--on-paper-mut); margin:0; }
.proj-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:auto; padding-top:22px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.proj-meta strong{ color:var(--orange-ink); font-weight:600; }
.proj-meta .dot{ color:var(--line-l); }
.proj-meta span:not(.dot){ color:var(--on-paper-mut); }
.proj-card--cta{ background:var(--on-paper); }
.proj-card--cta:hover{ background:#1D1C3E; }
.proj-card--cta .proj-card__body{ justify-content:center; gap:14px; align-items:flex-start; padding:38px 28px; }
.proj-card--cta h3{ color:#fff; font-size:1.3rem; margin:0; }
.proj-card--cta p{ color:var(--on-dark-mut) !important; }

.trust{ margin-top:60px; padding-top:30px; border-top:1px solid var(--line-l); }
.trust__label{ display:block; margin-bottom:22px; font-family:var(--mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-paper-mut); }
.trust__logos{ display:flex; flex-wrap:wrap; gap:12px; }
.trust__plate{
  flex:0 0 192px;
  background:#fff; border:1px solid var(--line-l);
  display:grid; place-items:center;
  padding:20px 22px; min-height:92px; transition:border-color .3s;
}
.trust__plate:hover{ border-color:rgba(241,96,50,.5); }
/* franja de respaldo: 6 datos duros en grilla de columnas fijas
   (nº fijo de columnas para que la última fila nunca quede incompleta) */
.respaldo{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-l); border:1px solid var(--line-l);
}
.respaldo li{
  background:var(--paper); padding:28px 26px;
  display:flex; flex-direction:column; gap:9px;
  transition:background .3s;
}
.respaldo li:hover{ background:#fff; }
.respaldo strong{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.5rem,2.4vw,2.05rem); color:var(--orange-ink);
}
.respaldo span{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-paper-mut); line-height:1.55;
}
.trust__clients{ margin-top:36px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.trust__label--sm{ margin-bottom:0; font-size:.72rem; }
@media (max-width:900px){ .respaldo{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .respaldo{ grid-template-columns:1fr; }
  .trust__plate{ flex:1 1 140px; }
}
.trust__plate img{
  width:100%; height:46px; object-fit:contain;
  filter:grayscale(1); opacity:.7; transition:filter .35s, opacity .35s;
}
.trust__plate:hover img{ filter:none; opacity:1; }
@media (hover:none){ .trust__plate img{ filter:none; opacity:1; } }

/* =====================================================================
   NOSOTROS
   ===================================================================== */
.about{ display:grid; grid-template-columns:1.25fr .95fr; gap:clamp(40px,6vw,80px); align-items:start; }
.about__text > p{ font-size:1.04rem; color:var(--on-dark-mut); margin:24px 0 0; max-width:58ch; }
.about-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-d); margin-top:46px; border:1px solid var(--line-d); }
.about-values > div{
  position:relative; overflow:hidden; background:var(--ink); padding:38px 26px;
  min-height:270px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:background .3s;
}
.about-values > div:hover{ background:var(--ink-3); }
.about-values svg{
  width:36px; height:36px; fill:var(--orange); margin:0 0 18px;
  transition:transform .38s var(--ease);
}
.about-values h3{
  font-family:var(--display); font-weight:600; font-size:1.42rem; color:#fff;
  margin:0; letter-spacing:-.015em; transition:transform .38s var(--ease);
}
/* la descripción vive fuera del flujo: aparece al pasar el mouse, sin mover la tarjeta */
.about-values p{
  position:absolute; left:24px; right:24px; bottom:30px; margin:0;
  font-size:.93rem; line-height:1.6; color:var(--on-dark-mut);
  opacity:0; transform:translateY(12px);
  transition:opacity .38s ease, transform .38s var(--ease);
}
.about-values > div:hover svg,
.about-values > div:hover h3{ transform:translateY(-46px); }
.about-values > div:hover p{ opacity:1; transform:none; }
/* sin puntero (táctil) no hay hover: el texto queda siempre visible */
@media (hover:none){
  .about-values > div{ justify-content:flex-start; min-height:0; }
  .about-values p{ position:static; opacity:1; transform:none; margin-top:12px; }
  .about-values > div:hover svg,
  .about-values > div:hover h3{ transform:none; }
}

.about-card{ border:1px solid var(--line-d); background:var(--ink-2); }
.about-card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.about-card__media img{ width:100%; height:100%; object-fit:cover; }
.about-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,26,.9), transparent 55%); }
.about-card__tag{
  position:absolute; left:0; bottom:0; z-index:1; background:var(--orange); color:#14132E;
  font-family:var(--mono); font-weight:500; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; padding:10px 15px;
}
.about-card__body{ padding:30px 28px 8px; }
.about-card__quote{
  font-family:var(--display); font-weight:600; font-size:1.05rem; color:#fff;
  margin:0 0 26px; line-height:1.4; letter-spacing:-.01em;
}
.about-facts{ list-style:none; margin:0; padding:0 0 24px; }
.about-facts li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--line-d-soft);
  font-family:var(--mono); font-size:.82rem; letter-spacing:.07em;
}
.about-facts span{ color:var(--on-dark-dim); text-transform:uppercase; }
.about-facts strong{ color:#fff; font-weight:500; text-align:right; }

/* =====================================================================
   PROCESO (papel)
   ===================================================================== */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-l); margin-top:64px; border:1px solid var(--line-l); }
.process-card{ background:var(--paper); padding:36px 32px 40px; transition:background .3s; position:relative; }
.process-card:hover{ background:#fff; }
.process-card__num{
  display:block; font-family:var(--display); font-weight:800;
  font-size:2.9rem; line-height:1; color:var(--paper-2);
  letter-spacing:-.04em; margin-bottom:22px;
  transition:color .3s;
}
.process-card:hover .process-card__num{ color:var(--orange); }
.process-card h3{ font-family:var(--display); font-weight:700; font-size:1.06rem; color:var(--on-paper); line-height:1.3; margin:0 0 10px; letter-spacing:-.015em; }
.process-card p{ font-size:.92rem; color:var(--on-paper-mut); margin:0; }

/* =====================================================================
   CONTACTO
   ===================================================================== */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.contact__lead{ color:var(--on-dark-mut); margin:22px 0 40px; font-size:1.06rem; max-width:50ch; }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ display:flex; gap:20px; align-items:center; padding:20px 0; border-top:1px solid var(--line-d); }
.contact-list li:last-child{ border-bottom:1px solid var(--line-d); }
.contact-list svg{ width:20px; height:20px; fill:var(--orange); flex:none; }
.contact-list small{
  display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:5px;
}
.contact-list a,.contact-list strong{ color:#fff; font-family:var(--display); font-weight:500; font-size:1.04rem; transition:color .2s; }
.contact-list a:hover{ color:var(--orange); }
.contact-map{ margin-top:32px; border:1px solid var(--line-d); }
.contact-map iframe{ border:0; display:block; width:100%; height:230px; filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9); }

.form{ background:var(--ink-2); border:1px solid var(--line-d); padding:clamp(28px,3.5vw,42px); }
.form .field{ margin-bottom:20px; }
.form label{
  display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:9px;
}
.form input,.form select,.form textarea{
  width:100%; padding:14px 16px; border-radius:0;
  border:1px solid var(--line-d); background:rgba(255,255,255,.035);
  font-family:var(--sans); font-size:.96rem; color:#fff;
  transition:border-color .2s, background .2s;
}
.form input::placeholder,.form textarea::placeholder{ color:var(--on-dark-dim); }
.form select option{ background:var(--ink-2); color:#fff; }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--orange); background:rgba(241,96,50,.06);
}
.form textarea{ resize:vertical; }
.form__note{
  text-align:center; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  color:var(--on-dark-dim); margin:16px 0 0;
}

/* =====================================================================
   VOLVER ARRIBA
   ===================================================================== */
.to-top-wrap{ display:flex; justify-content:center; padding-top:clamp(52px,6vw,84px); }
.to-top{
  display:inline-flex; flex-direction:column; align-items:center; gap:11px;
  font-family:var(--mono); font-weight:500; font-size:.76rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-dim);
  padding:18px 30px; border:1px solid var(--line-d-soft);
  transition:color .25s, border-color .25s, background .25s, transform .3s var(--ease);
}
.to-top svg{ width:17px; height:17px; fill:currentColor; transition:transform .3s var(--ease); }
.to-top:hover{
  color:var(--orange); border-color:rgba(241,96,50,.45);
  background:rgba(241,96,50,.05); transform:translateY(-3px);
}
.to-top:hover svg{ transform:translateY(-4px); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:#05050F; border-top:1px solid var(--line-d); }
.footer__grid{
  max-width:var(--container); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:44px;
  padding:clamp(56px,7vw,84px) var(--gutter) 56px;
}
.footer__brand img{ height:64px; width:auto; margin-bottom:22px; }
.footer__brand p{ font-size:.9rem; color:var(--on-dark-dim); max-width:290px; margin:0; }
.footer__col{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.footer__col h3{
  font-family:var(--mono); font-weight:500; font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--orange); margin:0 0 8px;
}
.footer__col a,.footer__col span{ font-size:.9rem; color:var(--on-dark-mut); transition:color .2s; }
.footer__col a:hover{ color:#fff; }
.footer__bar{ border-top:1px solid var(--line-d-soft); }
.footer__bar-in{
  max-width:var(--container); margin:0 auto; width:100%;
  display:flex; justify-content:space-between; gap:16px;
  padding:22px var(--gutter);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--on-dark-dim);
}

/* =====================================================================
   WHATSAPP
   ===================================================================== */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:120;
  width:56px; height:56px; background:#25D366; color:#fff;
  display:grid; place-items:center; transition:transform .25s var(--ease);
  box-shadow:0 16px 34px -12px rgba(37,211,102,.6);
}
.wa-float:hover{ transform:translateY(-3px) scale(1.05); }
.wa-float svg{ width:29px; height:29px; fill:#fff; }

/* =====================================================================
   ANIMACIÓN
   ===================================================================== */
@keyframes hero-zoom{ from{ transform:scale(1);} to{ transform:scale(1.045);} }
[data-reveal]{ will-change:opacity, transform; }

/* ---- entrada del hero: trazado por líneas (clip mask + stagger) ---- */
.w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.10em .03em .20em; margin:-.10em -.03em -.20em;
}
.w__i{ display:inline-block; }
/* Estado inicial SOLO si JS está vivo y el usuario no pidió menos movimiento.
   Sin JS o con reduced-motion, todo queda visible por defecto. */
html.js-motion #heroTitle{ opacity:0; }
html.js-motion .hero .w__i{ transform:translateY(115%); }
html.js-motion .hero .h-up{ opacity:0; transform:translateY(22px); }
html.js-motion .hero.is-in #heroTitle{ opacity:1; }
html.js-motion .hero.is-in .w__i{
  transform:none;
  transition:transform .85s cubic-bezier(.16,.84,.28,1) var(--d,0ms);
}
html.js-motion .hero.is-in .h-up{
  opacity:1; transform:none;
  transition:opacity .75s ease-out var(--d,0ms),
             transform .75s cubic-bezier(.16,.84,.28,1) var(--d,0ms);
}

/* ---- corriente recorriendo la grilla de plano ---- */
.currents{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.current{
  position:absolute; top:0; width:1px; height:32%;
  background:linear-gradient(to bottom,
    transparent 0%, rgba(241,96,50,.55) 45%, var(--orange) 78%, rgba(255,196,170,.95) 92%, transparent 100%);
  filter:drop-shadow(0 0 7px rgba(241,96,50,.55));
  opacity:0; transform:translateY(-120%);
  animation:current-flow var(--dur,13s) linear infinite var(--delay,0s);
}
@keyframes current-flow{
  0%{   transform:translateY(-120%); opacity:0; }
  4%{   opacity:.85; }
  19%{  opacity:.85; }
  24%{  transform:translateY(330%);  opacity:0; }
  100%{ transform:translateY(330%);  opacity:0; }
}
/* sobre papel el naranjo oscurece en vez de brillar */
.currents--l .current{
  background:linear-gradient(to bottom,
    transparent 0%, rgba(178,63,23,.4) 45%, var(--orange-ink) 78%, rgba(241,96,50,.85) 92%, transparent 100%);
  filter:none; mix-blend-mode:multiply;
}
/* variante horizontal: recorre una línea de la cuadrícula de izquierda a derecha */
.current--h{
  left:0; width:32%; height:1px;
  background:linear-gradient(to right,
    transparent 0%, rgba(241,96,50,.55) 45%, var(--orange) 78%, rgba(255,196,170,.95) 92%, transparent 100%);
  animation-name:current-flow-h;
}
.currents--l .current--h{
  background:linear-gradient(to right,
    transparent 0%, rgba(178,63,23,.4) 45%, var(--orange-ink) 78%, rgba(241,96,50,.85) 92%, transparent 100%);
}
@keyframes current-flow-h{
  0%{   transform:translateX(-120%); opacity:0; }
  4%{   opacity:.85; }
  19%{  opacity:.85; }
  24%{  transform:translateX(330%);  opacity:0; }
  100%{ transform:translateX(330%);  opacity:0; }
}
/* chispa de un solo pase, disparada por click */
.current--burst{ animation:current-burst 1.6s cubic-bezier(.25,0,.45,1) forwards; }
.current--burst.current--h{ animation-name:current-burst-h; }
@keyframes current-burst-h{
  0%{   transform:translateX(-8%);  opacity:0; }
  10%{  opacity:.95; }
  78%{  opacity:.95; }
  100%{ transform:translateX(300%); opacity:0; }
}
@keyframes current-burst{
  0%{   transform:translateY(-8%);  opacity:0; }
  10%{  opacity:.95; }
  78%{  opacity:.95; }
  100%{ transform:translateY(300%); opacity:0; }
}

/* ---- parallax de salida + progreso de lectura (scroll-driven nativo) ---- */
@keyframes hero-bg-parallax{ to{ transform:scale(1.13) translateY(7%); } }
@keyframes hero-fg-out{ to{ opacity:0; transform:translateY(-54px); } }
@keyframes read-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@supports (animation-timeline: scroll()){
  .hero__bg{
    animation:hero-bg-parallax linear both;
    animation-timeline:scroll(root block); animation-range:0 100vh;
  }
  .hero__in,.hero__spec{
    animation:hero-fg-out linear both;
    animation-timeline:scroll(root block); animation-range:0 78vh;
  }
  .nav__progress{
    animation:read-progress linear both;
    animation-timeline:scroll(root block);
  }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .topbar__badge,.topbar__loc{ display:none; }
  .sec-head{ grid-template-columns:1fr; gap:22px; align-items:start; }
  .about{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1080px){
  .nav__in{ height:70px; } .nav__logo img{ height:50px; }
  .nav.is-stuck .nav__in{ height:58px; }
  .nav__trace{ display:none; }
  .hero{ margin-top:-70px; padding:150px 0 190px; }
  .nav__toggle{ display:flex; }
  .split,.contact{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px); height:100dvh;
    flex-direction:column; align-items:flex-start; justify-content:center; gap:30px;
    background:var(--ink-2); border-left:1px solid var(--line-d); padding:48px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .38s var(--ease), visibility .38s; z-index:110;
  }
  .nav__links.open{ transform:translateX(0); visibility:visible; }
  .nav__links a:not(.btn){ font-size:.95rem; min-height:44px; display:flex; align-items:center; }
  .nav__toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2){ opacity:0; }
  .nav__toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}
@media (max-width:720px){
  :root{ --gutter:20px; }
  .topbar__left{ gap:16px; }
  .sec-lead{ margin:-20px -14px; padding:20px 14px; }
  .sol-grid,.srv-grid,.proj-grid,.process-grid,.about-values{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:34px; }
  .footer__bar-in{ flex-direction:column; text-align:center; align-items:center; gap:8px; }
  .hero__stats{ grid-template-columns:1fr; }
  .hero__stats li{ padding:16px 0 16px 0; display:flex; align-items:baseline; gap:14px; }
  .hero__stats li + li{ border-left:0; border-top:1px solid var(--line-d); }
  .hero__stats span{ margin-top:0; }
  .hero{ padding:130px 0 240px; }
  .savings__chip{ position:static; max-width:none; }
  .trust{ flex-direction:column; align-items:flex-start; gap:16px; }
}
@media (max-width:560px){
  .topbar__in{ justify-content:flex-start; }
  .topbar__left a[href^="mailto"]{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* =====================================================================
   PAGINA SOLAR — tamaños de sistema, alcance y preguntas
   ===================================================================== */
.tiers{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-l); border:1px solid var(--line-l); margin-top:64px;
}
.tier{
  background:var(--paper); padding:36px 32px 40px;
  display:flex; flex-direction:column; transition:background .3s;
}
.tier:hover{ background:#fff; }
.tier__kicker{
  font-family:var(--mono); font-weight:500; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-paper-mut);
}
.tier__size{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.7rem,2.8vw,2.3rem); color:var(--orange-ink); margin:14px 0 18px;
}
.tier > p{ font-size:.97rem; color:var(--on-paper-mut); margin:0 0 26px; }
.tier__specs{ list-style:none; margin:auto 0 0; padding:0; }
.tier__specs li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-l-soft);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em;
}
.tier__specs span{ color:var(--on-paper-mut); text-transform:uppercase; }
.tier__specs strong{ color:var(--on-paper); font-weight:600; text-align:right; white-space:nowrap; }
.tiers__nota{
  margin:22px 0 0; font-family:var(--mono); font-size:.74rem; letter-spacing:.05em;
  color:var(--on-paper-mut); max-width:80ch;
}

.incluye{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; margin-top:56px; }
.incluye .specs li{ font-size:1rem; padding:16px 0 16px 24px; }
.incluye .specs li::before{ top:26px; width:9px; }

.faq{ margin-top:64px; border-top:1px solid var(--line-l); }
.faq details{ border-bottom:1px solid var(--line-l); }
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:26px 52px 26px 0;
  font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:-.015em;
  color:var(--on-paper); transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--orange-ink); }
.faq summary::after{
  content:""; position:absolute; right:12px; top:50%;
  width:12px; height:12px;
  border-right:2px solid var(--orange-ink); border-bottom:2px solid var(--orange-ink);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.faq__a{
  margin:0; padding:0 52px 30px 0;
  font-size:1rem; color:var(--on-paper-mut); max-width:78ch; text-wrap:pretty;
}
@media (max-width:900px){
  .tiers{ grid-template-columns:1fr; }
  .incluye{ grid-template-columns:1fr; gap:0; }
}

/* =====================================================================
   CALCULADORA DE DIMENSIONAMIENTO
   ===================================================================== */
.calc{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1px; background:var(--line-d); border:1px solid var(--line-d); margin-top:64px;
}
.calc__controls,.calc__result{ background:var(--ink); padding:clamp(28px,3.4vw,40px); }
.calc__field + .calc__field{ margin-top:42px; }
.calc__field label{
  display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:12px;
}
.calc__out{
  display:block; font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.9rem,3vw,2.5rem); line-height:1; color:#fff; margin-bottom:20px;
  font-variant-numeric:tabular-nums;
}
.calc__hint{ display:block; margin-top:14px; font-size:.86rem; color:var(--on-dark-mut); }

.calc input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2px; background:var(--line-d); cursor:pointer;
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border:0; border-radius:0; background:var(--orange);
  box-shadow:0 0 0 5px rgba(241,96,50,.16); cursor:grab;
  transition:box-shadow .2s, background .2s;
}
.calc input[type=range]:hover::-webkit-slider-thumb{ background:var(--orange-2); box-shadow:0 0 0 8px rgba(241,96,50,.22); }
.calc input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border:0; border-radius:0; background:var(--orange); cursor:grab;
}
.calc input[type=range]::-moz-range-track{ height:2px; background:var(--line-d); }
.calc input[type=range]:focus-visible{ outline:2px solid var(--orange); outline-offset:8px; }

.calc__nums{ list-style:none; margin:0 0 32px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); }
.calc__nums li{ padding:20px 22px 20px 0; border-top:1px solid var(--line-d-soft); }
.calc__nums li:nth-child(-n+2){ border-top:0; padding-top:0; }
.calc__nums strong{
  display:block; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.8rem,2.7vw,2.3rem); color:var(--orange); font-variant-numeric:tabular-nums;
}
.calc__nums span{
  display:block; margin-top:9px; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-dim);
}

/* techo: cada rectangulo es un panel real del sistema calculado */
.calc__roof{
  display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start;
  min-height:44px; margin-bottom:24px;
  padding-bottom:24px; border-bottom:1px solid var(--line-d-soft);
}
.calc__panel{
  width:26px; height:42px; flex:none;
  border:1px solid rgba(255,255,255,.32);
  background:
    linear-gradient(to right, rgba(255,255,255,.2) 1px, transparent 1px) 0 0/8.6px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.2) 1px, transparent 1px) 0 0/100% 10.5px,
    linear-gradient(162deg,#31406f 0%,#18224c 100%);
  animation:panel-in .34s var(--ease) both;
}
@keyframes panel-in{ from{ opacity:0; transform:translateY(7px) scale(.88); } to{ opacity:1; transform:none; } }
/* hueco de techo aun sin ocupar */
.calc__panel--libre{
  background:none; border:1px dashed rgba(255,255,255,.16); animation:none;
}
.calc__estado{
  margin:0 0 20px; font-family:var(--mono); font-size:.76rem; letter-spacing:.07em;
  line-height:1.6; color:var(--on-dark-mut);
}
.calc__estado strong{ color:var(--orange); font-weight:600; }
.calc__estado--tope{ color:#FFC4AA; }
.calc__estado--tope strong{ color:#fff; }

.calc__inv{
  border:1px solid rgba(241,96,50,.4); background:rgba(241,96,50,.06);
  padding:22px 24px; margin-bottom:24px;
}
.calc__inv__label{
  display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:#FFC4AA; margin-bottom:10px;
}
.calc__inv strong{
  display:block; font-family:var(--display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.4rem,2.3vw,1.85rem); color:#fff; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.calc__inv__nota{
  display:block; margin-top:12px; font-size:.82rem; line-height:1.55; color:var(--on-dark-mut);
}
.calc__nota{
  margin:0 0 26px; font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  line-height:1.6; color:var(--on-dark-dim);
}
@media (max-width:900px){
  .calc{ grid-template-columns:1fr; }
  .calc__nums li{ padding-right:12px; }
}
@media (prefers-reduced-motion:reduce){ .calc__panel{ animation:none; } }

/* ---- kit recomendado: cuelga de la calculadora y comparte su ritmo de columnas ---- */
.kit{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1px; background:var(--line-d);
  border:1px solid var(--line-d); border-top:0;
}
.kit__head,.kit__body{ background:var(--ink-2); padding:clamp(28px,3.4vw,40px); }
.kit__tag{
  display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange); margin-bottom:16px;
}
.kit__name{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(1.5rem,2.6vw,2.05rem); color:#fff; margin:0 0 16px;
}
.kit__desc{ margin:0 0 28px; font-size:.97rem; color:var(--on-dark-mut); }
.kit__nota{
  display:block; margin-top:16px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.05em; line-height:1.6; color:var(--on-dark-dim);
}
.kit__cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.kit__cols h4{
  font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-dim); margin:0 0 4px;
}
@media (max-width:900px){ .kit{ grid-template-columns:1fr; } }
@media (max-width:560px){ .kit__cols{ grid-template-columns:1fr; gap:26px; } }

/* ---- bloque de propuesta en PDF ---- */
.propuesta{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1px; background:var(--line-d);
  border:1px solid var(--line-d); border-top:0;
}
.propuesta__intro,.propuesta__form{ background:var(--ink-3); padding:clamp(28px,3.4vw,40px); }
.propuesta__campos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.propuesta__campo label{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:9px;
}
.propuesta__campo label em{ color:var(--orange); font-style:normal; }
.propuesta__campo input{
  width:100%; padding:13px 14px; border-radius:0;
  border:1px solid var(--line-d); background:rgba(255,255,255,.04);
  font-family:var(--sans); font-size:.94rem; color:#fff;
  transition:border-color .2s, background .2s;
}
.propuesta__campo input::placeholder{ color:var(--on-dark-dim); }
.propuesta__campo input:focus{ outline:none; border-color:var(--orange); background:rgba(241,96,50,.07); }
.propuesta__campo input[aria-invalid="true"]{ border-color:var(--orange); background:rgba(241,96,50,.1); }
.propuesta__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.propuesta__acciones .btn{ flex:1 1 auto; }
.propuesta__estado{
  margin:16px 0 0; min-height:1.2em;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; line-height:1.6;
  color:var(--on-dark-mut);
}
.propuesta__estado--ok{ color:#8FE0AB; }
.propuesta__estado--error{ color:#FFC4AA; }
@media (max-width:900px){ .propuesta{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .propuesta__campos{ grid-template-columns:1fr; }
  .propuesta__acciones .btn{ flex:1 1 100%; }
}