/*
 * Cafetería El Charco — sitio público.
 * Usa los tokens de color/espaciado definidos en main.css (:root).
 * Mobile-first: los estilos base son para pantallas pequeñas (360px+)
 * y se amplían con @media hacia tablet (768px+), laptop (1024px+) y
 * escritorio grande (1366px / 1920px).
 */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.sitio-body {
  background: var(--color-beige-claro);
}

/* La barra de navegación es sticky: sin este margen, saltar a un ancla
   (menú, categorías, "Ver menú"...) deja el título tapado debajo de
   la barra en vez de justo debajo de ella. */
/*
 * Al saltar a un ancla (#menu, #cat-cafe…) el título debe quedar visible DEBAJO de las barras fijas:
 * el encabezado (--alto-nav) y, en el teléfono, la barra de pestañas (--alto-pestanas). sitio.js mide
 * ambas alturas reales; los valores de aquí son un respaldo para antes de que cargue el script.
 */
:root {
  --alto-nav: 85px;
  --alto-pestanas: 0px;
}

@media (max-width: 767px) {
  :root {
    --alto-nav: 73px;
    --alto-pestanas: 65px;
  }
}

.sitio-seccion,
footer.sitio-footer {
  scroll-margin-top: calc(var(--alto-nav) + 12px);
}

.menu-categoria {
  scroll-margin-top: calc(var(--alto-nav) + var(--alto-pestanas) + 8px);   /* 8px = misma holgura que usa el scrollspy de sitio.js */
}

/* "Inicio" (logo, título y enlace del menú) debe llevar hasta el tope de la página. El hero
   queda debajo de la barra fija y, con el margen normal de arriba, el salto lo dejaba a medio
   cubrir. Un margen mayor que su posición hace que el destino se recorte a cero (arriba del todo). */
#inicio {
  scroll-margin-top: 400px;
}

.sitio-contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

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

/* ---------- Marcadores de contenido pendiente ---------- */

.marcador-pendiente {
  display: inline-block;
  background: #fdf1cf;
  color: #7a5b00;
  border: 1px dashed #c99a1f;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 0.85rem;
  font-weight: 600;
}

.foto-pendiente {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-beige-claro);
  border-radius: var(--radio-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cafe);
  opacity: 0.55;
}

.foto-pendiente .icono-taza {
  width: 42px;
  height: 42px;
}

.icono-taza-titulo {
  display: block;
  margin: 0 auto 6px;
  width: 44px;
  height: 44px;
  color: var(--color-verde);
}

/* ---------- Barra de navegación ---------- */

.sitio-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-beige-claro);
  border-bottom: 1px solid var(--color-beige);
}

.sitio-nav-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  max-width: 1180px;
  margin: 0 auto;
}

.sitio-nav-marca {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-cafe-oscuro);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sitio-nav-marca {
  gap: 12px;
}

/* Logo más grande (requerimiento del cliente). En móvil baja un poco para que
   la barra no ocupe demasiado alto. */
.sitio-nav-marca img {
  height: 60px;
  width: 60px;
  object-fit: contain;
  border-radius: 50%;
}

@media (max-width: 600px) {
  .sitio-nav-marca img {
    height: 48px;
    width: 48px;
  }

  .sitio-nav-interior {
    padding: 10px 14px;
  }

  .sitio-nav-marca {
    gap: 8px;
    font-size: 1rem;
    line-height: 1.2;
    min-width: 0;
  }

  .sitio-nav-acciones {
    gap: 8px;
  }

  .sitio-nav-acciones .nav-carrito {
    width: 44px;
    height: 44px;
  }
}

.sitio-nav-boton-menu {
  display: block;
  min-width: 44px;      /* tamaño mínimo cómodo para el dedo */
  min-height: 44px;
  background: none;
  border: 2px solid var(--color-cafe-oscuro);
  border-radius: var(--radio-borde);
  padding: 6px 10px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-cafe-oscuro);
}

.sitio-nav-interior {
  flex-wrap: wrap;   /* en móvil el menú desplegable baja a una fila propia, debajo del logo y los botones */
}

.sitio-nav-enlaces {
  flex: 0 0 100%;
  order: 3;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 20px;
  background: var(--color-beige-claro);
  border-top: 1px solid var(--color-beige);
}

.sitio-nav-enlaces.abierto {
  display: flex;
}

.sitio-nav-enlaces a {
  color: var(--color-texto);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-beige);
  font-weight: 600;
}

.sitio-nav-enlaces .btn {
  margin-top: 8px;
  text-align: center;
  border-bottom: none;
}

/* Sección actual (la marca sitio.js según el desplazamiento). */
.sitio-nav-enlaces a:not(.btn).activo {
  color: var(--color-verde);
  font-weight: 700;
  border-bottom-color: var(--color-verde);
}

@media (min-width: 1024px) {
  .sitio-nav-enlaces a:not(.btn) {
    position: relative;
    white-space: nowrap;
  }

  .sitio-nav-enlaces a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-verde);
    transform: scaleX(0);
    transition: transform 0.25s ease;
  }

  .sitio-nav-enlaces a:not(.btn).activo::after,
  .sitio-nav-enlaces a:not(.btn):hover::after {
    transform: scaleX(1);
  }

  .sitio-nav-enlaces a:not(.btn):hover:not(.activo)::after {
    background: var(--color-cafe);
  }

  .sitio-nav-boton-menu {
    display: none;
  }

  .sitio-nav-interior {
    flex-wrap: nowrap;
  }

  .sitio-nav-enlaces {
    flex: 0 1 auto;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 0;
    background: none;
    border-top: none;
  }

  .sitio-nav-enlaces a {
    border-bottom: none;
    padding: 4px 0;
  }

  .sitio-nav-enlaces .btn {
    margin-top: 0;
  }
}

