/* ============================================================
   HERRERÍA Y DISEÑO — Protección industrial
   Paleta: Negro obsidiana + Amarillo seguridad
   Mobile-first
   ============================================================ */

:root{
  --bg:         #071427;   /* Azul marino profundo */
  --bg-2:       #0d2140;   /* Azul secundario */
  --bg-3:       #163155;   /* Azul terciario */
  --ink:        #f4f4f2;
  --ink-dim:    #94a9c4;   /* Gris con tinte azul */
  --line:       #1c355c;
  --line-2:     #2a4a7a;

  /* Sistema tricolor: naranja (protagónico) + rojo (CTA crítico) + azul (highlight) */
  --yellow:     #ff6a00;   /* Naranja seguridad — MANTIENE nombre "yellow" para reuso */
  --yellow-2:   #ff8a2b;   /* Naranja claro */
  --yellow-3:   #e05a00;   /* Naranja oscuro */
  --red:        #e63946;   /* Rojo alarma */
  --red-2:      #ff4757;
  --blue:       #3d9be9;   /* Azul cielo — para datos y highlights */
  --danger:     #e63946;

  --font-sans:  'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-disp:  'Archivo Black', 'Space Grotesk', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --pad:        clamp(20px, 5vw, 80px);
  --pad-y:      clamp(60px, 10vw, 140px);
  --radius:     6px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }
em{ font-style:normal; color:var(--yellow); }

/* ---------- GRAIN OVERLAY ---------- */
.grain{
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress{
  position:fixed; top:0; left:0;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--yellow-3), var(--yellow), var(--yellow-2));
  box-shadow:0 0 20px var(--yellow), 0 0 40px rgba(255,184,0,.4);
  z-index:101;
  transition:width .1s linear;
}

/* ---------- CUSTOM CURSOR (desktop only) ---------- */
.cursor{
  position:fixed; top:0; left:0;
  width:28px; height:28px;
  border:1.5px solid var(--yellow);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:transform .18s var(--ease), width .2s var(--ease), height .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  z-index:999;
  display:none;
  mix-blend-mode:difference;
}
.cursor::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:4px; height:4px; border-radius:50%;
  background:var(--yellow);
}
.cursor.is-hover{
  width:60px; height:60px;
  background:rgba(255,184,0,.15);
  border-color:var(--yellow-2);
}
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled{
  border-bottom-color:var(--line);
  background:rgba(10,10,10,.9);
}

.brand{
  display:inline-flex; align-items:center; gap:12px;
  line-height:.9;
  transition:transform .3s var(--ease);
}
.brand:hover{ transform:translateY(-1px); }
.brand-mark{
  width:38px; height:38px;
  border-radius:8px;
  display:block; flex-shrink:0;
  filter:drop-shadow(0 4px 12px rgba(255,106,0,.25));
  transition:transform .4s var(--ease), filter .3s var(--ease);
}
.brand:hover .brand-mark{
  transform:rotate(-4deg) scale(1.06);
  filter:drop-shadow(0 6px 18px rgba(255,106,0,.5));
}
.brand-text{
  display:inline-flex; flex-direction:column; gap:4px;
  line-height:.9;
}
@media (min-width: 900px){
  .brand-mark{ width:44px; height:44px; }
  .brand{ gap:14px; }
}
.brand-top{
  font-family:var(--font-disp);
  font-size:18px; color:var(--ink);
  letter-spacing:-.03em;
  display:inline-flex; align-items:center; gap:6px;
  line-height:1;
}
.brand-amp{
  color:var(--red);
  font-family:var(--font-disp);
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.brand:hover .brand-amp{ transform:rotate(-8deg) scale(1.15); color:var(--red-2); }
.brand-bar{
  display:block; height:3px; width:100%;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 8px, transparent 8px 14px);
  border-radius:1px;
}
.brand-bot{
  font-family:var(--font-mono); font-size:9px;
  color:var(--ink-dim);
  letter-spacing:.22em; text-transform:uppercase;
  line-height:1;
}

@media (min-width: 900px){
  .brand-top{ font-size:20px; }
  .brand-bot{ font-size:10px; letter-spacing:.24em; }
}

.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(4,10,20,.55);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
  z-index:99;
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }

.nav-links{
  position:fixed; inset:0 0 0 auto;
  width:min(78vw, 340px);
  padding:100px 32px 40px;
  background:rgba(13,33,64,.96);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-left:1px solid var(--line);
  box-shadow:-30px 0 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:8px;
  transform:translateX(105%);
  transition:transform .45s var(--ease);
  z-index:100;
}
.nav-links.is-open{ transform:translateX(0); }

