/* =========================================================
   MÓCHATE · Prototipo comercial · Churros Escena 2
   Estilos subordinados a la composición editorial existente
   ========================================================= */

.familia-churros,
.familia-galletas {
  --fc-comercio: #b32222;
  --fc-comercio-suave: rgba(179, 34, 34, 0.14);
  --fc-comercio-fondo: rgba(255, 253, 248, 0.92);
}

.familia-churros .fc-familia .fc-sabor__comercio,
.familia-galletas .fg-escena2 .fc-sabor__comercio,
[data-comercio] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(10px, 1.4vh, 16px);
  min-height: 44px;
  visibility: visible;
  opacity: 1;
  z-index: 2;
}

/* Galletas Escena 2 · disparador bajo descripción · ficha hacia abajo */
.familia-galletas .fg-escena2 .fc-sabor__comercio {
  position: absolute;
  left: 0;
  right: 0;
  /* Anclado por arriba para que la ficha crezca hacia abajo (como Churros) */
  top: calc(100% - clamp(72px, 11vh, 100px) + clamp(8px, 1.2vh, 14px));
  bottom: auto;
  margin-top: 0;
  padding: 0 clamp(4px, 0.6vw, 10px);
  box-sizing: border-box;
  z-index: 4;
  flex-direction: column;
}

.familia-churros .fc-familia .fc-sabores {
  align-items: stretch;
}

.familia-churros .fc-familia .fc-sabor {
  display: flex;
  flex-direction: column;
}

.familia-churros .fc-familia .fc-sabor__comercio {
  margin-top: clamp(2px, 0.4vh, 6px);
  padding-top: 0;
  min-height: 0;
}

.familia-churros .fc-comercio__disparador--carrito,
.familia-galletas .fg-escena2 .fc-comercio__disparador--carrito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--fc-sabor-color, var(--fc-comercio));
  background: color-mix(in srgb, var(--fc-sabor-color, var(--fc-comercio)) 14%, transparent);
  cursor: pointer;
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    background-color 200ms ease;
}

.familia-churros .fc-comercio__disparador--carrito:hover,
.familia-galletas .fg-escena2 .fc-comercio__disparador--carrito:hover {
  opacity: 0.88;
  background: color-mix(in srgb, var(--fc-sabor-color, var(--fc-comercio)) 18%, transparent);
}

.familia-churros .fc-comercio__disparador--carrito.is-seleccionado,
.familia-galletas .fg-escena2 .fc-comercio__disparador--carrito.is-seleccionado {
  background: color-mix(in srgb, var(--fc-sabor-color, var(--fc-comercio)) 18%, transparent);
}

.familia-churros .fc-comercio__disparador--carrito:focus-visible,
.familia-galletas .fg-escena2 .fc-comercio__disparador--carrito:focus-visible {
  outline-color: var(--fc-sabor-color, var(--fc-comercio));
}

.familia-churros .fc-comercio__disparador--carrito .fc-sabor__carrito-icono,
.familia-galletas .fg-escena2 .fc-comercio__disparador--carrito .fc-sabor__carrito-icono {
  display: block;
}

.familia-churros .fc-familia__dock-compra {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(96px, 12.5vh, 118px);
  z-index: 5;
  width: min(calc(100% - 24px), 14rem);
  min-height: 0;
  pointer-events: none;
}

.familia-churros .fc-familia__dock-compra:has([data-comercio-ficha].is-abierta) {
  pointer-events: auto;
}

.familia-churros .fc-familia__dock-compra [data-comercio-ficha].fc-comercio__ficha--flotante {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 14rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  max-height: none !important;
  transform: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
  pointer-events: none;
}

.familia-churros .fc-familia__dock-compra [data-comercio-ficha].fc-comercio__ficha--flotante:not(.is-abierta) {
  opacity: 0;
  visibility: hidden;
}

.familia-churros .fc-familia__dock-compra [data-comercio-ficha].fc-comercio__ficha--flotante.is-abierta {
  position: relative;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 12px 14px 10px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: var(--fc-comercio-fondo);
  border: 1px solid rgba(179, 34, 34, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(61, 42, 36, 0.14);
}

.familia-churros .fc-familia .fc-sabor__comercio {
  min-height: 0;
}

.familia-churros .fc-comercio__cerrar {
  justify-self: end;
  width: 28px;
  height: 28px;
  margin: 0 0 2px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--fc-comercio);
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 180ms ease, background-color 180ms ease;
}

.familia-churros .fc-comercio__cerrar:hover {
  opacity: 1;
  background: var(--fc-comercio-suave);
}

.familia-churros .fc-comercio__cerrar:focus-visible {
  outline: 2px solid var(--fc-comercio);
  outline-offset: 2px;
}

/* Frutas Escena 2 · indicador global debajo del panel verde (bottom vía editorial.js) */
.indicador-recorrido-pie.is-ff-escena2 {
  transition:
    opacity 280ms ease,
    visibility 280ms ease,
    bottom 280ms ease;
}

/* Frutas Escena 2 · puntos + panel sobre la fotografía editorial (sin alterar altura) */
.familia-frutas .ff-escena2 {
  overflow: visible;
}

