/* NORDIX7 — el porqué de cada decisión está en DECISIONES-CSS.md */

/* Fundaciones — §tokens */
:root{
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:40px; --sp-7:64px; --sp-8:96px;

  --ctl-h:46px;

  --r-sm:8px; --r-lg:14px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5);

  /* --red-accent = el rojo del logo (canon) */
  --red-800:#8C1D15;
  --red-500:#E03A2F;
  --red-accent:#D7262B;
  /* Mismo canon en canales, para los halos y resplandores que necesitan alfa.
     Si cambia --red-accent, cambiar este también o vuelven los dos rojos */
  --red-accent-rgb:215,38,43;

  --ink:#1D1A17;
  --ink-2:#221E1A;
  --ink-3:#2C2823;

  --bg:#131110;
  --paper:#1D1A17;
  --line:#2C2823;

  --txt:#EFE9DF;
  --txt-2:#9C948A;
  --txt-inv:#EFE9DF;
  --txt-inv-2:#9C948A;

  /* Tipografía congelada */
  --f-display:'Space Grotesk', sans-serif;
  --f-head:'Space Grotesk', sans-serif;
  --f-body:'Inter', sans-serif;
  --fs-0:13px; --fs-1:15px; --fs-2:17px; --fs-3:22px; --fs-4:28px;

  --container:1680px;
}
/* En escritorio el cuerpo baja un punto; en ≤900px manda la legibilidad */
@media (min-width: 901px){
  :root{ --fs-1:14px; --fs-2:16px; }
}

/* Reset y contenedor */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--f-body); font-size:var(--fs-1); line-height:1.65;
  color:var(--txt); background:var(--bg);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button,input,textarea,select{ font:inherit; color:inherit; }

.container{ width:min(var(--container), 100% - 2*var(--sp-4)); margin-inline:auto; }

/* Tipos de titular */
.t-display{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.05; }
.t-head{ font-family:var(--f-head); font-weight:700; line-height:1.15; }
.t-accent{ color:var(--red-accent); }
.t-kicker{ font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--red-accent); font-weight:600; }

/* Botones — §botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--ctl-h); padding:0 var(--sp-4); border:0; border-radius:4px;
  font-weight:500; font-size:var(--fs-1); cursor:pointer;
  transition:background-color .25s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .25s ease, color .25s ease;
}

.btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 10px 26px rgba(var(--red-accent-rgb),.35); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible{
  outline:2px solid var(--red-500); outline-offset:2px;
}

.btn--quote{ background:var(--red-accent); color:#FFFFFF; }
.btn--quote:hover{ background:var(--red-800); }
.btn--red{ background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.34); }
.btn--red:hover{ border-color:var(--red-accent); color:#FFFFFF; background:rgba(var(--red-accent-rgb),.12); }
.btn--bright{ background:var(--red-accent); color:#FFFFFF; }
.btn--bright:hover{ background:var(--red-800); }
.btn--dark{
  background:transparent; color:#FFFFFF; border:0; border-radius:0;
  height:auto; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.45);
}
.btn--dark:hover{ border-color:var(--red-accent); transform:none; box-shadow:none; }
.btn--amber{ background:var(--red-accent); color:#FFFFFF; }
.btn--amber:hover{ background:var(--red-800); }
.btn--block{ width:100%; }
.btn--sm{ height:38px; padding:0 var(--sp-3); font-size:var(--fs-0); }

/* Saltar al contenido, solo visible al recibir foco. fixed, no absolute — §a11y */
.skip-link{
  position:fixed; left:var(--sp-3); top:-100px; z-index:60;
  background:var(--red-accent); color:#FFFFFF;
  padding:10px var(--sp-3); border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:var(--fs-0); font-weight:600;
  transition:top .18s ease;
}
.skip-link:focus{ top:0; }
/* Al aterrizar en el contenido, Chrome pinta su anillo por defecto: gris sobre
   el carbón da 1.01:1, o sea que activar "saltar al contenido" no cambiaba
   nada en pantalla. El marco va por dentro para no empujar el layout. */
main:focus-visible{ outline:2px solid var(--red-500); outline-offset:-3px; }

/* Header — §header */
.site-header{ background:var(--bg); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; gap:var(--sp-5); min-height:72px; }
.brand{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.brand img{ height:20px; width:auto; }

/* Bandera de Alemania, va ANTES del logo — §bandera */
.brand-flag{ display:block; flex-shrink:0; width:30px; height:20px; border-radius:3px; margin-right:2px; }
@media (max-width: 400px){ .brand-flag{ width:24px; height:16px; } }
.footer-brand img{ height:20px; width:auto; }

.footer-brand__logo{ display:flex; align-items:center; gap:6px; }
.footer-brand__logo .brand-flag{ width:30px; height:20px; }
.nav-links{ display:flex; gap:var(--sp-5); margin-left:auto; }
/* El menú compacto REUSA .nav-links: la letra chica de escritorio va en el
   bloque ≥1200px, nunca aquí */
.nav-links a{
  font-size:var(--fs-1); color:var(--txt); position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--red-accent); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-search{ margin-left:var(--sp-4); }
.search-box{
  display:flex; align-items:center; gap:8px; height:40px; width:220px;
  border:1px solid var(--line); border-radius:999px; padding:0 var(--sp-3); background:var(--paper);
}
.search-box svg{ flex-shrink:0; color:var(--txt-2); }
.search-box input{ border:0; width:100%; background:transparent; font-size:var(--fs-0); }
/* El anillo va en la cápsula, no en el input: su outline:0 le ganaba a la
   regla global y el buscador quedaba sin foco visible — §a11y */
.search-box input:focus-visible{ outline:0; }
.search-box:focus-within{ outline:2px solid var(--red-500); outline-offset:2px; }

.nav-row .btn--quote{ margin-left:var(--sp-4); flex-shrink:0; }

/* Header escala C (20 jul). Desde 1200px, que es donde la nav completa cabe de
   verdad: en inglés pedía 1031 y en español 1156, así que el umbral se pone
   arriba de los dos. Por debajo manda el menú compacto (ver §header). */
@media (min-width: 1200px){
  .nav-row{ min-height:72px; gap:var(--sp-4); }
  .brand img{ height:20px; }
  .brand-flag{ width:30px; height:20px; }
  .nav-links{ gap:var(--sp-4); }
  .nav-links a{ font-size:15px; }
  .nav-row .btn--quote{ height:38px; font-size:14px; padding:0 18px; }
  .nav-search .search-box{ height:36px; width:170px; }
  .nav-search .search-box input{ font-size:13.5px; }
}

/* Header fantasma: flota en las 5 páginas, no empuja el contenido */
.site-header--ghost{
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(19,17,16,.72) 0%, rgba(19,17,16,.32) 65%, rgba(19,17,16,0) 100%);
  border-bottom:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1), background-color .35s ease;
}