/* ".sitio-nav-enlaces a" (arriba) pone padding: 4px 0 (10px 0 en móvil) a
   TODOS los enlaces del menú, ícono y texto quedaban pegados al borde del
   botón sin aire a los lados: ".sitio-nav-enlaces .btn-whatsapp" tiene más
   especificidad (dos clases) que ".sitio-nav-enlaces a" (una clase + una
   etiqueta) y gana en ambos anchos, así el botón recupera relleno horizontal
   consistente y el ícono/texto quedan centrados dentro de él. */
.sitio-nav-enlaces .btn-whatsapp {
  padding: 8px 16px;
}

/* Entre 1024px y 1200px la barra va justa (siete enlaces + botón): el botón
   de WhatsApp se queda solo con el ícono para no forzar el salto de línea.
   El texto sigue en el DOM (lectores de pantalla y el aria-label lo cubren
   igual), solo se oculta visualmente. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .texto-boton-whatsapp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sitio-nav-enlaces .btn-whatsapp {
    padding: 10px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: var(--color-blanco);
  background: linear-gradient(160deg, var(--color-cafe-oscuro), var(--color-verde));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/*
 * Fondo con fotos que se funden entre sí. La opacidad de 0.55 (la misma
 * que tenía la foto fija de antes) va en el CONTENEDOR y las fotos son
 * opacas: así, mientras una entra y otra sale, el brillo total no baja.
 * Si cada foto tuviera 0.55 por su cuenta, a mitad del fundido se vería
 * un parpadeo oscuro (las dos semitransparentes dejan pasar el fondo).
 *
 * La foto nueva se coloca ENCIMA (.activo) y la anterior (.saliente) se
 * queda debajo, totalmente opaca, hasta que la nueva termina de aparecer.
 */
.hero-fondo {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.7s ease-in-out;
}

.hero-slide.activo {
  opacity: 1;
  z-index: 2;
}

.hero-slide.saliente {
  opacity: 1;
  z-index: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

/*
 * Movimiento de bienvenida del hero (CSS puro, al cargar la página, sin JavaScript):
 * título, texto y botones entran uno tras otro, subiendo suavemente.
 */
@keyframes hero-entrada {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-contenido > * {
  animation: hero-entrada 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-contenido > :nth-child(1) { animation-delay: 0.15s; }
.hero-contenido > :nth-child(2) { animation-delay: 0.4s; }
.hero-contenido > :nth-child(3) { animation-delay: 0.65s; }
.hero-contenido > :nth-child(4) { animation-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .hero-contenido > * {
    animation: none;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(59, 36, 21, 0.35), rgba(59, 36, 21, 0.75));
}

.hero-contenido {
  position: relative;
  padding: 72px 20px 56px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero-contenido h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  margin: 0 0 12px;
}

.hero-contenido p {
  font-size: clamp(1rem, 3vw, 1.25rem);
  margin: 0 0 24px;
}

.hero-marcador {
  margin-bottom: 16px;
}

/* Celular: los dos botones van lado a lado y más compactos (antes, uno debajo del otro y a todo el ancho),
   así la portada ocupa menos y se ve más la foto de fondo. Si no caben (pantallas muy angostas) bajan a dos filas. */
.hero-botones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: stretch;
}

.hero-botones .btn {
  flex: 1 1 140px;
  max-width: 190px;
  padding: 12px 10px;
  font-size: 0.98rem;
  text-align: center;
}

@media (min-width: 480px) {
  .hero-botones {
    gap: 12px;
  }

  .hero-botones .btn {
    flex: 0 1 auto;
    max-width: none;
    padding: 14px 20px;
    font-size: 1.05rem;
  }
}

/* "Ver menú": mismo tamaño/radio que el botón de WhatsApp de al lado, pero
   con relleno claro y borde, para que ambos se vean como un par de botones
   pensados juntos y no como uno "oficial" y otro genérico. */
.btn-ver-menu {
  background: var(--color-blanco);
  color: var(--color-cafe-oscuro);
  border: 2px solid var(--color-blanco);
  font-weight: 600;
}

/* Estado normal y también "pegado" (en pantallas táctiles el :hover y el foco se quedan activos tras tocar): se
   fija el blanco para que no tome el fondo oscuro del .btn:hover genérico con letra oscura (texto invisible). */
.btn-ver-menu:hover,
.btn-ver-menu:focus {
  background: var(--color-blanco);
  color: var(--color-cafe-oscuro);
  border-color: var(--color-blanco);
}

/* El efecto transparente solo mientras se presiona (táctil) o al pasar el mouse (dispositivos con mouse). */
.btn-ver-menu:active {
  background: transparent;
  color: var(--color-blanco);
  border-color: var(--color-blanco);
}

@media (hover: hover) {
  .btn-ver-menu:hover {
    background: transparent;
    color: var(--color-blanco);
    border-color: var(--color-blanco);
  }
}

/* ---------- Botones de WhatsApp (portada y barra de navegación) ---------- */
/* Verde oficial de la marca (#25D366), no el verde institucional del sitio
   (--color-verde): así se reconoce como WhatsApp de un vistazo. */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  font-weight: 600;
}

.btn-whatsapp:hover {
  background: #1ebe57;
}

.icono-boton {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- Secciones genéricas ---------- */

.sitio-seccion {
  padding: 48px 0;
}

.sitio-seccion:nth-child(odd) {
  background: var(--color-beige-claro);
}

.sitio-seccion-alt {
  background: var(--color-beige) !important;
}

.sitio-seccion h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-cafe-oscuro);
  margin: 0 0 8px;
  text-align: center;
}

