:root{
  --ink:#0A1526;
  --navy:#132844;
  --navy-2:#1C3A5E;
  --naranja:#F47920;
  --naranja-oscuro:#D8620F;
  --papel:#FFFFFF;
  --blanco:#FFFFFF;
  --niebla:#F4F7FA;
  --gris:#4B5C65;
  --gris-claro:#C9D3DD;
  --linea:#E3E9EF;
  --linea-oscura:rgba(255,255,255,.12);
  --estado-vivo:#3DD68C; /* única excepción al acento único: código semántico "en vivo", no decorativo */
  --r:14px;
  --sec-y:120px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--papel);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
a{color:inherit}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px}
.logo{grid-column:1;justify-self:start;display:flex;align-items:center;text-decoration:none}
.logo img{height:28px;width:auto;display:block}
.nav-links{grid-column:2;justify-self:center;display:flex;gap:40px;list-style:none}
.nav-links a{color:var(--gris);text-decoration:none;font-size:.93rem;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--ink);border-color:var(--naranja)}
.nav-util{grid-column:3;justify-self:end;display:flex;align-items:center;gap:16px}
.btn-login{color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:600;border:1px solid var(--linea);padding:8px 16px;border-radius:8px;transition:background .2s}
.btn-login:hover{background:var(--niebla)}
.lang{color:var(--gris);text-decoration:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em}
.lang:hover{color:var(--ink)}
.burger{grid-column:3;justify-self:end;display:none;background:none;border:0;color:var(--ink);font-size:1.5rem;cursor:pointer}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}

/* Desplegable de Industrias: :hover y :focus-within lo abren sin JS.
   main.js solo sincroniza aria-expanded y agrega/saca --cerrado para que
   Escape pueda cerrarlo sin desenfocar el trigger (ver comentario ahí). */
.nav-item-drop{position:relative}
.nav-drop-menu{list-style:none;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);min-width:200px;background:var(--blanco);border:1px solid var(--linea);border-radius:10px;box-shadow:0 12px 28px rgba(10,21,38,.14);padding:8px;margin:10px 0 0;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:70}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:6px;font-size:.88rem;font-weight:500;color:var(--gris);text-decoration:none;white-space:nowrap;border-bottom:0}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--niebla);color:var(--ink)}
.nav-item-drop:hover .nav-drop-menu,
.nav-item-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-item-drop--cerrado .nav-drop-menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* ---------- HERO ---------- */
.hero{background:var(--blanco);color:var(--ink);position:relative;overflow:hidden;padding:88px 0 96px}
.hero::before{content:'';position:absolute;top:-180px;right:-160px;width:920px;height:920px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#FDF0E4 0%,#F7F9FC 46%,rgba(255,255,255,0) 72%);pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(900px 620px at 74% 34%,#000 0%,transparent 76%);mask-image:radial-gradient(900px 620px at 74% 34%,#000 0%,transparent 76%);pointer-events:none}
.geo{position:absolute;inset:0;pointer-events:none;z-index:1}
.geo i{position:absolute;display:block;border:1px solid var(--linea);font-style:normal}
.geo i:first-child{width:520px;height:520px;top:-140px;left:-220px;transform:rotate(24deg)}
.geo i:last-child{width:300px;height:300px;bottom:-100px;left:-80px;transform:rotate(-14deg)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.hero .mono{color:var(--naranja);display:block;margin-bottom:22px}
.hero h1{max-width:20ch;font-size:clamp(2rem,3.4vw,2.9rem)}
.hero h1 em{font-style:normal;color:var(--naranja)}
.hero p{margin-top:24px;font-size:1.09rem;color:var(--gris);max-width:46ch}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 26px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.96rem;transition:transform .15s,background .2s}
.btn-1{background:var(--naranja);color:#fff}
.btn-1:hover{background:var(--naranja-oscuro);transform:translateY(-1px)}
.btn-2{border:1px solid var(--linea);color:var(--ink)}
.btn-2:hover{background:var(--niebla)}
.btn:focus-visible{outline:2px solid var(--naranja);outline-offset:4px}

/* ---------- HERO OSCURO (variante) ---------- */
.hero--oscuro{background:var(--ink);color:#fff}
.hero--oscuro::before{background:radial-gradient(circle at 38% 38%,rgba(244,121,32,.16) 0%,var(--navy) 46%,rgba(19,40,68,0) 72%)}
.hero--oscuro::after{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.hero--oscuro .geo i{border-color:rgba(255,255,255,.07)}
.hero--oscuro p{color:rgba(255,255,255,.75)}
.hero--oscuro .btn-2{border-color:rgba(255,255,255,.2);color:#fff}
.hero--oscuro .btn-2:hover{background:rgba(255,255,255,.08)}

/* ---------- PLANOGRAMA (elemento firma, reservado para el hero de CheckPOS AI) ---------- */
/* No se usa en home desde el hero de teléfonos. Ver templates/partials/hero-gondola-ai.html */
.plano{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--linea-oscura);border-radius:var(--r);padding:20px}
.plano-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.plano-head .mono{color:rgba(255,255,255,.5)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--naranja);margin-right:7px;animation:pulso 2s infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.25}}
.gondola{position:relative;display:grid;gap:9px}
.estante{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding-bottom:9px;border-bottom:2px solid rgba(255,255,255,.14)}

/* El color de estado lo lleva el recuadro, nunca el producto (ver .silueta
   más abajo): detectado = fondo navy + contorno naranja; no detectado =
   fondo más oscuro + contorno gris tenue; quiebre = sin fondo (.face.hueco). */
.face{position:relative;aspect-ratio:.62;border-radius:4px;background:#101B30;border:1px solid rgba(148,163,184,.18)}
.face.det{background:#1B2A47;border-color:var(--naranja);border-width:1.4px;animation:detectar 7s infinite}
.face.hueco{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 4px,transparent 4px,transparent 8px);border-style:dashed;border-color:rgba(255,255,255,.22)}
@keyframes detectar{0%,42%{opacity:.25;transform:scale(.97)}50%,92%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.97)}}

/* Silueta de envase (dentro de .face-art, ver hero-gondola-ai.html): fill
   neutro fijo, nunca naranja — el naranja queda reservado a la detección.
   Solo cambia la opacidad según si el recuadro que la contiene detectó o no. */
.face-art{display:block;width:100%;height:100%}
.silueta{fill:#E7ECF3;opacity:.2}
.face.det .silueta{opacity:.42}

/* Etiqueta: <g> dentro del mismo SVG que la silueta y el recuadro (mismo
   viewBox = mismo sistema de coordenadas), no un <span> superpuesto por
   CSS — así no se desalinea del recuadro en breakpoints intermedios. */
.tag-svg{opacity:0;animation:tagIn 7s infinite}
.tag-svg rect{fill:var(--naranja)}
.tag-svg text{fill:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.tag-svg.alt rect{fill:#fff}
.tag-svg.alt text{fill:var(--ink)}
/* Solo para textos largos (ver tag-svg--compacto en hero-gondola-ai.html y
   escena-iris-proceso.html): "Out of stock" desborda el rect de 84px a 13px,
   "Quiebre" no lo necesita y no lleva esta clase. */
.tag-svg--compacto text{font-size:10.5px}
@keyframes tagIn{0%,48%{opacity:0}56%,90%{opacity:1}100%{opacity:0}}
.scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--naranja),transparent);box-shadow:0 0 18px 3px rgba(244,121,32,.5);animation:escanear 7s infinite}
@keyframes escanear{0%{top:0;opacity:0}6%{opacity:1}44%{top:100%;opacity:1}52%,100%{top:100%;opacity:0}}
.plano-foot{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}
.plano-foot div{font-family:var(--mono);font-size:.68rem;color:rgba(255,255,255,.55);letter-spacing:.06em}
.plano-foot b{color:#fff;font-weight:600;display:block;font-size:1.15rem;font-family:var(--display);letter-spacing:-.02em}

/* ---------- ESCENA DE TELÉFONOS (hero) ---------- */
.escena{position:relative;min-height:640px;display:flex;justify-content:center}
.halo{position:absolute;width:660px;height:660px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(244,121,32,.13) 0%,rgba(244,121,32,.04) 38%,transparent 66%);pointer-events:none}
.orbita{position:absolute;top:50%;left:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border:1px solid var(--linea-oscura);border-radius:50%;pointer-events:none}
.orbita::after{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:var(--naranja);box-shadow:0 0 14px 3px rgba(244,121,32,.6)}

.fono{position:absolute;display:block;width:285px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));opacity:0}
.fono img{display:block;width:100%;height:auto}
.fono-atras{left:2%;top:112px;width:249px;z-index:1;transform:rotate(-6deg) translateY(38px)}
.fono-frente{right:4%;top:14px;z-index:3;transform:rotate(4deg) translateY(38px)}

