/* 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; --naranja-t:#C2410C;
  --nata:#F1F4F8; --crema:#FFFFFF;
  --azul:#011536;                    /* complemento, no base */
  --tinta:#011536; --tinta-2:#4a5c78; --papel:#F6F8FB; --blanco:#fff;
  --llama:#F86500; --llama-2:#FF8A2B; --gris:#5A677A; --linea:#E3E8EF;
  --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);
}


/* ---------- rodillos de cifras ----------
   El gesto de movimiento de TODA la página: el precio cuenta hacia abajo hasta
   su cifra real, como el tótem de un grifo. Lo usan el tablero, las tarjetas y
   el total de la barra — un solo idioma, no un efecto por sección.

   Dos trampas que ya costaron caro, no tocar sin releerlas:

   · `overflow:hidden` NO puede ir en la caja exterior. Sobre un inline-block le
     mueve la línea base al borde inferior, el rodillo deja de estar a la altura
     del texto normal y al volver al texto plano todo pega un tirón. El recorte
     vive en una capa absoluta encima; la línea base la fija el carácter real,
     que sigue en el flujo aunque no se vea.
   · El rodillo se INYECTA dentro de texto ajeno, así que hereda tipografía y
     color a la fuerza. Sin eso, `.gc-precio span{font-size:.78rem}` —escrito
     para «con canje · por balón»— le caía encima: el dígito salía a un tercio
     de tamaño y el precio se encogía 18 px a mitad de animación. */
.gc-rod,.gc-rod-real,.gc-rod-clip,.gc-rod-col,.gc-rod-col span{
  font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:inherit}
.gc-rod{position:relative;display:inline-block}
.gc-rod-clip{position:absolute;inset:0;overflow:hidden}
.gc-rod-col{position:absolute;top:0;left:0;right:0;will-change:transform}
.gc-rod-col span{display:block;text-align:inherit}
.gc-solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- rejilla de productos ----------
   Sobre el fondo blanco las tarjetas sin caja desaparecían: quedaba texto
   suelto flotando. Ahora la tarjeta ES una superficie gris clara y dentro va el
   panel blanco de la foto — gris sobre blanco, blanco sobre gris. Esa capa
   doble es lo que les da cuerpo sin ensuciar la página de bordes. */
.gc-grid{display:grid;gap:1.2rem;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}
/* El primer título de categoría quedaba pegado al párrafo de la sección. */
[data-gc-catalogo]{margin-top:2rem}

/* ---------- la categoría de un solo producto ----------
   El Plan Premium es la promesa de la marca hecha producto, y quedaba como una
   tarjeta suelta con tres huecos al lado. Aquí se despliega a lo ancho: foto
   grande a la izquierda y todo lo que hay que saber a la derecha. */
.gc-grid--solo{grid-template-columns:1fr}
@media (min-width:46rem){
  /* La foto va ABSOLUTA y su hueco se reserva con `padding-left`. Con la foto
     dentro de la rejilla y abarcando todas las filas, su alto se repartía entre
     ellas y abría medio palmo de vacío entre el título y el texto — la misma
     trampa de `grid-row:1/-1` que ya costó una tarde en la lista de productos.
     Aquí el contenido fluye como un bloque normal y la foto no lo estira. */
  .gc-grid--solo .gc-card{position:relative;display:block;
    padding:1.8rem 1.8rem 1.8rem 24rem;min-height:23rem}
  .gc-grid--solo .gc-ficha-link{position:absolute;left:1.8rem;top:50%;
    transform:translateY(-50%);width:20.5rem;margin:0}
  .gc-grid--solo .gc-card h3{font-size:1.7rem;margin:0}
  .gc-grid--solo .gc-incluye{font-size:1.02rem;max-width:44ch;margin:.55rem 0 0}
  .gc-grid--solo .gc-precio{margin-top:.8rem}
  /* Y el botón no se estira a lo ancho de la tarjeta: un «Agregar» de 40 rem
     parece un banner, no un botón. */
  .gc-grid--solo .gc-acciones{margin-top:1.1rem;justify-content:flex-start}
  .gc-grid--solo .gc-acciones .gc-add{flex:none;padding-left:2.6rem;padding-right:2.6rem}
}


/* La firma: el arco de Primax asomando por abajo de la tarjeta. Es el mismo
   trazo que cose la página, en chico. Sin él la tarjeta era una caja gris con
   una foto dentro — correcta y de plantilla, que es justo lo que sobraba.
   Va como DEGRADADO del fondo y no como capa aparte: una capa encima obliga a
   `overflow:hidden` en la tarjeta, y ese recorte le cortaba el rodillo al
   precio —el dígito quedaba a media altura, partido—. El fondo no recorta
   nada. */
.gc-card{border:1px solid var(--linea);border-radius:20px;
  padding:.7rem .7rem 1rem;display:flex;flex-direction:column;gap:.6rem;
  position:relative;
  background:radial-gradient(125% 58% at 50% 119%,
    var(--nata) 0 52%,transparent 66%) var(--blanco)}

/* El panel de la foto lleva un halo naranja detrás del producto: lo despega del
   blanco y le pone el color de la marca sin teñir la foto.
   Es UN panel, no el de la tarjeta y otro para el carrito: el mismo halo y la
   misma sombra en los dos sitios, en dos tamaños. Estaba escrito dos veces y
   la copia del carrito se había quedado en una cajita blanca con borde que no
   casaba con ninguna otra foto del sitio. */
.gc-panel-foto{border:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 62%,#FFE8D6 0%,#FFF4EC 46%,#fff 74%)}
.gc-panel-foto img{width:100%;height:100%;object-fit:contain;display:block}
.gc-foto{aspect-ratio:1;border-radius:16px;padding:.6rem}
.gc-foto picture{display:contents}
.gc-foto img{filter:drop-shadow(0 10px 16px rgba(120,50,10,.18))}

/* Producto sin ficha todavía: el panel se mantiene para no romper la fila y
   lleva la llama de la marca. Vacío se leía como un hueco. */
.gc-foto-vacia{background:var(--nata);position:relative}
.gc-foto-vacia::after{content:"";position:absolute;inset:0;
  background:no-repeat center/38% url("data:image/svg+xml;charset=utf-8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'>\
<path fill='%23F86500' fill-opacity='.26' d='M24 4c1 7-4 9-7 14-3 5-2 10 1 13-4-1-7-5-7-10 0 0-5 5-5 12 0 6 5 11 12 11h12c7 0 12-5 12-12 0-11-11-14-11-22 0-3 1-5 1-5-4 0-8 3-8 3S25 6 24 4Z'/>\
<path fill='%23FF8A2B' fill-opacity='.3' d='M24 26c0 4-3 5-3 8s2 5 4 5 4-2 4-5-5-4-5-8Z'/></svg>")}

.gc-ficha-link{display:block;text-decoration:none;color:inherit}.gc-card h3 a{color:inherit;text-decoration:none}.gc-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--naranja);text-decoration-thickness:3px;text-underline-offset:3px}
.gc-card h3{margin:.15rem 0 0;font-size:1.18rem;line-height:1.15;color:var(--azul);
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;letter-spacing:-.032em}
.gc-card .gc-incluye{margin:0;font-size:.84rem;color:var(--gris);line-height:1.45}

