@font-face{
  font-family:'Jakarta';
  src:url("../fuentes/plus-jakarta-sans-latin.7660bd9909fb.woff2") format('woff2');
  font-weight:200 800; font-display:swap;
}
:root{
  --fondo:#FBF8F4; --sup:#FFFFFF; --sup-2:#F4F0EA;
  --tinta:#17120E; --tinta-2:#6E655C; --tinta-3:#A69C92;
  --linea:rgba(23,18,14,.07);
  --ink:#1C1713;                 /* botones principales */
  --ambar:#E39B12; --ambar-luz:#FDF3DF;
  --proteina:#C0392B; --granos:#B0770F; --despensa:#2E7A55;
  --wa:#1FC15C; --wa-txt:#8FE9B4;
  --r-card:26px; --r-ctl:16px;
  --s1:0 1px 2px rgba(23,18,14,.05);
  --s2:0 14px 30px -18px rgba(23,18,14,.35);
  --s3:0 20px 40px -20px rgba(23,18,14,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#14110F; --sup:#1D1916; --sup-2:#262120;
    --tinta:#F6F1EB; --tinta-2:#A79D93; --tinta-3:#7C7269;
    --linea:rgba(255,255,255,.08); --ink:#F6F1EB; --wa-txt:#0E5A34;
    --ambar-luz:#2E2415;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--tinta);font-family:'Jakarta',system-ui,sans-serif;
     font-size:15px;line-height:1.5;word-spacing:.04em;-webkit-font-smoothing:antialiased;
     padding-bottom:92px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:8px}
input{font:inherit;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.012em;font-weight:800}

/* Errores de formulario y avisos: sin estilos en linea, la CSP los prohibe */
.campo input,.campo textarea{width:100%;border:0;background:none;font:inherit;color:var(--tinta);
  font-weight:600;outline:none;padding:0;margin-top:2px}
.campo textarea{resize:vertical;min-height:52px}
.campo.error{box-shadow:0 0 0 2px #B23B2C}
.campo .ayuda{display:block;font-size:12px;color:var(--tinta-2);font-weight:500;margin-top:4px;line-height:1.35}
.error-lista{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px;color:#B23B2C;font-weight:700}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pie-sitio{margin-top:34px;padding:0 0 20px}
.htmx-request .btn{opacity:.7}
.cinta-vacia{display:none}
.res-cod.mono{font-family:'SFMono-Regular',Menlo,monospace}
.lista-limpia{list-style:none;margin:0;padding:0}
.btn.enlace{text-decoration:none}
form{margin:0}
.mas.form-inline{display:inline-grid}
.stepper form{display:contents}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:30;padding:14px 20px 12px;
     background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(14px)}
.top-fila{display:flex;align-items:center;gap:11px}
.logo{width:38px;height:38px;border-radius:13px;background:var(--ink);
      color:var(--fondo);display:grid;place-items:center;font-weight:800;font-size:17px;flex:none}
.top h1{font-size:17px}
.top .lugar{font-size:12px;color:var(--tinta-2);font-weight:600;display:flex;gap:5px;align-items:center;margin-top:1px}
.punto{width:5px;height:5px;border-radius:99px;background:var(--despensa);flex:none}
.buscar{margin-top:13px;background:var(--sup);border-radius:var(--r-ctl);padding:11px 14px;
        display:flex;gap:9px;align-items:center;font-size:14px;color:var(--tinta-3);
        box-shadow:var(--s1);font-weight:500}
.buscar input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;
              font-weight:600;color:var(--tinta)}
.buscar input::placeholder{color:var(--tinta-3);font-weight:500}
.volver{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.volver span{width:34px;height:34px;border-radius:12px;background:var(--sup);box-shadow:var(--s1);
             display:grid;place-items:center;font-size:16px}

.wrap{padding:0 20px}
.seccion{margin-top:30px}
.seccion h2{font-size:19px}
.seccion .sub{color:var(--tinta-2);font-size:13.5px;margin-top:2px;font-weight:500}
.seccion-tit{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;gap:12px}
.seccion-tit a{font-size:13px;color:var(--tinta);font-weight:700;white-space:nowrap;
               background:var(--sup);padding:7px 13px;border-radius:99px;box-shadow:var(--s1)}

/* ---------- cinta de remesas ---------- */
.cinta{display:flex;align-items:center;gap:10px;margin-top:11px;background:var(--ink);
       color:var(--fondo);border-radius:var(--r-ctl);padding:10px 13px;box-shadow:var(--s1);
       cursor:pointer;overflow:hidden}
.cinta .et{background:var(--ambar);color:#3B2A00;font-size:10.5px;font-weight:800;
           padding:4px 9px;border-radius:99px;flex:none;letter-spacing:.02em}
/* Cada tasa entera o nada: la que no cabe baja a una segunda linea que no se ve (en un
   celular de 360 px se leia "690 CUP efectivo · 1" y ese "1" suelto parecia un error). */
.cinta .datos{display:flex;flex-wrap:wrap;column-gap:9px;row-gap:12px;align-items:center;font-size:12.5px;
              font-weight:700;white-space:nowrap;overflow:hidden;flex:1;min-width:0;height:18px;line-height:18px}
.cinta .tasa{display:inline-flex;gap:6px;align-items:center}
.cinta .datos b{font-variant-numeric:tabular-nums}
.cinta .sep{width:3px;height:3px;border-radius:99px;background:color-mix(in srgb,var(--fondo) 40%,transparent);flex:none}
.cinta .datos .canal{color:color-mix(in srgb,var(--fondo) 62%,transparent);font-weight:600}
.cinta .ir{flex:none;font-size:14px;opacity:.7}

/* ---------- remesas ---------- */
.calc{background:var(--ink);color:var(--fondo);border-radius:var(--r-card);padding:20px;
      box-shadow:var(--s3)}
.calc .rot{font-size:11px;font-weight:800;color:color-mix(in srgb,var(--fondo) 50%,transparent);text-transform:uppercase;
           letter-spacing:.09em}
.calc .envia{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:8px}
.montos{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
/* Los montos rapidos en una sola fila que se desliza: en dos filas empujaban hacia abajo
   lo que recibe la familia, que es lo que se vino a ver. */
.montos.rapidos{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:0 20px;scrollbar-width:none}
.montos.rapidos::-webkit-scrollbar{display:none}
.montos.rapidos .monto-b{flex:none}
.monto-b{background:color-mix(in srgb,var(--fondo) 10%,transparent);border-radius:99px;padding:8px 15px;font-size:13px;
         font-weight:700;font-variant-numeric:tabular-nums}
.monto-b.on{background:var(--fondo);color:var(--ink)}
.flecha{text-align:center;color:color-mix(in srgb,var(--fondo) 35%,transparent);font-size:20px;margin:16px 0 8px}
.recibe{background:color-mix(in srgb,var(--fondo) 8%,transparent);border-radius:20px;padding:16px}
.recibe .num{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.05;
             font-variant-numeric:tabular-nums}
.recibe .nota{color:color-mix(in srgb,var(--fondo) 55%,transparent);font-size:12px;font-weight:600;margin-top:6px}
.monedas{display:flex;gap:8px;margin-top:12px}
.moneda-b{flex:1;background:color-mix(in srgb,var(--fondo) 8%,transparent);border-radius:14px;padding:11px;text-align:center;
          font-size:13px;font-weight:700}
.moneda-b.on{background:var(--fondo);color:var(--ink)}
.moneda-b small{display:block;font-size:10.5px;font-weight:600;opacity:.6;margin-top:1px}
.tasa-pie{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;
          border-top:1px solid color-mix(in srgb,var(--fondo) 12%,transparent);font-size:12px;font-weight:600;
          color:color-mix(in srgb,var(--fondo) 60%,transparent)}
.pago{display:flex;align-items:center;gap:12px;padding:14px 16px;position:relative}
.pago + .pago:before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--linea)}
.pago .ini{width:34px;height:34px;border-radius:11px;background:var(--sup-2);display:grid;
           place-items:center;font-size:13px;font-weight:800;flex:none}
.pago b{display:block;font-size:14px;font-weight:700}
.pago small{color:var(--tinta-2);font-size:12.5px;font-weight:500}

/* ---------- portada ---------- */
.hero{position:relative;border-radius:var(--r-card);overflow:hidden;margin-top:6px;
      box-shadow:var(--s2);isolation:isolate}
.hero img{width:100%;height:288px;object-fit:cover;object-position:center 60%}
.hero .velo{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,7,5,.92) 8%,rgba(10,7,5,.55) 46%,rgba(10,7,5,.12) 100%)}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding:20px}
.hero h3{color:#fff;font-size:23px;line-height:1.2;max-width:15ch;letter-spacing:-.02em}
.hero p{color:rgba(255,255,255,.82);font-size:13.5px;margin:7px 0 0;font-weight:500;max-width:26ch}
.insignias{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.insignia{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22);
       border-radius:99px;padding:5px 11px;font-size:11.5px;font-weight:700;backdrop-filter:blur(6px)}

/* ---------- pasos ---------- */
.pasos{display:flex;flex-direction:column;gap:2px;background:var(--sup);border-radius:var(--r-card);
       padding:6px 4px;box-shadow:var(--s1)}
.paso{display:flex;gap:13px;align-items:flex-start;padding:13px 14px}
.paso .n{width:27px;height:27px;border-radius:99px;background:var(--ambar-luz);color:var(--ambar);
         display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.paso b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.paso small{color:var(--tinta-2);font-size:12.5px;font-weight:500;line-height:1.45}

/* ---------- combos ---------- */
.carrusel{display:flex;gap:14px;overflow-x:auto;margin:0 -20px;padding:4px 20px 8px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.tarjeta{flex:none;width:268px;background:var(--sup);border-radius:var(--r-card);
         overflow:hidden;box-shadow:var(--s2)}
.tarjeta .foto{position:relative;height:132px}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover}
.credito-foto{font-size:11px;color:var(--tinta-3);margin:6px 0 0;font-weight:500}
.tarjeta .precio-flota{position:absolute;right:12px;bottom:-16px;background:var(--sup);
   border-radius:99px;padding:8px 15px;box-shadow:var(--s2);font-size:17px;font-weight:800}
.marca-cinta{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--fondo);
   font-size:11px;font-weight:800;padding:5px 11px;border-radius:99px;letter-spacing:.01em}
.tarjeta .cuerpo{padding:22px 16px 16px}
.tarjeta h4{font-size:16.5px}
.tarjeta .lema{color:var(--tinta-2);font-size:12.5px;font-weight:600;margin-top:2px}
.lista-combo{margin:12px 0 0;display:flex;flex-direction:column;gap:5px}
.lista-combo div{font-size:12.5px;color:var(--tinta-2);font-weight:500;display:flex;gap:7px}
.lista-combo b{color:var(--tinta);font-weight:700;min-width:52px;font-variant-numeric:tabular-nums}

.tarjeta.armar{background:var(--ink);color:var(--fondo)}
.tarjeta.armar .cuerpo{padding:18px 16px 16px}
.tarjeta.armar h4{color:var(--fondo)}
.tarjeta.armar .lema{color:color-mix(in srgb,var(--fondo) 62%,transparent)}
.tarjeta.armar .grande{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:14px 0 2px}
.tarjeta.armar .pie{color:color-mix(in srgb,var(--fondo) 62%,transparent);font-size:12.5px;font-weight:600}

.btn{display:block;width:100%;text-align:center;background:var(--ink);color:var(--fondo);
     border-radius:99px;padding:13px;font-weight:800;font-size:14.5px;margin-top:15px;
     box-shadow:var(--s1);letter-spacing:-.01em}
.btn.claro{background:var(--fondo);color:var(--ink)}
.btn.wa{background:var(--wa);color:#04361A;display:flex;gap:9px;justify-content:center;align-items:center;
        font-size:16px;padding:16px;box-shadow:0 14px 30px -14px rgba(31,193,92,.8)}
.btn[disabled]{background:var(--sup-2);color:var(--tinta-3);box-shadow:none}

/* ---------- categorias ---------- */
.cats{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat-t{flex:none;width:132px;border-radius:20px;overflow:hidden;position:relative;box-shadow:var(--s1)}
.cat-t img{width:100%;height:84px;object-fit:cover}
.cat-t .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,5,.8),rgba(10,7,5,.05))}
.cat-t span{position:absolute;left:12px;bottom:9px;color:#fff;font-weight:800;font-size:13.5px}
.cat-t.on{box-shadow:0 0 0 3px var(--ink)}
.cat-t.on:after{content:'✓';position:absolute;top:8px;right:10px;color:#fff;font-weight:800;font-size:13px}
.cat-t small{position:absolute;left:12px;bottom:-2px;color:rgba(255,255,255,.7);font-size:11px;font-weight:600}

/* ---------- lista de productos ---------- */
.grupo{margin-top:22px;scroll-margin-top:200px}
.grupo-tit{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-size:12px;
           font-weight:800;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.08em}
.grupo-tit i{width:7px;height:7px;border-radius:99px;font-style:normal}
.filas{background:var(--sup);border-radius:var(--r-card);box-shadow:var(--s1);overflow:hidden}
.fila-p{display:flex;align-items:center;gap:12px;padding:14px 16px;position:relative}
.fila-p + .fila-p:before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--linea)}
.fila-p .txt{flex:1;min-width:0}
.fila-p h5{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.fila-p small{color:var(--tinta-2);font-size:12.5px;font-weight:500}
.fila-p .precio{text-align:right;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.fila-p .precio em{display:block;font-style:normal;font-size:11px;color:var(--tinta-3);font-weight:600}
.mas{width:34px;height:34px;border-radius:12px;background:var(--ink);color:var(--fondo);
     font-size:19px;font-weight:600;display:grid;place-items:center;line-height:1;flex:none}
.stepper{display:flex;align-items:center;gap:4px;background:var(--sup-2);border-radius:12px;padding:3px}
.stepper button{width:28px;height:28px;border-radius:9px;background:var(--sup);box-shadow:var(--s1);
                font-size:16px;font-weight:700;display:grid;place-items:center}
.stepper span{font-weight:800;font-size:13px;min-width:42px;text-align:center;
              font-variant-numeric:tabular-nums}
.fila-p.activa{background:color-mix(in srgb,var(--ambar-luz) 55%,transparent)}
.fila-p.bloq{opacity:.38}
.marca-sel{width:20px;height:20px;border-radius:99px;flex:none;
           box-shadow:inset 0 0 0 2px var(--linea)}
.marca-sel.on{background:var(--ink);box-shadow:inset 0 0 0 5px var(--fondo)}

/* ---------- constructor ---------- */
.objetivo{background:var(--ink);color:var(--fondo);border-radius:var(--r-card);padding:20px;
          box-shadow:var(--s3)}
.objetivo .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.objetivo h3{font-size:17px;color:var(--fondo)}
.objetivo .desc{color:color-mix(in srgb,var(--fondo) 60%,transparent);font-size:12.5px;font-weight:500;margin-top:3px}
.objetivo .estado{font-size:11.5px;font-weight:800;background:color-mix(in srgb,var(--fondo) 14%,transparent);
                  padding:6px 11px;border-radius:99px;white-space:nowrap}
.objetivo .estado.ok{background:var(--wa);color:#04361A}
.monto{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.monto b{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1}
.monto small{color:color-mix(in srgb,var(--fondo) 55%,transparent);font-size:13.5px;font-weight:600}
.pista{height:7px;background:color-mix(in srgb,var(--fondo) 16%,transparent);border-radius:99px;margin-top:14px;overflow:hidden}
.pista i{display:block;height:100%;background:var(--ambar);border-radius:99px;transition:width .3s ease}
.pista.ok i{background:var(--wa)}
.falta{margin-top:10px;font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--fondo) 72%,transparent)}
.reqs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
      border-top:1px solid color-mix(in srgb,var(--fondo) 12%,transparent)}
.req{display:flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--fondo) 9%,transparent);border-radius:99px;
     padding:7px 12px;font-size:12px;font-weight:700}