.sitio-seccion-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
  color: var(--color-texto);
}

/* ---------- Tarjetas de producto ---------- */

.tarjetas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 480px) {
  .tarjetas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 columnas desde 900px (a 768px las tarjetas de ~195px útiles no alcanzaban para cantidad + "Agregar"). */
@media (min-width: 768px) {
  .tarjetas-grid {
    gap: 24px;
  }
}

@media (min-width: 900px) {
  .tarjetas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1366px) {
  .tarjetas-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tarjeta-producto {
  background: var(--color-blanco);
  border-radius: var(--radio-borde);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(59, 36, 21, 0.08);
  display: flex;
  flex-direction: column;
}

.tarjeta-producto .foto-pendiente,
.tarjeta-producto img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

/* Promoción vinculada a lealtad (§4.20): la tarjeta entera es un enlace a
   /cuenta — sin el subrayado ni el color azul por defecto de un <a>. */
.tarjeta-producto-enlace {
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease;
}

.tarjeta-producto-enlace:hover {
  box-shadow: 0 4px 14px rgba(59, 36, 21, 0.16);
}

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

.tarjeta-producto-nombre {
  font-weight: 700;
  color: var(--color-cafe-oscuro);
  margin: 0;
}

.tarjeta-producto-descripcion {
  font-size: 1.02rem;
  line-height: 1.5;
  color: #5a4a3e;
  margin: 0;
  flex-grow: 1;
}

/* Promociones y temporadas: las tarjetas de una misma fila miden lo mismo, y con "flex-grow" cada párrafo se
   estiraba y quedaban huecos enormes entre líneas. El texto va junto, arriba; solo el último baja al fondo. */
#promociones .tarjeta-producto-descripcion,
.tarjeta-temporada .tarjeta-producto-descripcion {
  flex-grow: 0;
}

/* Solo el aviso de "Reclama tu cupón" baja al fondo; el resto del texto queda junto (si no, al estirarse la tarjeta
   quedaba un hueco entre "Todo el menú" y "Válido hasta"). */
#promociones .tarjeta-producto-cta {
  margin-top: auto;
  padding-top: 6px;
}

.tarjeta-producto-precio {
  font-weight: 700;
  color: var(--color-verde);
  font-size: 1.05rem;
}

.tarjeta-producto-precio small {
  font-weight: 400;
  color: #6b5a4d;
}

.etiquetas-producto {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.etiqueta {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-beige);
  color: var(--color-cafe-oscuro);
}

.etiqueta-destacado {
  background: #fdf1cf;
  color: #7a5b00;
}

.etiqueta-mas-vendido {
  background: #f6e3de;
  color: var(--color-error);
}

/* Beneficio de una promoción (ej. "20% de descuento", "2x1"): el único acento
   del sitio (verde), para que resalte igual en una promoción normal o de
   temporada — no es un estado (como sí lo son destacado/más vendido). */
.etiqueta-promocion {
  background: var(--color-verde);
  color: var(--color-blanco);
  font-size: 0.8rem;
}

/* Banner de una temporada vigente (nombre/foto/vigencia), fuera de la grilla de
   productos — se centra y no se estira a todo el ancho de la sección. */
.tarjeta-temporada {
  max-width: 480px;
  margin: 0 auto 20px;
}

/* Temporadas vigentes. Una sola: banner centrado (arriba). Varias: en escritorio van en 2 columnas, no apiladas;
   en el teléfono se deslizan de lado (ver "deslizables" más abajo), como las promociones. */
.temporadas-lista {
  margin-bottom: 20px;
}

.temporadas-lista .tarjeta-temporada:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .temporadas-lista--varias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 20px;
  }

  .temporadas-lista--c3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .temporadas-lista--varias .tarjeta-temporada {
    max-width: none;
    margin: 0;
  }
}

/* Promociones y temporadas en el teléfono: una fila que se desliza con el dedo (con imán), la siguiente tarjeta
   asoma por la derecha y abajo van los puntos. Misma idea que las categorías del menú. */
@media (max-width: 767px) {
  .tarjetas-deslizables,
  .temporadas-lista--varias {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 6px 20px 12px;
    scroll-padding: 0 20px;
  }

  .tarjetas-deslizables::-webkit-scrollbar,
  .temporadas-lista--varias::-webkit-scrollbar {
    display: none;
  }

  .tarjetas-deslizables > *,
  .temporadas-lista--varias > .tarjeta-temporada {
    flex: 0 0 82%;
    max-width: 320px;
    margin: 0;
    scroll-snap-align: start;
  }
}

.deslizable-puntos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

/* ---------- Menú por categorías ---------- */

.menu-categoria {
  margin-bottom: 48px;
}

.menu-categoria:last-child {
  margin-bottom: 0;
}

.menu-categoria h3 {
  font-size: 1.4rem;
  color: var(--color-cafe-oscuro);
  border-bottom: 3px solid var(--color-verde);
  display: inline-block;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.menu-categoria-notas {
  font-size: 0.9rem;
  color: #6b5a4d;
  margin: 0 0 20px;
}

.menu-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 32px;
  -webkit-overflow-scrolling: touch;
}