/* El precio con el peso de un titular. Era del tamaño del nombre del producto y
   en una tienda de un solo argumento —el precio publicado— eso es enterrarlo. */
.gc-precio{display:flex;align-items:baseline;gap:.4rem;margin-top:auto;flex-wrap:wrap}
.gc-precio b{font-size:2.05rem;letter-spacing:-.055em;color:var(--fuego);
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.gc-precio > span{font-size:.8rem;color:var(--gris)}
.gc-precio .gc-consultar{font-size:.9rem;font-weight:700;color:var(--naranja-t)}

/* La estrella es un bloque NARANJA macizo: la jerarquía la hace el color. */
.gc-destacada{grid-column:span 2;background:var(--naranja);color:var(--azul);
  border-radius:22px;padding:1.4rem;gap:.75rem}
.gc-destacada h3{color:var(--azul);font-size:1.6rem;margin:0}
.gc-destacada .gc-incluye{color:var(--azul)}
.gc-destacada .gc-precio b{font-size:2.6rem;color:var(--azul)}
.gc-destacada .gc-precio > span{color:var(--azul)}
.gc-destacada .gc-foto{background:#fff;border-color:transparent}
/* El arco de la tarjeta es gris claro y sobre el naranja macizo se veía como un
   parche sucio bajo el botón. En la destacada va en el naranja quemado de la
   marca: mismo gesto, dentro de su propio color. */
.gc-destacada{background:radial-gradient(125% 58% at 50% 119%,
  var(--fuego) 0 52%,transparent 66%) var(--naranja)}
.gc-destacada .gc-modo{background:rgba(0,0,0,.16)}
.gc-destacada .gc-modo button{color:var(--azul)}
.gc-destacada .gc-modo button small{opacity:1}
.gc-destacada .gc-modo button[aria-pressed="true"]{background:#fff;color:var(--naranja-t);
  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}
/* Foto a la izquierda con el patrón de `.gc-grid--solo`: absoluta, y su hueco
   reservado con `padding-left`. La rejilla anterior mandaba a la columna 1 a
   `.gc-foto`, que no es hija de la tarjeta —lo es `.gc-ficha-link`, que la
   envuelve—: la columna quedaba vacía y la foto caía a la derecha, con medio
   bloque naranja muerto al lado. */
@media (min-width:34rem){
  .gc-destacada{padding-left:15.2rem;min-height:15.2rem;justify-content:center}
  .gc-destacada .gc-ficha-link{position:absolute;left:1.4rem;top:50%;
    transform:translateY(-50%);width:12.4rem}
  .gc-destacada .gc-precio{margin-top:0}
}
@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}
  /* 78% y no 66%: a 66 la tarjeta entera entraba, pero la de al lado asomaba
     tanto que la foto cortada del vecino se leía como que la foto estaba mal
     recortada. Ahora asoma un canto, suficiente para decir «hay más». */
  .gc-grid > *{flex:0 0 78%;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}
}

/* La tarjeta reacciona: se levanta al pasar por encima y se hunde al tocarla.
   Es lo que la separa de una ficha impresa. */
.gc-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media (hover:hover){
  .gc-card:hover{transform:translateY(-3px);border-color:#C7D2E0;
    box-shadow:0 12px 28px rgba(1,21,54,.10)}
  .gc-destacada:hover{box-shadow:0 16px 34px rgba(211,78,0,.28)}
}
.gc-card:active{transform:scale(.985)}

/* ---------- la tarjeta acusa el golpe ----------
   Pedido del dueño: «que cada acción tenga una reacción, que se sienta vivo».
   Al agregar, la tarjeta se hunde y rebota —un globo que se aprieta y vuelve— y
   por encima cruza una onda blanca que nace donde está el botón. No es adorno:
   en un carrusel el carrito queda fuera de la vista, y sin esto el único aviso
   de que el toque hizo algo es una palabra que cambia en el botón.

   La onda va en `::after` con `clip-path` PROPIO y no con `overflow:hidden` en
   la tarjeta: ese overflow le recorta el rodillo al precio y lo parte por la
   mitad (ya pasó una vez). */
.gc-card::after{content:"";position:absolute;inset:0;border-radius:inherit;
  clip-path:inset(0 round 20px);pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 78%,
    rgba(255,255,255,.96) 0%,rgba(255,255,255,.62) 38%,rgba(255,255,255,0) 70%)}
.gc-destacada::after{clip-path:inset(0 round 22px)}
.gc-card[data-pop="1"]{animation:gc-pop .52s cubic-bezier(.34,1.46,.64,1)}
.gc-card[data-pop="1"]::after{animation:gc-globo .58s ease-out}
@keyframes gc-pop{
  0%{transform:scale(1)}
  26%{transform:scale(.955)}
  62%{transform:scale(1.024)}
  100%{transform:scale(1)}
}
@keyframes gc-globo{
  0%{opacity:0;transform:scale(.3)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.18)}
}
@media (prefers-reduced-motion:reduce){
  .gc-card[data-pop="1"],.gc-card[data-pop="1"]::after{animation:none}
}

/* canje / balón completo */
.gc-modo{display:flex;gap:.2rem;background:var(--nata);border-radius:11px;padding:.22rem}
.gc-modo button{flex:1;border:0;background:none;border-radius:9px;padding:.42rem .35rem;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--gris);cursor:pointer;
  line-height:1.2;transition:background .14s,color .14s}
.gc-modo button small{display:block;font-size:.78rem;font-weight:400;opacity:.9;
  margin-top:.1rem}
.gc-modo button[aria-pressed="true"]{background:var(--blanco);color:var(--azul);
  box-shadow:0 1px 3px rgba(1,21,54,.14)}

/* Fila de acción: cantidad + agregar. Elegir cuántos acá es lo práctico. */
.gc-acciones{display:flex;gap:.5rem;align-items:stretch}
.gc-acciones .gc-add{flex:1}
/* El contador se montaba con anchos sueltos y `align-self:stretch`: en el móvil
   del dueño el número se montaba encima de los botones. Ahora cada parte es una
   celda flex con su propio centrado y una altura mínima de dedo (44 px). */
.gc-paso{display:inline-flex;align-items:stretch;border:1px solid var(--linea);
  border-radius:12px;background:var(--blanco);overflow:hidden;flex:none}
.gc-paso button{border:0;background:none;width:2.5rem;min-height:2.75rem;padding:0;
  font:inherit;font-size:1.2rem;line-height:1;color:var(--azul);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none}