a.req{color:inherit;text-decoration:none}
.req.ok{background:color-mix(in srgb,var(--wa) 18%,transparent);color:var(--wa-txt)}
.req i{width:6px;height:6px;border-radius:99px;font-style:normal;background:var(--ambar)}
.req.ok i{background:var(--wa)}
.req.exceso{background:color-mix(in srgb,var(--proteina) 30%,transparent)}
.req.exceso i{background:var(--proteina)}

.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:var(--sup);border-radius:99px;padding:9px 15px;font-size:13px;
      font-weight:700;box-shadow:var(--s1);white-space:nowrap}
.chip.on{background:var(--ink);color:var(--fondo)}

/* ---------- carrito ---------- */
.linea{background:var(--sup);border-radius:22px;padding:16px;margin-bottom:12px;box-shadow:var(--s1)}
.linea .cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.linea h5{font-size:15px}
.linea .tipo{font-size:11px;font-weight:800;color:var(--tinta-2);text-transform:uppercase;
             letter-spacing:.07em;margin-bottom:5px}
.linea .imp{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.linea .det{margin-top:11px;display:flex;flex-direction:column;gap:4px}
.linea .det div{font-size:12.5px;color:var(--tinta-2);font-weight:500;display:flex;gap:8px}
.linea .det b{color:var(--tinta);font-weight:700;min-width:52px;font-variant-numeric:tabular-nums}
/* Quitar se ve (antes era un gris de 12 px): rojo suave, papelera y 36 px de alto. */
.quitar{margin-top:12px;display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px;
        font-weight:700;color:#B23B2C;background:color-mix(in srgb,#B23B2C 9%,transparent);
        border-radius:99px;padding:7px 14px}
.quitar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
        stroke-linejoin:round}