.site-header--ghost.is-solid{ background-color:var(--bg); }
.site-header--ghost.is-away{ transform:translateY(-100%); }

/* Menú móvil abierto: header y panel en un negro más fuerte que --bg, el mismo
   #0A0A0A de la tarjeta oscura de About — un solo bloque sólido — §menu */
.site-header--ghost.menu-open{ background:#0A0A0A; }

/* Con el menú abierto el fondo se congela: antes se scrolleaba detrás del panel — §menu */
html.menu-abierto, html.menu-abierto body{ overflow:hidden; }

/* Como el header flota, las internas despejan su arranque */
main > .section:first-child{ padding-top:calc(var(--sp-8) + 40px); }

/* Aquí vivía la compactación de 901–1100px: sobra desde que la nav completa
   solo aparece en ≥1200 — §header */

/* Menú móvil */
.nav-toggle{ display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer; }
.nav-toggle svg{ display:block; }

/* Hero — §hero-internas */
.hero{ position:relative; color:var(--txt-inv); background:var(--ink); overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,17,16,.55) 0%, rgba(19,17,16,.18) 45%, rgba(19,17,16,.92) 100%); }
.hero__content{ position:relative; padding:clamp(72px, 12vw, 150px) 0; }
.hero__content h1{ font-size:clamp(40px, 7.2vw, 96px); letter-spacing:-.02em; line-height:.98; }

.hero--page .hero__content h1{ font-size:clamp(32px, 4vw, 52px); }
.hero__content p{ margin:var(--sp-4) 0 var(--sp-5); font-size:var(--fs-2); color:var(--txt-inv-2); max-width:420px; }
.hero--page .hero__content{ padding:calc(clamp(56px, 8vw, 110px) + 72px) 0 clamp(56px, 8vw, 110px); }

.hero--page .hero__video{ opacity:.92; }

/* El video cambia de luz mientras corre: el copy no puede depender de que el
   frame de atrás sea oscuro */
.hero--video .hero__content h1{ text-shadow:0 1px 4px rgba(0,0,0,.55); }
.hero--video .hero__content p{ color:var(--txt); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.hero--center{ text-align:center; }
.hero--center .hero__content{ max-width:none; }
.hero--center .hero__content p{ margin-inline:auto; }

/* Hero de Home — §hero-home */
/* Sin min-height: el alto lo fija .hero--scrub (100dvh) y en el markup .hero--b1
   nunca va sin él. El flex es el que deja el bloque a media altura */
.hero--b1{ display:flex; align-items:center; }
.hero--b1 .hero__content{ padding:0; }

/* Pequeño a propósito: no le roba protagonismo a la maquinaria.
   NO agrandar sin volver a mirar el video */
.hero--b1 h1{
  font-size:clamp(22px, 2.5vw, 42px); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.35;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}

.hero--b1 h1 br{ display:inline; }
.hero--b1 .line2{ color:var(--txt-inv); }
.hero--b1 .line2::before{ content:none; }

.hero__foot{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); margin-top:var(--sp-5); }

.hero--b1 .hero__foot p{ margin:0; max-width:40ch; font-size:14px; color:var(--txt); text-shadow:0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 700px){ .hero--b1 h1{ letter-spacing:.10em; } }

