/* ===================================================================
   PUREDEF — premium static rebuild
   Register: brand · Committed blue · light body + deep-blue immersives
   =================================================================== */

:root{
  /* ===== PUREDEF brand tokens — Manual de marca V1.0 ===== */
  /* primary blues */
  --nucleo:   #004BFF;   /* Azul Núcleo — signature accent */
  --profundo: #00247C;   /* Azul Profundo — deep surface */
  --escudo:   #000B29;   /* Azul Escudo — near-black ground */
  --potencia: #0038CC;   /* press state */
  --oxigeno:  #3D6BFF;   /* hover / lighter step */
  --lime:     #5CC243;   /* eco / sustainability accent only */

  /* neutrals & semantic */
  --white:      #FFFFFF;
  --paper:      #FFFFFF;          /* pure-white light slides */
  --ice:        #F7F8FB;          /* paper — alt sections & cards */
  --ice-deep:   #EEF1F7;
  --line:       #E5EAF2;
  --line-soft:  #EEF2F8;
  --ink:        #0A1A3F;          /* dark navy text */
  --ink-soft:   #515C72;
  --ink-faint:  #66708A;   /* AA on white & --ice at small sizes */

  /* legacy blue ramp -> mapped to brand scale */
  --blue-900:   var(--profundo);
  --blue-800:   #001B66;
  --blue-700:   var(--nucleo);    /* primary action */
  --blue-600:   #1F5BFF;
  --blue-500:   #3D6BFF;
  --blue-400:   #5C84FF;          /* lighter accent on dark */
  --blue-300:   #93B0FF;

  --on-blue:    #FFFFFF;
  --on-blue-dim: rgba(255,255,255,.74);
  --sky:        #7FA8FF;          /* Núcleo aclarado: acentos sobre azul oscuro (AA) */

  /* ---- type: Helvetica Neue primary (Inter web sub) · Rubik secondary ---- */
  --display: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --mono: "Rubik", "Helvetica Neue", Helvetica, sans-serif;

  /* ---- rhythm ---- */
  --shell: 1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --r: 14px;
  --r-lg: 20px;          /* brand default radius (rounded square) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ~220ms standard */
  --shadow: 0 1px 2px rgba(0,36,124,.06), 0 18px 40px -22px rgba(0,36,124,.20);
  --shadow-lg: 0 40px 80px -40px rgba(0,36,124,.38);
  --glow: 0 12px 32px rgba(0,75,255,.28);   /* CTA blue glow */
}

/* signature: one accent word inside a headline, in Azul Núcleo */
.ac{ color:var(--nucleo); }
.hero-title .ac, .cta-title .ac{ color:var(--sky); }   /* lighter núcleo for dark grounds */

