/* ═══════════════════════════════════════════════════════════════════════
   MEDIODÍA SOLAR — sistema visual
   Arquetipo: editorial oscuro cinemático. Verdes + azules profundos,
   acento solar cálido en dosis mínimas.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* superficies */
  --bg:      #040a11;
  --bg-2:    #071220;
  --surf:    #0a1a27;
  --surf-2:  #0d2233;
  --line:    #16323f;
  --line-2:  #1e4a52;

  /* marca */
  --green:   #2fd6a4;
  --green-d: #0f8f73;
  --blue:    #1b5e8f;
  --blue-d:  #0d2a44;
  --sun:     #ffb347;

  /* texto */
  --tx:      #e9f4f1;
  --tx-2:    #9fb8bb;
  --tx-3:    #6b8791;

  --grad: linear-gradient(100deg,#2fd6a4,#5fe3c0 35%,#4aa9d8 75%);

  --r:  14px;
  --r-l: 22px;
  --wrap: 1240px;
  --pad: clamp(20px,5vw,64px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-o: cubic-bezier(.16,1,.3,1);

  --f-d: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-s: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:400 16px/1.65 var(--f-s);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.02em }
p{ margin:0 }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none }
::selection{ background:var(--green); color:#04211a }

.wrap{ width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto }

.skip{
  position:fixed; top:-100px; left:16px; z-index:200; padding:12px 18px;
  background:var(--green); color:#04211a; border-radius:10px; font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{ top:16px }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px }

/* ── grano + cursor ─────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}
}

.cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; display:none;
  mix-blend-mode:difference; will-change:transform }
.cursor i{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s;
}
.cursor.is-hot i{ width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(255,255,255,.12) }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block } }

/* ── splash ─────────────────────────────────────────────────────────── */
.splash{
  position:fixed; inset:0; z-index:180; background:var(--bg);
  display:grid; place-items:center; color:var(--green);
  transition:opacity .7s var(--ease), visibility .7s;
}
.splash.is-off{ opacity:0; visibility:hidden; pointer-events:none }
.splash__mark{ display:grid; justify-items:center; gap:18px }
.splash__ring{ stroke-dasharray:214; stroke-dashoffset:214; animation:draw 1s var(--ease-o) forwards }
.splash__rays{ opacity:0; animation:fade .5s .45s forwards }
.splash__word{
  font:300 .78rem/1 var(--f-s); letter-spacing:.55em; color:var(--tx-2); padding-left:.55em;
  opacity:0; animation:fade .6s .55s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes fade{ to{ opacity:1 } }

/* ── progreso ───────────────────────────────────────────────────────── */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent }
.progress i{ display:block; height:100%; width:0; background:var(--grad); box-shadow:0 0 14px rgba(47,214,164,.55) }

/* ── nav ────────────────────────────────────────────────────────────── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:110; transition:.4s var(--ease) }
.nav__in{
  width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:28px; padding:22px 0; transition:.4s var(--ease);
}
.nav.is-stuck{ background:rgba(4,10,17,.72); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line) }
.nav.is-stuck .nav__in{ padding:13px 0 }
.nav.is-hidden{ transform:translateY(-105%) }

.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; color:var(--green) }
.brand__mark{ transition:transform .7s var(--ease) }
.brand:hover .brand__mark{ transform:rotate(90deg) }
.brand__txt{ font:600 1.02rem/1 var(--f-s); letter-spacing:-.02em; color:var(--tx) }
.brand__txt em{ font-style:normal; font-weight:300; color:var(--tx-2) }

.nav__links{ display:flex; gap:30px }
.nav__links a{
  position:relative; font-size:.86rem; color:var(--tx-2); padding:4px 0; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--green);
  transition:width .4s var(--ease);
}
.nav__links a:hover, .nav__links a.is-on{ color:var(--tx) }
.nav__links a:hover::after, .nav__links a.is-on::after{ width:100% }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:11px;
  background:transparent; cursor:pointer; padding:0; place-items:center; gap:5px }
.burger i{ display:block; width:17px; height:1.5px; background:var(--tx); transition:.35s var(--ease) }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3.2px) rotate(45deg) }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.2px) rotate(-45deg) }

.menu{ position:fixed; inset:0; z-index:105; background:rgba(4,10,17,.97);
  backdrop-filter:blur(20px); display:grid; place-items:center }
.menu[hidden]{ display:none }
.menu__in{ display:grid; gap:6px; text-align:center }
.menu__in a{ font:300 clamp(2rem,9vw,3.2rem)/1.25 var(--f-d); color:var(--tx-3); transition:color .3s }
.menu__in a span{ color:var(--tx) }
.menu__in a:hover{ color:var(--green) }

/* ── botones ────────────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:0; border-radius:100px; cursor:pointer;
  font:500 .9rem/1 var(--f-s); color:#032018; background:var(--grad);
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 6px 26px -10px rgba(47,214,164,.75);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:#fff; opacity:0;
  transition:opacity .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(47,214,164,.85) }
.btn:hover::before{ opacity:.14 }
.btn svg{ transition:transform .35s var(--ease) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:11px 20px; font-size:.84rem }
.btn--lg{ padding:18px 34px; font-size:.98rem }
.btn--full{ width:100%; margin-top:6px }
.btn--ghost{ background:transparent; color:var(--tx); border:1px solid var(--line-2); box-shadow:none }
.btn--ghost:hover{ border-color:var(--green); color:var(--green); box-shadow:none }
.btn--ghost::before{ display:none }

.link{ position:relative; font-size:.92rem; color:var(--tx-2); padding-bottom:3px }
.link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--line-2); transition:background .3s }
.link:hover{ color:var(--tx) } .link:hover::after{ background:var(--green) }

/* ── tipografía de sección ──────────────────────────────────────────── */
.eyebrow{ display:flex; align-items:center; gap:11px; font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tx-3) }
.eyebrow i{ width:26px; height:1px; background:var(--green); flex:none }

.h2{ font:300 clamp(1.9rem,4.4vw,3.35rem)/1.18 var(--f-d); margin:20px 0 0 }
.h2 em{ font-style:italic; background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.lede{ margin-top:20px; max-width:46ch; color:var(--tx-2); font-size:1.03rem; line-height:1.75 }

.sec{ position:relative; padding:clamp(88px,13vw,160px) 0 }

/* ── reveal (solo con JS; sin JS todo es visible) ───────────────────── */
.js .reveal, .js .hero__h1 .w{ opacity:0 }
.js .reveal{ transform:translateY(26px); transition:opacity .9s var(--ease-o), transform .9s var(--ease-o);
  transition-delay:calc(var(--d,0) * 110ms) }
.js .reveal.is-in{ opacity:1; transform:none }
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 } .reveal[data-d="3"]{ --d:3 }

/* ═══ HERO ═════════════════════════════════════════════════════════════ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding:140px 0 90px; overflow:hidden }

.mesh{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.mesh i{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5 }
.mesh i:nth-child(1){ width:52vw; height:52vw; top:-16%; left:-12%;
  background:radial-gradient(circle,#0f8f73,transparent 68%); animation:float1 19s ease-in-out infinite }
.mesh i:nth-child(2){ width:46vw; height:46vw; top:22%; right:-14%;
  background:radial-gradient(circle,#1b5e8f,transparent 68%); animation:float2 23s ease-in-out infinite }
.mesh i:nth-child(3){ width:30vw; height:30vw; bottom:-12%; left:32%;
  background:radial-gradient(circle,#0d3f5e,transparent 70%); animation:float1 27s ease-in-out infinite reverse }
@keyframes float1{ 50%{ transform:translate(7%,9%) scale(1.14) } }
@keyframes float2{ 50%{ transform:translate(-9%,7%) scale(.88) } }

.hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 8%, transparent 42%, var(--bg) 96%) }

.arc{ position:absolute; top:6%; left:0; width:100%; height:62%; pointer-events:none; opacity:.85 }
.arc__path{ stroke-dasharray:1900; stroke-dashoffset:1900; animation:draw2 2.6s .5s var(--ease-o) forwards }
@keyframes draw2{ to{ stroke-dashoffset:0 } }
.arc__sun{ offset-path:path("M-40 500 Q 600 -30 1240 500"); offset-distance:0%;
  filter:drop-shadow(0 0 14px rgba(255,179,71,.95)); animation:ride 26s 1.2s linear infinite }
@keyframes ride{ from{ offset-distance:0% } to{ offset-distance:100% } }

.hero__in{ position:relative; z-index:2; width:min(100% - var(--pad)*2, var(--wrap));
  margin-inline:auto; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,70px);
  align-items:center }

.hero__h1{ font:300 clamp(2.5rem,7.2vw,5.3rem)/1.04 var(--f-d); margin:26px 0 0; letter-spacing:-.035em }
.hero__h1 .line{ display:block; overflow:hidden; padding-bottom:.04em }
.hero__h1 .w{ display:inline-block; will-change:transform }
.js .hero__h1 .w{ transform:translateY(105%) }
.js .hero__h1.is-in .w{ opacity:1; transform:none;
  transition:opacity .8s var(--ease-o), transform .95s var(--ease-o);
  transition-delay:calc(var(--i,0) * 55ms + 120ms) }
.hero__h1 .line--alt{ font-style:italic }
/* El degradado va en cada palabra, no en la línea: las palabras se animan con
   transform y eso rompería el recorte del degradado sobre el texto. */
.hero__h1 .line--alt .w{ background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent }

.hero__sub{ margin-top:28px; max-width:52ch; color:var(--tx-2); font-size:clamp(1rem,1.5vw,1.1rem);
  line-height:1.78 }
.hero__cta{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:38px }

.stats{ display:flex; gap:clamp(22px,4vw,52px); margin-top:56px; flex-wrap:wrap }
.stats dt{ font:300 clamp(1.6rem,3vw,2.3rem)/1 var(--f-d); color:var(--tx);
  font-variant-numeric:tabular-nums }
.stats dd{ margin-top:8px; font-size:.79rem; line-height:1.5; color:var(--tx-3);
  letter-spacing:.03em }

/* arte del hero */
.hero__art{ position:relative; min-height:clamp(380px,52vw,560px) }
.shot--hero{ aspect-ratio:4/5; width:82%; margin-left:auto }
.shot--inset{ position:absolute; bottom:-6%; left:0; width:44%; aspect-ratio:1 }
.chip--float{ position:absolute; top:11%; left:-6%; z-index:3 }

.chip{ display:flex; align-items:center; gap:12px; padding:13px 19px; border-radius:100px;
  background:rgba(10,26,39,.82); backdrop-filter:blur(14px); border:1px solid var(--line-2);
  box-shadow:0 20px 50px -22px #000 }
.chip strong{ display:block; font:500 .8rem/1.3 var(--f-s) }
.chip small{ display:block; font-size:.73rem; color:var(--tx-3); font-variant-numeric:tabular-nums }
.chip__dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 0 0 rgba(47,214,164,.65); animation:pulse 2.4s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 13px rgba(47,214,164,0) } 100%{ box-shadow:0 0 0 0 rgba(47,214,164,0) } }