.resumen{background:var(--sup);border-radius:var(--r-card);padding:18px;box-shadow:var(--s1)}
.fila{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;
      color:var(--tinta-2);font-weight:600}
.fila.total{border-top:1px solid var(--linea);margin-top:9px;padding-top:14px;color:var(--tinta);
            font-size:19px;font-weight:800}
.fila.total b{font-variant-numeric:tabular-nums}

.form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.campo{background:var(--sup);border-radius:var(--r-ctl);padding:11px 15px;box-shadow:var(--s1)}
.campo label{display:block;font-size:10.5px;color:var(--tinta-3);font-weight:800;
             text-transform:uppercase;letter-spacing:.08em}
.campo .valor{font-size:14.5px;margin-top:2px;font-weight:600}
.campo .valor.ph{color:var(--tinta-3);font-weight:500}

.aviso{display:flex;gap:11px;background:var(--sup);border-radius:20px;padding:15px 16px;
       margin-top:14px;box-shadow:var(--s1)}
.aviso .ico{width:30px;height:30px;border-radius:10px;background:var(--ambar-luz);color:var(--ambar);
            display:grid;place-items:center;font-weight:800;flex:none;font-size:14px}
.aviso b{display:block;font-size:13.5px;font-weight:700}
.aviso small{color:var(--tinta-2);font-size:12.5px;font-weight:500;line-height:1.45}