.gc-paso button:hover{background:var(--nata)}
.gc-paso span{min-width:2rem;display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--azul)}
.gc-destacada .gc-paso{border-color:rgba(1,21,54,.35);background:rgba(255,255,255,.12)}
.gc-destacada .gc-paso button,.gc-destacada .gc-paso span{color:var(--azul)}
.gc-destacada .gc-paso button:hover{background:rgba(1,21,54,.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 ----------
   Una sola línea y lo más baja que se pueda. Es una capa fija encima del sitio:
   cada milímetro que ocupa se lo quita al contenido, y en un móvil una barra de
   dos pisos deja la página asfixiada justo cuando el cliente está decidiendo.
   Todo cabe en una fila porque se quitó el conteo de unidades. */
.gc-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:url("/textura-film.png") repeat var(--azul);color:#fff;padding:.4rem .9rem;
  display:flex;align-items:center;gap:.9rem;
  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.2;
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.gc-barra .gc-n{font-size:.76rem;color:#a9b6c6;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-barra .gc-n:empty{display:none}
/* El total es el dato que decide, pero ya no necesita el tamaño de un titular:
   es lo único grande de la fila, y eso basta para que mande. */
.gc-barra .gc-total{font-size:1.2rem;color:#fff;font-weight:800;letter-spacing:-.04em;
  font-family:"Archivo",system-ui,sans-serif;font-variant-numeric:tabular-nums;
  display:inline-block;flex:none}
.gc-barra .gc-ver{background:none;border:0;color:#a9b6c6;font:inherit;font-size:.76rem;
  text-decoration:underline;cursor:pointer;flex:none;
  /* Área de toque de 40 px sin que el texto ocupe más: el relleno va vertical y
     el margen negativo se lo devuelve al diseño. */
  padding:.75rem .35rem;margin:-.75rem -.35rem}
/* El color dice a dónde lleva el botón: NARANJA el que avanza la compra dentro
   de la tienda —pedir, continuar, pagar— y VERDE solo el que de verdad abre
   WhatsApp. Estaban todos en verde, así que el checkout prometía un chat en
   cada paso, incluso cuando el siguiente paso era cobrar una tarjeta. */
.gc-pedir{border:0;border-radius:10px;background:var(--naranja);color:var(--azul);
  padding:.6rem 1.05rem;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.gc-pedir:hover{background:var(--brasa)}
.gc-pedir--wa{background:var(--verde)}
.gc-pedir--wa:hover{background:var(--verde-2)}
/* Sin producto elegido el botón no se esconde: se apaga y dice qué falta. Un
   pie vacío deja la ventana sin final visible. */
.gc-pedir:disabled{background:var(--linea);color:var(--gris);cursor:default}
.gc-pedir:disabled:hover{background:var(--linea)}
.gc-pedir svg{width:1.15em;height:1.15em;fill:currentColor}

/* ---------- diálogos ----------
   En el escritorio son una ficha centrada. En el móvil suben desde abajo como
   una hoja: es donde está el pulgar y es lo que ya hace cualquier tienda que la
   gente usa a diario. Un diálogo centrado en un teléfono deja el botón de
   confirmar lejos y con el teclado encima. */
/* El catálogo de /pedido/: la misma tarjeta, más apretada. Acá no hay que
   convencer —ya vino a pedir— así que la foto cede sitio al precio y al botón.
   Y acá el móvil NO hace carrusel, al revés que en la portada: se viene a
   elegir, y una tira horizontal esconde justo lo que hay que comparar. Por eso
   se deshace el `display:flex` de la regla de móvil. */
.gc-dlg-cuerpo .gc-cat{margin:1.5rem 0 .75rem;font-size:1.15rem}
.gc-dlg-cuerpo .gc-cat:first-child{margin-top:.2rem}

.gc-dlg{border:0;border-radius:18px;padding:0;width:min(30rem,calc(100vw - 2rem));
  box-shadow:var(--sombra);color:var(--tinta);background:var(--blanco)}
.gc-dlg::backdrop{background:rgba(1,21,54,.62)}
.gc-dlg-cab{display:flex;align-items:flex-start;gap:1rem;
  padding:1.3rem 1.35rem 1rem}
.gc-dlg-cab h2{margin:0;font-size:1.45rem;letter-spacing:-.035em;line-height:1.05;
  font-family:"Archivo",system-ui,sans-serif;font-weight:800;color:var(--azul)}
.gc-dlg-cab p{margin:.35rem 0 0;font-size:.88rem;color:var(--gris);line-height:1.45}
/* Botón de cerrar de verdad, no una «x» de 12 px imposible de acertar. */
.gc-x{margin-left:auto;border:0;background:var(--nata);border-radius:50%;
  width:2.1rem;height:2.1rem;flex:none;font-size:1.25rem;line-height:1;
  color:var(--azul);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .14s}
.gc-x:hover{background:var(--linea)}
.gc-dlg-cuerpo{padding:.3rem 1.35rem 1.1rem;max-height:58vh;overflow:auto;
  overscroll-behavior:contain}
.gc-dlg-pie{padding:1.05rem 1.35rem 1.35rem;border-top:1px solid var(--linea);
  background:var(--papel);border-radius:0 0 18px 18px}

/* ---------- pago con tarjeta ----------
   Izipay es el dueño del formulario sensible. Nuestra capa solo comunica el
   contexto y el estado; no invade sus campos ni reconstruye su modal. */
.gc-tarjeta{margin:1rem 0 .15rem;padding:1.1rem 1.15rem 1.15rem;
  border:1px solid #dfe5ec;border-radius:18px;background:#fff;
  box-shadow:0 8px 24px rgba(1,21,54,.06)}
.gc-tarjeta-cab{margin:0 0 .9rem;display:flex;flex-direction:column;gap:.22rem}
.gc-tarjeta-cab b{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:1.12rem;letter-spacing:-.025em;color:var(--azul)}
.gc-tarjeta-cab b::before{content:"";display:inline-block;width:.62rem;height:.62rem;
  margin:0 .48rem .08rem 0;border-radius:50%;background:var(--naranja);
  box-shadow:0 0 0 .22rem rgba(248,101,0,.12)}
.gc-tarjeta-cab small{color:var(--gris);font-size:.82rem}
.gc-tarjeta-cuerpo{min-height:2.6rem}
.gc-tarjeta-pie{padding-top:.85rem}
.gc-tarjeta-pie:empty{padding:0}
.gc-pago-resumen{margin:0 0 1rem;padding:.9rem 1rem;border:1px solid #e6ebf1;
  border-radius:14px;background:#f8fafc}
.gc-pago-resumen-cab{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:.45rem}
.gc-pago-resumen-cab b{font-size:.88rem;color:var(--azul)}
.gc-pago-resumen-cab small{font-size:.72rem;color:var(--gris);text-align:right}
.gc-pago-resumen-lista{display:grid;gap:.18rem}
.gc-pago-resumen-fila{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;font-size:.82rem;color:#526173;line-height:1.45}
.gc-pago-resumen-fila span{min-width:0}
.gc-pago-resumen-fila b{color:var(--azul);white-space:nowrap;font-weight:700}
.gc-pago-resumen-envio{padding-top:.35rem;margin-top:.25rem;border-top:1px solid #e2e8ef}
.gc-pago-resumen-total{padding-top:.55rem;margin-top:.25rem;border-top:1px solid #d8e0e9;
  font-size:.94rem;color:var(--azul)}
.gc-pago-resumen-total b{font-size:1.04rem}
.kr-smart-form .gc-pago-resumen--modal{
  display:block!important;position:relative!important;z-index:4!important;
  flex:none!important;width:calc(100% - 2rem)!important;box-sizing:border-box!important;
  margin:.15rem 1rem .8rem!important;padding:.72rem .8rem!important;
  border:1px solid #dfe6ed!important;border-radius:10px!important;
  background:#f7f9fb!important;color:#344153!important;
  font-family:"Hanken Grotesk",system-ui,sans-serif!important}
.kr-smart-form .gc-pago-resumen--modal *{
  box-sizing:border-box!important;font-family:"Hanken Grotesk",system-ui,sans-serif!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-cab{
  display:flex!important;align-items:baseline!important;justify-content:space-between!important;
  gap:.65rem!important;margin:0 0 .38rem!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-cab b{
  color:#001536!important;font-size:.79rem!important;font-weight:700!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-cab small{
  color:#6e7a88!important;font-size:.66rem!important;text-align:right!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-lista{
  display:grid!important;gap:.2rem!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-fila{
  display:flex!important;align-items:baseline!important;justify-content:space-between!important;
  gap:.8rem!important;color:#526173!important;font-size:.75rem!important;line-height:1.35!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-fila b{
  color:#001536!important;font-size:inherit!important;font-weight:700!important;white-space:nowrap!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-envio{
  margin-top:.22rem!important;padding-top:.32rem!important;border-top:1px solid #e1e7ed!important}
.kr-smart-form .gc-pago-resumen--modal .gc-pago-resumen-total{
  margin-top:.22rem!important;padding-top:.38rem!important;border-top:1px solid #d9e1e9!important;
  color:#001536!important;font-size:.84rem!important;font-weight:700!important}
.kr-embedded,.kr-smart-form{width:100%;margin:.4rem 0 .2rem}
.gc-pago-nota{display:flex;align-items:center;gap:.55rem;margin:.65rem 0 0;
  color:var(--gris);font-size:.86rem;line-height:1.45}
.gc-pago-cargando::before{content:"";width:.85rem;height:.85rem;flex:none;border:2px solid #dfe5ec;
  border-top-color:var(--naranja);border-radius:50%;animation:gc-pago-gira .7s linear infinite}
@keyframes gc-pago-gira{to{transform:rotate(360deg)}}

/* ---------- el paso 3, cuando el pago ya está en marcha ----------
   Detrás de la ventana de Izipay no debe quedar una segunda versión del pago:
   una línea que dice quién cobra, y la puerta de vuelta. Todo lo demás —el
   botón de pagar que Krypton también deja en la página, su lista de métodos,
   el selector de cuotas de una sola opción— se apaga: repetir el pago fuera de
   la ventana es lo que hacía que esto pareciera dos formularios peleando. */
.gc-marca-pago{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin:0 0 .5rem;font-size:.82rem;color:var(--gris);line-height:1.4}
.gc-marca-pago img{height:1.25rem;width:auto;display:block}
.gc-pago-nota{margin:.4rem 0 0;font-size:.82rem;color:var(--gris);line-height:1.5}
.gc-reabrir{border:0;background:none;padding:.15rem 0;font:inherit;
  font-size:.85rem;font-weight:700;color:var(--naranja);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.gc-reabrir:hover{color:var(--fuego)}
/* La ventana oficial conserva su estructura, pero se adapta al viewport del
   checkout: nada de anchuras fijas de escritorio en un teléfono. */
.kr-smart-form-wrapper.kr-type-popin .kr-smart-form-modal-wrapper,
.kr-smart-form[kr-popin] .kr-smart-form-modal-wrapper{z-index:10000!important;
  position:fixed!important;inset:0!important;
  align-items:center!important;justify-content:center!important}
.kr-smart-form-wrapper.kr-type-popin .kr-smart-form-modal,
.kr-smart-form[kr-popin] .kr-smart-form-modal{
  width:min(430px,calc(100vw - 1.5rem))!important;
  min-width:0!important;min-height:0!important;height:auto!important;
  padding-top:96px!important;padding-bottom:62px!important;
  max-height:calc(100vh - 1.5rem)!important;overflow:auto!important;
  border-radius:20px!important;box-shadow:0 24px 70px rgba(1,21,54,.28)!important}
.kr-smart-form .kr-smart-form-modal-views-container,
.kr-smart-form[kr-popin] .kr-smart-form-modal-views-container,
.kr-smart-form .kr-smart-form-modal-view,
.kr-smart-form[kr-popin] .kr-smart-form-modal-view{
  width:100%!important;max-width:none!important}
.kr-smart-form .kr-smart-form-modal-view .kr-smart-form-methods,
.kr-smart-form[kr-popin] .kr-smart-form-modal-view .kr-smart-form-methods{
  width:100%!important}
.kr-smart-form[kr-popin] .kr-popin-modal-header{
  position:absolute!important;z-index:6!important;top:0!important;left:0!important;right:0!important}
.kr-smart-form[kr-popin] .kr-popin-modal-footer{
  position:absolute!important;z-index:3!important;left:0!important;right:0!important;bottom:0!important;
  height:62px!important}
.kr-smart-form[kr-popin] .kr-field-element{
  min-height:46px!important;border-color:#cbd5df!important;border-radius:9px!important;
  background:#fff!important;box-shadow:none!important}
.kr-smart-form[kr-popin] .kr-card-form,
.kr-smart-form[kr-popin] .kr-payment-button{
  width:calc(100% - 2rem)!important;max-width:none!important;margin-left:1rem!important;
  margin-right:1rem!important;box-sizing:border-box!important}
.kr-smart-form[kr-popin] .kr-payment-button{
  min-height:48px!important;border-radius:10px!important;
  box-shadow:0 7px 16px rgba(31,197,196,.18)!important}
.kr-smart-form-wrapper.kr-type-popin .kr-smart-form-modal-wrapper,
.kr-smart-form[kr-popin] .kr-smart-form-modal-wrapper{
  padding:.75rem!important;background:rgba(1,21,54,.58)!important}
.kr-smart-form-wrapper.kr-type-popin .kr-popin-modal-header,
.kr-smart-form[kr-popin] .kr-popin-modal-header{
  border-bottom:1px solid #e3e8ef!important;background:#fff!important}
.kr-smart-form-wrapper.kr-type-popin .kr-payment-button,
.kr-smart-form[kr-popin] .kr-payment-button{border-radius:11px!important;
  min-height:46px!important;font-weight:700!important}

@media (max-width:34rem){
  .gc-dlg{width:100%;max-width:none;margin:auto 0 0;border-radius:20px 20px 0 0;
    max-height:92vh}
  .gc-dlg-pie{border-radius:0;position:sticky;bottom:0}
  .gc-dlg-cuerpo{max-height:none}
  /* El asa: dice «esto se arrastra hacia abajo» sin escribirlo. */
  .gc-dlg-cab::before{content:"";position:absolute;top:.55rem;left:50%;
    translate:-50% 0;width:2.4rem;height:.25rem;border-radius:999px;
    background:var(--linea)}
  .gc-dlg-cab{position:relative;padding-top:1.6rem}
}

/* ---------- el mismo panel, pero dentro de /pedido/ ----------
   No flota, no tiene fondo oscuro detrás y no se cierra: es una sección más de
   la página. Por eso se deshacen las tres cosas que lo hacían una hoja móvil
   —pegarse abajo, recortar el cuerpo y quedarse el pie fijo—, que dentro de una
   página dejarían el formulario encerrado en su propio scroll. */
.gc-panel{display:block;width:auto;max-width:none;margin:0 0 1.5rem;
  border:1px solid var(--linea);border-radius:18px;max-height:none;
  box-shadow:none;overflow:visible;
  /* La cabecera es `position:fixed`: sin este margen, bajar hasta un panel lo
     deja con el título tapado por ella. */
  scroll-margin-top:5rem}
/* El que recibe el `scrollIntoView` es el contenedor de la página, no el panel
   de dentro: el margen tiene que estar en los dos. */
[data-gc-paso]{scroll-margin-top:5rem}
.gc-panel .gc-dlg-cuerpo{max-height:none;overflow:visible}
.gc-panel .gc-dlg-pie{position:static;border-radius:0 0 18px 18px}
.gc-panel .gc-dlg-cab::before{content:none}
@media (max-width:34rem){
  .gc-panel{border-radius:16px;margin-bottom:1.1rem}
  .gc-panel .gc-dlg-cab{padding-top:1.3rem}
  .gc-panel .gc-dlg-pie{border-radius:0 0 16px 16px}
}

/* ---------- líneas del carrito ----------
   Cada línea es producto + foto + precio + cantidad, como cualquier tienda que
   la gente ya sabe usar. Antes era una fila de texto con el subtotal al final:
   se leía como el detalle de un recibo, no como el pedido que uno está a punto
   de hacer, y no había forma de reconocer de un vistazo qué llevaba. */
.gc-linea{display:flex;align-items:flex-start;gap:.8rem;padding:.85rem 0;
  border-bottom:1px solid var(--linea)}
.gc-linea:last-of-type{border-bottom:0}
/* ---------- el plan, como un bloque y no como dos productos ----------
   El Plan Premium y el balón que arrastra se pintaban como dos filas sueltas
   con su precio cada una. Acá van juntos: el importe grande es lo que paga hoy
   y dentro se nombra de dónde sale cada parte. Nombrar el importe es lo que
   convierte «S/ 69.90» en «la garantía, que recuperas». */
.gc-linea--plan{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:.8rem;row-gap:.1rem;
  background:linear-gradient(180deg,rgba(248,101,0,.05),rgba(248,101,0,0));
  border-radius:14px;padding:.85rem .8rem;margin:.2rem 0;
  box-shadow:inset 0 0 0 1px rgba(248,101,0,.22)}
.gc-plan-nombre{font-family:var(--display,"Archivo"),system-ui,sans-serif;
  font-size:1.02rem;color:var(--azul);letter-spacing:-.02em;min-width:0}
.gc-plan-total{justify-self:end}
/* El desglose cruza las tres columnas: es lo que hay que poder leer, y en una
   columna de dos dedos «Garantía del envase» salía en seis renglones. */
.gc-plan-partes{grid-column:1/-1;list-style:none;margin:.6rem 0 0;padding:.6rem 0 0;
  display:grid;gap:.45rem;border-top:1px solid rgba(248,101,0,.18)}
.gc-plan-partes li{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;font-size:.88rem;color:var(--azul);line-height:1.3}
.gc-plan-partes li small{display:block;font-size:.76rem;color:var(--gris);
  font-weight:400;margin-top:.05rem}
.gc-plan-partes li b{color:var(--azul);white-space:nowrap;
  font-variant-numeric:tabular-nums;font-weight:700}
.gc-plan-quitar{grid-column:1/-1;justify-self:start;margin-top:.45rem;border:0;
  background:none;padding:.35rem 0;color:var(--gris);font:inherit;font-size:.8rem;
  text-decoration:underline;cursor:pointer;min-height:2.75rem}
.gc-plan-quitar:hover{color:var(--fuego)}

/* La miniatura es el panel de la tarjeta a escala: mismo halo, misma sombra,
   sin borde. Solo cambia el tamaño y cuánto se separa la foto del borde. */
.gc-mini{flex:none;width:3.6rem;height:3.6rem;border-radius:12px;padding:.3rem}
.gc-mini img{filter:drop-shadow(0 4px 7px rgba(120,50,10,.16))}
/* La explicación larga —la garantía del Plan Premium— dejaba una fila de ocho
   renglones al lado de otra de dos: en el carrito eso ya no se lee, se estorba.
   Dos renglones y el resto está en la ficha del producto, que es donde se
   decide. */
/* Va con `.gc-nom small` delante a propósito: la regla de al lado tiene la
   misma especificidad y, por ir después, ganaba el `display:block`. */
.gc-linea .gc-nom small.gc-nota-linea{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:.25rem;
  color:var(--gris);font-size:.78rem;line-height:1.35;max-width:34ch}
.gc-nom{flex:1;min-width:0;line-height:1.3}
.gc-linea .gc-nom b{display:block;font-size:.95rem;font-weight:700;color:var(--azul);
  font-family:"Archivo",system-ui,sans-serif;letter-spacing:-.02em}
.gc-linea .gc-nom small{display:block;color:var(--gris);font-size:.78rem;
  margin-top:.1rem}
.gc-linea .gc-nom .gc-unit{color:var(--fuego);font-weight:600}
.gc-lado{flex:none;display:flex;flex-direction:column;align-items:flex-end;
  gap:.45rem}
.gc-linea .gc-sub{font-weight:800;white-space:nowrap;font-size:1.05rem;
  font-family:"Archivo",system-ui,sans-serif;letter-spacing:-.03em;
  color:var(--azul);font-variant-numeric:tabular-nums}
/* No es un importe: es lo que falta por saber. Ni la tipografía de las cifras
   ni su peso, para que no compita con los precios de al lado. */
.gc-linea .gc-sub--pendiente{font-family:inherit;font-weight:700;
  font-size:.86rem;color:var(--gris);letter-spacing:0}
.gc-qty{display:flex;align-items:center;border:1px solid var(--linea);
  border-radius:10px;overflow:hidden;background:var(--blanco)}
.gc-qty button{border:0;background:var(--papel);width:1.9rem;height:1.9rem;font:inherit;
  font-size:1rem;line-height:1;color:var(--tinta);cursor:pointer}
.gc-qty button:hover{background:var(--linea)}
.gc-qty span{min-width:1.8rem;text-align:center;font-size:.88rem;font-weight:800;
  font-variant-numeric:tabular-nums}

/* El envío gratis, antes que los precios: cambia cómo se leen las cifras. */
.gc-banda-envio{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;
  background:#EAF7EF;color:#146c38;border-radius:12px;padding:.6rem .8rem;
  font-size:.85rem;font-weight:700;line-height:1.3}
.gc-banda-envio::before{content:"";flex:none;width:1.1rem;height:1.1rem;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%231FAA59' d='M3 6h11v9H3zm12 3h3.5l2.5 3v3h-6zM7 21a2 2 0 100-4 2 2 0 000 4zm11 0a2 2 0 100-4 2 2 0 000 4z'/></svg>")}

/* El desglose: subtotal, envío y total. Separado de las líneas por su propia
   superficie, para que no se confunda con un producto más. */
.gc-resumen-caja{margin-top:1rem;background:var(--papel);border-radius:14px;
  padding:.85rem 1rem}
.gc-resumen-fila{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;font-size:.9rem;color:var(--gris);padding:.22rem 0}
.gc-resumen-fila b{color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.gc-resumen-fila.gc-gratis b{color:#13773D}  /* el verde de marca da 2.8:1 sobre gris */
.gc-resumen-total{border-top:1px solid var(--linea);margin-top:.5rem;
  padding-top:.6rem;font-size:1rem;color:var(--tinta);font-weight:700}
.gc-resumen-total b{font-size:1.5rem;letter-spacing:-.035em;
  font-family:"Archivo",system-ui,sans-serif;font-weight:800}

.gc-vacio{text-align:center;color:var(--gris);padding:1.5rem 0;font-size:.92rem;
  line-height:1.9}
/* Esta página ya no lleva catálogo, así que el pedido vacío necesita una
   salida: sin ella es un callejón. */
.gc-vacio-ir{color:var(--llama);font-weight:700;text-decoration:underline}

/* El botón que cierra cada diálogo lleva el importe pegado. */
.gc-cta{width:100%;justify-content:center;font-size:1.02rem;padding:.95rem 1.1rem}

/* ---------- a dónde va el pedido ----------
   Encabeza el paso de los datos y es un botón: si el distrito está mal, se
   corrige desde donde se ve, sin retroceder. */
.gc-repaso{display:grid;gap:.55rem;margin-bottom:1.2rem}
.gc-repaso-caja{display:flex;align-items:center;gap:.75rem;width:100%;
  border:1px solid var(--linea);background:var(--papel);border-radius:14px;
  padding:.7rem .85rem;font:inherit;text-align:left;cursor:pointer;
  color:var(--tinta);transition:border-color .14s,background .14s}
.gc-repaso-caja:hover{border-color:var(--naranja);background:var(--blanco)}
.gc-repaso-texto{flex:1;min-width:0;line-height:1.3}
.gc-repaso-texto b{display:block;font-size:.92rem;font-weight:700;color:var(--azul)}
.gc-repaso-texto small{display:block;font-size:.78rem;color:var(--gris)}
.gc-repaso-zona svg{width:1.25rem;height:1.25rem;flex:none;color:var(--naranja)}
.gc-repaso-cambiar{flex:none;font-size:.78rem;font-weight:700;color:var(--naranja-t);
  text-decoration:underline}

/* ---------- los tres pasos de /pedido/ ----------
   Uno abierto y los demás plegados a su resumen: «se va limpiando y se ve lo
   que es importante en el momento». Plegar con `display:none` y no con altura
   es a propósito — un `max-height` animado sobre un formulario deja los campos
   accesibles al tabulador aunque no se vean, y el teclado salta a un paso
   invisible. */
.gc-panel[data-abierto="0"] .gc-dlg-cuerpo,
.gc-panel[data-abierto="0"] .gc-dlg-pie{display:none}
.gc-panel[data-abierto="0"]{background:var(--papel)}
.gc-panel[data-abierto="0"] .gc-dlg-cab{padding-bottom:1.3rem}
/* Plegado, la bajada explicativa sobra: lo que hace falta es qué se decidió. */
.gc-panel[data-abierto="0"] .gc-dlg-cab > div > p:not(.gc-paso-resumen){display:none}
.gc-panel[data-abierto="1"] .gc-paso-resumen{display:none}

.gc-paso-num{flex:none;width:1.65rem;height:1.65rem;border-radius:50%;
  background:var(--linea);color:var(--gris);font-style:normal;font-size:.85rem;
  font-weight:800;display:flex;align-items:center;justify-content:center;
  margin-top:.1rem;transition:background .15s,color .15s}
.gc-panel[data-abierto="1"] .gc-paso-num{background:var(--naranja);color:var(--azul)}
/* Ya hecho: el número se cambia por un visto. El paso resuelto no necesita
   seguir gritando su sitio en la fila. */
.gc-panel[data-hecho="1"][data-abierto="0"] .gc-paso-num{
  background:var(--verde);color:#fff;font-size:0}
.gc-panel[data-hecho="1"][data-abierto="0"] .gc-paso-num::after{
  content:"";width:.85rem;height:.85rem;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' \
stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/></svg>")}

.gc-paso-resumen{margin:.3rem 0 0;font-size:.88rem;color:var(--tinta-2);
  line-height:1.4}
/* La cabecera plegada es el botón de volver: tiene que decirlo al pasar por
   encima, no solo al tocarla. */
.gc-panel[data-hecho="1"] .gc-dlg-cab{cursor:pointer}
.gc-panel[data-hecho="1"] .gc-dlg-cab:hover h2{color:var(--fuego)}
.gc-panel[data-abierto="0"]:not([data-hecho="1"]) .gc-dlg-cab{cursor:default}
.gc-panel[data-abierto="0"]:not([data-hecho="1"]) .gc-dlg-cab h2{color:var(--gris)}

/* El total, pegado al botón que confirma: es el último número que se ve. */
.gc-pie-total{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:.7rem;font-size:.9rem;color:var(--gris)}
.gc-pie-total b{font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:1.5rem;letter-spacing:-.04em;color:var(--tinta);
  font-variant-numeric:tabular-nums}

/* formulario */
.gc-campo{margin-bottom:.85rem}
.gc-campo label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.3rem}
/* 1rem largo y sin encoger: por debajo de 16px iOS hace zoom al enfocar y saca
   al cliente del formulario a mitad del pedido. */
.gc-campo input,.gc-campo textarea{width:100%;border:1px solid var(--linea);border-radius:11px;
  padding:.85rem .9rem;font:inherit;font-size:1rem;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}
/* Por `[data-campo]` y no por `.gc-campo`: el error también lo marca la franja
   horaria, que es un grupo de opciones y no un campo de texto. */
[data-campo][data-error="1"] .gc-err{display:block}

/* El campo que falta tiembla. Recorrido corto y rápido —6 px, medio segundo—:
   lo suficiente para que el ojo lo encuentre después de que el diálogo se
   desplaza hasta él, sin que parezca que la página se rompió. */
[data-campo][data-tiembla="1"]{animation:gc-tiembla .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes gc-tiembla{
  0%,100%{transform:translateX(0)}
  12%{transform:translateX(-6px)}
  28%{transform:translateX(5px)}
  45%{transform:translateX(-4px)}
  62%{transform:translateX(3px)}
  80%{transform:translateX(-2px)}
}
@media (prefers-reduced-motion:reduce){
  [data-campo][data-tiembla="1"]{animation:none}
}

/* Franja horaria de entrega. El pedido entra de un día para otro, así que lo
   que se elige acá no es el día sino la hora de mañana. Va como fichas y no
   como un desplegable: cuatro opciones a la vista se eligen de un toque, y un
   <select> en el móvil abre una rueda que tapa el resto del checkout. */
.gc-franjas{border:0;padding:0;margin:.2rem 0 .9rem}
.gc-franja-dia{font-size:.85rem;color:var(--azul);font-weight:700;margin:0 0 .55rem}
.gc-franja-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
.gc-franjas label{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:11px;padding:.65rem .75rem;
  font-size:.88rem;transition:border-color .14s,background .14s}
.gc-franjas label:hover{border-color:var(--naranja)}
.gc-franjas input{margin:0;accent-color:var(--naranja);flex:none;width:1.05rem;height:1.05rem}
.gc-franjas label:has(input:checked){border-color:var(--naranja);background:#FFF4EC;font-weight:700}
.gc-franjas[data-error="1"] label{border-color:#d33}
.gc-modelo{margin-top:1rem}
.gc-modelo legend{padding:0}
.gc-modelo .gc-ayuda{font-size:.78rem;color:var(--gris);margin:-.3rem 0 .55rem;line-height:1.4}

.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:#13773D;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-pago{border:0;padding:0;margin:.4rem 0 .9rem;display:grid;gap:.5rem}
.gc-pago legend{font-size:.82rem;font-weight:700;padding:0;margin-bottom:.5rem}
.gc-pago label{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:13px;padding:.85rem .9rem;
  transition:border-color .14s,background .14s}
.gc-pago label:hover{border-color:var(--naranja)}
.gc-pago input{margin:.22rem 0 0;accent-color:var(--naranja);flex:none;width:1.1rem;height:1.1rem}
.gc-pago label:has(input:checked){border-color:var(--naranja);background:#FFF4EC}
.gc-pago b{display:block;font-size:.95rem;font-weight:700;color:var(--azul)}
.gc-pago small{display:block;font-size:.8rem;color:var(--gris);margin-top:.15rem;
  line-height:1.4}
/* Mercado Pago todavía no está conectado: se muestra apagado y dicho, no
   escondido. Si se oculta, nadie sabe que existe; si se deja activo, devuelve
   un error y se pierde el pedido. */
.gc-pago-off{opacity:.55;cursor:not-allowed;background:var(--papel)}
.gc-pago-off:hover{border-color:var(--linea)}
.gc-pago-off b::after{content:"Pronto";float:right;background:var(--azul);color:#fff;
  font-size:.68rem;font-weight:700;
  padding:.15rem .45rem;border-radius:999px;margin-left:.5rem}

.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:.35rem .7rem}
  .gc-pedir{padding:.55rem .85rem}
}

/* ---------- «ver más productos» ----------
   El carrusel enseña; esto es la salida hacia el catálogo completo, que es
   HTML servido y cada producto con su página. */
.gc-ver-mas{margin:1.6rem 0 0;text-align:center}
.gc-ver-mas a{display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--linea);border-radius:999px;padding:.7rem 1.4rem;
  font-weight:700;font-size:.95rem;color:var(--azul);text-decoration:none;
  background:var(--blanco);transition:border-color .15s,color .15s}
.gc-ver-mas a::after{content:"→";color:var(--naranja)}
.gc-ver-mas a:hover{border-color:var(--naranja);color:var(--naranja-t)}

/* ---------- pago confirmado ----------
   La pantalla que ve quien acaba de pagar. Antes acá no había nada: se le
   mandaba a WhatsApp con el pedido escrito, lo mismo que a quien paga contra
   entrega, y quien ya soltó la tarjeta se encontraba redactando un mensaje
   como si aún no hubiera comprado. Lo único que necesita es saber que salió
   bien, con qué código seguirlo y cuándo llega. */
.gc-ok .gc-dlg-cab{display:none}
.gc-ok .gc-dlg-cuerpo{text-align:center;padding-top:1.6rem}
.gc-ok-tic{width:4.5rem;height:4.5rem;margin:0 auto .9rem}
.gc-ok-tic svg{width:100%;height:100%;fill:none;stroke:var(--verde);
  stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.gc-ok-tic circle{stroke-dasharray:151;stroke-dashoffset:151;
  animation:gc-ok-circulo .5s ease-out forwards}
.gc-ok-tic path{stroke-dasharray:34;stroke-dashoffset:34;
  animation:gc-ok-check .3s .42s ease-out forwards}
@keyframes gc-ok-circulo{to{stroke-dashoffset:0}}
@keyframes gc-ok-check{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .gc-ok-tic circle,.gc-ok-tic path{animation:none;stroke-dashoffset:0}
}
.gc-ok-titulo{font-family:var(--display,"Archivo"),system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;font-size:1.65rem;margin:0;
  color:var(--azul)}
.gc-ok-sub{margin:.4rem 0 1.3rem;color:var(--gris);font-size:.96rem;
  line-height:1.5}
/* El código va grande y se copia de un toque: es lo único que tiene que
   guardar, y copiarlo a mano de una pantalla es como se pierde. */
.gc-ok-codigo{display:block;width:100%;border:0;cursor:pointer;font:inherit;
  background:var(--nata);border-radius:16px;padding:1rem;text-align:center}
.gc-ok-codigo span{display:block;font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.gc-ok-codigo b{display:block;font-family:var(--display,"Archivo"),system-ui,sans-serif;
  font-weight:800;font-size:2rem;letter-spacing:-.02em;color:var(--azul);
  margin:.15rem 0 .1rem}
.gc-ok-codigo small{display:block;font-size:.76rem;color:var(--gris)}
.gc-ok-codigo:hover{background:#e8edf4}
.gc-ok-cuando{margin:1rem 0 0;font-size:.94rem;color:var(--azul);font-weight:600}
.gc-ok .gc-dlg-pie{display:grid;gap:.6rem}
.gc-ok-seguir{display:block;text-align:center;background:var(--naranja);
  color:var(--azul);border-radius:12px;padding:1rem;text-decoration:none;
  font-weight:800;font-size:1.02rem}
.gc-ok-seguir:hover{background:var(--brasa)}
/* Verde y secundario: abre el chat de verdad, pero preguntar es opcional. */
.gc-ok-wa{display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:transparent;color:var(--verde-2);border-radius:12px;padding:.85rem;
  text-decoration:none;font-weight:700;font-size:.95rem;
  box-shadow:inset 0 0 0 2px rgba(31,170,89,.35)}
.gc-ok-wa:hover{background:rgba(31,170,89,.08)}
.gc-ok-wa svg{width:1.15em;height:1.15em;fill:currentColor}

/* ---------- la equis de la ventana de pago ----------
   El cierre de Izipay SÍ existe, pero mide 28x28 px y el icono 18x18. El
   mínimo para un objetivo táctil son 44x44 (Apple) / 48x48 (WCAG): con 28 el
   dedo falla en un móvil de verdad, y la ventana se siente BLOQUEANTE aunque
   técnicamente se pueda cerrar. Un cliente atrapado en una pasarela no vuelve.
   El botón es de Krypton pero se pinta dentro de nuestra página, así que se
   puede agrandar el área sin tocar su icono. */
.kr-close-popup{
  min-width:44px!important;min-height:44px!important;
  display:flex!important;align-items:center;justify-content:center;
  cursor:pointer;border-radius:50%}
.kr-close-popup:hover{background:rgba(1,21,54,.07)}
/* La equis en azul macizo: gris #808080 sobre la cabecera gris de Izipay no
   se distinguía, y un cierre que no se ve es una ventana sin salida. */
.kr-close-popup .icon-close-popup{font-size:22px!important;
  color:var(--azul)!important;fill:var(--azul)!important;
  border-color:var(--azul)!important;background:#fff}

/* La ventana de Izipay es `fixed` con z-index 9999, pero su contenedor
   `.kr-smart-form` lleva `position:relative; z-index:1` y la encierra en una
   capa de nivel 1: la cabecera fija del sitio (30) le pasaba por encima y le
   tapaba la franja de arriba —la de la equis—. Mientras está abierta, ese
   contenedor deja de apilar y la ventana sube al nivel de la página. */
body:has(.kr-modal-open) .kr-smart-form{z-index:auto!important}
/* Y fondo oscurecido: sin él la ventana flotaba sobre el checkout a la vista
   y no se leía como un paso que hay que terminar o cerrar. */
body:has(.kr-modal-open) .kr-smart-form-modal-wrapper{background:rgba(1,21,54,.62)!important}
/* El nombre de la tienda en la franja de Izipay salía en Times: Krypton no le
   pone familia y el hueco hereda la del navegador. */
.kr-popin-shop-name,.kr-popin-shop-name *{font-family:"Hanken Grotesk",system-ui,sans-serif!important;
  font-weight:700!important;text-align:center!important;color:var(--azul)!important}

/* Zonas de toque de 44 px (auditoría 15-oct-2026): en el celular los − y +,
   el nombre del producto y los botones de la barra medían 27–41 px. */
.gc-paso button{min-width:44px}
.gc-card h3 a{display:inline-block;padding:9px 0;margin:-9px 0}
.gc-ver,.gc-pedir{min-height:44px}

/* ---- mapa de entrega (paso 2): pin fijo al centro, se mueve el mapa */
.gc-ubic .gc-mapa{position:relative;height:250px;border-radius:14px;overflow:hidden;border:1px solid var(--linea);background:#eef1f5;isolation:isolate}
.gc-ubic .gc-mapa-lienzo{position:absolute;inset:0;z-index:0}
.gc-ubic .gc-mapa-pin{position:absolute;left:50%;top:50%;z-index:500;width:34px;height:34px;margin:-34px 0 0 -17px;pointer-events:none;
  background:var(--naranja);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 6px 14px rgba(1,21,54,.35);transition:transform .18s ease}
.gc-ubic .gc-mapa-pin::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff}
.gc-ubic .gc-mapa::after{content:"";position:absolute;left:50%;top:50%;z-index:499;width:12px;height:5px;margin:-2px 0 0 -6px;border-radius:50%;background:rgba(1,21,54,.35);pointer-events:none}
.gc-ubic[data-moviendo="1"] .gc-mapa-pin{transform:translateY(-10px) rotate(-45deg)}
.gc-ubic .gc-mapa-tip{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:500;background:var(--tinta);color:#fff;font-size:.78rem;font-weight:700;
  padding:.35rem .7rem;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .2s}
.gc-ubic[data-ubicado="1"] .gc-mapa-tip{opacity:0}
.gc-ubic[data-impreciso="1"] .gc-mapa-tip{opacity:1}
.gc-ubic .gc-mapa-gps{position:absolute;left:10px;bottom:10px;z-index:500;display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer;
  background:#fff;color:var(--tinta);font:inherit;font-size:.85rem;font-weight:800;padding:.6rem .9rem;border-radius:999px;box-shadow:0 4px 14px rgba(1,21,54,.22)}
.gc-ubic .gc-mapa-gps svg{color:var(--naranja)}
.gc-ubic:not([data-ubicado="1"]) .gc-mapa-gps{background:var(--naranja);color:#fff;animation:gc-gps-latido 2.2s ease-in-out infinite}
.gc-ubic:not([data-ubicado="1"]) .gc-mapa-gps svg{color:#fff}
.gc-ubic .gc-mapa-gps:disabled{opacity:.7;animation:none}
@keyframes gc-gps-latido{0%,100%{box-shadow:0 4px 14px rgba(248,101,0,.35),0 0 0 0 rgba(248,101,0,.45)}50%{box-shadow:0 4px 14px rgba(248,101,0,.35),0 0 0 9px rgba(248,101,0,0)}}
@media (prefers-reduced-motion:reduce){.gc-ubic .gc-mapa-gps{animation:none!important}.gc-ubic .gc-mapa-pin{transition:none}}
.gc-ubic .gc-ubic-cerca{margin:.45rem 0 0;font-size:.85rem;font-weight:600;color:var(--tinta)}
.gc-ubic .gc-ubic-cerca:empty{display:none}
.gc-ubic .gc-ubic-cerca[data-otro="1"]{color:var(--naranja-t)}
.gc-ubic[data-fallo="1"] .gc-mapa{display:none}
.gc-ubic .leaflet-control-attribution{font-size:9px}
.gc-ubic .leaflet-container{font:inherit}
/* Tono suave tipo «voyager»: los datos son de OpenStreetMap tal cual; solo
   se apagan los colores del fondo para que el pin naranja mande. */
.gc-ubic .leaflet-tile-pane{filter:saturate(.55) brightness(1.04) contrast(.92)}