.scrollcue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  display:grid; justify-items:center; gap:10px; font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tx-3) }
.scrollcue i{ width:1px; height:42px; background:linear-gradient(var(--green),transparent);
  animation:cue 2.1s var(--ease) infinite }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ── fotografías ────────────────────────────────────────────────────── */
.shot{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-l);
  border:1px solid var(--line-2); background:var(--surf);
  box-shadow:0 40px 90px -50px #000;
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block }
/* Velo frío que iguala la foto con la paleta de la web y mantiene legible
   cualquier texto que caiga encima. */
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,10,17,.30) 0%, transparent 34%, rgba(4,10,17,.42) 100%),
    linear-gradient(115deg, rgba(15,143,115,.14), rgba(27,94,143,.16));
  mix-blend-mode:multiply;
}
.shot--hero::after{ background:
    linear-gradient(180deg, rgba(4,10,17,.34) 0%, transparent 38%, rgba(4,10,17,.48) 100%),
    linear-gradient(115deg, rgba(15,143,115,.13), rgba(27,94,143,.18)) }
.shot--inset{ border-width:2px; border-color:var(--bg) ; box-shadow:0 30px 70px -34px #000 }
.shot--team{ aspect-ratio:16/9; margin-top:38px }

/* ── placeholders de imagen ─────────────────────────────────────────── */
.ph{
  position:relative; margin:0; border-radius:var(--r-l); overflow:hidden;
  border:1px dashed var(--line-2);
  background:
    linear-gradient(135deg, rgba(47,214,164,.07), rgba(27,94,143,.09)),
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(255,255,255,.022) 11px 22px),
    var(--surf);
  display:grid; align-content:center; justify-items:center; gap:9px; padding:22px; text-align:center;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(47,214,164,.11) 50%,transparent 65%);
  background-size:260% 100%; animation:shine 4.2s var(--ease) infinite;
}
@keyframes shine{ to{ background-position:-260% 0 } }
.ph__tag{ position:relative; font:500 .7rem/1 var(--f-s); letter-spacing:.2em; text-transform:uppercase;
  color:var(--green); padding:7px 13px; border:1px solid var(--line-2); border-radius:100px;
  background:rgba(4,10,17,.5) }