@supports not (backdrop-filter: blur(1px)){
  .nav-backdrop{ background:rgba(4,10,20,.85); }
  .nav-links{ background:#0d2140; }
}
.nav-links a{
  padding:16px 4px;
  border-bottom:1px solid var(--line);
  font-size:18px; font-weight:500;
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.nav-links a:hover{ color:var(--yellow); padding-left:8px; }
.nav-links .nav-cta{
  margin-top:20px;
  background:var(--red); color:#fff;
  padding:16px 20px; border-radius:var(--radius);
  text-align:center; font-weight:700; border-bottom:0;
  box-shadow:0 6px 24px rgba(230,57,70,.35);
}
.nav-links .nav-cta:hover{ background:var(--red-2); padding-left:20px; }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px;
  width:38px; height:38px; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:4px;
  z-index:102;
}
.nav-toggle span{
  width:18px; height:2px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--yellow); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--yellow); }

@media (min-width: 900px){
  .nav-toggle{ display:none; }
  .nav-backdrop{ display:none; }
  .nav-links{
    position:static; transform:none;
    flex-direction:row; align-items:center; gap:6px;
    padding:0; width:auto; background:transparent; border:0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none;
  }
  .nav-links a{
    padding:8px 14px; font-size:14px; border-bottom:0;
    color:var(--ink-dim);
  }
  .nav-links a:hover{ color:var(--yellow); padding-left:14px; }
  .nav-links .nav-cta{
    margin:0 0 0 12px; padding:12px 20px; color:#fff;
    background:var(--red);
    box-shadow:0 6px 24px rgba(230,57,70,.35);
  }
  .nav-links .nav-cta:hover{ background:var(--red-2); padding-left:20px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  padding:140px var(--pad) 80px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(255,106,0,.08), transparent 60%),
    radial-gradient(800px 400px at 0% 100%, rgba(230,57,70,.06), transparent 60%),
    var(--bg);
}
@media (max-width: 640px){
  .hero{ padding:160px var(--pad) 60px; }
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events:none;
}

.sparks{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1; opacity:.9;
}
.hero-scan{
  position:absolute; left:0; right:0; top:0;
  height:180px; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(255,184,0,.12), transparent 70%);
  animation:scan 6s ease-in-out infinite;
}
@keyframes scan{
  0%,100% { transform:translateY(0); opacity:.6; }
  50%     { transform:translateY(60vh); opacity:.15; }
}

.hero-tape{
  position:absolute; left:0; right:0;
  background:var(--yellow); color:#000;
  padding:10px 0;
  font-family:var(--font-mono); font-weight:600;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  display:flex; gap:40px; white-space:nowrap;
  overflow:hidden;
  z-index:5;
}
.hero-tape span{
  display:inline-block; padding-right:40px;
  animation:tape 40s linear infinite;
}
.hero-tape-top{ top:78px; }
.hero-tape-bottom{
  position:relative;
  background:#0a1a34;
  color:var(--yellow);
  border-top:1px solid rgba(255,106,0,.4);
  border-bottom:1px solid rgba(255,106,0,.4);
}
.hero-tape-bottom span{ animation-direction:reverse; }

@keyframes tape{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.hero-inner{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; width:100%;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  border:1px solid var(--line-2); border-radius:100px;
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-dim);
  margin-bottom:28px;
}
.hero-eyebrow .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 12px var(--yellow);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  50%{ transform:scale(1.4); opacity:.6; }
}

.hero-title{
  font-family:var(--font-disp);
  font-size:clamp(42px, 11vw, 148px);
  line-height:.92; letter-spacing:-.03em;
  margin:0 0 32px;
  font-weight:900;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line.accent{
  color:var(--yellow);
  font-style:italic;
  transform:translateX(2vw);
}
.hero-title .dot-yellow{ color:var(--yellow); display:inline-block; animation:blink 1.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

.hero-title .word{
  display:inline-block;
  transform:translateY(110%);
  animation:wordUp .9s var(--ease) forwards;
}
.hero-title .line:nth-child(1) .word{ animation-delay:.05s; }
.hero-title .line:nth-child(2) .word:nth-child(1){ animation-delay:.15s; }
.hero-title .line:nth-child(2) .word:nth-child(2){ animation-delay:.22s; }
.hero-title .line:nth-child(2) .word:nth-child(3){ animation-delay:.29s; }
.hero-title .line:nth-child(3) .word:nth-child(1){ animation-delay:.38s; }
.hero-title .line:nth-child(3) .word:nth-child(2){ animation-delay:.45s; }

@keyframes wordUp{
  0%   { transform:translateY(110%); opacity:0; }
  100% { transform:translateY(0);    opacity:1; }
}

.hero-sub{
  max-width:640px;
  font-size:clamp(16px, 2vw, 20px);
  color:var(--ink-dim);
  margin:0 0 40px;
}
.hero-sub b{ color:var(--ink); font-weight:600; }

.hero-cta{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom:56px;
}

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px;
  font-weight:600; font-size:15px;
  border-radius:var(--radius);
  overflow:hidden;
  will-change:transform;
  transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn .btn-label{ position:relative; z-index:2; }
.btn svg{ width:16px; height:16px; position:relative; z-index:2; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(6px); }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .8s var(--ease);
  z-index:1;
}
.btn:hover::before{ transform:translateX(100%); }

.btn-primary{
  background:var(--yellow); color:#000;
  box-shadow:0 8px 30px rgba(255,184,0,.25);
}
.btn-primary:hover{ background:var(--yellow-2); box-shadow:0 12px 40px rgba(255,184,0,.45); }
.btn-ghost{
  border:1px solid var(--line-2);
  color:var(--ink);
  background:transparent;
}
.btn-ghost::before{ background:linear-gradient(120deg, transparent 30%, rgba(255,184,0,.15) 50%, transparent 70%); }
.btn-ghost:hover{ border-color:var(--yellow); color:var(--yellow); }

.hero-stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:20px;
  padding-top:32px; border-top:1px solid var(--line);
}
.stat{
  display:flex; flex-direction:column; gap:12px;
  position:relative;
  padding-left:16px;
  border-left:2px solid var(--yellow);
}
.stat-alert{ border-left-color:var(--red); }
.stat-alert .stat-num{ color:var(--red); text-shadow:0 0 24px rgba(230,57,70,.4); }
.stat-value{
  display:flex; align-items:baseline; gap:2px;
  line-height:1;
}
.stat-num{
  font-family:var(--font-disp);
  font-size:clamp(38px, 6vw, 60px);
  line-height:1; color:var(--yellow);
  letter-spacing:-.02em;
}
.stat-plus{
  font-family:var(--font-disp);
  color:var(--yellow); font-size:clamp(22px, 3vw, 32px);
  line-height:1;
  transform:translateY(-.1em);
}
.stat-label{
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-dim);
}

