/* Helion Power — sistema visual compartido (v3, producción)
   Una sola familia (Manrope) para titulares, texto e interfaz.
   Space Grotesk solo en el wordmark del logotipo.
   Sin microtítulos, sin etiquetas en mayúsculas espaciadas, sin numeración decorativa:
   este archivo no define ningún estilo de "eyebrow" a propósito. */

/* Fuentes autoalojadas (SIL Open Font License, ver assets/fonts/OFL-*.txt) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/manrope-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/manrope-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}

:root{
  --hp-void:#090C10; --hp-s1:#12171F; --hp-line-dark:#242E3B;
  --hp-paper:#F3F5F7; --hp-paper-2:#EDEFF2; --hp-white:#FFFFFF; --hp-ink:#0D1116;
  --hp-amber:#FF7A1A; --hp-amber-ink:#C2510A; --hp-blue:#4A9EFF; --hp-blue-ink:#1F6FD1;
  --hp-text-2:#3D4550; --hp-text-2-dark:#BAC2CC;
  --hp-font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --hp-logo:'Space Grotesk','Manrope',sans-serif;
  --hp-tech:'Space Grotesk','Manrope',ui-sans-serif,sans-serif; /* cifras y códigos técnicos */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-wipe:cubic-bezier(.76,0,.24,1); --ease-spring:cubic-bezier(.32,.72,0,1);
}

/* ---------- Base ---------- */
.hp{container-type:inline-size;background:var(--hp-void);color:var(--hp-paper);font-family:var(--hp-font);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'ss01' 0}
.hp *{box-sizing:border-box}
.hp h1,.hp h2,.hp h3,.hp p,.hp ol,.hp ul,.hp dl,.hp dd,.hp figure{margin:0;padding:0}
.hp ol,.hp ul{list-style:none}
.hp a{color:inherit;text-decoration:none;transition:color 160ms var(--ease-out)}
.hp b,.hp strong{font-weight:600}
.hp button,.hp input,.hp select,.hp textarea{font-family:inherit}
.wrap{max-width:1360px;margin:0 auto;padding:0 56px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.light{background:var(--hp-paper);color:var(--hp-ink)}
.photo{display:block;width:100%;object-fit:cover}
picture{display:contents}
html,body{margin:0;background:var(--hp-void)}
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;background:var(--hp-amber);color:var(--hp-void);padding:12px 18px;font-weight:600;border-radius:2px}
.skip-link:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Tipografía ----------
   Escala (escritorio → móvil): display 84→40 · h2 56→32 · h3 34→26 · lead 21→18 · cuerpo 17 · funcional 14
   Mayúsculas: ninguna en la interfaz (solo el logotipo). Tracking negativo solo en titulares. */
.t-display{font-size:clamp(40px,5.4cqi,84px);line-height:1.03;letter-spacing:-.022em;font-weight:500}
.t-h2{font-size:clamp(32px,3.7cqi,56px);line-height:1.08;letter-spacing:-.02em;font-weight:500;text-wrap:balance}
.t-h3{font-size:clamp(26px,2.3cqi,34px);line-height:1.15;letter-spacing:-.015em;font-weight:500}
.t-lead{font-size:clamp(18px,1.45cqi,21px);line-height:1.5;font-weight:400;max-width:38ch;text-wrap:pretty}
.t-body{font-size:17px;line-height:1.6;max-width:60ch;text-wrap:pretty}
.t-small{font-size:14px;line-height:1.45;font-weight:500;letter-spacing:0}
.t-num{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:500}
.t-2{color:var(--hp-text-2)}
.t-2d{color:var(--hp-text-2-dark)}
.accent{color:var(--hp-amber)}
.accent-ink{color:var(--hp-amber-ink)}
.l{display:block}                      /* salto de línea intencional en titulares */
.logo-word{font-family:var(--hp-logo);font-size:16px;font-weight:600;letter-spacing:.12em;color:var(--hp-paper)}

/* ---------- Navegación ---------- */
.navlink{position:relative;font-size:15px;font-weight:500;color:rgba(243,245,247,.86)}
.navlink::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--hp-amber);transform:scaleX(0);transform-origin:right center;transition:transform 280ms var(--ease-out)}
.navlink:hover{color:var(--hp-paper)}
.js .navlink::after{display:none}
.navlink.is-active{color:var(--hp-paper)}
.navlink:hover::after,.navlink:focus-visible::after,.navlink[aria-current]::after{transform:scaleX(1);transform-origin:left center}
.menu-btn{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(243,245,247,.3);border-radius:2px;color:var(--hp-paper);cursor:pointer;transition:border-color 280ms var(--ease-out)}
.menu-btn:hover{border-color:var(--hp-paper)}