.ph__meta{ position:relative; font-size:.73rem; color:var(--tx-3); max-width:26ch; line-height:1.5 }
/* Iniciales en lugar de foto: honesto mientras no haya clientes reales que
   hayan dado su cara, y además es un recurso de diseño, no un hueco vacío. */
.mono{
  width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center;
  font:500 .82rem/1 var(--f-s); letter-spacing:.06em; color:#04211a;
  background:var(--grad); box-shadow:0 0 0 1px rgba(47,214,164,.25), 0 6px 18px -8px rgba(47,214,164,.7);
}
.ph--team{ aspect-ratio:16/9; margin-top:38px }

/* ── marquee ────────────────────────────────────────────────────────── */
.marquee{ border-block:1px solid var(--line); padding:20px 0; overflow:hidden;
  background:var(--bg-2); position:relative; z-index:2 }
.marquee__t{ display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 34s linear infinite }
.marquee__t span{ font-size:.86rem; color:var(--tx-2); white-space:nowrap }
.marquee__t b{ color:var(--green); font-size:.72rem }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ═══ VENTAJAS ═════════════════════════════════════════════════════════ */
.sec--ventajas{ background:linear-gradient(180deg,var(--bg),var(--bg-2) 60%,var(--bg)) }
.grid-sticky{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,80px);
  align-items:start }
