/* Carrito de Gas Combustibles — el NARANJA Primax manda; el azul marino es
   complemento (tinta, pie, detalles). Un solo mundo visual, sin tema oscuro:
   invertir tokens de marca dejaba la tarjeta destacada ilegible. */
:root{
  --naranja:#F86500; --brasa:#FF8A2B; --fuego:#D34E00;
  --nata:#FFF1E4; --crema:#FFF8F2;
  --azul:#011536;                    /* complemento, no base */
  --tinta:#011536; --tinta-2:#4a5c78; --papel:#FFF8F2; --blanco:#fff;
  --llama:#F86500; --llama-2:#FF8A2B; --gris:#8a7466; --linea:#F2DFCD;
  --verde:#1FAA59; --verde-2:#17904a;
  --marca:#F86500;                   /* la tarjeta estrella es NARANJA */
  --sombra:0 1px 2px rgba(1,21,54,.05),0 10px 30px rgba(1,21,54,.09);
}


/* ---------- rejilla de productos ----------
   Las tarjetas NO son cajas con borde y sombra: el único contenedor es el
   panel cálido de la foto. El texto vive sobre el papel de la página. */
.gc-grid{display:grid;gap:1.4rem 1.1rem;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}
.gc-cat{margin:2.6rem 0 1.1rem;font-size:1.55rem;letter-spacing:-.035em;
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;color:var(--azul)}
.gc-cat:first-child{margin-top:0}

.gc-card{background:none;border:0;border-radius:0;padding:0;
  display:flex;flex-direction:column;gap:.55rem}

.gc-foto{aspect-ratio:1;background:var(--nata);border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:.6rem}
.gc-foto img{width:100%;height:100%;object-fit:contain;display:block}

/* Producto sin ficha todavía: el panel se mantiene para no romper la fila,
   con la llama de la marca en muy bajo contraste. */
.gc-foto-vacia{background:
  radial-gradient(circle at 50% 45%, rgba(248,101,0,.13), rgba(248,101,0,0) 62%),
  var(--nata)}