.wa-fondo{background:var(--sup-2);border-radius:var(--r-card);padding:16px;margin-top:6px}
.wa-burbuja{background:#DCF8C6;color:#0B2E18;border-radius:16px 16px 5px 16px;padding:14px 15px;
            font-size:12.5px;line-height:1.55;white-space:pre-wrap;
            box-shadow:0 2px 6px rgba(0,0,0,.08);font-family:'SFMono-Regular',Menlo,Consolas,monospace}
.wa-meta{text-align:right;font-size:10.5px;color:var(--tinta-3);margin-top:6px;font-weight:600}

/* ---------- codigo y consulta ---------- */
.exito{background:var(--ink);color:var(--fondo);border-radius:var(--r-card);padding:26px 22px;
       text-align:center;box-shadow:var(--s3)}
.marca-ok{width:52px;height:52px;border-radius:99px;background:var(--wa);color:#04361A;
          display:grid;place-items:center;font-size:26px;font-weight:800;margin:0 auto 14px}
.exito h2{font-size:21px;color:var(--fondo)}
.oficiales .of-aviso b{color:var(--tinta)}
.exito p{font-size:13.5px;color:color-mix(in srgb,var(--fondo) 62%,transparent);
         font-weight:500;margin:8px auto 0;max-width:30ch}