.menu-nav {
  scrollbar-width: none;            /* Firefox: sin barra de desplazamiento visible */
  -ms-overflow-style: none;
}

.menu-nav::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}

/*
 * Barra de categorías en el teléfono (sitio.js le añade .menu-nav--pestanas): queda fija debajo
 * del encabezado mientras se recorre el menú, se desliza de lado con el dedo, y la pestaña de la
 * categoría que se está viendo se resalta en verde. Cada pestaña mide >= 44 px de alto.
 */
.menu-nav--pestanas {
  position: sticky;
  top: var(--alto-nav, 76px);
  z-index: 40;
  background: var(--color-beige-claro);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 -16px 20px;
  border-bottom: 1px solid var(--color-beige);
}

.menu-nav--pestanas a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  scroll-snap-align: center;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-nav--pestanas a[aria-selected="true"] {
  background: var(--color-verde);
  border-color: var(--color-verde);
  color: var(--color-blanco);
  box-shadow: 0 2px 8px rgba(75, 107, 58, 0.35);
}

.menu-nav--pestanas a:focus-visible {
  outline: 3px solid var(--color-cafe-oscuro);
  outline-offset: 2px;
}

/*
 * Menú en el teléfono: cada categoría es una fila de tarjetas que se desliza de lado
 * con el dedo (scroll horizontal con imán, sin barra visible); la tarjeta siguiente asoma
 * por la derecha para que se note que hay más. Las categorías siguen una debajo de otra.
 * En pantallas anchas se mantiene la cuadrícula de siempre.
 */
@media (max-width: 767px) {
  .menu-categoria .tarjetas-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 4px 16px 16px;
    scroll-padding: 0 16px;
  }

  .menu-categoria .tarjetas-grid::-webkit-scrollbar {
    display: none;
  }

  .menu-categoria .tarjetas-grid > .tarjeta-producto {
    flex: 0 0 82%;
    max-width: 300px;
    scroll-snap-align: start;
  }

  .menu-categoria h3::after {
    content: "  ›";
    color: var(--color-verde);
  }
}

.menu-nav a {
  flex-shrink: 0;
  background: var(--color-blanco);
  border: 1px solid var(--color-beige);
  color: var(--color-cafe-oscuro);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Galería ---------- */

/*
 * Carrusel. La pista es un contenedor con scroll horizontal + scroll-snap:
 * funciona deslizando con el dedo o la rueda aun sin JavaScript. Las
 * flechas y los puntos solo aparecen cuando sitio.js agrega .carrusel--js.
 * En móvil cada foto ocupa ~86% del ancho, así se asoma la siguiente y se
 * entiende que se puede deslizar; 2 fotos visibles en tablet y 3 en escritorio.
 */

.carrusel {
  position: relative;
  --carrusel-separacion: 12px;
  --carrusel-visibles: 1;
}

@media (min-width: 600px) {
  .carrusel {
    --carrusel-separacion: 16px;
    --carrusel-visibles: 2;
  }
}

@media (min-width: 1024px) {
  .carrusel {
    --carrusel-visibles: 3;
  }
}

.carrusel-pista {
  position: relative; /* para que item.offsetLeft se mida desde la pista */
  display: flex;
  gap: var(--carrusel-separacion);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--radio-borde);
}

.carrusel-pista::-webkit-scrollbar {
  display: none;
}

.carrusel-pista:focus-visible {
  outline: 3px solid var(--color-verde);
  outline-offset: 4px;
}

.carrusel-item {
  position: relative;
  flex: 0 0 86%;
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio-borde);
  background: var(--color-beige);
}

/* Celular: la galería usa casi todo el ancho (menos margen a los lados y entre fotos, esquinas menos redondeadas)
   para que las fotos se vean más grandes. En tablet y escritorio queda como estaba. */
@media (max-width: 599px) {
  #galeria .sitio-contenedor {
    padding-left: 8px;
    padding-right: 8px;
  }

  .carrusel {
    --carrusel-separacion: 6px;
  }

  .carrusel-pista,
  .carrusel-item {
    border-radius: 8px;
  }

  .carrusel-item {
    flex-basis: 93%;
  }
}

@media (min-width: 600px) {
  .carrusel-item {
    flex-basis: calc((100% - (var(--carrusel-visibles) - 1) * var(--carrusel-separacion)) / var(--carrusel-visibles));
  }
}

.carrusel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrusel-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 16px 12px;
  color: var(--color-beige-claro);
  font-size: 0.95rem;
  background: linear-gradient(to top, rgba(59, 36, 21, 0.85), rgba(59, 36, 21, 0));
}

/* Con pocas fotos (todas caben) se centran en vez de quedar pegadas a la izquierda. */
.carrusel--corto .carrusel-pista {
  justify-content: center;
}

.carrusel-boton {
  display: none;
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 246, 238, 0.92);
  color: var(--color-cafe-oscuro);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 36, 21, 0.3);
}

.carrusel-boton:hover,
.carrusel-boton:focus-visible {
  background: var(--color-verde);
  color: var(--color-blanco);
}

/* En reposo (8 s sin que nadie la use, sitio.js) las flechas vuelven a su color normal aunque el navegador
   siga dando por "encima" el último toque. En cuanto alguien vuelve a usar el carrusel, la clase se quita. */
.carrusel--reposo .carrusel-boton,
.carrusel--reposo .carrusel-boton:hover,
.carrusel--reposo .carrusel-boton:focus {
  background: rgba(250, 246, 238, 0.92);
  color: var(--color-cafe-oscuro);
}

.carrusel-anterior {
  left: 8px;
}