/* brand selection color */
::selection{ background:var(--nucleo); color:#fff; }
.hero ::selection, .cta ::selection, .cta-band ::selection{ background:var(--sky); color:var(--escudo); }

*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
section[id]{ scroll-margin-top:84px; }
html{ scroll-padding-top:96px; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- shared type elements ---- */
.kicker{
  font-family:var(--mono); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--profundo);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.1rem;
}
.kicker::before{ content:""; width:1.6em; height:2px; background:var(--nucleo); border-radius:2px; }
.kicker--light{ color:var(--blue-300); }
.kicker--light::before{ background:var(--blue-300); }

.section-title{
  font-family:var(--display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.9rem, 4.4vw, 3.3rem); line-height:1.05; color:var(--ink);
}
.section-sub{
  margin-top:1.1rem; max-width:54ch; color:var(--ink-soft);
  font-size:clamp(1rem,1.4vw,1.12rem);
}
.section{ padding-block:var(--section-y); }
.section-head{ margin-bottom:clamp(2.2rem,4vw,3.6rem); }
.section-head--center{ text-align:center; }
.section-head--center .kicker{ justify-content:center; }
.section-head--center .section-sub{ margin-inline:auto; }
@media (max-width:620px){ .br-d{ display:none; } }

/* ===================== BUTTONS ===================== */
.btn{
  --bg:var(--blue-700); --fg:var(--on-blue);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:600; font-size:.96rem; line-height:1;
  padding:.92em 1.6em; border-radius:100px; background:var(--bg); color:var(--fg);
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn--primary{ background:var(--nucleo); color:#fff; box-shadow:var(--glow); }
.btn--primary:hover{ background:var(--oxigeno); box-shadow:0 16px 38px rgba(0,75,255,.36); }
.btn--primary:active{ background:var(--potencia); }
.btn--dark{ background:var(--profundo); color:var(--on-blue); }
.btn--dark:hover{ background:var(--blue-800); }
.btn--glass{
  background:oklch(1 0 0 / .08); color:var(--on-blue);
  border-color:oklch(1 0 0 / .28); backdrop-filter:blur(6px);
}
.btn--glass:hover{ background:oklch(1 0 0 / .16); }
.btn--lg{ padding:1.05em 1.9em; font-size:1.02rem; }
.btn--block{ width:100%; }
@media (max-width:400px){ .btn{ white-space:normal; text-align:center; } }

/* ===================== HEADER ===================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-top:clamp(12px, 1.6vw, 22px);
  transition:transform .42s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
  will-change:transform;
}
/* hides when scrolling down, returns when scrolling up */
.site-header.nav-hidden{ transform:translateY(-100%); }
.site-header:focus-within{ transform:none; }   /* keyboard focus never lands on a hidden header */
.header-inner{ display:flex; align-items:center; gap:1.5rem; height:74px; }
.brand{ display:inline-flex; align-items:center; }
.brand-logo{ height:19.5px; width:auto; }
.brand-logo--dark{ display:none; }
.brand-logo--light{ display:block; }
.site-header.scrolled .brand-logo--light{ display:none; }
.site-header.scrolled .brand-logo--dark{ display:block; }

.nav{ display:flex; gap:.4rem; margin-inline:auto; }
.nav a{
  font-weight:500; font-size:.95rem; color:rgba(255,255,255,.92);
  padding:.5rem .85rem; border-radius:100px; transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--on-blue); background:oklch(1 0 0 / .1); }
.site-header.scrolled .nav a{ color:var(--ink-soft); }
.site-header.scrolled .nav a:hover{ color:var(--blue-700); background:var(--ice); }

.header-cta{ display:flex; align-items:center; gap:.9rem; }
.ghost-phone{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono);
  font-size:.78rem; font-weight:500; letter-spacing:.03em; color:rgba(255,255,255,.92);
  transition:color .2s;
}
.ghost-phone:hover{ color:var(--on-blue); }
.site-header.scrolled .ghost-phone{ color:var(--ink-soft); }
.site-header.scrolled .ghost-phone:hover{ color:var(--blue-700); }

.burger{ display:none; width:46px; height:46px; flex:0 0 46px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:22px; height:2px; background:var(--on-blue); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.site-header.scrolled .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-contact{ display:none; }

.site-header.scrolled{
  background:oklch(0.99 0.004 250 / .82);
  backdrop-filter:blur(14px) saturate(1.4);
  border-color:var(--line);
  box-shadow:0 10px 30px -22px oklch(0.3 0.12 264 / .5);
}

/* ===================== HERO ===================== */
.hero{
  position:relative; height:calc(100svh - var(--hero-m)*2); min-height:580px;
  margin:var(--hero-m); border-radius:var(--hero-r);
  display:flex; align-items:flex-end; color:var(--on-blue); overflow:hidden;
  --hero-m:10px; --hero-r:24px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity 1s var(--ease), transform 6s linear;
}
.hero-img.is-active{ opacity:1; transform:scale(1); }
.hero-veil{
  position:absolute; inset:0;
  /* brand hero: Azul Núcleo wash over photo, anchored dark on the text side for legibility */
  background:
    linear-gradient(180deg, rgba(0,11,41,.62) 0%, rgba(0,36,124,.30) 38%, rgba(0,11,41,.90) 100%),
    linear-gradient(100deg, rgba(0,11,41,.92) 0%, rgba(0,36,124,.58) 46%, rgba(0,75,255,.20) 100%);
}

.hero-inner{ position:relative; z-index:2; padding-block:clamp(2rem,5vw,3.4rem) clamp(3rem,7vw,5rem); width:100%; }
@media (max-width:700px){
  /* tall stacked content: let the hero grow and clear the fixed header */
  .hero{ height:auto; min-height:calc(100svh - var(--hero-m)*2); }
  .hero-inner{ padding-top:calc(74px + clamp(12px, 1.6vw, 22px) + 1.2rem); }
}
.hero-tabsbar{ display:flex; align-items:center; gap:.5rem; margin-bottom:clamp(1.6rem,4vw,2.6rem); }
.hero-tabs{ display:inline-flex; gap:.3rem; padding:.32rem; border-radius:100px; background:oklch(1 0 0 / .1); border:1px solid oklch(1 0 0 / .18); }
.hero-tab{
  position:relative; overflow:hidden;
  font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-blue-dim); padding:.62em 1.15em; border-radius:100px; transition:color .3s, background .3s;
}
.hero-tab:hover{ color:var(--on-blue); }
.hero-tab.is-active{ background:var(--on-blue); color:var(--blue-800); }
/* time left before the next industry: the autorotation announces itself */
.hero-tab-bar{ position:absolute; left:1.15em; right:1.15em; bottom:.3em; height:2px; border-radius:2px; background:currentColor; opacity:0; transform:scaleX(0); transform-origin:left center; }
.hero.is-rotating .hero-tab.is-active .hero-tab-bar{ opacity:.35; animation:heroBar var(--hero-dur, 7s) linear forwards; }
.hero.is-paused .hero-tab.is-active .hero-tab-bar,
.hero.is-hold .hero-tab.is-active .hero-tab-bar,
.hero.is-offscreen .hero-tab.is-active .hero-tab-bar{ animation-play-state:paused; }
@keyframes heroBar{ to{ transform:scaleX(1); } }
.hero-pause{ position:relative; flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--on-blue); background:oklch(1 0 0 / .1); border:1px solid oklch(1 0 0 / .22); transition:background .25s; }
.hero-pause::after{ content:""; position:absolute; inset:-4px; border-radius:50%; }   /* 46px touch target */
.hero-pause:hover{ background:oklch(1 0 0 / .2); }
.hero-pause .i-play, .hero-pause[aria-pressed="true"] .i-pause{ display:none; }
.hero-pause[aria-pressed="true"] .i-play{ display:block; }
@media (max-width:460px){
  .hero-tabsbar{ gap:.4rem; }
  .hero-tabs{ flex:1; min-width:0; }
  .hero-tab{ flex:1; min-height:44px; padding:.5em .5em; font-size:.66rem; letter-spacing:.04em; }
  .hero-tab-bar{ left:.9em; right:.9em; }
}