.codigo-grande{font-size:25px;font-weight:800;letter-spacing:.06em;margin:18px 0 4px;
               font-variant-numeric:tabular-nums;font-family:'SFMono-Regular',Menlo,monospace}

.caja-cod{display:flex;gap:10px;align-items:stretch}
.caja-cod input{flex:1;min-width:0;background:var(--sup);border:0;border-radius:var(--r-ctl);
                padding:15px 16px;font-size:19px;font-weight:800;letter-spacing:.06em;
                box-shadow:var(--s1);font-variant-numeric:tabular-nums;
                font-family:'SFMono-Regular',Menlo,monospace;color:var(--tinta);outline:none}
.caja-cod input::placeholder{color:var(--tinta-3);font-weight:600}
.caja-cod .btn{margin:0;width:auto;padding:0 22px;flex:none}
.pista-cod{font-size:12.5px;color:var(--tinta-2);font-weight:600;margin:10px 2px 0}

.res{background:var(--sup);border-radius:var(--r-card);padding:22px;margin-top:20px;
     box-shadow:var(--s2)}
.res-cod{font-size:15px;font-weight:800;letter-spacing:.05em;color:var(--tinta-2);
         font-family:'SFMono-Regular',Menlo,monospace}
.res-estado{display:inline-block;background:var(--ambar-luz);color:#8A5B00;border-radius:99px;
            padding:8px 18px;font-size:16px;font-weight:800;margin:12px 0 10px}
.res-estado.cerrado{background:var(--sup-2);color:var(--tinta-2)}
.res-dato{font-size:13.5px;color:var(--tinta-2);font-weight:600}
.res-detalle{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea);
             display:flex;flex-direction:column;gap:7px}