.familia-frutas .ff-escena2__plano {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.familia-frutas .ff-escena2__foto {
  overflow: visible;
}

.familia-frutas .ff-escena2__puntos {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.familia-frutas .fa-sabor-punto {
  pointer-events: auto;
  transform: translate(-50%, -50%);
  gap: 0;
}

.familia-frutas .ff-escena2__foto {
  pointer-events: none;
}

.familia-frutas .fa-sabor-punto.is-abierto {
  z-index: 2;
}

.familia-frutas .fa-sabor-punto .mesa-punto__marca {
  background: rgba(110, 148, 71, 0.78);
  transition:
    width 180ms ease,
    height 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.familia-frutas .fa-sabor-punto.is-abierto .mesa-punto__marca {
  width: 14px;
  height: 14px;
  background: #fffdf8;
  border: 2px solid #6e9447;
  box-shadow: 0 0 0 5px rgba(110, 148, 71, 0.28);
  animation: none;
  opacity: 1;
}

.familia-frutas .fa-sabor-punto .mesa-punto__nota {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: min(180px, 32vw);
  padding: 6px 10px;
  text-align: center;
  transform: translate(-50%, 4px);
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid rgba(110, 148, 71, 0.18);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(45, 35, 20, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.familia-frutas .fa-sabor-punto .mesa-punto__nota::after {
  content: none;
}

.familia-frutas .fa-sabor-punto.is-abierto .mesa-punto__nota::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: rgba(255, 253, 248, 0.94);
  border-right: 1px solid rgba(110, 148, 71, 0.18);
  border-bottom: 1px solid rgba(110, 148, 71, 0.18);
  transform: translateX(-50%) rotate(45deg);
}

.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-izq .mesa-punto__nota {
  left: auto;
  right: calc(100% + 12px);
  bottom: 50%;
  top: auto;
  transform: translate(0, 50%);
}

.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-izq.is-abierto .mesa-punto__nota::after {
  left: auto;
  right: -5px;
  bottom: 50%;
  border-right: none;
  border-top: 1px solid rgba(110, 148, 71, 0.18);
  border-bottom: 1px solid rgba(110, 148, 71, 0.18);
  transform: translateY(50%) rotate(45deg);
}

.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-der .mesa-punto__nota {
  left: calc(100% + 12px);
  right: auto;
  bottom: 50%;
  top: auto;
  transform: translate(0, 50%);
}

.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-der.is-abierto .mesa-punto__nota::after {
  left: -5px;
  bottom: 50%;
  border-right: 1px solid rgba(110, 148, 71, 0.18);
  border-bottom: 1px solid rgba(110, 148, 71, 0.18);
  transform: translateY(50%) rotate(45deg);
}

.familia-frutas .fa-sabor-punto .mesa-punto__titulo {
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #5f7a3f;
  text-shadow: none;
}

.familia-frutas .fa-sabor-punto.is-abierto .mesa-punto__nota,
.familia-frutas .fa-sabor-punto.is-abierto:focus-visible .mesa-punto__nota {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-izq.is-abierto .mesa-punto__nota,
.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-izq.is-abierto:focus-visible .mesa-punto__nota {
  transform: translate(0, 50%);
}

.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-der.is-abierto .mesa-punto__nota,
.familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-der.is-abierto:focus-visible .mesa-punto__nota {
  transform: translate(0, 50%);
}

.familia-frutas .fa-sabor-punto:focus-visible:not(.is-abierto) .mesa-punto__nota {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
}

@media (hover: hover) and (pointer: fine) {
  .familia-frutas .fa-sabor-punto:hover .mesa-punto__nota {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
  }

  .familia-frutas .fa-sabor-punto.is-abierto:hover .mesa-punto__nota {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-izq.is-abierto:hover .mesa-punto__nota {
    transform: translate(0, 50%);
  }

  .familia-frutas .fa-sabor-punto.fa-sabor-punto--nota-der.is-abierto:hover .mesa-punto__nota {
    transform: translate(0, 50%);
  }
}

.familia-frutas .ff-escena2__franja {
  --ff-acento: #6e9447;
  --ff-chile: #b32222;
  --fa-cacao: var(--ff-chile);
  --fc-comercio: var(--ff-chile);
  --fc-comercio-suave: rgba(179, 34, 34, 0.28);
  --fc-comercio-fondo: rgba(255, 253, 248, 0.94);

  position: relative;
  left: 0;
  right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5px minmax(0, 1.15fr);
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: clamp(92px, 12vh, 118px);
  margin: 0;
  padding: 0;
  background: var(--ff-acento);
  color: #fffdf8;
  box-sizing: border-box;
}

.familia-frutas .ff-escena2__franja .fa-compra-ayuda {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 clamp(14px, 2vw, 28px);
  box-sizing: border-box;
  background: transparent;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: clamp(0.72rem, 1.05vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: #fffdf8;
  text-align: left;
  pointer-events: none;
}

.familia-frutas .ff-escena2__franja .fa-compra-divisor {
  width: 1.5px;
  height: 62%;
  margin: 0;
  padding: 0;
  background: rgba(255, 253, 248, 0.72);
  pointer-events: none;
  justify-self: center;
}

.familia-frutas .ff-escena2__franja .fa-compra-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0;
  padding: clamp(8px, 1.2vh, 14px) clamp(52px, 5.5vw, 64px) clamp(8px, 1.2vh, 14px) clamp(8px, 1.2vw, 16px);
  color: #fffdf8;
  pointer-events: auto;
  box-sizing: border-box;
}

.familia-frutas .fa-compra-panel__carrito-inicial {
  position: absolute;
  right: clamp(6px, 0.9vw, 12px);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.familia-frutas .fa-compra-panel__carrito-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  color: #fffdf8;
  background: color-mix(in srgb, #fffdf8 14%, transparent);
}

.familia-frutas .fa-compra-panel__carrito-circulo .fc-sabor__carrito-icono {
  display: block;
}

.familia-frutas .fa-compra-panel__bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: min(100%, 240px);
  min-width: 0;
  transform: none;
}

.familia-frutas .fa-compra-panel__encabezado {
  margin: 0;
  width: 100%;
  align-self: stretch;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fffdf8;
  text-align: center;
}

.familia-frutas .fa-compra-panel__detalle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.familia-frutas .fa-compra-panel__detalle[hidden] {
  display: none !important;
}

.familia-frutas .fa-compra-panel__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  width: 100%;
}

.familia-frutas .fa-compra-panel__nombre {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: clamp(0.96rem, 1.29vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ff-chile);
  text-align: center;
  text-transform: uppercase;
  line-height: clamp(1.08rem, 1.45vw, 1.35rem);
  min-height: clamp(1.08rem, 1.45vw, 1.35rem);
}

.familia-frutas .fa-compra-panel__presentacion,
.familia-frutas .fa-compra-panel__precio {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: clamp(0.72rem, 0.95vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 253, 248, 0.92);
  text-align: center;
}

.familia-frutas .fa-compra-panel__acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.familia-frutas .fa-compra-panel .fc-comercio__cantidad {
  margin: 0;
  gap: 9px;
  justify-content: center;
}

.familia-frutas .fa-compra-panel .mochate-canasta-item__qty {
  flex: 0 0 auto;
  background: var(--ff-chile);
  border-color: var(--ff-chile);
  color: #fffdf8;
}

.familia-frutas .fa-compra-panel .mochate-canasta-item__qty:focus-visible {
  outline-color: var(--ff-chile);
}

.familia-frutas .fa-compra-panel .mochate-canasta-item__qty-valor {
  flex: 0 0 2.5ch;
  width: 2.5ch;
  min-width: 2.5ch;
  max-width: 2.5ch;
  text-align: center;
  color: #fffdf8;
  font-variant-numeric: tabular-nums;
}

.familia-frutas .fa-compra-panel .fc-comercio__agregar {
  width: 100%;
  max-width: none;
  border-color: var(--ff-chile);
  background: var(--fc-comercio-fondo);
  color: var(--ff-chile);
}

.familia-frutas .fa-compra-panel .fc-comercio__agregar:hover {
  background: var(--ff-chile);
  color: #fffdf8;
}

.familia-frutas .fa-compra-panel .fc-comercio__agregar:focus-visible {
  outline-color: var(--ff-chile);
}

.familia-frutas .fa-compra-panel .fc-comercio__agregar:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.familia-frutas .fa-compra-panel .fc-comercio__agregar:disabled:hover {
  background: var(--fc-comercio-fondo);
  color: var(--ff-chile);
}

.familia-frutas .fa-compra-panel .fc-comercio__aviso {
  color: #fffdf8;
}

@media (max-width: 900px) {
  .familia-frutas .ff-escena2__franja {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .familia-frutas .ff-escena2__franja .fa-compra-divisor {
    display: none;
  }

  .familia-frutas .ff-escena2__franja .fa-compra-panel {
    padding-right: clamp(52px, 12vw, 60px);
  }

  .familia-frutas .fa-compra-panel__carrito-inicial {
    right: clamp(4px, 1.2vw, 10px);
  }

  .familia-frutas .ff-escena2__franja .fa-compra-ayuda {
    padding: clamp(10px, 1.6vh, 14px) clamp(14px, 4vw, 22px) 0;
    text-align: center;
    justify-content: center;
  }
}

.fc-comercio__disparador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 11rem;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--fc-comercio);
  cursor: pointer;
}

.fc-comercio__disparador:focus-visible {
  outline: 2px solid var(--fc-comercio);
  outline-offset: 3px;
  border-radius: 999px;
}

.fc-comercio__linea {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}

.fc-comercio__circulo {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1.75px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.fc-comercio__disparador.is-seleccionado .fc-comercio__circulo {
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255, 253, 248, 0.85);
}

.fc-comercio__ficha {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 14rem;
  margin-top: 0;
  padding: 0 4px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 240ms ease,
    opacity 220ms ease,
    transform 220ms ease,
    margin-top 220ms ease,
    padding 220ms ease;
  pointer-events: none;
}

.fc-comercio__ficha.is-abierta {
  margin-top: 10px;
  padding: 12px 8px 4px;
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fc-comercio__presentaciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fc-comercio__presentacion-fija {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-comercio);
  text-align: center;
}

.fc-comercio__cantidad {
  justify-content: center;
  width: 100%;
  margin-top: 0;
}

.fc-comercio__cantidad .mochate-canasta-item__qty {
  border-color: var(--fc-comercio-suave);
  color: var(--fc-comercio);
}

.fc-comercio__cantidad .mochate-canasta-item__qty:focus-visible {
  outline-color: var(--fc-comercio);
}

.fc-comercio__capsula {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--fc-comercio-suave);
  border-radius: 999px;
  background: transparent;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-comercio);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.fc-comercio__capsula[aria-pressed="true"] {
  background: var(--fc-comercio);
  border-color: var(--fc-comercio);
  color: #fffdf8;
  font-weight: 700;
}

.fc-comercio__capsula:focus-visible {
  outline: 2px solid var(--fc-comercio);
  outline-offset: 2px;
}

.fc-comercio__precio {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fc-comercio);
  text-align: center;
}

.fc-comercio__agregar {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--fc-comercio);
  border-radius: 999px;
  background: var(--fc-comercio-fondo);
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: none;
  color: var(--fc-comercio);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.fc-comercio__agregar:hover {
  background: var(--fc-comercio);
  color: #fffdf8;
}

.fc-comercio__agregar:focus-visible {
  outline: 2px solid var(--fc-comercio);
  outline-offset: 3px;
}

.fc-comercio__aviso {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--fc-comercio);
  opacity: 0;
  transition: opacity 220ms ease;
}

.fc-comercio__aviso.is-visible {
  opacity: 1;
}

/* Indicador global de canasta */
.mochate-canasta-shell {
  position: fixed;
  top: clamp(14px, 2.2vh, 22px);
  right: clamp(16px, 2.5vw, 28px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mochate-canasta-shell[hidden] {
  display: none !important;
}

.mochate-canasta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px 7px 14px;
  border: 1px solid rgba(179, 34, 34, 0.28);
  border-radius: 999px;
  background: rgba(244, 239, 232, 0.96);
  box-shadow: 0 8px 20px rgba(61, 42, 36, 0.1);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.mochate-canasta:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 3px;
}

.mochate-canasta.is-reactiva {
  animation: mochate-canasta-reaccion 520ms ease;
}

@keyframes mochate-canasta-reaccion {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(179, 34, 34, 0.18);
  }
  100% {
    transform: scale(1);
  }
}

.mochate-canasta__texto {
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b32222;
  white-space: nowrap;
}

.mochate-canasta__contador {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 5px;
  border-radius: 999px;
  background: #b32222;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fffdf8;
  line-height: 1;
}

.mochate-canasta-meta {
  max-width: 15rem;
  padding: 6px 10px;
  border: 1px solid rgba(179, 34, 34, 0.14);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 6px 16px rgba(61, 42, 36, 0.08);
  text-align: right;
}

.mochate-canasta-meta__linea {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: rgba(61, 42, 36, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .mochate-canasta.is-reactiva {
    animation: none;
  }
}

/* Panel lateral de canasta */
.mochate-canasta-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(48, 32, 28, 0.18);
  opacity: 0;
  transition: opacity 240ms ease;
}

.mochate-canasta-backdrop[hidden] {
  display: none !important;
}

.mochate-canasta-backdrop.is-visible {
  opacity: 1;
}

.mochate-canasta-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  height: 100%;
  max-height: 100dvh;
  background: #fffdf8;
  border-left: 1px solid rgba(179, 34, 34, 0.16);
  box-shadow: -12px 0 36px rgba(61, 42, 36, 0.12);
  transform: translateX(100%);
  transition: transform 260ms ease;
}