/* Composición móvil: un solo eje, todo centrado — §hero-movil */
@media (max-width: 600px){
  .hero--b1 .hero__content{
    position:absolute; top:0; bottom:0; left:var(--sp-4); right:var(--sp-4);
    width:auto; margin:0; display:flex; flex-direction:column;
    justify-content:space-between; padding:26svh 0 9svh;
  }
  .hero--b1 h1{ text-align:center; font-size:24px; }
  .hero--b1 .hero__foot{ align-items:center; text-align:center; }
  .hero--b1 .hero__foot p{ max-width:34ch; font-size:16px; margin-inline:auto; }
}
@media (prefers-reduced-motion: no-preference){
  .hero--b1 .l{ display:inline-block; opacity:0; transform:translateY(.35em); animation:hero-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero--b1 .line2 .l{ animation-delay:.12s; }
  .hero--b1 .hero__foot{ opacity:0; animation:hero-fade .8s ease .45s forwards; }
}
@keyframes hero-rise{ to{ opacity:1; transform:none; } }
@keyframes hero-fade{ to{ opacity:1; } }

/* Hero scrub, el vuelo de Home — §hero-scrub */
.hero-scrub{ position:relative; background:var(--ink); }
.hero--scrub{
  position:sticky; top:0; z-index:0;
  height:100svh;
  height:100dvh;
}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* El lienzo se ancla a 100lvh (alto fijo) aunque el hero mida 100dvh: si sigue
   a la barra del navegador, el recorte cover se recalcula y la escena salta */
@supports (height: 100lvh){
  .hero--scrub .hero__video,
  .hero--scrub .hero__img{ top:0; bottom:auto; height:100lvh; }
}
.hero--scrub{ overflow:hidden; }

/* Miniatura borrosa de ~230 bytes: la primera impresión nunca es un hueco */
.hero--scrub::before{
  content:""; position:absolute; inset:-28px; z-index:0;
  background:url("../assets/video/poster-tiny.webp?v=23") center/cover no-repeat;
  filter:blur(18px);
}
@media (max-width: 768px){
  .hero--scrub::before{ background-image:url("../assets/video/poster-mobile-tiny.webp?v=23"); }
}

.hero--scrub .hero__img{ z-index:1; pointer-events:none; transition:opacity .55s cubic-bezier(.22,1,.36,1); }
.hero--scrub .hero__img.is-hidden{ opacity:0; }

/* El velo NO debe cargar la franja inferior: ahí viven las excavadoras */
.hero--scrub .hero__scrim{
  z-index:2;
  background:linear-gradient(180deg, rgba(19,17,16,.30) 0%, rgba(19,17,16,.16) 50%, rgba(19,17,16,.50) 100%);
}

/* El copy se despide entre el 70% y el 90% (--p lo escribe main.js) */
.hero--scrub .hero__content{ z-index:3; opacity:clamp(0, calc(1 - (var(--p, 0) - .7) / .2), 1); }

/* Pista del scrub: colapsada sin JS. 100svh congelado — acortarla no da
   fluidez, reparte las mismas 80 fotos en menos recorrido */
.hero-scrub__track{ height:0; }
html.scrub-on .hero-scrub__track{ height:100svh; }

/* Entra como cortina sobre el hero pinneado: fondo opaco obligatorio */
.hero-scrub + .section{ position:relative; z-index:2; background:var(--bg); }

.site-header--ghost .container,
.hero--scrub .hero__content{ width:calc(100% - 2*var(--sp-6)); max-width:none; }
@media (max-width: 600px){
  .site-header--ghost .container,
  .hero--scrub .hero__content{ width:calc(100% - 2*var(--sp-4)); }
}

/* Hero vitrina, Categories — §hero-vitrine */
.hero--vitrine{ border-bottom:1px solid var(--line); }
.hero--vitrine .hero__content{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:center;
}
.hero--vitrine .t-kicker{ display:flex; align-items:center; gap:14px; margin-bottom:var(--sp-3); }
.hero--vitrine .t-kicker::before{ content:""; width:34px; height:2px; background:var(--red-accent); }
.hero--vitrine .hot{ color:var(--red-accent); }
.hero--vitrine .btn{ margin-top:var(--sp-2); }
.vitrine{ position:relative; display:flex; align-items:center; justify-content:center; min-height:440px; }
.vitrine::before{
  content:""; position:absolute; width:min(78%, 460px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--red-accent-rgb),.36) 0%, rgba(var(--red-accent-rgb),.10) 48%, transparent 72%);
}
.vitrine::after{
  content:""; position:absolute; bottom:8%; width:min(62%, 360px); height:22px; border-radius:50%;
  background:rgba(0,0,0,.55); filter:blur(14px);
}
.vitrine img{ position:absolute; z-index:2; filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.vitrine__main{ position:relative; width:min(62%, 360px); animation:vitrine-float 6s ease-in-out infinite; }
.vitrine__left{ width:min(34%, 190px); left:2%; bottom:14%; z-index:1; opacity:.9; animation:vitrine-float 8s ease-in-out 1.1s infinite; }
.vitrine__right{ width:min(36%, 200px); right:0; top:6%; z-index:3; animation:vitrine-float 7s ease-in-out .6s infinite; }
.vitrine__tag{
  position:absolute; z-index:4; bottom:4%; right:6%;
  font-family:var(--f-display); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-accent); border:1px solid var(--red-accent); padding:9px 16px; background:rgba(19,17,16,.7);
}
@keyframes vitrine-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Secciones genéricas — §secciones */
.section{ padding:var(--sp-8) 0; }
.section--tight{ padding:var(--sp-7) 0; }
.section-title{ text-align:center; font-size:clamp(26px, 3vw, 35px); margin-bottom:var(--sp-6); }
.section-sub{ text-align:center; color:var(--txt-2); max-width:560px; margin:calc(-1*var(--sp-5)) auto var(--sp-6); }

/* Título con línea. Sin nowrap: en español desbordaba de 321 a 385px y era el
   único scroll horizontal del sitio — §responsive */
.rule-title{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.rule-title h2{ font-size:clamp(24px, 3vw, 34px); min-width:0; }
.rule-title::after{ content:""; height:1px; background:var(--txt); flex:1; opacity:.6; }
.rule-lead{ color:var(--txt-2); max-width:640px; margin:calc(-1*var(--sp-3)) 0 var(--sp-6); line-height:1.65; }

/* Value propositions */
.value-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); }

@media (min-width: 1500px){
  .value-grid{ gap:var(--sp-5); }
}
/* margin:0 obligatorio: es un <figure> y el navegador le mete 40px por lado;
   en 320px la tarjeta quedaba en 192px con el texto desbordándola */
.value-card{
  margin:0;
  position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1/1;
  background:var(--ink-2); box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .4s ease;
}
.value-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1); }

.value-card:hover{ box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--red-accent-rgb),.45); }
.value-card:hover img{ transform:scale(1.09); }
.value-card figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:var(--sp-4);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.82)); color:var(--txt-inv);
}
.value-card figcaption strong{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; font-size:var(--fs-2); display:block; letter-spacing:.04em; }
.value-card figcaption span{ font-size:var(--fs-0); color:var(--txt-inv-2); }

/* Bandas oscuras — §secciones */
.band{ background:var(--ink); color:var(--txt-inv); padding:var(--sp-7) 0; position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band--texture::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.5px, transparent 1.6px);
  background-size:14px 14px; pointer-events:none;
}
.band__inner{ position:relative; text-align:center; max-width:820px; margin-inline:auto; }
.band h2{ font-size:clamp(24px, 3.1vw, 33px); }
.band p{ margin-top:var(--sp-3); color:var(--txt-inv-2); }
.band .btn{ margin-top:var(--sp-4); }