.gc-card h3{margin:.15rem 0 0;font-size:1.02rem;line-height:1.2;color:var(--azul);
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
.gc-card .gc-incluye{margin:0;font-size:.82rem;color:var(--gris);line-height:1.45}

.gc-precio{display:flex;align-items:baseline;gap:.4rem;margin-top:auto;flex-wrap:wrap}
.gc-precio b{font-size:1.7rem;letter-spacing:-.045em;color:var(--fuego);
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-variant-numeric:tabular-nums}
.gc-precio span{font-size:.78rem;color:var(--gris)}
.gc-precio .gc-consultar{font-size:.9rem;font-weight:700;color:var(--fuego)}

/* La estrella es un bloque NARANJA macizo: la jerarquía la hace el color. */
.gc-destacada{grid-column:span 2;background:var(--naranja);color:#fff;
  border-radius:22px;padding:1.25rem}
.gc-destacada h3{color:#fff;font-size:1.6rem;margin:0}
.gc-destacada .gc-incluye{color:rgba(255,255,255,.82)}
.gc-destacada .gc-precio b{font-size:2.6rem;color:#fff}
.gc-destacada .gc-precio span{color:rgba(255,255,255,.85)}
.gc-destacada .gc-foto{background:rgba(255,255,255,.92)}
.gc-destacada .gc-modo{background:rgba(0,0,0,.16)}
.gc-destacada .gc-modo button{color:rgba(255,255,255,.8)}
.gc-destacada .gc-modo button[aria-pressed="true"]{background:#fff;color:var(--fuego);
  box-shadow:none}
.gc-destacada .gc-add{background:var(--azul)}
.gc-destacada .gc-add.gc-puesto{background:var(--verde)}
.gc-destacada .gc-add:hover{background:#0a2148;filter:none}
@media (min-width:34rem){
  .gc-destacada{display:grid;grid-template-columns:12rem minmax(0,1fr);
    column-gap:1.4rem;row-gap:.55rem;align-content:center}
  .gc-destacada > *{grid-column:2}
  .gc-destacada .gc-foto{grid-column:1;grid-row:1/-1;align-self:center;aspect-ratio:1}
}
@media (max-width:34rem){ .gc-destacada{grid-column:span 1} }


/* ---------- móvil: carrusel, no rejilla ----------
   Pedido del dueño: que se sienta movimiento y que invite a explorar (Temu).
   Deslizar con snap muestra que hay más productos sin ocupar pantalla. */
@media (max-width:56rem){
  .gc-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:.8rem;padding:.2rem 1.15rem .8rem;margin-inline:-1.15rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-padding-left:1.15rem}
  .gc-grid::-webkit-scrollbar{display:none}
  .gc-grid > *{flex:0 0 66%;scroll-snap-align:start}
  .gc-destacada{flex-basis:88%;grid-column:auto}
  /* El empujón inicial: la primera tarjeta asoma la siguiente y vuelve. */
  .gc-grid[data-guino="1"]{animation:gc-guino 1.15s ease-in-out .45s 1}
  @keyframes gc-guino{
    0%{transform:translateX(0)} 42%{transform:translateX(-2.4rem)}
    100%{transform:translateX(0)}
  }
}
@media (prefers-reduced-motion:reduce){
  .gc-grid[data-guino="1"]{animation:none}
}

/* Presión al tocar: respuesta a la acción, no adorno. */
.gc-card{transition:transform .16s ease}
.gc-card:active{transform:scale(.985)}

/* canje / balón completo */
.gc-modo{display:flex;gap:.35rem;background:var(--nata);border-radius:10px;padding:.25rem}
.gc-modo button{flex:1;border:0;background:none;border-radius:8px;padding:.45rem .3rem;
  font:inherit;font-size:.8rem;color:var(--gris);cursor:pointer;line-height:1.25}
.gc-modo button[aria-pressed="true"]{background:var(--blanco);color:var(--tinta);
  font-weight:700;box-shadow:0 1px 3px rgba(13,27,42,.12)}

.gc-add{border:0;border-radius:11px;background:var(--azul);color:#fff;
  padding:.7rem 1rem;font:inherit;font-weight:700;cursor:pointer;transition:filter .15s}
.gc-add:hover{background:#0a2148;filter:none}
.gc-add:disabled{background:var(--linea);color:var(--gris);cursor:not-allowed}
.gc-add.gc-puesto{background:var(--verde)}

/* ---------- barra flotante ---------- */
.gc-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--marca);color:#fff;padding:.7rem 1rem;
  display:flex;align-items:center;gap:1rem;
  transform:translateY(110%);transition:transform .22s ease;
  box-shadow:0 -6px 24px rgba(13,27,42,.18)}
.gc-barra[data-abierta="1"]{transform:none}
.gc-barra .gc-resumen{flex:1;min-width:0;line-height:1.3}
.gc-barra .gc-n{display:block;font-size:.78rem;color:#a9b6c6}
.gc-barra .gc-total{font-size:1.2rem;font-weight:800;letter-spacing:-.03em;
  font-family:"Archivo",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.gc-barra .gc-ver{background:none;border:0;color:#a9b6c6;font:inherit;font-size:.78rem;
  text-decoration:underline;cursor:pointer;padding:0}
.gc-pedir{border:0;border-radius:10px;background:var(--verde);color:#fff;
  padding:.8rem 1.15rem;font:inherit;font-weight:800;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.gc-pedir:hover{background:var(--verde-2)}
.gc-pedir svg{width:1.15em;height:1.15em;fill:currentColor}

/* ---------- diálogos ---------- */
.gc-dlg{border:0;border-radius:16px;padding:0;width:min(30rem,calc(100vw - 2rem));
  box-shadow:var(--sombra);color:var(--tinta);background:var(--blanco)}
.gc-dlg::backdrop{background:rgba(13,27,42,.55)}
.gc-dlg-cab{display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 1.25rem .85rem;
  border-bottom:1px solid var(--linea)}
.gc-dlg-cab h2{margin:0;font-size:1.25rem;letter-spacing:-.03em;
  font-family:"Archivo",system-ui,sans-serif;font-weight:800}
.gc-dlg-cab p{margin:.25rem 0 0;font-size:.85rem;color:var(--gris);line-height:1.45}
.gc-x{margin-left:auto;border:0;background:none;font-size:1.5rem;line-height:1;
  color:var(--gris);cursor:pointer;padding:0 .2rem}
.gc-dlg-cuerpo{padding:1.1rem 1.25rem;max-height:60vh;overflow:auto}
.gc-dlg-pie{padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--linea)}

/* líneas del carrito */
.gc-linea{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;
  border-bottom:1px solid var(--linea)}
.gc-linea:last-child{border-bottom:0}
.gc-linea .gc-nom{flex:1;min-width:0;font-size:.92rem;line-height:1.35}
.gc-linea .gc-nom small{display:block;color:var(--gris);font-size:.78rem}
.gc-linea .gc-sub{font-weight:700;white-space:nowrap;font-size:.92rem}
.gc-qty{display:flex;align-items:center;gap:.1rem;border:1px solid var(--linea);
  border-radius:9px;overflow:hidden}
.gc-qty button{border:0;background:var(--papel);width:2rem;height:2rem;font:inherit;
  font-size:1.1rem;line-height:1;color:var(--tinta);cursor:pointer}
.gc-qty span{min-width:1.9rem;text-align:center;font-size:.9rem;font-weight:700}

.gc-vacio{text-align:center;color:var(--gris);padding:1.5rem 0;font-size:.92rem}

/* formulario */
.gc-campo{margin-bottom:.85rem}
.gc-campo label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.3rem}
.gc-campo input,.gc-campo textarea{width:100%;border:1px solid var(--linea);border-radius:10px;
  padding:.7rem .8rem;font:inherit;background:var(--papel);color:var(--tinta)}
.gc-campo input:focus,.gc-campo textarea:focus{outline:2px solid var(--llama);
  outline-offset:1px;background:var(--blanco)}
.gc-campo textarea{resize:vertical;min-height:4.5rem}
.gc-campo .gc-ayuda{font-size:.78rem;color:var(--gris);margin-top:.3rem;line-height:1.4}
.gc-campo[data-error="1"] input,.gc-campo[data-error="1"] textarea{border-color:#d33;background:#fff5f5}
.gc-err{color:#d33;font-size:.78rem;margin-top:.3rem;display:none}
.gc-campo[data-error="1"] .gc-err{display:block}

.gc-envio{display:flex;justify-content:space-between;align-items:baseline;
  padding:.75rem 0 0;font-size:.88rem;color:var(--gris)}
.gc-envio b{color:var(--verde);font-weight:700}
.gc-total-caja{display:flex;justify-content:space-between;align-items:baseline;
  padding:.5rem 0 0;font-size:.9rem;color:var(--gris)}
.gc-total-caja b{font-size:1.5rem;color:var(--tinta);letter-spacing:-.035em;
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-variant-numeric:tabular-nums}
.gc-nota{font-size:.78rem;color:var(--gris);line-height:1.45;margin:.7rem 0 0}

/* Vista previa del mensaje cuando todavía no hay WhatsApp conectado. */
.burbuja-prev{background:#dcf8c6;color:#0b2213;border-radius:12px 12px 12px 3px;
  padding:.8rem .9rem;font-size:.85rem;line-height:1.5;white-space:pre-wrap;
  word-break:break-word;margin:0}

/* zonas */
.gc-zonas{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.gc-zonas button{border:1px solid var(--linea);background:var(--blanco);border-radius:10px;
  padding:.75rem .6rem;font:inherit;font-size:.9rem;cursor:pointer;text-align:left;line-height:1.3}
.gc-zonas button:hover{border-color:var(--llama);background:var(--papel)}
.gc-zonas button small{display:block;color:var(--gris);font-size:.75rem;margin-top:.15rem}
.gc-zona-actual{font-size:.85rem;color:var(--gris)}
.gc-zona-actual button{background:none;border:0;color:var(--llama);font:inherit;
  font-size:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}

@media (max-width:26rem){
  .gc-barra{gap:.6rem;padding:.6rem .75rem}
  .gc-pedir{padding:.75rem .9rem}
}