/* ============================================================
   AMA CAFÉ — SITIO PÚBLICO
   ------------------------------------------------------------
   Tokens tomados del sitio de referencia en Railway, medidos
   sobre los estilos calculados del navegador (no a ojo):

     fondo         #111111
     tarjeta       #242424
     borde         #333333
     acento        #E05C24  (tomado del logo vectorial, no del sitio viejo)
     texto         #F5F5F5
     texto suave   #999999
     tipografía    Inter
     radio tarjeta 16px  ·  píldoras redondeadas completas
     precio        16px / 700, en acento

   El original está hecho con Tailwind. Aquí va CSS plano: sin
   proceso de compilación, un solo archivo, y el navegador lo
   cachea entero.
   ============================================================ */

:root {
  --fondo:        #111111;
  --superficie:   #242424;
  --superficie-2: #1b1b1b;
  --borde:        #333333;
  --texto:        #f5f5f5;
  --texto-suave:  #999999;
  --acento:       #e05c24;
  --acento-hover: #f0743f;
  --ok:           #3d9970;
  --alerta:       #d9534f;
  --radio:        16px;
  --radio-chico:  10px;
  --cabecera:     64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 56px); }

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   MARCA DE AGUA
   El logo detrás de todo, muy tenue, para que el fondo plano no
   se lea como una página a medio cargar.

   Va en ::before y no en `background` de body porque body no
   admite dos capas con distinta opacidad. z-index -1 funciona
   porque el fondo de body se propaga al lienzo del navegador
   (html no declara background), así que la capa queda ENCIMA del
   color y DEBAJO del contenido.

   El SVG trae un círculo #1D1D1B que a esta opacidad desaparece
   contra el fondo; quedan flotando los trazos blancos y naranjos.
   Es el efecto buscado, no un descuido.

   No reemplaza fotos de producto: las tarjetas sin imagen siguen
   cayendo al emoji ☕ y ESO es lo que hace ver vacía la carta.
   ------------------------------------------------------------ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/img/logo-ama.svg');
  background-repeat: no-repeat;
  background-position: center 45%;
  background-size: min(620px, 78vw);
  opacity: 0.055;
}

.hidden { display: none !important; }
.chico { font-size: 12px; color: var(--texto-suave); font-weight: 400; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); }

img { display: block; max-width: 100%; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }


/* ============================================================
   AVISO DE CONFIGURACIÓN PENDIENTE
   ============================================================ */

.config-warning {
  background: #4a1d1a;
  border-bottom: 1px solid #7a2f28;
  color: #ffd9d4;
  padding: 12px 24px;
  font-size: 14px;
  text-align: center;
}

.config-warning code {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}


/* ============================================================
   CABECERA
   ============================================================ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--cabecera);
  background: rgba(23, 23, 23, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.nav-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -0.3px;
}

.logo:hover { color: var(--texto); }
.logo .marca { color: var(--acento); }

.logo-icono {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
}

/* Este hueco tenía un lema con aspecto de campo de búsqueda que no
   hacía nada, mientras la búsqueda de verdad estaba detrás del icono
   🔍. La forma se mantuvo casi igual —píldora, borde, icono a la
   izquierda— porque la forma nunca fue el problema: el problema era
   que mentía. Ahora es un input real. */
.nav-busqueda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 7px 18px;
  transition: border-color 0.15s;
}

.nav-busqueda:focus-within { border-color: var(--acento); }

.nav-busqueda-icono { font-size: 13px; flex-shrink: 0; opacity: 0.7; }

.nav-busqueda input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
}

.nav-busqueda input::placeholder { color: var(--texto-suave); }

/* El outline del navegador dibujaría un rectángulo dentro de la
   píldora. El foco ya se marca con el borde naranja de :focus-within,
   que envuelve el control entero. */
.nav-busqueda input:focus { outline: none; }

/* Chrome dibuja su propia X en los type=search y desentona con la
   píldora. La limpieza la hace el Escape, igual que en el resto. */
.nav-busqueda input::-webkit-search-cancel-button { display: none; }

.nav-acciones { display: flex; align-items: center; gap: 10px; }

.icono-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 18px;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.icono-btn:hover { background: var(--superficie); color: var(--texto); }

.contador-carrito {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--acento);
  color: #111;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.contador-carrito.vacio { display: none; }