/* the panels share one grid cell: the stage keeps the height of the tallest,
   so the buttons below never jump when the industry changes */
.hero-stage{ display:grid; }
.hero-panel{ grid-area:1/1; visibility:hidden; opacity:0; transition:opacity .45s var(--ease), visibility 0s linear .45s; }
.hero-panel.is-active{ visibility:visible; opacity:1; transition-delay:0s; }
.hero-panel.is-entering{ animation:rise .6s var(--ease) both; }
.hero-title{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(2.3rem, 5.6vw, 4.5rem); text-wrap:balance; margin-bottom:1.3rem;
}
.hero-lead{ max-width:46ch; font-size:clamp(1.02rem,1.6vw,1.22rem); line-height:1.55; color:var(--on-blue-dim); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-specs{
  display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2.2rem; list-style:none; padding:0;
}
.hero-specs li{
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-blue); padding:.5em 1em; border:1px solid oklch(1 0 0 / .25); border-radius:100px;
}

.hero-scroll{ position:absolute; bottom:1.4rem; left:50%; translate:-50% 0; z-index:3; width:26px; height:42px; border:1.5px solid oklch(1 0 0 / .5); border-radius:100px; display:grid; place-items:start center; padding-top:7px; }
.hero-scroll::after{ content:""; position:absolute; inset:-10px; }  /* 44px+ touch target */
.hero-scroll span{ width:4px; height:8px; border-radius:4px; background:var(--on-blue); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }
@keyframes rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
@media (max-width:700px){ .hero-scroll{ display:none; } }   /* would collide with the spec chips */

/* ===================== STRIP ===================== */
.strip{ background:var(--paper); color:var(--ink); border-block:1px solid var(--line); }
.strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-item{ background:var(--paper); padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem); display:flex; flex-direction:column; gap:.35rem; border-left:1px solid var(--line); }
.strip-item:first-child{ border-left:0; }
.strip-fig{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.5rem); letter-spacing:-.02em; color:var(--profundo); }
.strip-lbl{ font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink); max-width:24ch; }
.strip-sub{ font-size:.82rem; line-height:1.45; color:var(--ink-soft); max-width:28ch; }
@media (max-width:760px){
  .strip-grid{ grid-template-columns:1fr 1fr; }
  .strip-item{ border-top:1px solid var(--line); }
  .strip-item:nth-child(-n+2){ border-top:0; }
  .strip-item:nth-child(odd){ border-left:0; }
}

/* ===================== SPECS (home) =====================
   Datasheet strip: verifiable product facts instead of vanity metrics */
.specs{ background:var(--paper); border-bottom:1px solid var(--line); }
.specs-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.spec{ display:flex; flex-direction:column; gap:.3rem; padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1rem,2vw,1.6rem); border-left:1px solid var(--line); }
.spec:first-child{ border-left:0; }
.spec-lbl{ font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--nucleo); }
.spec-val{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,1.9vw,1.5rem); letter-spacing:-.015em; line-height:1.15; color:var(--profundo); }
.spec-sub{ font-size:.86rem; line-height:1.45; color:var(--ink-soft); max-width:30ch; }
@media (max-width:860px){
  .specs-grid{ grid-template-columns:1fr 1fr; }
  .spec{ border-top:1px solid var(--line); }
  .spec:nth-child(-n+2){ border-top:0; }
  .spec:nth-child(odd){ border-left:0; }
}

