@font-face{font-family:"Bricolage Grotesque";src:url(fonts/BricolageGrotesque-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* Mundo: papel blanco con un tinte de hoja, verde de campo como único acento. Tema claro fijo. */
:root{
  color-scheme:light;
  --ground:#fbfdf9;--tint:#edf5e9;--tint-strong:#dcecd6;--line:#d5e3d1;
  --ink:#10231a;--ink-2:#3d5146;--ink-3:#5f7468;
  --leaf:#1b7741;--leaf-hover:#145f33;--forest:#103f27;--on-forest:#f1f8ee;--on-forest-2:#c3dbc8;
  /* Colores de dato, sólo dentro del gráfico: de dónde sale la energía. */
  --sun:#e0a019;--grid:#5d7285;--grid-soft:#b9c6d1;
  --radius:20px;--gutter:clamp(20px,4.6vw,64px);--measure:1240px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --display:"Bricolage Grotesque",Geist,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--leaf) var(--tint)}
body{margin:0;background:var(--ground);color:var(--ink-2);font:400 1.0625rem/1.6 Geist,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--leaf)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:620;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.35rem,4.5vw,3.9rem)}
h2{font-size:clamp(1.85rem,3.3vw,2.75rem)}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
p{text-wrap:pretty;max-width:65ch}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
img,svg{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--leaf);color:#fff}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:6px}
.on-forest :focus-visible{outline-color:var(--on-forest)}

