/* Wapi — sistema "Aire suave": luminoso, profesional, con firma propia.
   Firma visual: esquinas asimétricas (3 redondas + 1 chica) en todos los elementos.
   El color de marca (--marca y derivados) lo define cada comercio; estos son los default Wapi. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --marca:#0F9D68;
  --marca-oscura:rgb(11,113,75);
  --marca-viva:#24C486;
  --marca-clara:rgb(226,245,236);
  --marca-menta:rgb(183,235,212);
  --marca-glow:rgba(15,157,104,.10);
  --marca-sombra:rgba(15,157,104,.25);
  --marca-sombra-fuerte:rgba(15,157,104,.32);
  --acento:#E8437A; --coral:#E8437A; --amarillo:#FFC53D;
  --fondo:#FCF7EC; --tinta:#14231B; --gris:#6B6552; --gris-claro:#B3A98F; --blanco:#FFFFFF; --rojo:#D94A38;
  --r:20px 20px 20px 8px;        /* radio firma */
  --r-ch:13px 13px 13px 5px;     /* radio firma chico */
  --sombra-suave:0 10px 26px rgba(20,35,27,.08);
  --sombra-mini:0 3px 10px rgba(20,35,27,.05);
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
}
body{font-family:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;background:var(--fondo);color:var(--tinta);line-height:1.5}
a{color:var(--marca);text-decoration:none}
.container{max-width:1020px;margin:0 auto;padding:0 18px}

/* ---------- header ---------- */
header.top{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid #E7EDE7;padding:13px 0;position:sticky;top:0;z-index:40}
header.top .container{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{font-family:var(--display);font-size:1.45rem;font-weight:700;color:var(--marca);letter-spacing:-.5px}
.logo span{color:var(--tinta)}

/* ---------- tipografía ---------- */
h1{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;letter-spacing:-.6px;line-height:1.1;margin:26px 0 6px}
h2{font-family:var(--display);font-size:1.2rem;font-weight:600;letter-spacing:-.3px;margin:26px 0 12px}
.sub{color:var(--gris);margin-bottom:16px;max-width:640px}
.overline{font-size:.68rem;letter-spacing:1.8px;color:var(--marca);font-weight:700;text-transform:uppercase}

/* ---------- fichas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;margin:16px 0 26px}
.card{background:var(--blanco);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sombra-suave);transition:transform .15s, box-shadow .15s;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,35,27,.12)}
.card img{width:100%;height:150px;object-fit:cover;background:var(--marca-clara)}
.card .sin-foto{width:100%;height:150px;background:linear-gradient(150deg,var(--marca-clara),var(--marca-menta));
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--marca);opacity:.85}
.card .body{padding:13px 14px 14px;flex:1;display:flex;flex-direction:column;gap:6px}
.card .nombre{font-weight:600;font-size:.95rem;letter-spacing:-.2px;line-height:1.25;color:var(--tinta)}
.card .desc{font-size:.82rem;color:var(--gris);flex:1}
.precio{font-weight:700;font-size:1.1rem;letter-spacing:-.3px}
.precio.oferta{color:var(--marca)}
.precio .antes{color:var(--gris-claro);text-decoration:line-through;font-weight:400;font-size:.8rem;display:block;line-height:1}
.badge{position:absolute;top:10px;left:10px;background:var(--tinta);color:var(--marca-menta);font-size:.7rem;font-weight:700;
  padding:4px 11px;border-radius:9px 9px 9px 3px;z-index:2}
.badge.rojo{background:var(--tinta);color:var(--marca-menta)}
.fila-precio{display:flex;align-items:center;justify-content:space-between;gap:8px}
.btn-mas{width:36px;height:36px;border-radius:12px 12px 12px 5px;background:var(--marca-clara);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--marca);font-size:1.25rem;font-weight:700;flex-shrink:0;
  transition:background .12s}
.btn-mas:hover{background:var(--marca-menta)}

/* ---------- rail horizontal (ofertas) ---------- */
.rail{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none;margin:0 0 6px}
.rail::-webkit-scrollbar{display:none}
.rail .card{width:200px;flex-shrink:0}
.rail .card img,.rail .card .sin-foto{height:112px}

/* ---------- chips de categorías ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:9px 17px;border-radius:var(--r-ch);background:var(--blanco);color:#46554B;font-size:.85rem;font-weight:500;
  box-shadow:var(--sombra-mini);cursor:pointer;white-space:nowrap;border:none;font-family:inherit;transition:background .12s}
.chip.activo{background:var(--marca);color:#fff;font-weight:600}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--marca);color:#fff;border:none;border-radius:var(--r-ch);
  padding:11px 20px;font-size:.92rem;font-weight:600;cursor:pointer;text-align:center;font-family:inherit;
  box-shadow:0 6px 16px var(--marca-sombra);transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px var(--marca-sombra)}
.btn.sec{background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra-mini)}
.btn.chico{padding:7px 14px;font-size:.82rem}
.btn.rojo{background:var(--rojo);box-shadow:0 6px 16px rgba(217,74,56,.25)}
.btn:disabled{opacity:.55;cursor:default;transform:none}

/* ---------- formularios ---------- */
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid #E2E8E2;border-radius:var(--r-ch);font-size:.95rem;
  background:var(--blanco);font-family:inherit;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-clara)}