@media (max-width: 640px){
  .hero-stats{ grid-template-columns:1fr; gap:24px; }
  .hero-tape-top{ top:70px; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{
  position:relative; z-index:2;
  padding:var(--pad-y) var(--pad);
}
.section-dark{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head{
  max-width:840px; margin:0 auto var(--pad); text-align:left;
}
.tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px;
  color:var(--yellow); letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:20px;
  padding:6px 12px;
  border:1px solid rgba(255,184,0,.3);
  border-radius:100px;
}
.section-head h2{
  font-family:var(--font-disp);
  font-size:clamp(32px, 6vw, 68px);
  line-height:1.02; letter-spacing:-.02em;
  margin:0 0 20px;
}
.section-head p{
  font-size:clamp(15px, 1.6vw, 18px);
  color:var(--ink-dim); max-width:640px; margin:0;
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  max-width:1400px; margin:0 auto;
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width: 640px){ .services-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 960px){ .services-grid{ grid-template-columns:repeat(3, 1fr); } }

/* Servicios — variedad de acentos por posición para más dinamismo */
@media (min-width: 960px){
  /* Columna izquierda mantiene naranja principal */
  /* Columna central: acento rojo alarma */
  .services-grid .svc:nth-child(2) .svc-num{ color:var(--red); }
  .services-grid .svc:nth-child(5) .svc-num{ color:var(--red); }
  .services-grid .svc:nth-child(8) .svc-num{ color:var(--red); }

  /* Columna derecha: acento azul */
  .services-grid .svc:nth-child(3) .svc-num{ color:var(--blue); }
  .services-grid .svc:nth-child(6) .svc-num{ color:var(--blue); }
  .services-grid .svc:nth-child(9) .svc-num{ color:var(--blue); }

  /* Centro exacto (5): fondo con rayas de peligro sutiles + underline rojo al hover */
  .services-grid .svc:nth-child(5){
    background:
      repeating-linear-gradient(45deg,
        rgba(230,57,70,.045) 0 10px,
        transparent 10px 22px),
      linear-gradient(135deg, rgba(255,106,0,.06) 0%, transparent 100%);
  }
  .services-grid .svc:nth-child(5)::after{ background:var(--red); }
  .services-grid .svc:nth-child(5) .svc-ico{ color:var(--yellow-2); }

  /* Los card de columna azul cambian su underline al azul */
  .services-grid .svc:nth-child(3)::after,
  .services-grid .svc:nth-child(6)::after,
  .services-grid .svc:nth-child(9)::after{ background:var(--blue); }
}

.svc{
  background:var(--bg);
  padding:44px 24px 40px;
  position:relative;
  text-align:center;
  transition:background .3s var(--ease), transform .4s var(--ease);
  overflow:hidden;
  transform-style:preserve-3d;
}
.svc h3{ max-width:280px; margin-left:auto; margin-right:auto; }
.svc p{ max-width:320px; margin-left:auto; margin-right:auto; }
@media (min-width: 640px){ .svc{ padding:48px 28px 44px; } }
.svc::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,184,0,.12), transparent 45%);
  opacity:0; transition:opacity .3s var(--ease);
  pointer-events:none;
}
.svc::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--yellow);
  transform:translateX(-101%); transition:transform .5s var(--ease);
}
.svc:hover{ background:var(--bg-3); }
.svc:hover::before{ opacity:1; }
.svc:hover::after{ transform:translateX(0); }
.svc:hover .svc-num{ color:var(--yellow-2); letter-spacing:.25em; }
.svc-num{ transition:color .3s var(--ease), letter-spacing .4s var(--ease); }
.svc-num{
  font-family:var(--font-mono); font-size:11px;
  color:var(--yellow); letter-spacing:.15em;
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:24px;
  position:relative;
}
/* LED de status junto al código — parpadea como equipo industrial en línea */
.svc-num::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
  animation:svc-led 2s var(--ease) infinite;
}
@keyframes svc-led{
  0%, 60%, 100% { opacity:1; transform:scale(1); }
  75%           { opacity:.25; transform:scale(.85); }
}
/* Delays escalonados para que no parpadeen al unísono */
.services-grid .svc:nth-child(2) .svc-num::before{ animation-delay:.2s; }
.services-grid .svc:nth-child(3) .svc-num::before{ animation-delay:.4s; }
.services-grid .svc:nth-child(4) .svc-num::before{ animation-delay:.6s; }
.services-grid .svc:nth-child(5) .svc-num::before{ animation-delay:.8s; }
.services-grid .svc:nth-child(6) .svc-num::before{ animation-delay:1s; }
.services-grid .svc:nth-child(7) .svc-num::before{ animation-delay:1.2s; }
.services-grid .svc:nth-child(8) .svc-num::before{ animation-delay:1.4s; }
.services-grid .svc:nth-child(9) .svc-num::before{ animation-delay:1.6s; }