.band--claim .band__inner{ text-align:left; max-width:none; }
.band--claim h2{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(26px, 3.3vw, 42px); line-height:1.15; letter-spacing:-.01em;
  color:var(--txt-2); max-width:26ch;
}
.band--claim h2 .hot, .band--claim h2 .t-accent{ color:var(--red-accent); }
.band--claim p{ max-width:62ch; }

.band--rail::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, var(--red-500), var(--red-800));
}
.band--rail .band__inner{
  text-align:left; max-width:none;
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-5); align-items:center;
}
.band--rail h2{ font-size:clamp(28px, 3.1vw, 40px); letter-spacing:-.02em; line-height:1.05; }
.band--rail .btn{ margin-top:0; }
@media (max-width: 800px){
  .band--rail .band__inner{ grid-template-columns:1fr; justify-items:start; }
}

/* Tarjetas de producto y categoría */
.parts-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-3); }
.cat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); }
.related-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-4); }

.part-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}

.part-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--red-accent-rgb),.45); border-color:var(--red-accent); }
.part-card:hover .part-card__media img{ transform:scale(1.09); }
.part-card__media{ position:relative; overflow:hidden; aspect-ratio:1/1; background:linear-gradient(160deg,#26221D,#1B1815 60%,#211D18); }
.part-card__media .num{
  position:absolute; top:10px; left:12px; font-size:var(--fs-0); color:var(--txt-2); font-weight:600;
}
.part-card__media svg{ position:absolute; inset:0; margin:auto; width:70%; height:70%; }
.part-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:13%; filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)); transition:transform .7s cubic-bezier(.22,1,.36,1); }
.part-card__body{ padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.part-card__body h3{ font-family:var(--f-head); font-weight:600; font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.02em; }
.part-card__body .btn{ margin-top:auto; }

.cat-card{ text-align:left; }
.cat-card .part-card__body h3{ font-size:var(--fs-3); text-transform:none; }
.cat-card p{ color:var(--txt-2); font-size:var(--fs-0); }

/* Acordeón de industrias */
.acc{
  display:flex; gap:var(--sp-3); height:360px;
}
.acc__panel{
  position:relative; overflow:hidden; border-radius:var(--r-sm); border:0; padding:0;
  cursor:pointer; flex:1 1 0; min-width:44px; background:var(--ink-2);
  transition:flex-grow .55s cubic-bezier(.22,1,.36,1);
}
.acc__panel.is-open{ flex-grow:7; cursor:default; }
.acc__panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.55); transition:filter .45s ease;
}
.acc__panel.is-open img{ filter:none; }
.acc__panel:hover:not(.is-open) img{ filter:grayscale(.4) brightness(.75); }

.acc__panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  opacity:0; transition:opacity .4s ease;
}
.acc__panel.is-open::after{ opacity:1; }
.acc__panel h3{
  position:absolute; left:var(--sp-4); bottom:var(--sp-3); z-index:2;
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(22px, 3vw, 40px); letter-spacing:.02em; color:#FFFFFF;
  white-space:nowrap; opacity:0; transform:translateY(10px);
  transition:opacity .35s ease .18s, transform .35s ease .18s;
}
.acc__panel.is-open h3{ opacity:1; transform:none; }
/* El punto se ve de 9px pero el dedo agarra 24: el botón es transparente y el
   círculo lo pinta el ::before (9×9 no se agarra con guantes) — §a11y */
.acc__dots{ display:flex; gap:0; justify-content:center; margin-top:var(--sp-4); }
.acc__dots button{
  position:relative; width:24px; height:24px; border-radius:50%;
  border:0; padding:0; cursor:pointer; background:none;
  display:flex; align-items:center; justify-content:center;
}
.acc__dots button::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--ink-3); transition:background-color .25s ease, transform .25s ease;
}
.acc__dots button.is-active::before{ background:var(--red-accent); transform:scale(1.2); }
@media (prefers-reduced-motion: reduce){
  .acc__panel, .acc__panel img, .acc__panel h3, .acc__panel::after{ transition:none; }
}
@media (max-width: 768px){
  .acc{ height:260px; gap:var(--sp-1); }
  .acc__panel h3{ font-size:20px; left:var(--sp-3); }
}

/* Carrusel de industrias */
.industries{ background:var(--bg); }
.carousel{ display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-3); align-items:stretch; }
.carousel__main{ position:relative; border-radius:var(--r-sm); overflow:hidden; min-height:340px; background:var(--ink-2); }
.carousel__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.carousel__main figcaption{
  position:absolute; left:var(--sp-4); bottom:var(--sp-3); color:var(--txt-inv);
  font-family:var(--f-display); font-weight:700; font-size:clamp(22px, 3vw, 34px); text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.carousel__thumbs{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-2); }
.carousel__thumbs button{
  position:relative; border:0; padding:0; border-radius:var(--r-sm); overflow:hidden; cursor:pointer;
  background:var(--ink-2); min-height:110px;
}
.carousel__thumbs img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1); opacity:.75; transition:filter .3s ease, opacity .3s ease;
}
.carousel__thumbs button:hover img, .carousel__thumbs button.is-active img{ filter:none; opacity:1; }
.carousel__dots{ display:flex; justify-content:center; gap:10px; margin-top:var(--sp-4); }
.carousel__dots button{
  width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:#3F3A33; transition:background .25s ease, transform .25s ease;
}
.carousel__dots button.is-active{ background:var(--red-accent); transform:scale(1.15); }

/* Cross-fade sin fantasmas: la entrante aparece encima ya cargada */
.carousel__main img.is-leaving{ opacity:1; }
.carousel__main img.is-entering{ opacity:0; transition:opacity .45s ease; }
.carousel__main img.is-entering.is-ready{ opacity:1; }