.chip{position:absolute;z-index:4;opacity:0;border-left:2px solid var(--naranja);border-radius:0;padding:3px 0 3px 15px;min-width:172px;background:linear-gradient(90deg,rgba(10,21,38,.92) 0%,rgba(10,21,38,.55) 70%,transparent 100%);transform:translateY(16px)}
.chip-etq{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:9px}
.chip-num{font-size:2.125rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-family:var(--display);font-variant-numeric:tabular-nums}
.chip-pie{font-size:.81rem;color:rgba(255,255,255,.75);margin-top:7px;display:flex;align-items:center;gap:7px}
.punto{width:7px;height:7px;border-radius:50%;background:var(--estado-vivo);flex:0 0 7px;animation:latir 2.4s ease-in-out infinite}
.barra{height:3px;width:96px;margin-top:11px;background:rgba(148,163,184,.2);overflow:hidden}
.barra i{display:block;height:3px;background:var(--naranja);width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.chip-1{left:-14px;top:52px}
.chip-2{right:-95px;bottom:29px}
.chip-3{left:-60px;bottom:12px;min-width:121px;padding:3px 0 3px 12px}

@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(61,214,140,.55)}70%{box-shadow:0 0 0 9px rgba(61,214,140,0)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes flotarA{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-14px)}}
@keyframes flotarB{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-18px)}}
@keyframes entrarA{to{opacity:1;transform:rotate(-6deg) translateY(0)}}
@keyframes entrarB{to{opacity:1;transform:rotate(4deg) translateY(0)}}
@keyframes entrarChip{to{opacity:1;transform:translateY(0)}}
@keyframes entrarTexto{to{opacity:1;transform:translateY(0)}}

.hero--oscuro.anim .mono,.hero--oscuro.anim h1,.hero--oscuro.anim p,.hero--oscuro.anim .hero-cta{opacity:0;transform:translateY(20px);animation:entrarTexto .8s cubic-bezier(.22,1,.36,1) forwards}
.hero--oscuro.anim .mono{animation-delay:.05s}
.hero--oscuro.anim h1{animation-delay:.15s}
.hero--oscuro.anim p{animation-delay:.28s}
.hero--oscuro.anim .hero-cta{animation-delay:.4s}

.anim .orbita{animation:girar 34s linear infinite}
.anim .fono-atras{animation:entrarA 1s cubic-bezier(.22,1,.36,1) .5s forwards,flotarA 7s ease-in-out 1.5s infinite}
.anim .fono-frente{animation:entrarB 1s cubic-bezier(.22,1,.36,1) .68s forwards,flotarB 6s ease-in-out 1.7s infinite}
.anim .chip{animation:entrarChip .7s cubic-bezier(.22,1,.36,1) forwards}
.anim .chip-1{animation-delay:1.15s}
.anim .chip-2{animation-delay:1.32s}
.anim .chip-3{animation-delay:1.48s}

/* ---------- MARQUEE ---------- */
.clientes{background:var(--niebla);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:20px 0 32px;overflow:hidden}
.clientes .mono{color:var(--gris);text-align:center;margin-bottom:36px}
.marquee{display:flex;align-items:center;gap:54px;width:max-content;animation:correr 34s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee img{height:48px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s}
.marquee img:hover{filter:grayscale(0);opacity:1}
.marquee--estatico{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px;justify-content:center;flex-wrap:wrap;animation:none}
@keyframes correr{to{transform:translateX(-50%)}}
/* prefers-reduced-motion ya corta la animación en la regla global de más
   abajo (*{animation:none!important}), pero eso sólo congela el marquee en
   su cuadro inicial: la mitad duplicada para el loop (aria-hidden) queda
   pegada después de la real en una sola fila sin wrap, y con overflow:hidden
   se recorta a mitad de logo en vez de mostrar el set completo. Acá se
   fuerza el mismo comportamiento que .marquee--estatico (wrap, centrado) y
   se oculta la mitad duplicada, para que estático se vea como una grilla
   completa y prolija en vez de una fila cortada. Aplica a los dos casos
   (clientes y droguerías) sin duplicar la regla. */
@media(prefers-reduced-motion:reduce){
  .marquee{width:100%;flex-wrap:wrap;justify-content:center}
  .marquee [aria-hidden="true"]{display:none}
}

/* ---------- PROBLEMA (home) ---------- */
/* Prefijo pv- en toda la sección: .chip y .cierre ya existen como clases
   globales (chips flotantes del hero, banda de CTA oscura) y colisionan
   con los nombres del mockup de referencia. */
.problema{background:var(--papel);padding-top:var(--sec-y);padding-bottom:64px}
.problema .mono{display:block;margin-bottom:26px}
.problema h2{
  font-size:clamp(26px,3.1vw,40px);line-height:1.14;letter-spacing:-.018em;max-width:26ch;
}
.pv-intro{max-width:62ch;margin:32px 0 0}
.pv-intro p{margin:0;color:var(--gris);font-size:18px}
.pv-intro strong{color:var(--ink);font-weight:600}

.pv-panel{
  margin-top:78px;
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  border:1px solid var(--linea);border-radius:16px;overflow:hidden;
  background:var(--papel);
}

.pv-preguntas{background:var(--niebla);padding:36px 34px;border-right:1px solid var(--linea)}
.pv-rotulo{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gris);margin:0 0 26px;
}
.pv-preguntas ul{list-style:none;margin:0;padding:0}
.pv-preguntas li{
  position:relative;padding:0 0 0 26px;margin:0 0 20px;
  font-size:16.5px;line-height:1.5;color:var(--gris);
  opacity:.42;transition:opacity .5s ease,color .5s ease;
}
.pv-preguntas li:last-child{margin-bottom:0}
.pv-preguntas li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:2px;
  background:var(--linea);transition:background .5s ease;
}
.pv-preguntas li.on{opacity:1;color:var(--ink)}
.pv-preguntas li.on::before{background:var(--naranja)}

.pv-tablero{padding:30px 32px 34px}
.pv-tablero-top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--linea);flex-wrap:wrap;
}
.pv-nombre{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.pv-filtros{display:flex;gap:8px;flex-wrap:wrap}
.pv-chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);
  border:1px solid var(--linea);border-radius:5px;padding:5px 9px;background:var(--papel);
}
.pv-chip.activo{color:var(--naranja);border-color:rgba(244,121,32,.45);background:rgba(244,121,32,.06)}

.pv-grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pv-tarjeta{
  border:1px solid var(--linea);border-radius:10px;padding:18px 18px 16px;
  background:var(--papel);position:relative;min-height:118px;
}
.pv-titulo{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px;
}
.pv-valor{
  font-family:var(--display);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:-.02em;color:var(--ink);
  opacity:0;transform:translateY(4px);
  transition:opacity .55s ease,transform .55s ease;
}
.pv-pie{
  font-size:13px;color:var(--gris);margin-top:9px;
  opacity:0;transition:opacity .55s ease .1s;
}
.pv-velo{
  position:absolute;left:18px;right:18px;bottom:16px;
  transition:opacity .45s ease;
}
.pv-velo span{
  display:block;height:11px;border-radius:3px;background:var(--linea);margin-bottom:8px;
}
.pv-velo span:nth-child(1){width:52%;height:26px;margin-bottom:11px}
.pv-velo span:last-child{width:74%;margin-bottom:0}
.pv-tarjeta.on .pv-velo{opacity:0}
.pv-tarjeta.on .pv-valor,.pv-tarjeta.on .pv-pie{opacity:1;transform:none}
.pv-sin{
  position:absolute;right:16px;top:16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-claro);transition:opacity .4s ease;
}
.pv-tarjeta.on .pv-sin{opacity:0}

.pv-barras{display:flex;align-items:flex-end;gap:6px;height:44px;margin-top:4px}
.pv-barras i{
  flex:1;background:var(--linea);border-radius:2px 2px 0 0;
  height:18%;transition:height .6s cubic-bezier(.3,0,.2,1),background .5s ease;
}
.pv-tarjeta.on .pv-barras i{background:var(--navy);height:var(--h)}
.pv-tarjeta.on .pv-barras i[data-destacada]{background:var(--naranja)}

@media (max-width:980px){
  .pv-panel{grid-template-columns:1fr;margin-top:52px}
  .pv-preguntas{border-right:0;border-bottom:1px solid var(--linea);padding:28px 24px}
  .pv-tablero{padding:26px 20px 28px}
  .pv-grilla{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:560px){
  .pv-grilla{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pv-valor,.pv-pie,.pv-velo,.pv-barras i,.pv-preguntas li,.pv-sin{transition:none !important}
}

/* ---------- SOLUCIONES ---------- */
.sec{padding-block:var(--sec-y)}
.sec-head{max-width:52ch;margin-bottom:56px}
.sec-head .mono{color:var(--naranja);display:block;margin-bottom:14px}
.sec-head p{color:var(--gris);margin-top:14px;font-size:1.05rem}
.sol{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:52px 0;border-top:1px solid var(--linea)}
.sol:nth-child(even) .sol-vis{order:-1}
.sol .mono{color:var(--naranja);display:block;margin-bottom:12px}
.sol h3{margin-bottom:12px}
.sol > div > p{color:var(--gris);margin-bottom:22px;font-size:1.02rem}
.checks{list-style:none;display:grid;gap:12px;margin-bottom:26px}
.checks li{display:flex;gap:11px;font-size:.97rem;align-items:flex-start}
.checks li::before{content:'';flex:0 0 6px;height:6px;background:var(--naranja);border-radius:1px;margin-top:9px}
.link-mas{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--naranja);padding-bottom:3px}
.link-mas:hover{color:var(--naranja)}
.sol-vis{background:var(--niebla);border-radius:var(--r);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:28px}
.sol-vis img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 32px rgba(10,21,38,.14))}

/* ---------- VERTICALES ---------- */
.verticales-sec{background:#16233D;color:#fff;padding-block:var(--sec-y);position:relative;overflow:hidden}
.verticales-sec::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 10%,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 10%,transparent 70%);
  pointer-events:none;
}
.verticales-sec .wrap{position:relative;z-index:1}
.vert-cabecera{max-width:62ch;margin-bottom:56px}
.vert-cabecera .mono{color:var(--naranja);display:block;margin-bottom:16px}
.vert-cabecera h2{color:#fff}
.vert-cabecera p{color:rgba(255,255,255,.78);font-size:1.13rem;margin-top:18px}

.vert-grilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}