.carrusel-siguiente {
  right: 8px;
}

.carrusel--js:not(.carrusel--corto) .carrusel-boton {
  display: flex;
}

.carrusel-puntos {
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.carrusel--js:not(.carrusel--corto) .carrusel-puntos {
  display: flex;
}

/* Botón de 24px (área táctil cómoda) que dibuja un punto de 10px. */
.carrusel-punto {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carrusel-punto::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-beige);
  box-shadow: inset 0 0 0 1px var(--color-cafe);
}

.carrusel-punto.activo::before {
  background: var(--color-verde);
  box-shadow: none;
}

.carrusel-punto:focus-visible {
  outline: 2px solid var(--color-verde);
  border-radius: 50%;
}

/* ---------- Ubicación / mapa / calificación ---------- */

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

@media (min-width: 1024px) {
  .ubicacion-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ubicacion-mapa-marcador {
  aspect-ratio: 16 / 9;
  background: var(--color-beige);
  border: 1px dashed var(--color-cafe);
  border-radius: var(--radio-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.ubicacion-mapa-marcador iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radio-borde);
}

.btn-como-llegar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 22px 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7d5a41, var(--color-cafe) 55%, #5a3d2b);
  color: var(--color-blanco);
  box-shadow: 0 6px 16px rgba(59, 36, 21, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-como-llegar:hover,
.btn-como-llegar:focus-visible {
  background: linear-gradient(135deg, #6f4e37, #5a3d2b 55%, var(--color-cafe-oscuro));
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(59, 36, 21, 0.38);
}

.btn-como-llegar:active {
  transform: translateY(0);
}

.como-llegar-icono {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--color-verde);
  display: grid;
  place-items: center;
}

.como-llegar-icono svg {
  width: 24px;
  height: 24px;
}

/* Anillo que late suavemente alrededor del pin para llamar la atención. */
.como-llegar-icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-beige);
  animation: como-llegar-pulso 2.2s ease-out infinite;
}

@keyframes como-llegar-pulso {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.6); opacity: 0; }
}

.como-llegar-texto {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.como-llegar-texto strong {
  font-size: 1.1rem;
}

.como-llegar-texto small {
  font-size: 0.8rem;
  opacity: 0.9;
}

.como-llegar-flecha {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.btn-como-llegar:hover .como-llegar-flecha {
  transform: translateX(4px);
}

@media (max-width: 480px) {
  .btn-como-llegar {
    display: flex;
    width: 100%;
  }

  .como-llegar-flecha {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .como-llegar-icono::after {
    animation: none;
    display: none;
  }

  .btn-como-llegar,
  .como-llegar-flecha {
    transition: none;
  }
}

.calificacion-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-blanco);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  color: var(--color-cafe-oscuro);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(59, 36, 21, 0.08);
}

/* ---------- Lealtad ---------- */

.lealtad-tarjeta {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-blanco);
  border-radius: var(--radio-borde);
  padding: 28px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(59, 36, 21, 0.08);
}

.lealtad-numero {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-verde);
  line-height: 1;
}

/* ---------- Redes / contacto / footer ---------- */

.redes-lista {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.redes-lista a,
.redes-lista span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-blanco);
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59, 36, 21, 0.08);
}

/* Aparte y más específico que ".sitio-footer a" (más abajo en este mismo
   archivo): con la misma especificidad que ".redes-lista a" ganaba por venir
   después, dejando el texto beige claro casi invisible sobre la píldora
   blanca. Aquí el fondo es blanco, así que el texto va oscuro sí o sí. */
.sitio-footer .redes-lista a,
.sitio-footer .redes-lista span {
  color: var(--color-cafe-oscuro);
}

/* Logo oficial de la red (SVG en línea, ver footer_publico.php): tamaño fijo
   para que no se deforme ni empuje el texto en pantallas chicas. */