.sticky-col{ position:sticky; top:118px }
.sticky-col .btn{ margin-top:34px }

.bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.card{
  position:relative; padding:30px 28px 32px; border-radius:var(--r-l);
  background:linear-gradient(160deg, rgba(13,34,51,.9), rgba(7,18,32,.75));
  border:1px solid var(--line); overflow:hidden;
  transition:border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  transform-style:preserve-3d;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(47,214,164,.13), transparent 62%);
  transition:opacity .4s;
}
.card:hover{ border-color:var(--line-2); box-shadow:0 30px 70px -40px #000 }
.card:hover::after{ opacity:1 }
.card--wide{ grid-column:span 2 }
.card--eco{ background:linear-gradient(140deg, rgba(15,143,115,.2), rgba(7,18,32,.85)) }
.card__n{ font:500 .72rem/1 var(--f-s); letter-spacing:.2em; color:var(--tx-3) }
.card h3{ margin:16px 0 11px; font:400 clamp(1.15rem,2vw,1.42rem)/1.3 var(--f-d) }
.card p{ color:var(--tx-2); font-size:.93rem; line-height:1.72 }

/* ═══ AHORRO ═══════════════════════════════════════════════════════════ */
.ahorro__head{ max-width:62ch; margin-bottom:clamp(38px,6vw,64px) }
.chart{ padding:clamp(24px,4vw,44px); border-radius:var(--r-l); border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(13,34,51,.72), rgba(4,10,17,.5)) }
.chart__legend{ display:flex; gap:26px; flex-wrap:wrap; font-size:.82rem; color:var(--tx-2);
  margin-bottom:30px }
.chart__legend span{ display:flex; align-items:center; gap:9px }
.sw{ width:11px; height:11px; border-radius:3px }
.sw--a{ background:var(--blue-d); border:1px solid var(--line-2) }
.sw--b{ background:var(--grad) }

.chart__plot{ height:clamp(190px,26vw,280px) }
.bars{ display:flex; align-items:flex-end; gap:clamp(6px,1.4vw,18px); height:100%;
  border-bottom:1px solid var(--line) }