.mochate-canasta-panel[hidden] {
  display: none !important;
}

.mochate-canasta-panel.is-abierto {
  transform: translateX(0);
}

.mochate-canasta-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(179, 34, 34, 0.12);
}

.mochate-canasta-panel__titulo {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b32222;
}

.mochate-canasta-panel__cerrar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #b32222;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.mochate-canasta-panel__cerrar:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 2px;
}

.mochate-canasta-panel__lista {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.mochate-canasta-panel__lista[hidden] {
  display: none !important;
}

.mochate-canasta-panel__vacia {
  margin: 24px 0 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.9rem;
  color: rgba(61, 42, 36, 0.72);
  text-align: center;
}

.mochate-canasta-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(179, 34, 34, 0.1);
}

.mochate-canasta-item__foto {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(179, 34, 34, 0.06);
}

.mochate-canasta-item__foto--vacia {
  display: block;
}

.mochate-canasta-item__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mochate-canasta-item__familia,
.mochate-canasta-item__sabor,
.mochate-canasta-item__presentacion,
.mochate-canasta-item__precio {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
}

.mochate-canasta-item__familia {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(61, 42, 36, 0.62);
}

.mochate-canasta-item__sabor {
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2a24;
}

.mochate-canasta-item__presentacion {
  font-size: 0.8rem;
  color: rgba(61, 42, 36, 0.78);
}