/* About — §about */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:center; }
.split h2{ font-size:clamp(24px, 3vw, 34px); margin-bottom:var(--sp-4); }
.split p{ color:var(--txt-2); margin-bottom:var(--sp-3); }
.split p strong{ color:var(--txt); }
.split__media{ border-radius:var(--r-sm); overflow:hidden; }

.dark-features{
  background:var(--ink-2); color:var(--txt-inv); border-radius:var(--r-lg);
  padding:var(--sp-6); display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5);
}
.feature{ display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start; }
.feature--row{ flex-direction:row; align-items:flex-start; gap:var(--sp-3); }
.feature svg{ color:var(--red-accent); flex-shrink:0; }
.feature h3{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; font-size:var(--fs-1); letter-spacing:.04em; line-height:1.3; }
.feature p{ font-size:var(--fs-0); color:var(--txt-inv-2); }

/* Cuerpo tal cual el Figma. El cielo del skyline continúa este blanco hacia
   el newsletter: continuidad intencional, no tocarla */
.abt-body{ background:#FFFFFF; }
.abt-sec{ padding:var(--sp-7) 0 var(--sp-8); }
.abt-eng{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-6); align-items:center; }
.abt-eng h2{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(24px,3vw,38px); color:#131110; }
.abt-eng p{ color:#5C5852; margin-top:var(--sp-3); }
.abt-eng p strong{ color:#131110; }

.abt-ph img{
  width:100%; display:block;
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 98%);
  mask-image:linear-gradient(180deg, #000 72%, transparent 98%);
}
.abt-band{
  background:#0A0A0A; border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-5);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-5);
}
.abt-band__item svg{ color:var(--red-accent); }
.abt-band__item h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:var(--fs-1); margin-top:var(--sp-2); line-height:1.35; max-width:26ch; color:#FFFFFF;
}
.abt-mision{ text-align:center; padding:var(--sp-7) 0 0; }
.abt-mision h2{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(22px,2.8vw,34px); color:#131110; }
.abt-mision p{ color:#5C5852; max-width:70ch; margin:var(--sp-3) auto 0; }
.abt-mision p strong{ color:#131110; }
@media (max-width: 900px){
  .abt-eng{ grid-template-columns:1fr; }
  .abt-band{ grid-template-columns:1fr; }

  .abt-eng h2{ text-align:center; }
  .abt-band__item{ text-align:center; }
  .abt-band__item h3{ margin-inline:auto; }

  /* Selectores acotados a propósito: cada uno existe en UNA sola página.
     El párrafo del hero de Home no se toca — §about */
  .abt-eng p,
  .abt-mision p,
  .newsletter p,
  .band--claim p,
  .hero-scrub ~ .section .section-sub,
  .hero--vitrine .hero__content p,
  .product-top .lead{ text-align:justify; }
}

/* Newsletter. El #0A0A0A iguala al asset, no a la paleta: es el negro medido
   de las siluetas para que imagen y sección sean una sola pieza */
.newsletter{ background:#0A0A0A; color:var(--txt-inv); position:relative; overflow:hidden; }
.newsletter__skyline{ display:block; width:100%; height:auto; color:#0A0908; background:var(--bg); }
.newsletter__inner{
  display:grid; grid-template-columns:1.2fr 1fr; gap:var(--sp-6); align-items:center;
  padding:var(--sp-7) 0;
}
.newsletter h2{ font-size:clamp(24px, 3.4vw, 36px); }
.newsletter p{ color:var(--txt-inv-2); margin-top:var(--sp-2); }
.newsletter form{ display:grid; gap:var(--sp-2); }
.newsletter input{
  height:var(--ctl-h); border-radius:4px; border:1px solid #3A3A3A; background:#101010;
  color:var(--txt-inv); padding:0 var(--sp-3) 0 44px; width:100%;
}
.newsletter .field{ position:relative; }
.newsletter .field svg{ position:absolute; left:14px; top:50%; translate:0 -50%; color:var(--txt-inv-2); }

/* Categories y filtros — §filtros */
.breadcrumb{ font-size:var(--fs-0); color:var(--txt-2); margin-bottom:var(--sp-3); }
.breadcrumb a:hover{ color:var(--red-accent); }
.cat-intro{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-6); align-items:end; margin-bottom:var(--sp-5); }
.cat-intro h2{ font-family:var(--f-head); font-size:clamp(26px, 3vw, 35px); }
.cat-intro p{ color:var(--txt-2); font-size:var(--fs-0); text-align:right; }

.filters{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-3); margin-bottom:var(--sp-3); }
.filters select{
  height:var(--ctl-h); border:1px solid var(--line); border-radius:4px; background:var(--paper);
  padding:0 var(--sp-3); font-size:var(--fs-0); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; width:100%;
}

/* El <select> queda oculto pero VIVO: main.js escribe su value y dispara
   change, así los filtros y el ?cat= siguen funcionando. Sin JS, nativo */
.filters--combo select{ display:none; }
.combo{ position:relative; }
.combo__btn{
  height:var(--ctl-h); width:100%; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); color:var(--txt); padding:0 var(--sp-3);
  font-size:var(--fs-0); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); text-align:left;
}
.combo__btn svg{ flex:none; transition:transform .25s ease; }
.combo.is-open .combo__btn{ border-color:var(--red-accent); }
.combo.is-open .combo__btn svg{ transform:rotate(180deg); }
.combo__panel{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  border-radius:4px; padding:6px;
  background:rgba(19,17,16,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(239,233,223,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  /* visibility, no solo opacity: con el panel cerrado sus opciones seguían siendo
     enfocables con Tab y se podía cambiar el filtro sin ver nada. El 0s con
     retardo deja que la transición de salida se vea antes de ocultarlo */
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* Sin blur el tinte solo no da contraste sobre las tarjetas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .combo__panel{ background:rgba(19,17,16,.94); }
}
.combo.is-open .combo__panel{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
.combo__opt{
  display:block; width:100%; text-align:left; border:0; background:none;
  color:var(--txt); cursor:pointer; border-radius:3px;
  padding:10px var(--sp-2); font-size:var(--fs-0); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
}
.combo__opt:hover{ background:rgba(239,233,223,.08); color:var(--red-accent); }

.combo__opt.is-sel{ color:var(--red-accent); }

.filter-tags{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); margin-bottom:var(--sp-6); }
.filter-tags button{
  height:38px; border:1px solid var(--line); border-radius:4px; background:var(--ink-2); color:var(--txt);
  font-size:var(--fs-0); font-weight:600; text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.filter-tags button:hover{ border-color:var(--red-accent); color:var(--red-accent); }
.filter-tags button.is-active{ background:var(--red-accent); border-color:var(--red-accent); color:#FFFFFF; }
.no-results{ text-align:center; color:var(--txt-2); padding:var(--sp-6) 0; display:none; }

/* El tramo blanco .sec-light se descartó: el blanco vive solo en About */

/* Product — §product */
.product-top{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-7); align-items:center; }
.product-top__media{
  border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1/1;
  background:linear-gradient(160deg,#26221D,#1B1815 60%,#211D18); position:relative; border:1px solid var(--line);
}
.product-top__media svg{ position:absolute; inset:0; margin:auto; width:72%; height:72%; }
.product-top__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; filter:drop-shadow(0 20px 30px rgba(0,0,0,.55)); }

/* Solo el efecto de la vitrine, no el hero replicado */
.product-top__media--glow{ background:transparent; border-color:transparent; overflow:visible; }
.product-top__media--glow::before{
  content:""; position:absolute; inset:0; margin:auto; z-index:0;
  width:84%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--red-accent-rgb),.42) 0%, rgba(var(--red-accent-rgb),.12) 48%, transparent 72%);
}
.product-top__media--glow img{ z-index:2; animation:vitrine-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .product-top__media--glow img{ animation:none; } }
.product-top h1{ font-size:clamp(26px, 3vw, 35px); }
.product-top .lead{ color:var(--txt-2); margin:var(--sp-4) 0 var(--sp-5); max-width:420px; }

.prose h2{ font-family:var(--f-head); font-size:var(--fs-4); margin:var(--sp-6) 0 var(--sp-3); }
.prose p{ color:var(--txt-2); text-align:justify; }
.prose p strong{ color:var(--txt); }

.spec-table{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-7); }
.spec-table dl{ margin:0; }
.spec-row{ display:grid; grid-template-columns:1fr 1.2fr; padding:var(--sp-2) 0; border-bottom:1px solid #3F3A33; }
.spec-row dt{ color:var(--txt-2); font-size:var(--fs-0); }
.spec-row dd{ margin:0; font-size:var(--fs-0); font-weight:500; }
.spec-head{ border-bottom:0; color:var(--txt-2); font-size:var(--fs-0); }

.composition{ display:grid; grid-template-columns:220px 1fr; gap:var(--sp-6); align-items:start; }
.composition img{ border-radius:var(--r-sm); aspect-ratio:1/1; object-fit:cover; }

/* Contact — §contact
   .contact-grid, .social-row y .form se borraron el 21 jul: nada las usaba
   desde que el intro y el formulario se fueron. Están en el historial de git */

/* Get expert support + ubicación */
.support-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:var(--sp-7); align-items:start; }
.support-title{ font-size:clamp(22px, 2.6vw, var(--fs-4)); margin-bottom:var(--sp-2); }
.support-sub{ color:var(--txt-2); font-size:var(--fs-0); margin-bottom:var(--sp-4); max-width:380px; }
.contact-info-list{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); }
.contact-info-row{ display:flex; gap:var(--sp-3); padding:var(--sp-4); align-items:flex-start; }
.contact-info-row + .contact-info-row{ border-top:1px solid var(--line); }
.contact-info-row svg{ color:var(--red-accent); flex-shrink:0; margin-top:2px; }
.contact-info-row h3{ font-size:var(--fs-1); font-weight:600; margin-bottom:2px; }
.contact-info-row p{ color:var(--txt-2); font-size:var(--fs-0); }

/* Cuadre: en escritorio ambas columnas terminan a la misma altura */
@media (min-width: 901px){
  .support-grid{ align-items:stretch; }
  .support-grid > .reveal:first-child{ display:flex; flex-direction:column; }
  .contact-info-list{ flex:1; display:flex; flex-direction:column; }
  .contact-info-row{ flex:1; align-items:center; }
}

/* Info lateral y mapa */
.info-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4); }
.info-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-4); text-align:center; display:grid; gap:var(--sp-1); justify-items:center;
}
.info-card svg{ color:var(--red-accent); }
.info-card h3{ font-family:var(--f-head); font-weight:600; font-size:var(--fs-1); }
.info-card p{ color:var(--txt-2); font-size:var(--fs-0); }
.map-wrap{ border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); margin:var(--sp-3) 0 var(--sp-4); }
.map-wrap iframe{ display:block; width:100%; height:340px; border:0; }