.bg{ position:relative; flex:1; height:100%; display:flex; align-items:flex-end; gap:3px }
.bg i{ flex:1; border-radius:5px 5px 0 0; transform:scaleY(0); transform-origin:bottom;
  transition:transform 1.1s var(--ease-o); transition-delay:calc(var(--i,0) * 55ms) }
.bg i.a{ height:calc(var(--a) * 100%); background:var(--blue-d); border:1px solid var(--line-2);
  border-bottom:0 }
.bg i.b{ height:calc(var(--b) * 100%); background:var(--grad);
  box-shadow:0 0 22px -6px rgba(47,214,164,.6) }
.chart.is-in .bg i{ transform:scaleY(1) }
.bg span{ position:absolute; bottom:-26px; left:50%; transform:translateX(-50%);
  font-size:.68rem; color:var(--tx-3) }
.bg::after{
  content:attr(data-m); position:absolute; top:-34px; left:50%; transform:translateX(-50%) translateY(4px);
  font-size:.7rem; color:var(--tx-2); background:var(--surf-2); border:1px solid var(--line-2);
  padding:4px 9px; border-radius:7px; opacity:0; transition:.3s var(--ease); pointer-events:none;
}
.bg:hover::after{ opacity:1; transform:translateX(-50%) }

.chart__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:58px;
  padding-top:34px; border-top:1px solid var(--line) }
.chart__kpis dt{ font:300 clamp(1.5rem,2.8vw,2.1rem)/1 var(--f-d); color:var(--green);
  font-variant-numeric:tabular-nums }
.chart__kpis dd{ margin-top:9px; font-size:.79rem; color:var(--tx-3); line-height:1.5 }

/* ═══ PROCESO ══════════════════════════════════════════════════════════ */
.sec--proceso{ background:var(--bg-2) }
.steps{ margin-top:clamp(42px,6vw,72px); display:grid; gap:0 }
.step{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,52px);
  padding:clamp(26px,3.4vw,40px) 0; border-top:1px solid var(--line); position:relative }
.step:last-child{ border-bottom:1px solid var(--line) }
.step::after{ content:""; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--grad); transition:width .8s var(--ease) }
.step:hover::after{ width:100% }
.step__n{ font:300 clamp(1.6rem,3.4vw,2.6rem)/1 var(--f-d); color:var(--tx-3);
  transition:color .4s var(--ease) }
.step:hover .step__n{ color:var(--green) }
.step__b{ position:relative; max-width:64ch }
.step__b h3{ font:400 clamp(1.2rem,2.2vw,1.6rem)/1.3 var(--f-d) }
.step__b p{ margin-top:13px; color:var(--tx-2); font-size:.95rem; line-height:1.75 }
.step__t{ position:absolute; top:2px; right:0; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3); padding:6px 13px; border:1px solid var(--line);
  border-radius:100px }

/* ═══ OPINIONES ════════════════════════════════════════════════════════ */
.op__head{ max-width:60ch }
.op__deck{ position:relative; margin-top:clamp(38px,5vw,60px); min-height:300px }
.quote{
  position:absolute; inset:0; opacity:0; transform:translateY(22px) scale(.985);
  transition:opacity .7s var(--ease-o), transform .7s var(--ease-o); pointer-events:none;
  padding:clamp(28px,4vw,52px); border-radius:var(--r-l); border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(13,34,51,.82), rgba(7,18,32,.6));
}
.quote.is-on{ opacity:1; transform:none; pointer-events:auto; position:relative }
.quote blockquote{ margin:0; font:300 clamp(1.25rem,2.9vw,2.05rem)/1.45 var(--f-d);
  letter-spacing:-.015em; max-width:22ch; max-width:min(100%,34ch) }
.quote footer{ display:flex; align-items:center; gap:15px; margin-top:32px; padding-top:26px;
  border-top:1px solid var(--line) }
.quote footer strong{ display:block; font:500 .92rem/1.3 var(--f-s) }
.quote footer small{ color:var(--tx-3); font-size:.79rem }
.op__nav{ display:flex; gap:10px; margin-top:30px }
.dot{ width:34px; height:3px; border:0; padding:0; border-radius:100px; background:var(--line-2);
  cursor:pointer; transition:.4s var(--ease) }
