/* ==========================================================================
   Café 107 — Carta digital (estilos exclusivos de esta página)
   Los colores, campos, botones, la portada (.intro), el grupo de píldoras
   (.seg) y el fondo de marca (.ground) vienen de tokens.css + base.css.
   Acá solo va lo que no existe en ninguna otra página.
   ========================================================================== */

/* Una sola columna de lista: a más ancho quedaba medio renglón de aire entre
   el nombre del producto y su precio. La cabecera acompaña (ver tokens.css). */
body{--maxw-content:820px;}
.app{max-width:var(--maxw-content);margin:0 auto;padding:34px var(--pad-x) 40px;}

/* ---------- Portada ------------------------------------------------------
   A diferencia del Club, acá la portada va alineada a la izquierda: es la
   entrada a una lista larga, no la cabecera de un formulario centrado. */
.intro{text-align:left;margin-bottom:0;}
.intro-sub{margin:12px 0 0;}
.intro .seg{margin-top:20px;}

/* ---------- Carrusel de categorías --------------------------------------
   Pestañas subrayadas sobre una línea continua. Las flechas se quedan: la
   carta tiene nueve categorías y en escritorio no hay gesto de arrastre. */
.cats-wrap{position:relative;border-bottom:1px solid var(--line);margin-top:30px;}
.cats{
  display:flex;gap:30px;overflow-x:auto;
  scrollbar-width:none;scroll-behavior:smooth;
}
.cats::-webkit-scrollbar{display:none;}
.cat-btn{
  flex-shrink:0;border:none;background:none;cursor:pointer;
  padding:0 0 13px;margin-bottom:-1px; /* el subrayado se apoya en la línea */
  font-family:var(--font-body);font-size:15px;color:var(--text-muted);
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.cat-btn:hover{color:var(--text);}
.cat-btn.active{border-bottom-color:var(--accent);color:var(--text);font-weight:600;}

.cats-arrow{
  position:absolute;top:0;bottom:1px;width:40px;border:none;cursor:pointer;
  display:flex;align-items:center;z-index:2;background:none;padding:0;
  transition:opacity var(--t-fast);
}
.cats-arrow.prev{left:0;justify-content:flex-start;background:linear-gradient(to right,var(--bg) 55%,transparent);}
.cats-arrow.next{right:0;justify-content:flex-end;background:linear-gradient(to left,var(--bg) 55%,transparent);}
.cats-arrow span{
  width:27px;height:27px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--text);box-shadow:var(--shadow-sm);margin:0 4px;
}
.cats-arrow.hide{opacity:0;pointer-events:none;}

/* ---------- Productos ----------------------------------------------------
   Lista con reglas horizontales, no una pila de tarjetas: son hasta once
   productos por categoría y once cajas seguidas se leen como ruido. */
.menu-section{margin-bottom:2px;}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:28px 0 6px;
}
.sec-head h2{font-size:27px;margin:0;}
.sec-head .count{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-subtle);white-space:nowrap;
}

/* Nota de la categoría: una condición para pedir lo que viene debajo (hoy, el
   aviso 18+ de Espirituosos). En papel teñido y no en gris de texto de ayuda:
   con el gris se leía como una descripción más de la carta y se saltaba. */
.sec-nota{
  margin:0 0 16px;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(168,64,47,.07);border-left:3px solid var(--accent);
  font-size:13px;line-height:1.5;color:var(--text);text-wrap:pretty;
}

.item{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:20px;
  padding:15px 6px;border-top:1px solid var(--line);
  transition:background var(--t-fast);
}
/* La sección que tiene fotos reserva la columna en TODAS sus filas, tengan
   foto o no: si solo la reservaran las que la tienen, los nombres de las demás
   arrancarían pegados al borde y la lista quedaría en zigzag. */
.con-fotos .item{grid-template-columns:72px minmax(0,1fr) auto auto;}

/* Fondo oscuro en el marco, no crema: las fotos de los jugos son de estudio
   sobre negro y llegan al borde, mientras que las que no son cuadradas dejan
   franja al ajustarse. Con el marco oscuro esa franja no se ve como un hueco. */
.item-foto{
  width:72px;height:72px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--ink-700);
}
/* Sin foto no se dibuja nada: el hueco mantiene la columna y ya. Un marcador
   de relleno fingiría una foto que no existe. */
.item-foto.is-vacio{background:none;}
/* contain y no cover: recortar para llenar el cuadrado le cortaría el borde al
   vaso. Se prefiere la franja antes que perder parte del producto. */
.item-foto img{width:100%;height:100%;object-fit:contain;display:block;}
.menu-section .item:last-child{border-bottom:1px solid var(--line);}
.item:hover{background:rgba(94,193,190,.07);}
.item-info{min-width:0;}
.item-info .name{font-size:17px;font-weight:600;margin-bottom:3px;}
.item-info .desc{font-size:14px;line-height:1.4;color:var(--text-muted);}
.item-price{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:21px;line-height:1;white-space:nowrap;
}