/* ===================== HOME FAQ ===================== */
.home-faq{ background:var(--paper); border-top:1px solid var(--line); }
.faq-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.faq-aside{ position:sticky; top:104px; }
.faq-aside .section-title{ margin-bottom:.7rem; }
.faq-aside .section-sub{ margin-bottom:1.9rem; max-width:34ch; }

.faq-list{ display:flex; flex-direction:column; }
.faq-q{ border-top:1px solid var(--line); }
.faq-q:last-child{ border-bottom:1px solid var(--line); }
.faq-q summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:1.35rem 0; font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,1.5vw,1.2rem);
  color:var(--profundo); transition:color .2s;
}
.faq-q summary::-webkit-details-marker{ display:none; }
.faq-q summary::marker{ content:""; }
.faq-q summary:hover{ color:var(--nucleo); }
.faq-ico{ position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--ice); border:1px solid var(--line); transition:background .25s, border-color .25s; }
.faq-ico::before, .faq-ico::after{ content:""; position:absolute; top:50%; left:50%; width:13px; height:2px; border-radius:2px; background:var(--nucleo); transform:translate(-50%,-50%); transition:opacity .3s var(--ease), background .25s; }
.faq-ico::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-q[open] .faq-ico{ background:var(--nucleo); border-color:var(--nucleo); }
.faq-q[open] .faq-ico::before, .faq-q[open] .faq-ico::after{ background:var(--on-blue); }
.faq-q[open] .faq-ico::after{ opacity:0; }        /* + becomes − */
.faq-a{ padding:0 0 1.5rem; max-width:62ch; color:var(--ink-soft); line-height:1.62; animation:faqReveal .34s var(--ease); }
@media (prefers-reduced-motion: reduce){ .faq-a{ animation:none; } }
.faq-a p{ margin:0 0 .6rem; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-a ul{ margin:.5rem 0 0; padding-left:1.15rem; display:grid; gap:.35rem; }
.faq-a li::marker{ color:var(--nucleo); }
@keyframes faqReveal{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
@media (max-width:820px){
  .faq-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .faq-aside{ position:static; }
}

/* ===================== PRESENTACIONES: ESCALA =====================
   One ruler from 9.46 L to 130,000 L: every presentation stands on it,
   growing with its capacity. Replaces six identical cards. */
.escala{ background:var(--paper); }
.escala-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,4vw,4rem); align-items:end; }
.escala-head .section-sub{ margin-top:0; }
.section-sub a{ color:var(--nucleo); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.scale{ --fig-h:clamp(180px, 20vw, 250px); list-style:none; padding:0; position:relative; display:grid; grid-template-columns:repeat(5,1fr) 1.45fr; }
.scale::before{ content:""; position:absolute; left:0; right:0; top:var(--fig-h); height:2px; border-radius:2px; background:var(--profundo); }
.scale-step a{ display:flex; flex-direction:column; height:100%; padding-inline:clamp(.3rem,.9vw,.8rem); border-radius:var(--r); }
.scale-fig{ height:var(--fig-h); display:flex; align-items:flex-end; justify-content:center; }
.scale-fig img{ height:calc(var(--s) * 100%); width:auto; max-width:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 14px 16px rgba(0,36,124,.18)); transition:transform .5s var(--ease); }
.scale-tick{ position:relative; height:1.1rem; }
.scale-tick::before{ content:""; position:absolute; left:50%; top:-5px; width:2px; height:12px; border-radius:2px; translate:-50% 0; background:var(--profundo); transition:background .25s; }
.scale-text{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem; }
.scale-cap{ font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--nucleo); }
.scale-name{ font-family:var(--display); font-weight:700; font-size:clamp(1.02rem,1.4vw,1.18rem); letter-spacing:-.01em; color:var(--ink); transition:color .25s; }
.scale-range{ margin-top:.45rem; font-size:.8rem; font-weight:600; line-height:1.3; color:var(--profundo); background:var(--ice); border:1px solid var(--line); border-radius:100px; padding:.3em .75em; text-wrap:balance; }
.scale-use{ margin-top:.5rem; font-size:.86rem; line-height:1.42; color:var(--ink-soft); max-width:19ch; }
.scale-step a:hover .scale-fig img, .scale-step a:focus-visible .scale-fig img{ transform:translateY(-6px); }
.scale-step a:hover .scale-name{ color:var(--nucleo); }
.scale-step a:hover .scale-tick::before{ background:var(--nucleo); }
@media (max-width:820px){
  .escala-head{ grid-template-columns:1fr; align-items:start; }
  .scale{ grid-template-columns:1fr; border-top:1px solid var(--line); }
  .scale::before{ display:none; }
  .scale-step{ border-bottom:1px solid var(--line); }
  .scale-step a{ flex-direction:row; align-items:center; gap:1rem; padding:.9rem 0; }
  .scale-fig{ flex:none; width:84px; height:84px; justify-content:center; }
  .scale-fig img{ height:calc((.42 + .58 * var(--s)) * 100%); }
  .scale-tick{ display:none; }
  .scale-text{ align-items:flex-start; text-align:left; display:grid; grid-template-columns:auto 1fr; column-gap:.6rem; row-gap:.1rem; }
  .scale-cap{ grid-column:1; align-self:baseline; }
  .scale-name{ grid-column:2; align-self:baseline; }
  .scale-range{ grid-column:1/-1; justify-self:start; margin-top:.35rem; }
  .scale-use{ grid-column:1/-1; max-width:none; margin-top:.35rem; }
}

