/* =========================================================
   CAI · Control Automático Industrial — Sistema de diseño
   Identidad: Rubik (titulares) + Roboto (texto)
   ========================================================= */

@font-face{font-family:Rubik;src:url(../fonts/Rubik-Light.ttf);font-weight:300;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-Black.ttf);font-weight:900;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-MediumItalic.ttf);font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Rubik;src:url(../fonts/Rubik-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-Light.ttf);font-weight:300;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-LightItalic.ttf);font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-Italic.ttf);font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-MediumItalic.ttf);font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Roboto;src:url(../fonts/Roboto-BoldItalic.ttf);font-weight:700;font-style:italic;font-display:swap}

:root{
  /* Cromática oficial */
  --morado:#924E8C;        /* Pantone 2354 C */
  --gris:#707372;          /* Pantone 424 C */
  --verde:#A9C23F;         /* Pantone 2300 C · acento */
  --negro:#3D3935;         /* Pantone Black 7 C */
  --gris-claro:#B2B1B2;    /* Pantone 4281 C */
  /* Derivados para web (contraste AA sobre fondos oscuros) */
  --morado-claro:#C98DC2;
  --morado-osc:#6F3A6A;
  --morado-10:#F5EDF4;
  --verde-osc:#7E9327;
  --tinta:#211E1C;
  --fondo:#FFFFFF;
  --fondo-2:#F6F5F4;
  --linea:#E4E2E0;
  --texto:#3D3935;
  --texto-2:#6B6866;
  --ok:#4E8A3A;
  --alerta:#C0392B;

  --radio:14px;
  --radio-s:8px;
  --sombra:0 10px 30px -12px rgba(33,30,28,.25);
  --sombra-s:0 2px 8px rgba(33,30,28,.08);
  --max:1200px;
  --gutter:clamp(16px,4vw,40px);
  --header-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Roboto,system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--texto);background:var(--fondo);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:Rubik,Roboto,sans-serif;line-height:1.15;margin:0 0 .5em;color:var(--negro)}
p{margin:0 0 1em}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.center{text-align:center}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:4px}