/* ---------- Elegir sabor / combinación ----------
   Van dentro del bloque de texto de la fila (ver renderMenu), así que no tocan
   ninguna de las dos rejillas de .item. Píldoras y no un <select> porque las
   opciones son pocas y conviene verlas todas sin abrir nada — y porque en el
   teléfono un desplegable nativo tapa media pantalla. */
.opt-field{margin-top:9px;}
.opt-label{
  margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-subtle);
}
.opt-group{display:flex;flex-wrap:wrap;gap:6px;}
.opt-chip{
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:transparent;
  font-family:var(--font-body);font-size:13px;line-height:1.2;
  color:var(--text-muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.opt-chip:hover{border-color:var(--text);color:var(--text);}
/* Elegido: el mismo relleno oscuro del control +/- y de las píldoras del sitio,
   para que se lea como "activo" y no como otro tipo de botón. El estado no va
   solo en el color — aria-pressed lo dice, y es lo que se anuncia. */
.opt-chip[aria-pressed="true"]{
  background:var(--text);border-color:var(--text);color:var(--surface);
}

/* ---------- Sumar / restar ---------- */
.qty-control{display:flex;align-items:center;flex-shrink:0;}
.add-btn{
  width:36px;height:36px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:transparent;color:var(--text);
  font-size:19px;font-weight:600;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.add-btn:hover{background:var(--text);border-color:var(--text);color:var(--surface);}
/* Apagado mientras falta elegir una opción. Se deja a la vista, atenuado: la
   fila conserva su forma y el motivo está al lado, en "Elige tu sabor". */
.add-btn:disabled{opacity:.3;cursor:default;}
.add-btn:disabled:hover{
  background:transparent;border-color:var(--line-strong);color:var(--text);
}
.stepper{
  display:flex;align-items:center;gap:10px;
  background:var(--text);border-radius:var(--r-pill);padding:4px 6px;
}
.stepper button{
  background:none;border:none;color:var(--surface);font-size:16px;
  width:26px;height:26px;cursor:pointer;font-weight:700;line-height:1;
}
.stepper .n{
  color:var(--surface);font-weight:700;font-size:14px;
  min-width:14px;text-align:center;font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   El pedido
   ==========================================================================
   Cuadro emergente en todos los anchos: se abre desde la barra del carrito y
   se cierra con la X, con el velo o con Escape.
   ========================================================================== */

.drawer{
  position:fixed;right:0;top:0;bottom:0;width:100%;max-width:420px;
  background:var(--surface);z-index:31;transform:translateX(100%);
  transition:transform var(--t-med);display:flex;flex-direction:column;
}
.drawer.show{transform:translateX(0);}
.overlay{position:fixed;inset:0;background:rgba(46,29,20,.5);z-index:30;display:none;}
.overlay.show{display:block;}

.drawer-head{
  padding:22px var(--pad-x) 14px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
/* nowrap: con el selector al lado, "Tu pedido" se partía en dos renglones en
   pantallas de 320px y la cabecera crecía al doble. Antes de partirse el
   título se encoge el selector, que tiene min-width:0 y trunca solo. */
.drawer-head h2{font-size:23px;margin:0;white-space:nowrap;}

/* Selector de canal, pegado al lado del botón de cerrar. `margin-left:auto` lo
   manda a la derecha y deja el título a la izquierda, sin repartir el aire
   entre los tres como haría el space-between de .drawer-head.

   16px de letra, aunque al lado del título parezcan grandes: por debajo de ese
   tamaño, iOS amplía la página al desplegar un control de formulario y no la
   devuelve. Es la misma razón por la que .input-box es de 16px. El alto se
   recorta con el padding, que no tiene ese efecto. */
.drawer-canal{
  margin-left:auto;min-width:0;max-width:56%;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.2;
  padding:6px 8px;cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.drawer-canal:hover{border-color:var(--teal-500);}
.drawer-canal:focus-visible{
  border-color:var(--teal-700);outline:none;
  box-shadow:0 0 0 3px rgba(94,193,190,.22);
}
.close-btn{
  background:none;border:none;font-size:22px;cursor:pointer;
  color:var(--text-muted);line-height:1;padding:4px 8px;
}
.drawer-body{flex:1;overflow-y:auto;padding:8px var(--pad-x) 14px;}

.drawer-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-top:1px solid var(--line);gap:10px;
}
.drawer-item:first-child{border-top:none;}
.drawer-item .di-name{font-size:15px;font-weight:500;}
.drawer-item .di-price{
  font-family:var(--font-mono);font-size:12px;color:var(--text-subtle);margin-top:2px;
}
.empty-cart{text-align:center;padding:48px 20px;color:var(--text-subtle);font-size:14px;}

.drawer-foot{
  padding:16px var(--pad-x) 22px;border-top:1px solid var(--line);
  padding-bottom:calc(22px + env(safe-area-inset-bottom));
}
.total-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;}
.total-row .t-l{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);}
.total-row .t-v{font-family:var(--font-display);font-weight:var(--fw-display);font-size:32px;line-height:1;}

.name-field{margin-bottom:12px;}
.addr-field{margin-bottom:12px;display:none;}
.addr-field.show{display:block;}

/* ---------- Código promocional ---------- */
.promo-field{margin-bottom:14px;}

/* Caja y botón en una fila: el botón es parte del campo, no un paso aparte
   debajo. `stretch` (el valor por defecto de align-items) le da al botón el
   alto exacto del input, así que no hay que sincronizar dos paddings a mano. */
.promo-row{display:flex;gap:8px;}
.promo-row .promo-input{flex:1;min-width:0;}
/* El padding vertical lo pone el estirado, no el botón; el horizontal se
   recorta respecto a .btn-solid para no quitarle ancho a la caja de texto. */
.promo-btn{flex:none;padding:0 16px;}
/* Se muestra en mayúsculas mientras se escribe; la normalización real la hace
   JS al enviar. Con text-transform el cursor no salta, cosa que sí pasaría
   reasignando el value en cada tecla. */
.promo-input{text-transform:uppercase;letter-spacing:.06em;}
/* El placeholder, más chico que el texto que se teclea: lleva una frase entera
   —la ayuda que antes iba debajo del campo— y a 16px se cortaba a media
   palabra. Se reduce SOLO el placeholder, nunca el font-size del input: iOS
   mira el del campo para decidir si amplía la página al enfocarlo. */
.promo-input::placeholder{text-transform:none;letter-spacing:0;font-size:13px;}
.field-hint{font-size:11.5px;color:var(--text-muted);margin:5px 0 0;line-height:1.45;}
/* Sin texto no deja ni el margen: este renglón aparece solo mientras hay algo
   que decir del código, y en el cajón el alto es lo que más escasea. */
.field-hint:empty{display:none;}
/* Confirmación del código comprobado. En verde y en negrita porque es la única
   respuesta afirmativa del formulario: con el gris del texto de ayuda se leía
   como una explicación más y no como un "listo, ese código sirve". El color no
   va solo — el texto ya dice "¡Código válido!". */
.field-hint.is-ok{color:var(--success);font-weight:600;}
.wa-note{font-size:11.5px;color:var(--text-muted);text-align:center;margin:10px 0 0;line-height:1.5;}

/* ---------- Barra flotante del carrito ---------- */
.cart-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:none;justify-content:center;padding:14px 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom)); /* notch de iPhone */
  background:linear-gradient(to top,var(--bg) 60%,transparent);
}
.cart-bar.show{display:flex;}
.cart-bar-inner{
  width:100%;max-width:600px;background:var(--accent);color:var(--on-accent);
  border:none;border-radius:14px;padding:14px 18px;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(46,29,20,.4);
  font-family:var(--font-body);font-weight:700;font-size:14.5px;
}
.cart-bar-inner .count{
  background:rgba(251,247,236,.25);border-radius:8px;
  padding:3px 9px;font-size:12.5px;margin-right:8px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

body{padding-bottom:90px;} /* sitio para la barra del carrito */

@media (max-width:620px){
  .app{padding:24px var(--pad-x) 30px;}
  .sec-head h2{font-size:23px;}
  .item{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'txt price' 'txt add';
    gap:6px 16px;
  }
  /* Con foto son tres columnas y la imagen abarca los dos renglones. */
  .con-fotos .item{
    grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-areas:'foto txt price' 'foto txt add';
    column-gap:14px;
  }
  .item-foto{grid-area:foto;width:64px;height:64px;align-self:center;}
  .item-info{grid-area:txt;}
  .item-price{grid-area:price;text-align:right;}
  .qty-control{grid-area:add;justify-self:end;}
  /* Más alto para el dedo: en el teléfono estos botones son la puerta para
     poder pedir el producto, y equivocarse de sabor se paga en la cocina.
     Quedan a la altura del +/- de al lado. */
  .opt-chip{padding:9px 14px;font-size:13.5px;}
  .opt-group{gap:7px;}
  .cats{gap:22px;}
  .cat-btn{font-size:14px;}
}

@media (max-width:360px){
  .item{padding:13px 2px;}
  .item-info .name{font-size:16px;}
  /* El placeholder del código es una frase entera, no un ejemplo de dos
     palabras, y a este ancho no entra: se le recorta el aire al botón y un
     punto a la letra del placeholder. El font-size del INPUT no se toca —sigue
     en 16px— porque es el que mira iOS para decidir si amplía la página al
     enfocar el campo. */
  .promo-btn{padding:0 10px;}
  .promo-input::placeholder{font-size:11.5px;}
}

/* La bajada de la carta va en UNA línea (pedido del negocio, 12/10/2026). A
   16,5 px necesita ~354 px de pantalla: entra sola desde los 360 px de casi
   todo Android y los 375+ de los iPhone. Por debajo (iPhone SE de 1.ª
   generación, 320 px) se partía en dos; ahí, y solo ahí, se achica la letra. */
@media (max-width:359px){
  .intro-sub{font-size:14.5px;}
}