.mochate-canasta-item__precio {
  font-size: 0.9rem;
  font-weight: 700;
  color: #b32222;
}

.mochate-canasta-item__cantidad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.mochate-canasta-item__qty {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(179, 34, 34, 0.28);
  border-radius: 50%;
  background: #fffdf8;
  color: #b32222;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.mochate-canasta-item__qty:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 2px;
}

.mochate-canasta-item__qty-valor {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2a24;
}

.mochate-canasta-item__eliminar {
  justify-self: start;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  color: rgba(61, 42, 36, 0.68);
  cursor: pointer;
}

.mochate-canasta-item__eliminar:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 2px;
}

.mochate-canasta-panel__resumen {
  display: grid;
  gap: 10px;
  padding: 16px 20px 22px;
  border-top: 1px solid rgba(179, 34, 34, 0.12);
  background: rgba(255, 253, 248, 0.98);
}

.mochate-canasta-panel__dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.86rem;
  color: #3d2a24;
}

.mochate-canasta-panel__dato strong {
  font-size: 1rem;
  color: #b32222;
}

.mochate-canasta-panel__continuar {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 12px 16px;
  border: 1px solid #b32222;
  border-radius: 999px;
  background: #b32222;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fffdf8;
  cursor: pointer;
}

.mochate-canasta-panel__continuar:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 3px;
}

.mochate-canasta-panel__continuar:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.mochate-canasta-panel__seguir {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(179, 34, 34, 0.35);
  border-radius: 999px;
  background: transparent;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #b32222;
  cursor: pointer;
}

.mochate-canasta-panel__seguir:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 3px;
}

.mochate-canasta-checkout {
  padding: 0 20px 22px;
}

/* Con el checkout abierto, el formulario es el único contenedor desplazable;
   la lista solo ocupa el espacio sobrante y cede por completo si no cabe. */
.mochate-canasta-panel:has(> .mochate-canasta-checkout:not([hidden])) .mochate-canasta-panel__lista {
  flex: 1 1 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.mochate-canasta-panel:has(> .mochate-canasta-checkout:not([hidden])) .mochate-canasta-panel__lista > :first-child {
  margin-top: 16px;
}

.mochate-canasta-panel:has(> .mochate-canasta-checkout:not([hidden])) .mochate-canasta-panel__lista > :last-child {
  margin-bottom: 16px;
}

.mochate-canasta-panel > .mochate-canasta-checkout:not([hidden]) {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mochate-canasta-exito {
  padding: 4px 20px 18px;
}

[data-canasta-vista][hidden] {
  display: none !important;
}

.mochate-canasta-checkout__form {
  display: grid;
  gap: 14px;
}

.mochate-canasta-checkout__intro {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.84rem;
  line-height: 1.45;
  color: #3d2a24;
}

.mochate-canasta-checkout__campo {
  display: grid;
  gap: 6px;
}

[data-checkout-referencia-wrap][hidden] {
  display: none !important;
}

.mochate-canasta-checkout__label {
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  color: #3d2a24;
}

.mochate-canasta-checkout__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(179, 34, 34, 0.25);
  border-radius: 8px;
  background: #fffdf8;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.92rem;
  color: #2a1d18;
}

.mochate-canasta-checkout__input:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 2px;
}

.mochate-canasta-checkout__error {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  line-height: 1.4;
  color: #9a1f1f;
}

.mochate-canasta-checkout__reintentar {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #b32222;
  border-radius: 999px;
  background: #fffdf8;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: #b32222;
  cursor: pointer;
}

.mochate-canasta-checkout__reintentar:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 3px;
}