/* ---------- Etiquetas y títulos de sección ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:0;font-family:Rubik;font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--morado)}
.on-dark .eyebrow{color:var(--morado-claro)}
.titulo{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:300;letter-spacing:-.01em}
.titulo b,.titulo strong{font-weight:700;color:var(--morado)}
.titulo em{font-style:italic;font-weight:700;color:var(--morado)}
.on-dark .titulo{color:#fff}
.on-dark .titulo b,.on-dark .titulo em{color:var(--morado-claro)}
.lead{font-size:1.1rem;color:var(--texto-2);max-width:62ch}
.on-dark .lead{color:#E8E4E8}
.section{padding:clamp(64px,9vw,120px) 0}
.section-head{margin-bottom:clamp(32px,5vw,56px)}
.section-head.center .lead{margin-inline:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;border:2px solid transparent;font-family:Rubik;font-weight:500;font-size:.95rem;letter-spacing:.04em;text-decoration:none;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:var(--morado);color:#fff;box-shadow:0 8px 20px -8px rgba(146,78,140,.7)}
.btn-primario:hover{background:var(--morado-osc)}
.btn-verde{background:var(--verde);color:var(--tinta)}
.btn-verde:hover{background:#B9D24C}
.btn-borde{border-color:currentColor;color:var(--morado);background:transparent}
.btn-borde:hover{background:var(--morado);color:#fff;border-color:var(--morado)}
.on-dark .btn-borde{color:#fff}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:18px;height:18px}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);background:rgba(61,57,53,.0);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.solid,.site-header.always{background:rgba(52,48,45,.94);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.18)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
.nav a{position:relative;color:#fff;text-decoration:none;font-family:Rubik;font-weight:400;letter-spacing:.06em;font-size:.92rem;padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;right:6px;bottom:0;height:2px;background:var(--morado-claro);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a::before{content:"";position:absolute;right:0;bottom:-2px;width:6px;height:6px;border:1.5px solid var(--morado-claro);border-radius:50%;opacity:0;transition:opacity .2s .15s}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a:hover::before,.nav a[aria-current=page]::before{opacity:1}
.nav a[aria-current=page]{font-weight:700}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;transition:background .2s}
.icon-btn:hover{background:rgba(255,255,255,.1)}
.icon-btn svg{width:20px;height:20px}
.badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--verde);color:var(--tinta);font:700 .72rem/20px Rubik;text-align:center}
.badge:empty,.badge[data-n="0"]{display:none}
.menu-toggle{display:none}
.btn-urgencia{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(169,194,63,.14);border:1px solid rgba(169,194,63,.5);color:#DDEB9F;font:500 .82rem Rubik;letter-spacing:.04em;text-decoration:none}
.btn-urgencia .pulse{width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 rgba(169,194,63,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(169,194,63,0)}100%{box-shadow:0 0 0 0 rgba(169,194,63,0)}}

@media (max-width:960px){
  .menu-toggle{display:inline-grid}
  .btn-urgencia span.txt{display:none}
  .btn-urgencia{padding:0;width:42px;height:42px;justify-content:center}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 28px;background:rgba(40,37,35,.98);transform:translateY(-120%);transition:transform .35s var(--ease);z-index:-1}
  .nav.open{transform:none}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.05rem}
  .nav a::after,  .nav a[aria-current=page]{color:var(--morado-claro)}
  .brand img{height:36px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(100svh,860px);display:grid;place-items:center;overflow:hidden;color:#fff;background:#151312}
.hero.short{min-height:min(100svh,860px)}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,17,.55) 0%,rgba(20,18,17,.35) 45%,rgba(20,18,17,.75) 100%)}
.hero-inner{position:relative;z-index:1;width:100%;padding-top:var(--header-h)}
.hero-slogan{text-align:center;font-family:Roboto;color:var(--verde);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero.short .hero-media::after{background:linear-gradient(180deg,rgba(20,18,17,.62),rgba(20,18,17,.55) 50%,rgba(20,18,17,.75))}
.hero-slogan .l1{display:block;font-weight:300;font-size:clamp(2rem,4.6vw,3.4rem);color:#fff}
.hero-slogan .l2{display:block;font-style:italic;font-weight:500;font-size:clamp(1.4rem,3vw,2.2rem)}
.hero-slogan .l3{display:block;font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);max-width:36ch;margin:0 auto}
.hero-slogan.blanco{color:#fff}
.hero-slogan.blanco .l1{font-weight:700}
.hero-slogan .reveal-line{opacity:0;transform:translateY(18px);animation:up .9s var(--ease) forwards}
.hero-slogan .reveal-line:nth-child(2){animation-delay:.25s}
.hero-slogan .reveal-line:nth-child(3){animation-delay:.5s}
@keyframes up{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid rgba(255,255,255,.6);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* Hero inicio con animación del logotipo */
.hero-home .split{display:grid;grid-template-columns:clamp(170px,19vw,250px) minmax(0,520px);justify-content:center;gap:clamp(28px,5vw,72px);align-items:center;opacity:0}
.hero-home.ready .split{animation:fadeIn 1s var(--ease) .15s forwards}
.hero-home .split img{width:100%;height:auto;aspect-ratio:757/969;object-fit:contain;justify-self:center}
.hero-home .frase{font-family:Roboto;font-weight:700;color:var(--verde);font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.3;margin-bottom:18px}
.hero-home .frase .big{font-size:1.6em}
.hero-home .desc{font-style:italic;font-weight:300;font-size:1.08rem;color:#F1EFEE;max-width:46ch}
.hero-home .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .hero-home .split{grid-template-columns:1fr;text-align:center;gap:22px}
  .hero-home .split img{justify-self:center;width:128px}
  .hero-home .frase{font-size:1.28rem}
  .hero-home .desc{margin-inline:auto;font-size:1rem}
  .hero-home .ctas{justify-content:center}
  .hero-home .ctas .btn{flex:1 1 220px;max-width:280px}
}