/* ===================== POR QUE ===================== */
.por-que{ background:var(--ice); }
.por-grid{ display:grid; grid-template-columns:.94fr 1.06fr; gap:clamp(1.8rem,4vw,4.5rem); }
.por-lead{ position:sticky; top:100px; align-self:start; }
.por-lead .btn{ margin-top:1.8rem; }
.por-points{ list-style:none; padding:0; display:flex; flex-direction:column; border-top:1px solid oklch(0.30 0.12 264 / .14); }
.por-points li{ display:grid; grid-template-columns:2.6rem 1fr; column-gap:1rem; align-items:baseline; padding:1.5rem 0 1.6rem; border-bottom:1px solid oklch(0.30 0.12 264 / .14); }
.por-num{ font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--blue-600); letter-spacing:.02em; }
.por-points h3{ grid-column:2; font-family:var(--display); font-weight:600; font-size:1.15rem; margin:0 0 .35rem; letter-spacing:-.01em; }
.por-points p{ grid-column:2; color:var(--ink-soft); font-size:.97rem; max-width:52ch; }
@media (max-width:880px){ .por-grid{ grid-template-columns:1fr; } .por-lead{ position:static; } }

/* ===================== ESCENARIOS =====================
   Worked examples with the calculator's own rule: proof by arithmetic */
.escenarios{ background:var(--paper); }
.esc-list{ border-top:1px solid var(--line); }
.esc-row{ display:grid; grid-template-columns:1.1fr 1fr 1.3fr auto; gap:clamp(1rem,3vw,2.4rem); align-items:center; padding:clamp(1.3rem,2.4vw,1.75rem) 0; border-bottom:1px solid var(--line); }
.esc-op h3{ font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink); }
.esc-in{ font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft); margin-top:.3rem; }
.esc-lbl{ display:block; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.esc-fig{ display:block; margin-top:.15rem; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.3vw,1.7rem); letter-spacing:-.015em; color:var(--profundo); }
.esc-fig small{ font-size:.58em; font-weight:600; letter-spacing:0; color:var(--ink-soft); white-space:nowrap; }
.esc-rec{ display:flex; align-items:center; gap:.9rem; }
.esc-rec img{ flex:none; width:46px; height:auto; filter:drop-shadow(0 8px 10px rgba(0,36,124,.18)); }
.esc-rec strong{ display:block; font-weight:700; color:var(--ink); line-height:1.3; }
.esc-freq{ display:block; font-size:.88rem; color:var(--ink-soft); }
.esc-go{ font-family:var(--mono); font-size:.76rem; font-weight:600; color:var(--nucleo); white-space:nowrap; padding-block:.7rem; }
.esc-go:hover{ text-decoration:underline; text-underline-offset:3px; }
.esc-foot{ margin-top:1rem; max-width:72ch; font-size:.86rem; color:var(--ink-faint); }
@media (max-width:960px){ .esc-row{ grid-template-columns:1fr 1fr; } .esc-go{ grid-column:1/-1; padding-block:.2rem; } }
@media (max-width:560px){ .esc-row{ grid-template-columns:1fr; gap:.85rem; } }

.esc-trust{ margin-top:clamp(2.6rem,5vw,3.6rem); padding-top:1.2rem; border-top:2px solid var(--profundo); max-width:34ch; font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.3; letter-spacing:-.015em; color:var(--profundo); }
.voices{ margin-top:clamp(3rem,6vw,4.6rem); }
.voices-head{ font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--profundo); margin-bottom:1.4rem; }
.voices-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.4rem); }
.voice{ display:flex; flex-direction:column; gap:1rem; border-top:2px solid var(--profundo); padding-top:1.2rem; }
.voice blockquote{ font-family:var(--display); font-weight:500; font-size:1.08rem; line-height:1.45; letter-spacing:-.005em; color:var(--ink); }
.voice figcaption strong{ display:block; font-weight:600; color:var(--ink); }
.voice figcaption span{ font-size:.86rem; color:var(--ink-soft); }
.voices-more{ display:inline-block; margin-top:1.8rem; font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--nucleo); }
.voices-more:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:820px){ .voices-grid{ grid-template-columns:1fr; } }

/* ===================== RESPALDO PARA COMPRAS ===================== */
.respaldo{ background:var(--ice); }
.resp-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.resp-head{ position:sticky; top:110px; }
.resp-head .btn{ margin-top:1.8rem; }
.resp-list{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(1.5rem,3vw,2.6rem); margin:0; }
.resp-item{ border-top:1px solid oklch(0.30 0.12 264 / .14); padding:1.3rem 0 1.6rem; }
.resp-item dt{ font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--nucleo); margin-bottom:.45rem; }
.resp-item dd{ margin:0; color:var(--ink); font-size:.98rem; line-height:1.55; }
@media (max-width:880px){ .resp-grid{ grid-template-columns:1fr; } .resp-head{ position:static; } }
@media (max-width:560px){ .resp-list{ grid-template-columns:1fr; } }

/* ===================== CONOCIMIENTO ===================== */
.conocimiento{ background:var(--paper); }
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.art{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.art:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--blue-300); }
.art-fig{ aspect-ratio:16/10; overflow:hidden; background:var(--ice); border-bottom:1px solid var(--line); }
.art-fig img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.art:hover .art-fig img{ transform:scale(1.05); }
.art-tag{ font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-700); margin:1.3rem 1.5rem .7rem; }
.art h3{ font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1.22; letter-spacing:-.01em; color:var(--ink); padding-inline:1.5rem; }
.art-go{ font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--blue-700); margin-top:auto; padding:1.2rem 1.5rem 1.4rem; transition:color .25s, text-underline-offset .25s; }
.art:hover .art-go{ color:var(--potencia); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:820px){ .art-grid{ grid-template-columns:1fr; } }
.section-more{ margin-top:2.4rem; }

/* ===================== CTA + FORM =====================
   Capsule: rounded deep-blue card on white, mirroring the hero.
   Shared by the home CTA and the interior .cta-band. */
.cta{ background:var(--paper); }
.cta-card{
  position:relative; overflow:hidden; margin:10px; border-radius:24px;
  background:linear-gradient(150deg, var(--escudo) 0%, var(--profundo) 52%, var(--nucleo) 145%);
  color:var(--on-blue);
}
.cta-card::before{ content:""; position:absolute; left:-12%; top:-18%; width:min(60%, 760px); aspect-ratio:1; background:radial-gradient(closest-side, rgba(0,75,255,.34), transparent); pointer-events:none; }   /* square box + closest-side: fades out before any edge */
.cta-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(3.2rem,6.5vw,5.5rem); }
.cta-title{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.2rem,5vw,3.6rem); }
.cta-lead{ margin-top:1.1rem; max-width:42ch; color:var(--on-blue-dim); font-size:1.08rem; }
.cta-steps{ list-style:none; counter-reset:step; padding:0; margin-top:1.6rem; display:grid; gap:.55rem; max-width:44ch; }
.cta-steps li{ counter-increment:step; display:grid; grid-template-columns:1.9rem 1fr; align-items:baseline; color:var(--on-blue-dim); font-size:.98rem; line-height:1.45; }
.cta-steps li::before{ content:counter(step, decimal-leading-zero); font-family:var(--mono); font-size:.74rem; font-weight:600; color:var(--sky); }
.cta-call{ margin-top:2rem; display:flex; flex-direction:column; gap:.2rem; }
.cta-call a + .cta-call-lbl{ margin-top:1.1rem; }
.cta-call-lbl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-300); }
.cta-call a{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em; }

.form{ background:oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .16); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.3rem); display:grid; gap:1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.95rem; }
.form label{ display:flex; flex-direction:column; gap:.4rem; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--on-blue-dim); }
.form input,.form select,.form textarea{
  font-family:var(--body); font-size:1rem; letter-spacing:0; text-transform:none; font-weight:400;
  color:var(--on-blue); background:oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .2);
  border-radius:var(--r); padding:.8em .95em; transition:border-color .25s, background .25s;
}
.form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right .95em center;
  padding-right:2.6em;
}
.form input::placeholder,.form textarea::placeholder{ color:oklch(1 0 0 / .4); }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--blue-300); background:oklch(1 0 0 / .12); }
.form select option{ color:var(--ink); }
.form textarea{ resize:vertical; }
.form-note{ font-family:var(--body); text-transform:none; letter-spacing:0; font-size:.95rem; padding:.7rem 1rem; border-radius:var(--r); background:oklch(0.70 0.15 252 / .2); color:var(--on-blue); }
.form-note a{ color:var(--on-blue); text-decoration:underline; text-underline-offset:3px; font-weight:600; }