/* Corner brackets — placas metálicas industriales que se expanden al hover */
.svc h3::before,
.svc h3::after{
  content:""; position:absolute;
  width:14px; height:14px;
  border:2px solid var(--yellow);
  opacity:0;
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.svc h3{ position:relative; }
.svc h3::before{
  top:-14px; left:-14px;
  border-right:0; border-bottom:0;
  transform:translate(6px, 6px);
}
.svc h3::after{
  top:-14px; right:-14px;
  border-left:0; border-bottom:0;
  transform:translate(-6px, 6px);
}
.svc:hover h3::before,
.svc:hover h3::after{
  opacity:.7; transform:translate(0, 0);
}
.services-grid .svc:nth-child(5) h3::before,
.services-grid .svc:nth-child(5) h3::after{ border-color:var(--red); }
.services-grid .svc:nth-child(3) h3::before,
.services-grid .svc:nth-child(3) h3::after,
.services-grid .svc:nth-child(6) h3::before,
.services-grid .svc:nth-child(6) h3::after,
.services-grid .svc:nth-child(9) h3::before,
.services-grid .svc:nth-child(9) h3::after{ border-color:var(--blue); }
.svc h3{
  font-family:var(--font-sans); font-weight:600;
  font-size:20px; letter-spacing:-.01em;
  margin:0 0 12px;
}
.svc p{
  margin:0; font-size:14px; color:var(--ink-dim); line-height:1.6;
}

/* ============================================================
   PORTAFOLIO — BENTO
   ============================================================ */
.filter{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 auto var(--pad);
  max-width:1400px;
}
.chip{
  padding:10px 18px;
  border:1px solid var(--line-2);
  border-radius:100px;
  font-size:13px; color:var(--ink-dim);
  transition:all .2s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--ink-dim); }
.chip.is-active{
  background:var(--yellow); color:#000;
  border-color:var(--yellow); font-weight:600;
}

.bento{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  max-width:1400px; margin:0 auto;
  grid-auto-rows:180px;
}
@media (min-width: 720px){
  .bento{ grid-template-columns:repeat(4, 1fr); grid-auto-rows:220px; gap:14px; }
}
@media (min-width: 1100px){
  .bento{ grid-template-columns:repeat(6, 1fr); grid-auto-rows:220px; }
}

.bento-item{
  position:relative; margin:0;
  overflow:hidden; border-radius:var(--radius);
  background:var(--bg-3);
  grid-column:span 1; grid-row:span 1;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bento-tall{ grid-row:span 2; }
.bento-wide{ grid-column:span 2; }

.bento-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:saturate(1.05) brightness(.92);
  animation:kenburns 18s ease-in-out infinite alternate;
}
.bento-item:nth-child(3n) img{ animation-duration:22s; animation-delay:-4s; }
.bento-item:nth-child(3n+1) img{ animation-duration:26s; animation-delay:-9s; }