/* ---------- Banda de cifras ---------- */
.stats{background:var(--negro);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 20px;border-left:1px solid rgba(255,255,255,.1)}
.stat:first-child{border-left:0}
.stat b{display:block;font:700 clamp(1.8rem,3vw,2.4rem)/1 Rubik;color:var(--verde)}
.stat span{font-size:.9rem;color:#D6D3D1}
@media (max-width:760px){.stats .wrap{grid-template-columns:1fr 1fr}.stat{border-left:0;border-top:1px solid rgba(255,255,255,.1)}.stat:nth-child(-n+2){border-top:0}}

/* ---------- Nosotros / Filosofía (fondo circuito morado) ---------- */
.circuit{position:relative;overflow:hidden;background:#1C1A19;color:#fff}
.circuit-bg{position:absolute;inset:0}
.circuit-bg video{width:100%;height:100%;object-fit:cover;opacity:.55}
.circuit-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(28,26,25,.55) 0%,rgba(28,26,25,.88) 75%)}
.circuit .wrap{position:relative;z-index:1}
.nosotros-txt{font-size:clamp(1.05rem,1.6vw,1.25rem);font-style:italic;font-weight:300;max-width:70ch;margin:0 auto;color:#F3F0F2}
.filosofia{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:clamp(40px,6vw,70px)}
.valor{grid-column:span 2;position:relative;padding:28px 24px;border-radius:var(--radio);background:rgba(255,255,255,.04);border:1px solid rgba(201,141,194,.22);backdrop-filter:blur(3px);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.valor:nth-child(4){grid-column:2/span 2}
.valor:hover{border-color:var(--morado-claro);background:rgba(146,78,140,.14);transform:translateY(-4px)}
.valor .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(146,78,140,.28);color:var(--morado-claro);margin-bottom:16px}
.valor .ico svg{width:24px;height:24px}
.valor h3{color:var(--morado-claro);font-style:italic;font-weight:500;font-size:1.25rem}
.valor p{font-size:.95rem;color:#E4E0E3;margin:0}
@media (max-width:900px){.filosofia{grid-template-columns:1fr 1fr}.valor,.valor:nth-child(4){grid-column:auto}.valor:last-child{grid-column:1/-1}}
@media (max-width:560px){.filosofia{grid-template-columns:1fr}}

/* ---------- Equipo ---------- */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px)}
.persona{text-align:center}
.persona .foto{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#5b5754,#2b2826);box-shadow:var(--sombra)}
.persona .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .6s var(--ease)}
.persona .foto .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.18)}
.persona .foto .ph svg{width:55%;height:auto}
.persona .foto .ph small{position:absolute;bottom:14px;left:0;right:0;font:500 .72rem Rubik;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.persona .capa{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.5);color:#fff;font-size:.98rem;opacity:0;transition:opacity .35s}
.persona .capa p{transform:translateY(10px);transition:transform .4s var(--ease);margin:0}
.persona:hover .capa,.persona:focus-within .capa{opacity:1}
.persona:hover .capa p{transform:none}
.persona:hover .foto img{transform:scale(1.04)}
.persona h3{margin:18px 0 4px;font:700 .95rem Rubik;letter-spacing:.06em;text-transform:uppercase;color:var(--morado)}
.persona .nombre{color:var(--texto-2);font-weight:300}
@media (max-width:760px){.equipo{grid-template-columns:1fr;max-width:360px;margin:0 auto}}

/* ---------- CTA banda ---------- */
.cta-band{position:relative;background:var(--morado);color:#fff;overflow:hidden}
.cta-band::before{content:"";pointer-events:none;position:absolute;right:-60px;top:-60px;width:320px;height:320px;background:url(../logos/isotipo-blanco.png) center/contain no-repeat;opacity:.08}
.cta-band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:44px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0}
.cta-band h2 b{font-weight:700}
.cta-band p{margin:.4em 0 0;color:#F1E3EF}

/* ---------- Servicios ---------- */
.servicios-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.servicio{position:relative;min-height:440px;overflow:hidden;color:#fff;isolation:isolate;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,36px)}
.servicio .bg{position:absolute;inset:0;z-index:-1}
.servicio .bg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.servicio .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,17,.6),rgba(20,18,17,.82));transition:background .4s}
.servicio:nth-child(3) .bg::after{background:linear-gradient(180deg,rgba(10,40,48,.6),rgba(10,30,38,.85))}
.servicio:hover .bg img{transform:scale(1.06)}
.servicio:hover .bg::after{background:linear-gradient(180deg,rgba(146,78,140,.55),rgba(30,18,30,.9))}
.servicio h3{color:var(--verde);text-align:right;font:700 clamp(1.05rem,1.5vw,1.3rem)/1.2 Rubik;letter-spacing:.03em;text-transform:uppercase}
.servicio h3 em{display:block;font-weight:400;font-style:italic}
.servicio .num{position:absolute;left:clamp(22px,2.4vw,36px);top:clamp(22px,2.4vw,36px);font:500 .8rem Rubik;letter-spacing:.14em;color:var(--verde)}
.servicio .cuerpo{position:relative;height:112px}
@media (max-width:1399px){.servicio .cuerpo{height:140px}}
@media (max-width:1199px){.servicio .cuerpo{height:182px}}
@media (max-width:1099px){.servicio .cuerpo{height:205px}}
.servicio .desc,.servicio .lista{position:absolute;inset:0 0 auto 0;margin:0;transition:opacity .35s,transform .45s var(--ease)}
.servicio .lista{opacity:0;transform:translateY(16px)}
.servicio .lista ul{margin:0;padding:0;list-style:none}
.servicio .lista li{position:relative;padding-left:18px;font-style:italic;margin:5px 0}
.servicio .lista li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--verde)}
.servicio:hover .desc,.servicio:focus-visible .desc{opacity:0;transform:translateY(-16px)}
.servicio:hover .lista,.servicio:focus-visible .lista{opacity:1;transform:none}
@media (max-width:1000px){.servicios-grid{grid-template-columns:1fr 1fr}}
@media (hover:none),(max-width:560px){
  .servicios-grid{grid-template-columns:1fr}
  .servicio{min-height:auto}
  .servicio .cuerpo{min-height:0;height:auto}
  .servicio .desc,.servicio .lista{position:static;opacity:1;transform:none}
  .servicio .desc{margin:80px 0 14px}
  .servicio:hover .desc{opacity:1;transform:none}
}