/* --- consumption calculator --- */
.calc-seg{ border:0; padding:0; margin:0; }
.calc-seg legend{
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-blue-dim); margin-bottom:.45rem;
}
.calc-seg{ display:flex; gap:.4rem; flex-wrap:wrap; }
.calc-seg label{ position:relative; }
.calc-seg input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.calc-seg span{
  display:inline-flex; align-items:center; min-height:34px; padding:.35em .85em; border-radius:100px;
  border:1px solid oklch(1 0 0 / .25); color:var(--on-blue-dim); font-size:.74rem; font-weight:500;
  cursor:pointer; transition:background .25s, color .25s, border-color .25s;
}
@media (pointer:coarse){ .calc-seg span{ min-height:44px; } }   /* touch targets on phones */
.calc-seg label:hover span{ border-color:oklch(1 0 0 / .5); color:var(--on-blue); }
.calc-seg input:checked + span{ background:var(--on-blue); color:var(--blue-800); border-color:transparent; font-weight:600; }
.calc-seg input:focus-visible + span{ outline:2px solid var(--sky); outline-offset:2px; }

/* mode switch: by fleet or by known liters (industry, ports) */
.calc-mode{ border:0; padding:.25rem; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.25rem; border-radius:100px; background:oklch(0 0 0 / .18); border:1px solid oklch(1 0 0 / .14); }
.calc-mode label{ position:relative; display:block; }
.calc-mode input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.calc-mode span{ display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:100px; font-family:var(--body); font-size:.9rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--on-blue-dim); cursor:pointer; transition:background .25s, color .25s; }
.calc-mode input:checked + span{ background:var(--on-blue); color:var(--blue-800); }
.calc-mode input:focus-visible + span{ outline:2px solid var(--sky); outline-offset:2px; }
@media (pointer:coarse){ .calc-mode span{ min-height:44px; } }
.calc-pane{ display:grid; gap:1rem; }
.calc-pane[hidden]{ display:none; }
.calc-field em{ font-style:normal; text-transform:none; letter-spacing:0; font-family:var(--body); opacity:.8; }

.calc-result{
  display:flex; flex-direction:column; gap:1rem;
  padding:1.15rem 1.25rem; border-radius:var(--r);
  background:oklch(1 0 0 / .10); border:1px solid oklch(1 0 0 / .22);
}
.calc-lbl{ display:block; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--on-blue-dim); }
.calc-fig{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.45rem,2.4vw,1.9rem); letter-spacing:-.01em; color:var(--on-blue); margin:.2rem 0 .1rem; }
.calc-unit{ white-space:nowrap; }
.calc-note{ display:block; font-family:var(--body); font-size:.84rem; letter-spacing:0; text-transform:none; color:var(--on-blue-dim); }
.calc-pres{
  display:flex; align-items:center; gap:.85rem; width:100%; padding:.7rem 1rem; border-radius:var(--r);
  background:oklch(1 0 0 / .08); border:1px solid oklch(1 0 0 / .18);
  transition:background .25s, border-color .25s;
}
.calc-pres::after{ content:"→"; margin-left:auto; font-size:1.05rem; color:var(--on-blue-dim); transition:transform .25s var(--ease), color .25s; }
.calc-pres:hover{ background:oklch(1 0 0 / .16); border-color:oklch(1 0 0 / .35); }
.calc-pres:hover::after{ transform:translateX(3px); color:var(--on-blue); }
.calc-pres img{ width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,11,41,.4)); }
.calc-pres em{ display:block; font-style:normal; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-blue-dim); }
.calc-pres strong{ font-family:var(--body); font-weight:600; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--on-blue); }

.form-alt{ text-align:center; font-family:var(--body); font-size:.88rem; letter-spacing:0; text-transform:none; color:var(--on-blue-dim); margin:0; }
.form-alt a{ color:var(--on-blue); text-decoration:underline; text-underline-offset:3px; font-weight:600; }

/* --- draggable sliders --- */
.calc-send svg{ flex:none; }
.range-field{ display:flex; flex-direction:column; }
.range-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.range-head label{ font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--on-blue-dim); }
.form .range-num{
  width:6.6em; padding:.35em .6em; text-align:right; font-family:var(--display); font-weight:700; font-size:1.02rem;
  color:var(--on-blue); background:oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .2); border-radius:10px;
  -moz-appearance:textfield; appearance:textfield;
}
.form .range-num::-webkit-outer-spin-button, .form .range-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.form input[type="range"]{
  appearance:none; -webkit-appearance:none; width:100%; height:28px; border-radius:100px;
  background:transparent; border:0; padding:0; cursor:pointer; margin-block:.35rem 0;
}
/* the track lives on its own layer so the 28px box stays an easy touch target */
.form input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:100px; background:var(--track, oklch(1 0 0 / .22)); }
.form input[type="range"]::-moz-range-track{ height:6px; border-radius:100px; background:var(--track, oklch(1 0 0 / .22)); }
.form input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; margin-top:-10px;
  background:#fff; border:7px solid var(--nucleo);
  box-shadow:0 4px 14px rgba(0,11,41,.45); cursor:grab; transition:transform .15s var(--ease);
}
.form input[type="range"]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.12); }
.form input[type="range"]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:#fff; border:7px solid var(--nucleo);
  box-shadow:0 4px 14px rgba(0,11,41,.45); cursor:grab;
}
.form input[type="range"]:focus{ outline:none; }
.form input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--sky); outline-offset:3px; }
.form input[type="range"]:focus-visible::-moz-range-thumb{ outline:2px solid var(--sky); outline-offset:3px; }
@media (max-width:880px){ .cta-grid{ grid-template-columns:1fr; } }
@media (max-width:480px){ .form-row{ grid-template-columns:1fr; } }