.dot.is-on{ background:var(--grad); width:54px }

/* ═══ CONTACTO ═════════════════════════════════════════════════════════ */
.sec--cta{ overflow:hidden; border-top:1px solid var(--line) }
.mesh--cta i:nth-child(1){ width:44vw; height:44vw; top:-10%; left:-10%; opacity:.34 }
.mesh--cta i:nth-child(2){ width:40vw; height:40vw; bottom:-18%; right:-12%; opacity:.3;
  background:radial-gradient(circle,#1b5e8f,transparent 68%) }
.cta__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(36px,5vw,80px); align-items:start }
.cta__list{ display:grid; gap:12px; margin-top:32px }
.cta__list li{ display:flex; gap:12px; align-items:flex-start; font-size:.93rem; color:var(--tx-2) }
.cta__list li::before{ content:""; width:16px; height:16px; margin-top:4px; flex:none; border-radius:50%;
  background:rgba(47,214,164,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%232fd6a4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.cta__list li em{ font-style:italic; color:var(--green) }
.cta__direct{ display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; font:300 clamp(1.05rem,2vw,1.35rem)/1 var(--f-d) }
.cta__direct a{ padding-bottom:5px; border-bottom:1px solid var(--line-2); transition:.3s }
.cta__direct a:hover{ color:var(--green); border-color:var(--green) }

.form{ padding:clamp(26px,3.6vw,42px); border-radius:var(--r-l); border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(13,34,51,.88), rgba(4,10,17,.72));
  backdrop-filter:blur(10px); box-shadow:0 40px 90px -50px #000 }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field{ display:grid; gap:8px; margin-bottom:16px }
.field label{ font-size:.79rem; letter-spacing:.06em; color:var(--tx-2) }
.field label span{ color:var(--tx-3) }
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border-radius:var(--r); font:400 .94rem var(--f-s);
  color:var(--tx); background:rgba(4,10,17,.6); border:1px solid var(--line);
  transition:border-color .3s, background .3s, box-shadow .3s; appearance:none;
}
.field textarea{ resize:vertical; min-height:86px }
.field input::placeholder, .field textarea::placeholder{ color:#4f6b73 }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:0; border-color:var(--green); background:rgba(4,10,17,.85);
  box-shadow:0 0 0 3px rgba(47,214,164,.12);
}
.field input:user-invalid{ border-color:#d9534f }
.sel{ position:relative; display:block }
.sel::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  border-right:1.5px solid var(--tx-3); border-bottom:1.5px solid var(--tx-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none }
.sel select option{ background:var(--surf-2); color:var(--tx) }

.check{ margin:6px 0 18px }
.check label{ display:flex; gap:11px; align-items:flex-start; font-size:.83rem; color:var(--tx-2);
  cursor:pointer }
.check input{ width:17px; height:17px; margin-top:2px; accent-color:var(--green); flex:none }
.check a{ color:var(--green); text-decoration:underline; text-underline-offset:3px }
.form__note{ margin-top:14px; font-size:.83rem; color:var(--green); min-height:1.2em; text-align:center }
.form__note.is-err{ color:#ff9a8a }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding:clamp(48px,7vw,76px) 0 40px; background:var(--bg) }
.foot__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; align-items:start }
.foot__brand p{ margin-top:14px; font-size:.85rem; color:var(--tx-3); line-height:1.7 }
.foot__nav, .foot__legal{ display:grid; gap:11px; font-size:.86rem; color:var(--tx-2) }
.foot__nav a:hover, .foot__legal a:hover{ color:var(--green) }
.foot__legal small{ margin-top:10px; color:var(--tx-3); font-size:.79rem }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .nav__links{ display:none }
  .burger{ display:grid }
  .hero__in{ grid-template-columns:1fr }
  .hero__art{ min-height:0; margin-top:56px; display:grid; grid-template-columns:1.5fr 1fr;
    gap:14px; align-items:end }
  .shot--hero{ width:100%; aspect-ratio:3/4 }
  .shot--inset{ position:static; width:100% }
  .chip--float{ display:none }
  .grid-sticky, .cta__grid, .foot__in{ grid-template-columns:1fr }
  .sticky-col{ position:static }
  .chart__kpis{ grid-template-columns:repeat(2,1fr) }
  .step__t{ position:static; display:inline-block; margin-top:16px }
}
@media (max-width:620px){
  .bento{ grid-template-columns:1fr } .card--wide{ grid-column:auto }
  .f2{ grid-template-columns:1fr }
  .step{ grid-template-columns:1fr; gap:10px }
  .stats{ gap:20px } .stats > div{ min-width:44% }
  .bg span{ display:none }
  .btn--sm{ display:none }
  .hero{ min-height:auto; padding-top:120px }
  /* En pantallas estrechas el arco solar cruzaba el texto: fuera. */
  .arc{ display:none }
  .mesh i{ opacity:.7 }
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════════════════
   Solo se desactiva lo INTRUSIVO (auto-movimiento continuo). Los fades,
   hovers, tilts y degradados se mantienen: apagarlos dejaría la web muerta
   en Windows, donde esta preferencia viene activada de fábrica.
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .marquee__t{ animation:none }
  .arc__sun{ animation:none; offset-distance:52% }
  .grain{ animation:none }
  .mesh i{ animation:none }
  .scrollcue i{ animation:none }
  .chip__dot{ animation:none }
  .ph::before{ animation:none }
}

/* ═══ PÁGINAS LEGALES ══════════════════════════════════════════════════ */
.legal-page{ background:var(--bg) }
.legal{ padding:clamp(120px,15vw,170px) 0 clamp(70px,9vw,110px) }
.legal__in{ max-width:74ch }
.legal__h1{ font:300 clamp(2rem,5vw,3.1rem)/1.15 var(--f-d); margin:18px 0 0; letter-spacing:-.025em }
.legal__date{ margin-top:14px; font-size:.82rem; color:var(--tx-3) }
.legal h2{ margin:clamp(38px,5vw,54px) 0 14px; font:400 clamp(1.15rem,2.2vw,1.45rem)/1.3 var(--f-d);
  color:var(--tx); padding-top:22px; border-top:1px solid var(--line) }
.legal p{ margin-top:14px; color:var(--tx-2); font-size:.97rem; line-height:1.8 }
.legal strong{ color:var(--tx); font-weight:500 }
.legal a{ color:var(--green); text-decoration:underline; text-underline-offset:3px }
.legal mark{ background:rgba(255,179,71,.14); color:var(--sun); padding:2px 7px; border-radius:6px;
  font-size:.93em; border:1px dashed rgba(255,179,71,.35) }
.legal__list{ margin-top:16px; display:grid; gap:10px }
.legal__list li{ position:relative; padding-left:20px; color:var(--tx-2); font-size:.95rem; line-height:1.75 }
.legal__list li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:1px;
  background:var(--green) }
.legal__table{ width:100%; margin-top:20px; border-collapse:collapse; font-size:.88rem;
  display:block; overflow-x:auto }
.legal__table th, .legal__table td{ padding:12px 14px; text-align:left; border:1px solid var(--line);
  color:var(--tx-2); vertical-align:top }
.legal__table th{ color:var(--tx); font-weight:500; background:var(--surf) }
.legal .btn{ margin-top:8px }

/* ═══ AVISO DE COOKIES ═════════════════════════════════════════════════ */
.ck{
  position:fixed; left:var(--pad); right:var(--pad); bottom:20px; z-index:160;
  max-width:560px; margin-inline:auto;
  padding:24px 26px; border-radius:var(--r-l); border:1px solid var(--line-2);
  background:rgba(10,26,39,.96); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 40px 90px -40px #000;
  transform:translateY(130%); transition:transform .7s var(--ease-o);
}
.ck.is-up{ transform:none }
.ck h2{ margin:0; font:400 1.05rem/1.35 var(--f-d); color:var(--tx) }
.ck p{ margin-top:10px; font-size:.87rem; line-height:1.7; color:var(--tx-2) }
.ck p a{ color:var(--green); text-decoration:underline; text-underline-offset:3px }
.ck__btns{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap }
.ck__btns .btn{ flex:1; min-width:140px }
@media (max-width:520px){ .ck{ padding:20px; bottom:12px } .ck__btns .btn{ flex:1 1 100% } }

/* Campo trampa: fuera de la vista, pero presente en el formulario. */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }