/* MyFoodTracking — versión Aurora.
   El mismo lenguaje de Facility Inspector (letra fina y enorme, píldoras,
   sombras largas con color adentro, luz que deriva, movimiento de verdad),
   con la marca de MyFoodTracking: navy #1F3864 y verde #4C8C2B.
   Reglas: UNA manera de decir "soy una caja" (sombra, sin bordes); contraste
   real de tamaño y peso; el color como atmósfera; y todo el movimiento se
   apaga con prefers-reduced-motion. */
:root{
  --paper:#F9FBF7; --surface:#FFFFFF; --surface-2:#F2F6EE; --line:#E3EADC;
  --ink:#16294A; --text:#46526A; --muted:#7A8599;
  --navy:#1F3864; --navy-2:#16294A; --green:#4C8C2B; --green-2:#4E9A51; --green-soft:#8CC56A;
  --wash:#EAF4E3; --blue:#2E75B6; --amber:#E8A33D; --red:#C4433B;
  --ok:#2E8B3E; --ok-bg:#E6F4E6; --warn:#B7791F; --warn-bg:#FBF1DC; --bad:#C4433B; --bad-bg:#FBE8E6;
  --r:26px; --maxw:1140px;
  --sombra:0 18px 40px -24px rgba(22,41,74,.32),0 0 0 6px rgba(76,140,43,.03);
  --sombra-alta:0 30px 64px -34px rgba(22,41,74,.42),0 0 0 6px rgba(76,140,43,.04);
  --lumbre:linear-gradient(150deg,#63B23C,#2F6E1C);
  --lumbre-glow:0 14px 28px -12px rgba(76,140,43,.8);
  --banda:linear-gradient(180deg,#EEF6E8 0%,#F9FBF7 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);overflow-x:clip;
  background:
    radial-gradient(80rem 34rem at 82% -12rem,rgba(76,140,43,.14),transparent 60%),
    radial-gradient(60rem 30rem at -8% 14rem,rgba(46,117,182,.10),transparent 55%),
    var(--paper);
  font-family:"Public Sans","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Public Sans","Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);
  margin:0;letter-spacing:-.04em;line-height:1.06}
h1{font-size:clamp(2.3rem,4.8vw,3.9rem);font-weight:300}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:300}
h3{font-size:1.14rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
p{margin:0 0 15px}
a{color:var(--green)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);font-weight:600}
.lead{font-size:1.14rem;color:var(--text)}
.muted{color:var(--muted)}
section{padding:clamp(70px,9vw,124px) 0}
.banda{background:var(--banda)}

/* el acento del titular: verde→azul, respirando */
.acento{background:linear-gradient(100deg,#3F8A22,#6BB845 35%,#2E75B6 70%,#3F8A22);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:acentoVivo 7s ease-in-out infinite alternate}
@keyframes acentoVivo{to{background-position:100% 0}}

/* entradas al hacer scroll */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv-in{opacity:1;transform:none}
.grid>.rv:nth-child(2){transition-delay:.08s}.grid>.rv:nth-child(3){transition-delay:.16s}
.grid>.rv:nth-child(4){transition-delay:.24s}.grid>.rv:nth-child(5){transition-delay:.32s}
.grid>.rv:nth-child(6){transition-delay:.4s}

/* aviso de arriba */
.aviso{background:var(--lumbre);color:#fff;text-align:center;font-size:.86rem;font-weight:600;
  padding:9px 16px;position:relative;overflow:hidden}
.aviso::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  background-size:220% 100%;animation:barrido 5s ease-in-out infinite}
@keyframes barrido{0%{background-position:160% 0}100%{background-position:-60% 0}}

/* nav: píldora de cristal flotando */
nav{position:sticky;top:12px;z-index:50;pointer-events:none;margin-top:12px}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;
  pointer-events:auto;background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:999px;box-shadow:var(--sombra);
  max-width:calc(var(--maxw) - 8px);padding:0 10px 0 24px;margin:0 auto}
@media(max-width:1180px){nav .wrap{margin:0 16px}}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.marca .mw{font-weight:800;font-size:1.18rem;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.marca .mw b{color:var(--green);font-weight:800}
.marca small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:2px}
.marca .chip-26{font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:700;letter-spacing:.08em;
  background:var(--wash);color:var(--green);border-radius:999px;padding:4px 9px}
nav .links{display:flex;gap:22px;font-size:.9rem}
nav .links a{color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s}
nav .links a:hover{color:var(--ink)}
@media(max-width:900px){nav .links{display:none}}

/* botones */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;
  font-weight:600;text-decoration:none;font-size:1rem;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-1{background:var(--lumbre);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--lumbre-glow)}