.vert-card{background:#1B2A47;border:1px solid rgba(148,163,184,.16);border-radius:var(--r);padding:26px 24px 24px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.vert-card:hover{border-color:rgba(244,121,32,.45);transform:translateY(-3px)}

.vert-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);background:rgba(244,121,32,.11);border-radius:7px;padding:9px 12px;margin-bottom:22px;display:inline-block}
.vert-card h3{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;margin-bottom:11px;color:#fff}
.vert-desc{font-size:.94rem;line-height:1.58;color:rgba(255,255,255,.7);margin-bottom:22px}

.vert-puntos{list-style:none;margin-bottom:26px}
.vert-puntos li{position:relative;padding-left:19px;font-size:.91rem;line-height:1.5;color:rgba(255,255,255,.7);margin-bottom:13px}
.vert-puntos li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--naranja)}

.vert-pie{margin-top:auto;padding-top:20px;border-top:1px solid rgba(148,163,184,.1)}
.vert-ideal{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.55);margin-bottom:18px}
.vert-ideal b{color:rgba(255,255,255,.78);font-weight:600}
.vert-link{font-size:.91rem;font-weight:600;color:var(--naranja);text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:gap .18s}
.vert-link:hover{gap:11px}
.vert-link:focus-visible{outline:2px solid var(--naranja);outline-offset:4px;border-radius:4px}

@media(max-width:1180px){
  .vert-grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media(max-width:760px){
  .vert-grilla{grid-template-columns:1fr}
  .verticales-sec::before{background-size:64px 64px}
}

/* ---------- TESTIMONIO ---------- */
.caso{background:var(--blanco);padding-block:var(--sec-y);border-top:1px solid var(--linea)}
.caso-grid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:start}
.metrica{border-left:3px solid var(--naranja);padding-left:24px}
.metrica b{font-family:var(--display);font-size:4.2rem;font-weight:800;letter-spacing:-.04em;line-height:1;display:block}
.metrica span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);display:block;margin-top:8px;max-width:16ch}
.caso blockquote{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;letter-spacing:-.02em;line-height:1.42}
.mas-caso{margin-top:20px;color:var(--gris);font-size:.99rem;display:none}
.mas-caso.abierto{display:block}
.toggle{margin-top:18px;background:none;border:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);cursor:pointer;font-weight:600;padding:0}
.firma{margin-top:28px;padding-top:20px;border-top:1px solid var(--linea)}
.firma b{font-family:var(--display);display:block;font-size:1rem}
.firma span{color:var(--gris);font-size:.88rem}

/* ---------- CIERRE ---------- */
.cierre{background:var(--ink);color:#fff;padding-block:var(--sec-y);text-align:center}
.cierre h2{max-width:16ch;margin:0 auto 30px}
.cierre h2 em{font-style:normal;color:var(--naranja)}
.foot{background:var(--ink);border-top:1px solid var(--linea-oscura);padding:26px 0}
.foot .wrap{display:flex;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:12px}

@media(max-width:900px){
  .nav-links,.nav-util{display:none}
  .burger{display:block}
  .hero .wrap,.sol,.caso-grid{grid-template-columns:1fr;gap:40px}
  .sol:nth-child(even) .sol-vis{order:0}
  .hero{padding:60px 0 68px}
  :root{--sec-y:88px}
  .metrica b{font-size:3.2rem}
  .escena{min-height:600px;max-width:640px;margin:0 auto;width:100%}
}
@media(max-width:768px){
  :root{--sec-y:64px}
  .hero{padding:52px 0 70px}
  .escena{min-height:520px}
  .fono{width:236px}
  .fono-atras{width:206px;left:0;top:96px}
  .chip{padding:12px 15px;min-width:0}
  .chip-num{font-size:1.25rem}
  .chip-3{display:none}
  .orbita{width:420px;height:420px;margin:-210px 0 0 -210px}
}
@media(max-width:520px){
  .escena{min-height:470px}
  .fono-atras{display:none}
  .fono-frente{right:auto;left:50%;margin-left:-118px;transform:rotate(0) translateY(38px)}
  .anim .fono-frente{animation:entrarB0 1s cubic-bezier(.22,1,.36,1) .68s forwards,flotarB0 6s ease-in-out 1.7s infinite}
  @keyframes entrarB0{to{opacity:1;transform:rotate(0) translateY(0)}}
  @keyframes flotarB0{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(0) translateY(-12px)}}
  .chip-1{left:-20px;top:40px;min-width:0;width:90px;padding:8px}
  .chip-1 .chip-etq{font-size:.56rem;margin-bottom:4px}
  .chip-1 .chip-num{font-size:1.1rem}
  .chip-1 .chip-pie{font-size:.6rem;margin-top:3px}
  .chip-1 .barra{display:none}
  .chip-2{right:-20px;bottom:40px;min-width:0;width:90px;padding:8px}
  .chip-2 .chip-etq{font-size:.56rem;margin-bottom:4px}
  .chip-2 .chip-num{font-size:1.1rem}
  .chip-2 .chip-pie{font-size:.6rem;margin-top:3px}
  .chip-2 .barra{display:none}
}
@media(max-width:520px) and (prefers-reduced-motion:reduce){
  .anim .fono-frente{transform:rotate(0)!important}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .face.det{opacity:1}
  .tag-svg{opacity:1}
  .scan{display:none}
  .anim .mono,.anim h1,.anim p,.anim .hero-cta,.anim .fono,.anim .chip{opacity:1!important;transform:none!important}
  .anim .fono-atras{transform:rotate(-6deg)!important}
  .anim .fono-frente{transform:rotate(4deg)!important}
  .hf-fono{opacity:1!important;transform:none!important}
}

/* ---------- INTERACCIÓN JS (agregado, no forma parte del mockup) ---------- */
.nav--scrolled{box-shadow:0 8px 24px rgba(10,21,38,.28)}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}

@media(max-width:900px){
  .nav-links.open{
    display:flex;
    position:absolute;
    top:70px;left:0;right:0;
    flex-direction:column;
    gap:0;
    margin-left:0;
    background:var(--blanco);
    border-bottom:1px solid var(--linea);
    padding:8px 28px 20px;
  }
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--linea)}
  .nav-util.open{
    display:flex;
    position:absolute;
    top:calc(70px + 1px);
    right:28px;
    margin-top:0;
  }
  /* Submenú de Industrias anidado, no hover: mismo criterio que el resto
     del burger, position:static y siempre visible mientras .nav-links.open
     esté presente (--cerrado es un mecanismo de Escape en desktop, acá no
     aplica). Indentado y con tipografía un paso más chica para que se lea
     como hijo de "Industrias", no como otro nivel del menú principal. */
  .nav-drop-menu,
  .nav-item-drop--cerrado .nav-drop-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    border-radius:0;
    margin:0 0 4px;
    padding:0 0 0 16px;
    background:transparent;
  }
  .nav-drop-menu a{font-size:.86rem;padding:10px 0!important}
}

/* ---------- PARTIALS DE PÁGINA DE PRODUCTO (Mobile / Transfer) ---------- */

