/* ============================================================
   NEXCERA — Home (Ember redesign, 2026-09-29)
   Graphite + Ember Orange, Archivo display, brand photography.
   Loaded only by index.html; shared tokens live in styles.css.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hx-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:112px 0 56px;background:var(--bg);
}
.hx-hero-media{position:absolute;inset:0;z-index:-2;}
.hx-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:72% 0%;
  animation:hxSettle 2.2s cubic-bezier(.16,1,.3,1) both;
}
/* Legibility scrim: dense where the text sits (left/bottom), open where the
   photo carries the brand (the NEXCERA wall sign, top right). */
.hx-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,11,13,.97) 0%,rgba(10,11,13,.9) 30%,rgba(10,11,13,.55) 58%,rgba(10,11,13,.2) 100%),
    linear-gradient(0deg,rgba(10,11,13,.95) 0%,rgba(10,11,13,0) 38%);
}
.hx-hero-inner{width:100%;}
.hx-title{
  font-family:var(--font-display);font-weight:900;font-stretch:108%;
  font-size:clamp(2.1rem,.6rem + 6.4vw,6rem);line-height:.9;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--white);
}
.hx-line{display:block;overflow:hidden;padding-bottom:.04em;}
.hx-line > span{display:block;animation:hxRise .95s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 90ms + 120ms);}
.hx-sub{
  font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.55;color:#E4E2DE;
  max-width:44ch;margin:28px 0 36px;
}
.hx-in{animation:hxFade .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 90ms + 200ms);}

.hx-stats{
  display:flex;flex-wrap:wrap;margin-top:64px;
  font-variant-numeric:tabular-nums;
}
.hx-stats li{
  display:flex;flex-direction:column;gap:4px;
  padding:4px 40px 4px 0;margin-right:40px;
  border-right:1px solid rgba(255,255,255,.18);
}
.hx-stats li:last-child{border-right:none;margin-right:0;padding-right:0;}
.hx-stats strong{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.1;color:var(--white);letter-spacing:-.01em;}
.hx-plus{color:var(--gold);margin-right:2px;}
.hx-since{font-weight:500;font-size:.62em;color:var(--gold);letter-spacing:0;}
.hx-stats li > span{font-size:.9rem;color:var(--gray2);}



/* ============================================================
   SECTORES
   ============================================================ */
.hx-sectors{background:#FFFFFF;color:var(--ink-1);border-bottom:1px solid var(--ink-border);}
.hx-sectors-inner{display:flex;align-items:center;gap:40px;padding-top:30px;padding-bottom:30px;}
.hx-sectors-lead{
  flex:0 0 120px;font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--ink-1);
}
.hx-sector-list{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.hx-sector-list li{display:flex;align-items:center;gap:12px;font-size:.88rem;line-height:1.3;color:var(--ink-2);}
.hx-sector-list svg{width:34px;height:34px;color:var(--ink-1);flex-shrink:0;}
.hx-sector-more{padding-left:24px;border-left:1px solid var(--ink-border);font-weight:600;color:var(--ink-1)!important;}

/* ============================================================
   SOLUCIONES
   ============================================================ */
.hx-solutions{background:var(--paper);color:var(--ink-1);padding:112px 0 120px;}
.hx-solutions h2,.hx-cases h2{color:var(--ink-1);}
.hx-solutions .hx-head-aside p,.hx-cases .hx-head-aside p{color:var(--ink-2);}

.hx-sol-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.hx-sol{
  display:flex;flex-direction:column;height:100%;
  background:#FFFFFF;border:1px solid var(--ink-border);border-radius:6px;overflow:hidden;
  transition:border-color .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.hx-sol-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg);}
.hx-sol-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.hx-sol-body{display:flex;flex-direction:column;flex:1;padding:22px 20px 20px;}
.hx-sol-icon{width:28px;height:28px;color:var(--gold);margin-bottom:14px;}
.hx-sol h3{font-family:var(--font-display);font-size:1.12rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink-1);margin-bottom:10px;}
.hx-sol p{font-size:.88rem;line-height:1.55;color:var(--ink-2);}
.hx-sol-arrow{width:20px;height:20px;color:var(--accent-ink);margin-top:auto;padding-top:0;transition:transform .25s var(--ease-out);}
.hx-sol-body p{margin-bottom:22px;}
.hx-sol:hover{border-color:rgba(255,107,26,.55);transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(18,20,24,.28);}
.hx-sol:hover .hx-sol-media img{transform:scale(1.05);}
.hx-sol:hover .hx-sol-arrow{transform:translateX(5px);}

/* ============================================================
   CÓMO TRABAJAMOS
   ============================================================ */
.hx-process{background:var(--bg);padding:128px 0;}
.hx-process-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:96px;align-items:start;}
.hx-process-head{position:sticky;top:120px;}
.hx-process-head h2{font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;}
.hx-process-head > p:not(.hx-kicker){font-size:1.05rem;color:var(--gray);line-height:1.7;max-width:44ch;margin:22px 0 34px;}
.hx-steps{display:flex;flex-direction:column;}
.hx-step{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;
  padding:40px 0;border-top:1px solid var(--border2);
}
.hx-step:last-child{border-bottom:1px solid var(--border2);}
.hx-step-n{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,4.4vw,4rem);
  line-height:.85;color:var(--gold);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:2.1ch;
}
.hx-step h3{font-family:var(--font-display);font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:800;letter-spacing:-.015em;margin-bottom:10px;}
.hx-step p{color:var(--gray);font-size:1rem;line-height:1.65;max-width:46ch;}