/* Proceso */
.proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:paso;position:relative}
.paso{position:relative;padding:0 18px 0 0}
.paso .nodo{position:relative;display:flex;align-items:center;margin-bottom:22px}
.paso .nodo i{width:18px;height:18px;border-radius:50%;border:3px solid var(--morado);background:#fff;flex:none;z-index:1}
.paso .nodo::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--morado),var(--gris-claro))}
.paso:last-child .nodo::after{background:transparent}
.paso small{font:700 .78rem Rubik;letter-spacing:.14em;color:var(--verde-osc)}
.paso h3{font-size:1.2rem;margin:.3em 0 .4em}
.paso p{color:var(--texto-2);font-size:.95rem}
@media (max-width:860px){.proceso{grid-template-columns:1fr 1fr;row-gap:32px}}
@media (max-width:520px){.proceso{grid-template-columns:1fr}}

/* ---------- Formularios ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font:500 .78rem Rubik;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.campo .opc{font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}
.input,select.input,textarea.input{width:100%;padding:13px 16px;border-radius:10px;border:1.5px solid var(--linea);background:#F3F2F1;font:400 1rem Roboto;color:var(--texto);transition:border-color .2s,background .2s,box-shadow .2s}
textarea.input{min-height:120px;resize:vertical}
.input:focus{outline:none;border-color:var(--morado);background:#fff;box-shadow:0 0 0 4px rgba(146,78,140,.14)}
.input.invalido{border-color:var(--alerta)}
.on-dark .campo label{color:#E9E5E8}
.on-dark .input{background:rgba(255,255,255,.92);border-color:transparent}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{width:18px;height:18px;accent-color:var(--morado);margin-top:3px}
.check a{color:var(--morado)}
.on-dark .check a{color:var(--morado-claro)}
.error-msg{color:var(--alerta);font-size:.85rem;min-height:1em}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}

/* Selector de modo (diagnóstico) */
.modos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modo{position:relative;display:block;cursor:pointer}
.modo input{position:absolute;opacity:0}
.modo .card{height:100%;padding:20px;border-radius:var(--radio);border:2px solid var(--linea);background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.modo .card:hover{transform:translateY(-2px)}
.modo input:checked+.card{border-color:var(--morado);box-shadow:0 0 0 4px rgba(146,78,140,.12)}
.modo input:focus-visible+.card{outline:2px solid var(--verde);outline-offset:3px}
.modo .tag{display:inline-block;font:700 .7rem Rubik;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.modo.urg .tag{background:#FBE9E7;color:var(--alerta)}
.modo.man .tag{background:var(--morado-10);color:var(--morado)}
.modo.rem .tag{background:#F2F6E1;color:var(--verde-osc)}
.modo h4{font-size:1.1rem;margin-bottom:.3em}
.modo p{font-size:.9rem;color:var(--texto-2);margin:0}
@media (max-width:760px){.modos{grid-template-columns:1fr}}

.stepper{display:flex;gap:8px;margin-bottom:28px}
.stepper span{flex:1;height:4px;border-radius:4px;background:var(--linea);transition:background .3s}
.stepper span.on{background:var(--morado)}
.paso-form{display:none}
.paso-form.activo{display:block;animation:fadeIn .4s var(--ease)}
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.aviso-urgencia{display:none;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radio);background:#FBE9E7;color:#7a2318;margin-bottom:20px}
.aviso-urgencia.visible{display:flex}
.aviso-urgencia a{color:#7a2318;font-weight:700}

.diagnostico{display:grid;grid-template-columns:.8fr 1.6fr;gap:clamp(28px,5vw,70px);align-items:start}
.diagnostico .titulo{text-align:right}
.diagnostico aside p{text-align:right;color:var(--texto-2)}
@media (max-width:860px){.diagnostico{grid-template-columns:1fr}.diagnostico .titulo,.diagnostico aside p{text-align:left}}

/* ---------- Tienda ---------- */
.tienda{display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.filtros{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:22px}
.filtro h4{font:700 .8rem Rubik;letter-spacing:.12em;text-transform:uppercase;color:var(--morado);margin-bottom:10px}
.filtro label{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.95rem;cursor:pointer}
.filtro input{accent-color:var(--morado);width:16px;height:16px}
.filtro .cnt{margin-left:auto;font-size:.78rem;color:var(--texto-2)}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.search{position:relative;flex:1;min-width:220px}
.search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--texto-2)}
.search .input{padding-left:42px}
.toolbar select.input{width:auto}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--morado-10);color:var(--morado);font-size:.85rem;border:0}
.chip button{background:none;border:0;color:inherit;padding:0;line-height:1}
.resultado{font-size:.9rem;color:var(--texto-2);margin-left:auto}
.filtros-toggle{display:none}
@media (max-width:900px){
  .tienda{grid-template-columns:1fr}
  .filtros{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:#fff;z-index:70;padding:24px;overflow:auto;transform:translateX(-105%);transition:transform .35s var(--ease);box-shadow:var(--sombra)}
  .filtros.open{transform:none}
  .filtros-toggle{display:inline-flex}
}
.grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.producto{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:box-shadow .25s,transform .25s var(--ease),border-color .25s}
.producto:hover{box-shadow:var(--sombra);transform:translateY(-4px);border-color:transparent}
.producto .img{position:relative;aspect-ratio:1;background:var(--fondo-2);display:grid;place-items:center;overflow:hidden}
.producto .img img{width:100%;height:100%;object-fit:cover}
.producto .flag{position:absolute;left:12px;top:12px;font:700 .68rem Rubik;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--negro);color:#fff}
.producto .flag.verde{background:var(--verde);color:var(--tinta)}
.producto .info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.producto .marca{font:500 .74rem Rubik;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2)}
.producto h3{font:500 1.02rem/1.3 Rubik;margin:0}
.producto h3 a{text-decoration:none}
.producto h3 a:hover{color:var(--morado)}
.producto .sku{font-size:.8rem;color:var(--texto-2)}
.producto .pie{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.precio{font:700 1.15rem Rubik;color:var(--negro)}
.precio small{font:400 .72rem Roboto;color:var(--texto-2);margin-left:3px}
.precio.cot{font-size:.9rem;color:var(--morado)}
.stock{font-size:.8rem;display:inline-flex;align-items:center;gap:6px}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stock.bajo::before{background:#D4A017}
.stock.agotado::before{background:var(--alerta)}
.vacio{padding:60px 20px;text-align:center;color:var(--texto-2);border:2px dashed var(--linea);border-radius:var(--radio)}

/* Placeholder SVG producto */
.ph-prod{width:62%;height:auto;color:var(--gris-claro)}

/* Soporte técnico */
.soporte{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:clamp(24px,4vw,40px);border-radius:22px;background:linear-gradient(120deg,var(--negro),#2a2725);color:#fff;position:relative;overflow:hidden}
.soporte::after{content:"";pointer-events:none;z-index:0;position:absolute;right:-40px;bottom:-60px;width:260px;height:260px;background:url(../logos/isotipo-blanco.png) center/contain no-repeat;opacity:.06}
.soporte > *{position:relative;z-index:1}
.soporte .ico{width:64px;height:64px;border-radius:18px;background:var(--verde);color:var(--tinta);display:grid;place-items:center}
.soporte .ico svg{width:32px;height:32px}
.soporte h3{color:#fff;font-size:1.5rem;margin-bottom:.2em}
.soporte p{margin:0;color:#DCD8D5}
@media (max-width:760px){.soporte{grid-template-columns:1fr}}

/* Ficha de producto */
.breadcrumb{font-size:.88rem;color:var(--texto-2);margin-bottom:24px}
.breadcrumb a{color:var(--texto-2);text-decoration:none}
.breadcrumb a:hover{color:var(--morado)}
.ficha{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.ficha .galeria{position:sticky;top:calc(var(--header-h) + 20px);aspect-ratio:1;border-radius:22px;background:var(--fondo-2);display:grid;place-items:center;overflow:hidden}
.ficha .galeria img{width:100%;height:100%;object-fit:cover}
.ficha h1{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:500}
.meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--texto-2);margin-bottom:18px}
.meta b{color:var(--negro);font-weight:500}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tag{padding:5px 12px;border-radius:999px;background:var(--fondo-2);font-size:.82rem;color:var(--texto-2)}
.tag.m{background:var(--morado-10);color:var(--morado)}
.compra{padding:22px;border-radius:var(--radio);border:1px solid var(--linea);margin:22px 0;display:grid;gap:14px}
.compra .fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--linea);border-radius:999px;overflow:hidden}
.qty button{width:40px;height:44px;border:0;background:transparent;font-size:1.2rem}
.qty input{width:48px;height:44px;border:0;text-align:center;font:500 1rem Rubik;background:transparent;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.tabs{border-bottom:1px solid var(--linea);display:flex;gap:6px;overflow-x:auto;margin-top:10px}
.tabs button{background:none;border:0;padding:12px 14px;font:500 .9rem Rubik;color:var(--texto-2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--morado);border-color:var(--morado)}
.tab-panel{padding:20px 0}
.tab-panel[hidden]{display:none}
.specs{width:100%;border-collapse:collapse;font-size:.95rem}
.specs th,.specs td{padding:11px 12px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
.specs th{width:42%;font-weight:500;color:var(--texto-2);background:var(--fondo-2)}
.lista-check{list-style:none;padding:0;margin:0}
.lista-check li{position:relative;padding:6px 0 6px 28px}
.lista-check li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;background:var(--morado-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23924E8C' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
@media (max-width:860px){.ficha{grid-template-columns:1fr}.ficha .galeria{position:static}}

/* Carrito (drawer) */
.drawer-back{position:fixed;inset:0;background:rgba(20,18,17,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-back.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s var(--ease);box-shadow:-10px 0 40px rgba(0,0,0,.2)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--linea)}
.drawer header h3{margin:0}
.drawer .items{flex:1;overflow:auto;padding:8px 24px}
.drawer footer{padding:20px 24px;border-top:1px solid var(--linea);display:grid;gap:12px}
.cerrar{background:none;border:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--texto)}
.cerrar:hover{background:var(--fondo-2)}
.item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--linea);align-items:center}
.item .mini{width:64px;height:64px;border-radius:10px;background:var(--fondo-2);display:grid;place-items:center;overflow:hidden}
.item .mini img{width:100%;height:100%;object-fit:cover}
.item .mini svg{width:70%}
.item h4{font:500 .92rem/1.3 Rubik;margin:0 0 4px}
.item .sub{font-size:.8rem;color:var(--texto-2)}
.item .qty{transform:scale(.85);transform-origin:left}
.item .quitar{background:none;border:0;color:var(--texto-2);font-size:.8rem;text-decoration:underline;padding:0}
.totales{display:grid;gap:6px;font-size:.95rem}
.totales div{display:flex;justify-content:space-between}
.totales .total{font:700 1.15rem Rubik;padding-top:8px;border-top:1px dashed var(--linea)}

/* Checkout */
.checkout{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(20px,3vw,32px)}
.panel+.panel{margin-top:20px}
.panel h2{font-size:1.25rem;display:flex;align-items:center;gap:10px}
.panel h2 .n{width:28px;height:28px;border-radius:50%;background:var(--morado);color:#fff;display:grid;place-items:center;font-size:.85rem}
.resumen{position:sticky;top:calc(var(--header-h) + 20px)}
.opciones{display:grid;gap:10px}
.opcion{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--linea);border-radius:12px;cursor:pointer}
.opcion:has(input:checked){border-color:var(--morado);background:var(--morado-10)}
.opcion input{accent-color:var(--morado);margin-top:4px}
.opcion small{display:block;color:var(--texto-2)}
@media (max-width:900px){.checkout{grid-template-columns:1fr}.resumen{position:static}}

/* ---------- Contacto ---------- */
.contacto-sec{position:relative;overflow:hidden;background:#141826;color:#fff}
.contacto-sec .bg{position:absolute;inset:0}
.contacto-sec .bg img{width:100%;height:100%;object-fit:cover;opacity:.35;filter:hue-rotate(40deg) saturate(.8)}
.contacto-sec .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,30,.92),rgba(30,18,32,.7))}
.contacto-sec .wrap{position:relative}
.contacto-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(28px,5vw,70px)}
.contacto-grid .titulo{text-align:right}
.contacto-grid aside p{text-align:right;color:#DCD6DB}
@media (max-width:860px){.contacto-grid{grid-template-columns:1fr}.contacto-grid .titulo,.contacto-grid aside p{text-align:left}}
.sedes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sede{padding:26px;border-radius:var(--radio);border:1px solid var(--linea);background:#fff;display:flex;flex-direction:column;gap:10px}
.sede .ico{width:44px;height:44px;border-radius:12px;background:var(--morado-10);color:var(--morado);display:grid;place-items:center}
.sede .ico svg{width:22px;height:22px}
.sede h3{font-size:1.15rem;margin:0}
.sede p{margin:0;color:var(--texto-2)}
.sede a.link{margin-top:auto;color:var(--morado);font:500 .9rem Rubik;text-decoration:none}
@media (max-width:860px){.sedes{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{position:relative;color:#fff;overflow:hidden;background:#17151a}
.site-footer .bg{position:absolute;inset:0;background:url(../img/circuito.jpg) center/cover;filter:blur(3px) saturate(.9) hue-rotate(210deg) brightness(.45);transform:scale(1.05)}
.site-footer .bg::after{content:"";position:absolute;inset:0;background:rgba(25,18,30,.55)}
.site-footer .wrap{position:relative}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding:64px 0 40px}
.site-footer h4{color:#fff;font:700 .78rem Rubik;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.85}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:#E6E2E5;text-decoration:none}
.site-footer a:hover{color:var(--verde)}
.site-footer p{color:#D4CFD3;font-size:.92rem}
.footer-brand img{height:52px;width:auto;margin-bottom:16px}
.contact-line{display:flex;align-items:center;gap:10px;font-style:italic}
.contact-line svg{width:18px;height:18px;color:var(--morado-claro);flex:none}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:#BDB7BC}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}

/* WhatsApp flotante */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -6px rgba(0,0,0,.4);transition:transform .2s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);z-index:100;background:var(--negro);color:#fff;padding:14px 22px;border-radius:12px;box-shadow:var(--sombra);opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* Página legal */
.legal{max-width:760px}
.legal h2{font-size:1.3rem;margin-top:1.6em}

/* =========================================================
   Ajustes para teléfonos y tabletas
   ========================================================= */
.btn-urgencia .ico{display:none}
.ficha>*,.tienda>*,.checkout>*,.diagnostico>*,.contacto-grid>*{min-width:0}
.tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
@media (max-width:960px){
  .btn-urgencia .pulse{display:none}
  .btn-urgencia .ico{display:inline-flex;color:var(--verde)}
  .btn-urgencia .ico svg{width:18px;height:18px}
}
@media (max-width:760px){
  .section{padding:56px 0}
  .cta-band::before,.soporte::after,.scroll-cue{display:none}
  .cta-band .wrap{padding-block:36px}
  .cta-band .btn{width:100%}
  .equipo{max-width:290px}
  .stat{padding:22px 14px}
  .wa{width:50px;height:50px;right:14px;bottom:14px}
  .wa svg{width:26px;height:26px}
  .soporte{text-align:left;gap:18px}
  .soporte .btn{width:100%}
  .breadcrumb{font-size:.8rem}
}
@media (min-width:601px) and (max-width:900px){.grid-productos{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (max-width:600px){
  .toolbar .search{flex-basis:100%;order:-1}
  .toolbar .woocommerce-ordering,.toolbar select.input{flex:1}
  .toolbar .woocommerce-ordering select{width:100%}
  .grid-productos{grid-template-columns:1fr 1fr;gap:12px}
  .producto .info{padding:12px 12px 14px;gap:4px}
  .producto h3{font-size:.88rem}
  .producto .marca{font-size:.7rem;letter-spacing:.04em}
  .producto .sku,.producto .stock{font-size:.72rem}
  .producto .pie{flex-wrap:wrap;gap:8px}
  .producto .precio,.producto .precio .woocommerce-Price-amount{font-size:.98rem}
  .producto .precio.cot{font-size:.8rem}
  .producto .flag{left:8px;top:8px;font-size:.68rem;padding:3px 8px}
  .producto .btn-sm{padding:8px 12px}
  .ficha h1{font-size:1.45rem}
  .compra{padding:16px}
  .specs th,.specs td{padding:9px 10px;font-size:.88rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}