.res-detalle div{display:flex;gap:10px;font-size:13px;color:var(--tinta-2);font-weight:500}
.res-detalle b{color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.sub-linea{font-size:11.5px;color:var(--tinta-3);font-weight:500;margin:-4px 0 4px;display:block}
.res-detalle em{margin-left:auto;font-style:normal;font-weight:700;color:var(--tinta);
                font-variant-numeric:tabular-nums}
.res-total{border-top:1px solid var(--linea);margin-top:9px;padding-top:12px;
           font-size:17px !important;font-weight:800;color:var(--tinta) !important}
.res-total b{margin-left:auto;min-width:0 !important}
.segundo{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.segundo label{font-size:11px;font-weight:800;color:var(--tinta-3);text-transform:uppercase;
               letter-spacing:.08em;display:block;margin-bottom:9px}
.segundo small{display:block;font-size:12px;color:var(--tinta-2);font-weight:500;margin-top:9px}
.cuatro{display:flex;gap:10px}
.cuatro input{width:110px;background:var(--sup-2);border:0;border-radius:var(--r-ctl);
              padding:13px 16px;font-size:19px;font-weight:800;letter-spacing:.14em;
              text-align:center;color:var(--tinta);outline:none;
              font-variant-numeric:tabular-nums}
.error{margin-top:11px;font-size:12.5px;font-weight:700;color:#B23B2C}
.franja{margin-top:18px;background:var(--ambar-luz);border-radius:14px;padding:13px 15px;
        font-size:12px;color:#7A5200;font-weight:600;line-height:1.5}
.res.vacia{text-align:center}
.res.vacia b{font-size:15.5px;display:block}
.res.vacia p{font-size:13.5px;color:var(--tinta-2);font-weight:500;margin:9px auto 0;max-width:34ch}
.enlace-consulta{display:flex;align-items:center;gap:10px;background:var(--sup);
                 border-radius:var(--r-card);padding:16px 18px;box-shadow:var(--s1);
                 margin-top:22px;cursor:pointer}
.enlace-consulta b{font-size:14px;font-weight:700;display:block}
.enlace-consulta small{font-size:12.5px;color:var(--tinta-2);font-weight:500}
.enlace-consulta .ir{margin-left:auto;font-size:17px;color:var(--tinta-3)}

/* ---------- numeros oficiales ---------- */
.oficiales{background:var(--sup);border-radius:var(--r-card);padding:18px;margin-top:22px;
           box-shadow:var(--s1)}
.of-tit{font-size:11px;font-weight:800;color:var(--tinta-3);text-transform:uppercase;
        letter-spacing:.09em;margin-bottom:12px}
.of-fila{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linea)}
.of-fila:nth-of-type(2){border-top:0}
.of-fila b{font-size:16px;font-weight:800;display:block;font-variant-numeric:tabular-nums}
.of-fila small{font-size:12px;color:var(--tinta-2);font-weight:600}
.of-ok{margin-left:auto;background:color-mix(in srgb,var(--wa) 16%,transparent);color:#0E5A34;
       border-radius:99px;padding:5px 11px;font-size:11.5px;font-weight:800;white-space:nowrap}
.of-aviso{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);
          font-size:12.5px;color:var(--tinta-2);font-weight:500;line-height:1.5}

/* ---------- navegacion ---------- */
.barra-inf{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;padding:8px 10px 12px;
   background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:blur(14px);
   border-top:1px solid var(--linea)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;
     font-weight:700;color:var(--tinta-3);position:relative;padding:4px 2px}
.tab .i{width:22px;height:22px}
.tab .i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
            stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--tinta)}