/* ---------- Acciones (v4) ----------
   Dos piezas, un mismo lenguaje de plano eléctrico:
   · .btn-primary  — placa naranja con la esquina superior derecha achaflanada. Una por vista.
   · .btn-secondary / .link-arrow — «conductor»: texto + línea con terminal que se extiende y se energiza.
   Sin píldoras, sin sombras. Respuesta física al pulsar. */
@property --plate{syntax:'<color>';inherits:false;initial-value:#FF7A1A}
.btn-primary{--plate:#FF7A1A;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:0 24px 0 24px;border:0;border-radius:0;background:linear-gradient(225deg,transparent 0 11px,var(--plate) 11.5px);color:var(--hp-void);font-family:var(--hp-font);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.005em;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:--plate 220ms var(--ease-out),transform 420ms var(--ease-spring)}
.hp .btn-primary,.hp .btn-primary:hover{color:var(--hp-void)}
.hp .btn-primary:hover{--plate:#FF9040}
.hp .btn-primary:active{--plate:#E8690C;transform:scale(.98)}
.btn-ic{flex:none;transition:transform 420ms var(--ease-spring)}
.btn-primary:hover .btn-ic,.btn-primary:focus-visible .btn-ic{transform:translateX(4px)}
.btn-primary[disabled],.btn-primary[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-primary[aria-busy="true"],.btn-primary[disabled][aria-busy="true"]{opacity:.8;cursor:progress}
.btn-secondary,.link-arrow{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0;border:0;background:none;color:inherit;font-family:var(--hp-font);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.hp .btn-secondary:hover,.hp .link-arrow:hover{color:inherit}
.btn-secondary:active,.link-arrow:active{transform:translateY(1px)}
.cond{position:relative;flex:none;width:56px;height:9px}
.cond::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor;opacity:.7;transform:scaleX(.5);transform-origin:left center;transition:transform 520ms var(--ease-spring),opacity 200ms var(--ease-out)}
.cond::after{content:'';position:absolute;right:0;top:0;width:9px;height:9px;box-sizing:border-box;border:1.5px solid currentColor;transform:translateX(-28px);transition:transform 520ms var(--ease-spring),background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
a:hover > .cond::before,a:focus-visible > .cond::before{transform:scaleX(1);opacity:1}
a:hover > .cond::after,a:focus-visible > .cond::after{transform:translateX(0);background:var(--hp-amber);border-color:var(--hp-amber)}
.cond--down{width:9px;height:40px}
.cond--down::before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(.5);transform-origin:center top}
.cond--down::after{top:auto;bottom:0;transform:translateY(-20px)}
a:hover > .cond--down::before,a:focus-visible > .cond--down::before{transform:scaleY(1)}
a:hover > .cond--down::after,a:focus-visible > .cond--down::after{transform:translateY(0)}
.arr{flex:none;transition:transform 280ms var(--ease-out)}
a:hover .arr,a:focus-visible .arr{transform:translateX(4px)}
a:hover .arr-down,a:focus-visible .arr-down{transform:translateY(3px)}
.hp a:focus-visible,.hp button:focus-visible{outline:2px solid var(--hp-blue);outline-offset:3px}
.hp .light a:focus-visible,.hp .light button:focus-visible,.hp .light input:focus-visible{outline-color:var(--hp-blue-ink)}

/* ---------- Fotografía ---------- */
.zoom{overflow:hidden}
.zimg{transition:transform 1400ms var(--ease-out)}
.zoom:hover .zimg{transform:scale(1.035);transition-duration:900ms;transition-delay:0ms}
.plx{will-change:transform}

/* ---------- Movimiento ----------
   Tiempos: 160 color · 280 estado · 640 fundido · 960 desplazamiento · 1400 máscara/foto · escalonado 80 ms */
@keyframes hp-photo{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes hp-line{from{transform:translate3d(0,110%,0)}to{transform:translate3d(0,0,0)}}
@keyframes hp-up{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hp-fade{from{opacity:0}to{opacity:1}}
.hero-img{animation:hp-photo 1800ms var(--ease-out) both}
.hero-nav{animation:hp-fade 640ms var(--ease-out) 150ms both}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln-i{display:inline-block;animation:hp-line 960ms var(--ease-out) both}
.l0{animation-delay:280ms}.l1{animation-delay:360ms}.l2{animation-delay:440ms}.l3{animation-delay:520ms}
.hero-cta{animation:hp-up 560ms var(--ease-out) 640ms both}
.hero-fade{animation:hp-fade 800ms var(--ease-out) 760ms both}

.hp-motion [data-r]{opacity:0;transform:translate3d(0,24px,0);transition:opacity 640ms var(--ease-out),transform 960ms var(--ease-out)}
.hp-motion [data-inview] [data-r],.hp-motion [data-r][data-inview]{opacity:1;transform:translate3d(0,0,0)}
.hp-motion .d1{transition-delay:80ms}.hp-motion .d2{transition-delay:160ms}.hp-motion .d3{transition-delay:240ms}.hp-motion .d4{transition-delay:320ms}.hp-motion .d5{transition-delay:400ms}.hp-motion .d6{transition-delay:560ms}
/* Máscara editorial: el recorte va en la imagen (un elemento recortado no se puede observar) */
.hp-motion [data-mask] .zimg{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1400ms var(--ease-wipe),transform 1400ms var(--ease-out)}
.hp-motion [data-mask][data-inview] .zimg{clip-path:inset(0 0 0 0);transform:scale(1)}
.hp-motion [data-mask][data-inview].zoom:hover .zimg{transform:scale(1.035)}
.hp-motion .d2 .zimg{transition-delay:160ms}.hp-motion .d4 .zimg{transition-delay:320ms}
.hp-motion .cta-img{transform:scale(1.08);transition:transform 1800ms var(--ease-out)}
.hp-motion [data-inview] .cta-img{transform:scale(1)}

/* ---------- Diagrama unifilar (componente) ---------- */
.dg-el{transition:opacity 280ms var(--ease-out)}
.hp-motion .dg-card{opacity:0;transform:translate3d(0,10px,0);transition:opacity 640ms var(--ease-out),transform 640ms var(--ease-out)}
.hp-motion .dg-lbl{opacity:0;transition:opacity 640ms var(--ease-out)}
.hp-motion .dg-wire{clip-path:inset(-6px 100% -6px 0);transition:clip-path 520ms var(--ease-wipe),opacity 280ms var(--ease-out)}
.hp-motion .dg-wire.wl{clip-path:inset(-6px 0 -6px 100%)}
.hp-motion .dg-wire.wv{clip-path:inset(0 -6px 100% -6px)}
.hp-motion .dg-bus{transform:scaleY(0);transform-origin:50% 0;transition:transform 700ms var(--ease-wipe),opacity 280ms var(--ease-out)}
.hp-motion [data-inview] .dg-card{opacity:1;transform:translate3d(0,0,0)}
.hp-motion [data-inview] .dg-lbl{opacity:1}
.hp-motion [data-inview] .dg-wire{clip-path:inset(-6px -6px -6px -6px)}
.hp-motion [data-inview] .dg-bus{transform:scaleY(1)}
.hp-motion .q1{transition-delay:110ms}.hp-motion .q2{transition-delay:220ms}.hp-motion .q3{transition-delay:330ms}.hp-motion .q4{transition-delay:440ms}.hp-motion .q5{transition-delay:620ms}.hp-motion .q6{transition-delay:700ms}.hp-motion .q7{transition-delay:780ms}.hp-motion .q8{transition-delay:900ms}.hp-motion .q9{transition-delay:1000ms}.hp-motion .q10{transition-delay:1180ms}.hp-motion .q11{transition-delay:1360ms}
.hp-motion [data-settled] .dg-el{transition-delay:0ms;transition-duration:280ms}
.dg-card{cursor:default}
.hp .dg:has(.dg-card:hover) .dg-el{opacity:.18}
.hp .dg:has(.c-grid:hover) .r-grid,.hp .dg:has(.c-tr:hover) .r-tr,.hp .dg:has(.c-pv:hover) .r-pv,.hp .dg:has(.c-bess:hover) .r-bess,.hp .dg:has(.c-load:hover) .r-load,.hp .dg:has(.c-hi:hover) .r-hi{opacity:1}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion: reduce){
  .hp *,.hp *::before,.hp *::after{animation:none !important;transition-duration:1ms !important;transition-delay:0ms !important}
  .zoom:hover .zimg{transform:none !important}
}

/* ---------- Comportamiento compartido en pantallas estrechas ---------- */
@container (max-width: 980px){
  .wrap{padding:0 20px}
  .g12{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .g12>*{grid-column:1 / -1 !important}
  .navlinks,.nav-contact,.nav-cta{display:none !important}
  .menu-btn{display:inline-flex}
  .ln{display:inline;overflow:visible;padding:0;margin:0}
  .ln-i{display:inline;animation-name:hp-fade}
  .ln + .ln::before{content:' '}
}
@container (max-width: 640px){
  .l{display:inline}
  .l + .l::before{content:' '}
}