@keyframes kenburns{
  from{ transform:scale(1) translate(0,0); }
  to  { transform:scale(1.08) translate(-1%, -1%); }
}
.bento-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 45%);
  opacity:.6; transition:opacity .3s var(--ease);
}
.bento-item:hover img{ animation-play-state:paused; transform:scale(1.12); filter:saturate(1.2) brightness(1); }
.bento-item:hover::after{ opacity:.95; }
.bento-item figcaption{
  position:absolute; left:14px; right:14px; bottom:12px;
  color:#fff; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  z-index:2;
  transform:translateY(4px); opacity:.85;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.bento-item:hover figcaption{ transform:translateY(0); opacity:1; }
.bento-item.is-hidden{ display:none; }

/* ============================================================
   PROCESO
   ============================================================ */
.process{
  list-style:none; padding:0; margin:0;
  display:grid; gap:16px;
  max-width:1400px; margin:0 auto;
  counter-reset:step;
  position:relative;
}
.process-line{
  position:absolute; top:60px; left:5%; right:5%;
  height:2px;
  background:linear-gradient(90deg, var(--yellow), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 2s var(--ease);
  display:none;
}
.process-line::after{
  content:""; position:absolute; right:0; top:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 20px var(--yellow);
}
@media (min-width: 1000px){
  .process-line{ display:block; }
}
.process.is-in .process-line{ transform:scaleX(1); }

@media (min-width: 720px){ .process{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1000px){ .process{ grid-template-columns:repeat(4, 1fr); } }

.process li{
  position:relative;
  padding:32px 24px 28px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .3s var(--ease);
}
.process li::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--yellow);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.process li:hover{ transform:translateY(-6px); border-color:var(--yellow-3); }
.process li:hover::before{ transform:scaleX(1); }
.process li:hover .p-num{ transform:scale(1.08) translateX(4px); }
.p-num{ transition:transform .4s var(--ease); }
.p-num{
  font-family:var(--font-disp);
  font-size:56px; color:var(--yellow);
  line-height:1; display:block; margin-bottom:16px;
  opacity:.85;
}
.process h3{
  font-family:var(--font-sans); font-weight:600;
  font-size:19px; margin:0 0 10px;
}
.process p{ margin:0; color:var(--ink-dim); font-size:14px; }

/* ============================================================
   NOSOTROS
   ============================================================ */
.nosotros-grid{
  display:grid; gap:48px;
  max-width:1200px; margin:0 auto;
}
@media (min-width: 900px){
  .nosotros-grid{ grid-template-columns:1.2fr 1fr; gap:80px; align-items:start; }
}
.lead{
  font-size:clamp(15px, 1.6vw, 18px);
  color:var(--ink-dim); line-height:1.7;
}
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checks li{
  padding:16px 18px 16px 48px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  position:relative;
  font-size:14px; color:var(--ink-dim);
}
.checks li b{ color:var(--ink); }
.checks li{
  transition:transform .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.checks li:hover{
  transform:translateX(6px);
  border-color:var(--yellow);
  padding-left:56px;
}
.checks li::before{
  content:""; position:absolute; left:18px; top:50%;
  width:16px; height:16px; margin-top:-8px;
  background:var(--yellow);
  clip-path:polygon(14% 44%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 40% 66%);
  transition:transform .3s var(--ease);
}
.checks li:hover::before{ transform:rotate(-8deg) scale(1.15); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{
  background:
    radial-gradient(700px 400px at 20% 0%, rgba(255,184,0,.06), transparent 60%),
    var(--bg);
}
.contacto-inner{ max-width:1200px; margin:0 auto; }
.contact-cards{
  display:grid; gap:14px; margin-top:40px;
  grid-template-columns:1fr;
}
@media (min-width: 640px){ .contact-cards{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1000px){ .contact-cards{ grid-template-columns:repeat(4, 1fr); } }

.c-card{
  padding:28px 24px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
a.c-card{ position:relative; overflow:hidden; }
a.c-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(255,184,0,.18), transparent 50%);
  opacity:0; transition:opacity .3s var(--ease);
  pointer-events:none;
}
a.c-card:hover::before{ opacity:1; }
a.c-card:hover{ border-color:var(--yellow); transform:translateY(-4px); background:var(--bg-3); }
.c-label{
  font-family:var(--font-mono); font-size:11px;
  color:var(--yellow); letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:14px;
}
.c-value{
  font-family:var(--font-sans); font-weight:600;
  font-size:18px; color:var(--ink); margin-bottom:24px;
  word-break:break-word;
}
.c-cta{
  margin-top:auto; font-size:13px; color:var(--ink-dim);
  transition:color .2s var(--ease);
}
a.c-card:hover .c-cta{ color:var(--yellow); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  padding:40px var(--pad);
  border-top:1px solid var(--line);
  background:var(--bg);
  position:relative; z-index:2;
}
.footer-inner{
  max-width:1400px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.footer-brand{
  display:inline-flex; flex-direction:column; gap:6px;
  line-height:.9;
}
.footer-brand .brand-top{
  font-family:var(--font-disp);
  font-size:22px; color:var(--ink);
  letter-spacing:-.03em;
  display:inline-flex; align-items:center; gap:8px;
  line-height:1;
}
.footer-brand .brand-amp{ color:var(--red); font-family:var(--font-disp); }
.footer-brand .brand-bar{
  display:block; height:4px; width:100%;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 10px, transparent 10px 16px);
  border-radius:2px;
}
.footer-brand .brand-bot{
  font-family:var(--font-mono); font-size:10px;
  color:var(--ink-dim);
  letter-spacing:.24em; text-transform:uppercase;
  line-height:1;
}
.footer-copy{
  margin:0; font-size:12px; color:var(--ink-dim);
  font-family:var(--font-mono);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   ROTOR (palabra rotativa en eyebrow)
   ============================================================ */
.rotor{
  display:inline-block;
  color:var(--yellow); font-weight:700;
  min-width:82px;
  position:relative;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.rotor::after{
  content:""; position:absolute; right:-4px; top:0; bottom:0;
  width:2px; background:var(--yellow);
  animation:cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink{ 50%{ opacity:0; } }

.rotor.is-out{ transform:translateY(-90%); opacity:0; }
.rotor.is-in{ animation:rotor-in .5s var(--ease) forwards; }
@keyframes rotor-in{
  0%   { transform:translateY(90%); opacity:0; filter:blur(4px); }
  60%  { opacity:1; filter:blur(0); }
  100% { transform:translateY(0);   opacity:1; }
}

/* ============================================================
   WELD DIVIDER (cordón de soldadura entre secciones)
   ============================================================ */
.weld-divider{
  position:relative;
  max-width:1400px; margin:0 auto;
  padding:0 var(--pad);
  height:30px;
  z-index:3;
}
.weld-divider svg{
  width:100%; height:100%;
  overflow:visible;
}
.weld-path{
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  transition:stroke-dashoffset 2.2s var(--ease);
  filter:drop-shadow(0 0 6px rgba(255,184,0,.55));
}
.weld-divider.is-in .weld-path{ stroke-dashoffset:0; }

.weld-spark{
  position:absolute; top:50%; left:0;
  width:12px; height:12px; margin-top:-6px;
  background:radial-gradient(circle, #fff 0%, var(--yellow) 45%, transparent 70%);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.weld-divider.is-in .weld-spark{
  animation:weld-spark-run 2.2s var(--ease) forwards;
}
@keyframes weld-spark-run{
  0%   { left:var(--pad, 20px); opacity:0; transform:scale(.4); }
  8%   { opacity:1; transform:scale(1.2); }
  92%  { opacity:1; }
  100% { left:calc(100% - var(--pad, 20px)); opacity:0; transform:scale(.4); }
}

/* ============================================================
   SECTION HEAD CUT (cordón corto debajo del título)
   ============================================================ */
.section-head::after{
  content:""; display:block; height:3px; width:0;
  margin-top:28px; border-radius:2px;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 10px, transparent 10px 16px);
  transition:width 1.4s var(--ease);
  box-shadow:0 0 12px rgba(255,184,0,.5);
}
.section-head.is-in::after{ width:110px; }

/* ============================================================
   SVC ICONS (se sueldan al hover)
   ============================================================ */
.svc-ico{
  display:block;
  width:64px; height:64px;
  color:var(--yellow);
  margin:0 auto 22px;
  opacity:.9;
  transition:opacity .3s var(--ease), transform .5s var(--ease), filter .3s var(--ease);
}
@media (min-width: 640px){
  .svc-ico{ width:72px; height:72px; margin-bottom:26px; }
}
.svc-ico path, .svc-ico circle{
  stroke-dasharray:400;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .8s var(--ease);
  filter:drop-shadow(0 0 0 transparent);
}
.svc:hover .svc-ico{
  opacity:1; transform:scale(1.08) rotate(-2deg);
  filter:drop-shadow(0 0 12px rgba(255,184,0,.5));
}
/* dibujado al hover — el path se "suelda" */
.svc:hover .svc-ico path,
.svc:hover .svc-ico circle{
  animation:weldDraw 1s var(--ease) forwards;
}
@keyframes weldDraw{
  0%   { stroke-dashoffset:400; }
  100% { stroke-dashoffset:0; }
}

/* ============================================================
   BOLTS (tornillos hexagonales)
   ============================================================ */
.bolt{
  position:absolute; width:12px; height:12px;
  background:var(--yellow-3);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition:transform .5s var(--ease), background .3s var(--ease);
  z-index:2;
  opacity:.65;
}
.bolt::after{
  content:""; position:absolute; inset:2px;
  background:#000;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.bolt-tl{ top:10px; left:10px; }
.bolt-tr{ top:10px; right:10px; }
.bolt-bl{ bottom:10px; left:10px; }
.bolt-br{ bottom:10px; right:10px; }

.process li:hover .bolt{
  background:var(--yellow); opacity:1;
}
.process li:hover .bolt-tl{ transform:rotate(60deg); }
.process li:hover .bolt-tr{ transform:rotate(-60deg); }
.process li:hover .bolt-bl{ transform:rotate(-60deg); }
.process li:hover .bolt-br{ transform:rotate(60deg); }

/* ============================================================
   HERO TITLE — flash de plasma detrás de cada palabra
   ============================================================ */
.hero-title .word{ position:relative; }
.hero-title .word::before{
  content:""; position:absolute; inset:-4px -8px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), rgba(255,184,0,.9), transparent);
  filter:blur(12px);
  opacity:0;
  z-index:-1;
  animation:plasma-flash .9s var(--ease) forwards;
}
.hero-title .line:nth-child(1) .word::before{ animation-delay:.08s; }
.hero-title .line:nth-child(2) .word:nth-child(1)::before{ animation-delay:.18s; }
.hero-title .line:nth-child(2) .word:nth-child(2)::before{ animation-delay:.25s; }
.hero-title .line:nth-child(2) .word:nth-child(3)::before{ animation-delay:.32s; }
.hero-title .line:nth-child(3) .word:nth-child(1)::before{ animation-delay:.41s; }
.hero-title .line:nth-child(3) .word:nth-child(2)::before{ animation-delay:.48s; }
@keyframes plasma-flash{
  0%   { opacity:0; transform:scaleX(.2); }
  35%  { opacity:1; }
  100% { opacity:0; transform:scaleX(1.2); }
}

/* ============================================================
   NAV — LINK DESTACADO "RACKS"
   ============================================================ */
.nav-featured{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink) !important;
  font-weight:600;
}
.nav-featured-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 10px var(--yellow), 0 0 20px rgba(255,106,0,.5);
  animation:pulse 2s ease-in-out infinite;
}
.nav-featured-badge{
  display:none;
  font-family:var(--font-mono); font-size:9px;
  padding:3px 7px;
  background:linear-gradient(135deg, var(--yellow-3), var(--yellow));
  color:#0a0a0a; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:100px;
  line-height:1;
  box-shadow:0 4px 12px rgba(255,106,0,.35);
}
@media (min-width: 900px){
  .nav-featured-badge{ display:inline-flex; align-items:center; }
  .nav-featured:hover{ color:var(--yellow) !important; }
  .nav-featured:hover .nav-featured-badge{ transform:translateY(-1px); }
}
@media (max-width: 899px){
  .nav-featured{
    background:linear-gradient(120deg, rgba(255,106,0,.12), transparent 70%);
    padding-left:14px !important;
    border-left:3px solid var(--yellow) !important;
    border-bottom-color:var(--line) !important;
  }
  .nav-featured-badge{
    display:inline-flex; align-items:center;
    margin-left:auto;
  }
}

/* ============================================================
   TAG HOT (variante roja pulsante para especialidad)
   ============================================================ */
.tag-hot{
  color:#fff !important;
  background:linear-gradient(120deg, var(--red), var(--yellow-3));
  border-color:transparent !important;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(230,57,70,.28);
}
.tag-hot-dot{
  width:8px; height:8px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px #fff;
  animation:pulse 1.6s ease-in-out infinite;
}

/* ============================================================
   SECCIÓN RACKS — ESPECIALIDAD DESTACADA
   ============================================================ */
.section-racks{
  position:relative;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(255,106,0,.12), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(61,155,233,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.racks-blueprint{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,106,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,.045) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
  pointer-events:none;
}
.racks-head{
  position:relative; z-index:2;
  max-width:900px; margin:0 auto var(--pad);
}
.racks-head h2{
  font-family:var(--font-disp);
  font-size:clamp(34px, 6.5vw, 76px);
  line-height:1.02; letter-spacing:-.025em;
  margin:0 0 20px;
}
.racks-head p{
  font-size:clamp(15px, 1.7vw, 19px);
  color:var(--ink-dim); max-width:720px; margin:0; line-height:1.7;
}
.racks-head p b{ color:var(--ink); font-weight:600; }

/* ---------- GRID DE TIPOS DE RACK ---------- */
.racks-grid{
  position:relative; z-index:2;
  display:grid; gap:14px;
  max-width:1400px; margin:0 auto;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  .racks-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width: 1000px){
  .racks-grid{
    grid-template-columns:repeat(3, 1fr);
    grid-auto-flow:dense;
  }
  .rack-card-hero{
    grid-column:span 2; grid-row:span 2;
  }
}

.rack-card{
  position:relative;
  padding:32px 26px 30px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.rack-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--yellow);
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.rack-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,106,0,.1), transparent 45%);
  opacity:0; transition:opacity .3s var(--ease);
  pointer-events:none;
}
.rack-card:hover{ border-color:var(--yellow-3); background:var(--bg-3); transform:translateY(-4px); }
.rack-card:hover::before{ transform:scaleY(1); }
.rack-card:hover::after{ opacity:1; }

.rack-card h3{
  font-family:var(--font-sans); font-weight:600;
  font-size:20px; letter-spacing:-.01em;
  margin:0 0 10px;
  position:relative; z-index:2;
}
.rack-card p{
  margin:0; font-size:14px; color:var(--ink-dim); line-height:1.65;
  position:relative; z-index:2;
}

.rack-card-ico{
  color:var(--yellow);
  margin-bottom:22px;
  position:relative; z-index:2;
  transition:transform .5s var(--ease), color .3s var(--ease);
}
.rack-card-ico svg{ width:56px; height:56px; }
.rack-card:hover .rack-card-ico{ transform:translateY(-2px) scale(1.05); color:var(--yellow-2); }

/* Card destacada (hero) */
.rack-card-hero{
  background:
    linear-gradient(135deg, rgba(255,106,0,.09), transparent 55%),
    linear-gradient(180deg, var(--bg-3), var(--bg));
  border-color:var(--yellow-3);
  padding:44px 36px 40px;
  display:flex; flex-direction:column;
}
.rack-card-hero::before{ width:5px; transform:scaleY(1); background:linear-gradient(180deg, var(--yellow-2), var(--yellow-3)); }
.rack-card-hero .rack-card-ico svg{ width:96px; height:80px; }
.rack-card-hero h3{ font-size:28px; }
.rack-card-hero p{ font-size:15px; max-width:520px; }

.rack-badge{
  position:absolute; top:16px; right:16px;
  z-index:3;
  font-family:var(--font-mono); font-size:10px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px;
  background:var(--red);
  color:#fff;
  border-radius:100px;
  box-shadow:0 6px 20px rgba(230,57,70,.4);
  animation:badge-pulse 2.4s ease-in-out infinite;
}
@keyframes badge-pulse{
  0%, 100%{ box-shadow:0 6px 20px rgba(230,57,70,.4); }
  50%    { box-shadow:0 6px 28px rgba(230,57,70,.7), 0 0 0 4px rgba(230,57,70,.15); }
}

.rack-specs{
  list-style:none; margin:28px 0 0; padding:22px 0 0;
  border-top:1px dashed var(--line-2);
  display:grid; gap:12px;
  position:relative; z-index:2;
}
@media (min-width: 640px){
  .rack-specs{ grid-template-columns:repeat(3, 1fr); gap:20px; }
}
.rack-specs li{
  display:flex; flex-direction:column; gap:4px;
}
.rack-specs li span{
  font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-dim);
}
.rack-specs li b{
  font-family:var(--font-disp);
  font-size:18px; color:var(--yellow);
  letter-spacing:-.01em;
}

/* ---------- META (números destacados) ---------- */
.racks-meta{
  position:relative; z-index:2;
  margin:60px auto 0;
  max-width:1400px;
  display:grid; gap:14px;
  grid-template-columns:repeat(2, 1fr);
  padding:28px;
  background:linear-gradient(135deg, rgba(255,106,0,.06), transparent 80%), var(--bg);
  border:1px solid var(--yellow-3);
  border-radius:var(--radius);
}
@media (min-width: 900px){
  .racks-meta{ grid-template-columns:repeat(4, 1fr); padding:36px 44px; gap:20px; }
}
.racks-meta-item{
  display:flex; flex-direction:column; gap:8px;
  padding:8px 4px 8px 20px;
  border-left:2px solid var(--yellow);
}
.meta-value{
  display:flex; align-items:baseline; gap:4px;
  line-height:1;
}
.meta-num{
  font-family:var(--font-disp);
  font-size:clamp(36px, 5vw, 56px);
  color:var(--yellow); letter-spacing:-.02em; line-height:1;
}
.meta-unit{
  font-family:var(--font-disp);
  color:var(--yellow-2); font-size:clamp(18px, 2vw, 24px);
  line-height:1;
}
.meta-label{
  font-family:var(--font-mono); font-size:11px;
  color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.08em;
  line-height:1.4;
}

/* ---------- CTA ---------- */
.racks-cta{
  position:relative; z-index:2;
  margin:48px auto 0;
  max-width:1400px;
  padding:36px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,106,0,.05) 0 20px,
      transparent 20px 40px),
    linear-gradient(120deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  display:flex; flex-direction:column; gap:24px;
  align-items:flex-start;
}
@media (min-width: 900px){
  .racks-cta{
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:44px 56px; gap:40px;
  }
}
.racks-cta-copy{ flex:1; }
.racks-cta-eyebrow{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px;
  color:var(--yellow); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:12px;
}
.racks-cta h3{
  font-family:var(--font-disp);
  font-size:clamp(22px, 3vw, 34px);
  line-height:1.1; letter-spacing:-.015em;
  margin:0 0 8px;
}
.racks-cta p{
  margin:0; color:var(--ink-dim);
  font-size:14px; max-width:540px;
}
.racks-cta-btn{ flex-shrink:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .weld-path{ stroke-dashoffset:0; }
  .section-head::after{ width:110px; }
  .hero-title .word{ transform:none; opacity:1; }
  .hero-title .word::before{ opacity:0; }
}