.globo{position:absolute;top:0;right:50%;transform:translateX(20px);background:var(--ambar);
       color:#3B2A00;font-size:10px;font-weight:800;border-radius:99px;padding:1px 6px}

.flotante{position:fixed;left:0;right:0;bottom:76px;z-index:35;padding:26px 20px 12px;
  background:linear-gradient(to bottom,transparent 0%,var(--fondo) 42%)}
.oculto{display:none !important}
.vacio{text-align:center;padding:70px 24px;color:var(--tinta-2)}
.vacio h2{font-size:19px;color:var(--tinta);margin:14px 0 6px}
.vacio p{font-size:14px;font-weight:500;margin:0}

/* ---------- sin estilos en linea: lo que el prototipo hacia con style="" ---------- */
.pista i.p-0{width:0}.pista i.p-5{width:5%}.pista i.p-10{width:10%}.pista i.p-15{width:15%}
.pista i.p-20{width:20%}.pista i.p-25{width:25%}.pista i.p-30{width:30%}.pista i.p-35{width:35%}
.pista i.p-40{width:40%}.pista i.p-45{width:45%}.pista i.p-50{width:50%}.pista i.p-55{width:55%}
.pista i.p-60{width:60%}.pista i.p-65{width:65%}.pista i.p-70{width:70%}.pista i.p-75{width:75%}
.pista i.p-80{width:80%}.pista i.p-85{width:85%}.pista i.p-90{width:90%}.pista i.p-95{width:95%}
.pista i.p-100{width:100%}
.c-0{background:var(--proteina)}.c-1{background:var(--granos)}.c-2{background:var(--despensa)}
.c-3{background:var(--ambar)}
/* Categorias sin foto: botones delgados, no bloques de 84 px que empujan los productos. */
.cat-t.texto{width:auto;height:40px;border-radius:99px;background:var(--sup);display:flex;align-items:center;
  padding:0 16px}
.cat-t.texto span{position:static;color:var(--tinta);font-size:13.5px}
.cat-t.texto.on{background:var(--ink);box-shadow:none}
.cat-t.texto.on span{color:var(--fondo)}
.cat-t.texto.on:after{position:static;margin-left:7px;color:var(--fondo)}
.tarjeta .foto.texto{background:var(--sup-2);display:flex;align-items:flex-end;padding:14px 16px 24px}
.tarjeta .foto.texto b{font-size:12px;font-weight:800;color:var(--tinta-3);text-transform:uppercase;
  letter-spacing:.09em}
.hero.texto{background:var(--ink);min-height:230px;display:flex;align-items:flex-end}
.hero.texto .txt{position:static}
.tarjeta.armar .marca-cinta{position:static;display:inline-block;background:var(--ambar);color:#3B2A00}
.tarjeta.armar h4{margin-top:16px}
.seccion.primera{margin-top:16px}
.btn.chico{max-width:240px;margin:20px auto 0}
.btn.wa.sep-arriba{margin-top:14px}
.wa-burbuja{white-space:pre-wrap}
.pedido-linea{margin-top:16px}
.marca-cinta.alerta{background:var(--proteina);color:#fff}
.form-error{background:var(--sup);border-radius:var(--r-ctl);padding:11px 15px;color:#B23B2C;
  font-weight:700;font-size:13px;margin-top:10px}
.pie-sitio .of-pie{font-size:11.5px;color:var(--tinta-3);font-weight:600;text-align:center;margin-top:14px}
.top.escritorio-nav{display:none}
@media (min-width:900px){
  .top,.wrap,.flotante>*{max-width:760px;margin-left:auto;margin-right:auto}
  .barra-inf{left:50%;right:auto;width:760px;transform:translateX(-50%);border-radius:22px 22px 0 0}
}
/* La portada sin foto invierte con el tema, como el resto de bloques de tinta */
.hero.texto h3{color:var(--fondo)}
.hero.texto p{color:color-mix(in srgb,var(--fondo) 72%,transparent)}
.hero.texto .insignia{color:var(--fondo);background:color-mix(in srgb,var(--fondo) 12%,transparent);
  border-color:color-mix(in srgb,var(--fondo) 22%,transparent);backdrop-filter:none}
.monto-b.otro{display:flex;align-items:center;gap:6px}
.monto-b.otro input{width:72px;background:none;border:0;color:inherit;font:inherit;font-weight:800;
  text-align:right;outline:none;padding:0;-moz-appearance:textfield}
.monto-b.otro input::-webkit-inner-spin-button{display:none}

/* Auditoria etapa 6 (M7): contraste en oscuro y objetivos tactiles mas grandes */
.of-ok{color:#0E5A34}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .of-ok{color:var(--wa-txt);background:color-mix(in srgb,var(--wa) 22%,transparent)}}
.mas{width:40px;height:40px}
.stepper button{width:34px;height:34px}
.fila-p[aria-current="true"] .marca-sel{background:var(--ink);box-shadow:inset 0 0 0 5px var(--fondo)}

/* Combo armado que ya no cumple (pendientes §31) */
.linea.caido{box-shadow:0 0 0 2px color-mix(in srgb,var(--proteina) 45%,transparent)}
.linea .acciones{display:flex;gap:10px;align-items:center;margin-top:12px}
.linea .acciones .quitar{margin-top:0}
.btn.chico-inline{width:auto;padding:8px 16px;font-size:13px;margin:0}

/* Seguimiento del pedido (fase 2) y enlace dentro de la calculadora */
.pasos-estado{display:flex;gap:6px;list-style:none;margin:10px 0 0;padding:0;flex-wrap:wrap}
.pasos-estado li{font-size:11px;font-weight:700;padding:5px 10px;border-radius:99px;background:var(--sup-2);color:var(--tinta-3)}
.pasos-estado li.hecho{background:color-mix(in srgb,var(--wa) 18%,transparent);color:#0E5A34}
.pasos-estado li.actual{background:var(--ambar-luz);color:#8A5B00}
.pasos-estado li.cancelado{background:color-mix(in srgb,var(--proteina) 18%,transparent);color:var(--proteina)}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .pasos-estado li.hecho{color:var(--wa-txt)}}
.enlace-calc{color:inherit;border-top:1px solid color-mix(in srgb,var(--fondo) 14%,transparent)}

/* Fase 3: precio de campaña y cupon */
.fila-p .precio em.antes{color:var(--proteina)}
.fila-p .precio em.antes s{color:var(--tinta-3)}
.cupon{display:flex;gap:8px;margin:14px 0 12px}
.cupon input{flex:1;min-width:0;background:var(--sup);border:0;border-radius:var(--r-ctl);padding:11px 14px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--s1);color:var(--tinta)}
.cupon-activo{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--ambar-luz);
  border-radius:var(--r-ctl);padding:9px 14px;font-size:13.5px}
.cupon-activo .quitar{margin:0}
.fila.descuento{color:var(--despensa)}
/* Fase 3: enlaces a la pagina de cada combo */
.tarjeta h4 a,.linea h5 a{color:inherit;text-decoration:none}
.tarjeta h4 a:hover,.linea h5 a:hover{text-decoration:underline}
/* Marca: La Bodeguita de Hermes (logo propio, sin fondo del token --ink que se invierte en oscuro) */
img.logo{background:none;display:block;border-radius:11px;box-shadow:0 0 0 1px color-mix(in srgb,var(--tinta) 10%,transparent)}
.aviso-demo{background:var(--ambar,#E3A21A);color:#1C1713;font-size:12.5px;font-weight:700;text-align:center;padding:7px 16px;line-height:1.35}

/* ---------- movil: lo importante arriba ---------- */
/* Al bajar, el logo se va con la pagina y quedan fijos el buscador y la cinta. */
.top:has(.top-fila){top:-60px}  /* 72 px hasta el buscador, menos 12 de aire */
.top-fila>div{min-width:0}
.top .lugar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.top .lugar .punto{display:inline-block;vertical-align:middle;margin:-2px 5px 0 0}
/* Buscando (con foco o con texto) la fila del logo desaparece: los resultados suben. */
.top:has(#q:focus),.top:has(#q:not(:placeholder-shown)){top:0}
.top:has(#q:focus) .top-fila,.top:has(#q:not(:placeholder-shown)) .top-fila{display:none}
.top:has(#q:focus) .buscar,.top:has(#q:not(:placeholder-shown)) .buscar{margin-top:0}
.resultados-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 2px 12px;
  font-size:13px;font-weight:700;color:var(--tinta-2)}
.resultados-cab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resultados-cab a{flex:none;background:var(--sup);box-shadow:var(--s1);border-radius:99px;padding:8px 14px;
  color:var(--tinta);text-decoration:none}
.linea-foto{display:block;margin:-16px -16px 12px;height:150px;border-radius:22px 22px 0 0;overflow:hidden}
.linea-foto img{width:100%;height:100%;object-fit:cover}
.linea .credito-foto{margin:-6px 0 10px}
@media (max-width:420px){
  .hero.texto{min-height:0}
  .hero.texto .txt{padding:18px}
  .hero h3{font-size:21px}
  .hero p{font-size:13px}
  .insignias{gap:6px;margin-top:12px}
  .insignia{font-size:11px;padding:4px 9px}
}

/* ---------- carrito: cambiar y quitar sin miedo ---------- */
.linea .acciones .a-la-derecha{margin-left:auto}
.btn-sec{min-height:36px;padding:7px 14px;border-radius:99px;background:var(--sup-2);color:var(--tinta);
  font-size:13px;font-weight:700}
.deshacer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  background:var(--ink);color:var(--fondo);border-radius:var(--r-ctl);padding:10px 10px 10px 16px;
  font-size:13.5px;font-weight:600;box-shadow:var(--s2)}
.deshacer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deshacer button{flex:none;background:var(--ambar);color:#3B2A00;border-radius:99px;padding:8px 14px;
  font-weight:800;font-size:13px;min-height:36px}
.seguir{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.seguir a{font-weight:700;font-size:13.5px;color:var(--tinta)}
.vaciar{font-size:13px;font-weight:700;color:var(--tinta-2);min-height:36px;padding:7px 4px;
  text-decoration:underline;text-underline-offset:3px}
.objetivo .empezar{margin-top:12px;text-align:right}
.objetivo .empezar button{font-size:12.5px;font-weight:700;color:inherit;opacity:.75;min-height:32px;
  text-decoration:underline;text-underline-offset:3px}
.enlace-sec{display:inline-flex;align-items:center;margin-top:10px;text-decoration:none}