.wrap{width:100%;max-width:calc(var(--measure) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:3;background:var(--leaf);color:#fff;padding:8px 14px;border-radius:999px}

/* Cabecera: una línea, 68 px */
.top{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:640 1.2rem/1 var(--display);letter-spacing:-.03em}
.brand svg{width:28px;height:28px}
.top .lead{display:flex;align-items:center;gap:clamp(10px,2.4vw,28px);min-width:0}
/* Pestañas de sección: Inicio y RISE, a la vista en cualquier ancho */
.sections{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--tint)}
.sections a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;color:var(--ink-2);font:560 .95rem/1 Geist,sans-serif;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.sections a:active{transform:scale(.97)}
.sections a[aria-current=page]{background:var(--ground);color:var(--ink);box-shadow:0 1px 3px rgb(16 63 39 / .14)}
.more{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:.96rem}
.more a:not(.button){color:var(--ink-2);text-decoration:none;display:none;transition:color .18s ease}
@media(min-width:900px){.more a:not(.button){display:inline}}
/* En el teléfono la marca ya lleva al inicio: quedan su isotipo y las otras pestañas. */
@media(max-width:560px){.sections a:first-child,.brand span{display:none}.sections a{padding:0 12px}.top .wrap{gap:8px}.top .lead{gap:8px}.top .button{padding:0 13px}}

/* Botones: píldora, respuesta al toque */
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:560 1rem/1 Geist,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease-out),background-color .18s ease,border-color .18s ease,color .18s ease}
.button:active{transform:scale(.97)}
.button svg{width:17px;height:17px;fill:currentColor;transition:transform .2s var(--ease-out)}
.button.primary{background:var(--leaf);border-color:var(--leaf);color:#fff}
.button.light{background:var(--on-forest);border-color:var(--on-forest);color:var(--forest)}
.top .button{min-height:42px;padding:0 18px;font-size:.94rem}
@media(hover:hover) and (pointer:fine){
  .more a:not(.button):hover,.sections a:not([aria-current]):hover{color:var(--ink)}
  .button:hover{border-color:var(--ink-3)}
  .button.primary:hover{background:var(--leaf-hover);border-color:var(--leaf-hover)}
  .button.light:hover{background:#fff;border-color:#fff}
  .button:hover svg{transform:translateX(3px)}
}

/* Portada: texto a la izquierda, fotografía que sale hacia el borde derecho */
.hero{padding-block:clamp(40px,6vw,88px) clamp(48px,7vw,96px)}
.hero .wrap{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
.hero p{margin-top:24px;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;max-width:36ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.photo{border-radius:var(--radius);overflow:hidden;background:var(--tint)}
.photo img{width:100%;height:100%;object-fit:cover}
.hero .photo{aspect-ratio:16/11}
@media(min-width:900px){.hero .photo{aspect-ratio:6/5;margin-right:calc(-1*var(--gutter));border-radius:var(--radius) 0 0 var(--radius)}}
/* Entrada de la portada, una sola vez al cargar */
.js .hero .rise-in{opacity:0;transform:translateY(10px);animation:rise-in .7s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*70ms)}
.rise-in.d1{--i:1}.rise-in.d2{--i:2}
.js .hero .photo{clip-path:inset(0 0 0 100%);animation:unveil .9s var(--ease-in-out) .12s forwards}
@keyframes rise-in{to{opacity:1;transform:none}}
@keyframes unveil{to{clip-path:inset(0)}}

section{padding-block:clamp(64px,8.5vw,128px)}
.field{background:var(--tint)}
.lede{margin-top:16px;font-size:1.12rem;max-width:52ch}

/* Un día con RISE: la demostración */
.day{margin-top:clamp(28px,4vw,48px);background:var(--ground);border-radius:var(--radius);padding:clamp(16px,2.6vw,32px);display:grid;gap:22px}
@media(min-width:980px){.day{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}}
.day-chart svg{width:100%;height:auto;overflow:visible}
.day-chart .band{fill:var(--tint)}
.day-chart .band.peak{fill:var(--tint-strong)}
.day-chart text{font:500 12px Geist,sans-serif;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.day-chart .band-name{fill:var(--ink-2);font-weight:560}
.day-chart .a-sun{fill:var(--sun)}.day-chart .a-batt{fill:var(--leaf)}.day-chart .a-grid{fill:var(--grid)}.day-chart .a-store{fill:var(--grid-soft)}
.day-chart .load{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.day-chart .limit{fill:none;stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:5 5}
.day-chart .cursor{stroke:var(--ink);stroke-width:1.5}
.day-chart .knob{fill:var(--ground);stroke:var(--ink);stroke-width:2}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:.9rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:3px}
.legend .l-sun{background:var(--sun)}.legend .l-batt{background:var(--leaf)}.legend .l-grid{background:var(--grid)}.legend .l-store{background:var(--grid-soft)}
.legend .l-load{height:2px;border-radius:0;background:var(--ink)}
.scrub{display:grid;gap:8px;margin-top:18px}
.scrub label{font-size:.9rem;color:var(--ink-3)}
.scrub input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.scrub input::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--leaf) var(--fill,0%),var(--tint-strong) var(--fill,0%))}
.scrub input::-moz-range-track{height:6px;border-radius:999px;background:var(--tint-strong)}
.scrub input::-moz-range-progress{height:6px;border-radius:999px;background:var(--leaf)}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--ground);border:2px solid var(--leaf);box-shadow:0 2px 8px rgb(16 63 39 / .22);transition:transform .16s var(--ease-out)}
.scrub input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ground);border:2px solid var(--leaf);box-shadow:0 2px 8px rgb(16 63 39 / .22)}
.scrub input:active::-webkit-slider-thumb{transform:scale(1.12)}
.readout{display:grid;gap:18px;align-content:start}
.readout .clock{font:620 clamp(2.6rem,5vw,3.6rem)/1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.readout .band-now{margin-top:6px;color:var(--leaf);font-weight:580}
.readout .what{font-size:1.08rem;color:var(--ink);min-height:6.4em}
.flows{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;border-top:1px solid var(--line);padding-top:18px}
.flows div{display:grid;gap:2px}
.flows dt{display:flex;align-items:center;gap:7px;font-size:.88rem;color:var(--ink-3)}
.flows dt svg{width:16px;height:16px;fill:currentColor}
.flows dd{font:600 1.22rem/1.2 Geist,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.proof{margin-top:28px;display:grid;gap:10px;max-width:70ch}
.proof strong{color:var(--ink);font-weight:600}
.fine{font-size:.88rem;color:var(--ink-3)}

/* Dónde se pierde plata: tres piezas de distinto peso */
.costs{display:grid;gap:16px;margin-top:clamp(28px,4vw,48px)}
@media(min-width:900px){.costs{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto}}
.cost{border-radius:var(--radius);padding:clamp(24px,3vw,40px);display:grid;gap:12px;align-content:end}
.cost.big{background:var(--tint);align-content:end;gap:28px}
.cost.big .figure{font:640 clamp(4.5rem,11vw,6rem)/.9 var(--display);letter-spacing:-.04em;color:var(--leaf)}
.cost.forest{background:var(--forest);color:var(--on-forest-2)}
.cost.forest h3{color:var(--on-forest)}
.cost.pic{padding:0;overflow:hidden;background:var(--tint);align-content:start;gap:0}
.cost.pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cost.pic div{padding:clamp(20px,2.4vw,30px);display:grid;gap:10px}
@media(min-width:900px){
  .cost.big{grid-column:1/8;grid-row:1/3}
  .cost.pic{grid-column:8/13;grid-row:1}
  .cost.forest{grid-column:8/13;grid-row:2}
}

/* Declaración de la plataforma */
.statement h2{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:19ch}
.statement p{margin-top:24px;font-size:1.14rem;max-width:56ch}

/* Variables de decisión: etiquetas en flujo, sin jerarquía entre ellas */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:860px}
.chips li{padding:9px 16px;border-radius:999px;background:var(--ground);border:1px solid var(--line);color:var(--ink);font-size:.96rem;font-weight:500}

/* Página RISE: matriz de variables, un grupo por fila */
.matrix{margin-top:clamp(28px,4vw,48px);display:grid}
.matrix .row{display:grid;gap:18px 40px;padding-block:32px}
.matrix .row + .row{border-top:1px solid var(--line)}
.matrix h3{font-size:1.5rem;color:var(--leaf)}
.matrix dl{display:grid;gap:22px 36px}
.matrix dl div{display:grid;gap:4px;align-content:start}
.matrix dt{font-weight:620;color:var(--ink);font-size:1.06rem}
.matrix dd{font-size:.98rem}
@media(min-width:700px){.matrix dl{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.matrix .row{grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);align-items:start}}

/* Capturas del producto: marco sobrio, explicación debajo */
.shot{display:grid;gap:12px;align-content:start}
.shot div{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--ground);box-shadow:0 18px 40px -22px rgb(16 63 39 / .35)}
.shot img{width:100%}
.shot figcaption{font-size:.95rem;color:var(--ink-2);max-width:60ch}
.shots{margin-top:clamp(28px,4vw,48px);display:grid;gap:clamp(28px,4vw,48px) clamp(20px,3vw,36px)}
@media(min-width:900px){.shots{grid-template-columns:1fr 1fr}.shots .shot:first-child{grid-column:1/-1}}
.shots + .fine{margin-top:22px}
@media(min-width:1040px){.statement .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:center}}
@media(max-width:1039px){.statement .shot{margin-top:36px}}

