/* La Cafetería — hoja de estilos según el cartel de Lia González */
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --gris:#e8e8e8; --papel:#efefef;
  --lav0:#e4e3fa; --lav1:#d9d8f7; --lav2:#c9c7f5; --lav3:#b9b7f3; --acento:#8b8cf0; --acento2:#7273e6;
  --linea:#b3b2f2; --coral:#f08a8a; --cian:#8ff0f5; --cian2:#3cc9d6;
  --tinta:#1f1f1f; --tinta2:#55555f; --tinta3:#8a8a96; --gristrazo:#9b9b9b;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --maq:"Courier Prime","Courier New",Courier,monospace;
  --suave:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--gris);color:var(--tinta);font-family:var(--maq);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--lav2)}
.cargando{padding:80px;text-align:center;font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--tinta2)}

/* Tipografía de rótulos */
.rotulo{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.28em;font-size:15px;margin:0}
.rotulo.g{font-size:20px;letter-spacing:.3em}
.rotulo.p{font-size:11.5px;letter-spacing:.3em}
.sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--tinta2);font-weight:300}
.ayuda{font-family:var(--maq);font-size:14px;color:var(--acento2);line-height:1.55;max-width:44ch}
.punteado{border:0;border-top:2px dotted #6f6f6f;opacity:.55;margin:0}
.dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--cian);color:var(--tinta);font-family:var(--mono);font-weight:500;font-size:13px;flex:none}