/* El rebote del contador es la mitad importante de la confirmación: el
   botón dice que algo pasó, esto dice DÓNDE fue a parar. La regla de
   prefers-reduced-motion del final del archivo lo apaga entero. */
@keyframes rebote-contador {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.contador-carrito.rebote { animation: rebote-contador 0.42s ease-out; }

.btn-adm {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-adm:hover { border-color: var(--acento); color: var(--texto); }


/* ============================================================
   BARRA DE CATEGORÍAS
   ============================================================ */

.barra-categorias {
  position: sticky;
  top: var(--cabecera);
  z-index: 50;
  background: rgba(17, 17, 17, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.lema-movil {
  display: none;
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
  padding: 18px 24px 4px;
}

.categorias-scroll {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1280px;
  margin: 0 auto;
}

.categorias-scroll::-webkit-scrollbar { display: none; }

.pildora {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pildora:hover { background: #2e2e2e; color: var(--texto); }
.pildora.activa { background: var(--acento); color: #111111; }


/* ============================================================
   INTRO
   ============================================================ */

/* .intro se eliminó: repetía el lema de .lema-movil justo debajo de la
   píldora de la barra, o sea dos frases de relleno antes del primer
   producto. Ninguna otra página la usaba. */


/* ============================================================
   MENÚ
   ============================================================ */

.seccion-categoria { padding: 34px 0 8px; }

.seccion-categoria h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.seccion-categoria .sub {
  color: var(--texto-suave);
  font-size: 15px;
  margin-top: 4px;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.tarjeta-producto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.tarjeta-producto:hover {
  border-color: rgba(224, 92, 36, 0.5);
  box-shadow: 0 10px 30px rgba(224, 92, 36, 0.06);
  transform: translateY(-2px);
}

.tarjeta-imagen {
  aspect-ratio: 16 / 10;
  background: var(--superficie-2);
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #3a3a3a;
  overflow: hidden;
}

.tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta-cuerpo {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.tarjeta-cuerpo h3 { font-size: 16px; font-weight: 600; }
/* Bajo el título-variedad de un café en grano: de dónde viene. El
   nombre del producto (“Brasil Tostado Medio”) ya no es el título. */
.grano-origen { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); margin-top: 2px; }

.tarjeta-cuerpo p {
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.45;
  flex: 1;
}

.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.precio { font-size: 16px; font-weight: 700; color: var(--acento); }

/* Píldora con rótulo, no un "+" mudo. El min-width está calculado para
   que "✓ Agregado" quepa sin ensanchar el botón: si cambia, el precio de
   al lado salta cada vez que alguien agrega algo. */
.btn-agregar {
  min-width: 104px;
  height: 34px;
  flex-shrink: 0;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--acento);
  color: #111111;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, transform 0.1s, color 0.15s;
}

.btn-agregar:hover { background: var(--acento-hover); }
.btn-agregar:active { transform: scale(0.96); }

/* Deshabilitado ≠ confirmado. El botón queda inerte 900 ms tras agregar,
   pero atenuarlo ahí leería como "no disponible", justo al revés de lo
   que pasó. Por eso .confirmado gana y no baja la opacidad. */
.btn-agregar:disabled { opacity: 0.6; cursor: default; }

.btn-agregar.confirmado:disabled {
  opacity: 1;
  background: var(--ok);
  color: #f5f5f5;
}

.tarjeta-producto.agotado { opacity: 0.45; }
.tarjeta-producto.agotado .tarjeta-imagen { filter: grayscale(1); }

.sello-agotado {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 11px;
}


/* ============================================================
   AVISO DE CERRADO
   ============================================================ */

.aviso-cerrado {
  background: #3a2a12;
  border-bottom: 1px solid #6b4c1f;
  color: #f5d9a8;
  padding: 12px 24px;
  font-size: 14px;
  text-align: center;
}

/* Segunda línea del aviso: "lo demás lo preparamos al abrir".
   Va más apagada porque es la salvedad, no la noticia. La noticia
   es que sí se puede comprar. */
.aviso-cerrado .aviso-secundario {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
  font-size: 13px;
}


/* ============================================================
   VENTA FUERA DE HORARIO
   ------------------------------------------------------------
   Con el local cerrado la carta queda en dos grupos y hay que
   distinguirlos de un vistazo: lo que se puede comprar ahora y lo
   que espera a mañana. Sin esto, la persona lo descubre recién al
   confirmar — el peor momento posible.
   ============================================================ */

.marca-247 {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: #1c5c2f;
  background: #eaf7ed;
  border: 1px solid rgba(46, 158, 79, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Atenuado, no oculto. Esconder media carta de noche haría creer
   que el local dejó de vender esas cosas. */
.tarjeta-producto.fuera-de-horario { opacity: 0.55; }
.tarjeta-producto.fuera-de-horario .tarjeta-imagen { filter: grayscale(0.8); }

.linea-carrito.linea-bloqueada {
  background: rgba(197, 48, 48, 0.06);
  border-left: 3px solid rgba(197, 48, 48, 0.55);
  padding-left: 9px;
}

.marca-horario {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #8c2f2f;
  background: rgba(197, 48, 48, 0.1);
  border-radius: 999px;
  padding: 2px 9px;
}


/* ============================================================
   AVISO DE MODO PRUEBA
   ------------------------------------------------------------
   Franja llamativa a propósito: si alguien prueba un pago y no ve
   que es falso, va a creer que el cobro funcionó de verdad.
   ============================================================ */

.aviso-prueba {
  background: #4a2d6b;
  border-bottom: 1px solid #7a4fa8;
  color: #e6d4ff;
  padding: 12px 24px;
  font-size: 14px;
  text-align: center;
}


/* ============================================================
   SELECTOR DE EXTRAS
   ============================================================ */

.marca-extras {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  color: var(--acento);
  border: 1px solid rgba(224, 92, 36, 0.4);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ============================================================
   CAFÉ DE ESPECIALIDAD — BANNER, SELLOS Y FICHA
   ------------------------------------------------------------
   Quien mira una bolsa de $14.000 tiene una pregunta legítima:
   por qué cuesta eso. La respuesta —finca, variedad, altura,
   proceso, puntaje— no cabe en una tarjeta de menú sin volverla
   un muro de texto que estorba a quien solo quiere un croissant.

   Por eso: un sello en la tarjeta, y el detalle en una ficha que
   se abre al tocarla.
   ============================================================ */

/* REDISEÑO 16-sep-2026: de franja con borde a banner con
   ilustración. La ilustración de granos (img/granos.svg) y las
   curvas de nivel (img/topografia.svg) son dibujos propios, NO
   fotos de un café que no es el nuestro — el banner habla de
   bolsas cuyos datos están copiados de la etiqueta. Mismo lenguaje
   visual que /cafes, para que el clic no se sienta como otro sitio. */
.banner-especialidad {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 40px 44px;
  min-height: 300px;
  border: 1px solid rgba(224, 92, 36, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 85% 40%, rgba(224, 92, 36, 0.30), transparent 60%),
    linear-gradient(120deg, #1a1411 0%, #120f0d 55%, #1d130e 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.banner-topo {
  position: absolute;
  inset: 0;
  background: url('/img/topografia.svg') center / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 25%, #000 80%);
}

.banner-texto { position: relative; z-index: 1; }

.banner-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento) !important;
  margin-bottom: 14px;
}
.banner-linea { width: 26px; height: 1px; background: var(--acento); display: inline-block; }

.banner-texto h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 20ch;
}
.banner-texto p { color: var(--texto-suave); font-size: 15px; line-height: 1.55; max-width: 48ch; }

.banner-origenes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 24px;
}
.banner-origenes li {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.03);
  color: var(--texto);
}

.banner-llamado { display: inline-flex; align-items: center; gap: 8px; }
.banner-llamado span { transition: transform 0.2s; }
.banner-llamado:hover span { transform: translateX(4px); }

.banner-arte {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -40px -30px -40px 0;
}
.banner-arte img {
  width: 100%;
  max-width: 380px;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.banner-especialidad:hover .banner-arte img { transform: rotate(-4deg) scale(1.03); }

@media (max-width: 720px) {
  .banner-especialidad {
    grid-template-columns: 1fr;
    padding: 28px 22px 26px;
  }
  .banner-arte {
    order: -1;
    margin: -34px 0 -18px;
  }
  .banner-arte img { max-width: 210px; }
}

/* Los desplegables de "qué es un microlote". Cerrados por
   omisión: a un toque de quien lo necesita, invisibles para
   quien ya sabe y solo quiere comprar. */
.encabezado-grano {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.ficha-explica {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
}

.ficha-explica summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
}

.ficha-explica summary::after {
  content: ' +';
  color: var(--acento);
  font-weight: 700;
}

.ficha-explica[open] summary::after { content: ' −'; }

.ficha-explica p {
  margin-top: 10px;
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.6;
}

/* La tarjeta de un café se puede tocar. Va como <button> para que
   funcione con teclado y lector de pantalla; estos reinicios le
   quitan la apariencia de botón sin quitarle el comportamiento. */
.tarjeta-abre-ficha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tarjeta-abre-ficha:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
  border-radius: 6px;
}

.marca-puntaje {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #f5d9a8;
  background: rgba(224, 165, 36, 0.16);
  border: 1px solid rgba(224, 165, 36, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
}

.marca-ficha {
  font-size: 12px;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- La ficha ---------- */

.modal-ficha {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  background: #171717;
  border: 1px solid var(--borde);
  border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-ficha.activo { transform: translate(-50%, 0); }

@media (min-width: 641px) {
  .modal-ficha {
    top: 50%;
    bottom: auto;
    border-radius: var(--radio);
    border-bottom: 1px solid var(--borde);
    transform: translate(-50%, -40%);
    opacity: 0;
    pointer-events: none;
  }
  .modal-ficha.activo {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
  }
}

.ficha-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--borde);
}

.ficha-cabecera h3 { font-size: 18px; font-weight: 700; }

.ficha-cuerpo {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

.ficha-puntaje {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(224, 165, 36, 0.18), rgba(224, 92, 36, 0.08));
  border: 1px solid rgba(224, 165, 36, 0.4);
}

.ficha-puntaje-num { font-size: 34px; font-weight: 700; color: #f5d9a8; line-height: 1; }
.ficha-puntaje-txt { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }

.ficha-notas-intro {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}

.ficha-notas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}

.nota-cata {
  font-size: 13px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.03);
}

.ficha-datos { margin-bottom: 18px; }

.ficha-dato {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
}

.ficha-dato dt { color: var(--texto-suave); flex-shrink: 0; }
.ficha-dato dd { text-align: right; }

.ficha-pie {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--borde);
}

.ficha-formato {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

.ficha-formato-nombre { font-weight: 600; }
.ficha-formato-precio { margin-left: auto; color: var(--texto-suave); }

.btn-chico { padding: 8px 16px; font-size: 14px; }

.modal-extras {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  background: #171717;
  border: 1px solid var(--borde);
  border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-extras.activo { transform: translate(-50%, 0); }

@media (min-width: 641px) {
  .modal-extras {
    top: 50%;
    bottom: auto;
    border-radius: var(--radio);
    border-bottom: 1px solid var(--borde);
    transform: translate(-50%, -40%);
    opacity: 0;
    pointer-events: none;
  }
  .modal-extras.activo {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
  }
}

.extras-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.extras-cabecera h3 { font-size: 18px; font-weight: 700; }

.extras-cuerpo { flex: 1; overflow-y: auto; padding: 8px 22px; }

.extras-pie {
  border-top: 1px solid var(--borde);
  padding: 18px 22px;
  flex-shrink: 0;
}

.fila-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--superficie);
}

.fila-extra:last-child { border-bottom: none; }
.fila-extra.elegido .extra-precio { color: var(--acento); }

.extra-info { min-width: 0; }
.extra-info strong { display: block; font-size: 15px; font-weight: 600; }
.extra-info .chico { display: block; margin-top: 2px; }

.extra-derecha { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.extra-precio { font-size: 13px; color: var(--texto-suave); font-weight: 600; }

.interruptor {
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.interruptor:hover { border-color: var(--acento); color: var(--texto); }
.interruptor.activo { background: var(--acento); border-color: var(--acento); color: #111111; }

.linea-extras {
  list-style: none;
  margin: 4px 0 2px;
  padding-left: 10px;
  border-left: 2px solid var(--borde);
}

.linea-extras li { font-size: 12px; color: var(--texto-suave); padding: 1px 0; }


/* ============================================================
   CARRITO LATERAL
   ============================================================ */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 90;
}

.velo.activo { opacity: 1; pointer-events: auto; }

.panel-carrito {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: #171717;
  border-left: 1px solid var(--borde);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.panel-carrito.activo { transform: translateX(0); }

.carrito-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.carrito-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.carrito-titulo .icono { color: var(--acento); }

.carrito-cuerpo { flex: 1; overflow-y: auto; padding: 20px 22px; }

.carrito-pie {
  border-top: 1px solid var(--borde);
  padding: 20px 22px;
  flex-shrink: 0;
  background: #171717;
}

.carrito-vacio { text-align: center; color: var(--texto-suave); padding: 60px 20px; }
.carrito-vacio .emoji { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }

.linea-carrito {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--superficie);
}

.linea-carrito:last-child { border-bottom: none; }
.linea-info { flex: 1; min-width: 0; }
.linea-info strong { display: block; font-size: 14px; font-weight: 600; }
.linea-info .unit { font-size: 12px; color: var(--texto-suave); }

.linea-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.linea-total { font-size: 14px; font-weight: 700; color: var(--acento); }

.control-cantidad {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--superficie);
  border-radius: 999px;
  padding: 3px;
}

.control-cantidad button {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.control-cantidad button:hover { background: #333; color: var(--texto); }
.control-cantidad span { min-width: 20px; text-align: center; font-size: 14px; font-weight: 600; }


/* ============================================================
   FORMULARIO DE PEDIDO
   ============================================================ */

.grupo-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--texto-suave);
  margin: 22px 0 10px;
  font-weight: 600;
}

.grupo-titulo:first-child { margin-top: 0; }

.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-size: 15px;
  font-family: inherit;
}

.campo input::placeholder,
.campo textarea::placeholder { color: #5c5c5c; }

.campo input:focus,
.campo textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }

.campo textarea { resize: vertical; min-height: 68px; }

.opciones-fila { display: flex; gap: 10px; margin-bottom: 16px; }

.opcion {
  flex: 1;
  padding: 13px 10px;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  color: var(--texto-suave);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.opcion.activa { border-color: var(--acento); color: var(--texto); background: rgba(224, 92, 36, 0.1); }

.opcion-pago {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--texto);
}

.opcion-pago.activa { border-color: var(--acento); background: rgba(224, 92, 36, 0.1); }
.opcion-pago strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.opcion-pago span { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }

.marca-radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borde);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

.opcion-pago.activa .marca-radio { border-color: var(--acento); border-width: 5px; }

.resumen-linea {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--texto-suave);
  padding: 4px 0;
}

.resumen-total {
  display: flex;
  justify-content: space-between;
  font-size: 19px;
  font-weight: 700;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--borde);
}

.resumen-total span:last-child { color: var(--acento); }


/* ============================================================
   BOTONES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--radio-chico);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.btn-full { width: 100%; }
.btn-primario { background: var(--acento); color: #111111; }
.btn-primario:hover { background: var(--acento-hover); color: #111111; }
.btn-primario:disabled { opacity: 0.45; cursor: not-allowed; background: var(--acento); }

.btn-secundario { background: transparent; border: 1px solid var(--borde); color: var(--texto-suave); }
.btn-secundario:hover { border-color: var(--texto-suave); color: var(--texto); }

.btn-whatsapp { background: #25d366; color: #06301a; }
.btn-whatsapp:hover { background: #3ae37a; color: #06301a; }

.btn + .btn { margin-top: 10px; }


/* ============================================================
   MENSAJES
   ============================================================ */

.error-caja {
  background: rgba(217, 83, 79, 0.12);
  border-left: 3px solid var(--alerta);
  color: #ffb4b0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.aviso-caja {
  background: rgba(224, 92, 36, 0.1);
  border-left: 3px solid var(--acento);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 16px;
}


/* ============================================================
   CONFIRMACIÓN
   ============================================================ */

.confirmacion { text-align: center; padding: 30px 0; }
.confirmacion .marca-ok { font-size: 46px; margin-bottom: 14px; }

.codigo-pedido {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--acento);
  letter-spacing: 2px;
  margin: 16px 0 6px;
}


/* ============================================================
   CONTACTO Y PIE
   ============================================================ */

.contacto {
  border-top: 1px solid var(--borde);
  margin-top: 60px;
  padding: 54px 0;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.contacto h2 { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.contacto p { color: var(--texto-suave); font-size: 15px; padding: 5px 0; }

.redes { display: flex; gap: 18px; margin-top: 18px; font-size: 15px; }

.mapa-caja { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); min-height: 60px; }
.mapa-caja iframe { display: block; filter: grayscale(0.35) invert(0.9) hue-rotate(180deg); }

.footer {
  border-top: 1px solid var(--borde);
  padding: 26px 0;
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
}


/* ============================================================
   PÁGINAS LEGALES
   ------------------------------------------------------------
   Ancho de lectura corto y buen interlineado: son documentos que
   alguien tiene que poder leer de verdad, no solo aceptar.
   ============================================================ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  line-height: 1.7;
}

.legal h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }

.legal h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 38px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--borde);
}

.legal p { margin-bottom: 14px; color: #d8d8d8; }
.legal ul { margin: 0 0 16px 22px; color: #d8d8d8; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--texto); }

.legal-fecha { color: var(--texto-suave); font-size: 14px; margin-top: 6px; }

.legal-pie {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
  color: var(--texto-suave);
}

.tabla-legal {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 14px;
}

.tabla-legal th {
  text-align: left;
  padding: 10px 12px;
  background: var(--superficie);
  border-bottom: 2px solid var(--borde);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--texto-suave);
}

.tabla-legal td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--superficie);
  color: #d8d8d8;
  vertical-align: top;
}

@media (max-width: 640px) {
  .legal { padding: 32px 16px 56px; }
  .legal h1 { font-size: 24px; }
  .tabla-legal { font-size: 13px; }
  .tabla-legal th, .tabla-legal td { padding: 8px; }
}


/* ---------- Consentimiento en el checkout ---------- */

.consentimiento {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 14px;
  margin-top: 18px;
  cursor: pointer;
}

.consentimiento.falta { border-color: var(--alerta); }

.consentimiento input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.consentimiento span { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.consentimiento a { text-decoration: underline; }


/* ---------- Enlaces del pie ---------- */

.footer-enlaces {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.footer-enlaces a { color: var(--texto-suave); font-size: 13px; }
.footer-enlaces a:hover { color: var(--acento); }


/* ============================================================
   PÁGINA DE SEGUIMIENTO
   ============================================================ */

.pedido-pantalla { max-width: 620px; margin: 0 auto; padding: 44px 24px 60px; }

.pedido-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px;
}

.pedido-estado {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 20px;
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.pedido-estado.pagado,
.pedido-estado.listo,
.pedido-estado.entregado { background: rgba(61, 153, 112, 0.15); color: #6fd3a4; }

.pedido-estado.pendiente_pago { background: rgba(224, 92, 36, 0.15); color: var(--acento); }
.pedido-estado.anulado { background: rgba(217, 83, 79, 0.15); color: #ff9b96; }

.pedido-items { list-style: none; margin: 20px 0; }

.pedido-items li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 15px;
}

.cargando { text-align: center; color: var(--texto-suave); padding: 60px 20px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  /* Sin ancho para un campo permanente: bajo 900 px manda el icono 🔍,
     que despliega #cajaBusqueda. Los dos inputs comparten estado. */
  .nav-busqueda { display: none; }
  .lema-movil { display: block; }
  .contacto-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Con el campo siempre visible en escritorio, el icono 🔍 sería un
   segundo control para lo mismo. Se reserva para móvil. */
@media (min-width: 901px) {
  #btnBuscar { display: none; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .categorias-scroll { padding: 12px 16px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .tarjeta-cuerpo { padding: 12px; }
  .tarjeta-cuerpo h3 { font-size: 14px; }
  .tarjeta-cuerpo p { font-size: 12px; }

  /* En una tarjeta de ~150px, precio y píldora en la misma fila quedan
     apretados y el rótulo se trunca. Apilados, el botón ocupa el ancho
     completo: se lee entero y el área táctil pasa de 34px a toda la
     tarjeta, que es donde ocurre casi todo el tráfico. */
  .tarjeta-pie {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .btn-agregar {
    width: 100%;
    min-width: 0;
    height: 38px;
  }
  .logo { font-size: 18px; }
  .panel-carrito { max-width: 100%; }
  .seccion-categoria h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* El cuestionario "Arma tu café" y su globo se retiraron el
   4-oct-2026: AMA vive ahora en la portada (public/ama-globo.js,
   con sus estilos en ama-globo.css). */

/* El botón del banner de especialidad es un ENLACE a /cafes, no un
   botón: tiene que verse igual pero navegar de verdad. Sin esto
   queda subrayado y con el color de enlace del navegador. */
a.btn { text-decoration: none; }