/* hero-producto.html */
.hero-prod{background:#0C1424;color:#fff;padding-block:88px;overflow-x:hidden}
.hero-prod .wrap{display:grid;gap:48px;align-items:center}
.hero-prod-texto{max-width:640px}
.hero-prod .mono{color:var(--naranja);display:block;margin-bottom:20px}
.hero-prod h1{color:#fff;max-width:18ch}
.hero-prod-bajada{margin-top:20px;font-size:1.15rem;color:rgba(255,255,255,.85);max-width:44ch}
.hero-prod-sub{margin-top:14px;font-size:.98rem;color:rgba(255,255,255,.65);max-width:52ch}
.hero-prod .hero-cta{margin-top:34px}
.hero-prod--con-escena .wrap{grid-template-columns:1fr 1fr}
.hero-prod-escena img{width:100%;height:auto;display:block}
@media(max-width:900px){
  .hero-prod--con-escena .wrap{grid-template-columns:1fr}
}
/* Mobile y Transfer: la escena es un solo teléfono (hf-escena, más abajo),
   no el widget de dos columnas parejas pensado para la góndola de AI. Le
   damos más aire al texto (columnas asimétricas) y corremos la escena
   hacia el borde derecho, para que el H1 entre en menos líneas. Todo
   escopado a :has(.hf-escena) y a min-width:901px para no tocar el layout
   de AI ni el breakpoint de una sola columna de abajo. Compartido entre
   páginas: si el H1 de una página nueva no entra bien en la columna
   angosta, no reajustar estos valores a ciegas — verificar primero cómo
   afecta a las páginas que ya lo usan. */
@media(min-width:901px){
  .hero-prod:has(.hf-escena){padding-block:72px}
  .hero-prod:has(.hf-escena) .wrap{grid-template-columns:1.3fr .9fr}
  .hero-prod:has(.hf-escena) h1{max-width:23ch;font-size:clamp(2.1rem,3.6vw,3.1rem)}
}

/* hero-escena-fono.html: uno o dos teléfonos de frente, sin inclinación —
   sin .orbita ni el resto de la escena de home (chips, parallax). Partial
   compartido por Mobile (hero-mobile.png, un solo teléfono) y Transfer
   (transfer-app.png + transfer-carrito.png, dos teléfonos).

   Marco por CSS, no por PNG: a diferencia de home_mobile.png/encuesta.png
   (mockups con el bisel del dispositivo ya dibujado en el PNG), estas son
   capturas de pantalla reales, sin marco. La home queda como la excepción
   del sistema (ver nota de deuda técnica en PENDIENTES.md); acá el chasis
   —bisel, esquinas redondeadas, pantalla contenida— lo arma .hf-fono. La
   ventaja de desacoplar el marco de la captura: reemplazar el screenshot
   de la app no obliga a rehacer un mockup de imagen. Sin notch: no hay
   espacio en blanco propio en la captura para apoyarlo sin taparle
   contenido a la cabecera de la app.

   .hf-stage envuelve el teléfono, el halo y la retícula para que los tres
   se centren sobre el teléfono de adelante (no sobre .hf-escena, que lo
   alinea a un costado — a la derecha en Mobile, a la izquierda en
   Transfer, ver la regla :has(.hf-fono--atras) más abajo). El halo reusa
   el sistema del hero de home (radial
   centrado detrás, ver .halo más arriba), adaptado de color porque acá el
   fondo ya es navy oscuro en vez de claro — un halo naranja no leería como
   separación, leería como mancha de color.

   La retícula (.hf-stage::before) reusa el lenguaje de .verticales-sec/
   .modulos (celda de 44px, líneas a rgba(148,163,184,.05), máscara radial
   con prefijo -webkit-) en vez de inventar un patrón nuevo: el halo solo
   no alcanzaba a separar el teléfono del navy plano por falta de
   contraste, la retícula suma estructura sin competir con la captura
   porque la máscara la desvanece bien antes del borde de la caja (sin
   corte duro contra el fondo). Oculta a 520px porque a ese ancho el
   teléfono ocupa casi todo el ancho de la escena y la grilla no tiene
   aire alrededor para leerse como fondo, no como ruido. */
.hf-escena{position:relative;display:flex;justify-content:flex-end;padding-block:8px}
/* Transfer invierte el orden de sus dos teléfonos (grande a la izquierda,
   chico sobresaliendo a la derecha, ver .hf-fono--atras más abajo) y por
   eso necesita el grupo alineado a la izquierda de .hf-escena. Mobile no
   tiene .hf-fono--atras y mantiene el flex-end original — no se le toca
   la posición de su único teléfono. */
.hero-prod:has(.hf-fono--atras) .hf-escena{justify-content:flex-start}
.hf-stage{position:relative}
.hf-stage::before{
  content:'';position:absolute;top:50%;left:50%;width:640px;height:760px;transform:translate(-50%,-50%);
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 0%,transparent 70%);
  pointer-events:none;
}
.hf-halo{position:absolute;top:50%;left:50%;width:440px;height:440px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 40%,transparent 70%);pointer-events:none}

/* Chasis: fondo var(--navy-2) (#1C3A5E), no #0A1526/#0C1424 como antes.
   El primer intento usaba un navy casi idéntico al fondo del hero: el
   marco se volvía invisible y solo quedaba flotando la captura (más
   notorio en el teléfono de atrás, chico, donde el aro del marco es
   angosto en píxeles absolutos). var(--navy-2) es varios puntos más claro
   que el fondo del hero — el contraste sale del color del chasis, no solo
   del borde/sombra. El borde y la sombra se mantienen para dar volumen,
   pero ya no son lo único que separa el marco del fondo.

   Grosor del bisel (padding) reducido a la mitad de la primera versión:
   con 16px/10px el marco leía más como contenedor/tarjeta que como
   teléfono. El contraste de color (var(--navy-2) contra el fondo del
   hero) es lo que separa el marco del fondo, así que el grosor se pudo
   bajar sin perder legibilidad de "esto es un marco".

   La captura llena el marco sin recortes ni bandas: img usa width:100% +
   height:auto (mantiene su proporción real), y picture no le fija una
   altura propia — así el alto de picture siempre resulta exactamente el
   alto natural de la imagen a ese ancho, sin sobrante (banda) ni faltante
   (recorte). Esto es lo mismo para .hf-fono y .hf-fono--atras: ninguno de
   los dos usa object-fit — el de atrás muestra la captura completa,
   solo más chica, igual que home muestra encuesta.png completo y chico
   detrás de home_mobile.png. */
.hf-fono{position:relative;width:320px;max-width:100%;border-radius:34px;background:var(--navy-2);border:1px solid rgba(255,255,255,.16);padding:8px 5px;box-shadow:0 40px 70px -20px rgba(3,8,17,.6),0 16px 32px -12px rgba(3,8,17,.45);opacity:0;transform:translateY(16px);animation:hfEntrarFono .55s cubic-bezier(.22,1,.36,1) .15s forwards}
.hf-fono picture{display:block;border-radius:28px;overflow:hidden}
.hf-fono img{display:block;width:100%;height:auto}
@keyframes hfEntrarFono{to{opacity:1;transform:translateY(0)}}

/* Transfer achica el teléfono de adelante (compartido con Mobile vía
   .hf-fono) para que la escena de dos teléfonos no compita con un H1 de
   tres líneas. :not(.hf-fono--atras) para no afectar el tamaño propio del
   de atrás, que se define aparte más abajo. Mobile no tiene
   .hf-fono--atras en la escena, así que esta regla no lo alcanza. */
@media(min-width:901px){
  .hero-prod:has(.hf-fono--atras) .hf-fono:not(.hf-fono--atras){width:260px}
}

/* .hf-fono--atras (Transfer, transfer-carrito.png): segundo teléfono,
   mismo chasis que .hf-fono (marco, captura completa sin recortar), solo
   que más chico y con `position` propio en vez de fluir en .hf-stage —
   así el tamaño de .hf-stage lo sigue marcando solo el teléfono de
   adelante (el que define el alto de la escena). Sin z-index propio: al
   ir antes que .hf-fono en el DOM y ninguno de los dos declarar z-index,
   el orden del documento ya alcanza para que quede detrás.

   Border-radius más chico (24px vs 34px): a este tamaño, el radio de
   .hf-fono se ve desproporcionado (demasiado redondeado para el ancho),
   así que se ajusta hacia abajo para que el chasis lea como el mismo
   diseño a otra escala, no como una pastilla.

   Desplazamiento lateral sin superposición (a diferencia del patrón de
   home, donde fono-atras y fono-frente sí se superponen): `top`
   es un porcentaje del alto del teléfono de adelante (que es el alto de
   .hf-stage), así la superposición vertical queda proporcional en vez de
   un píxel fijo que en otra escala se sale por arriba contra el nav (el
   bug de la versión anterior). `left` positivo lo corre hacia afuera por
   el costado derecho del de adelante: .hf-escena ahora alinea el grupo a
   la izquierda (justify-content:flex-start) para dejar aire de ese lado,
   con el de adelante (grande, transfer-app.png) pegado al texto y el de
   atrás (chico, transfer-carrito.png) sobresaliendo hacia la derecha, al
   revés del orden original. Con `top` acotado a un porcentaje chico y
   `left` como único eje de desborde real, el de atrás nunca se acerca al
   nav ni al borde inferior del hero.

   `left` es al menos el ancho de .hf-fono (adelante) más ~10px de aire,
   para que no se toquen: 270px a un ancho de adelante de 260px, 310px a
   300px. El ancho de .hf-fono--atras (195px / 182px) es un 30% más grande
   que el tamaño base (150px / 140px) del ajuste anterior, pedido para que
   el teléfono que ahora queda a la vista en el borde derecho no se lea
   chico. Si se ajusta este valor a futuro, mantener left ≥ (ancho de
   .hf-fono + ~10px) para preservar cero superposición. */
.hf-fono--atras{
  position:absolute;top:9%;left:270px;width:195px;
  border-radius:28px;padding:7px 5px;
  box-shadow:0 24px 48px -16px rgba(3,8,17,.5);
}
.hf-fono--atras picture{border-radius:22px}

@media(max-width:900px){
  .hf-escena{justify-content:center}
  .hf-fono{width:300px}
  .hf-fono--atras{width:182px;left:310px}
}
@media(max-width:520px){
  .hf-fono{width:240px}
  .hf-halo{width:320px;height:320px}
  .hf-stage::before{display:none}
  /* Dos teléfonos superpuestos a este ancho ya no se leen: el de adelante
     ocupa casi todo el ancho de la escena y el de atrás quedaría
     apretado contra el borde. Mismo criterio que .fono-atras en el hero
     de home, que también se oculta en su breakpoint más chico. */
  .hf-fono--atras{display:none}
}