.icono-red {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.horario-tabla {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.horario-tabla td {
  padding: 4px 8px;
}

.horario-tabla .dia {
  font-weight: 600;
}

.sitio-footer {
  background: var(--color-cafe-oscuro);
  color: var(--color-beige-claro);
  padding: 32px 0;
  text-align: center;
  font-size: 0.9rem;
}

.sitio-footer a {
  color: var(--color-beige-claro);
}

/* ---------- Botón flotante de WhatsApp + burbuja ---------- */

.whatsapp-flotante-envoltorio {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
}

.whatsapp-flotante {
  flex-shrink: 0;
  background: #25d366;
  color: var(--color-blanco);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.whatsapp-flotante .icono-boton {
  width: 28px;
  height: 28px;
}

/* Burbuja con una frase corta pensada para dar ganas de escribir (editable
   desde Configuración: whatsapp_flotante_texto). Es un enlace, no solo un
   globo decorativo — toda la burbuja se puede pulsar, no solo el botón
   redondo, para que sea más fácil darle clic. */
.whatsapp-burbuja {
  background: var(--color-blanco);
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 10px 14px;
  border-radius: 999px 999px 4px 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  max-width: min(220px, 60vw);
  animation: whatsapp-burbuja-aparecer 0.5s ease 1s both;
}

@keyframes whatsapp-burbuja-aparecer {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-burbuja {
    animation: none;
  }
}

/* La burbuja se desvanece sola (sitio.js, solo en móvil) y el botón flotante se esconde mientras
   el menú o el carrito están abiertos: ahí tapaban el botón de WhatsApp del menú y el pie del carrito. */
.whatsapp-burbuja {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.whatsapp-burbuja.oculta {
  opacity: 0;
  transform: scale(0.9) translateY(6px);
  pointer-events: none;
}

body.menu-movil-abierto .whatsapp-flotante-envoltorio,
html.carrito-abierto .whatsapp-flotante-envoltorio {
  display: none;
}

@media (max-width: 767px) {
  .whatsapp-flotante-envoltorio {
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-burbuja {
    max-width: 200px;
    font-size: 0.85rem;
  }
}

/* Pantallas muy angostas: la burbuja completa (botón + texto) no cabe
   junto al margen de 20px del botón redondo sin desbordar la pantalla. */
@media (max-width: 360px) {
  .whatsapp-burbuja {
    display: none;
  }
}

/* ---------- Transiciones de hover ---------- */
/* Solo en elementos realmente clicables (botones, enlaces de tarjeta,
   píldoras de redes): las tarjetas de producto que NO enlazan a nada
   (.tarjeta-producto sin .tarjeta-producto-enlace) no llevan esta
   transición para no insinuar que se pueden pulsar. */
.sitio-body .btn,
.sitio-body .redes-lista a,
.sitio-body .calificacion-google,
.sitio-body .tarjeta-producto-enlace,
.sitio-body .whatsapp-flotante,
.sitio-body .whatsapp-burbuja {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sitio-body .redes-lista a:hover,
.sitio-body .calificacion-google:hover,
.sitio-body .whatsapp-flotante:hover,
.sitio-body .whatsapp-burbuja:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 36, 21, 0.15);
}

.sitio-body .tarjeta-producto-enlace:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .sitio-body .btn,
  .sitio-body .redes-lista a,
  .sitio-body .calificacion-google,
  .sitio-body .tarjeta-producto-enlace,
  .sitio-body .whatsapp-flotante,
  .sitio-body .whatsapp-burbuja {
    transition: none;
  }

  .sitio-body .redes-lista a:hover,
  .sitio-body .calificacion-google:hover,
  .sitio-body .whatsapp-flotante:hover,
  .sitio-body .whatsapp-burbuja:hover,
  .sitio-body .tarjeta-producto-enlace:hover {
    transform: none;
  }
}

/* ---------- Revelado al hacer scroll ---------- */
/* Las clases las añade sitio.js (inicializarRevelado()) por elemento, no
   por sección completa aquí en CSS: así, si JavaScript no llega a correr,
   ningún contenido queda oculto (mejora progresiva, igual que la clase
   "js" del panel administrativo). */
.por-revelar {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.por-revelar.revelado {
  opacity: 1;
  transform: translateY(0);
}

/* Fotos de las tarjetas (temporada, promociones, productos): al cargarse suben desde abajo
   despacio, dentro del marco de la tarjeta (que recorta lo que sobra). Sin esto la foto, que
   se descarga con carga diferida, aparecía de golpe. La clase "img-por-cargar" la añade
   sitio.js (inicializarRevelaFotos) y se quita en cuanto la foto está lista y a la vista. */
.img-por-cargar {
  opacity: 0;
  transform: translateY(40px) scale(1.05);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.img-por-cargar.img-lista {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .por-revelar,
  .img-por-cargar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Carrito de compras (pedido por WhatsApp) ---------- */

.carrito[hidden],
.carrito-fondo[hidden],
.carrito-panel[hidden],
.carrito-contador[hidden],
.carrito-aviso[hidden],
.carrito-pie[hidden],
.carrito-vacio[hidden],
.carrito-error[hidden] {
  display: none;
}

/* Botón "+ Agregar" de cada tarjeta de producto. */
.agregar-carrito {
  display: flex;
  flex-wrap: wrap;      /* si no cabe a la par de la cantidad (pantallas de ~320px), el botón baja y ocupa todo el ancho */
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

/* Cuántos se van a agregar, desde la propia tarjeta (por defecto uno). */
.cantidad-agregar {
  flex: none;
  display: flex;
  align-items: center;
  border: 2px solid var(--color-cafe);
  border-radius: var(--radio-borde);
  background: var(--color-blanco);
}

.cantidad-agregar button {
  width: 44px;
  min-height: 44px;
  border: none;
  background: none;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-cafe);
  cursor: pointer;
}

.cantidad-agregar button:hover,
.cantidad-agregar button:focus-visible {
  background: var(--color-beige);
}

.cantidad-agregar output {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--color-cafe-oscuro);
}

.btn-agregar {
  flex: 1 1 98px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  white-space: nowrap;
  border: 2px solid var(--color-cafe);
  border-radius: var(--radio-borde);
  background: transparent;
  color: var(--color-cafe);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-agregar:hover,
.btn-agregar:focus-visible {
  background: var(--color-cafe);
  color: var(--color-blanco);
}

.btn-agregar:active {
  transform: scale(0.97);
}

.btn-agregar.btn-agregar--listo {
  background: var(--color-verde);
  border-color: var(--color-verde);
  color: var(--color-blanco);
}

.carrito-contador {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--color-verde);
  border: 2px solid var(--color-beige-claro);
  color: var(--color-blanco);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.nav-carrito--salto {
  animation: carrito-salto 0.45s ease;
}

@keyframes carrito-salto {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) rotate(-6deg); }
  100% { transform: scale(1); }
}

.carrito-fondo {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(59, 36, 21, 0.5);
}

.carrito-panel {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--color-beige-claro);
  color: var(--color-texto);
  box-shadow: -8px 0 30px rgba(59, 36, 21, 0.3);
  /* Móvil: hoja que sube desde abajo. Nunca más alta que la pantalla (dvh = descuenta la barra del
     navegador del teléfono): lo que no cabe se desplaza DENTRO de .carrito-cuerpo, mientras el
     encabezado y el total con el botón de enviar quedan siempre a la vista. */
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  max-height: 92dvh;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  animation: carrito-subir 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
  /* Pantallas anchas: panel lateral a la derecha, de arriba a abajo de la ventana. */
  .carrito-panel {
    left: auto;
    top: 0;
    width: 440px;
    max-width: 100vw;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    animation-name: carrito-entrar;
  }
}

/* Teléfono de lado o ventana muy baja: el panel ocupa toda la altura disponible. */
@media (max-height: 520px) {
  .carrito-panel {
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

@keyframes carrito-subir {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes carrito-entrar {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

html.carrito-abierto,
html.carrito-abierto body {
  overflow: hidden;
}

.carrito-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-beige);
}

.carrito-encabezado h2 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-cafe-oscuro);
}

.carrito-cerrar {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-cafe-oscuro);
  cursor: pointer;
}

.carrito-aviso {
  padding: 12px 14px;
  border-radius: var(--radio-borde);
  background: #fff4d6;
  border: 1px solid #e8c766;
  color: #5c4300;
  font-size: 0.92rem;
}

.carrito-aviso strong {
  display: block;
}

.carrito-cuerpo {
  flex: 1 1 auto;
  min-height: 0;               /* imprescindible para que un hijo flex pueda desplazarse */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 16px;
}

.carrito-aviso {
  margin: 8px 0 4px;
}

.carrito-vacio {
  text-align: center;
  color: #6b5a4d;
  padding: 32px 8px;
}

.carrito-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carrito-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "info cant sub"
    "info quitar quitar";
  gap: 4px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-beige);
}

