/* ============================================================
   TVE — ThermoValue Energy · Landing v5
   Sistema de diseño Bianna
   Esquinas rectas · filetes de 1 px · negro + blanco roto + un rojo
   ============================================================ */

/* ---------- 1. FUENTES ---------- */
/* Solo los 7 pesos que la página usa realmente. Se retiraron Duplet Open 300 y 800 y
   Geist 700: no los reclama ninguna regla, verificado en ES y EN con el configurador,
   las pestañas y el lightbox abiertos. Si algún día se necesitan, los .woff2 siguen en fonts/. */
@font-face { font-family:"Duplet Open"; src:url("./fonts/DupletOpen-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Duplet Open"; src:url("./fonts/DupletOpen-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Duplet Open"; src:url("./fonts/DupletOpen-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("./fonts/Geist-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("./fonts/Geist-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("./fonts/Geist-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("./fonts/Geist-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- 2. TOKENS ---------- */
:root {
  --bn-primary: rgb(16,18,24);
  --bn-accent: rgb(225,37,27);
  --bn-accent-hover: rgb(184,28,20);
  --bn-accent-light: rgb(255,90,78);
  --bn-bg: rgb(247,247,248);
  --bn-bg-alt: rgb(255,255,255);
  --bn-bg-dark: rgb(16,18,24);
  --bn-bg-black: rgb(0,0,0);
  --bn-border: rgb(223,224,226);
  --bn-border-strong: rgb(191,191,191);
  --bn-border-dark: rgb(55,58,67);
  --bn-text-default: rgb(16,18,24);
  --bn-text-dark: rgb(55,58,67);
  --bn-text-muted: rgb(106,109,118);
  --bn-text-light: rgb(255,255,255);

  --bn-font-display: "Duplet Open", system-ui, sans-serif;
  --bn-font-body: "Geist", system-ui, sans-serif;

  --bn-max-w: 1392px;
  --bn-pad: 24px;
  --bn-nav-h: 69px;

  --bn-ease: cubic-bezier(0.22,0.61,0.36,1);
  --bn-ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --bn-dur-fast: 160ms;
  --bn-dur: 240ms;
  --bn-dur-slow: 480ms;
}

/* ---------- 3. RESET ---------- */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--bn-nav-h) + 16px); }
body {
  font-family:var(--bn-font-body);
  font-weight:300;
  color:var(--bn-text-default);
  background:var(--bn-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 { font-family:var(--bn-font-display); font-weight:400; line-height:1.05; letter-spacing:-0.01em; }
img { display:block; max-width:100%; }
button { font-family:inherit; }
table { border-collapse:collapse; }
::selection { background:var(--bn-accent); color:#fff; }

:focus-visible { outline:2px solid var(--bn-accent); outline-offset:2px; }
.sectors :focus-visible, .presc :focus-visible, .contact :focus-visible, .footer :focus-visible { outline-color:var(--bn-accent-light); }

.skip-link {
  position:absolute; top:-100px; left:var(--bn-pad); z-index:500;
  background:var(--bn-primary); color:#fff; padding:14px 20px;
  font-family:var(--bn-font-body); font-size:14px; text-decoration:none;
}
.skip-link:focus { top:12px; }

/* Solo para lectores de pantalla: anuncios que no deben ocupar espacio visual. */
.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;
}
/* El panel de resultados recibe el foco al generarse; no debe dibujar un anillo por ello. */
.config-results:focus { outline:none; }

/* ---------- 4. PRIMITIVAS DE LAYOUT ---------- */
.wrap { max-width:var(--bn-max-w); margin:0 auto; padding:0 var(--bn-pad); }
section { padding:104px 0; position:relative; }
.eyebrow {
  font-family:var(--bn-font-body); font-weight:600; font-size:12px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--bn-accent);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before { content:""; width:26px; height:1px; background:var(--bn-accent); display:inline-block; }
.eyebrow.on-dark { color:var(--bn-accent-light); }
.sec-title { font-size:clamp(32px,4vw,54px); line-height:1.0; letter-spacing:-0.02em; color:var(--bn-text-default); max-width:20ch; }
.sec-sub { font-size:clamp(16px,1.3vw,19px); font-weight:300; color:var(--bn-text-dark); max-width:62ch; line-height:1.55; margin-top:22px; }
.sec-title.on-dark { color:#fff; }
.sec-sub.on-dark { color:rgba(255,255,255,0.62); }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap; }

/* nota metodológica */
.note {
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--bn-border); background:var(--bn-bg-alt);
  padding:18px 20px; margin-top:28px;
  font-family:var(--bn-font-body); font-weight:300; font-size:13px;
  color:var(--bn-text-dark); line-height:1.55;
}
.note i { color:var(--bn-accent); font-size:17px; flex-shrink:0; margin-top:1px; }
.note strong { font-weight:600; }


/* ---------- V5 · FIGURAS DEL FLUJO DE 3 FASES ---------- */
/* Ilustraciones esquemáticas en línea, heredan el color del bloque (claro u oscuro).
   Para sustituirlas por fotografía real basta cambiar el contenido de <figure class="pcard-fig">
   por un <img> con las mismas proporciones (320×150). */
.pcard-fig { margin:0 0 20px; border:1px solid var(--bn-border); background:var(--bn-bg); aspect-ratio:320/150; overflow:hidden; color:var(--bn-text-dark); }
.pcard-fig svg, .pcard-fig img { display:block; width:100%; height:100%; object-fit:cover; }
.pcard-fig .acc { stroke:var(--bn-accent); }
.flow-band.input .pcard-fig, .flow-band.output .pcard-fig { border-color:var(--bn-border-dark); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.78); }
.flow-band.input .pcard-fig .acc, .flow-band.output .pcard-fig .acc { stroke:var(--bn-accent-light); }
.flow-step.lit .pcard-fig { border-color:var(--bn-accent); }
.pcard-desc { font-family:var(--bn-font-body); font-weight:300; font-size:13.5px; line-height:1.5; color:var(--bn-text-muted); margin:-6px 0 16px; }

/* ---------- V5 · VÍAS: «dónde encaja mejor» sustituye a la lista de contras ---------- */
.via-list.fit li { color:rgba(255,255,255,0.72); }
.via-list.fit li i { color:rgba(255,255,255,0.7); }

/* ---------- V5 · CONTACTO: llamada a la página de contacto de bianna.com ---------- */
.contact-cta { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; gap:18px; background:rgba(255,255,255,0.03); }
.contact-cta .ccta-ico { width:48px; height:48px; border:1px solid var(--bn-accent); color:var(--bn-accent-light); display:flex; align-items:center; justify-content:center; font-size:22px; }
.contact-cta h3 { font-family:var(--bn-font-display); font-weight:600; font-size:clamp(22px,2.2vw,28px); color:#fff; letter-spacing:-0.02em; line-height:1.1; }
.contact-cta p { font-family:var(--bn-font-body); font-weight:300; font-size:15px; color:rgba(255,255,255,0.72); line-height:1.55; }
.contact-cta .form-submit { margin-top:6px; align-self:flex-start; padding:17px 28px; }
.contact-cta .ccta-note { font-size:12.5px; color:rgba(255,255,255,0.5); }
.note a { color:var(--bn-accent-hover); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.note a:hover { color:var(--bn-accent); }

/* ---------- 5. BOTONES ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--bn-font-body); font-weight:500; font-size:15px;
  padding:16px 26px; border:1px solid transparent; border-radius:0;
  min-height:48px; text-decoration:none;
  transition:background var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease);
  letter-spacing:0.01em; white-space:nowrap;
}
.btn i { font-size:18px; transition:transform var(--bn-dur) var(--bn-ease); }
.btn-red { background:var(--bn-accent); color:#fff; }
.btn-red:hover { background:var(--bn-accent-hover); }
.btn-red:hover i { transform:translateX(4px); }
.btn-ghost { background:transparent; color:var(--bn-text-default); border-color:var(--bn-border-strong); }
.btn-ghost:hover { border-color:var(--bn-text-default); }

/* ---------- 6. SCROLL REVEAL ---------- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s var(--bn-ease), transform 0.7s var(--bn-ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"] { transition-delay:0.08s; }
.reveal[data-d="2"] { transition-delay:0.16s; }

/* ---------- 7. NAV ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--bn-nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--bn-pad); background:var(--bn-bg);
  border-bottom:1px solid var(--bn-border);
}
.nav-left { display:flex; align-items:center; gap:16px; }
.nav-logo { display:flex; align-items:center; }
.bianna-logo { height:26px; width:auto; display:block; }
.nav-div { width:1px; height:26px; background:var(--bn-border-strong); }
.nav-sub { font-family:var(--bn-font-body); font-weight:500; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bn-accent); white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-family:var(--bn-font-body); font-weight:400; font-size:14px; color:var(--bn-text-dark); text-decoration:none; transition:color var(--bn-dur) var(--bn-ease); position:relative; padding:6px 0; }
.nav-links a:hover { color:var(--bn-accent); }
.nav-links a[aria-current] { color:var(--bn-text-default); }
.nav-links a[aria-current]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bn-accent); }
.nav-right { display:flex; align-items:center; gap:14px; }
.lang-toggle { display:flex; border:1px solid var(--bn-border-strong); }
.lang-toggle a, .lang-toggle button { background:transparent; border:none; cursor:pointer; font-family:var(--bn-font-body); font-weight:500; font-size:12px; letter-spacing:0.08em; padding:9px 12px; color:var(--bn-text-muted); transition:background var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease); }
.lang-toggle a { text-decoration:none; display:inline-flex; align-items:center; }
.lang-toggle a.active, .lang-toggle button.active { background:var(--bn-primary); color:#fff; }
.nav-cta { text-decoration:none; display:inline-flex; align-items:center; background:var(--bn-primary); color:#fff; border:none; cursor:pointer; font-family:var(--bn-font-body); font-weight:500; font-size:14px; padding:13px 22px; min-height:44px; transition:background var(--bn-dur) var(--bn-ease); }
.nav-cta:hover { background:#000; }
.nav-burger { display:none; background:none; border:1px solid var(--bn-border-strong); cursor:pointer; font-size:22px; color:var(--bn-text-default); width:44px; height:44px; align-items:center; justify-content:center; }
.scroll-progress { position:fixed; top:var(--bn-nav-h); left:0; height:2px; width:100%; background:var(--bn-accent); z-index:201; transform:scaleX(0); transform-origin:0 50%; will-change:transform; transition:transform 90ms linear; }

/* ---------- 8. HERO ---------- */
.hero { padding-top:var(--bn-nav-h); background:var(--bn-bg); }
.hero-split {
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  min-height:calc(100svh - var(--bn-nav-h)); border-bottom:1px solid var(--bn-border);
}
.hero-copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:72px 56px 72px calc(max(var(--bn-pad), (100vw - var(--bn-max-w)) / 2 + var(--bn-pad)));
}
.hero-media { position:relative; border-left:1px solid var(--bn-border); background:rgb(236,237,238); overflow:hidden; }
.hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 50%; opacity:0; transform:scale(1.05); transition:opacity 1.1s var(--bn-ease), transform 9s linear; }
.hero-media img.loaded { opacity:1; transform:scale(1); }
.hero-media figcaption {
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--bn-primary); color:rgba(255,255,255,0.72);
  font-family:var(--bn-font-body); font-weight:400; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; padding:10px 16px;
}
.hero-eyebrow { font-family:var(--bn-font-body); font-weight:500; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bn-accent); display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.hero-eyebrow::before { content:""; width:34px; height:1px; background:var(--bn-accent); }
.hero h1 { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(40px,5.2vw,76px); line-height:0.96; letter-spacing:-0.03em; color:var(--bn-primary); }
.hero h1 em { font-style:normal; color:var(--bn-accent); }
.hero-sub { font-family:var(--bn-font-body); font-weight:300; font-size:clamp(16px,1.4vw,20px); color:var(--bn-text-dark); max-width:50ch; line-height:1.55; margin-top:28px; }
.hero-claim { display:block; margin-top:16px; font-weight:600; color:var(--bn-accent); letter-spacing:-0.01em; font-size:clamp(16px,1.4vw,20px); }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--bn-border); }
.hero-stat { padding:30px 32px; border-right:1px solid var(--bn-border); }
.hero-stat:first-child { padding-left:0; }
.hero-stat:last-child { border-right:none; }
.hero-stat .v { font-family:var(--bn-font-display); font-weight:600; font-size:clamp(28px,3vw,42px); color:var(--bn-primary); line-height:1; letter-spacing:-0.02em; }
.hero-stat .v span { color:var(--bn-accent); }
.hero-stat .l { font-family:var(--bn-font-body); font-weight:400; font-size:13px; color:var(--bn-text-muted); margin-top:10px; letter-spacing:0.02em; }