input[type=color]{padding:4px;height:46px;cursor:pointer}
label{font-size:.8rem;font-weight:600;display:block;margin:13px 0 5px;color:#3C4A41}
form.inline{display:inline}

/* ---------- panel ---------- */
.panel-nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.panel-nav a{padding:8px 15px;border-radius:var(--r-ch);background:var(--blanco);font-size:.85rem;font-weight:600;color:#46554B;box-shadow:var(--sombra-mini)}
.panel-nav a.activo{background:var(--marca);color:#fff}
table{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:var(--r);overflow:hidden;font-size:.9rem;box-shadow:var(--sombra-suave)}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid #EEF2EE}
th{background:#FAFCFA;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--gris)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin:16px 0}
.stat{background:var(--blanco);border-radius:var(--r);padding:18px;box-shadow:var(--sombra-suave)}
.stat .num{font-family:var(--display);font-size:1.7rem;font-weight:700;letter-spacing:-.5px}
.stat .lbl{font-size:.78rem;color:var(--gris)}
.aviso{background:var(--marca-clara);border-radius:var(--r-ch);padding:13px 17px;margin:13px 0;font-size:.9rem;color:var(--marca-oscura)}
.aviso.error{background:#FBE9E5;color:#8C2F22}
.caja{background:var(--blanco);border-radius:var(--r);box-shadow:var(--sombra-suave);padding:22px;margin:16px 0}
.centrado{max-width:420px;margin:7vh auto}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- estados de pedido ---------- */
.estado{font-size:.7rem;font-weight:700;padding:3px 11px;border-radius:99px;text-transform:uppercase;letter-spacing:.8px}
.estado.nuevo{background:#FFF0C2;color:#7A5D00}
.estado.confirmado{background:#D8EBFC;color:#1F5E93}
.estado.listo{background:var(--marca-clara);color:var(--marca-oscura)}
.estado.entregado{background:#EAEEEA;color:var(--gris)}
.estado.cancelado{background:#FBE9E5;color:#8C2F22}

/* ---------- tienda: cabecera de identidad ---------- */
.tienda-head{padding:26px 0 0;display:flex;align-items:center;gap:14px;position:relative}
.tienda-logo{width:56px;height:56px;border-radius:var(--r);background:linear-gradient(150deg,var(--marca),var(--marca-viva));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 20px var(--marca-sombra);
  font-family:var(--display);font-size:1.5rem;font-weight:700;color:#fff;overflow:hidden}
.tienda-logo img{width:100%;height:100%;object-fit:cover}
.tienda-nombre{font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.4px;line-height:1.1}
.tienda-estado{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--gris);font-weight:500;margin-top:3px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--marca-viva);flex-shrink:0}
.punto.cerrado{background:var(--gris-claro)}
.btn-wa{width:46px;height:46px;border-radius:16px 16px 16px 6px;background:var(--tinta);display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 18px rgba(20,35,27,.22);flex-shrink:0}
.buscador{margin:16px 0 4px;background:var(--blanco);border-radius:var(--r-ch);padding:12px 16px;display:flex;align-items:center;
  gap:10px;box-shadow:var(--sombra-mini)}
.buscador input{border:none;padding:0;box-shadow:none;font-size:.92rem;background:transparent}
.buscador input:focus{box-shadow:none}

/* ---------- tienda: barra de pedido ---------- */
.barra-zona{position:fixed;left:0;right:0;bottom:0;padding:0 18px 18px;z-index:50;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none}
.chip-envio{background:var(--blanco);border-radius:99px;padding:6px 16px;font-size:.78rem;color:var(--gris);font-weight:500;
  box-shadow:var(--sombra-suave)}
#carrito-btn{pointer-events:auto;width:100%;max-width:560px;background:linear-gradient(150deg,var(--marca),var(--marca-oscura));
  border:none;border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;box-shadow:0 16px 32px var(--marca-sombra-fuerte);font-family:inherit;color:#fff}
#carrito-btn .cuenta{width:27px;height:27px;border-radius:10px 10px 10px 4px;background:rgba(255,255,255,.18);
  font-size:.85rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-right:11px}
#carrito-btn .ver{font-size:.95rem;font-weight:600}
#carrito-btn .total{font-size:1.05rem;font-weight:700;letter-spacing:-.3px}
#carrito-panel{position:fixed;inset:0;background:rgba(20,35,27,.45);display:none;z-index:60}
#carrito-panel.abierto{display:flex;justify-content:flex-end}
#carrito-panel .contenido{background:var(--fondo);width:100%;max-width:440px;height:100%;padding:24px 22px;overflow-y:auto}
.item-carrito{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #E5EBE5;gap:8px}
.cant{display:flex;align-items:center;gap:9px;font-weight:600}
.cant button{width:30px;height:30px;border-radius:10px 10px 10px 4px;border:none;background:var(--blanco);cursor:pointer;
  font-weight:700;font-family:inherit;box-shadow:var(--sombra-mini);color:var(--tinta);font-size:1rem}

/* ---------- mascota Charlo ---------- */
/* tamaño con font-size en el elemento (1em = mitad del ancho) */
.mascota{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.12em;
  width:2em;height:2em;border-radius:.68em .68em .68em .22em;flex-shrink:0;
  background:linear-gradient(150deg,#24C486,#0F9D68);box-shadow:0 .18em .45em rgba(15,157,104,.35)}
.m-ojos{display:flex;gap:.28em}
.m-ojo{width:.4em;height:.46em;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.m-pupila{width:.18em;height:.2em;border-radius:50%;background:#14231B;margin-top:.05em}
.m-boca{width:.62em;height:.28em}
.mascota-anim{animation:mascota-flota 3.4s ease-in-out infinite}
.mascota-anim .m-ojo{animation:mascota-parpadeo 4.6s ease-in-out infinite;transform-origin:center}
@keyframes mascota-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-.12em)}}
@keyframes mascota-parpadeo{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}

/* puntitos "escribiendo..." */
.tipeo{display:inline-flex;gap:.3em;align-items:center}
.tipeo span{width:.5em;height:.5em;border-radius:50%;background:var(--marca);animation:tipeo-salto 1.25s ease-in-out infinite}
.tipeo span:nth-child(2){animation-delay:.15s;opacity:.8}
.tipeo span:nth-child(3){animation-delay:.3s;opacity:.6}
@keyframes tipeo-salto{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-.35em)}}

/* ---------- micro-interacciones ---------- */
.btn,.btn-mas,.chip{transition:transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .13s, background .13s}
.btn:active{transform:scale(.96)}
.btn-mas:active{transform:scale(.82)}
.chip:active{transform:scale(.94)}
.barra-zona{animation:barra-sube .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes barra-sube{from{transform:translateY(90px);opacity:0}to{transform:translateY(0);opacity:1}}
.card{animation:card-entra .3s ease-out}
@keyframes card-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.pop{animation:pop .35s cubic-bezier(.34,1.56,.64,1)}

@media (prefers-reduced-motion: reduce){
  .mascota-anim,.mascota-anim .m-ojo,.tipeo span,.barra-zona,.card,.pop{animation:none}
  .btn,.btn-mas,.chip,.card{transition:none}
}

footer{margin:56px 0 110px;text-align:center;color:var(--gris-claro);font-size:.82rem}
@media(max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card img,.card .sin-foto{height:112px}
  .card .body{padding:10px 11px 12px}
  .rail .card{width:180px}
}