/* FAQ */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:var(--sp-3); }
.faq-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.faq-item button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:none; border:0; padding:var(--sp-3) var(--sp-4); cursor:pointer; text-align:left; font-weight:500;
}
.faq-item .icon{ flex-shrink:0; transition:transform .3s ease; }
.faq-item.is-open .icon{ transform:rotate(45deg); }
.faq-item .faq-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.faq-item.is-open .faq-body{ grid-template-rows:1fr; }
.faq-body > div{ overflow:hidden; }
.faq-body p{ padding:0 var(--sp-4) var(--sp-3); color:var(--txt-2); font-size:var(--fs-0); }

/* Footer. Un solo tono de negro hasta el copyright, sin escalones */
.site-footer{ background:#0A0A0A; border-top:1px solid var(--line); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--sp-6);
  padding:var(--sp-7) 0;
}
.footer-brand p{ color:var(--txt-2); font-size:var(--fs-0); margin-top:var(--sp-3); max-width:260px; }
.footer-contact{ margin-top:var(--sp-3); }
.footer-grid h3{ font-size:var(--fs-1); font-weight:600; margin-bottom:var(--sp-3); }
.footer-grid li{ margin-bottom:var(--sp-2); }
.footer-grid li a, .footer-grid li span{ color:var(--txt-2); font-size:var(--fs-0); }
.footer-grid li a:hover{ color:var(--red-accent); }
.footer-bottom{ background:#0A0A0A; border-top:1px solid var(--line); color:var(--txt-inv-2); }
.footer-bottom .container{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:64px;
}
.footer-bottom p{ font-size:var(--fs-0); }
.footer-social{ display:flex; gap:var(--sp-3); }
.footer-social a{ color:var(--txt-inv-2); transition:color .25s; display:inline-flex; }
.footer-social a:hover{ color:var(--txt-inv); }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:28px; translate:-50% 20px; z-index:100;
  background:var(--red-accent); color:#FFFFFF; font-weight:600; padding:var(--sp-2) var(--sp-4);
  border-radius:999px; font-size:var(--fs-0); opacity:0; pointer-events:none;
  transition:opacity .3s ease, translate .3s ease; box-shadow:var(--shadow-lg);
}
.toast.is-visible{ opacity:1; translate:-50% 0; }