.carrito-item-info { grid-area: info; min-width: 0; }
.carrito-cantidad { grid-area: cant; }
.carrito-item-subtotal { grid-area: sub; }
.carrito-item-quitar { grid-area: quitar; justify-self: end; }

.carrito-item-nombre {
  margin: 0;
  font-weight: 700;
  color: var(--color-cafe-oscuro);
}

.carrito-item-unitario {
  margin: 0;
  font-size: 0.85rem;
  color: #6b5a4d;
}

.carrito-cantidad {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-blanco);
  border: 1px solid var(--color-beige);
  border-radius: 999px;
}

.carrito-cantidad button {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-cafe);
  cursor: pointer;
  border-radius: 50%;
}

.carrito-cantidad button:hover {
  background: var(--color-beige);
}

.carrito-cantidad-valor {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
}

.carrito-item-subtotal {
  margin: 0;
  min-width: 70px;
  text-align: right;
  font-weight: 700;
  color: var(--color-verde);
}

.carrito-item-quitar {
  border: none;
  background: none;
  color: var(--color-error);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.carrito-pie {
  flex: none;
  padding: 12px 20px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-beige);
  background: var(--color-blanco);
  box-shadow: 0 -6px 16px rgba(59, 36, 21, 0.08);
}

.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1rem;
}

.carrito-total strong {
  font-size: 1.5rem;
  color: var(--color-cafe-oscuro);
}

.carrito-datos {
  border: none;
  margin: 14px 0 0;
  padding: 0;
}

.carrito-datos legend,
.carrito-pago legend {
  font-weight: 700;
  margin-bottom: 6px;
  padding: 0;
}

.carrito-campo {
  margin-bottom: 10px;
}

.carrito-campo label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.carrito-obligatorio {
  color: var(--color-error);
}

.carrito-opcional {
  font-weight: 400;
  color: #6b5a4d;
}

.carrito-campo input,
.carrito-campo textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cdbfae;
  border-radius: var(--radio-borde);
  background: var(--color-blanco);
  color: var(--color-texto);
  font: inherit;
  font-size: 1rem;      /* 16px: el iPhone no hace zoom al enfocar el campo */
}

.carrito-campo textarea {
  resize: vertical;
}

.carrito-campo input:focus,
.carrito-campo textarea:focus {
  outline: 3px solid rgba(75, 107, 58, 0.35);
  border-color: var(--color-verde);
}

.carrito-campo input[aria-invalid="true"] {
  border-color: var(--color-error);
  background: #fdf1ee;
}

.carrito-pago--falta {
  outline: 2px solid var(--color-error);
  outline-offset: 4px;
  border-radius: var(--radio-borde);
}

.carrito-pago {
  border: none;
  margin: 12px 0 0;
  padding: 0;
}

.carrito-pago legend {
  font-weight: 700;
  margin-bottom: 6px;
  padding: 0;
}

.carrito-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--color-beige);
  border-radius: var(--radio-borde);
  cursor: pointer;
}

.carrito-opcion:has(input:checked) {
  border-color: var(--color-verde);
  background: #eef4ea;
  font-weight: 700;
}

.carrito-opcion input {
  accent-color: var(--color-verde);
  width: 20px;
  height: 20px;
}

.carrito-ayuda {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #6b5a4d;
}

.carrito-error {
  margin: 10px 0 0;
  color: var(--color-error);
  font-weight: 700;
  font-size: 0.9rem;
}

.carrito-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  box-sizing: border-box;
}

.carrito-enviar[aria-disabled="true"] {
  opacity: 0.75;
}

.carrito-ubicacion {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e3d3b8;
  border-left: 4px solid #2f6b3a;
  border-radius: 10px;
  background: #fbf4e6;
  color: #3e2f24;
}

.carrito-ubicacion-texto {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.4;
}

.carrito-entendido {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}