/* ---------- 9. MARQUEE ---------- */
.marquee { background:var(--bn-bg); border-bottom:1px solid var(--bn-border); overflow:hidden; }
.marquee-track { display:flex; white-space:nowrap; will-change:transform; animation:scroll-left 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(44px,7vw,104px); line-height:1; letter-spacing:-0.03em; padding:26px 0; color:var(--bn-text-default); }
.marquee-track span .ghost { color:var(--bn-border-dark); }
.marquee-track span .dot { color:var(--bn-accent); margin:0 0.35em; }
@keyframes scroll-left { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- 10. VALOR ECONÓMICO ---------- */
.value { background:var(--bn-bg-alt); }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:54px; border-top:1px solid var(--bn-border); border-left:1px solid var(--bn-border); }
.vcard { border-right:1px solid var(--bn-border); border-bottom:1px solid var(--bn-border); padding:40px 34px; display:flex; flex-direction:column; gap:16px; transition:background var(--bn-dur) var(--bn-ease); }
.vcard:hover { background:var(--bn-bg); }
.vcard .vnum { font-family:var(--bn-font-display); font-weight:700; font-size:15px; color:var(--bn-accent); letter-spacing:0.06em; }
.vcard h3 { font-family:var(--bn-font-display); font-weight:600; font-size:clamp(21px,1.9vw,26px); color:var(--bn-text-default); letter-spacing:-0.01em; line-height:1.12; }
.vcard p { font-family:var(--bn-font-body); font-weight:300; font-size:15px; color:var(--bn-text-dark); line-height:1.6; }
.value-env { margin-top:0; border:1px solid var(--bn-border); border-top:none; background:var(--bn-primary); padding:40px 34px; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:40px; align-items:center; }
.value-env h3 { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(22px,2.2vw,30px); color:#fff; letter-spacing:-0.02em; line-height:1.12; }
.value-env h3 em { font-style:normal; color:var(--bn-accent-light); }
.value-env ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.value-env li { font-family:var(--bn-font-body); font-weight:300; font-size:15px; color:rgba(255,255,255,0.72); line-height:1.5; display:flex; gap:12px; }
.value-env li i { color:var(--bn-accent-light); font-size:18px; flex-shrink:0; margin-top:1px; }

/* ---------- 11. TECNOLOGÍA · FLUJO DE 3 FASES ---------- */
.tech { background:var(--bn-bg); }
.flow-controls { display:flex; align-items:center; gap:14px; }
.flow-btn { display:inline-flex; align-items:center; gap:9px; background:var(--bn-primary); color:#fff; border:none; cursor:pointer; font-family:var(--bn-font-body); font-weight:500; font-size:14px; padding:14px 20px; min-height:46px; transition:background var(--bn-dur) var(--bn-ease); }
.flow-btn:hover { background:#000; }
.flow-btn i { font-size:18px; }
.flow-status { font-family:var(--bn-font-body); font-size:13px; color:var(--bn-text-muted); min-width:120px; text-align:right; }

.flow { margin-top:46px; display:flex; flex-direction:column; }
.flow-band-label { display:flex; align-items:center; gap:12px; font-family:var(--bn-font-body); font-weight:600; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bn-text-muted); margin:0 0 14px; }
.flow-band-label .n { color:var(--bn-accent); }

.flow-connector { display:flex; align-items:center; justify-content:center; gap:14px; padding:22px 0; }
.flow-connector .line { flex:1; height:1px; background:var(--bn-border); position:relative; overflow:hidden; }
.flow-connector .line::after { content:""; position:absolute; left:-40%; top:0; height:100%; width:40%; background:var(--bn-accent); opacity:0; }
.flow-connector.flowing .line::after { animation:dash-move 1.4s linear infinite; opacity:1; }
@keyframes dash-move { from{left:-40%;} to{left:100%;} }
.flow-connector .tag { font-family:var(--bn-font-body); font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bn-text-default); display:inline-flex; align-items:center; gap:8px; }
.flow-connector .tag i { color:var(--bn-accent); }

.flow-band { display:grid; border:1px solid var(--bn-border); }
.flow-band.cols-3 { grid-template-columns:repeat(3,1fr); }
.flow-band.cols-4 { grid-template-columns:repeat(4,1fr); }
.pcard { padding:30px 26px; border-right:1px solid var(--bn-border); background:var(--bn-bg-alt); position:relative; transition:background var(--bn-dur) var(--bn-ease); }
.flow-band.cols-3 .pcard:last-child, .flow-band.cols-4 .pcard:last-child { border-right:none; }
.flow-band.input .pcard { background:var(--bn-primary); border-right-color:var(--bn-border-dark); }
.flow-band.output .pcard { background:var(--bn-bg-dark); border-right-color:var(--bn-border-dark); }
.flow-band.input, .flow-band.output { border-color:var(--bn-border-dark); }
.pcard-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.pcard-ico { width:42px; height:42px; flex-shrink:0; border:1px solid var(--bn-border); display:flex; align-items:center; justify-content:center; font-size:21px; color:var(--bn-accent); transition:background var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease), transform var(--bn-dur) var(--bn-ease); }
.flow-band.input .pcard-ico, .flow-band.output .pcard-ico { border-color:var(--bn-border-dark); color:var(--bn-accent-light); }
.pcard-meta { display:flex; flex-direction:column; gap:3px; }
.pcard-num { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bn-accent); }
.flow-band.input .pcard-num, .flow-band.output .pcard-num { color:rgba(255,255,255,0.55); }
.pcard-title { font-family:var(--bn-font-display); font-weight:600; font-size:18px; letter-spacing:-0.01em; color:var(--bn-text-default); }
.flow-band.input .pcard-title, .flow-band.output .pcard-title { color:#fff; }
.pcard-tags { display:flex; flex-direction:column; gap:8px; }
.ttag { font-family:var(--bn-font-body); font-weight:400; font-size:13px; padding:7px 11px; border:1px solid var(--bn-border); color:var(--bn-text-dark); line-height:1.35; background:var(--bn-bg); }
.ttag.hl { border-color:var(--bn-accent); color:var(--bn-accent-hover); background:rgba(225,37,27,0.05); font-weight:500; }
.ttag em { font-style:normal; color:var(--bn-text-muted); }
.flow-band.input .ttag, .flow-band.output .ttag { background:rgba(255,255,255,0.04); border-color:var(--bn-border-dark); color:rgba(255,255,255,0.72); }
.flow-band.input .ttag em, .flow-band.output .ttag em { color:rgba(255,255,255,0.55); }
.flow-band.input .ttag.hl, .flow-band.output .ttag.hl { background:rgba(225,37,27,0.18); border-color:var(--bn-accent); color:rgb(255,128,120); }
.flow-step { transition:opacity var(--bn-dur) var(--bn-ease); }
.flow-step.dim { opacity:0.32; }
.flow-step.lit { box-shadow:inset 0 0 0 2px var(--bn-accent); }
.flow-step.lit .pcard-ico { background:var(--bn-accent); color:#fff; border-color:var(--bn-accent); transform:scale(1.06); }

/* ---------- 12. PRESCRIPCIÓN · DOS NIVELES ---------- */
.presc { background:var(--bn-bg-dark); }
.presc-levels { margin-top:54px; }
.level-label { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.level-label .lv { font-family:var(--bn-font-body); font-weight:600; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bn-accent-light); }
.level-label .lt { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.5); }

.tablist { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--bn-border-dark); }
.tab {
  background:transparent; border:none; border-right:1px solid var(--bn-border-dark);
  cursor:pointer; text-align:left; padding:26px 28px; color:#fff;
  display:flex; flex-direction:column; gap:8px;
  transition:background var(--bn-dur) var(--bn-ease);
}
.tab:last-child { border-right:none; }
.tab:hover { background:rgba(255,255,255,0.04); }
.tab[aria-selected="true"] { background:var(--bn-accent); }
.tab .tcode { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bn-accent-light); }
.tab[aria-selected="true"] .tcode { color:#fff; }
.tab .tname { font-family:var(--bn-font-display); font-weight:600; font-size:clamp(20px,2vw,26px); letter-spacing:-0.01em; }
.tab .tdesc { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.6); line-height:1.5; }
.tab[aria-selected="true"] .tdesc { color:#fff; }

.tabpanel { display:none; }
.tabpanel.active { display:block; animation:fade-step 0.4s var(--bn-ease); }
.vias { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--bn-border-dark); border-top:none; }
.via { border-right:1px solid var(--bn-border-dark); padding:32px 28px; display:flex; flex-direction:column; gap:18px; }
.via:last-child { border-right:none; }
.via-top { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.via-code { font-family:var(--bn-font-body); font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#fff; background:var(--bn-accent); padding:4px 9px; }
.via-name { font-family:var(--bn-font-display); font-weight:600; font-size:21px; color:#fff; letter-spacing:-0.01em; }
.via-lead { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.66); line-height:1.55; }
.via-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.via-list li { font-family:var(--bn-font-body); font-weight:300; font-size:13px; line-height:1.5; display:flex; gap:10px; color:rgba(255,255,255,0.72); }
.via-list li i { flex-shrink:0; font-size:15px; margin-top:1px; }
.via-list.pro li i { color:var(--bn-accent-light); }
.via-list.con li { color:rgba(255,255,255,0.5); }
.via-list.con li i { color:rgba(255,255,255,0.55); }
.via-sub { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.via-models { margin-top:auto; padding-top:18px; border-top:1px solid var(--bn-border-dark); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.via-models .lbl { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-right:4px; }
.mchip { font-family:var(--bn-font-body); font-weight:500; font-size:12px; padding:6px 11px; border:1px solid var(--bn-accent); color:var(--bn-accent-light); text-decoration:none; transition:background var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease); }
.mchip:hover { background:var(--bn-accent); color:#fff; }

.presc-refine { margin-top:56px; display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--bn-border-dark); }
.refine { padding:30px 28px; border-right:1px solid var(--bn-border-dark); }
.refine:last-child { border-right:none; }
.refine h3 { font-family:var(--bn-font-display); font-weight:600; font-size:19px; color:#fff; margin-bottom:12px; }
.refine p { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.62); line-height:1.6; }
.refine p + p { margin-top:12px; }
.refine strong { font-weight:600; color:var(--bn-accent-light); }
.presc-close { margin-top:52px; padding-top:38px; border-top:1px solid var(--bn-border-dark); display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.presc-close p { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(21px,2.1vw,29px); line-height:1.15; letter-spacing:-0.02em; color:#fff; max-width:34ch; }
.presc-close p em { font-style:normal; color:var(--bn-accent-light); }

.factors { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.factor { font-family:var(--bn-font-body); font-weight:400; font-size:13px; padding:9px 14px; border:1px solid var(--bn-border-dark); color:rgba(255,255,255,0.72); display:inline-flex; align-items:center; gap:9px; }
.factor i { color:var(--bn-accent-light); font-size:16px; }

/* ---------- 13. MODELOS ---------- */
.models { background:var(--bn-bg-alt); }
.models-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:54px; border-top:1px solid var(--bn-border); border-left:1px solid var(--bn-border); }
.mcard { border-right:1px solid var(--bn-border); border-bottom:1px solid var(--bn-border); padding:32px 30px; background:var(--bn-bg-alt); position:relative; transition:background var(--bn-dur) var(--bn-ease); display:flex; flex-direction:column; }
.mcard:hover { background:var(--bn-bg); }
.mphoto { margin:-32px -30px 22px; background:rgb(236,237,238); border-bottom:1px solid var(--bn-border); overflow:hidden; position:relative; padding:0; border-top:none; border-left:none; border-right:none; width:calc(100% + 60px); cursor:zoom-in; display:block; }
.mphoto::after { content:"\ea13"; font-family:"remixicon"; position:absolute; top:12px; right:12px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--bn-primary); color:#fff; font-size:17px; opacity:0; transform:translateY(-4px); transition:opacity var(--bn-dur) var(--bn-ease), transform var(--bn-dur) var(--bn-ease); }
.mcard:hover .mphoto::after, .mphoto:focus-visible::after { opacity:1; transform:none; }
.mphoto img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform var(--bn-dur-slow) var(--bn-ease); }
.mcard:hover .mphoto img { transform:scale(1.04); }
.mcard.featured { background:var(--bn-primary); }
.mcard.featured:hover { background:#000; }
.mcard.featured .mphoto { border-bottom-color:var(--bn-border-dark); }
.mcard.featured .mphoto::after { top:46px; }
.mcard-flag { position:absolute; top:0; right:0; z-index:2; background:var(--bn-accent); color:#fff; font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; padding:6px 12px; }
.mbadge { display:inline-flex; align-items:center; gap:7px; font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--bn-border-strong); color:var(--bn-text-dark); align-self:flex-start; margin-bottom:18px; }
.mbadge i { font-size:13px; color:var(--bn-accent); }
.mcard.featured .mbadge { border-color:var(--bn-accent); color:#fff; }
.mcard.featured .mbadge i, .mcard.featured .mpros li i { color:var(--bn-accent-light); }
.mcode { font-family:var(--bn-font-display); font-weight:700; font-size:23px; letter-spacing:-0.01em; color:var(--bn-text-default); }
.mcard.featured .mcode { color:#fff; }
.mcard.featured .mname { color:var(--bn-accent-light); }
.mname { font-family:var(--bn-font-body); font-weight:500; font-size:13px; letter-spacing:0.04em; color:var(--bn-accent); margin-top:3px; }
.mtag { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:var(--bn-text-dark); line-height:1.45; margin-top:12px; min-height:42px; }
.mcard.featured .mtag { color:rgba(255,255,255,0.66); }
.mspecs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bn-border); border:1px solid var(--bn-border); margin:22px 0; }
.mcard.featured .mspecs { background:var(--bn-border-dark); border-color:var(--bn-border-dark); }
.mspec { background:var(--bn-bg-alt); padding:11px 13px; }
.mcard:hover .mspec { background:var(--bn-bg); }
.mcard.featured .mspec { background:var(--bn-primary); }
.mspec .sl { font-family:var(--bn-font-body); font-weight:600; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bn-text-muted); }
.mspec .sv { font-family:var(--bn-font-body); font-weight:500; font-size:13px; color:var(--bn-text-default); margin-top:4px; }
.mcard.featured .mspec .sl { color:rgba(255,255,255,0.62); }
.mcard.featured .mspec .sv { color:#fff; }
.mratings { display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.rrow { display:flex; align-items:center; gap:12px; }
.rrow .rl { font-family:var(--bn-font-body); font-weight:400; font-size:12px; color:var(--bn-text-muted); width:82px; }
.mcard.featured .rrow .rl { color:rgba(255,255,255,0.5); }
.rbar { flex:1; display:flex; gap:3px; }
.rbar i { flex:1; height:5px; background:var(--bn-border); }
.mcard.featured .rbar i { background:rgb(38,41,48); }
.rbar i.on { background:var(--bn-accent); }
.mcard.featured .rbar i.on { background:var(--bn-accent); }
.mpros { list-style:none; display:flex; flex-direction:column; gap:9px; }
.mpros li { font-family:var(--bn-font-body); font-weight:300; font-size:13px; color:var(--bn-text-dark); line-height:1.45; display:flex; gap:9px; }
.mcard.featured .mpros li { color:rgba(255,255,255,0.75); }
.mpros li i { color:var(--bn-accent); font-size:15px; flex-shrink:0; margin-top:1px; }
.mlimits { margin-top:20px; padding-top:18px; border-top:1px solid var(--bn-border); }
.mcard.featured .mlimits { border-top-color:var(--bn-border-dark); }
.mlimits .lbl { font-family:var(--bn-font-body); font-weight:600; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bn-text-muted); margin-bottom:10px; }
.mcard.featured .mlimits .lbl { color:rgba(255,255,255,0.55); }
.mlimits ul + .lbl { margin-top:16px; }
.mlimits ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.mlimits li { font-family:var(--bn-font-body); font-weight:300; font-size:12.5px; color:var(--bn-text-muted); line-height:1.45; display:flex; gap:9px; }
.mcard.featured .mlimits li { color:rgba(255,255,255,0.5); }
.mlimits li i { color:var(--bn-text-muted); font-size:14px; flex-shrink:0; margin-top:1px; }
.mcard.featured .mlimits li i { color:rgba(255,255,255,0.55); }
.mscale { margin-top:22px; padding-top:18px; border-top:1px solid var(--bn-border); font-family:var(--bn-font-body); font-size:13px; color:var(--bn-text-default); font-weight:500; }
.mcard.featured .mscale { border-top-color:var(--bn-border-dark); color:#fff; }
.mscale > span:last-child { color:var(--bn-text-muted); font-weight:300; }
.mcard.featured .mscale > span:last-child { color:rgba(255,255,255,0.5); }
.mfill { margin-top:auto; }

.sec-cta { margin-top:48px; padding-top:34px; border-top:1px solid var(--bn-border); display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.sec-cta p { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(19px,1.9vw,26px); line-height:1.15; letter-spacing:-0.02em; color:var(--bn-text-default); max-width:34ch; }
.sec-cta.on-dark { border-top-color:var(--bn-border-dark); }
.sec-cta.on-dark p { color:#fff; }

/* ---------- 14. COMPARATIVA ---------- */
.compare { background:var(--bn-bg); }
.ctable-wrap { margin-top:54px; border:1px solid var(--bn-border); overflow-x:auto; background:var(--bn-bg-alt); }
.ctable { width:100%; min-width:940px; }
.ctable thead th { background:var(--bn-primary); color:#fff; font-family:var(--bn-font-body); font-weight:500; font-size:13px; text-align:left; padding:16px 18px; letter-spacing:0.02em; white-space:nowrap; }
.ctable td, .ctable tbody th { background:transparent; text-align:left; font-family:var(--bn-font-body); font-weight:300; font-size:13.5px; color:var(--bn-text-dark); padding:15px 18px; border-bottom:1px solid var(--bn-border); vertical-align:top; }
.ctable tr:last-child td, .ctable tbody tr:last-child th { border-bottom:none; }
.ctable tbody tr { transition:background var(--bn-dur) var(--bn-ease); }
.ctable tbody tr:hover { background:var(--bn-bg); }
.ctable tr.feat { background:rgba(225,37,27,0.05); }
.ctable tr.feat:hover { background:rgba(225,37,27,0.09); }
.ctable .code { font-family:var(--bn-font-display); font-weight:700; font-size:15px; color:var(--bn-text-default); white-space:nowrap; }
.ctable .code small { display:block; font-family:var(--bn-font-body); font-weight:400; font-size:11px; color:var(--bn-text-muted); letter-spacing:0.05em; margin-top:2px; }
.ctable tr.feat .code { color:var(--bn-accent-hover); }
.crate { display:inline-flex; gap:3px; }
.crate i { width:7px; height:14px; background:var(--bn-border); }
.crate i.on { background:var(--bn-accent); }
.crate.na { font-size:12px; color:var(--bn-text-muted); }
.tscroll-hint { font-family:var(--bn-font-body); font-size:12px; color:var(--bn-text-muted); margin-top:12px; display:none; }

/* ---------- 15. SECTORES ---------- */
.sectors { background:var(--bn-bg-dark); }
.sectors-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:54px; border-top:1px solid var(--bn-border-dark); border-left:1px solid var(--bn-border-dark); }
.scard { border-right:1px solid var(--bn-border-dark); border-bottom:1px solid var(--bn-border-dark); padding:42px 40px; display:flex; flex-direction:column; gap:22px; transition:background var(--bn-dur) var(--bn-ease); }
.scard:hover { background:rgba(225,37,27,0.06); }
.scard-ico { width:54px; height:54px; border:1px solid var(--bn-border-dark); display:flex; align-items:center; justify-content:center; font-size:27px; color:var(--bn-accent-light); }
.scard-profile { font-family:var(--bn-font-body); font-weight:600; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--bn-accent-light); }
.scard-title { font-family:var(--bn-font-display); font-weight:600; font-size:25px; letter-spacing:-0.01em; color:#fff; margin-top:8px; }
.scard-chlabel { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:14px; }
.chlist { list-style:none; display:flex; flex-direction:column; gap:11px; }
.chlist li { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.68); line-height:1.5; display:flex; gap:11px; }
.chlist li::before { content:""; width:5px; height:5px; background:var(--bn-accent); flex-shrink:0; margin-top:8px; }
.scard-models { margin-top:auto; padding-top:20px; border-top:1px solid var(--bn-border-dark); }
.scard-models .lbl { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:12px; }
.mtags { display:flex; flex-wrap:wrap; gap:8px; }
.smtag { font-family:var(--bn-font-body); font-weight:500; font-size:12px; padding:6px 12px; border:1px solid var(--bn-border-dark); color:rgba(255,255,255,0.6); text-decoration:none; }
.smtag.primary { border-color:var(--bn-accent); color:var(--bn-accent-light); }
.smtag.optimal { background:var(--bn-accent); border-color:var(--bn-accent); color:#fff; }

/* ---------- 16. CONFIGURADOR ---------- */
.configurator { background:var(--bn-bg-alt); }
.config-wrap { margin-top:54px; border:1px solid var(--bn-border); background:var(--bn-bg-alt); }
.config-progress { display:flex; padding:24px 32px; border-bottom:1px solid var(--bn-border); background:var(--bn-bg); overflow-x:auto; }
.pstep { display:flex; align-items:flex-start; flex:1; min-width:74px; }
.pstep-inner { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; }
.pdot { width:32px; height:32px; border:1px solid var(--bn-border-strong); display:flex; align-items:center; justify-content:center; font-family:var(--bn-font-body); font-weight:600; font-size:13px; color:var(--bn-text-muted); background:var(--bn-bg-alt); transition:background var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease); }
.pdot.active { background:var(--bn-accent); border-color:var(--bn-accent); color:#fff; }
.pdot.done { background:var(--bn-primary); border-color:var(--bn-primary); color:#fff; }
.plabel { font-family:var(--bn-font-body); font-weight:500; font-size:11px; letter-spacing:0.04em; color:var(--bn-text-muted); white-space:nowrap; }
.pline { flex:1; height:1px; background:var(--bn-border); margin:16px 8px 0; transition:background var(--bn-dur) var(--bn-ease); }
.pline.done { background:var(--bn-primary); }

.config-body { padding:44px 40px; }
.cstep { display:none; }
.cstep.active { display:block; animation:fade-step 0.45s var(--bn-ease); }
@keyframes fade-step { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
.cq { font-family:var(--bn-font-display); font-weight:600; font-size:clamp(22px,2.4vw,30px); letter-spacing:-0.01em; color:var(--bn-text-default); }
.chint { font-family:var(--bn-font-body); font-weight:300; font-size:15px; color:var(--bn-text-muted); margin-top:10px; margin-bottom:34px; }
.copts { display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:14px; }
.copt { border:1px solid var(--bn-border); padding:24px; cursor:pointer; background:var(--bn-bg-alt); text-align:left; font:inherit; color:inherit; transition:border-color var(--bn-dur) var(--bn-ease), background var(--bn-dur) var(--bn-ease); }
.copt:hover { border-color:var(--bn-text-default); }
.copt[aria-checked="true"] { border-color:var(--bn-accent); background:rgba(225,37,27,0.04); box-shadow:inset 0 0 0 1px var(--bn-accent); }
.copt-ico { width:44px; height:44px; border:1px solid var(--bn-border); display:flex; align-items:center; justify-content:center; font-size:23px; color:var(--bn-accent); margin-bottom:16px; transition:background var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease); }
.copt[aria-checked="true"] .copt-ico { background:var(--bn-accent); color:#fff; border-color:var(--bn-accent); }
.copt-title { font-family:var(--bn-font-display); font-weight:600; font-size:17px; color:var(--bn-text-default); }
.copt-desc { font-family:var(--bn-font-body); font-weight:300; font-size:13px; color:var(--bn-text-muted); line-height:1.5; margin-top:8px; }
.config-nav { display:flex; justify-content:space-between; gap:14px; margin-top:40px; }
.btn-back { background:transparent; border:1px solid var(--bn-border-strong); color:var(--bn-text-muted); cursor:pointer; font-family:var(--bn-font-body); font-weight:500; font-size:14px; padding:13px 22px; min-height:46px; transition:border-color var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease); display:inline-flex; align-items:center; gap:8px; }
.btn-back:hover { border-color:var(--bn-text-default); color:var(--bn-text-default); }
.btn-fwd { background:var(--bn-accent); border:none; color:#fff; cursor:pointer; font-family:var(--bn-font-body); font-weight:500; font-size:14px; padding:13px 24px; min-height:46px; transition:background var(--bn-dur) var(--bn-ease); display:inline-flex; align-items:center; gap:8px; }
.btn-fwd:hover:not(:disabled) { background:var(--bn-accent-hover); }
.btn-fwd:disabled { background:var(--bn-border); color:rgb(90,93,101); cursor:not-allowed; }

.config-results { display:none; padding:44px 40px; }
.config-results.active { display:block; animation:fade-step 0.5s var(--bn-ease); }
.results-intro { font-family:var(--bn-font-body); font-weight:300; font-size:15px; color:var(--bn-text-dark); margin-bottom:26px; line-height:1.6; }
.results-intro strong { font-weight:600; color:var(--bn-text-default); }
.rlevels { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--bn-border); margin-bottom:20px; }
.rlevel { padding:22px 24px; border-right:1px solid var(--bn-border); background:var(--bn-bg); }
.rlevel:last-child { border-right:none; }
.rlevel .rl-lbl { font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bn-text-muted); }
.rlevel .rl-val { font-family:var(--bn-font-display); font-weight:600; font-size:22px; color:var(--bn-accent); margin-top:8px; letter-spacing:-0.01em; }
.rlevel .rl-why { font-family:var(--bn-font-body); font-weight:300; font-size:13px; color:var(--bn-text-dark); margin-top:8px; line-height:1.5; }
.rcards { display:flex; flex-direction:column; gap:16px; }
.rcard { border:1px solid var(--bn-border); padding:28px; display:flex; gap:24px; align-items:flex-start; }
.rcard.primary { border-color:var(--bn-accent); box-shadow:inset 0 0 0 1px var(--bn-accent); background:rgba(225,37,27,0.03); }
.rbadge { flex-shrink:0; font-family:var(--bn-font-body); font-weight:600; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:6px 11px; }
.rbadge.p { background:var(--bn-accent); color:#fff; }
.rbadge.a { background:var(--bn-bg); border:1px solid var(--bn-border); color:var(--bn-text-muted); }
.rcontent { flex:1; min-width:0; }
.rmodel { font-family:var(--bn-font-display); font-weight:700; font-size:21px; color:var(--bn-text-default); }
.rtag { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:var(--bn-text-muted); margin-top:4px; margin-bottom:16px; }
.rreasons { display:flex; flex-direction:column; gap:8px; }
.rreason { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:var(--bn-text-dark); display:flex; gap:10px; line-height:1.45; }
.rreason i { color:var(--bn-accent); flex-shrink:0; margin-top:2px; }
.rspecs { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.rspec { font-family:var(--bn-font-body); font-weight:500; font-size:12px; padding:5px 11px; border:1px solid var(--bn-border); color:var(--bn-text-dark); background:var(--bn-bg); }
.rwatch { margin-top:20px; border:1px solid var(--bn-border); background:var(--bn-bg); padding:18px 20px; display:flex; gap:12px; font-family:var(--bn-font-body); font-weight:300; font-size:13px; color:var(--bn-text-dark); line-height:1.55; }
.rwatch i { color:var(--bn-accent); font-size:17px; flex-shrink:0; margin-top:1px; }
.results-cta { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:34px; padding-top:28px; border-top:1px solid var(--bn-border); }
.btn-restart { background:none; border:none; cursor:pointer; font-family:var(--bn-font-body); font-weight:400; font-size:14px; color:var(--bn-text-muted); text-decoration:underline; display:inline-flex; align-items:center; gap:7px; padding:10px 0; }
.btn-restart:hover { color:var(--bn-text-default); }

/* ---------- 17. CREDENCIALES ---------- */
.creds { background:var(--bn-bg); }
.creds-figs { display:grid; grid-template-columns:repeat(5,1fr); margin-top:52px; border-top:1px solid var(--bn-border); border-bottom:1px solid var(--bn-border); }
.cfig { padding:32px 26px; border-right:1px solid var(--bn-border); }
.cfig:first-child { padding-left:0; }
.cfig:last-child { border-right:none; }
.cfig .v { font-family:var(--bn-font-display); font-weight:600; font-size:clamp(26px,2.8vw,42px); line-height:1; letter-spacing:-0.02em; color:var(--bn-primary); }
.cfig .v span { color:var(--bn-accent); }
.cfig .l { font-family:var(--bn-font-body); font-weight:400; font-size:13px; color:var(--bn-text-muted); margin-top:10px; line-height:1.4; }
.creds-scope { display:grid; grid-template-columns:repeat(2,1fr); gap:48px; margin-top:44px; }
.creds-scope p { font-family:var(--bn-font-body); font-weight:300; font-size:16px; line-height:1.6; color:var(--bn-text-dark); }

.manifesto { margin-top:64px; border-top:1px solid var(--bn-border); padding-top:48px; }
.manifesto blockquote { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(26px,3.4vw,46px); line-height:1.1; letter-spacing:-0.02em; color:var(--bn-text-default); max-width:22ch; }
.manifesto blockquote em { font-style:normal; color:var(--bn-accent); }
.manifesto cite { display:block; margin-top:20px; font-family:var(--bn-font-body); font-style:normal; font-weight:500; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bn-text-muted); }

/* ---------- 18. CONTACTO ---------- */
.contact { background:var(--bn-bg-dark); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:54px; border:1px solid var(--bn-border-dark); }
.contact-info { padding:48px 44px; border-right:1px solid var(--bn-border-dark); display:flex; flex-direction:column; }
.contact-info h3 { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(24px,2.4vw,32px); color:#fff; line-height:1.1; letter-spacing:-0.02em; }
.contact-points { list-style:none; margin-top:32px; display:flex; flex-direction:column; gap:16px; }
.contact-points li { display:flex; gap:14px; align-items:flex-start; font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.78); line-height:1.5; }
.contact-points li i { color:var(--bn-accent); font-size:20px; flex-shrink:0; }
.contact-meta { margin-top:auto; padding-top:32px; font-family:var(--bn-font-body); font-weight:300; font-size:13px; color:rgba(255,255,255,0.55); line-height:1.7; }
.contact-form { padding:48px 44px; display:flex; flex-direction:column; gap:16px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ffield label { display:block; font-family:var(--bn-font-body); font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px; }
.ffield input, .ffield select, .ffield textarea {
  width:100%; padding:14px 15px; border:1px solid var(--bn-border-dark); border-radius:0;
  background:rgba(255,255,255,0.04); color:#fff; font-family:var(--bn-font-body); font-weight:300; font-size:15px;
  outline:none; transition:border-color var(--bn-dur) var(--bn-ease);
}
.ffield input::placeholder, .ffield textarea::placeholder { color:rgba(255,255,255,0.55); }
.ffield input:focus, .ffield select:focus, .ffield textarea:focus { border-color:var(--bn-accent); }
/* El outline:none de arriba mataba el indicador global de :focus-visible en los únicos campos
   donde más importa. Se restituye aquí con mayor especificidad, en accent-light (6,08:1 sobre
   el fondo oscuro) y con 2 px de grosor, según WCAG 2.2 SC 2.4.11. */
.ffield input:focus-visible, .ffield select:focus-visible, .ffield textarea:focus-visible {
  outline:2px solid var(--bn-accent-light); outline-offset:2px;
}
.ffield select option { background:var(--bn-primary); color:#fff; }
.ffield textarea { resize:vertical; min-height:96px; }
.fconsent { display:flex; gap:12px; align-items:flex-start; font-family:var(--bn-font-body); font-weight:300; font-size:12.5px; color:rgba(255,255,255,0.6); line-height:1.5; }
.fconsent input { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--bn-accent); }
.form-submit { text-decoration:none; justify-content:center; gap:10px; background:var(--bn-accent); color:#fff; border:none; cursor:pointer; font-family:var(--bn-font-body); font-weight:500; font-size:15px; padding:17px; transition:background var(--bn-dur) var(--bn-ease); display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-top:6px; }
.form-submit:hover { background:var(--bn-accent-hover); }
.form-submit i { font-size:18px; }
.form-success { font-family:var(--bn-font-body); padding:40px; text-align:center; color:#fff; }
.form-success .ok { font-family:var(--bn-font-display); font-weight:600; font-size:22px; color:var(--bn-accent-light); display:flex; align-items:center; justify-content:center; gap:10px; }
.form-success .sub { font-weight:300; font-size:14px; color:rgba(255,255,255,0.6); margin-top:10px; }

/* ---------- 19. PIE ---------- */
.footer { background:var(--bn-bg-black); color:#fff; padding-top:0; }
.footer-claim { padding:72px 0 64px; border-bottom:1px solid var(--bn-border-dark); overflow:hidden; }
.footer-claim .big { font-family:var(--bn-font-display); font-weight:400; font-size:clamp(44px,9vw,128px); line-height:0.92; letter-spacing:-0.03em; color:#fff; }
.footer-claim .big .dot { color:var(--bn-accent); }
.footer-claim .big .ghost { color:rgb(95,98,106); }
.footer-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:64px 0; border-bottom:1px solid var(--bn-border-dark); }
.fcol h4 { font-family:var(--bn-font-body); font-weight:600; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:20px; }
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.fcol ul li a { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.72); text-decoration:none; transition:color var(--bn-dur) var(--bn-ease); }
.fcol ul li a:hover { color:var(--bn-accent-light); }
.fbrand { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:20px; }
.fbrand > a { display:block; line-height:0; }
.footer-logo { height:34px; width:auto; }
.fbrand-sub { font-family:var(--bn-font-body); font-weight:500; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bn-accent-light); }
.fabout { font-family:var(--bn-font-body); font-weight:300; font-size:14px; color:rgba(255,255,255,0.55); line-height:1.6; max-width:36ch; }
.fsocial { display:flex; gap:12px; margin-top:22px; }
.fsocial a { width:44px; height:44px; border:1px solid var(--bn-border-dark); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6); font-size:18px; transition:background var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease), color var(--bn-dur) var(--bn-ease); text-decoration:none; }
.fsocial a:hover { border-color:var(--bn-accent); color:#fff; background:var(--bn-accent); }
.footer-legal { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:26px 0; font-family:var(--bn-font-body); font-weight:300; font-size:12px; color:rgba(255,255,255,0.55); }
.footer-legal .links { display:flex; flex-wrap:wrap; gap:18px 24px; }
.footer-legal .links a { color:rgba(255,255,255,0.55); text-decoration:none; transition:color var(--bn-dur) var(--bn-ease); }
.footer-legal .links a:hover { color:#fff; }

/* ---------- 20. LIGHTBOX ---------- */
.lightbox { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:48px; background:rgb(8,9,12); opacity:0; visibility:hidden; transition:opacity var(--bn-dur) var(--bn-ease), visibility var(--bn-dur) var(--bn-ease); }
.lightbox.open { opacity:1; visibility:visible; transition:opacity var(--bn-dur) var(--bn-ease), visibility 0s linear 0s; }
.lb-figure { margin:0; max-width:1180px; width:100%; display:flex; flex-direction:column; transform:scale(0.97); transition:transform var(--bn-dur-slow) var(--bn-ease); }
.lightbox.open .lb-figure { transform:scale(1); }
.lb-figure img { width:100%; max-height:78vh; object-fit:contain; background:rgb(236,237,238); display:block; }
.lb-caption { display:flex; align-items:baseline; gap:14px; padding:18px 2px 0; }
.lb-code { font-family:var(--bn-font-display); font-weight:700; font-size:21px; color:#fff; letter-spacing:-0.01em; }
.lb-name { font-family:var(--bn-font-body); font-weight:400; font-size:14px; letter-spacing:0.04em; color:var(--bn-accent-light); }
.lb-close { position:absolute; top:24px; right:24px; width:48px; height:48px; background:transparent; border:1px solid rgba(255,255,255,0.22); color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease); }
.lb-close:hover { background:var(--bn-accent); border-color:var(--bn-accent); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); color:#fff; font-size:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--bn-dur) var(--bn-ease), border-color var(--bn-dur) var(--bn-ease); }
.lb-nav:hover { background:var(--bn-accent); border-color:var(--bn-accent); }
.lb-prev { left:24px; }
.lb-next { right:24px; }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1240px) {
  .hero-copy { padding:64px 40px; }
  .hero h1 { font-size:clamp(38px,5.4vw,60px); }
}
@media (max-width:1180px) {
  .nav-div, .nav-sub { display:none; }
  .nav-links { gap:20px; }
  .nav-links a { font-size:13.5px; }
}
@media (max-width:1080px) {
  .creds-figs { grid-template-columns:repeat(3,1fr); }
  .cfig:nth-child(3) { border-right:none; }
  .cfig:nth-child(4) { padding-left:0; }
  .cfig:nth-child(-n+3) { border-bottom:1px solid var(--bn-border); }
  .models-grid { grid-template-columns:repeat(2,1fr); }
  .footer-cols { grid-template-columns:1fr 1fr; gap:36px; }
  .value-env { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:900px) {
  .nav-cta { display:none; }
  .hero-split { grid-template-columns:1fr; min-height:0; }
  .hero-copy { padding:56px var(--bn-pad) 48px; }
  .hero-media { border-left:none; border-top:1px solid var(--bn-border); aspect-ratio:16/10; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .hero-stat { padding:24px 20px; border-bottom:1px solid var(--bn-border); }
  .hero-stat:nth-child(2), .hero-stat:nth-child(4) { border-right:none; padding-right:0; }
  .hero-stat:nth-child(3) { padding-left:0; }
  .hero-stat:nth-child(3), .hero-stat:nth-child(4) { border-bottom:none; }
}
@media (max-width:860px) {
  section { padding:72px 0; }
  .creds-scope { grid-template-columns:1fr; gap:24px; }
  .presc-close, .sec-cta { flex-direction:column; align-items:flex-start; gap:26px; }
  .nav-links {
    display:none; position:absolute; top:var(--bn-nav-h); left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bn-bg-alt); border-bottom:1px solid var(--bn-border);
  }
  .nav-links.open { display:flex; }
  .nav-links a { width:100%; padding:16px var(--bn-pad); border-bottom:1px solid var(--bn-border); font-size:16px; }
  .nav-burger { display:flex; }
  .flow-band.cols-3, .flow-band.cols-4 { grid-template-columns:1fr; }
  .pcard { border-right:none; border-bottom:1px solid var(--bn-border); }
  .flow-band.input .pcard, .flow-band.output .pcard { border-bottom-color:var(--bn-border-dark); }
  .flow-band .pcard:last-child { border-bottom:none; }
  .value-grid { grid-template-columns:1fr; }
  .vcard { border-right:none; }
  .tablist { grid-template-columns:1fr; }
  .tab { border-right:none; border-bottom:1px solid var(--bn-border-dark); }
  .tab:last-child { border-bottom:none; }
  .vias { grid-template-columns:1fr; }
  .via { border-right:none; border-bottom:1px solid var(--bn-border-dark); }
  .via:last-child { border-bottom:none; }
  .presc-refine { grid-template-columns:1fr; }
  .refine { border-right:none; border-bottom:1px solid var(--bn-border-dark); }
  .refine:last-child { border-bottom:none; }
  .models-grid { grid-template-columns:1fr; }
  .mcard { border-right:none; }
  .sectors-grid { grid-template-columns:1fr; }
  .scard { border-right:none; }
  .rlevels { grid-template-columns:1fr; }
  .rlevel { border-right:none; border-bottom:1px solid var(--bn-border); }
  .rlevel:last-child { border-bottom:none; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-info { border-right:none; border-bottom:1px solid var(--bn-border-dark); }
  .frow { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr; gap:32px; }
  .tscroll-hint { display:block; }
  .flow-status { text-align:left; }
}
@media (max-width:640px) {
  /* v5: en FR/PT los textos de botón son más largos; sin esto el hero desborda el ancho del móvil */
  .hero-split { grid-template-columns:minmax(0,1fr); }
  .hero-copy, .hero-media { min-width:0; max-width:100vw; }
  .btn { white-space:normal; text-align:left; }
  .hero-actions .btn { width:100%; justify-content:space-between; }
  .creds-figs { grid-template-columns:1fr; }
  .cfig { border-right:none; border-top:1px solid var(--bn-border); padding-left:0; padding-right:0; }
  .cfig:first-child { border-top:none; }
  .cfig:nth-child(-n+3) { border-bottom:none; }
  .hero-stats { grid-template-columns:1fr; }
  .hero-stat, .hero-stat:nth-child(3) { border-right:none; padding-left:0; padding-right:0; border-bottom:1px solid var(--bn-border); }
  .hero-stat:last-child { border-bottom:none; }
  .copts { grid-template-columns:1fr; }
  .config-body, .config-results { padding:28px 22px; }
  .config-progress { padding:18px; }
  .plabel { display:none; }
  .contact-info, .contact-form, .contact-cta { padding:32px 24px; }
  .vcard, .via, .refine { padding:28px 24px; }
  .mcard { padding:28px 24px; }
  .mphoto { margin:-28px -24px 22px; width:calc(100% + 48px); }
  .rcard { flex-direction:column; gap:14px; }
  .lightbox { padding:20px; }
  .lb-nav { width:44px; height:44px; font-size:24px; }
  .lb-prev { left:10px; } .lb-next { right:10px; }
  .lb-close { top:14px; right:14px; width:44px; height:44px; }
  body { font-size:16px; }
}

/* táctil: destinos de 44 px y sin zoom de iOS en los campos */
@media (pointer:coarse) {
  input, select, textarea { font-size:16px; }
  .nav-links a, .fcol ul li a, .footer-legal .links a { min-height:44px; display:flex; align-items:center; }
}

/* ---------- 22. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .marquee-track { animation:none; }
  .hero-media img { transition:opacity 0.2s linear; transform:none; }
  .hero-media img.loaded { transform:none; }
  .flow-connector.flowing .line::after { animation:none; opacity:0; }
  .cstep.active, .tabpanel.active, .config-results.active { animation:none; }
  * { transition-duration:0.01ms !important; }
}

/* ---------- 23. IMPRESIÓN ---------- */
@media print {
  .nav, .scroll-progress, .marquee, .flow-controls, .config-progress, .config-nav,
  .results-cta, .lightbox, .hero-actions, .fsocial { display:none; }
  body { background:#fff; }
  section { padding:24px 0; break-inside:avoid; }
  .cstep { display:block; }
}