/* bloques-tension.html */
.bloques-tension{padding-block:var(--sec-y)}
.bloques-tension-label{color:var(--naranja);display:block;margin-bottom:32px}
.bloques-tension-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px 32px}
.bloque-tension{border-left:2px solid var(--naranja);border-radius:0;padding-left:18px}
.bloque-tension h3{font-size:clamp(1.25rem,2.1vw,1.6rem);margin-bottom:12px}
.bloque-tension-desc{color:var(--gris);font-size:.98rem;line-height:1.58;margin-bottom:18px}
.bloque-tension-puntos{list-style:none;display:grid;gap:10px}
.bloque-tension-puntos li{font-size:.92rem;color:var(--gris);position:relative;padding-left:16px}
.bloque-tension-puntos li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--naranja)}
.bloques-tension--oscura h3{color:#fff}
.bloques-tension--oscura .bloque-tension-desc{color:rgba(255,255,255,.7)}
.bloques-tension--oscura .bloque-tension-puntos li{color:rgba(255,255,255,.7)}
.bloques-tension--unico .bloques-tension-lista{grid-template-columns:1fr;max-width:640px}
/* Cuatro bloques en fila fija, sin dejar huérfanos: a diferencia del
   auto-fit de arriba (pensado para 2-3 bloques), acá el n° de columnas
   se fija por breakpoint. Caso real: paginas.mobile.problema. */
.bloques-tension--cuatro .bloques-tension-lista{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
  .bloques-tension--cuatro .bloques-tension-lista{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .bloques-tension--cuatro .bloques-tension-lista{grid-template-columns:1fr}
}

/* puntos-destacados.html */
.puntos-destacados{padding-block:var(--sec-y);border-top:1px solid var(--linea)}
.puntos-destacados--niebla{background:var(--niebla)}
.pd-wrap--con-visual{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-cabecera{max-width:52ch;margin-bottom:48px}
.pd-wrap--con-visual .pd-cabecera{max-width:none}
.pd-cabecera .mono{color:var(--naranja);display:block;margin-bottom:14px}
.pd-cabecera p{color:var(--gris);margin-top:14px;font-size:1.05rem}
.pd-lista{list-style:none;display:grid;gap:0;margin-bottom:32px}
.pd-lista li{display:flex;flex-wrap:wrap;gap:6px;padding:16px 0;border-bottom:1px solid var(--linea);font-size:1rem}
.pd-destacado{font-weight:700;color:var(--ink)}
.pd-texto{color:var(--gris)}
.pd-visual .img-placeholder{width:100%}
.pd-visual img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 32px rgba(10,21,38,.14))}
@media(max-width:900px){
  .pd-wrap--con-visual{grid-template-columns:1fr}
}

/* fondo="navy": mismo #16233D que .modulos (mobile.html), retícula propia
   (radiante desde donde cae el visual, no en bandas verticales) para no
   repetir el mismo patrón de fondo en las dos páginas de producto */
.puntos-destacados--navy{background:#16233D;color:#fff;border-top:0;position:relative;overflow:hidden}
.puntos-destacados--navy::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(148,163,184,.16) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 78% 30%,#000 0%,transparent 68%);
  mask-image:radial-gradient(ellipse 70% 90% at 78% 30%,#000 0%,transparent 68%);
  pointer-events:none;
}
.puntos-destacados--navy .wrap{position:relative;z-index:1}
.puntos-destacados--navy .pd-cabecera .mono{color:var(--naranja)}
.puntos-destacados--navy .pd-cabecera h2{color:#fff}
.puntos-destacados--navy .pd-cabecera p{color:rgba(255,255,255,.7)}
.puntos-destacados--navy .pd-lista li{border-bottom-color:rgba(148,163,184,.16)}
.puntos-destacados--navy .pd-destacado{color:#fff}
.puntos-destacados--navy .pd-texto{color:rgba(255,255,255,.65)}
.puntos-destacados--navy .img-placeholder{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.03)}
.puntos-destacados--navy .img-placeholder-label,
.puntos-destacados--navy .img-placeholder-ratio{color:rgba(255,255,255,.6)}
.puntos-destacados--navy .link-mas{color:#fff}
.puntos-destacados--navy .link-mas:hover{color:var(--naranja)}

/* estilo="capacidades": la mayoría de los puntos son etiqueta sola (sin
   texto) — chips envueltos en vez de filas con borde pensadas para párrafos */
.pd-lista--capacidades{display:flex;flex-wrap:wrap;gap:12px}
.pd-lista--capacidades li{flex:0 0 auto;padding:12px 18px;border:1px solid rgba(148,163,184,.24);border-radius:999px;background:rgba(255,255,255,.05)}
.pd-lista--capacidades .pd-destacado{font-weight:600;font-size:.92rem}
.pd-lista--capacidades .pd-texto{font-size:.92rem}

/* estilo="columnas": cabecera y lista en paralelo (sin imagen ni
   placeholder) en vez de cabecera angosta seguida de lista a todo el
   ancho. Regla naranja vertical por punto, mismo lenguaje que
   .bloque-tension (mobile.html) y .flujo-retorno (transfer.html) */
.pd-col--columnas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-col--columnas .pd-cabecera{max-width:none;margin-bottom:0}
.pd-col--columnas .pd-cabecera h2{font-size:clamp(1.6rem,2.2vw,2.05rem)}
.pd-col--columnas .pd-lista{gap:20px;margin-bottom:0}
.pd-col--columnas .pd-lista li{display:block;padding:0 0 0 18px;border-left:2px solid var(--naranja);border-radius:0;border-bottom:0}
.pd-col--columnas .pd-destacado{display:block;margin-bottom:4px}
.pd-col--columnas .link-mas{grid-column:2;margin-top:4px}
@media(max-width:900px){
  .pd-col--columnas{grid-template-columns:1fr}
  .pd-col--columnas .link-mas{grid-column:1}
}

/* grilla-tarjetas.html */
.grilla-tarjetas{padding-block:var(--sec-y)}
.gt-titulo{margin-bottom:40px;max-width:34ch}
.gt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:stretch}
.gt-card{background:var(--niebla);border:1px solid var(--linea);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column}
.gt-card h3{font-size:1.05rem;margin-bottom:12px}
.gt-card-cuerpo p{color:var(--gris);font-size:.94rem;line-height:1.55;margin-bottom:14px}
.gt-card-cuerpo p:last-child{margin-bottom:0}
.gt-card-lista{list-style:none;display:grid;gap:9px}
.gt-card-lista li{font-size:.9rem;color:var(--gris);position:relative;padding-left:16px}
.gt-card-lista li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--naranja)}
.grilla-tarjetas--oscura{background:var(--ink);color:#fff}
.grilla-tarjetas--oscura .gt-titulo{color:#fff}
.grilla-tarjetas--oscura .gt-card{background:#1B2A47;border-color:rgba(148,163,184,.16)}
.grilla-tarjetas--oscura .gt-card h3{color:#fff}
.grilla-tarjetas--oscura .gt-card-cuerpo p{color:rgba(255,255,255,.7)}
.grilla-tarjetas--oscura .gt-card-lista li{color:rgba(255,255,255,.7)}

/* lista-dashboards.html */
.lista-dashboards{padding-block:var(--sec-y);border-top:1px solid var(--linea)}
.ld-wrap--con-imagen{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ld-texto{max-width:640px}
.ld-texto .mono{color:var(--naranja);display:block;margin-bottom:16px}
.ld-bajada{color:var(--gris);margin-top:16px;font-size:1.05rem;max-width:52ch}
.ld-puntos{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;margin:28px 0 32px}
.ld-puntos li{font-size:.94rem;font-weight:600;position:relative;padding-left:18px}
.ld-puntos li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--naranja)}
.ld-visual{background:var(--niebla);border-radius:var(--r);padding:20px}
.ld-visual img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 32px rgba(10,21,38,.14))}
@media(max-width:900px){
  .ld-wrap--con-imagen{grid-template-columns:1fr}
}
@media(max-width:480px){
  .ld-puntos{grid-template-columns:1fr}
}

/* contacto.html */
.contacto-sec{background:var(--papel);padding-block:var(--sec-y);border-top:1px solid var(--linea)}
.form-contacto{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:760px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo:has(textarea){grid-column:1/-1}
.campo label{font-size:.85rem;font-weight:600;color:var(--ink)}
.campo input,.campo textarea{font:inherit;font-size:.95rem;padding:12px 14px;border:1px solid var(--linea);border-radius:8px;background:var(--blanco);color:var(--ink)}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--naranja);outline-offset:1px}
.campo textarea{min-height:120px;resize:vertical}
.form-contacto .btn{grid-column:1/-1;justify-self:start;border:0;cursor:pointer}
.form-contacto-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-contacto-msg{grid-column:1/-1;margin:0;font-size:.9rem;font-weight:600;display:none}
.form-contacto-msg--visible{display:block}
.form-contacto-msg--ok{color:var(--verde,#1D8F63)}
.form-contacto-msg--error{color:var(--rojo,#C4453B)}
@media(max-width:600px){
  .form-contacto{grid-template-columns:1fr}
  .campo:has(textarea){grid-column:auto}
}
.contacto-sec--oscura{background:#0C1424;color:#fff;border-top:0}
.contacto-sec--oscura .sec-head h2{color:#fff}
.contacto-sec--oscura .sec-head p{color:rgba(255,255,255,.7)}
.contacto-sec--oscura .campo label{color:#fff}
.contacto-sec--oscura .campo input,.contacto-sec--oscura .campo textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.contacto-sec--oscura .campo input::placeholder,.contacto-sec--oscura .campo textarea::placeholder{color:rgba(255,255,255,.45)}
.contacto-sec--oscura .campo input:focus,.contacto-sec--oscura .campo textarea:focus{outline-color:var(--naranja)}

/* Placeholder de imagen: ocupa el espacio real del asset final, sin asset todavía */
.img-placeholder{
  border:1px dashed rgba(10,21,38,.25);
  background:rgba(10,21,38,.035);
  border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:24px;text-align:center;
}
.img-placeholder-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.img-placeholder-ratio{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--gris-claro)}

/* banda-integraciones: banda angosta, no sección de altura completa (mobile.html S6) */
.banda-integraciones{background:var(--niebla);padding-block:56px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.banda-integraciones-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.banda-integraciones-inner h3{margin-bottom:10px}
.banda-integraciones-inner > div > p{color:var(--gris);font-size:.98rem}
.banda-integraciones-puntos{list-style:none;display:grid;gap:12px}
.banda-integraciones-puntos li{font-size:.94rem;font-weight:600;color:var(--ink);position:relative;padding-left:18px}
.banda-integraciones-puntos li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--naranja)}
@media(max-width:760px){
  .banda-integraciones{padding-block:40px}
  .banda-integraciones-inner{grid-template-columns:1fr}
}

/* modulos: sección estructural de mobile.html S4, sin partial (Tickets/Mi Día/Perfect Store) */
.modulos{background:#16233D;color:#fff;padding-block:var(--sec-y);position:relative;overflow:hidden}
.modulos::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  pointer-events:none;
}
.modulos .wrap{position:relative;z-index:1}

.mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mod-card{background:#1B2A47;border:1px solid rgba(148,163,184,.16);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;transition:border-color .2s}
.mod-card:hover{border-color:rgba(244,121,32,.4)}
.mod-card .mono{color:var(--naranja);display:block;margin-bottom:16px}
.mod-card h3{color:#fff;margin-bottom:12px}
.mod-card-bajada{color:rgba(255,255,255,.7);font-size:.94rem;line-height:1.55;margin-bottom:24px}
.mod-trigger{margin-top:auto;align-self:flex-start;background:none;border:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);cursor:pointer;font-weight:600;padding:0;display:flex;align-items:center;gap:7px;transition:gap .18s}
.mod-trigger:hover{gap:11px}
.mod-trigger:focus-visible,.panel-cerrar:focus-visible{outline:2px solid var(--naranja);outline-offset:4px;border-radius:4px}
.mod-trigger[aria-expanded="true"]{color:#fff}

.modulo-panel{max-height:none;opacity:1;overflow:visible}
.js-acordeon .modulo-panel{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.js-acordeon .modulo-panel.abierto{max-height:8000px;opacity:1}

.panel-cuerpo{padding-top:48px;margin-top:40px;border-top:1px solid rgba(148,163,184,.16)}
.panel-cuerpo > .mono{color:var(--naranja);display:block;margin-bottom:16px}
.panel-cuerpo > h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:14px}
.panel-bajada{color:rgba(255,255,255,.8);font-size:1.05rem;max-width:62ch;margin-bottom:22px}
.panel-parrafo{color:rgba(255,255,255,.7);font-size:.98rem;line-height:1.6;max-width:68ch;margin-bottom:18px}
.panel-conexion{margin:0 0 40px;padding:16px 20px;border-left:3px solid var(--naranja);background:rgba(255,255,255,.04);font-size:.94rem;line-height:1.55;color:rgba(255,255,255,.78);max-width:68ch}
.panel-conexion p+p{margin-top:12px}
.panel-subhead{max-width:60ch;margin-bottom:28px}
.panel-subhead-label{color:var(--naranja);display:block;margin-bottom:12px}
.panel-subhead h4{color:#fff;font-size:clamp(1.15rem,1.8vw,1.4rem);margin-bottom:10px}
.panel-subhead p{color:rgba(255,255,255,.7);font-size:.96rem}

.modulo-panel .grilla-tarjetas--oscura{background:transparent;padding-block:0;margin-bottom:44px}
.modulo-panel .grilla-tarjetas--oscura:last-of-type{margin-bottom:0}
.modulo-panel .grilla-tarjetas--oscura .wrap{padding:0}
.modulo-panel .grilla-tarjetas--oscura .gt-titulo{margin-bottom:24px;font-size:clamp(1.15rem,1.8vw,1.4rem)}

.pasos{list-style:none;counter-reset:paso;display:grid;gap:18px;margin:28px 0 32px;max-width:68ch}
.pasos li{position:relative;padding-left:44px;font-size:.98rem;line-height:1.55;color:rgba(255,255,255,.8)}
.pasos li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;
  background:rgba(244,121,32,.15);color:var(--naranja);
  font-family:var(--mono);font-weight:600;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.panel-cierre{font-style:italic;color:rgba(255,255,255,.65);font-size:.95rem;max-width:60ch;margin-bottom:32px}
.panel-cerrar{background:none;border:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);cursor:pointer;font-weight:600;padding:0}

@media(max-width:900px){
  .mod-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .modulos::before{background-size:64px 64px}
}

/* intro-banda: transfer.html S2, párrafo suelto sin envoltorio de sección
   completa — mismo rol que cumple este texto en el sitio en producción.
   Ancho de lectura, sin fondo propio (el contraste con el hero navy de
   arriba y el gris de .flujo abajo ya demarca la banda). */
.intro-banda{padding-block:64px}
.intro-banda p{max-width:68ch;font-size:1.15rem;line-height:1.6;color:var(--gris)}

/* flujo: transfer.html S3, recorrido de un pedido como tarjetas
   conectadas. Fondo "gris claro": se usa var(--niebla), el mismo token
   que .clientes/.gt-card, en vez del hex suelto, para no introducir un
   segundo gris casi-idéntico al sistema. */
.flujo{padding-block:var(--sec-y);background:var(--niebla);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}

/* Reemplaza un diagrama en SVG (nodos como puntos sobre una línea): los
   nodos no tenían peso visual, los textos de paso quedaban lejos de su
   nodo, y la convergencia de los dos canales de entrada + el retorno
   punteado ensuciaban la composición. Markup y CSS original archivados en
   mockups/flujo-svg-transfer.html.

   Los dos canales de entrada ("Se carga") y las tres denominaciones del
   destino ("Se despacha") ya no son nodos con líneas de conexión: son
   chips (.flujo-chips) dentro de la tarjeta a la que pertenecen. Eso saca
   de encima la convergencia y el nodo triple, que era lo que peor se veía
   del diagrama anterior, sin perder esa información (sigue en prosa en
   .flujo-tarjeta-texto).

   .flujo-fila es una sola fila de 7 elementos en el DOM, en este orden:
   tarjeta, chevron, tarjeta, chevron, tarjeta, chevron, tarjeta (el
   chevron no se imprime después de la última tarjeta, ver
   {% if not loop.last %} en transfer.html). En desktop esos 7 elementos
   son 7 columnas explícitas (tarjeta=1fr, chevron=auto) en una sola fila.
   En tablet (≤900px, ver breakpoint más abajo) se reusa el mismo orden de
   DOM para armar 2 filas de 3 columnas (tarjeta, chevron, tarjeta):
   ocultando solo el chevron del medio —el que uniría la fila 1 con la
   fila 2, :nth-child(4) sobre 7 hijos— el auto-placement de grid arranca
   la fila siguiente en la columna 1 sin reordenar nada a mano, porque un
   elemento en display:none no consume celda. En mobile (≤600px) todos los
   chevrons vuelven a mostrarse, ahora rotados 90° apuntando hacia abajo,
   como conector de una pila vertical de una sola columna. */
.flujo-fila{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;column-gap:14px;align-items:stretch}
.flujo-chevron{display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:var(--gris-claro);padding:0 2px}

.flujo-tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:12px}
.flujo-tarjeta-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--gris-claro)}
.flujo-tarjeta-nombre{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--ink)}
.flujo-chips{display:flex;flex-wrap:wrap;gap:6px}
.flujo-chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--gris);background:var(--niebla);border:1px solid var(--linea);border-radius:999px;padding:3px 10px}
.flujo-tarjeta-texto{color:var(--gris);font-size:.9rem;line-height:1.55}

/* Única tarjeta en navy: es la de CheckPOS Transfer ("Se consolida"), el
   punto donde entra el producto. La inversión de tono marca ese lugar sin
   necesidad de que el naranja lo señale — el naranja acá se reserva para
   el número de paso, que hace de eyebrow de la tarjeta. */
.flujo-tarjeta--acento{background:var(--navy);border-color:var(--navy)}
.flujo-tarjeta--acento .flujo-tarjeta-num{color:var(--naranja)}
.flujo-tarjeta--acento .flujo-tarjeta-nombre{color:#fff}
.flujo-tarjeta--acento .flujo-chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.flujo-tarjeta--acento .flujo-tarjeta-texto{color:rgba(255,255,255,.75)}

/* Banda de retorno: el argumento diferencial del producto (qué contesta
   la droguería) gana bloque propio a ancho completo, en vez de ser una
   curva punteada cruzando el diagrama. Regla de un solo lado, sin radio:
   distinto del resto de las superficies con esquinas redondeadas del
   sitio a propósito, para que se lea como nota adosada, no como tarjeta. */
.flujo-retorno{background:var(--blanco);border-left:2px solid var(--naranja);border-radius:0;padding:22px 26px;margin-top:32px}
.flujo-retorno-eyebrow{color:var(--naranja);display:block;margin-bottom:8px}
.flujo-retorno-texto{color:var(--gris);font-size:.95rem;line-height:1.6;max-width:68ch}

/* Tabla de estados: evidencia de la respuesta (pedidos reales de vuelta,
   con su droguería, farmacia, monto y estado). Único lugar del sitio con
   color más allá del acento naranja: ámbar/verde/rojo son estados de
   sistema, no decoración (excepción documentada, ver CLAUDE.md). */
.flujo-tabla-wrap{margin-top:20px;border:1px solid #EAEFF5;border-radius:8px;overflow:hidden}
.flujo-tabla{width:100%;border-collapse:collapse}
.flujo-tabla th{background:#F7F9FC;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--gris);padding:10px 14px;text-align:left}
.flujo-tabla td{padding:12px 14px;font-size:.88rem;color:var(--ink);border-top:1px solid #EAEFF5;overflow-wrap:break-word}
.flujo-tabla th:nth-child(4),.flujo-tabla th:nth-child(5),.flujo-tabla th:nth-child(6),
.flujo-tabla td:nth-child(4),.flujo-tabla td:nth-child(5),.flujo-tabla td:nth-child(6){text-align:right}
.flujo-tabla-estado{font-weight:600}
.flujo-tabla-estado--recibida{color:#D97917}
.flujo-tabla-estado--facturada{color:#1D8F63}
.flujo-tabla-estado--sin-stock{color:#C4453B}
.flujo-tabla-pct{color:var(--gris-claro);font-weight:400;margin-left:6px;font-size:.82rem}
.flujo-tabla-pie{margin-top:10px;text-align:right;color:var(--gris-claro)}

/* Banda de droguerías integradas: cierra el módulo de flujo, debajo del
   bloque de respuesta. Once logos con proporciones muy distintas (Cofaral y
   Sur son wordmarks anchos, Acofar es casi un círculo) armaban una grilla
   de dos filas desbalanceada, así que pasa a marquee continuo, reusando
   el sistema de .marquee/.marquee img/@keyframes correr del carrusel de
   clientes de la home (layout, loop por duplicación, hover, fallback de
   prefers-reduced-motion) en vez de una grilla propia. Lo específico de
   esta banda es el contenedor — se queda dentro de .wrap del flujo, no
   full-bleed como .clientes — y la velocidad: 11 logos hacen un track
   mucho más corto que los ~25 de clientes, así que a los mismos 34s se
   verían corriendo mucho más lento; 18s iguala la velocidad percibida
   (px/s) entre las dos bandas. El alto por logo (no fijo) lo calcula
   logos_droguerias() en build.py y llega por style inline, que pisa el
   height fijo de .marquee img sin tocar esa regla compartida. */
.drogueria-logos-cabecera{margin-top:40px;padding-top:22px;border-top:1px solid var(--linea)}
.drogueria-logos-cabecera .mono{color:var(--gris)}
.drogueria-marquee{overflow:hidden;margin-top:18px}
.marquee--drogueria{animation-duration:18s}

/* Entrada en secuencia: cada tarjeta aparece con un fundido + leve subida,
   una detrás de otra, disparada una sola vez al entrar en viewport (ver
   js/main.js, clase js-diagrama en <html> — mismo mecanismo que antes
   usaba el trazo del SVG, reutilizado acá). Sin esa clase (JS no corrió o
   prefers-reduced-motion) las tarjetas quedan siempre visibles y en su
   posición final: ese es el fallback, no un estado transitorio. */
.js-diagrama .flujo-tarjeta,.js-diagrama .flujo-retorno{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js-diagrama .flujo-diagrama.en-vista .flujo-tarjeta,.js-diagrama .flujo-diagrama.en-vista .flujo-retorno{opacity:1;transform:none}
.js-diagrama .flujo-fila .flujo-tarjeta:nth-child(1){transition-delay:0s}
.js-diagrama .flujo-fila .flujo-tarjeta:nth-child(3){transition-delay:.12s}
.js-diagrama .flujo-fila .flujo-tarjeta:nth-child(5){transition-delay:.24s}
.js-diagrama .flujo-fila .flujo-tarjeta:nth-child(7){transition-delay:.36s}
.js-diagrama .flujo-retorno{transition-delay:.48s}

@media(max-width:900px) and (min-width:601px){
  /* Tablet: 2 columnas de tarjetas. Se oculta el único chevron que uniría
     verticalmente la fila 1 con la fila 2 (ver nota de .flujo-fila más
     arriba); los dos chevrons restantes quedan entre pares horizontales.
     Acotado a min-width:601px para no pisar el mobile (≤600px) de abajo,
     que necesita este mismo chevron visible. */
  .flujo-fila{grid-template-columns:1fr auto 1fr;row-gap:24px}
  .flujo-fila>.flujo-chevron:nth-child(4){display:none}
}

@media(max-width:600px){
  /* Mobile: una columna apilada. Todos los chevrons vuelven (ya no hay
     ninguno "vertical" que ocultar: todos lo son) y se rotan para apuntar
     hacia abajo, como conector de la pila. */
  .flujo-fila{grid-template-columns:1fr;row-gap:4px}
  .flujo-chevron{width:32px;height:32px;margin-inline:auto;padding:0;transform:rotate(90deg)}
  .flujo-retorno{margin-top:20px}

  /* Seis columnas no entran en mobile: se ocultan Un. y Monto (quedan
     #, Droguería, Farmacia y Estado) en vez de apilar cada fila, para
     conservar la lectura de tabla comparable entre pedidos. */
  .flujo-tabla th:nth-child(4),.flujo-tabla th:nth-child(5),
  .flujo-tabla td:nth-child(4),.flujo-tabla td:nth-child(5){display:none}
  .flujo-tabla th,.flujo-tabla td{padding:10px}
  .flujo-tabla th{font-size:.64rem}
  .flujo-tabla td{font-size:.82rem}
}

/* ---------- PÁGINA DE INDUSTRIAS (paginas/industrias.html) ---------- */
/* Ritmo de superficies propio (no .sec/.sec-head): cada industria es su
   propia <section> con id de ancla, para que el desplegable del nav
   (partials/nav.html) y los redirects tipo /industrias/#ancla lleguen
   directo. niebla en las impares, blanco en las pares — igual que el
   hero (navy) y el cierre de contacto (navy) quedan siempre sobre un
   vecino distinto. */
.industria-sec{padding-block:var(--sec-y);border-top:1px solid var(--linea)}
.industria-sec--niebla{background:var(--niebla)}
.industria-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Alterna por índice de loop, no nth-child: impar = imagen a la izquierda
   (order:-1 en industria-vis), par = imagen a la derecha (orden natural
   del DOM, sin modificador). */
.industria-fila--imagen-izq .industria-vis{order:-1}
.industria-col .mono{color:var(--naranja);display:block;margin-bottom:14px}
.industria-col h2{max-width:16ch}
.industria-desc{color:var(--gris);margin:16px 0 22px;font-size:1.02rem}
.industria-vis .img-placeholder{width:100%}
.industria-vis img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 32px rgba(10,21,38,.14))}
.industria-ideal{margin-top:22px;padding-top:20px;border-top:1px solid var(--linea);font-size:.92rem;line-height:1.55;color:var(--gris)}
.industria-ideal b{color:var(--ink);font-weight:600}

/* Banda de logos por industria: mismo tratamiento óptico que .marquee
   (grayscale + opacity, revela color en hover) pero estática y en flex-wrap
   en vez de animada — no hay suficientes logos por industria para un scroll
   infinito, y forzarlo con 1-2 ítems (caso Agencias) se leería roto. Con
   un solo logo el wrap arranca alineado a la izquierda, igual que el resto
   del contenido de la fila: no se estira ni queda huérfano al centro. */
.industria-logos-cabecera{margin-top:48px}
.industria-logos-cabecera .mono{color:var(--gris)}
.industria-logos{display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin-top:18px;padding-top:22px;border-top:1px solid var(--linea)}
.industria-logos img{height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.industria-logos img:hover{filter:grayscale(0);opacity:1}

@media(max-width:900px){
  /* La imagen va siempre arriba del texto en mobile, sin importar de qué
     lado estaba en desktop: se pisa el order:-1 condicional de arriba
     forzándolo siempre, en vez de dejarlo en manos de la clase. */
  .industria-grid{grid-template-columns:1fr;gap:28px}
  .industria-vis{order:-1}
  .industria-col h2{max-width:none}
}

/* ---------- PÁGINA DE AI (paginas/ai.html) ---------- */
/* S2 · mapa de capacidades: tres tarjetas de igual peso, no dos columnas
   por producto (eso dejaba a Transfer con una sola tarjeta y sugería
   menos producto ahí). Dónde corre cada capacidad y su estado quedan
   como chips dentro de la tarjeta en vez de encabezados de columna.
   align-items:stretch (default de grid) empareja la altura de las tres
   sin necesitar JS ni una altura fija. */
.mapa-ai{padding-block:var(--sec-y);border-top:1px solid var(--linea)}
.mapa-ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mapa-ai-tarjeta{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:var(--r);padding:26px 24px;background:var(--niebla)}
.mapa-ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mapa-ai-chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;padding:4px 10px;border-radius:999px;border:1px solid var(--linea);background:#fff;color:var(--gris);font-weight:600}
.mapa-ai-chip--estado{color:var(--naranja);border-color:var(--naranja)}
.mapa-ai-cap-nombre{font-weight:700;color:var(--ink);font-size:1.05rem;display:block;margin-bottom:10px}
.mapa-ai-tarjeta p{color:var(--gris);font-size:.95rem;line-height:1.55;margin:0}

@media(max-width:900px){
  .mapa-ai-grid{grid-template-columns:1fr 1fr}
  .mapa-ai-tarjeta:nth-child(3){grid-column:1/-1}
}

@media(max-width:600px){
  .mapa-ai-grid{grid-template-columns:1fr}
  .mapa-ai-tarjeta:nth-child(3){grid-column:auto}
}

/* S3 · las tres capacidades: reusa industria-sec/industria-grid tal cual
   (mismo ritmo alternado). ai-capacidad-col solo levanta la restricción de
   ancho de industria-col h2, pensada para títulos cortos de industrias. */
.ai-capacidad-col h2{max-width:none}
.ai-capacidad-solo{margin-bottom:0}
.ai-capacidad-galeria-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}

@media(max-width:600px){
  .ai-capacidad-galeria-fila{grid-template-columns:1fr}
}

/* industria-vis nace pensado para <img>, con padding 0 y fondo transparente
   (el "marco" lo pone el propio mockup/foto). Las escenas animadas sí
   necesitan look de panel (fondo navy propio, como el hero) para leerse
   como una demo interactiva y no como una imagen suelta. */
.industria-vis--escena{background:none;padding:0}

/* Ambas escenas (iris y chat) arrancan pausadas y se liberan cuando su
   [data-reveal] recibe .is-visible (scroll-reveal existente en
   js/main.js) — no disparan junto con la góndola del hero ni entre sí,
   cada una cuelga de la sección que la contiene. iRIS sigue en loop
   (animation-iteration-count:infinite en su bloque); el chat corre una
   sola vez y queda en su estado final (animation-fill-mode:forwards,
   sin iteration-count) — y como js/main.js hace observer.unobserve()
   tras el primer reveal, .is-visible no se saca nunca: si el usuario
   scrollea fuera y vuelve, el chat no reinicia, queda completo. */
.escena-iris .face.det,
.escena-iris .scan,
.escena-iris .tag-svg,
.escena-iris .iris-flash,
.chat-demo .chat-linea,
.chat-demo .chat-pensando{animation-play-state:paused}
[data-reveal].is-visible .escena-iris .face.det,
[data-reveal].is-visible .escena-iris .scan,
[data-reveal].is-visible .escena-iris .tag-svg,
[data-reveal].is-visible .escena-iris .iris-flash,
[data-reveal].is-visible .chat-demo .chat-linea,
[data-reveal].is-visible .chat-demo .chat-pensando{animation-play-state:running}

/* ---------- ESCENA IRIS (capacidades, S3) ---------- */
/* Mismo sistema visual que el planograma del hero (.plano/.gondola/
   .estante/.face/.tag-svg/.scan, ver bloque "PLANOGRAMA" más arriba),
   pero más chica (2 estantes, sin plano-foot) y con un timeline propio
   más largo, que agrega una fase de reposo y de captura antes del
   barrido — el hero ya está en su estado final, esto necesita mostrar
   cómo se llega a él. */
.escena-iris{max-width:420px}
.iris-visor{position:relative}
.iris-esquina{position:absolute;width:18px;height:18px;border:2px solid rgba(244,121,32,.5);opacity:.6;z-index:2}
.iris-esquina--tl{top:-6px;left:-6px;border-right:0;border-bottom:0}
.iris-esquina--tr{top:-6px;right:-6px;border-left:0;border-bottom:0}
.iris-esquina--bl{bottom:-6px;left:-6px;border-right:0;border-top:0}
.iris-esquina--br{bottom:-6px;right:-6px;border-left:0;border-top:0}
.iris-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3;animation:irisFlash 6s infinite}
@keyframes irisFlash{0%,10.9%{opacity:0}11%{opacity:.85}12.5%{opacity:0}100%{opacity:0}}

.escena-iris .scan{animation-name:irisScan;animation-duration:6s}
@keyframes irisScan{0%,13%{top:0;opacity:0}15%{opacity:1}38%{top:100%;opacity:1}42%,100%{top:100%;opacity:0}}

.escena-iris .face.det{animation-name:irisDetectar;animation-duration:6s}
@keyframes irisDetectar{0%,13%{opacity:.25;transform:scale(.97)}22%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:.25;transform:scale(.97)}}

.escena-iris .tag-svg{animation-name:irisTagIn;animation-duration:6s}
@keyframes irisTagIn{0%,20%{opacity:0}28%,84%{opacity:1}92%,100%{opacity:0}}

/* Etiqueta de precio: mismo look que .tag-svg pero anclada bajo el
   producto (y=136 en vez de y=5, ver escena-iris-proceso.html) — el
   producto y el precio se leen como dos hallazgos distintos sobre el
   mismo envase, no una etiqueta más larga. */
.tag-svg--precio rect{fill:#fff}
.tag-svg--precio text{fill:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .escena-iris .iris-flash{display:none}
}

/* ---------- ESCENA CHAT (capacidades, S3) ---------- */
/* HTML, no SVG: es una ventana de chat, no una ilustración de producto.
   El chat corre en el navegador, así que la ventana tiene que verse como
   una interfaz web real (blanca, borde fino, sombra suave) y no como una
   pieza del sistema visual navy del resto del sitio (panel oscuro tipo
   hero/iris). La burbuja es solo para el mensaje del usuario (gris muy
   claro, texto oscuro); las respuestas del asistente van sin burbuja,
   texto directo sobre blanco, con un avatar circular chico en naranja
   junto a la primera línea de cada respuesta — es el único acento de
   color de la escena. */
.chat-demo{max-width:420px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:20px;box-shadow:0 20px 40px -24px rgba(10,21,38,.25);display:flex;flex-direction:column}
.chat-demo-head{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--linea)}
.chat-demo-head .mono{color:var(--gris)}

/* El cuerpo toma la altura del estado final desde el arranque (frame que
   no se estira) y ancla el contenido abajo: cada línea crece hacia
   arriba dentro de esa altura fija en vez de reservar un vacío del
   tamaño completo desde el primer frame, como un chat real donde los
   mensajes suben. La altura está calibrada al contenido actual de
   es.json (pregunta + hallazgo + desglose de 3 líneas + recomendación);
   si ese contenido cambia sustancialmente hay que reajustarla. */
.chat-demo-body{height:400px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}

.chat-fila{display:flex;gap:10px;align-items:flex-start;flex-shrink:0}
.chat-fila--user{justify-content:flex-end}
.chat-pensando{flex-shrink:0}

.chat-avatar,.chat-avatar-spacer{flex:0 0 26px;width:26px;height:26px}
.chat-avatar{border-radius:50%;background:var(--naranja);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.72rem}

.chat-burbuja{border-radius:12px;padding:11px 15px;max-width:82%}
.chat-burbuja p{margin:0;font-size:.89rem;line-height:1.5}
.chat-burbuja--user{background:var(--niebla);color:var(--ink);border-bottom-right-radius:3px}

.chat-fila--bot p{margin:0;font-size:.89rem;line-height:1.6;color:var(--ink);padding-top:3px}
.chat-hallazgo p{font-weight:600}
.chat-desglose-item p{color:var(--gris)}
.chat-recomendacion p{font-weight:600}

.chat-pensando-dots{display:flex;gap:5px;align-items:center;height:26px}
.chat-pensando-dots span{width:6px;height:6px;border-radius:50%;background:var(--gris-claro);animation-name:chatPensando;animation-duration:6s}
.chat-pensando-dots span:nth-child(2){animation-delay:.12s}
.chat-pensando-dots span:nth-child(3){animation-delay:.24s}
@keyframes chatPensando{0%,100%{opacity:.4;transform:translateY(0)}2%,10%{opacity:1;transform:translateY(-3px)}18%{opacity:.4;transform:translateY(0)}}

/* Timeline: corre UNA SOLA VEZ (sin animation-iteration-count:infinite)
   y con animation-fill-mode:forwards en cada elemento, para que el
   estado final (conversación completa) persista en vez de volver al
   0% — nadie relee la misma conversación en loop, y un ciclo infinito
   deja la escena más tiempo en un estado intermedio roto (solo la
   pregunta, con vacío alrededor mientras las líneas están en su valle
   de entre-ciclos) que en su estado legible. Pregunta ya está en el DOM
   (arriba, sin animación propia). "Pensando" aparece breve y desaparece
   para siempre (su propio 100% ya la deja en opacity:0, sin volver).
   Después cada línea de la respuesta crece en cascada (max-height+
   opacity, no solo fade: así el cuerpo del chat gana altura real) y se
   queda ahí. El desglose tiene largo variable según el contenido de
   es.json, así que el delay de cada línea (chat-hallazgo, cada
   chat-desglose-item, chat-recomendacion) se calcula en el template
   (escena-chat-tableros.html, style inline) en vez de por :nth-of-type
   acá: todas las líneas son <div>, así que nth-of-type cuenta posición
   por tag entre TODOS los hermanos, no por clase — :nth-of-type(1) no
   aísla "el primer .chat-desglose-item".
   El límite de max-height (120px) es solo un techo: mientras el techo es
   menor que el alto real del contenido, la fila queda recortada a ese
   techo (de ahí el crecimiento visible); una vez que el techo lo supera,
   la fila se asienta en su alto real sin dejar aire de más. Con el ciclo
   fuera de juego, la altura fija de .chat-demo-body ya no existe para
   sostener un loop: es simplemente el alto del contenido final. */
.chat-pensando{overflow:hidden;max-height:0;opacity:0;animation-name:chatPensandoOnce;animation-duration:1.1s;animation-timing-function:ease;animation-delay:.2s;animation-fill-mode:forwards}
@keyframes chatPensandoOnce{0%{max-height:0;opacity:0}30%,70%{max-height:26px;opacity:1}100%{max-height:0;opacity:0}}
.chat-hallazgo{animation-delay:1s}
.chat-linea{overflow:hidden;max-height:0;opacity:0;transform:translateY(6px);animation-name:chatLineaOnce;animation-duration:.55s;animation-timing-function:ease;animation-fill-mode:forwards}
@keyframes chatLineaOnce{0%{max-height:0;opacity:0;transform:translateY(6px)}100%{max-height:120px;opacity:1;transform:none}}

@media(max-width:600px){
  .chat-linea--opcional{display:none}
  .chat-demo-body{height:400px}
}

@media(prefers-reduced-motion:reduce){
  .chat-pensando{display:none}
  .chat-demo-body{height:auto;overflow:visible}
  .chat-linea{max-height:none!important;opacity:1!important;transform:none!important;overflow:visible!important}
}