/* Etapas: una línea de tiempo, el orden importa */
.stages{display:grid;gap:28px;margin-top:clamp(32px,4.5vw,56px)}
@media(min-width:860px){.stages{grid-template-columns:repeat(4,1fr);gap:0}}
.stages li{display:grid;gap:10px;align-content:start;border-top:2px solid var(--leaf);padding-top:20px}
@media(min-width:860px){.stages li{padding-right:28px}}
.stages p{font-size:.98rem}

/* Principios y seguridad: definiciones en dos columnas, sin cajas */
.defs{display:grid;gap:36px clamp(32px,6vw,96px);margin-top:clamp(28px,4vw,48px)}
@media(min-width:800px){.defs{grid-template-columns:1fr 1fr}}
.defs div{display:grid;gap:8px;align-content:start}
.defs dt{font:620 1.3rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* Página RISE: tres verbos */
.verbs{margin-top:clamp(28px,4vw,48px);display:grid}
.verbs li{display:grid;gap:8px 40px;padding-block:28px}
.verbs li + li{border-top:1px solid var(--line)}
@media(min-width:800px){.verbs li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline}}
.verbs h3{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em;color:var(--leaf)}

/* Funcionalidades: tres grupos de distinto peso, todas a la vista */
.groups{margin-top:clamp(28px,4vw,48px);display:grid;gap:16px}
.group{border-radius:var(--radius);padding:clamp(24px,3vw,40px);display:grid;gap:24px;align-content:start}
.group h3{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.03em}
.group dl{display:grid;gap:22px 36px}
.group dl div{display:grid;gap:4px;align-content:start}
.group dt{font-weight:620;color:var(--ink);font-size:1.06rem}
.group dd{font-size:.98rem}
.group.tint{background:var(--tint)}
.group.tint h3{color:var(--leaf)}
.group.forest{background:var(--forest);color:var(--on-forest-2)}
.group.forest h3,.group.forest dt{color:var(--on-forest)}
.group.line{border:1px solid var(--line)}
.group.line h3{color:var(--leaf)}
@media(min-width:700px){.group.tint dl,.group.line dl{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){
  .groups{grid-template-columns:repeat(12,1fr)}
  .group.tint{grid-column:1/8}.group.forest{grid-column:8/13}.group.line{grid-column:1/13}
  .group.line dl{grid-template-columns:repeat(3,1fr)}
}

/* Inteligencia artificial y control: dos funciones, lado a lado */
.duo{margin-top:clamp(28px,4vw,48px);display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:960px){.duo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.duo dl{display:grid;gap:24px}
.duo dl div{display:grid;gap:4px}
.duo .ai dt{font:620 1.3rem/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.duo .control{background:var(--forest);color:var(--on-forest-2);border-radius:var(--radius);padding:clamp(24px,3vw,40px);display:grid;gap:24px}
.duo .control h3{color:var(--on-forest);font-size:1.5rem}
.duo .control dt{font-weight:620;color:var(--on-forest);font-size:1.06rem}
.duo .control dd{font-size:.98rem}
.duo + .fine{margin-top:26px;font-size:.98rem;color:var(--ink-2)}

/* Página de planes */
.hero.plain .wrap{grid-template-columns:1fr}
.hero.plain{padding-bottom:clamp(32px,4vw,56px)}
.hero.plain p{max-width:48ch}
.wrap.narrow{max-width:calc(880px + 2*var(--gutter))}
.price{margin-top:clamp(24px,3.4vw,40px);background:var(--ground);border-radius:var(--radius);padding:clamp(8px,2vw,24px) clamp(16px,3vw,36px);overflow-x:auto}
.price table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price th,.price td{text-align:left;padding:18px 16px 18px 0;vertical-align:baseline}
.price thead th{font:500 .92rem/1.3 Geist,sans-serif;color:var(--ink-3);padding-bottom:10px}
.price tbody tr + tr > *{border-top:1px solid var(--line)}
.price tbody th{font:620 1.15rem/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.price td{color:var(--ink-2);white-space:nowrap}
.price td b{font:620 1.35rem/1.2 var(--display);letter-spacing:-.02em;color:var(--leaf)}
.price + .fine{margin-top:16px}
.faq{margin-top:clamp(20px,3vw,36px);display:grid;gap:10px}
.faq details{background:var(--ground);border-radius:16px;padding:0 22px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;cursor:pointer;list-style:none;font:600 1.06rem/1.35 Geist,sans-serif;color:var(--ink);padding-block:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--leaf);border-bottom:2px solid var(--leaf);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding-bottom:20px}
.proof .actions{margin-top:14px}

/* Cierre: bloque de bosque, la única inversión de la página */
.close .wrap > div{background:var(--forest);color:var(--on-forest-2);border-radius:var(--radius);padding:clamp(28px,5vw,72px);display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:960px){.close .wrap > div{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.close h2{color:var(--on-forest);max-width:16ch}
.close p{margin-top:18px;font-size:1.12rem;max-width:44ch}
.close .ways{margin-top:24px}
.ways{display:grid;gap:2px}
.ways a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--on-forest);font-size:1.05rem;text-decoration:none}
.ways svg{width:20px;height:20px;fill:currentColor;flex:none}
@media(hover:hover) and (pointer:fine){.ways a:hover{text-decoration:underline}}
.close .who{margin-top:10px}
/* Formulario de consulta, sobre el bloque de bosque */
.ask{display:grid;gap:16px;align-content:start}
.ask .pair{display:grid;gap:16px}
@media(min-width:560px){.ask .pair{grid-template-columns:1fr 1fr}}
.ask label{display:grid;gap:7px;font-size:.92rem;color:var(--on-forest-2)}
.ask input,.ask textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--on-forest);border:1px solid transparent;border-radius:12px;padding:12px 14px;width:100%;min-height:48px;caret-color:var(--leaf)}
.ask textarea{resize:vertical;min-height:112px;line-height:1.5}
.ask input:focus-visible,.ask textarea:focus-visible{outline:2px solid var(--on-forest);outline-offset:2px;border-radius:12px}
.ask .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ask .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.ask .legal{margin:0;font-size:.86rem;color:var(--on-forest-2);max-width:34ch}
.ask .legal a{color:var(--on-forest);display:flex;align-items:center;min-height:44px}
.ask .status{margin:0;font-size:.98rem;color:var(--on-forest)}
.ask button[disabled]{opacity:.65;cursor:progress}
.ask.sent > :not(.status){display:none}
.ask.sent .status{font:620 1.3rem/1.3 var(--display);letter-spacing:-.02em}
/* Texto corrido (privacidad) */
.prose{display:grid;gap:14px}
.prose h2{font-size:1.4rem;margin-top:18px}
.prose h2:first-child{margin-top:0}
.close ::selection{background:var(--on-forest);color:var(--forest)}

footer{padding-block:30px 40px;font-size:.9rem;color:var(--ink-3)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 28px}
footer a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
footer .links{display:flex;flex-wrap:wrap;gap:0 24px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero .rise-in{animation:none;opacity:1;transform:none}
  .js .hero .photo{animation:none;clip-path:none}
  .button,.button svg,.scrub input::-webkit-slider-thumb,.sections a,.faq summary::after{transition:none}
}