.mochate-canasta-exito__resumen {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.mochate-canasta-exito__total {
  margin: 0;
}

.mochate-canasta-exito__total strong {
  font-size: 1.05rem;
}

.mochate-canasta-exito__titulo {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.96rem;
  font-weight: 700;
  color: #2a1d18;
}

.mochate-canasta-exito__folio {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #b32222;
}

.mochate-canasta-exito__estado-pago {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  color: #3d2a24;
}

.mochate-canasta-exito__vigencia {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6b4a40;
  white-space: pre-line;
}

.mochate-canasta-exito__bloque {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.mochate-canasta-exito__bloque[hidden] {
  display: none !important;
}

.mochate-canasta-exito__banco {
  margin: 0;
}

.mochate-canasta-exito__total-transferir strong {
  font-size: 1.05rem;
}

.mochate-canasta-exito__descargar {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.mochate-canasta-exito__descargar[hidden] {
  display: none !important;
}

.mochate-canasta-exito__mensaje {
  margin: 0 0 8px;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #3d2a24;
}

.mochate-canasta-exito__consulta {
  margin-bottom: 10px;
}

.mochate-canasta-exito__acciones {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.mochate-canasta-checkout__pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mochate-canasta-checkout__paso {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(179, 34, 34, 0.08);
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: #6b4a40;
}

.mochate-canasta-checkout__paso.is-activo {
  background: #b32222;
  color: #fffdf8;
}

.mochate-canasta-checkout__paso.is-completado {
  background: rgba(179, 34, 34, 0.16);
  color: #3d2a24;
}

.mochate-canasta-checkout__paso-panel {
  display: grid;
  gap: 14px;
}

.mochate-canasta-checkout__paso-panel[hidden] {
  display: none !important;
}

.mochate-canasta-checkout__fila-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mochate-canasta-checkout__textarea {
  min-height: 72px;
  resize: vertical;
}

.mochate-canasta-checkout__opcional {
  font-weight: 400;
  color: #6b4a40;
}

.mochate-canasta-checkout__cobertura,
.mochate-canasta-checkout__promo,
.mochate-canasta-checkout__ayuda {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #3d2a24;
}

.mochate-canasta-checkout__confirmacion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  line-height: 1.4;
  color: #3d2a24;
}

.mochate-canasta-checkout__confirmacion input {
  margin-top: 3px;
}

.mochate-canasta-checkout__acciones-paso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mochate-canasta-checkout__resumen {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(179, 34, 34, 0.14);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.96);
}

.mochate-canasta-checkout__total-estimado strong {
  font-size: 1.08rem;
}

.mochate-canasta-checkout__banco {
  padding: 12px;
  border-radius: 10px;
  background: rgba(244, 239, 232, 0.65);
}

.mochate-canasta-checkout__banco-titulo {
  margin: 0 0 8px;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: #2a1d18;
}

.mochate-canasta-checkout__banco-lista {
  margin: 0;
  display: grid;
  gap: 6px;
}

.mochate-canasta-checkout__banco-lista div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.8rem;
}

.mochate-canasta-checkout__clabe-row {
  align-items: start;
}

.mochate-canasta-checkout__clabe-valor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mochate-canasta-checkout__copiar-clabe {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(179, 34, 34, 0.28);
  border-radius: 999px;
  background: #fffdf8;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  color: #3d2a24;
  cursor: pointer;
}

.mochate-canasta-checkout__copiar-clabe:hover {
  background: rgba(179, 34, 34, 0.06);
}

.mochate-canasta-checkout__copiar-clabe:focus-visible {
  outline: 2px solid #b32222;
  outline-offset: 2px;
}

.mochate-canasta-checkout__copiar-clabe.is-copiada {
  border-color: rgba(46, 125, 50, 0.35);
  color: #2e7d32;
}

.mochate-canasta-checkout__banco-lista dt {
  margin: 0;
  font-weight: 600;
  color: #6b4a40;
}

.mochate-canasta-checkout__banco-lista dd {
  margin: 0;
  color: #2a1d18;
  word-break: break-word;
}

.mochate-canasta-checkout__banco-pendiente {
  margin: 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6b4a40;
}

.mochate-canasta-checkout__pago-opciones {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.mochate-canasta-checkout__radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.84rem;
  line-height: 1.4;
  color: #3d2a24;
}

.mochate-canasta-checkout__radio input {
  margin-top: 3px;
}

.mochate-canasta-checkout__whatsapp {
  display: block;
  margin-bottom: 8px;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: #b32222;
  text-decoration: underline;
}

.mochate-canasta-checkout__whatsapp[hidden] {
  display: none !important;
}

.mochate-canasta-checkout__volver-canasta {
  margin-top: 8px;
}


@media (max-width: 900px) {
  .mochate-canasta-checkout__fila-doble,
  .mochate-canasta-checkout__acciones-paso {
    grid-template-columns: 1fr;
  }

  .fc-comercio__ficha.is-abierta {
    max-height: 260px;
  }

  .familia-churros .fc-familia__dock-compra {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 18rem);
  }

  .familia-churros .fc-familia__dock-compra [data-comercio-ficha].fc-comercio__ficha--flotante.is-abierta {
    max-height: none !important;
  }

  .familia-churros .fc-familia__guia-compra {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: min(52ch, calc(100% - 32px));
    padding: 8px 16px;
  }

  .familia-galletas .fg-escena2 .fc-familia__guia-compra {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: min(52ch, calc(100% - 32px));
    padding: 8px 16px;
  }

  .mochate-canasta-shell {
    top: 12px;
    /* Deja libre el toggle del menú (esquina superior derecha) */
    right: 64px;
  }

  .mochate-canasta {
    padding: 6px 8px 6px 12px;
  }

  .mochate-canasta__texto {
    font-size: 0.68rem;
  }

  .mochate-canasta__contador {
    min-width: 1.4rem;
    height: 1.4rem;
    font-size: 0.66rem;
  }

  .mochate-canasta-meta {
    max-width: 12.5rem;
    padding: 5px 8px;
  }

  .mochate-canasta-meta__linea {
    font-size: 0.58rem;
  }

  .mochate-canasta-panel {
    width: 100%;
    border-left: none;
  }
}

/* Zona segura del indicador fijo de canasta */
/* El hueco del contenedor junto a la píldora no debe capturar clics */
.mochate-canasta-shell {
  pointer-events: none;
}

.mochate-canasta-shell > * {
  pointer-events: auto;
}

@media (min-width: 1081px) {
  /* «Regresar a Los Frutos» termina a la izquierda de la píldora */
  .fc-hero__nav {
    padding-right: calc(clamp(16px, 2.5vw, 28px) + 140px);
  }

  /* La línea de total caería sobre el título de la quinta columna */
  body[data-recorrido="frutos"] .mochate-canasta-meta {
    display: none;
  }
}

@media (max-width: 760px) {
  /* El menú de familias empieza debajo de la píldora y su línea de total */
  .fc-hero__nav {
    padding-top: 92px;
  }

  .familia-vegetales .fc-hero__copia {
    transform: none;
  }

  /* El botón del menú de la portada ocupa los últimos 76 px */
  body[data-recorrido="historia"] .mochate-canasta-shell {
    right: 84px;
    transition: opacity 220ms ease, visibility 0s;
  }

  /* En la portada no hay hueco libre junto al logotipo, el menú ni el título */
  body[data-recorrido="historia"].canasta-sobre-portada .mochate-canasta-shell {
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
}

@media (max-width: 620px) {
  .las-relaciones .lr-escena2 {
    padding-top: 96px;
  }
}

/* Fichas de compra de Churros y Galletas */
/* Mientras una ficha está abierta, «Volver al menú» y WhatsApp tapaban sus controles */
body:has(.familia-churros [data-comercio-ficha].is-abierta, .familia-galletas [data-comercio-ficha].is-abierta) .volver-menu,
body:has(.familia-churros [data-comercio-ficha].is-abierta, .familia-galletas [data-comercio-ficha].is-abierta) .whatsapp-flotante {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.familia-galletas .fg-escena2 .fc-sabor__comercio:has([data-comercio-ficha].is-abierta) {
  z-index: 6;
}

.familia-galletas .fg-escena2 [data-comercio-ficha].is-abierta {
  padding: 12px 14px 10px;
  background: var(--fc-comercio-fondo);
  border: 1px solid rgba(179, 34, 34, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(61, 42, 36, 0.14);
}

@media (max-width: 1080px) {
  /* La ficha abierta entra en el flujo de su tarjeta: empuja la fila siguiente
     y alarga la escena, así el snap no salta antes de llegar a «Agregar».
     El margen negativo deja el carrito donde estaba con la ficha cerrada y la altura
     mínima evita que la tarjeta encoja al empezar la apertura (el snap recolocaba la vista). */
  .familia-galletas .fg-escena2 .fc-sabor__comercio:has([data-comercio-ficha].is-abierta) {
    position: relative;
    top: auto;
    margin-top: calc(clamp(8px, 1.2vh, 14px) - clamp(72px, 11vh, 100px));
    min-height: calc(clamp(72px, 11vh, 100px) - clamp(8px, 1.2vh, 14px));
    padding-bottom: clamp(8px, 1.2vh, 14px);
  }
}

@media (min-width: 1081px) and (max-height: 640px) {
  /* La escena mide una pantalla y tiene snap: la ficha completa debe caber en la ventana */
  .familia-galletas .fg-escena2 [data-comercio-ficha].is-abierta {
    gap: 6px;
    margin-top: 4px;
    padding: 8px 12px 6px;
  }
}

@media (max-width: 760px) {
  /* «Volver al menú» ocupa los últimos 58 px de la ventana; con este margen el último
     carrito puede subir por encima del botón (a 360 × 640 la escena medía menos que la ventana) */
  .familia-galletas .fc-familia.fg-escena2 {
    padding-bottom: 48px;
  }
}

/* Textos cortados en móvil */
@media (max-width: 380px) {
  /* Con la reserva derecha de escritorio (26vw) el texto del hero era más alto que el plano
     y su overflow recortaba las primeras líneas del título */
  .nota-hero__copia {
    padding-right: clamp(16px, 5vw, 28px);
  }
}

@media (max-width: 860px) {
  /* Cada línea del título es indivisible y mide más que la ventana: la página se desbordaba */
  .se-un-fruto .suf-escena2__titulo-linea {
    white-space: normal;
    text-wrap: balance;
  }
}

@media (max-width: 600px) {
  /* El desplazamiento de escritorio (-35px, -7% - 225px) sacaba el texto por la izquierda
     y lo subía bajo la píldora CANASTA; empieza debajo de su línea de total */
  .frutos-hero__copia {
    transform: none;
    justify-content: flex-start;
    padding-top: 96px;
  }
}

@media (max-width: 1080px) and (orientation: landscape) and (max-height: 500px) {
  /* En teléfono horizontal el mismo desplazamiento subía título y subtítulo fuera de la ventana */
  .frutos-hero__copia {
    transform: none;
  }
}

/* Teléfono horizontal: menú de familias y títulos */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  /* Con 92 px de margen y el texto centrado verticalmente, título y subtítulo tapaban
     los enlaces del menú y «Regresar a Los Frutos»; el margen derecho deja libre la píldora CANASTA */
  .fc-hero__nav {
    padding-top: 12px;
    padding-right: 200px;
  }

  .familia-churros .fc-hero__copia,
  .familia-galletas .fc-hero__copia,
  .familia-amaranto .fc-hero__copia,
  .familia-vegetales .fc-hero__copia,
  .familia-frutas .fc-hero__copia {
    justify-content: flex-start;
    padding-top: 96px;
    padding-bottom: 0;
  }
}

@media (min-width: 761px) and (max-width: 1080px) and (orientation: landscape) and (max-height: 500px) {
  /* translateY(-137px) sacaba el título por arriba o lo subía sobre el menú */
  .familia-vegetales .fc-hero__copia {
    transform: none;
  }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  /* La columna de 300 px pensada para el teléfono vertical alargaba el párrafo más allá
     del plano, que recortaba sus últimas líneas; el halo separa el texto de la fotografía */
  .familia-vegetales .fc-hero__copia {
    width: min(460px, 66vw);
    max-width: none;
  }

  .familia-vegetales .fc-hero__subtitulo.fc-acento,
  .familia-vegetales .fc-hero__texto {
    text-shadow:
      0 0 2px rgba(244, 239, 232, 0.95),
      0 0 6px rgba(244, 239, 232, 0.9),
      0 0 12px rgba(244, 239, 232, 0.75);
  }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  /* El scroll snap obligatorio impide desplazar el plano inicial: a 58 px del borde
     «Desliza para explorar» caía sobre el párrafo; en una sola fila cabe entre
     «Volver al menú» y WhatsApp. En Frutas Escena 2 editorial.js fija su propio bottom */
  body[data-recorrido="familia-galletas"]:has(.volver-menu.is-visible) .indicador-recorrido-pie:not(.is-ff-escena2),
  body[data-recorrido="familia-frutas"]:has(.volver-menu.is-visible) .indicador-recorrido-pie:not(.is-ff-escena2) {
    bottom: 14px;
    padding-top: 0;
    padding-bottom: 0;
  }

  body[data-recorrido="familia-galletas"]:has(.volver-menu.is-visible) .indicador-recorrido-pie:not(.is-ff-escena2) .indicador-recorrido,
  body[data-recorrido="familia-frutas"]:has(.volver-menu.is-visible) .indicador-recorrido-pie:not(.is-ff-escena2) .indicador-recorrido {
    flex-direction: row;
    gap: 10px;
    min-height: 42px;
  }

  /* A 14 px el botón tapaba la última línea del párrafo de Frutas a 568 × 320 */
  body[data-recorrido="familia-galletas"] .volver-menu,
  body[data-recorrido="familia-frutas"] .volver-menu {
    bottom: 8px;
  }
}

/* Escenas que terminan al ras de la ventana: con scroll snap el texto no puede asentarse
   fuera de las franjas que ocupan «Volver al menú», WhatsApp y «Desliza para explorar» */
@media (max-width: 760px) {
  /* Como en Churros, la guía de compra sube sobre «Desliza» */
  .familia-galletas .fc-familia.fg-escena2 {
    padding-bottom: 184px;
  }

  .familia-galletas .fg-escena2 .fc-familia__guia-compra {
    bottom: 128px;
  }

  /* En Escena 2 editorial.js deja «Desliza» en columna al pie, sobre el último renglón */
  .familia-frutas .ff-escena2 {
    padding-bottom: 120px;
  }
}

/* A 360 px, con la escena 2 de Galletas asentada arriba, la descripción de Arándanos terminaba a 7 px de «Desliza»
   y cualquier exceso del gesto la dejaba debajo; filas más juntas la suben 32 px.
   La guía de compra se ancla al pie de la escena: baja lo mismo para quedar donde estaba, bajo «Desliza» */
@media (max-width: 380px) {
  .familia-galletas .fg-escena2__sabores.fc-sabores {
    row-gap: 8px;
    padding-top: 12px;
  }

  .familia-galletas .fg-escena2 .fc-familia__guia-compra {
    bottom: 96px;
  }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .familia-galletas .fc-familia.fg-escena2 {
    padding-bottom: 116px;
  }

  .familia-galletas .fg-escena2 .fc-familia__guia-compra {
    bottom: 64px;
  }

  /* Los rótulos de las esquinas quedaban bajo CANASTA arriba y bajo «Volver»/«Desliza» abajo */
  .familia-galletas .fc-familia.fg-escena3 {
    padding-top: 84px;
    padding-bottom: 64px;
  }

  /* editorial.js no oculta «Desliza» al final de las familias: la última línea debe poder subir */
  .familia-churros > .fc-cierre {
    padding-bottom: 72px;
  }

  .familia-frutas .fc-familia.ff-escena3 {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* Con el bottom de 128 px de editorial.css, la ficha de 240 px rebasaba el borde superior y ocultaba su «×» */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 340px) {
  .familia-churros .fc-familia .fc-familia__dock-compra {
    bottom: 8px;
    z-index: 7;
  }
}

/* El snap fija la escena arriba: con top 6% la píldora «Total de tu canasta» (hasta y 83) tapaba la primera línea */
@media (max-width: 760px) {
  .familia-galletas .fg-escena2 .fc-familia__titulo {
    top: 68px;
  }
}

/* La fotografía de portada de Frutas no deja zonas libres: el texto cae sobre plátano, chips y chiles */
.familia-frutas .fc-hero__titulo,
.familia-frutas .fc-hero__subtitulo.fc-acento,
.familia-frutas .fc-hero__texto {
  text-shadow:
    0 0 2px rgba(244, 239, 232, 0.95),
    0 0 6px rgba(244, 239, 232, 0.9),
    0 0 12px rgba(244, 239, 232, 0.8),
    0 0 22px rgba(244, 239, 232, 0.6);
}

/* El snap fija la Escena 2 arriba y la foto ocupa el 84 % del alto: la franja quedaba al pie, bajo «Volver al menú».
   Va en la columna derecha para no tapar los tazones ni cambiar el encuadre de la foto, del que dependen los puntos en porcentaje */
@media (min-width: 901px) {
  .familia-frutas .ff-escena2 {
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: clamp(20px, 3vh, 32px);
  }

  .familia-frutas .ff-escena2__plano {
    display: contents;
  }

  .familia-frutas .ff-escena2__foto {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .familia-frutas .ff-escena2__copia {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding-bottom: 0;
  }

  .familia-frutas .ff-escena2__franja {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .familia-frutas .ff-escena2__franja .fa-compra-divisor {
    display: none;
  }

  .familia-frutas .ff-escena2__franja .fa-compra-ayuda {
    padding: 14px 18px 0;
  }

  .familia-frutas .ff-escena2__franja .fa-compra-panel {
    min-height: 64px;
    padding-right: 60px;
  }
}

/* Computadora: la foto se recorta por la derecha (cover anclado a la izquierda) y los puntos van en % de la caja.
   Con la altura mínima de 84svh, a 1920×1080 la caja quedaba en 1.30:1 y solo se veía el 73 % de la foto: arándanos y
   trocitos enchilados salían del encuadre con sus puntos encima del fondo. La proporción de la laptop de 1280 px
   (85 % visible) deja los seis tazones a la vista y cada punto en el borde de su producto en cualquier ancho */
@media (min-width: 1181px) {
  .familia-frutas .ff-escena2__foto {
    aspect-ratio: 1.52;
    min-height: 0;
  }

  .familia-frutas .ff-escena2__foto img {
    min-height: 0;
  }
}

/* Con poca altura, título, párrafo y franja no caben sobre el botón de WhatsApp */
@media (min-width: 901px) and (max-height: 540px) {
  .familia-frutas .ff-escena2__texto {
    display: none;
  }

  /* La fila del título no reparte el alto de la foto: la franja crece hacia abajo sin mover el título al seleccionar */
  .familia-frutas .ff-escena2 {
    grid-template-rows: auto 1fr;
  }

  .familia-frutas .ff-escena2__titulo {
    margin-bottom: 0;
  }

  /* Caería sobre el título; el importe sigue en CANASTA */
  body[data-recorrido="familia-frutas"] .mochate-canasta-meta {
    display: none;
  }

  /* En una fila bajo la foto. !important vence el bottom en línea que editorial.js calcula respecto a la franja */
  body[data-recorrido="familia-frutas"] .indicador-recorrido-pie.is-ff-escena2 {
    bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 4px;
  }

  body[data-recorrido="familia-frutas"] .indicador-recorrido-pie.is-ff-escena2 .indicador-recorrido {
    flex-direction: row;
    gap: 10px;
  }
}

/* Teléfono horizontal: la Escena 2 de Frutas es más alta que la ventana y el snap obligatorio
   saltaba la franja de compra o la dejaba bajo los controles flotantes; aquí el recorrido es libre */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  html:has(body[data-recorrido="familia-frutas"]) {
    scroll-snap-type: none;
  }

  /* En columna sobre el margen izquierdo de la foto, fuera de los tazones y de los puntos.
     !important vence el bottom en línea que editorial.js calcula respecto a la franja */
  body[data-recorrido="familia-frutas"] .indicador-recorrido-pie.is-ff-escena2 {
    left: 8px;
    right: auto;
    width: auto;
    bottom: 64px !important;
    padding: 0;
  }

  body[data-recorrido="familia-frutas"] .indicador-recorrido-pie.is-ff-escena2 .indicador-recorrido {
    writing-mode: vertical-rl;
    flex-direction: row;
    gap: 8px;
    padding: 12px 6px;
    border-radius: 999px;
    background: rgba(244, 239, 232, 0.94);
    border: 1px solid rgba(148, 54, 129, 0.28);
    box-shadow: 0 8px 24px rgba(61, 42, 36, 0.12);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  body[data-recorrido="familia-frutas"] .indicador-recorrido-pie.is-ff-escena2 .indicador-recorrido__flecha {
    writing-mode: horizontal-tb;
  }

  /* La píldora completa y la línea de total caían sobre los puntos de la columna derecha;
     queda el icono con su contador y el texto sigue disponible para lectores de pantalla */
  body[data-recorrido="familia-frutas"] .mochate-canasta-meta {
    display: none;
  }

  body[data-recorrido="familia-frutas"] .mochate-canasta-shell {
    right: 6px;
  }

  body[data-recorrido="familia-frutas"] .mochate-canasta {
    gap: 0;
    padding: 4px;
  }

  body[data-recorrido="familia-frutas"] .mochate-canasta__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Teléfono vertical: el botón del punto mide lo que su marca (12 px). Un círculo transparente amplía el área táctil
   sin mover el centro ni cambiar el aspecto. En Amaranto los centros más próximos distan 19,7 px a 360 de ancho:
   con más diámetro las áreas de dos sabores se pisarían */
@media (max-width: 500px) and (orientation: portrait) {
  .familia-amaranto .fa-sabor-punto::before,
  .familia-vegetales .fa-sabor-punto::before,
  .familia-frutas .fa-sabor-punto::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .familia-amaranto .fa-sabor-punto::before {
    width: 19px;
    height: 19px;
  }
}

/* Obleas y Trocitos en vertical: hasta 720 px el panel conserva la geometría móvil de editorial.css,
   así que los mismos ajustes siguen siendo necesarios (a 600 px reaparecían ambos problemas) */
@media (max-width: 720px) and (orientation: portrait) {
  /* Con la foto de compra arriba, la línea de total tapaba los puntos de las obleas rellenas; el importe sigue en CANASTA */
  body[data-recorrido="familia-amaranto"] .mochate-canasta-meta {
    display: none;
  }

  /* Los puntos ocupan casi todo el ancho de la foto (x 66–326 a 402 px): al desplazar la escena, la píldora completa
     pasaba sobre la fila superior y se quedaba con la pulsación. Solo el contador cabe en la franja libre de la derecha;
     el texto sigue disponible para lectores de pantalla */
  body[data-recorrido="familia-amaranto"] .mochate-canasta-shell {
    right: 6px;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta {
    gap: 0;
    padding: 4px;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* El detalle (121 px) se centraba en la franja de 37 px: tapaba la instrucción y la fila inferior de obleas sencillas.
     Nombre y precio ocupan la franja en lugar de la instrucción; cantidad y «Agregar» van bajo la foto */
  .familia-amaranto .fa-compra-panel__bloque,
  .familia-amaranto .fa-compra-panel__detalle,
  .familia-amaranto .fa-compra-panel__info,
  .familia-amaranto .fa-compra-panel__acciones {
    pointer-events: none;
  }

  .familia-amaranto .fa-compra-panel__acciones button,
  .familia-amaranto .fa-compra-panel__acciones input {
    pointer-events: auto;
  }

  .familia-amaranto .fa-escena3__plano:has(.fa-compra-panel__detalle:not([hidden])) .fa-compra-ayuda {
    visibility: hidden;
  }

  /* Con la instrucción a todo el ancho, la línea divisoria la atravesaba */
  .familia-amaranto .fa-compra-divisor {
    visibility: hidden;
  }

  .familia-amaranto .fa-compra-panel {
    align-items: stretch;
    padding-bottom: 0;
  }

  .familia-amaranto .fa-compra-panel__bloque {
    height: 100%;
    transform: none;
  }

  .familia-amaranto .fa-compra-panel__detalle {
    position: relative;
    height: 100%;
  }

  .familia-amaranto .fa-compra-panel__info {
    height: 100%;
    justify-content: center;
  }

  .familia-amaranto .fa-compra-panel__acciones {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    gap: 8px;
  }

  /* Sobre la franja rosa el marrón del nombre no llegaba a 3:1 */
  .familia-amaranto .fa-compra-panel__nombre {
    color: #fff8ee;
  }

  /* Bajo la foto quedan sobre el fondo marfil */
  .familia-amaranto .fa-compra-panel .mochate-canasta-item__qty-valor,
  .familia-amaranto .fa-compra-panel .fc-comercio__aviso {
    color: var(--fa-cacao);
  }

  .familia-amaranto .fc-familia.fa-escena3:has(.fa-compra-panel__detalle:not([hidden])) {
    padding-bottom: 150px;
  }
}

/* Tableta vertical: el panel usa la geometría de escritorio, pero al desplazar la escena la píldora completa y su total
   siguen pasando sobre los trocitos (x hasta 639 a 768 px), y el aviso cae bajo la franja, sobre el fondo marfil */
@media (min-width: 721px) and (max-width: 1080px) and (orientation: portrait) {
  body[data-recorrido="familia-amaranto"] .mochate-canasta-meta {
    display: none;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta-shell {
    right: 6px;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta {
    gap: 0;
    padding: 4px;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .familia-amaranto .fa-compra-panel .fc-comercio__aviso {
    color: var(--fa-cacao);
  }
}

/* Teléfono horizontal: la escena es más alta que la ventana, así que al desplazarla la píldora completa pasa sobre los
   trocitos, el aviso cae sobre el marfil y la píldora de WhatsApp (x 605–823 a 844 px) tapa «Agregar».
   WhatsApp toma la forma circular de teléfono vertical (editorial.css, max-width 760 px); su nombre sigue en aria-label */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  body[data-recorrido="familia-amaranto"] .mochate-canasta-meta {
    display: none;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta-shell {
    right: 6px;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta {
    gap: 0;
    padding: 4px;
  }

  body[data-recorrido="familia-amaranto"] .mochate-canasta__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .familia-amaranto .fa-compra-panel .fc-comercio__aviso {
    color: var(--fa-cacao);
  }

  body[data-recorrido="familia-amaranto"] .whatsapp-flotante {
    right: 14px;
    bottom: 14px;
    padding: 12px;
  }

  body[data-recorrido="familia-amaranto"] .whatsapp-flotante__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Teléfono horizontal compacto: hasta 720 px rige la geometría móvil de editorial.css y la instrucción cruza la franja
   sobre el precio y la cantidad (a 640×360). Como en vertical, se oculta mientras hay un sabor elegido */
@media (max-width: 720px) and (orientation: landscape) {
  .familia-amaranto .fa-escena3__plano:has(.fa-compra-panel__detalle:not([hidden])) .fa-compra-ayuda,
  .familia-amaranto .fa-escena3__plano:has(.fa-compra-panel__detalle:not([hidden])) .fa-compra-divisor {
    visibility: hidden;
  }
}

/* Tableta horizontal: el borde inferior de la franja rosa (parte de la foto) cruza el aviso de 980 a 1080 px
   (a 980 queda casi entero sobre el marfil; a 1180 lo roza). Bajarlo lo deja por completo sobre el marfil.
   Desde 1280 px el aviso cae dentro de la franja y conserva el color claro */
@media (min-width: 961px) and (max-width: 1180px) and (min-height: 501px) and (orientation: landscape) {
  .familia-amaranto .fa-compra-panel .fc-comercio__aviso {
    color: var(--fa-cacao);
    transform: translateY(18px);
  }
}

/* Enlaces a documentos legales en el paso de revisión del checkout */
.mochate-canasta-checkout__legal {
  margin: 8px 0 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.74rem;
  line-height: 1.45;
  color: #6b5348;
}

.mochate-canasta-checkout__legal a {
  color: inherit;
  text-decoration: underline;
}

.mochate-canasta-checkout__acepta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  font-family: var(--tipo-texto, "Raleway", sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #3d2a24;
  cursor: pointer;
}

.mochate-canasta-checkout__acepta input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #943681;
  cursor: pointer;
}

.mochate-canasta-checkout__acepta a {
  color: inherit;
  text-decoration: underline;
}