/* El contenido va POR ENCIMA de la franja de portada.
   La aurora sobresale 3.2rem por debajo de .tope para poder disolverse en
   blanco; como .tope es un contexto de apilado, ese sobrante se pintaba encima
   de <main> (un bloque normal se pinta ANTES que un contexto de apilado) y
   tapaba el titulo "Paletas". Con position+z-index main recupera su sitio. */
main,.visita,.pie{position:relative;z-index:1}

/* Paletas Tisha · web pública.
   Regla de oro: solo se animan transform y opacity. Nada de blur en scroll. */

/* ---------- cabecera ---------- */
/* Arriba se apoya limpia sobre la aurora (sin barra, sin blur). En cuanto
   se baja un poco, tienda.js le pone .solida y se vuelve blanca para que el
   texto siga leyéndose sobre el contenido. Solo cambian color y sombra. */
.cab{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s var(--rapido),border-color .25s var(--rapido),box-shadow .25s var(--rapido)}
/* Sin backdrop-filter: desenfocar lo de detras en cada fotograma del scroll
   era lo que mas pesaba al bajar por la carta en un Android de gama baja. */
.cab.solida{background:#fff;border-bottom-color:var(--linea)}
.cab-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
/* Arriba va el nombre escrito y en la portada el sello: la gente reconoce
   el sello de lejos, asi que ese es el que manda en grande. */
.marca{display:flex;align-items:center;gap:.65rem;line-height:1}
.marca-tisha{font-size:1.95rem;line-height:1;display:block;padding-bottom:.06em}
@media(max-width:430px){.marca-tisha{font-size:1.75rem}}
.cab-acc{display:flex;align-items:center;gap:.55rem}
.bolsa{position:relative;display:inline-flex;align-items:center;gap:.42rem;
  padding:.55rem .95rem;border-radius:999px;border:1px solid var(--panel-borde);
  background:#fff;cursor:pointer;color:var(--tinta);font-size:.9rem;font-weight:500;line-height:1;
  transition:transform .18s var(--suave),border-color .18s}
.bolsa-t{white-space:nowrap}
@media(max-width:380px){.bolsa-t{display:none}}
.bolsa:active{transform:scale(.93)}
.bolsa:hover{border-color:rgba(23,16,13,.2)}
.bolsa-n{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--rojo);color:#fff;font-size:.68rem;font-weight:600;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px #fff}

/* ---------- portada ---------- */
/* franja compacta: ocupaba casi media pantalla para decir un nombre */
/* menos aire arriba: el rotulo sube. Abajo queda sitio para el desvanecido */
.hero{padding:.9rem 0 2.1rem}
.hero-eti{margin:0 0 .8rem;font-size:.58rem}
.hero-h1{margin:0;line-height:.92}
/* El sello es cuadrado (460x459). aspect-ratio reserva el hueco exacto antes
   de que cargue, asi el texto de abajo no da el salto al aparecer. */
/* Sin filter: en algunos Android el drop-shadow de una imagen recortada se
   pinta como un CUADRADO detras del circulo, y ademas cuesta pintarlo. */
.hero-logo{display:block;margin:0 auto;width:clamp(132px,44vw,204px);height:auto;
  aspect-ratio:1/1;object-fit:contain}
/* <picture> es un contenedor en linea: sin esto el <img> deja de centrarse */
.hero-h1 picture{display:block}
/* CENTRADO OPTICO. Yellowtail es cursiva con adorno: su caja de texto queda
   centrada pero la TINTA de la letra cae 6.9px a la derecha (medido sobre los
   pixeles pintados, no sobre la caja). En em para que valga a cualquier tamano:
   6.9 / 66.3px de fuente = 0.104em. */
.hero-tisha{font-size:clamp(3.9rem,17vw,6.8rem);display:inline-block;
  transform:translateX(-.104em)}
.hero-p{margin:.7rem auto 0;max-width:36ch;color:var(--tinta2);font-size:.98rem}
.hero-lugar{display:inline-flex;align-items:center;gap:.4rem;margin:1.4rem 0 0;
  font-size:.86rem;color:var(--tinta3)}
.hero-lugar .ic{color:var(--rojo)}

/* ---------- carta ---------- */
.grupo{padding:2rem 0 .5rem}
.grupo:first-child{padding-top:clamp(1.6rem,4vw,2.4rem)}
.grupo-h2{font-size:clamp(1.25rem,3.6vw,1.6rem);font-weight:600;letter-spacing:-.025em;margin:0 0 1.3rem}
/* grid-auto-rows:1fr iguala TODAS las filas. Sin esto, un nombre de 3 lineas
   hacia su tarjeta mas alta que la de al lado y los precios no se alineaban:
   en Android salian alturas de 303, 285 y 266px en la misma cuadricula. */
.rejilla{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr}
@media(min-width:620px){.rejilla{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media(min-width:920px){.rejilla{grid-template-columns:repeat(4,1fr);gap:1.15rem}}

/* ---------- carta sin fotos: lista compacta ----------
   Es el estado real hasta que suban las imagenes. Cada sabor ocupa una fila
   legible en lugar de una tarjeta con un cuadro vacio de 170px. */
.rejilla-lista{grid-template-columns:1fr;gap:.5rem}
.rejilla-lista .prod{flex-direction:row;align-items:stretch}
.rejilla-lista .prod-cuerpo{flex-direction:row;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 1rem .9rem 1.15rem;width:100%}
.rejilla-lista .prod-nom{font-size:1.02rem;font-weight:500}
.rejilla-lista .prod-pie{margin-top:0;padding-top:0;gap:1rem;flex-shrink:0}
.rejilla-lista .prod-precio{font-size:1.02rem}
.etiq-linea{position:static;display:inline-block;margin-left:.5rem;vertical-align:.12em}
@media(min-width:700px){.rejilla-lista{grid-template-columns:repeat(2,1fr);gap:.65rem}}
@media(min-width:1040px){.rejilla-lista{grid-template-columns:repeat(3,1fr)}}

.prod{background:var(--panel);border:1px solid var(--panel-borde);border-radius:20px;
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s var(--suave),box-shadow .22s var(--suave)}
@media(hover:hover){.prod:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}}
.prod.agotado{opacity:.55}
/* 4:5 en vertical: una paleta es alta, y en cuadrado se perdia el palito o
   la punta. Asi la foto manda en la tarjeta, que es lo que vende. */
.prod-foto{position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,#FBF1E4 0%,#fff 100%)}
/* absoluta y no height:100%: contra una caja definida por aspect-ratio el
   porcentaje no se resuelve y la imagen salia 217px en una caja de 169,
   recortada por abajo de cualquier manera. */
.prod-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.etiq{position:absolute;top:.55rem;left:.55rem;background:rgba(23,16,13,.82);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:999px}
.prod-cuerpo{padding:.85rem .9rem .9rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
/* min-height de DOS lineas: asi la tarjeta de un nombre corto mide igual que
   la de uno largo, y las cuadriculas de "Paletas" y "Otros" quedan a la misma
   altura entre si (cada grid se alinea solo por dentro). */
.prod-nom{margin:0;font-size:.97rem;font-weight:500;line-height:1.28;letter-spacing:-.015em;
  min-height:2.56em}
.prod-desc{margin:0;font-size:.79rem;color:var(--tinta3);line-height:1.4}
/* nowrap arriba + este min-width:0: "13 Bs" se partia en dos lineas ("13" y
   "Bs" debajo) porque el boton apretaba la columna del precio. */
.prod-pie{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;
  justify-content:space-between;gap:.45rem;min-width:0}
.prod-pie .anadir{padding:.54rem .8rem .54rem .68rem}
@media(max-width:400px){ .prod-nom{font-size:.88rem;min-height:2.56em} }
/* A 320px "Frutilla rellena de leche condensada" no entra en dos lineas por
   mucho que baje la letra, asi que ahi se reservan TRES para todas y siguen
   quedando iguales entre si. */
@media(max-width:340px){ .prod-nom{font-size:.82rem;min-height:3.84em} }
/* A 320px "13 Bs" + "Añadir" no caben en una linea y el boton se salia de la
   tarjeta. Debajo cabe entero y ademas el area de toque es mucho mayor. */
@media(max-width:359px){
  .prod-pie{flex-direction:column;align-items:stretch;gap:.5rem}
  .prod-pie .anadir{justify-content:center;width:100%}
}
.prod-precio{font-weight:600;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
/* Era un circulito con un "+" y nada mas: quien no conoce la web no sabia
   que hacia. Ahora lleva la palabra y se lee de un vistazo. */
.anadir{position:relative;display:inline-flex;align-items:center;gap:.34rem;
  padding:.56rem .95rem .56rem .78rem;border-radius:999px;border:0;
  background:var(--rojo);color:#fff;font-size:.9rem;font-weight:500;line-height:1;
  cursor:pointer;flex-shrink:0;white-space:nowrap;
  box-shadow:0 4px 12px -5px rgba(198,40,30,.7);
  transition:transform .18s var(--suave),background .18s}
.anadir:active{transform:scale(.95)}
.anadir::after{content:"";position:absolute;inset:-8px;border-radius:999px}
.anadir-n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--tinta);color:#fff;font-size:.68rem;font-weight:600;
  display:none;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff}
.anadir.con-n .anadir-n{display:grid}
.anadir{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .18s}
.anadir:active{transform:scale(.92);transition-duration:.08s}
@media(hover:hover){.anadir:hover{background:var(--rojo-osc)}}
/* nada de borde rojo: se leia como error. El numero en el boton lo dice. */
.prod.puesto{box-shadow:var(--sombra-alta)}
.anadir-n{font-weight:600;font-size:.95rem;line-height:1;font-variant-numeric:tabular-nums}


/* ---------- visítanos ---------- */
/* una sola banda tenue para cortar el blanco, al estilo Stripe */
.visita{padding:3.6rem 0 4rem;background:#FBF8F4;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin-top:2.5rem}
.datos{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dato{padding:1.5rem}
.dato-ic{display:block;margin-bottom:.8rem;color:var(--rojo)}
.dato h3{margin:0 0 .5rem;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.dato p{margin:0 0 .35rem;color:var(--tinta2);font-size:.92rem}
.lnk{color:var(--rojo);font-weight:500}
.lnk:hover{text-decoration:underline}
.hueco{padding:3rem 1.5rem}

/* ---------- pie ---------- */
.pie{background:#fff;padding:3.4rem 0 calc(2.2rem + env(safe-area-inset-bottom));margin-top:0}
.pie-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.pie-tisha{font-size:2.4rem}
.pie-txt{margin:0;font-size:.88rem;color:var(--tinta2);max-width:42ch;line-height:1.6}
.redes{display:flex;gap:1.3rem;align-items:center;margin-top:.2rem}
.red{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  transition:transform .28s var(--suave),background .2s}
.red:hover{transform:translateY(-3px) scale(1.06);background:#FBF8F4}
.red-tk .tk{position:relative;width:22px;height:22px}
.red-tk .tk svg{position:absolute;inset:0}
.pie-linea{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--linea),transparent);margin:.4rem 0}
.pie-cr{margin:0;font-size:.78rem;color:var(--tinta3);letter-spacing:0}
/* en pantallas estrechas el interletrado lo partia en dos lineas */
@media(max-width:430px){.pie-cr{font-size:.74rem}}
.tuerca{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--tinta3);opacity:.35;transition:opacity .2s,transform .5s var(--suave)}
.tuerca:hover{opacity:1;transform:rotate(90deg)}

/* ---------- bolsa ---------- */
.bolsa-ui{position:fixed;inset:0;z-index:80;overscroll-behavior:contain;touch-action:none}
.bolsa-lista{touch-action:pan-y}
.bolsa-fondo{position:absolute;inset:0;background:rgba(23,16,13,.42)}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
/* En el telefono el pedido es una hoja que sube desde abajo y se cierra
   arrastrandola, como en el iPhone. En pantalla grande sigue saliendo por la
   derecha. La mueve hoja.js con un muelle (solo transform). */
.bolsa-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;
  background:#fff;display:flex;flex-direction:column;border-radius:24px 24px 0 0}
@media(min-width:600px){
  .bolsa-panel{left:auto;top:0;height:100dvh;max-height:none;width:410px;border-radius:0;
    box-shadow:-24px 0 60px -30px rgba(23,16,13,.5)}
  .bolsa-cab .hoja-tirador{display:none}
}
.bolsa-cab{position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:1.35rem 1.2rem .9rem;border-bottom:1px solid var(--linea);touch-action:none}
.bolsa-cab .hoja-tirador{position:absolute;top:.5rem;left:50%;margin-left:-20px;width:40px;height:5px;
  border-radius:999px;background:rgba(23,16,13,.16)}
@media(min-width:600px){.bolsa-cab{padding-top:calc(1.1rem + env(safe-area-inset-top));touch-action:auto}}
.bolsa-cab h2{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.icono-b{width:36px;height:36px;border-radius:50%;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--tinta2)}
.icono-b:hover{background:rgba(23,16,13,.05)}
/* overscroll-behavior:contain evita que al llegar al final de la lista el
   scroll siga en la pagina de detras, que era lo que se veia "re feo". */
.bolsa-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:.6rem 1.2rem}
.bolsa-vacia{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;height:100%;min-height:180px;color:var(--tinta3);text-align:center}
.bolsa-vacia .silueta{width:56px;opacity:.14}
.linea{display:flex;gap:.85rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--linea)}
.linea-cuerpo{flex:1;min-width:0;display:grid;gap:.6rem}
/* space-between dejaba 125px de vacio entre el contador y el subtotal y la
   fila se veia descuadrada. Ahora van juntos: el grupo se lee como una unidad. */
.linea-abajo{display:flex;align-items:center;justify-content:flex-start;gap:1.15rem}
.linea-sub{font-weight:600;font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap;color:var(--tinta)}
.linea:last-child{border-bottom:0}
/* Miniatura VERTICAL (4:5), como la foto de la carta. En un cuadrado de 58px
   a la paleta se le cortaban la punta y el palito y se veia rara. La imagen va
   en absoluto: con height:100% contra la caja no se resolvia bien la altura. */
.linea-foto{position:relative;width:60px;height:75px;border-radius:14px;flex-shrink:0;overflow:hidden;
  background:#F7EFE4;display:grid;place-items:center}
.linea-foto picture{position:absolute;inset:0;display:block}
.linea-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease-out}
.linea-foto .silueta{width:52%;opacity:.18}
.linea-nom{margin:0;font-size:.98rem;font-weight:500;line-height:1.32}
.linea-pre{margin:-.35rem 0 0;font-size:.82rem;color:var(--tinta3)}
/* ---------- cantidad: una sola pieza, como el selector del iPhone ----------
   Eran dos circulos sueltos con el numero en medio: en el telefono se veian
   imperfectos y, apretados por el flex, dejaban de ser circulos. Ahora es una
   capsula de tres celdas de medida fija, que no se puede deformar. Al tocar,
   solo se encoge el icono (transform), que es lo mas barato de animar. */
.cant{display:inline-grid;grid-template-columns:46px minmax(34px,auto) 46px;height:42px;flex-shrink:0;
  background:#F3EDE6;border-radius:999px;align-items:stretch}
.cant-b{position:relative;display:grid;place-items:center;border:0;padding:0;margin:0;background:transparent;
  color:var(--tinta);cursor:pointer;border-radius:999px;-webkit-user-select:none;user-select:none}
.cant-b svg{display:block;width:18px;height:18px;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.cant-b:active{background:rgba(23,16,13,.07)}
.cant-b:active svg{transform:scale(.76);transition-duration:.06s}
.cant-b.quitar{color:var(--rojo)}
.cant-n{display:grid;place-items:center;font-size:1.02rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--tinta);padding:0 .15rem}
.linea-abajo{justify-content:space-between}
@media(prefers-reduced-motion:reduce){.cant-b svg,.linea-foto img{transition:none}}
.bolsa-pie{padding:1.1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);background:#fff}
.bolsa-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.9rem}
.bolsa-total span{font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta3)}
.bolsa-total strong{font-size:1.5rem;font-weight:600;letter-spacing:-.03em}

/* ---------- aviso ---------- */
.aviso{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:90;background:var(--tinta);color:var(--crema-cla);
  padding:.7rem 1.3rem;border-radius:999px;font-size:.88rem;font-weight:500;
  box-shadow:var(--sombra-alta);animation:sube .24s var(--suave)}
@keyframes sube{from{transform:translate(-50%,14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}


/* ---------- superficies del navegador ----------
   Lo que no dibuje yo tambien es parte del diseno. */
::selection{background:rgba(198,40,30,.16);color:var(--tinta)}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;border-radius:6px}
input,textarea{caret-color:var(--rojo)}


/* ---------- barra de pedido ----------
   Aparece sola en cuanto hay algo. Es el camino evidente a pagar para quien
   no sabe que existe un carrito arriba. */
.barra-pedido{position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:.7rem clamp(1.1rem,4vw,1.6rem) calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,#fff 62%,rgba(255,255,255,0));
  animation:subeBarra .32s var(--suave)}
@keyframes subeBarra{from{transform:translateY(110%)}to{transform:none}}
.barra-b{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.2rem;
  font-size:1rem;max-width:640px;margin-inline:auto}
.barra-n{min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.barra-total{margin-left:auto;font-weight:600}
/* que la barra no tape la ultima fila de sabores */
body.con-barra main{padding-bottom:4.6rem}

/* ---------- sin zoom por doble toque ----------
   Se quejaba de que al mirar la carta se le hacia zoom sin querer.
   manipulation quita el doble toque pero DEJA el pellizco para ampliar. */
/* pan-x pan-y (y no manipulation) tambien bloquea el pellizco: la pagina no
   hace zoom de ninguna forma, como pidio. */
html{touch-action:pan-x pan-y}
/* las fotos ya no se abren ni sacan el menu de iOS al mantener pulsado */
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;pointer-events:none}


/* ---------- abierto / cerrado ----------
   Solo dentro de la tarjeta de Horario, como una linea bajo el titulo. En la
   portada, como pastilla, el dueño lo rechazo: "se ve muy generico".
   tienda.js lo pone al dia cada minuto con la hora de Bolivia. */
.estado{display:flex;align-items:center;gap:.5rem;margin:-.1rem 0 1rem;
  font-size:.9rem;font-weight:600;color:var(--tinta2)}
.estado-punto{width:8px;height:8px;border-radius:50%;background:var(--rojo);flex-shrink:0}
.estado.abierto{color:#0E7A3C}
.estado.abierto .estado-punto{background:#0E9F52}
.estado.pronto{color:#9A6B12}
.estado.pronto .estado-punto{background:#E0A33C}

/* horario en Visitanos: filas como una lista del iPhone, hoy resaltado */
.horario{list-style:none;margin:.2rem 0 0;padding:0}
.horario li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem 0;border-top:1px solid var(--linea);font-size:.92rem;color:var(--tinta2)}
.horario li:first-child{border-top:0;padding-top:.1rem}
.horario li.hoy{color:var(--tinta);font-weight:600}
.horario em{font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.04em;
  color:var(--rojo);background:rgba(198,40,30,.1);padding:.1rem .45rem;border-radius:999px;
  margin-left:.35rem;vertical-align:.1em}
@media(prefers-reduced-motion:reduce){.anadir{transition:none}}