/* Animaciones de scroll — §movimiento
   REGLAS DURAS: no reintroducir blur en los reveals, no escalonar tarjetas */
.reveal{
  opacity:0;
  transition:opacity .9s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* El movimiento fuerte lo llevan las palabras (.w, las genera main.js) */
.reveal.titulo-foco{ transform:translateY(14px); }
.reveal.titulo-foco.is-in{ transform:none; }
.titulo-foco .w{
  display:inline-block; opacity:0; transform:translateY(.55em);
  transition:opacity .5s ease var(--d,0s), transform .55s cubic-bezier(.22,1,.36,1) var(--d,0s);
}
.titulo-foco.is-in .w{ opacity:1; transform:none; }

/* Transición entre páginas. Seguro porque main no contiene position:fixed */
main{ animation:pagina-entra .5s cubic-bezier(.22,1,.36,1) both; }
html.saliendo main{ animation:pagina-sale .3s ease both; }
@keyframes pagina-entra{ from{ opacity:0; transform:scale(.97) } to{ opacity:1; transform:none } }
@keyframes pagina-sale{ from{ opacity:1; transform:none } to{ opacity:0; transform:scale(1.04) } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .reveal, .titulo-foco .w{ opacity:1; transform:none; filter:none; }
}

/* Responsive: se reorganiza, no se encoge — §responsive */
@media (max-width: 1100px){
  .parts-grid{ grid-template-columns:repeat(3, 1fr); }
  .related-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* La NAV colapsa a 1199, no a 900: la fila completa no cabía y el botón de
   cotización se salía de la pantalla. En su propio bloque porque el layout del
   contenido sí cambia a 900 — §header */
@media (max-width: 1199px){
  .nav-links, .nav-search{ display:none; }
  .nav-toggle{ display:block; }
  .site-header.menu-open .nav-links{
    display:flex; flex-direction:column; gap:var(--sp-3);
    position:absolute; left:0; right:0; top:100%;
    background:#0A0A0A; padding:var(--sp-4); box-shadow:var(--shadow-lg);
  }
}
@media (max-width: 900px){
  .value-grid, .cat-grid, .dark-features, .info-cards, .filters, .filter-tags{ grid-template-columns:1fr 1fr; }
  .split, .newsletter__inner, .cat-intro, .product-top, .composition, .spec-table, .support-grid{ grid-template-columns:1fr; }
  .hero--vitrine .hero__content{ grid-template-columns:1fr; gap:var(--sp-4); }
  .vitrine{ min-height:340px; }

  /* Justificado: si el párrafo del hero se justifica y éste no, se pierde el orden */
  .cat-intro p{ text-align:justify; }
  .carousel{ grid-template-columns:1fr; }
  .carousel__thumbs{ grid-template-columns:repeat(4, 1fr); }
  .split{ gap:var(--sp-5); }
}
@media (max-width: 600px){
  .value-grid, .cat-grid, .dark-features, .info-cards, .filters, .filter-tags{ grid-template-columns:1fr; }
  .parts-grid, .related-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom .container{ flex-direction:column; padding-block:var(--sp-3); }

  .nav-row{ gap:var(--sp-2); }
  .nav-row .btn--quote{ margin-left:var(--sp-1); padding:0 var(--sp-2); }
}

/* Bajo 420px "Request a quote" no cabe (pide 341px y a 320 hay 272): el
   rótulo se acorta y el botón sube a 44px — §header */
.quote-corta{ display:none; }
@media (max-width: 420px){
  .site-header .container{ width:calc(100% - 2*var(--sp-3)); }
  .nav-row .btn--quote{ height:44px; padding:0 var(--sp-3); margin-left:var(--sp-1); }
  .nav-toggle{ padding:6px; }
  .quote-larga{ display:none; }
  .quote-corta{ display:inline; }
}
@media (max-width: 400px){
  .nav-row .brand img{ height:16px; }
}
/* Plegables: la bandera del header cede el sitio para que quepa el CTA (sigue
   en el footer y en todos los demás anchos) — §header */
@media (max-width: 330px){
  .nav-row .brand-flag{ display:none; }
  .nav-row .btn--quote{ padding:0 var(--sp-2); }
}

/* Escalones del titular en pantallas angostas — §hero-home.
   De mayor a menor: el último que cabe es el que manda */
@media (max-width: 360px){
  .hero--b1 h1{ letter-spacing:.05em; }
}
@media (max-width: 330px){
  .hero--b1 h1{ font-size:21px; }
}
@media (max-width: 300px){
  .hero--b1 h1{ font-size:19px; }
}

/* Chip WhatsApp — §whatsapp
   El verde es EXCEPCIÓN ÚNICA al acento rojo: prohibido en cualquier otro
   elemento. PENDIENTE: número real de Nordix7 en el href */
.wa-chip{
  position:fixed;
  right:clamp(14px, 2vw, 26px);
  bottom:clamp(14px, 2.5vh, 26px);
  z-index:40;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  background:#25D366; color:#FFFFFF;
  border-radius:50%; text-decoration:none;
  box-shadow:0 14px 30px rgba(19,17,16,.38);
  transition:background .25s, transform .25s;
  animation:wa-entra .5s .8s both;
}
.wa-chip:hover{ background:#1DA851; }
.wa-chip:active{ transform:scale(.96); }
.wa-chip svg{ width:24px; height:24px; flex:none; }
@keyframes wa-entra{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .wa-chip{ animation:none; }
}

/* Contact: la banda de WhatsApp ES la portada — §contact-portada
   Sin efectos de luz: la cenital se probó y se retiró el mismo día */
.ct-wa{
  position:relative; overflow:hidden;
  background:var(--bg); color:var(--txt-inv);
  min-height:100svh; display:flex; align-items:center;
  padding:calc(72px + var(--sp-5)) 0 var(--sp-7);
  border-bottom:1px solid var(--line);
}
.ct-wa__inner{ position:relative; z-index:1; text-align:center; max-width:980px; margin-inline:auto; }

/* Las burbujas SON el titular y se escriben en bucle de 12s. Son decorativas
   (aria-hidden): el titular real es el h1 oculto — §contact-portada */
.ct-charla{ display:flex; flex-direction:column; gap:clamp(16px, 2.4vw, 26px); width:100%; }
.ct-burbuja{
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(24px, 3.6vw, 52px); line-height:1.12; letter-spacing:-.015em;
  padding:clamp(20px, 3vw, 36px) clamp(26px, 3.6vw, 46px);
  border-radius:26px; text-align:left; max-width:88%; opacity:0;
}
.ct-burbuja--cliente{
  background:var(--ink-3); color:#FFFFFF;
  border-bottom-left-radius:8px; align-self:flex-start;
  animation:ct-gg1 12s infinite;
}
/* Misma tinta que el botón: había dos oscuros para el mismo rol */
.ct-burbuja--asesor{
  background:#FFFFFF; color:var(--ink);
  border-bottom-right-radius:8px; align-self:flex-end;
  animation:ct-gg2 12s infinite;
}
.ct-burbuja--asesor .hot{ color:var(--red-accent); }
@keyframes ct-gg1{ 0%,5%{ opacity:0; transform:translateY(14px); } 12%,90%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }
@keyframes ct-gg2{ 0%,17%{ opacity:0; transform:translateY(14px); } 24%,90%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }

/* Titular real para lectores de pantalla y SEO */
.ct-oculto{ position:absolute; left:-9999px; }
@media (prefers-reduced-motion: reduce){
  .ct-burbuja{ animation:none !important; opacity:1; transform:none; }
}
.ct-wa__pre{ font-family:var(--f-head); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; font-size:clamp(26px, 3.1vw, 40px); }
.ct-wa__pre .hot{ color:var(--red-accent); }
.ct-wa__nota{ color:var(--txt-inv-2); font-size:var(--fs-1); max-width:52ch; margin:clamp(18px, 2.4vw, 26px) auto var(--sp-5); line-height:1.6; }
/* El verde barre desde la izquierda. El rótulo NO pasa a blanco: sobre el
   verde daba 1.98:1 y quedaba ilegible justo al pulsarlo — §whatsapp */
.btn-wa{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px; background:#FFFFFF; color:var(--ink); border-radius:8px; padding:15px 30px; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; -webkit-tap-highlight-color:transparent; }

.btn-wa::before{ content:''; position:absolute; inset:0; background:#25D366; transform:scaleX(0); transform-origin:left; transition:transform .95s cubic-bezier(.25,.1,.25,1); }
.btn-wa:hover::before{ transform:scaleX(1); }

.btn-wa:active::before{ transform:scaleX(1); transition-duration:.22s; }
.btn-wa > *{ position:relative; z-index:1; }
.btn-wa svg{ width:19px; height:19px; flex:none; }
@media (prefers-reduced-motion: reduce){
  .btn-wa, .btn-wa::before{ transition:none; }
}

/* Selector de idioma — §idioma. El panel reusa la receta vidrio de los combos */
.lang-select{ position:relative; flex-shrink:0; }
.lang-select__btn{
  display:flex; align-items:center; gap:4px;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:.06em;
  color:rgba(239,233,223,.55); white-space:nowrap; transition:color .2s;
}
.lang-select__btn:hover{ color:var(--txt-inv); }
.lang-select__btn b{ color:var(--txt-inv); font-weight:600; }
.lang-select__btn svg{ flex-shrink:0; }
.lang-select__menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:60;
  display:flex; flex-direction:column; min-width:140px;
  background:rgba(19,17,16,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(239,233,223,.14);
  border-radius:8px; padding:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
@supports not ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
  .lang-select__menu{ background:rgba(19,17,16,.94); }
}
.lang-select__menu[hidden]{ display:none; }
.lang-opt{
  display:block; width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:13px; font-weight:500;
  color:var(--txt-inv); padding:8px 10px; border-radius:5px;
  transition:background .15s, color .15s;
}
.lang-opt:hover{ background:rgba(239,233,223,.08); color:var(--red-accent); }
.lang-opt.activo{ color:var(--red-accent); }

/* Móvil: fila EN / ES dentro del desplegable */
.lang-movil{ display:none; }
/* mismo umbral que la nav: el selector de escritorio vive con ella */
@media (max-width: 1199px){
  .lang-select{ display:none; }
  .lang-movil{
    display:flex; align-items:center; gap:4px;
    border-top:1px solid rgba(239,233,223,.14);
    margin-top:6px; padding-top:6px;
  }
  .lang-movil .lang-opt{ width:auto; min-height:44px; padding:8px 14px; font-size:15px; }
  .lang-movil span{ color:rgba(239,233,223,.35); }
}