/* Botones */
.btn{appearance:none;border:1px solid var(--linea);background:transparent;padding:10px 18px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;cursor:pointer;border-radius:2px;transition:background .25s var(--suave),border-color .25s,color .25s,transform .25s var(--suave)}
.btn:hover{background:var(--lav1);border-color:var(--acento)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.toque:focus-visible,a:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.btn.grande{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:20px 24px;background:var(--acento);border-color:var(--acento);color:#fff;font-size:15px;letter-spacing:.1em;text-align:left}
.btn.grande:hover{background:var(--acento2)}
.btn.grande .flecha{font-size:22px;transition:transform .35s var(--suave)}
.btn.grande:hover .flecha{transform:translateX(5px)}
.btn.grande:disabled{background:var(--lav2);border-color:var(--lav2);cursor:default}
.enlace{background:none;border:0;padding:6px 0;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2);cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.enlace:hover{color:var(--acento2);border-color:var(--acento)}
.enlace.peligro:hover{color:#b44;border-color:#e6a5a5}

/* Cabecera */
.cab{max-width:1240px;margin:0 auto;padding:34px 40px 26px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.emblema{width:74px;height:74px;border:1px solid #b9b9b9;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transition:border-color .3s}
.emblema:hover{border-color:var(--acento)}
.emblema span{width:38px;height:38px;border-radius:50%;background:var(--acento);transition:transform .6s var(--suave)}
.emblema:hover span{transform:scale(1.08)}
.cab .depto{display:flex;align-items:center;gap:18px;cursor:pointer}
.cab .depto img{height:58px;width:auto}
.cab .depto .t{border-left:1px solid #bdbdbd;padding-left:18px}
.cab nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.guardado{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta3);transition:opacity .4s}

main{max-width:1240px;margin:0 auto;padding:0 40px}
section.bloque{padding:56px 0}
.cabecera-sec{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;margin-bottom:34px}

/* ---------- Cafetera ---------- */
.cafeteria{display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:center}
.cafetera{position:relative}
.cafetera svg{width:100%;height:auto;overflow:visible}
.vapor path{stroke:var(--acento);fill:none;stroke-width:1.2;stroke-linecap:round;opacity:0;animation:vapor 5.5s var(--suave) infinite}
.vapor path:nth-child(2){animation-delay:1.8s}
.vapor path:nth-child(3){animation-delay:3.6s}
@keyframes vapor{0%{opacity:0;transform:translateY(8px)}25%{opacity:.75}70%{opacity:.25}100%{opacity:0;transform:translateY(-26px)}}
.burbuja{animation:bur 6s ease-in-out infinite}
.burbuja:nth-of-type(2n){animation-duration:7.5s;animation-delay:-2s}
.burbuja:nth-of-type(3n){animation-duration:9s;animation-delay:-4s}
@keyframes bur{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.nueva-idea{display:flex;gap:0;border-bottom:1px solid var(--acento);max-width:640px}
.nueva-idea input{flex:1;border:0;background:transparent;padding:14px 2px;font-family:var(--maq);font-size:19px;font-style:italic;outline:none;min-width:0}
.nueva-idea input::placeholder{color:#9a9aae}
.nueva-idea .btn{border:0;font-size:12.5px;white-space:nowrap}
.ideas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.idea{position:relative;background:var(--lav1);border-radius:40px;padding:12px 22px 12px 20px;display:flex;align-items:center;gap:16px;animation:flota 7s ease-in-out infinite;max-width:100%}
.idea:nth-child(2n){animation-duration:8.5s;animation-delay:-3s}
.idea:nth-child(3n){animation-duration:9.5s;animation-delay:-5s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.idea .txt{font-size:15px;font-style:italic}
.idea .llevar{border:0;background:#fff;border-radius:30px;padding:8px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.idea .llevar:hover{background:var(--acento);color:#fff}
.idea .quitar{border:0;background:none;color:var(--tinta3);cursor:pointer;font-size:18px;padding:0 2px;line-height:1}
.idea .quitar:hover{color:#b44}

/* ---------- Mapa: panel lavanda ---------- */
.mapa{background:var(--lav1);margin:0 -40px;padding:64px 40px 72px;position:relative}
.mapa-in{max-width:1160px;margin:0 auto}
.area{display:grid;grid-template-columns:1fr 340px;gap:56px;position:relative;padding:22px 0}
.area .escena{position:relative;border-left:1px solid var(--gristrazo);margin-left:20px;padding:6px 0 20px 34px;min-height:110px}
.area .escena::before{content:"";position:absolute;left:-5px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--acento)}
.area:last-child .escena{border-left-color:transparent}
.area .texto{position:relative;padding-left:4px}
.area .texto .tit{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.area .texto .tit::before{content:"";position:absolute;left:-64px;top:15px;width:52px;border-top:1px solid #6f6f6f}
.area .texto .tit::after{content:"";position:absolute;left:-66px;top:12px;width:6px;height:6px;border-radius:50%;background:#222}
.area .texto h3{border-bottom:1px solid #6f6f6f;padding-bottom:3px}
.area .texto .ayuda{margin:6px 0 12px 44px}
.roles{display:flex;gap:10px;align-items:flex-end;margin-left:44px;flex-wrap:wrap}
.roles img{height:46px;width:auto;opacity:.95}
.roles img.ancho{height:44px}
.barra{background:var(--lav2);border-radius:2px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-height:58px}
.barra.pill{border-radius:30px}
.barra .vacio{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.barra .puntos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.barra .puntos i{width:9px;height:9px;border-radius:50%;background:var(--acento);display:block;animation:flota 6s ease-in-out infinite}
.barra .puntos i:nth-child(3n){background:#fff;width:7px;height:7px}
.barra .puntos i:nth-child(4n){background:var(--cian);animation-delay:-2s}
.etapas{display:flex;gap:28px;margin:12px 0 0 2px;flex-wrap:wrap}
.etapas span{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acento2)}
.ficha-mini{display:flex;align-items:center;gap:14px;background:var(--gris);border:1px solid var(--linea);padding:10px 16px 10px 12px;cursor:pointer;min-width:220px;max-width:340px;transition:transform .35s var(--suave),box-shadow .35s var(--suave),border-color .3s}
.ficha-mini:hover{transform:translateY(-2px);border-color:var(--acento);box-shadow:0 8px 22px -14px rgba(80,80,180,.55)}
.ficha-mini img{width:34px;height:40px;object-fit:contain;flex:none}
.ficha-mini .t{font-weight:700;font-size:14.5px;line-height:1.25}
.ficha-mini .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2);margin-top:3px}
.deposito-link{margin-top:12px;display:flex;align-items:center;gap:12px}
.deposito-link .caja{width:26px;height:30px;background:#a9cdf6}

/* ---------- Estantería ---------- */
.estante{position:relative;max-width:820px;margin:0 auto}
.estante img.mueble{width:100%;height:auto}
.lomos{position:absolute;left:5.8%;right:16%;display:flex;align-items:flex-end;gap:3px;overflow:hidden}
.lomos.arriba{bottom:56.5%;height:28%}
.lomos.abajo{bottom:13%;height:26%}
.lomo{width:clamp(18px,3.2vw,30px);height:var(--h,88%);background:var(--lav2);border:1px solid var(--acento);writing-mode:vertical-rl;font-family:var(--mono);font-size:clamp(8px,1vw,10px);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;justify-content:flex-start;padding:8px 0;overflow:hidden;white-space:nowrap;cursor:pointer;transition:transform .35s var(--suave),background .25s;flex:none}
.lomo:nth-child(3n){background:var(--lav1)}
.lomo:nth-child(4n){background:#fff}
.lomo:hover{transform:translateY(-6px);background:var(--acento);color:#fff}
.estante-nota{text-align:center;font-style:italic;color:var(--tinta2);margin-top:10px;font-size:14px}

/* ---------- Proyecto ---------- */
.volver{display:inline-flex;margin:8px 0 26px}
.proy{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);grid-template-areas:"ficha paso";gap:64px;align-items:start}
.proy .col-ficha{grid-area:ficha}
.proy .col-paso{grid-area:paso;position:sticky;top:24px;display:flex;flex-direction:column;gap:34px}
.titulo-proy{width:100%;border:0;border-bottom:1px solid transparent;background:transparent;font-family:var(--maq);font-weight:700;font-size:28px;line-height:1.2;padding:4px 0;outline:none;transition:border-color .3s}
.titulo-proy:hover,.titulo-proy:focus{border-bottom-color:var(--linea)}

/* Siguiente paso */
.paso{background:var(--lav1);padding:30px 30px 28px;position:relative}
.paso .donde{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.paso h2{font-family:var(--maq);font-weight:700;font-size:22px;margin:0 0 8px;letter-spacing:.01em}
.paso p{margin:0 0 22px;font-size:15.5px;line-height:1.6;color:#33334a}
.paso .roles{margin:0 0 22px}
.paso .otra{margin-top:14px;display:flex;gap:22px;flex-wrap:wrap}
.paso .bloqueo{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#9a4a4a;margin:-8px 0 16px}
.recorrido{display:flex;gap:0;margin-top:26px;align-items:center}
.recorrido span{flex:1;height:2px;background:var(--lav3);position:relative}
.recorrido span.hecho{background:var(--acento)}
.recorrido span::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--lav3)}
.recorrido span.hecho::after{background:var(--acento)}
.recorrido span.ahora::after{background:var(--cian2);box-shadow:0 0 0 4px rgba(143,240,245,.5)}
.recorrido-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2);margin-top:8px}

/* Servicios */
.servicios{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:end}
.servicio{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 2px 0;transition:transform .35s var(--suave)}
.servicio img{height:64px;width:auto;transition:transform .35s var(--suave)}
.servicio:hover img{transform:translateY(-4px)}
.servicios-barra{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);background:var(--lav2);border-radius:20px;margin-top:10px}
.servicios-barra span{text-align:center;padding:9px 0;font-family:var(--maq);font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
.servicio-otra{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.servicio-otra input{flex:1;min-width:150px;border:0;border-bottom:1px solid var(--linea);background:transparent;padding:8px 2px;outline:none;font-style:italic}

/* Protocolo grande */
.proto-lista{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--linea)}
.proto-lista li{border-bottom:1px solid var(--linea)}
.proto-lista button{width:100%;display:flex;gap:14px;align-items:center;background:none;border:0;padding:11px 4px;cursor:pointer;text-align:left;font-size:14.5px;transition:background .2s}
.proto-lista button:hover{background:rgba(255,255,255,.45)}
.proto-lista .caja{width:22px;height:22px;flex:none;background:var(--lav2);display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .25s}
.proto-lista .ok .caja{background:transparent}
.proto-lista .ok .caja::after{content:"✓";animation:pon .35s var(--suave)}
.proto-lista .n{color:var(--coral);font-family:var(--mono);width:24px;flex:none}
@keyframes pon{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Ficha receta (su diseño) ---------- */
.receta{border:2px solid var(--lav3);background:var(--gris);position:relative}
.receta .r-cab{display:grid;grid-template-columns:110px 1fr;height:62px;border-bottom:2px solid var(--lav3)}
.receta .r-num{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:26px;color:var(--coral);font-weight:300}
.receta .r-num::before{content:"";position:absolute;left:-2px;top:-2px;width:26px;height:64px;border-right:2px solid var(--lav3);transform:skewX(-20deg);transform-origin:top;background:var(--gris);display:none}
.receta .r-nom{background:var(--lav2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:#fff;letter-spacing:.32em;text-transform:uppercase;font-size:16px;border-left:2px solid var(--lav3);text-align:center;padding:0 8px}
.receta .fila{display:grid;grid-template-columns:132px 1fr;border-bottom:2px solid var(--lav3);min-height:38px}
.receta .fila label{display:flex;align-items:center;padding:0 12px;font-weight:700;font-size:13.5px;letter-spacing:.05em;border-right:2px solid var(--lav3)}
.receta .fila input{border:0;background:transparent;padding:6px 14px;font-style:italic;font-size:14.5px;outline:none;width:100%;transition:background .2s}
.receta .fila input:hover{background:rgba(255,255,255,.35)}
.receta .fila input:focus{background:rgba(255,255,255,.6)}
.receta .fila input::placeholder{color:#b0b0bf}
.receta .r-proto{display:flex;align-items:center;gap:20px;padding:0 0 0 14px;height:46px}
.receta .lab{font-weight:700;font-size:14px;letter-spacing:.05em}
.ticks{display:flex;gap:4px;align-items:center}
.tick{width:15px;height:15px;border:0;padding:0;background:var(--lav2);cursor:pointer;position:relative;transition:background .2s}
.tick:hover{background:var(--acento)}
.tick.ok{background:transparent}
.tick.ok::after{content:"✓";position:absolute;left:-2px;top:-9px;font-size:21px;line-height:1}
.r-total{margin-left:auto;align-self:stretch;width:70px;border-left:2px solid var(--lav3);border-bottom:2px solid var(--lav3);position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 8px 4px 0;font-family:var(--mono);font-size:13px}
.r-total::before{content:"";position:absolute;left:14px;top:40%;width:22px;border-top:1px solid #444;transform:rotate(-55deg)}
.r-total .x{position:absolute;left:8px;top:2px;font-size:13px}
.r-sec{padding:16px 14px 6px}
.r-sec .linea{display:flex;align-items:baseline;gap:18px}
.r-sec .suma{color:var(--coral);font-family:var(--mono);letter-spacing:.08em;font-size:14px}
.r-items{display:flex;align-items:flex-end;gap:6px;margin:14px 0 6px 0;min-height:76px}
.r-items .base{width:72px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding-right:14px}
.r-items .base img{height:70px;width:auto}
.r-items .trazo{align-self:stretch;width:2px;background:var(--lav3);margin-right:14px;flex:none}
.r-items .lista{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;flex:1}
.it{position:relative;border:0;background:none;padding:12px 2px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .3s var(--suave)}
.it sup{position:absolute;top:0;left:0;font-family:var(--mono);font-size:9.5px;color:var(--acento2)}
.it img{height:44px;width:auto;max-width:62px;object-fit:contain}
.it:hover{transform:translateY(-3px)}
.it .fuera{position:absolute;top:2px;right:-6px;font-size:13px;color:#b44;opacity:0;transition:opacity .2s}
.it:hover .fuera{opacity:1}
.mas{width:46px;height:46px;border:1px dashed var(--acento);background:transparent;color:var(--acento2);font-size:22px;cursor:pointer;transition:background .25s,transform .3s var(--suave);flex:none;align-self:flex-end}
.mas:hover{background:var(--lav1);transform:scale(1.04)}
.envio{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-left:96px}
.envio .p{display:flex;align-items:flex-end;gap:16px}
.envio .p img{height:30px;width:auto;flex:none;margin-left:-48px}
.envio .p .nom{flex:1;border-bottom:2px solid var(--lav3);font-style:italic;font-size:14px;padding:0 6px 2px;display:flex;justify-content:space-between}
.envio .p .nom button{border:0;background:none;color:var(--tinta3);cursor:pointer;font-size:16px;line-height:1;opacity:.5}
.envio .p .nom button:hover{opacity:1;color:#b44}
.envio .nuevo input{flex:1;border:0;border-bottom:2px dashed var(--lav3);background:transparent;font-style:italic;font-size:14px;padding:0 6px 2px;outline:none}
.r-pie{display:grid;grid-template-columns:1fr 128px;margin-top:22px}
.r-pie .marca{padding:12px 16px 14px}
.r-pie .marca .e{font-family:var(--mono);font-size:11px;letter-spacing:.85em;color:var(--acento);margin-bottom:8px}
.r-pie .marca img{width:150px;height:auto}
.r-pie .fin{position:relative}
.r-pie .fin .lab{position:absolute;top:-24px;right:10px;font-size:12px}
.r-pie .fin .caja{border-left:2px solid var(--lav3);border-top:2px solid var(--lav3);height:118px;display:flex;align-items:center;justify-content:center}
.r-pie .fin img{width:58px;height:auto;opacity:.6}
.r-pie .fin.si img{opacity:1;animation:sello 1s var(--suave) both}
@keyframes sello{0%{transform:scale(2.4) rotate(-35deg);opacity:0}60%{transform:scale(.92) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ejemplo{position:absolute;right:0;top:-30px;font-family:var(--mono);letter-spacing:.2em;color:var(--acento);font-size:15px}

/* Archivos */
.archivos h3{margin-bottom:14px}
.soltar{display:block;border:1px dashed var(--acento);padding:22px;text-align:center;cursor:pointer;transition:background .25s;font-style:italic;color:var(--tinta2)}
.soltar:hover,.soltar.encima{background:var(--lav1)}
.lista-arch{list-style:none;margin:12px 0 0;padding:0}
.lista-arch li{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--linea);padding:10px 2px;flex-wrap:wrap}
.lista-arch .n{flex:1;min-width:140px;word-break:break-word}
.lista-arch .t{font-family:var(--mono);font-size:11px;color:var(--tinta3)}

.acciones{display:flex;gap:26px;flex-wrap:wrap;padding-top:6px}

/* ---------- Selector de catálogo (su cuadrícula) ---------- */
.velo{position:fixed;inset:0;background:rgba(232,232,232,.82);backdrop-filter:blur(3px);z-index:20;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:40px 20px;animation:aparece .3s var(--suave)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.hoja{background:var(--gris);border:1px solid #c4c4c4;max-width:980px;width:100%;padding:40px 44px 34px;animation:sube .4s var(--suave)}
@keyframes sube{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.hoja .cabecera-sec{margin-bottom:22px}
.cuadro{border:1px solid #bdbdbd;padding:30px 30px 10px}
.fila-cat{display:flex;flex-wrap:wrap;gap:4px 0;padding-bottom:16px;margin-bottom:22px;border-bottom:4px solid var(--lav2)}
.cat{position:relative;width:calc(100% / 7);min-width:112px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px 8px;transition:background .25s;border-radius:2px}
.cat:hover{background:rgba(201,199,245,.35)}
.cat sup{position:absolute;left:12px;top:6px;font-family:var(--mono);font-size:10.5px;color:var(--acento2)}
.cat .ic{height:64px;display:flex;align-items:flex-end}
.cat img{max-height:64px;max-width:86px;width:auto;height:auto}
.cat .raya{width:12px;border-top:2px solid #9fb6f3}
.cat .nom{font-weight:700;font-size:12.5px;text-align:center;line-height:1.2}
.cat.on{background:var(--lav2)}
.cat.on::after{content:"✓";position:absolute;right:10px;top:4px;font-size:18px;color:var(--tinta)}
.hoja .pie-hoja{display:flex;justify-content:flex-end;margin-top:6px}

/* ---------- Cómo funciona ---------- */
.objetivos{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.obj-g{background:var(--lav2);padding:24px 26px;color:#fff}
.obj-g .k{font-family:var(--mono);letter-spacing:.3em;font-size:11.5px;text-transform:uppercase;opacity:.9}
.obj-g p{font-family:var(--mono);text-transform:uppercase;font-size:13.5px;letter-spacing:.06em;line-height:1.7;margin:8px 0 0}
dl.obj{margin:0}
dl.obj dt{font-family:var(--mono);color:var(--acento2);letter-spacing:.24em;text-transform:uppercase;font-size:11.5px;margin-top:20px}
dl.obj dd{margin:6px 0 0;font-size:14.5px}
.proto-fijo{list-style:none;padding:0;margin:0;border:1px solid #bdbdbd}
.proto-fijo li{display:flex;gap:14px;padding:9px 14px;border-bottom:1px solid #d0d0d0;font-size:14px}
.proto-fijo li b{color:var(--tinta);font-family:var(--mono);width:26px}
.mapa-img{background:var(--lav1);padding:30px;text-align:center}
.mapa-img img{margin:0 auto;max-width:760px;width:100%}
.venn{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.venn span{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.trab{display:flex;flex-wrap:wrap;gap:26px 30px;align-items:flex-end;border:1px solid var(--gristrazo);padding:22px 26px;background:var(--lav1)}
.trab figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.trab img{height:64px;width:auto}
.trab figcaption{font-weight:700;font-size:11.5px}

/* ---------- Depósito ---------- */
.depo{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- Login ---------- */
.login{max-width:420px;margin:12vh auto;padding:44px;border:1px solid var(--linea);background:var(--gris)}
.login img{width:170px;margin-bottom:28px}
.login label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin:20px 0 6px;color:var(--tinta2)}
.login input{width:100%;border:0;border-bottom:1px solid var(--acento);background:transparent;padding:8px 2px;font-size:17px;outline:none}
.login .err{color:#a33;font-size:13px;min-height:20px;margin:14px 0 6px}

/* Pie */
footer.pie{max-width:1240px;margin:0 auto;padding:40px 40px 60px;display:flex;gap:30px;flex-wrap:wrap;align-items:center;border-top:2px dotted rgba(111,111,111,.45)}
footer.pie .firma{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta3)}

#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,10px);background:var(--tinta);color:#fff;padding:12px 22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .35s var(--suave),transform .35s var(--suave);max-width:90vw;z-index:40}
#toast.ver{opacity:1;transform:translate(-50%,0)}

/* Responsive */
@media (max-width:980px){
  .area{grid-template-columns:1fr;gap:16px}
  .area .texto{order:-1}
  .area .texto .tit::before,.area .texto .tit::after{display:none}
  .proy{grid-template-columns:1fr;grid-template-areas:"paso" "ficha";gap:40px}
  .proy .col-paso{position:static}
  .objetivos{grid-template-columns:1fr}
  .cafeteria{grid-template-columns:1fr;gap:24px}
  .cafetera{max-width:200px}
}
@media (max-width:640px){
  .cab,main,footer.pie{padding-left:20px;padding-right:20px}
  .mapa{margin:0 -20px;padding:44px 20px}
  .cab nav{margin-left:0}
  .hoja{padding:24px 16px}
  .cuadro{padding:14px 6px 4px}
  .cat{width:33.33%;min-width:0}
  .servicio img{height:46px}
  .servicios-barra span{font-size:10.5px}
  .receta .fila{grid-template-columns:108px 1fr}
  .area .escena{margin-left:6px;padding-left:22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Imprimir solo la ficha */
@media print{
  body{background:#fff}
  body.imprimiendo .cab, body.imprimiendo footer.pie, body.imprimiendo .col-paso, body.imprimiendo .volver, body.imprimiendo .no-print{display:none!important}
  body.imprimiendo .proy{display:block}
  body.imprimiendo .receta{max-width:470px;margin:0 auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* --- escenas del mapa, como en el cartel --- */
.area .escena{padding-bottom:30px}
.en-area{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.barra.fuerte{background:var(--lav3);justify-content:center;gap:clamp(18px,5vw,64px);min-height:62px}
.barra.fuerte span{font-family:var(--mono);color:#fff;letter-spacing:.24em;text-transform:uppercase;font-size:13px}
.barra.pill{cursor:pointer;transition:background .3s}
.barra.pill:hover{background:var(--lav3)}
.mini-recetas{display:grid;grid-template-columns:repeat(5,minmax(0,92px));gap:clamp(8px,2vw,24px);padding-top:4px}
.mini-receta{position:relative;border:1px solid #6f6f6f;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px 6px 10px;background:transparent}
.mini-receta b{position:absolute;top:-1px;left:-1px;background:#111;color:#fff;font-family:var(--mono);font-weight:500;font-size:11px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.mini-receta span{position:absolute;left:10px;top:26px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--acento2);height:84px;text-align:right}
.mini-receta img{height:40px;width:auto;margin-left:22px}
.caja-area{border:1px solid #6f6f6f;padding:6px 22px 16px}
.caja-area .et{font-family:var(--mono);color:var(--acento2);letter-spacing:.22em;text-transform:uppercase;font-size:12px;text-align:center;padding:12px 0;border-bottom:1px dashed #6f6f6f;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.caja-area .et:last-of-type{border-bottom:0}
.caja-area .et b{color:var(--tinta);font-weight:400}
.mini-ticks{display:inline-flex;gap:3px}
.mini-ticks i{width:8px;height:8px;background:#fff;display:block}
.mini-ticks i.ok{background:none;position:relative}
.mini-ticks i.ok::after{content:"✓";position:absolute;left:-1px;top:-8px;font-size:13px;color:var(--tinta);font-style:normal}
.si-no{display:flex;align-items:center;gap:14px;margin-top:12px}
.si-no>span:first-child{background:var(--lav3);padding:2px 10px;font-family:var(--mono);font-size:13px}
.museo{cursor:pointer;max-width:420px;margin:0 auto;transition:transform .4s var(--suave)}
.museo:hover{transform:translateY(-3px)}
.museo img{width:100%;height:auto}
.pie-museo{display:flex;justify-content:space-around;font-family:var(--mono);letter-spacing:.2em;font-size:14px;margin-top:6px}
.proy>*{min-width:0}
.it img{height:48px;max-width:64px}
.r-items .base img{height:auto;max-height:84px;max-width:58px;object-fit:contain}
.r-pie{margin-top:40px}
@media (max-width:640px){
  .emblema{display:none}
  .cab{padding-top:20px;gap:14px}
  .cab .depto img{height:46px}
  .mini-recetas{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .mini-receta{height:96px}
  .mini-receta span{display:none}
  .mini-receta img{margin-left:0;height:32px}
  .caja-area{padding:4px 10px 12px}
  .it img{height:42px}
}
.pie-museo{display:grid;grid-template-columns:32% 15% 53%;text-align:center}
.pie-museo span:last-child{grid-column:3}
.lomos{left:10.5%;right:12%}
.lomos.arriba{bottom:41.5%;height:37%}
.lomos.abajo{bottom:10%;height:25%}

/* ===== cabecera del mapa: Venn → nodo → Departamento, emblema ===== */
.mapa-top{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:40px}
.venn-top{display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;gap:0;width:min(640px,100%)}
.venn-top span{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.venn-top span:first-child{text-align:right;transform:translateX(52px);position:relative;z-index:1}
.venn-top span:last-child{transform:translateX(-46px);position:relative;z-index:1}
.venn-top svg{width:180px;height:110px}
.corchete{width:100px;height:64px;margin-top:4px}
.nodo{display:flex;align-items:center;width:min(760px,100%);gap:0}
.nodo i{flex:1;border-top:1.5px dotted #9b9bb8}
.nodo .cuadro{width:70px;height:66px;border:1px solid #b6c4f4;display:flex;align-items:center;justify-content:center;margin:0 18px}
.nodo .cuadro b{width:34px;height:34px;border-radius:50%;background:#8a96f0;animation:latido 5s ease-in-out infinite}
@keyframes latido{50%{transform:scale(.9);opacity:.85}}
.mapa-top h2{margin:30px 0 0}
.mapa-top .baja{display:block;height:34px;border-left:1px solid #6b6b70;margin-top:16px}
.emblema-mapa{position:absolute;right:0;top:-18px;width:150px;border:0;padding:0;background:#cccdf9;cursor:pointer;transition:transform .45s var(--suave),box-shadow .45s var(--suave)}
.emblema-mapa:hover{transform:translateY(-3px);box-shadow:0 10px 30px -18px #5a58c7}
.emblema-mapa .bar{display:block;background:#7d76f7;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:8px 6px;white-space:nowrap}
.emblema-mapa svg{width:84px;height:120px;margin:16px auto 18px;display:block}

/* ===== área 2: espacio nuevas recetas ===== */
.recetas-mapa{display:flex;align-items:center;gap:0}
.nuevas-col{flex:none;width:118px;position:relative}
.nuevas{width:118px;height:134px;border:0;background:#a5cff9;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:background .3s,transform .4s var(--suave)}
.nuevas:hover{background:#94c3f5;transform:translateY(-2px)}
.nuevas img{height:52px;width:auto}
.nuevas span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;line-height:1.35;color:var(--tinta)}
.nuevas-form{position:absolute;left:0;top:calc(100% + 10px);z-index:3;background:var(--gris);border:1px solid #a5cff9;padding:12px;display:flex;flex-direction:column;gap:10px;width:240px;animation:sube .35s var(--suave)}
.nuevas-form input{border:0;border-bottom:1px solid var(--tinta3);background:transparent;padding:8px 2px;font-style:italic;font-size:15px;outline:none}
.enlace-linea{flex:0 0 22px;border-top:1px solid #6b6b70;align-self:center}
.mini-recetas{grid-template-columns:repeat(auto-fill,minmax(64px,84px));flex:1}
.mini-receta.extra{border-style:dashed}
.quitar-receta{position:absolute;right:2px;bottom:2px;border:0;background:none;color:var(--tinta3);cursor:pointer;font-size:16px;padding:2px 6px;opacity:0;transition:opacity .25s}
.mini-receta:hover .quitar-receta{opacity:1}

/* ===== área 5: lista proveedores e inventario + alerta ===== */
.boton-imp{font-family:var(--maq);font-size:10.5px;letter-spacing:.02em;text-transform:none;color:var(--acento2);margin-right:14px}
.caja-area .taller{display:flex;align-items:stretch;gap:0;border-top:1px dashed #6f6f6f;margin-top:4px;padding-top:12px}
.alerta-fila{flex:1;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:4px 16px 0 0}
.falta{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px}
.falta img{height:34px;width:auto;max-width:48px}
.falta i,.cat.alerta::before,.it.alerta::after{width:9px;height:9px;border-radius:50%;background:#f75a65;display:block;box-shadow:0 0 0 0 rgba(247,90,101,.5);animation:aviso 2.6s ease-out infinite}
.falta small{font-size:10.5px;font-weight:700;max-width:80px;text-align:center;line-height:1.15}
@keyframes aviso{0%{box-shadow:0 0 0 0 rgba(247,90,101,.45)}70%,100%{box-shadow:0 0 0 7px rgba(247,90,101,0)}}
.lista-inv{flex:none;border:0;border-left:1px solid #9b9b9b;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 10px 2px 22px;transition:transform .4s var(--suave)}
.lista-inv:hover{transform:translateY(-2px)}
.lista-inv img{height:42px;width:auto}
.lista-inv span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento2);line-height:1.35;text-align:center}
.alerta-txt{display:flex;gap:14px;align-items:flex-start;margin:14px 0 0 18px}
.flecha-up{width:14px;height:44px;flex:none;background:linear-gradient(#3a3a3e,#3a3a3e) center/1px 100% no-repeat;position:relative}
.flecha-up::before{content:"";position:absolute;left:2px;top:0;width:8px;height:8px;border-left:1px solid #3a3a3e;border-top:1px solid #3a3a3e;transform:rotate(45deg)}
.rot{display:block;font-family:var(--mono);font-size:12.5px;color:var(--acento2);letter-spacing:.06em;margin-bottom:4px}
.alerta-txt p{margin:0;font-size:13.5px;line-height:1.55}

/* aviso en el proyecto */
.aviso-prov{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.45);border-left:2px solid #f75a65;padding:14px 16px;margin:0 0 22px;animation:aparece .5s var(--suave)}
.aviso-prov img{height:58px;width:auto;flex:none}
.aviso-prov p{margin:0 0 2px!important;font-size:14.5px!important}
.aviso-prov .enlace{margin-top:8px}
.it.alerta::after{content:"";position:absolute;left:50%;bottom:-12px;margin-left:-4px;width:8px;height:8px}
.cat.alerta::before{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px}

/* hoja de inventario */
.inventario .inv-cab{display:flex;gap:22px;align-items:flex-start;margin-bottom:22px}
.inventario .inv-cab>img{height:64px;width:auto;margin-top:2px}
.inventario .inv-cab h2{margin:0 0 10px}
.resumen-alertas{display:flex;gap:16px;align-items:flex-start;background:var(--lav1);padding:16px 20px;margin-bottom:30px;min-height:70px}
.resumen-alertas img{height:62px;width:auto;flex:none}
.resumen-alertas p{margin:0;font-size:14.5px;line-height:1.6}
.sec-inv{display:block;margin:6px 0 14px}
.cat.inv{cursor:default;padding-bottom:16px}
.cat.inv:hover{background:none}
.cat.inv.alerta{background:rgba(247,90,101,.06)}
.cat.inv.alerta::before{bottom:auto;top:84px;left:auto;right:16px}
.stock{display:flex;align-items:center;gap:2px;margin-top:2px}
.stock button{width:34px;height:34px;border:1px solid var(--linea);background:transparent;font-family:var(--mono);font-size:18px;color:var(--acento2);cursor:pointer;transition:background .2s,color .2s;line-height:1}
.stock button:hover{background:var(--acento);color:#fff;border-color:var(--acento)}
.stock button:active{transform:scale(.94)}
.stock input{width:44px;height:34px;border:0;border-bottom:1px solid var(--linea);background:transparent;text-align:center;font-family:var(--mono);font-size:15px;outline:none}
.stock input:focus{border-bottom-color:var(--acento2)}
.inventario textarea{width:100%;border:1px solid var(--linea);background:transparent;padding:12px 14px;font-family:var(--maq);font-style:italic;font-size:15px;resize:vertical;outline:none}
.inventario textarea:focus{background:rgba(255,255,255,.5)}

/* ===== ficha: esquina inclinada como en su receta ===== */
.receta{--ex:37px;--ey:92px;clip-path:polygon(var(--ex) 0,100% 0,100% 100%,0 100%,0 var(--ey))}
.receta::before{content:"";position:absolute;left:-2px;top:-2px;width:var(--ex);height:var(--ey);pointer-events:none;z-index:2;
  background:linear-gradient(to bottom right,transparent calc(50% - 2.2px),var(--lav3) calc(50% - 1.6px),var(--lav3) calc(50% + 1.6px),transparent calc(50% + 2.2px))}
.receta .r-num{padding-left:18px}
.receta .fila:first-of-type label{padding-left:22px}
.receta .fila input[data-f="obra"]{color:#f0709a}
.ejemplo{position:static;text-align:right;margin:0 0 10px}

@media (max-width:640px){
  .emblema-mapa{position:static;margin:0 0 24px;width:150px}.emblema-mapa svg{height:96px;margin:12px auto 14px}
  .venn-top{grid-template-columns:1fr 120px 1fr}
  .venn-top svg{width:120px;height:74px}
  .venn-top span{font-size:9.5px;letter-spacing:.08em}
  .venn-top span:first-child{transform:translateX(30px)}
  .venn-top span:last-child{transform:translateX(-26px)}
  .recetas-mapa{flex-direction:column;align-items:stretch;gap:14px}
  .enlace-linea{display:none}
  .nuevas{width:100%;height:auto;flex-direction:row;padding:10px}
  .nuevas-col{width:auto}
  .caja-area .taller{flex-direction:column;gap:12px}
  .lista-inv{border-left:0;border-top:1px solid #9b9b9b;padding-top:12px}
  .cat.inv{width:50%;min-width:0}
}

/* inventario · ajuste de celdas */
.cat.inv{padding:18px 4px 14px}
.cat.inv .stock{margin-top:auto;padding-top:4px}
.stock button{width:30px;height:30px;font-size:16px}
.stock input{width:34px;height:30px;font-size:14px}
.cafeteria>div{min-width:0}
@media (max-width:980px){.cafeteria{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.nueva-idea .btn{padding-left:10px;padding-right:4px}}
/* cabecera del mapa · medidas del póster (escala --vs) */
.mapa-top{--vs:.56}
.venn-top{grid-template-columns:1fr calc(366px * var(--vs)) 1fr;width:min(720px,100%)}
.venn-top svg.venn-svg{width:calc(366px * var(--vs));height:auto;aspect-ratio:366/223;display:block;overflow:visible}
.venn-top span:first-child{transform:translateX(calc(51px * var(--vs)))}
.venn-top span:last-child{transform:translateX(calc(-44px * var(--vs)))}
.corchete{width:calc(204px * var(--vs));height:auto;aspect-ratio:204/148;margin-top:calc(14px * var(--vs));display:block;flex:none}
.nodo{align-items:center}
.nodo .nodo-svg{flex:none;width:calc(152px * var(--vs));height:auto;aspect-ratio:152/143;display:block;margin:0 calc(32px * var(--vs))}
.nodo i{border-top:0;height:2px;background:repeating-linear-gradient(90deg,#83849a 0 3px,transparent 3px 7px);opacity:.9}
.nodo .punto{transform-box:fill-box;transform-origin:center;animation:latido 5s ease-in-out infinite}
.emblema-mapa svg{width:auto;height:120px;aspect-ratio:174/340}
@media (max-width:640px){
  .mapa-top{--vs:.42}
  .venn-top{grid-template-columns:1fr calc(366px * var(--vs)) 1fr}
  .venn-top svg.venn-svg{width:calc(366px * var(--vs));height:auto}
  .venn-top span:first-child{transform:translateX(calc(51px * var(--vs)))}
  .venn-top span:last-child{transform:translateX(calc(-44px * var(--vs)))}
  .emblema-mapa svg{height:96px;width:auto}
}
footer.pie .firma .corazon{color:#f0709a;font-family:var(--maq);font-size:14px;letter-spacing:0;margin-left:2px;display:inline-block;transform:translateY(1px)}
.nodo i{height:1.5px}
.mapa-top h2{text-align:center}
@media (max-width:640px){
  .mapa-top{--vs:.38}
  .venn-top span{font-size:9px;letter-spacing:.05em;line-height:1.45}
}

/* Enlace «Cómo funciona»: fila propia bajo la cabecera, empezando justo bajo DEPARTAMENTO; lila subrayado en lila (petición de Lia). No toca el logo. */
.cab .cab-como{flex:0 0 100%;margin-top:-24px;padding-left:var(--como-x,0)}
.cab .enlace.como-link{color:#6f70e0;border-bottom:0;padding:0;text-decoration:underline;text-decoration-color:#8b8cf0;text-decoration-thickness:1.5px;text-underline-offset:5px;font-weight:500}
.cab .enlace.como-link:hover{color:#4f50c4;text-decoration-color:#6f70e0}
@media (max-width:640px){.cab .cab-como{margin-top:2px}}