/* ============================================================
   CASOS
   ============================================================ */
.hx-cases{background:var(--paper);color:var(--ink-1);padding:120px 0;}
.hx-case{
  display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center;
  padding-bottom:56px;
}
.hx-case-media{
  border-radius:8px;overflow:hidden;background:var(--bg);
  box-shadow:0 30px 60px -30px rgba(18,20,24,.45);
}
.hx-case-media img{width:100%;height:auto;display:block;transition:transform .8s var(--ease-out);}
.hx-case:hover .hx-case-media img{transform:scale(1.03);}
.hx-case-tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);}
.hx-case-body h3{font-family:var(--font-display);font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:var(--ink-1);margin:14px 0 14px;}
.hx-case-body > p{color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:44ch;}
.hx-case-figures{display:flex;gap:36px;margin:32px 0 32px;padding-top:28px;border-top:1px solid var(--ink-border);font-variant-numeric:tabular-nums;}
.hx-case-figures li{display:flex;flex-direction:column;gap:2px;}
.hx-case-figures strong{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;color:var(--ink-1);letter-spacing:-.02em;}
.hx-case-figures span{font-size:.85rem;color:var(--ink-2);}

.hx-case-rows{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.hx-case-row{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 24px;align-items:center;
  padding:26px 28px;background:#FFFFFF;border:1px solid var(--ink-border);border-radius:6px;
  transition:border-color .25s var(--ease-out);
}
.hx-case-row:hover{border-color:rgba(255,107,26,.55);}
.hx-case-row-client{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.hx-case-row-name{grid-row:2;font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--ink-1);}
.hx-case-row-result{grid-column:2;grid-row:1/3;text-align:right;font-size:.85rem;color:var(--ink-2);max-width:16ch;line-height:1.35;}
.hx-case-row-result strong{display:block;font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--ink-1);line-height:1.1;}

.hx-clients{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 28px;margin-top:56px;padding-top:28px;border-top:1px solid var(--ink-border);}
.hx-clients p{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.hx-clients ul{display:flex;flex-wrap:wrap;gap:10px 28px;}
.hx-clients a{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-1);text-decoration:underline;text-decoration-color:rgba(18,20,24,.2);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s;}
.hx-clients a:hover{color:var(--accent-ink);text-decoration-color:currentColor;}

/* ============================================================
   ROI + CONFIGURADOR (restyle only — logic unchanged)
   ============================================================ */
.roi-section{padding-top:120px;}
.roi-section .section-head h2{font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:-.03em;}
.conv-develop .container{max-width:1328px;padding:0 32px;}
.conv-develop .config-box{max-width:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1240px){
  .hx-sol-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
  .hx-sector-list{flex-wrap:wrap;justify-content:flex-start;gap:20px 36px;}
}
@media(max-width:1024px){
  .hx-sectors-inner{padding-top:36px;padding-bottom:36px;}
  .hx-process-inner{grid-template-columns:1fr;gap:48px;}
  .hx-process-head{position:static;}
  .hx-case{grid-template-columns:1fr;gap:36px;}
  .hx-sectors-inner{flex-direction:column;align-items:flex-start;gap:20px;}
  .hx-sectors-lead{flex-basis:auto;}
}
@media(max-width:768px){
  .conv-develop .container{padding:0 24px;}
  .hx-hero{padding:112px 0 40px;align-items:flex-end;}
  .hx-hero::before{
    background:
      linear-gradient(0deg,rgba(10,11,13,.98) 0%,rgba(10,11,13,.9) 55%,rgba(10,11,13,.55) 100%);
  }
  .hx-stats{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;}
  .hx-stats li{border-right:none;margin-right:0;padding:0;}
  .hx-stats li:last-child{grid-column:1/-1;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);}
  .hx-solutions,.hx-cases,.hx-process{padding:80px 0;}
  .roi-section{padding-top:80px;}
  .hx-sector-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;width:100%;}
  .hx-sector-list svg{width:28px;height:28px;}
  .hx-sector-more{border-left:none;padding-left:0;}
  /* Solutions become a swipeable rail instead of six stacked cards */
  .hx-sol-grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin:0 -20px;padding:0 20px 12px;scroll-padding:0 20px;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .hx-sol-grid::-webkit-scrollbar{display:none;}
  .hx-sol-grid li{scroll-snap-align:start;}
  .hx-step{gap:20px;padding:30px 0;}
  .hx-case-figures{gap:22px;flex-wrap:wrap;}
  .hx-case-rows{grid-template-columns:1fr;}
  .hx-case-row{padding:22px 20px;}
}
@media(max-width:420px){
  .hx-stats strong{font-size:1.5rem;}
  .hx-case-row{grid-template-columns:1fr;}
  .hx-case-row-result{grid-column:1;grid-row:auto;text-align:left;max-width:none;margin-top:8px;}
}

@media(prefers-reduced-motion:reduce){
  .hx-hero-media img,.hx-line > span,.hx-in{animation:none;}
  .hx-sol,.hx-sol-media img,.hx-case-media img,.btn svg,.hx-link svg,.hx-sol-arrow{transition:none;}
  .hx-sol:hover{transform:none;}
}