/* ===================== FOOTER ===================== */
/* reveal footer: anclado al fondo del viewport; el contenido se desliza encima */
.site-footer{
  position:fixed; inset:auto 0 0 0; z-index:0;
  background:var(--paper); color:var(--ink-soft); padding-top:clamp(3.5rem,6vw,5rem);
}
main{ position:relative; z-index:1; background:var(--paper); margin-bottom:var(--foot-h, 0px); }
.site-footer:focus-within{ z-index:2; }            /* teclado: el foco nunca queda tapado */
/* fallback: footer más alto que el viewport (o sin JS) vuelve al flujo normal */
.foot-static .site-footer{ position:static; }
.foot-static main{ margin-bottom:0; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,3.5rem); }
.foot-logo{ height:30px; width:auto; max-width:100%; margin-bottom:1.1rem; }
.foot-brand p{ max-width:34ch; font-size:.95rem; }
.foot-h{ font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--profundo); margin-bottom:1.1rem; }
.foot-col{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.foot-col a{ color:var(--ink); transition:color .2s; }
.foot-col a:hover{ color:var(--nucleo); }
.foot-col .btn{ margin-top:.4rem; }
.foot-muted{ font-size:.88rem; color:var(--ink-faint); }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-block:1.6rem; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-faint); }
.foot-legal{ display:flex; gap:1.4rem; }
.foot-legal a{ color:var(--ink-faint); transition:color .2s; }
.foot-legal a:hover{ color:var(--nucleo); }
.foot-col a, .foot-legal a{ padding-block:.2rem; }
@media (max-width:760px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1/-1; }
}
@media (max-width:400px){ .foot-grid{ grid-template-columns:1fr; } }

/* ===================== MOBILE NAV ===================== */
@media (max-width:980px){
  .nav,.header-cta .ghost-phone{ display:none; }
  .burger{ display:flex; order:3; }
  .header-cta{ margin-left:auto; order:2; }
  .nav.open{
    display:flex; flex-direction:column; position:fixed; inset:calc(74px + clamp(12px, 1.6vw, 22px)) 0 auto 0; gap:.2rem;
    max-height:calc(100svh - 96px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--paper); padding:1rem var(--gutter) 1.6rem;
    border-block:1px solid var(--line); box-shadow:var(--shadow);
  }
  .nav.open a{ color:var(--ink); font-size:1.05rem; padding:.75rem .4rem; }
  .nav.open .nav-contact{ display:flex; flex-direction:column; margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--line); }
  .nav.open .nav-contact a{ color:var(--nucleo); font-weight:600; font-size:1rem; }
}

/* ===================== REVEAL ===================== */
[data-reveal]{ opacity:0; transform:translateY(22px); }
.reveal-in [data-reveal], [data-reveal].reveal-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal][style*="--d"]{ transition-delay:var(--d); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero-img,.hero-panel{ transition:none; animation:none; }
  .hero-scroll span{ animation:none; }
  .btn:hover, .scale-step a:hover .scale-fig img{ transform:none; }
}

/* ===================== SKIP LINK ===================== */
.skip-link{
  position:fixed; top:14px; left:14px; z-index:200;
  background:var(--nucleo); color:#fff; padding:.8em 1.3em; border-radius:100px;
  font-weight:600; transform:translateY(-300%); transition:transform .3s var(--ease);
}
.skip-link:focus-visible{ transform:none; }

/* ===================== FOCUS SYSTEM (keyboard) =====================
   Last in file on purpose: wins the cascade over earlier rules. */
:focus-visible{ outline:2px solid var(--nucleo); outline-offset:2px; }
.hero :focus-visible, .cta :focus-visible, .cta-band :focus-visible,
.site-header:not(.scrolled) :focus-visible{ outline-color:var(--sky); }
.subpage .site-header :focus-visible,
.site-header.scrolled :focus-visible{ outline-color:var(--nucleo); }
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }