/* ============================================================
   Santo Tomás · capa de marca y piezas SVG animadas
   verde #2A4038 · terracota #DD7B58 · crema #FDDFB9 / #EBD9B2 · lima #C2C983 · Lilita One
   ============================================================ */
:root{
  --fondo:#F6EFDF;--fondo-2:#EDE3CC;--papel:#FFFDF8;
  --disp:"Lilita One","Inter",sans-serif;
  --terra:#DD7B58;--terra-osc:#A4492A;--crema:#FDDFB9;--crema-2:#EBD9B2;--lima:#C2C983;--lima-osc:#6E7A2E;
  --amarillo:#DD7B58;--naranja:#8DA33A;--verde:#3F7D4E;--ambar:#C8862A;--azul:#3E8FD0;
}
body{background:var(--fondo)}
/* Lilita One tiene un solo peso: nada de negrita sintética */
.gate__t,.pin__cajas input,.hub-cab h2,.mod h3,.mod__kpis b,.kpi__val,.nivel b,.hallazgo .num,.anillo b,.sec h2,.hito b,.paso b,.hoy__k b,.pista b,.fase__cab .n,.fase__cab h3,.tour-card h4,.tour-invita h3,.boot__k b,.mapa-py .reg,.simx__big,.pblo b,.st-h,.mtz__sab b,.lote-paso b,.prm b{font-weight:400!important;letter-spacing:.2px}
.hallazgo h4{font-family:var(--disp);font-weight:400;font-size:18px;line-height:1.2;color:var(--rojo)}
.paso b,.hito b{text-transform:none}

/* ---------- gate ---------- */
.gate{background:#17241F}
.gate__bg i{background:linear-gradient(90deg,transparent,var(--terra) 40%,var(--lima) 60%,transparent);opacity:.09}
.gate__bg i:nth-child(2){background:linear-gradient(90deg,transparent,var(--crema) 45%,var(--terra) 60%,transparent)}
.gate__logo{width:min(400px,82vw);filter:drop-shadow(0 14px 40px rgba(221,123,88,.25))}
.gate__t{color:var(--crema);text-transform:none;font-size:32px}
.gate__s{color:#B9B39F}
.pin__cajas input{border-color:#3A5249;background:#1B2A24;color:var(--crema)}
.pin__cajas input:focus{border-color:var(--terra);box-shadow:0 0 0 4px rgba(221,123,88,.2)}
.pin__btn{background:var(--terra);color:#17241F;box-shadow:0 8px 24px rgba(221,123,88,.3)}
.pin__err{color:#F2A98C}
.gate__pie{color:#8E8A7A}
.gate__santo{position:absolute;right:-60px;bottom:-40px;width:340px;opacity:.13;pointer-events:none}
@media(max-width:820px){.gate__santo{display:none}}

/* trazos: el logo oficial se dibuja y después se rellena */
.wm-svg svg{width:100%;height:auto;display:block}
.trazo .wm-path{fill-opacity:0;stroke:var(--crema);stroke-width:.7;stroke-dasharray:1 1;stroke-dashoffset:1;animation:trazar 1.2s cubic-bezier(.6,0,.3,1) forwards,rellenar .6s ease 1.05s forwards}
.trazo--lento .wm-path{animation-duration:1.8s,.7s;animation-delay:0s,1.6s;stroke:#EBD9B2;stroke-width:.9}
.trazo .wm-path:nth-child(3n){animation-delay:.08s,1.12s}.trazo .wm-path:nth-child(3n+1){animation-delay:.16s,1.18s}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes rellenar{to{fill-opacity:1;stroke-width:0}}
.wipe{background:#2A4038}
.wipe__emb{width:200px}.wipe__emb .wm-svg{width:200px}
.wipe.in .wm-path{fill-opacity:0;stroke:var(--crema);stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation:trazar .5s ease .1s forwards,rellenar .3s ease .45s forwards}

/* ---------- sidebar / top ---------- */
.side{background:#17241F}
.marca__emb{width:46px;flex:0 0 46px}.marca__emb .wm-svg{width:46px}
.marca__txt strong{font-family:var(--disp);font-weight:400;font-size:18px;color:var(--crema)}
.nav__it.on{background:rgba(221,123,88,.16);color:var(--crema)}
.nav__it.on svg{color:var(--terra)}
.chip--rojo{background:var(--terra);color:#17241F}
.chip--amarillo{background:var(--lima);color:#2A4038}
.btn--rojo{background:var(--rojo);color:var(--crema)}
.card--negro{background:#2A4038;color:#F3EAD6;border-color:#2A4038}
.card--negro .card__cab p,.card--negro p{color:#D8D0BC}
.card--rojo{background:#FBEADF;border-color:#EFC9B4}
.mod--dark{background:#2A4038;border-color:#2A4038}
.mod--dark h3{color:var(--crema)}
.mod--dark p{color:#D8D0BC}
.mod--dark .mod__kpis b{color:var(--terra)}
.hub-cab h2 span{color:var(--terra-osc)}
.hoy__k b{color:var(--rojo)}

/* ---------- héroe del hub: el santo y el mate con vapor ---------- */
.st-hero{display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:center;background:#2A4038;color:#F3EAD6;border-radius:var(--r-l);padding:22px 26px;margin-bottom:18px;position:relative;overflow:hidden}
.st-hero h2{margin:0;font-family:var(--disp);font-weight:400;font-size:34px;line-height:1.05;color:var(--crema)}
.st-hero h2 span{color:var(--terra)}
.st-hero p{margin:8px 0 0;color:#D8D0BC;font-size:13.5px;line-height:1.6;max-width:760px}
.st-hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.st-hero .ilu{width:210px;justify-self:end}
.st-hero .hoja-fondo{position:absolute;width:140px;opacity:.12;pointer-events:none}
@media(max-width:820px){.st-hero{grid-template-columns:1fr;padding:18px}.st-hero .ilu{width:150px;justify-self:center}.st-hero h2{font-size:27px}}

/* vapor del mate / humo del barbacuá */
.vapor path,.humo circle{animation:subeVapor 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.vapor path:nth-child(2){animation-delay:1s}.vapor path:nth-child(3){animation-delay:2s}
.humo circle:nth-child(2){animation-delay:.7s}.humo circle:nth-child(3){animation-delay:1.4s}.humo circle:nth-child(4){animation-delay:2.1s}
@keyframes subeVapor{0%{opacity:0;transform:translateY(10px) scale(.7)}35%{opacity:.85}100%{opacity:0;transform:translateY(-34px) scale(1.4)}}
/* hojas que se mecen */
.mece{animation:mecer 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.mece:nth-of-type(2n){animation-delay:-1.6s;animation-duration:5.2s}.mece:nth-of-type(3n){animation-delay:-3s}
@keyframes mecer{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.cae{animation:caer 6s linear infinite;transform-box:fill-box}
.cae:nth-of-type(2){animation-delay:-2s}.cae:nth-of-type(3){animation-delay:-4s}
@keyframes caer{0%{opacity:0;transform:translate(0,-10px) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(26px,90px) rotate(220deg)}}
/* molino */
.gira{animation:girar 5s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes girar{to{transform:rotate(360deg)}}
/* paquete que se llena */
.llena{animation:llenar 3.6s cubic-bezier(.4,0,.2,1) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes llenar{0%{transform:scaleY(.04)}70%,100%{transform:scaleY(1)}}
.grano{animation:grano 1.1s linear infinite;transform-box:fill-box}
.grano:nth-child(2){animation-delay:.3s}.grano:nth-child(3){animation-delay:.55s}.grano:nth-child(4){animation-delay:.8s}
@keyframes grano{0%{opacity:0;transform:translateY(-8px)}20%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
/* trazos que se dibujan (rutas, códigos de barra, flujos) */
.dibuja{stroke-dasharray:1;stroke-dashoffset:1;animation:trazar 1.8s cubic-bezier(.5,0,.2,1) forwards}
.late{animation:latir 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes latir{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.35}}
.aparece{opacity:0;animation:aparecer .5s ease forwards}
@keyframes aparecer{to{opacity:1}}
.cinta-mov{animation:cinta 1.2s linear infinite}
@keyframes cinta{to{stroke-dashoffset:-24}}
.sube{animation:subeCaja 2.4s ease-in-out infinite;transform-box:fill-box}
@keyframes subeCaja{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.escanea{animation:escanear 2.2s ease-in-out infinite;transform-box:fill-box}
@keyframes escanear{0%,100%{transform:translateY(0)}50%{transform:translateY(58px)}}
.parpadea{animation:parpadear 1.6s steps(2) infinite}
@keyframes parpadear{50%{opacity:.25}}

/* ---------- mapa: ruta de la Gira y nodos ---------- */
.mapa-real .pais-real{fill:#EFE6D0;stroke:#C9B98F}
.mapa-real .reg{fill:#B5A57C}
.mapa-real .rio-real{stroke:#9CC3D9}
.ruta-gira{fill:none;stroke:var(--terra);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trazar 4.5s cubic-bezier(.45,0,.25,1) .4s forwards}
.ruta-natalio{fill:none;stroke:#2A4038;stroke-width:4;stroke-dasharray:10 10;opacity:.75}
.camion-g{transition:none}
.mapa-py .pt .halo{animation:latir 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.st-leyenda{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--tinta-70);margin-top:8px}
.st-leyenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* ---------- ilustraciones en tarjeta ---------- */
.ilu-card{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.ilu-card svg{width:100%;height:auto;display:block}
.ilu-card p{margin:0;font-size:13.5px;line-height:1.6}
@media(max-width:820px){.ilu-card{grid-template-columns:1fr}.ilu-card>svg,.ilu-card>.ilu{max-width:180px;margin:0 auto}}
.svg-w{width:100%;height:auto;display:block}

/* ---------- góndola de seis cadenas (diagnóstico) ---------- */
.g6 text{font-family:var(--sans)}
.g6 .cad{font-size:13px;font-weight:700;fill:#2A4038}
.g6 .n{font-family:var(--disp);font-size:22px}
.g6 .pk{opacity:0;animation:bajaPk .5s cubic-bezier(.3,1.4,.5,1) forwards;transform-box:fill-box}
@keyframes bajaPk{0%{opacity:0;transform:translateY(-30px)}100%{opacity:1;transform:none}}
.g6 .vacio{fill:none;stroke:#A4492A;stroke-width:2;stroke-dasharray:6 5}

/* ---------- matriz sabor x cadena ---------- */
.mtz{display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(6,minmax(54px,1fr)) 64px;gap:5px;font-size:12px;min-width:640px}
.mtz-env{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mtz>div{padding:7px 6px;border-radius:8px;min-width:0}
.mtz .h{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--tinta-45);text-align:center;align-self:end}
.mtz__sab{display:flex;align-items:center;gap:8px;background:var(--papel);border:1px solid var(--linea)}
.mtz__sab i{width:12px;height:12px;border-radius:4px;flex:0 0 12px}
.mtz__sab b{font-family:var(--disp);font-size:14px;line-height:1.1}
.mtz__c{background:#F1E9D6;text-align:center;color:var(--tinta-25);font-size:11px;display:grid;place-items:center;opacity:0;animation:aparecer .35s ease forwards}
.mtz__c.si{background:#2A4038;color:var(--crema);font-weight:700}
.mtz__c.no{background:repeating-linear-gradient(135deg,#F1E9D6 0 6px,#E8DCC1 6px 12px)}
.mtz__t{text-align:center;font-family:var(--disp);font-size:18px;color:var(--rojo);align-self:center}

/* ---------- códigos de barra ---------- */
.eans{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ean{border:1px solid var(--linea);border-radius:10px;background:#fff;padding:8px 10px;min-width:0}
.ean svg{width:100%;height:34px;display:block}
.ean svg rect{transform-box:fill-box;transform-origin:bottom;animation:barra .6s ease backwards}
@keyframes barra{from{transform:scaleY(0)}}
.ean b{display:block;font-family:var(--mono);font-size:11px;margin-top:4px;color:var(--tinta)}
.ean b em{font-style:normal;background:#FBEADF;color:#8A3F22;border-radius:4px;padding:0 3px}
.ean span{display:block;font-size:11px;color:var(--tinta-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ean--falta{background:repeating-linear-gradient(135deg,#FFFDF8 0 8px,#F6EFDF 8px 16px);border-style:dashed}
.ean--falta b{color:#A4492A}

/* ---------- traza del lote ---------- */
.lote-tl{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative}
.lote-paso{background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:12px;font-size:12px;opacity:.5;transition:opacity .3s,border-color .3s,box-shadow .3s;min-width:0}
.lote-paso.on{opacity:1;border-color:var(--terra);box-shadow:0 0 0 3px #FBEADF}
.lote-paso svg{width:100%;height:70px;display:block;margin-bottom:6px}
.lote-paso b{display:block;font-family:var(--disp);font-size:15px;color:var(--rojo)}
.lote-paso span{color:var(--tinta-45)}
@media(max-width:1180px){.lote-tl{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.lote-tl{grid-template-columns:repeat(2,1fr)}}
.sello{font-family:var(--mono);background:#FFFDF8;border:2px dashed #A4492A;color:#7A3A20;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.6;display:inline-block}

/* ---------- promociones y premios ---------- */
.promos{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;position:relative;padding-top:20px}
.promos::before{content:"";position:absolute;left:4%;right:4%;top:8px;height:3px;background:linear-gradient(90deg,#2A4038,#DD7B58,#C2C983);border-radius:3px}
.promo{background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:10px;font-size:11.5px;position:relative;min-width:0}
.promo::before{content:"";position:absolute;top:-17px;left:14px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--terra)}
.promo b{display:block;font-family:var(--disp);font-weight:400;font-size:14px;color:var(--rojo);line-height:1.15}
.promo small{display:block;color:var(--terra-osc);font-weight:700;font-size:10.5px;margin-bottom:3px}
.promo span{color:var(--tinta-70);display:block}
.promo--dato{border-color:#EFC9B4;background:#FFF6EF}
@media(max-width:1180px){.promos{grid-template-columns:repeat(2,1fr)}.promos::before{display:none}.promo::before{display:none}}
.prm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.prm>div{border-radius:12px;padding:12px;background:var(--fondo);border:1px solid var(--linea);text-align:center}
.prm b{display:block;font-family:var(--disp);font-size:28px;color:var(--rojo)}
.prm span{font-size:11.5px;color:var(--tinta-45)}

/* ---------- WhatsApp: el lote que terminó en un chat ---------- */
.chat{background:#E9E1CD;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px;font-size:12px;max-height:260px;overflow:hidden}
.chat .m{max-width:82%;padding:7px 10px;border-radius:10px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.06);opacity:0;animation:aparecer .4s ease forwards}
.chat .m--yo{align-self:flex-end;background:#DCEFD0}
.chat .m small{display:block;color:var(--tinta-45);font-size:10px}

/* ---------- portal del distribuidor ---------- */
.ped{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ped__it{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;border:1px solid var(--linea);border-radius:12px;padding:8px;background:#fff;min-width:0}
.ped__it img{width:54px;height:54px;object-fit:contain}
.ped__it b{display:block;font-size:12.5px;line-height:1.2}
.ped__it span{font-size:11px;color:var(--tinta-45)}
.step{display:flex;align-items:center;gap:6px;margin-top:5px}
.step button{width:24px;height:24px;border-radius:7px;background:var(--fondo-2);font-weight:700}
.step button:hover{background:var(--rojo);color:var(--crema)}
.step output{min-width:26px;text-align:center;font-weight:700}
.ped-tot{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}
.ped-tot b{font-family:var(--disp);font-weight:400;font-size:26px;color:var(--rojo)}
.nuevo{background:#FBEADF;color:#8A3F22;border-radius:5px;padding:1px 5px;font-size:10px;font-weight:700;margin-left:4px}

/* ---------- casa Palermo ---------- */
.casa{display:grid;grid-template-columns:140px repeat(6,minmax(58px,1fr));gap:6px;font-size:12px;min-width:600px}
.casa>div{padding:8px 6px;border-radius:8px;text-align:center}
.casa .h{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--tinta-45);align-self:end}
.casa .m{text-align:left;font-weight:700;background:var(--papel);border:1px solid var(--linea)}
.casa .c{font-family:var(--disp);font-size:18px;opacity:0;animation:aparecer .4s ease forwards}
.casa .c0{background:repeating-linear-gradient(135deg,#FBEADF 0 6px,#F6DCCB 6px 12px);color:#A4492A}

/* ---------- tablas con foto ---------- */
.t .fo{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--linea)}
.t td.prod{display:flex;gap:10px;align-items:center;min-width:220px}
.t td.prod small{display:block;color:var(--tinta-45);font-size:11px}
.nodisp{color:var(--tinta-25)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .trazo .wm-path,.wipe.in .wm-path{fill-opacity:1;stroke-width:0}
  .ruta-gira,.dibuja{stroke-dashoffset:0}
}
.mapa-real.zoom .pt .et{font-size:19px}
.mapa-real.zoom .pt .ev{font-size:14px}
.mapa-real.zoom .ruta-gira{stroke-width:3.5}
.mapa-real.zoom .ruta-natalio{stroke-width:3}
@media(max-width:700px){.mapa-real.zoom .pt .et{font-size:24px}.mapa-real.zoom .pt .ev{font-size:17px}}
.st-hero .ilu{background:#FFF6E6;border-radius:18px;padding:10px 10px 0;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.santo-mece{animation:santoEntra 1.1s cubic-bezier(.2,.8,.2,1) both}
.santo-mece svg{transform-origin:50% 100%;animation:respira 6s ease-in-out 1.2s infinite}
@keyframes santoEntra{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes respira{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg) translateY(-2px)}}
.card--negro .ilu-card>svg:not([aria-label^="Guampa"]){background:#F6EFDF;border-radius:14px;padding:10px}
.ilu-card{grid-template-columns:200px 1fr}