.btn-1:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 34px -12px rgba(76,140,43,.95)}
.btn-2{background:#fff;color:var(--ink);box-shadow:var(--sombra)}
.btn-2:hover{box-shadow:var(--sombra-alta)}
.btn-3{background:#fff;color:var(--navy);box-shadow:0 12px 34px -12px rgba(0,0,0,.45)}
nav .btn{padding:10px 20px;font-size:.9rem}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* el aro de luz que gusta: fino y calmado */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn-aro{position:relative}
.btn-aro::after{content:"";position:absolute;inset:-2px;border-radius:999px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--giro),transparent 0deg 12deg,#8CC56A 55deg,#fff 90deg,#2E75B6 125deg,
    transparent 170deg 190deg,#8CC56A 235deg,#fff 270deg,#4C8C2B 305deg,transparent 350deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(76,140,43,.8));animation:giraAro 6s linear infinite}
@keyframes giraAro{to{--giro:360deg}}

/* ══ hero: aurora que deriva + malla de puntos ══ */
.hero{padding:clamp(40px,5vw,70px) 0 clamp(48px,6vw,80px);position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;z-index:-2;inset:-80px -10% 0;pointer-events:none;
  filter:blur(64px) hue-rotate(0deg);
  background:
    linear-gradient(180deg,rgba(76,140,43,.16),transparent 38%),
    radial-gradient(560px 460px at 8% 22%,rgba(107,184,69,.62),transparent 70%),
    radial-gradient(620px 460px at 92% 14%,rgba(46,117,182,.42),transparent 68%),
    radial-gradient(720px 300px at 50% 6%,rgba(232,163,61,.22),transparent 70%),
    radial-gradient(800px 360px at 50% 100%,rgba(76,140,43,.30),transparent 72%);
  animation:aurora 7s ease-in-out infinite alternate}
@keyframes aurora{
  0%{transform:translate(-7%,-1%) scale(1.02);filter:blur(64px) hue-rotate(0deg);opacity:.85}
  50%{transform:translate(3%,2.5%) scale(1.12);opacity:1}
  100%{transform:translate(8%,-2%) scale(1.04);filter:blur(64px) hue-rotate(-30deg);opacity:.9}}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(31,56,100,.12) 1px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 86%);mask-image:linear-gradient(180deg,#000 38%,transparent 86%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero h1{margin:18px 0 20px}
.hero .lead{font-size:1.08rem;max-width:36em}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border-radius:999px;
  padding:9px 18px;font-size:.82rem;font-weight:600;box-shadow:var(--sombra)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto;
  animation:latido 2.2s ease-out infinite}
.pill b{color:var(--green)}
@keyframes latido{0%{box-shadow:0 0 8px rgba(76,140,43,.9),0 0 0 0 rgba(76,140,43,.45)}
  70%{box-shadow:0 0 8px rgba(76,140,43,.9),0 0 0 9px rgba(76,140,43,0)}
  100%{box-shadow:0 0 8px rgba(76,140,43,.9),0 0 0 0 rgba(76,140,43,0)}}
/* entrada escalonada del hero */
.hero .pill,.hero h1,.hero .lead,.hero .btns{animation:sube .8s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.18s}.hero .btns{animation-delay:.28s}
.hero .marco{animation:subeGrande 1s cubic-bezier(.2,.7,.2,1) both .3s}
@keyframes sube{from{opacity:0;transform:translateY(24px)}}
@keyframes subeGrande{from{opacity:0;transform:translateY(54px) scale(.97)}}

/* el marco de aparato donde flota el producto */
.marco{background:rgba(255,255,255,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:26px;padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(22,41,74,.07),
    0 60px 140px -60px rgba(22,41,74,.5),0 30px 70px -40px rgba(76,140,43,.35)}

/* ══ tablero (hero y panel ejecutivo) ══ */
.tab{background:#fff;border-radius:18px;overflow:hidden;font-size:.84rem;color:var(--text)}
.tab-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--navy);color:#fff;
  font-weight:600;font-size:.82rem}
.tab-top .dots{display:flex;gap:5px}.tab-top .dots i{width:8px;height:8px;border-radius:50%;display:block}
.tab-top .dots i:nth-child(1){background:#FF6159}.tab-top .dots i:nth-child(2){background:#FFBD2E}.tab-top .dots i:nth-child(3){background:#28C840}
.vivo{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:#BFE3A8;font-weight:600}
.vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:#6BD25A;animation:latidoVerde 1.8s ease-out infinite}
@keyframes latidoVerde{0%{box-shadow:0 0 0 0 rgba(107,210,90,.7)}80%{box-shadow:0 0 0 8px rgba(107,210,90,0)}100%{box-shadow:0 0 0 0 rgba(107,210,90,0)}}
.tab-cuerpo{padding:14px 16px 16px;display:grid;gap:12px;background:#F7F9F5}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
@media(max-width:620px){.kpis.k4{grid-template-columns:repeat(2,1fr)}}
.kpi{background:linear-gradient(180deg,#fff,#FBFCFA);border-radius:12px;padding:11px 13px;
  box-shadow:0 1px 2px rgba(22,41,74,.05),0 8px 18px -10px rgba(22,41,74,.16)}
.kpi .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.kpi .v{display:block;font-size:1.6rem;font-weight:700;color:var(--ink);line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .d{display:block;font-size:.72rem;margin-top:4px;font-weight:600}
.d-ok{color:var(--ok)}.d-warn{color:var(--warn)}.d-bad{color:var(--bad)}
.pane{background:#fff;border-radius:12px;padding:13px 14px;
  box-shadow:0 1px 2px rgba(22,41,74,.05),0 8px 18px -10px rgba(22,41,74,.14)}
.pane h4{margin:0 0 10px;font-size:.78rem;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:8px}
.pane h4 span{font-weight:500;color:var(--muted)}
/* barras verticales */
.barras{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:6px}
.barras .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.barras .col{width:100%;border-radius:7px 7px 3px 3px;position:relative;transform-origin:bottom;
  transition:height .9s cubic-bezier(.2,.7,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.barras .col::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 45%,rgba(0,0,0,.06))}
.barras .col.f{background:linear-gradient(180deg,#5FA83A,#3F7F22)}
.barras .col.c{background:linear-gradient(180deg,#C6E3B2,#A6D18A)}
.barras .lbl{font-size:.64rem;color:var(--muted);white-space:nowrap}
.hero .barras{height:88px}
/* entrada de las barras */
.anima .col{animation:creceBarra 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes creceBarra{from{transform:scaleY(0)}}
/* dona */
@property --s1{syntax:'<percentage>';inherits:false;initial-value:46%}
@property --s2{syntax:'<percentage>';inherits:false;initial-value:71%}
@property --s3{syntax:'<percentage>';inherits:false;initial-value:87%}
.dona-fila{display:flex;align-items:center;gap:16px}
.dona{width:118px;height:118px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;position:relative;
  background:conic-gradient(#3F8A22 0 var(--s1),#2E75B6 var(--s1) var(--s2),#E8A33D var(--s2) var(--s3),#D9DEE6 var(--s3) 100%);
  transition:--s1 .9s ease,--s2 .9s ease,--s3 .9s ease;
  box-shadow:0 12px 26px -12px rgba(22,41,74,.45),inset 0 3px 6px rgba(255,255,255,.5),inset 0 -4px 9px rgba(22,41,74,.25)}
.dona-in{width:78px;height:78px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(22,41,74,.25),inset 0 1px 0 #fff}
.dona-in b{font-size:1.25rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.leyenda{display:grid;gap:6px;font-size:.74rem;color:var(--text)}
.leyenda span{display:flex;align-items:center;gap:7px}
.leyenda i{width:9px;height:9px;border-radius:3px;display:block;flex:0 0 auto}
/* tabla de estatus */
.tabla{width:100%;border-collapse:collapse;font-size:.76rem}
.tabla th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 8px 7px 0;border-bottom:1px solid var(--line)}
.tabla td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}
.tabla tr:last-child td{border-bottom:0}
.st{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.66rem;font-weight:700;white-space:nowrap}
.st-ok{background:var(--ok-bg);color:var(--ok)}.st-warn{background:var(--warn-bg);color:var(--warn)}.st-bad{background:var(--bad-bg);color:var(--bad)}
.rv-in .st-bad,.hero .st-bad{animation:tarde 2.6s ease-in-out infinite}
@keyframes tarde{0%,100%{box-shadow:0 0 0 0 rgba(196,67,59,.3)}50%{box-shadow:0 0 0 6px rgba(196,67,59,0)}}
/* alertas que llegan */
.alertas{display:grid;gap:0}
.alerta{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:.76rem;line-height:1.45}
.alerta:first-child{border-top:0;padding-top:0}
.alerta i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.alerta.nueva{animation:llega .6s cubic-bezier(.2,.7,.2,1)}
@keyframes llega{from{opacity:0;transform:translateY(-10px)}}
/* chat con Sofi */
.chat{background:#fff;border-radius:12px;padding:11px 12px;display:grid;gap:9px;
  box-shadow:0 1px 2px rgba(22,41,74,.05),0 8px 18px -10px rgba(22,41,74,.14)}
.burbuja-yo{justify-self:end;background:var(--navy);color:#fff;border-radius:14px 14px 4px 14px;
  padding:8px 12px;font-size:.76rem;max-width:88%;min-height:1.6em}
.burbuja-sofi{display:flex;gap:9px;align-items:flex-start;font-size:.76rem;opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease}
.burbuja-sofi.lista{opacity:1;transform:none}
.burbuja-sofi img{width:26px;height:26px;flex:0 0 auto}
.burbuja-sofi div{background:var(--wash);border-radius:4px 14px 14px 14px;padding:8px 12px}
.burbuja-sofi b{color:var(--green)}
.cursor{display:inline-block;width:1px;height:1em;background:#fff;margin-left:2px;vertical-align:-2px;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.escribiendo{display:inline-flex;gap:3px}.escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--green);display:block;animation:pun 1.1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes pun{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.panel-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
@media(max-width:760px){.panel-grid{grid-template-columns:1fr}}
.nota-pie{font-size:.78rem;text-align:center;margin:16px 0 0;color:var(--muted)}
.pregunta-sofi{display:flex;align-items:center;gap:10px;background:var(--wash);border-radius:12px;padding:11px 14px;font-size:.8rem;color:var(--ink)}
.pregunta-sofi img{width:26px;height:26px}

/* franja de beneficios bajo el hero */
.franja{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:22px 24px;font-size:.88rem;color:var(--muted)}
.franja b{color:var(--ink);font-weight:600}
.franja span{display:inline-flex;align-items:center;gap:9px}
.franja span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-soft)}

/* rejillas y tarjetas: blancas, sin borde, con sombra */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border-radius:var(--r);padding:28px;box-shadow:var(--sombra);position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.card h3{margin:14px 0 8px}
.card p{font-size:.95rem;margin:0}
.ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;
  background:var(--lumbre);box-shadow:var(--lumbre-glow);position:relative;overflow:hidden}
.ico::after{content:"";position:absolute;inset:0 0 50%;background:rgba(255,255,255,.18)}
.ico.i-azul{background:linear-gradient(150deg,#4B98D8,#1F5A93);box-shadow:0 14px 28px -12px rgba(46,117,182,.8)}
.ico.i-ambar{background:linear-gradient(150deg,#F4BE5E,#C27F16);box-shadow:0 14px 28px -12px rgba(232,163,61,.8)}
.ico.i-navy{background:linear-gradient(150deg,#3A5A92,#16294A);box-shadow:0 14px 28px -12px rgba(31,56,100,.8)}
/* los problemas: tarjeta con el rojo como alarma */
.problema{border-top:4px solid var(--red)}
.problema h3{color:var(--red);margin-top:0}

/* panel oscuro de cumplimiento: navy con su luz */
.panel{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 0,#2B4C82 0,#16294A 62%);
  color:#E9EEF6;border-radius:30px;padding:clamp(34px,5vw,64px);box-shadow:0 40px 90px -40px rgba(22,41,74,.6)}
.panel::before{content:"";position:absolute;z-index:-1;width:620px;height:620px;left:-160px;top:-260px;border-radius:50%;
  pointer-events:none;filter:blur(70px);background:radial-gradient(circle,rgba(107,184,69,.35),transparent 65%);
  animation:lumbrePanel 15s ease-in-out infinite alternate}
.panel::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-180px;bottom:-240px;border-radius:50%;
  pointer-events:none;filter:blur(70px);background:radial-gradient(circle,rgba(46,117,182,.35),transparent 65%);
  animation:lumbrePanel 19s ease-in-out infinite alternate-reverse}
@keyframes lumbrePanel{to{transform:translate(58%,42%) scale(1.18)}}
.panel h2{color:#fff}
.panel .eyebrow{color:#9FD67E}
.panel-rejilla{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.panel-rejilla{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;color:#C9D5E6;font-size:.98rem}
.checks li::before{content:"✓";flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--lumbre);color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 6px 14px -6px rgba(76,140,43,.9)}
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cifra{background:rgba(255,255,255,.06);border-radius:18px;padding:22px 16px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .3s,transform .3s}
.cifra:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.cifra b{display:block;font-size:2.4rem;font-weight:700;color:#9FD67E;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cifra span{display:block;font-size:.8rem;color:#A9B8CD;margin-top:8px;line-height:1.4}

/* Sofi */
.sofi-caja{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:flex-start;
  background:#fff;border-radius:var(--r);padding:clamp(24px,3.4vw,40px);box-shadow:var(--sombra-alta);position:relative;overflow:hidden}
.sofi-caja::before{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,117,182,.14),transparent 70%);pointer-events:none}
@media(max-width:640px){.sofi-caja{grid-template-columns:1fr}}
/* Sofi al lado del párrafo, de su mismo alto (Mario, 2026-10-09, 4105:
   «ponla alineada con el parrafo»). El div del texto se abre (contents) para
   que la etiqueta, el título, el párrafo y las preguntas sean filas de la
   caja, y Sofi va en la fila del párrafo. En el grid los márgenes no se juntan:
   el del párrafo se quita para que las preguntas queden a 18 px, como antes.
   En el celular sigue arriba, con la gata (no el aire de su imagen) en el
   borde del párrafo: 54 de 460 a 84 px son 10. */
@media(min-width:641px){
  .sofi-caja{row-gap:0}
  .sofi-caja>div{display:contents}
  .sofi-caja>div>*{grid-column:2}
  .sofi-caja .chip-ai{justify-self:start}
  .sofi-caja>div>p{margin-bottom:0}
  .sofi-caja>.sofi-lg{grid-column:1;grid-row:3;align-self:start;width:112px;height:112px}
}
@media(max-width:640px){.sofi-caja>.sofi-lg{margin-left:-10px}}
.sofi-caja .gata{width:84px;height:84px;animation:flota 4.5s ease-in-out infinite alternate}
@keyframes flota{to{transform:translateY(-8px) rotate(-3deg)}}
.chip-ai{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--blue);background:#E7F0FA;border-radius:999px;padding:5px 12px;margin-bottom:12px}
.preguntas{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.preguntas span{background:var(--surface-2);border-radius:999px;padding:8px 14px;font-size:.84rem;color:var(--ink);
  font-style:italic;transition:background .2s,transform .2s;cursor:default}
.preguntas span:hover{background:var(--wash);transform:translateY(-2px)}
.sofi-mini{display:flex;gap:18px;align-items:center;background:#fff;border-radius:20px;padding:20px 24px;margin-top:22px;box-shadow:var(--sombra)}
.sofi-mini img{width:56px;height:56px;flex:0 0 auto;animation:flota 4.5s ease-in-out infinite alternate}
.sofi-mini h3{margin:0 0 4px}
.sofi-mini p{font-size:.92rem;margin:0}

/* pasos */
.paso{background:#fff;border-radius:22px;padding:24px;box-shadow:var(--sombra);position:relative;transition:transform .28s,box-shadow .3s}
.paso:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.paso .n{width:40px;height:40px;border-radius:13px;background:var(--lumbre);color:#fff;display:grid;place-items:center;
  font-weight:700;font-family:"IBM Plex Mono",monospace;box-shadow:var(--lumbre-glow);margin-bottom:14px}
.paso h3{margin-bottom:6px}
.paso p{font-size:.9rem;margin:0}
/* la línea que une los pasos, con luz que corre */
.pasos{position:relative}
.pasos::before{content:"";position:absolute;left:4%;right:4%;top:44px;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(76,140,43,.35),transparent);pointer-events:none}
.pasos>*{position:relative;z-index:1}
@media(max-width:980px){.pasos::before{display:none}}

/* cierre */
.cierre{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(120% 130% at 15% 0,#5DAA37 0,#2F6E1C 70%);
  color:#fff;border-radius:30px;padding:clamp(34px,5vw,60px);box-shadow:0 40px 90px -40px rgba(47,110,28,.6)}
.cierre::before{content:"";position:absolute;z-index:-1;width:600px;height:600px;right:-200px;top:-240px;border-radius:50%;
  filter:blur(70px);background:radial-gradient(circle,rgba(232,163,61,.35),transparent 65%);animation:lumbrePanel 17s ease-in-out infinite alternate}
.cierre-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center}
@media(max-width:860px){.cierre-grid{grid-template-columns:1fr}}
.cierre h2{color:#fff}
.cierre p{color:#E3F2D9}
.contacto{background:rgba(255,255,255,.12);border-radius:20px;padding:24px;display:grid;gap:12px;
  backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.contacto a{color:#fff;font-weight:700;text-decoration:none;display:flex;gap:10px;align-items:center}
.contacto a:hover{text-decoration:underline}
.contacto small{color:#D6EBC8;font-size:.86rem;line-height:1.5}

footer{padding:40px 0 54px;color:var(--muted);font-size:.86rem;background:linear-gradient(180deg,transparent,#EEF4E9)}
footer .pie{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
a:focus-visible{outline:3px solid var(--green);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .acento,.aviso::after,.btn-aro::after,.hero::before,.pill::before,.vivo::before,.panel::before,.panel::after,
  .cierre::before,.sofi-caja .gata,.sofi-mini img,.cursor,.escribiendo i,.rv-in .st-bad,.hero .st-bad,
  .hero .pill,.hero h1,.hero .lead,.hero .btns,.hero .marco,.anima .col{animation:none}
  .btn:hover,.card:hover,.paso:hover,.cifra:hover{transform:none}
}

/* ═══ celular: nada se sale del ancho ═══
   Medido en 375px: el botón del nav empujaba la página a 503px, y dentro de
   los tableros las columnas del grid no bajaban de su contenido (min-width
   automático) y se salían 2px. */
.hero-grid>*,.tab-cuerpo>*,.panel-grid>*,.kpis>*,.dona-fila>*,.cierre-grid>*,.panel-rejilla>*{min-width:0}
.pane{overflow-x:auto}
@media(max-width:640px){
  .aviso{font-size:.74rem;padding:8px 12px}
  nav .wrap{padding:0 7px 0 16px;height:58px}
  .marca .chip-26{display:none}
  nav .btn{padding:9px 14px;font-size:.82rem}
  nav .btn .largo{display:none}
  .marco{padding:6px;border-radius:20px}
  .tab-cuerpo{padding:10px;gap:10px}
  .tab-top{font-size:.74rem;padding:10px 12px}
  .kpi{padding:9px 10px}
  .kpi .v{font-size:1.2rem}
  .kpi .k{font-size:.54rem;letter-spacing:.08em}
  .kpis.k4{grid-template-columns:repeat(2,1fr)}
  .dona-fila{flex-direction:column;align-items:flex-start}
  .franja{justify-content:flex-start;padding:20px 24px}
  .pill{font-size:.76rem;padding:8px 14px}
}

/* ═══ el logo: el carrito del logo de siempre + el wordmark nuevo ═══
   Mario: "los colores y letra me gustan, pero intégrale el carrito del logo
   actual". El carrito se extrajo por color del foodtracking-logo.png original,
   así que es EL carrito, no uno parecido. */
.marca .carrito{width:40px;height:40px;flex:0 0 auto;display:block;
  filter:drop-shadow(0 4px 8px rgba(76,140,43,.22));transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a.marca:hover .carrito{transform:translateX(3px) rotate(-4deg)}
footer .marca .carrito{width:34px;height:34px}
@media(max-width:640px){.marca .carrito{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){a.marca:hover .carrito{transform:none}}

/* ═══ Sofi saluda: "¡Hola!" y la mano que se mueve al pasarle el cursor ═══
   Desde el 2026-10-08 es la Sofi de dos patas (decisiones/0253), en dos capas
   cuadradas del mismo tamaño, como la caja: sofi-cuerpo.png (Sofi sin la mano
   que saluda) y sofi-mano.png (la mano sola, con la muñeca que se desvanece).
   La mano gira desde la muñeca, como en Facility Inspector; el pivote lo
   imprime docs/diseno/sofi/sitios.py. Hasta ese día la mano era un brazo
   dibujado que giraba desde el hombro (la Sofi plana), y con la de 3D
   (decisiones/0098) iba vacía. */
.sofi{position:relative;display:inline-block;flex:0 0 auto;cursor:default}
.sofi-sm{width:26px;height:26px}
.sofi-md{width:56px;height:56px;animation:flota 4.5s ease-in-out infinite alternate}
.sofi-lg{width:84px;height:84px;animation:flota 4.5s ease-in-out infinite alternate}
.sofi .sofi-cuerpo,.sofi .sofi-mano{position:absolute;inset:0;width:100%;height:100%;animation:none;margin:0}
.sofi .sofi-mano{transform-origin:78.6% 37.3%}
@keyframes saluda{0%,100%{transform:rotate(0)}18%{transform:rotate(-11deg)}38%{transform:rotate(9deg)}
  58%{transform:rotate(-11deg)}78%{transform:rotate(9deg)}}
.sofi:hover .sofi-mano,.sofi.saludando .sofi-mano{animation:saluda 1.2s ease-in-out}
/* el globito del "¡Hola!" */
.sofi-hola{position:absolute;left:62%;bottom:86%;z-index:5;white-space:nowrap;pointer-events:none;
  background:#fff;color:var(--navy);font-weight:700;font-size:.82rem;line-height:1.2;
  padding:5px 11px;border-radius:12px 12px 12px 3px;box-shadow:0 8px 20px -8px rgba(22,41,74,.5);
  opacity:0;transform:translateY(6px) scale(.6);transform-origin:bottom left;
  transition:opacity .22s ease,transform .38s cubic-bezier(.3,1.6,.5,1)}
.sofi:hover .sofi-hola,.sofi.saludando .sofi-hola{opacity:1;transform:none}
.sofi-sm .sofi-hola{font-size:.64rem;padding:3px 8px;left:70%}
.sofi-lg .sofi-hola{font-size:.95rem;padding:6px 13px}
@media(prefers-reduced-motion:reduce){
  .sofi-md,.sofi-lg,.sofi:hover .sofi-mano,.sofi.saludando .sofi-mano{animation:none}
  .sofi-hola{transition:opacity .2s ease;transform:none}
}

/* ═══ Requisiciones y conduces ═══
   El valor: el centro ya sabe lo que viene y marca lo que llegó y lo que
   no. Hoy alguien lleva la orden de compra o la requisición al centro, o se
   recibe a ciegas. */
#requisiciones{background:
  radial-gradient(46rem 24rem at 92% 30%,rgba(76,140,43,.10),transparent 62%),
  radial-gradient(40rem 22rem at 4% 90%,rgba(232,163,61,.08),transparent 62%)}
.rq-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;margin-top:40px}
@media(max-width:960px){.rq-grid{grid-template-columns:1fr;gap:36px}}
.rq-grid>*,.rq-txt>*{min-width:0}
.rq-etiqueta{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--bad-bg);color:var(--bad);margin-bottom:12px}
.rq-etiqueta.rq-con{background:var(--wash);color:var(--green);margin-top:28px}
.rq-antes{display:grid;gap:10px}
.rq-prob{background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--sombra);border-left:3px solid var(--red)}
.rq-prob h3{font-size:1rem;margin:0 0 3px}
.rq-prob p{font-size:.9rem;margin:0}
.rq-pasos{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:rq}
.rq-pasos li{display:grid;grid-template-columns:38px 1fr;column-gap:14px;counter-increment:rq}
.rq-pasos li::before{content:counter(rq);grid-row:span 2;width:38px;height:38px;border-radius:12px;background:var(--lumbre);
  color:#fff;display:grid;place-items:center;font-weight:700;font-family:"IBM Plex Mono",monospace;box-shadow:var(--lumbre-glow)}
.rq-pasos b{color:var(--ink);font-weight:600;font-size:1rem}
.rq-pasos span{font-size:.92rem}
/* el conduce vivo */
.llega{margin-left:auto;background:rgba(232,163,61,.22);color:#FFD08A;border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:700;white-space:nowrap}
.cd-cab,.cd-fila{display:grid;grid-template-columns:minmax(0,1fr) auto 104px;gap:10px;align-items:center}
.cd-cab{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 12px}
.cd-cab span:last-child{text-align:center}
.cd-lista{display:grid;gap:7px}
.cd-fila{background:#fff;border-radius:11px;padding:10px 12px;font-size:.84rem;cursor:pointer;user-select:none;
  box-shadow:0 1px 2px rgba(22,41,74,.05),0 6px 14px -10px rgba(22,41,74,.2);transition:background .35s,box-shadow .3s,transform .15s}
.cd-fila:hover{box-shadow:0 1px 2px rgba(22,41,74,.06),0 10px 22px -10px rgba(22,41,74,.3)}
.cd-fila:active{transform:scale(.985)}
.cd-fila:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.cd-art{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-cant{color:var(--muted);font-size:.78rem;white-space:nowrap}
.cd-marca{justify-self:center;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;
  border-radius:999px;padding:4px 10px 4px 5px;white-space:nowrap;transition:background .3s,color .3s}
.cd-marca::before{content:"";width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;line-height:1;box-sizing:border-box}
.cd-fila.pend .cd-marca{background:var(--surface-2);color:var(--muted)}
.cd-fila.pend .cd-marca::before{border:1.5px dashed #AEB8C6}
.cd-fila.pend .cd-marca::after{content:"Por cotejar"}
.cd-fila.ok{background:linear-gradient(90deg,#F1F9EC,#fff 62%)}
.cd-fila.ok .cd-marca{background:var(--ok-bg);color:var(--ok)}
.cd-fila.ok .cd-marca::before{content:"✓";background:var(--ok);color:#fff}
.cd-fila.ok .cd-marca::after{content:"Llegó"}
.cd-fila.no{background:linear-gradient(90deg,#FDEFEC,#fff 62%)}
.cd-fila.no .cd-marca{background:var(--bad-bg);color:var(--bad)}
.cd-fila.no .cd-marca::before{content:"✕";background:var(--bad);color:#fff}
.cd-fila.no .cd-marca::after{content:"No llegó"}
.cd-fila.marcando .cd-marca{animation:popMarca .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes popMarca{from{transform:scale(.55)}}
.cd-pie{display:flex;align-items:center;gap:12px}
.cd-barra{flex:1;height:8px;border-radius:99px;background:#E4EADF;overflow:hidden;box-shadow:inset 0 1px 2px rgba(22,41,74,.12)}
.cd-barra i{display:block;height:100%;border-radius:99px;background:var(--lumbre);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cd-cuenta{font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cd-resumen{font-size:.8rem;font-weight:600;border-radius:10px;padding:9px 12px;min-height:2.4em;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.cd-resumen.visible{opacity:1;transform:none}
.cd-resumen.hay-faltante{background:var(--bad-bg);color:var(--bad)}
.cd-resumen.completo{background:var(--ok-bg);color:var(--ok)}
@media(max-width:640px){
  .cd-cab,.cd-fila{grid-template-columns:minmax(0,1fr) auto 34px;gap:8px}
  .cd-cab span:last-child{font-size:0}
  .cd-fila{padding:9px 10px;font-size:.8rem}
  .cd-marca{padding:4px}
  .cd-marca::after{display:none}
}
@media(prefers-reduced-motion:reduce){.cd-fila.marcando .cd-marca{animation:none}.cd-barra i,.cd-resumen,.cd-fila{transition:none}}
/* lo que llegó, entra al inventario: aparece un momento después del resumen */
.cd-inv{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;color:var(--green);background:var(--wash);
  border-radius:10px;padding:8px 12px;opacity:0;transform:translateY(6px);transition:opacity .4s ease .3s,transform .4s ease .3s}
.cd-inv::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.cd-inv.visible{opacity:1;transform:none}
.cd-inv.visible::before{animation:latido 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.cd-inv{transition:none}.cd-inv.visible::before{animation:none}}

/* ═══ Requisiciones más precisas: menús − almacén = lo que hace falta ═══ */
.cl-caja{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;margin-top:34px;
  background:#fff;border-radius:26px;padding:clamp(24px,3.4vw,40px);box-shadow:var(--sombra-alta);position:relative;overflow:hidden}
.cl-caja::before{content:"";position:absolute;width:460px;height:460px;left:-180px;bottom:-240px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,140,43,.14),transparent 70%);pointer-events:none}
@media(max-width:960px){.cl-caja{grid-template-columns:1fr;gap:26px}}
.cl-caja>*{min-width:0;position:relative}
.cl-tag{margin-top:0!important}
.cl-caja h3{font-size:1.45rem;font-weight:600;margin:2px 0 10px;letter-spacing:-.025em}
.cl-caja p{margin:0;font-size:.98rem}
.cl-formula{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:.82rem;font-weight:600}
.cl-formula span{background:var(--surface-2);border-radius:999px;padding:6px 13px;color:var(--ink)}
.cl-formula i{font-style:normal;color:var(--muted);font-weight:700;font-size:1rem}
.cl-formula .cl-igual{background:var(--lumbre);color:#fff;box-shadow:var(--lumbre-glow)}
.cl-tab{background:#F7F9F5;border-radius:18px;padding:14px;display:grid;gap:8px}
.cl-top{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;font-weight:700;color:var(--ink);padding:0 4px 2px}
.cl-top span{font-weight:500;color:var(--muted)}
.cl-cab,.cl-fila{display:grid;grid-template-columns:minmax(0,1.3fr) .8fr .8fr 112px;gap:10px;align-items:center}
.cl-cab{font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 12px}
.cl-cab span:last-child{text-align:center}
.cl-fila{background:#fff;border-radius:11px;padding:10px 12px;font-size:.84rem;
  box-shadow:0 1px 2px rgba(22,41,74,.05),0 6px 14px -10px rgba(22,41,74,.2)}
.cl-art{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-num{color:var(--muted);white-space:nowrap;font-size:.8rem}
.cl-num b{color:var(--ink);font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.cl-res{justify-self:center;border-radius:999px;padding:4px 11px;font-size:.72rem;font-weight:700;white-space:nowrap;
  opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .4s cubic-bezier(.3,1.6,.5,1)}
.cl-fila.lista .cl-res{opacity:1;transform:none}
.cl-res.pedir{background:var(--warn-bg);color:var(--warn)}
.cl-res.cubierto{background:var(--ok-bg);color:var(--ok)}
.cl-pie{font-size:.8rem;font-weight:600;color:var(--green);background:var(--wash);border-radius:10px;padding:9px 12px;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.cl-pie.visible{opacity:1;transform:none}
@media(max-width:640px){
  .cl-cab{display:none}
  .cl-fila{grid-template-columns:1fr 1fr auto;row-gap:6px}
  .cl-art{grid-column:1/-1}
  .cl-num::before{content:attr(data-l);display:block;font-family:"IBM Plex Mono",monospace;font-size:.52rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.3}
  .cl-top{flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){.cl-res,.cl-pie{transition:none}}

/* ═══ nav: "Requisiciones" se marca como nuevo ═══ */
nav .links a.link-nuevo{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.nav-nuevo{font-family:"IBM Plex Mono",monospace;font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--lumbre);border-radius:999px;padding:3px 7px;line-height:1.2;position:relative;overflow:hidden;
  animation:latido 2.2s ease-out infinite}
.nav-nuevo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;
  animation:barrido 3.2s ease-in-out infinite}
@media(max-width:1100px){nav .links{gap:16px;font-size:.86rem}}
@media(prefers-reduced-motion:reduce){.nav-nuevo,.nav-nuevo::after{animation:none}}

/* ═══ nav en pantallas medianas ═══
   Medido a 1000px: con la etiqueta "Nuevo" de Requisiciones, los enlaces y el
   botón no cabían y el botón se salía 31px. Se le quita "Solicitar" y, más
   abajo, la etiqueta de FINALES 2026. */
@media(max-width:1180px){nav .btn .largo{display:none}}
@media(max-width:1100px){.marca .chip-26{display:none}}

/* la línea del inventario: el retraso solo al aparecer; al reiniciar el ciclo
   se esconde de inmediato (antes quedaba visible un instante de más) */
.cd-inv{transition:opacity .25s ease,transform .25s ease}
.cd-inv.visible{transition:opacity .4s ease .3s,transform .4s ease .3s}
@media(prefers-reduced-motion:reduce){.cd-inv,.cd-inv.visible{transition:none}}

/* ═══ celular: que se vea de primera, no apretado ═══
   Mario, 2026-09-11: "en el cel se ve barata la página". Mirado en 375px:
   el botón del nav decía solo "demostración", en minúscula; los tableros
   partían sus títulos en dos líneas y bajaban la letra a 8px; la tabla de
   estatus se salía por el lado; las tarjetas eran torres de 270px, seis
   seguidas; los botones del hero quedaban de anchos distintos; la aurora se
   volvía gris sobre el texto; y el contacto usaba emojis. Todo lo de abajo
   es solo para pantallas chicas: la versión de computadora no cambia. */
.nav-cta .corto{display:none}
@media(max-width:1180px){nav .nav-cta .corto{display:inline}}
.aviso .av-c{display:none}
.contacto a svg{width:18px;height:18px;flex:0 0 auto;opacity:.9}
@keyframes latidoBlanco{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}80%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(max-width:640px){
  section{padding:58px 0}
  h2{font-size:1.9rem}
  .grid{gap:14px}
  /* aviso: una sola línea */
  .aviso .av-l{display:none}
  .aviso .av-c{display:inline-flex;align-items:center;gap:9px}
  .aviso .av-c::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:latidoBlanco 2.2s ease-out infinite}
  /* hero: aurora más pequeña para que no se ensucie de gris; botones parejos */
  .hero{padding:30px 0 44px}
  .hero::before{inset:-60px -20% 0;background:
    linear-gradient(180deg,rgba(76,140,43,.14),transparent 40%),
    radial-gradient(320px 300px at 8% 16%,rgba(107,184,69,.5),transparent 70%),
    radial-gradient(300px 260px at 96% 6%,rgba(46,117,182,.24),transparent 70%),
    radial-gradient(440px 260px at 50% 100%,rgba(76,140,43,.24),transparent 72%)}
  .hero h1{font-size:2.35rem;margin:16px 0}
  .hero .lead{font-size:1rem;line-height:1.6}
  .hero .btns{margin-top:24px;gap:10px}
  .hero .btns .btn{flex:1 1 100%;justify-content:center}
  /* tableros: títulos en una línea, letra legible, nada se sale */
  .hero .marco{margin:0 -6px}
  .tab-top{white-space:nowrap}
  .tab-top .dots,.tab-top .tt-extra{display:none}
  .kpis{gap:8px}
  .kpi .k{font-size:.58rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kpi .d{font-size:.66rem;white-space:nowrap}
  .kpis.k4 .kpi .k,.kpis.k4 .kpi .d{white-space:normal}
  .pane h4 span{display:none}
  .barras .lbl-c{display:none}
  .tabla{font-size:.74rem}
  .tabla th:nth-child(3),.tabla td:nth-child(3){display:none}
  .sofi-mini{flex-direction:column;align-items:flex-start;gap:12px;padding:22px}
  /* tarjetas: el icono al lado del título, no encima */
  .card{padding:20px 20px 22px;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-items:start}
  .card .ico{grid-row:span 2;width:46px;height:46px;border-radius:14px}
  .card .ico svg{width:22px;height:22px}
  .card h3{margin:1px 0 5px;font-size:1.05rem}
  .card p{font-size:.9rem;line-height:1.55}
  /* los problemas: la misma raya roja de lado que "Hoy" en requisiciones */
  .card.problema{display:block;border-top:0;border-left:3px solid var(--red);border-radius:18px;padding:18px 20px}
  .card.problema h3{margin:0 0 4px}
  .paso{padding:18px 20px;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px}
  .paso .n{grid-row:span 2;width:38px;height:38px;margin:0;border-radius:12px}
  .paso h3{margin:6px 0 4px}
  /* cálculo: la fórmula como ecuación de arriba abajo */
  .cl-caja{padding:24px 20px;border-radius:22px}
  .cl-caja h3{font-size:1.3rem}
  .cl-formula{display:grid;grid-template-columns:14px auto;justify-content:start;align-items:center;gap:6px 8px}
  .cl-formula span{justify-self:start}
  .cl-formula span:first-child{grid-column:2}
  .cl-formula i{text-align:center;line-height:1}
  .cl-tab{padding:10px}
  /* cumplimiento: cifras en filas, no en cajitas estrechas */
  .panel{padding:30px 22px;border-radius:24px}
  .panel h2{font-size:1.75rem}
  .checks li{font-size:.92rem}
  .cifras{grid-template-columns:1fr;gap:10px}
  .cifra{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:14px;text-align:left;padding:14px 18px}
  .cifra b{font-size:2rem}
  .cifra span{margin-top:0}
  .sofi-caja{padding:24px 22px;gap:14px}
  .chip-ai{letter-spacing:.06em;font-size:.6rem}
  .cierre{padding:30px 22px;border-radius:24px}
  .contacto{padding:18px}
}
@media(prefers-reduced-motion:reduce){.aviso .av-c::before{animation:none}}
/* los celulares más estrechos (320px): el botón "Pedir demo" se salía 13px */
@media(max-width:360px){
  nav .wrap{margin:0 10px;padding:0 6px 0 12px;gap:8px}
  .marca{gap:7px}
  .marca .carrito{width:28px;height:28px}
  .marca .mw{font-size:1.02rem}
  nav .btn{padding:8px 12px;font-size:.78rem}
  .aviso{font-size:.7rem}
}