.carrito-entendido input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: #2f6b3a;
}

.carrito-enviar.carrito-enviar--enviando {
  opacity: 0.7;
  pointer-events: none;
  cursor: progress;
}

.carrito-enviar.carrito-enviar--bloqueado {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.carrito-vaciar {
  display: block;
  margin: 6px auto 0;
  border: none;
  background: none;
  color: #6b5a4d;
  text-decoration: underline;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .carrito-panel,
  .nav-carrito--salto {
    animation: none;
  }

  .nav-carrito,
  .btn-agregar {
    transition: none;
  }
}

/* Ventanas muy bajas (teléfono de lado): el pie se compacta en una sola fila para dejar espacio al pedido. */
@media (max-height: 520px) {
  .carrito-encabezado {
    padding: 6px 16px;
  }

  .carrito-encabezado h2 {
    font-size: 1.1rem;
  }

  .carrito-cerrar {
    width: 36px;
    height: 36px;
  }

  .carrito-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 16px;
  }

  .carrito-total {
    flex: 1 1 120px;
    gap: 10px;
  }

  .carrito-total strong {
    font-size: 1.2rem;
  }

  .carrito-enviar {
    flex: 2 1 240px;
    margin-top: 0;
    padding: 10px 14px;
  }

  .carrito-pie .carrito-error {
    flex: 1 1 100%;
    margin: 0;
  }

  .carrito-vaciar {
    flex: 1 1 100%;
    margin: 0;
    min-height: 24px;
  }
}


/* ---------- Botón del carrito en el encabezado (junto al de WhatsApp) ---------- */

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

.nav-carrito {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-cafe-oscuro);
  border-radius: 50%;
  background: var(--color-blanco);
  color: var(--color-cafe-oscuro);
  box-shadow: 0 2px 8px rgba(59, 36, 21, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-carrito[hidden] {
  display: none;
}

.nav-carrito:hover,
.nav-carrito:focus-visible {
  background: var(--color-cafe-oscuro);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(59, 36, 21, 0.28);
}

.nav-carrito:focus-visible {
  outline: 3px solid var(--color-verde);
  outline-offset: 3px;
}

.nav-carrito svg {
  width: 26px;
  height: 26px;
}

/* Con productos dentro, el carrito se tiñe de verde (el contador lo resalta) para invitar a terminar el pedido. */
.nav-carrito:has(.carrito-contador:not([hidden])) {
  border-color: var(--color-verde);
  color: var(--color-verde);
}

.nav-carrito:has(.carrito-contador:not([hidden])):hover,
.nav-carrito:has(.carrito-contador:not([hidden])):focus-visible {
  background: var(--color-verde);
  border-color: var(--color-verde);
  color: var(--color-blanco);
}

.nav-carrito .carrito-contador {
  top: -7px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  line-height: 20px;
  font-size: 0.78rem;
  box-shadow: 0 2px 5px rgba(59, 36, 21, 0.3);
}

/* Al agregar algo, el contador "salta". */
.nav-carrito--salto .carrito-contador {
  animation: contador-salto 0.5s ease;
}

@keyframes contador-salto {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@media (min-width: 1024px) {
  /* Pantallas anchas: el carrito va al final de la barra, a la par del botón de WhatsApp. */
  .sitio-nav-interior .sitio-nav-enlaces {
    order: 2;
    margin-left: auto;
  }

  .sitio-nav-interior .sitio-nav-acciones {
    order: 3;
    margin-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-carrito { transition: none; }
  .nav-carrito--salto .carrito-contador { animation: none; }
}


/* Frappé / Batido dentro de la línea del carrito. */
.carrito-versiones {
  display: inline-flex;
  margin-top: 6px;
  border: 1px solid var(--color-cafe);
  border-radius: 999px;
  overflow: hidden;
}

.carrito-versiones button {
  min-height: 44px;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--color-cafe);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.carrito-versiones button[aria-pressed="true"] {
  background: var(--color-cafe);
  color: var(--color-blanco);
}


/* Caliente / Frío en la tarjeta (productos que se pueden pedir de las dos formas). */
.temperatura-agregar {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.temperatura-agregar button {
  flex: 1 1 0;
  min-height: 44px;
  border: 2px solid var(--color-cafe);
  border-radius: 999px;
  background: transparent;
  color: var(--color-cafe);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.temperatura-agregar button[aria-pressed="true"] {
  background: var(--color-cafe);
  color: var(--color-blanco);
}

.temperatura-agregar--falta {
  outline: 2px solid var(--color-error);
  outline-offset: 3px;
  border-radius: 999px;
}

.temperatura-aviso {
  margin: 6px 0 0;
  color: var(--color-error);
  font-size: 0.85rem;
  font-weight: 700;
}

.temperatura-aviso[hidden] {
  display: none;
}

.carrito-item-info .carrito-versiones + .carrito-versiones {
  margin-left: 6px;
}


/* Pregunta "¿ya enviaste tu pedido?" y agradecimiento dentro del panel del carrito. */
.carrito-estado[hidden],
.carrito-cuerpo[hidden] {
  display: none;
}

.carrito-estado {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  text-align: center;
}

.carrito-estado h3 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--color-cafe-oscuro);
}

.carrito-estado p {
  margin: 0 0 6px;
  color: #6b5a4d;
}

.carrito-estado-boton {
  width: 100%;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 700;
  box-sizing: border-box;
}

.carrito-gracias-icono {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-verde);
  color: var(--color-blanco);
  font-size: 2rem;
  font-weight: 700;
}