/* ==========================================================================
   Doui — la tienda.

   Todo lo que trajo el carrito: el botón de arriba, el cajón, los controles
   de añadir, las cajas de media docena y docena, y la página de pedido.

   Se apoya en las variables de doui.css y no redefine ninguna: el color, la
   tipografía y las curvas de movimiento siguen saliendo de allí.
   ========================================================================== */

/* ------------------------------------------------ el botón del carrito -- */

/* Va dentro de la barra, quieto. Nada de botón flotante: un flotante se
   pone encima de lo que estés leyendo y en una página que es sobre todo
   fotografía, eso tapa justo lo que se vino a ver. */

.boton-carrito {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.8rem;
  height: 44px;
  border: 1.5px solid rgba(248, 244, 236, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background-color 0.2s var(--curva);
}
.boton-carrito svg { width: 16px; height: 16px; flex: none; }
.boton-carrito:hover { border-color: var(--crema); background: rgba(248, 244, 236, 0.08); }
.boton-carrito.con-algo { border-color: var(--cereza); background: rgba(232, 32, 58, 0.14); }

.boton-carrito-cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cereza);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- la barra -- */

/* Orden visual, independiente del orden en que cada script mete lo suyo:
   el logotipo, los enlaces, el carrito y el botón del menú. */
.nav-fila { flex-wrap: nowrap; gap: 1rem; }
.nav-fila > .marca { order: 1; flex: none; }
.nav-fila .menu-panel { order: 2; min-width: 0; }
.nav-fila .boton-carrito { order: 3; margin-left: auto; flex: none; }
.nav-fila .menu-boton { order: 4; flex: none; }

/* En pantalla ancha el panel no es un panel: son los enlaces de siempre. */
.menu-boton { display: none; }

.menu-rayas {
  display: grid;
  gap: 4px;
  width: 18px;
}
.menu-rayas i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s var(--curva), opacity 0.2s var(--curva);
}

/* ------------------------------------------ la barra en pantalla estrecha */

@media (max-width: 880px) {
  .boton-carrito-texto { display: none; }
  .boton-carrito { padding: 0 0.7rem; }

  .menu-boton {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -0.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--crema);
    cursor: pointer;
  }
  .menu-boton:hover { background: rgba(248, 244, 236, 0.1); }

  /* Los enlaces se recogen. El panel cuelga de la barra, a todo el ancho. */
  .menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    background: var(--noche);
    border-bottom: 1px solid rgba(248, 244, 236, 0.12);
    box-shadow: 0 24px 48px rgba(3, 7, 26, 0.6);
    /* Cerrado no ocupa nada y no recibe el foco por tabulación. */
    grid-template-rows: 0fr;
    visibility: hidden;
    /* visibility no se interpola: se le pone retardo para que al cerrar
       espere a que termine el plegado, y ninguno al abrir para que aparezca
       de inmediato. Asi no depende de que la transicion llegue a su fin. */
    transition: grid-template-rows 0.24s var(--curva),
                visibility 0s linear 0.24s;
  }
  body.menu-abierto .menu-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.24s var(--curva), visibility 0s;
  }
  .menu-panel > .nav-enlaces { overflow: hidden; }

  .nav-enlaces {
    display: grid;
    gap: 0;
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  }
  .nav-enlaces a {
    min-height: 52px;
    padding-block: 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(248, 244, 236, 0.09);
  }
  .nav-enlaces a:last-child { border-bottom: 0; }

  body.menu-abierto .menu-rayas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-abierto .menu-rayas i:nth-child(2) { opacity: 0; }
  body.menu-abierto .menu-rayas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* El panel cuelga de la barra, así que la barra tiene que ser su
   referencia y no puede recortarlo. */
.nav { position: sticky; }
.nav .marco { position: relative; }

/* ---------------------------------------------------- la cinta de avisos -- */

.cinta {
  position: relative;
  overflow: hidden;
  background: var(--cereza);
  color: #fff;
  /* Se desvanece en los dos bordes: así el texto no aparece ni desaparece
     de golpe contra el filo de la pantalla. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem,
                                      #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 3rem,
                                      #000 calc(100% - 3rem), transparent);
}

.cinta-pista {
  display: flex;
  width: max-content;
  animation: cinta-deriva 46s linear infinite;
}
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista { animation-play-state: paused; }

.cinta-tira {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding: 0.5rem 1.4rem 0.5rem 0;
  margin: 0;
  list-style: none;
}
.cinta-tira li {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  font-size: 0.68rem;
  white-space: nowrap;
}
/* El punto que separa un aviso del siguiente. */
.cinta-tira li::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Las dos tiras son iguales, así que al recorrer exactamente la mitad se
   vuelve al principio sin que se note el salto. */
@keyframes cinta-deriva {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Quieta y a mano para quien pidió que nada se mueva. */
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; }
  .cinta-pista { animation: none; }
  .cinta-tira[aria-hidden='true'] { display: none; }
}

/* ------------------------------------------------------------- el cajón -- */

body.sin-scroll { overflow: hidden; }

.cajon-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 7, 26, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.26s var(--curva);
}
.cajon-fondo.abierto { opacity: 1; }

.cajon {
  position: fixed;
  z-index: 61;
  top: 0; right: 0;
  width: min(430px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--noche);
  border-left: 1px solid rgba(248, 244, 236, 0.12);
  transform: translateX(100%);
  transition: transform 0.26s var(--curva);
}
.cajon.abierto { transform: none; }

.cajon-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(248, 244, 236, 0.12);
}
.cajon-cabeza h2 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.cajon-cerrar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  cursor: pointer;
}
.cajon-cerrar svg { width: 18px; height: 18px; }
.cajon-cerrar:hover { background: rgba(248, 244, 236, 0.1); }

.cajon-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.5rem;
}
.cajon-pie {
  border-top: 1px solid rgba(248, 244, 236, 0.12);
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--noche-hondo);
}
.cajon-nota { margin-top: 0.6rem; color: var(--humo); font-size: 0.72rem; }

.cajon-vacio {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 2.5rem 0;
}
.cajon-vacio-nota { color: var(--humo); font-size: 0.9rem; }

/* --------------------------------------------------- las líneas del carrito */

.lineas { list-style: none; display: grid; gap: 0.65rem; }

.linea {
  --t-alto: #fff;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-areas:
    'foto medio fuera'
    'foto mandos precio';
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.6rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--tono) 30%, transparent);
  border: 1px solid rgba(248, 244, 236, 0.12);
}
.linea.claro { --t-alto: #131A05; }

.linea-foto {
  grid-area: foto;
  width: 52px; height: 52px;
  border-radius: 0.6rem;
  overflow: hidden;
  background-color: var(--tono);
}
.linea-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.linea-medio { grid-area: medio; min-width: 0; }
.linea-nombre {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
}
.linea-detalle { color: var(--humo); font-size: 0.7rem; margin-top: 0.15rem; }

.linea-precio {
  grid-area: precio;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.linea-fuera {
  grid-area: fuera;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--humo);
  cursor: pointer;
}
.linea-fuera svg { width: 13px; height: 13px; }
.linea-fuera:hover { background: rgba(248, 244, 236, 0.12); color: var(--crema); }

.contador {
  grid-area: mandos;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid rgba(248, 244, 236, 0.24);
  border-radius: 999px;
  padding: 2px;
  justify-self: start;
}
.contador button {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.contador button:hover { background: rgba(248, 244, 236, 0.14); }
.contador-n {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- el empujón --- */

/* Dice cuántas faltan para el siguiente escalón y cuánto se ahorra. Es un
   dato, no una cuenta atrás: sin urgencia inventada ni cifras tachadas. */
.empujon {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(232, 32, 58, 0.5);
  border-radius: 0.9rem;
  display: grid;
  gap: 0.65rem;
  justify-items: start;
  font-size: 0.88rem;
}

/* ------------------------------------------------------------- regalo --- */

.regalo {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(248, 244, 236, 0.16);
  border-radius: 0.9rem;
}
.regalo-cabeza {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
}
.regalo-cabeza input {
  width: 20px; height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--cereza);
  flex: none;
  cursor: pointer;
}
.regalo-detalle { color: var(--humo); }
.regalo-campos { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.regalo-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* -------------------------------------------------------------- campos -- */

.campo { display: grid; gap: 0.3rem; }
.campo-etiqueta { color: var(--humo); font-size: 0.68rem; }
.campo-pie { color: var(--humo); font-size: 0.66rem; text-align: right; }

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid rgba(248, 244, 236, 0.24);
  border-radius: 0.6rem;
  background: rgba(3, 7, 26, 0.55);
  color: var(--crema);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.92rem;
  min-height: 44px;
}
.campo textarea { resize: vertical; line-height: 1.55; }
.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible {
  outline: 2px solid var(--cereza);
  outline-offset: 1px;
  border-color: transparent;
}
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(194, 203, 216, 0.5); }

/* ------------------------------------------------------------ cuentas --- */

.cuentas { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.cuenta-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.cuenta-ahorro { color: #7ED08F; }
.cuenta-suave { color: var(--humo); }
.cuenta-total {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(248, 244, 236, 0.16);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
}

/* ---------------------------------------------- el control de añadir --- */

.anadir {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}
.anadir-texturas {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--t-linea, rgba(248, 244, 236, 0.24));
  border-radius: 999px;
  padding: 2px;
  justify-self: start;
}
.anadir-textura {
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  min-height: 44px;
  background: transparent;
  color: var(--t-bajo, var(--humo));
  font-size: 0.68rem;
  cursor: pointer;
  transition: background-color 0.2s var(--curva), color 0.2s var(--curva);
}
.anadir-textura[aria-pressed='true'] {
  background: var(--t-alto, var(--crema));
  color: var(--tono, var(--noche));
  font-weight: 600;
}

.btn-anadir {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}
.btn-precio { opacity: 0.85; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.btn-chico { padding: 0.45rem 0.95rem; font-size: 0.8rem; min-height: 44px; }
.btn-ancho { width: 100%; justify-content: center; }

/* La confirmación de que se añadió: el botón se queda un momento en verde
   en vez de abrir el cajón y cortar el hilo de quien está eligiendo. */
.btn-anadir.anadido {
  background: #2E7D46;
  border-color: #2E7D46;
  color: #fff;
}
.btn-anadir.anadido span:first-child::after {
  content: ' ✓';
}

/* --------------------------------------------------------- las cajas --- */

.cajas-rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.caja-oferta {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  border: 1px solid rgba(248, 244, 236, 0.16);
  border-radius: 1.35rem;
  background: rgba(248, 244, 236, 0.04);
}
.caja-oferta h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
}
.caja-oferta > p { color: var(--humo); font-size: 0.95rem; }
.caja-precio {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.caja-precio strong {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.caja-precio s { color: var(--humo); font-size: 0.95rem; }
.caja-nota { color: var(--humo); font-size: 0.68rem; }
.caja-oferta .btn { margin-top: 0.6rem; }

/* ------------------------------------------------------- los servicios -- */

.servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.servicio {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(248, 244, 236, 0.18);
}
.servicio h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}
.servicio p { color: var(--humo); font-size: 0.92rem; }

/* ------------------------------------------------ la página de pedido -- */

.pedido {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.pedido-columna { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.tarjeta {
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border: 1px solid rgba(248, 244, 236, 0.16);
  border-radius: 1.2rem;
  background: rgba(248, 244, 236, 0.03);
}
.tarjeta > h2 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.tarjeta-nota { color: var(--humo); font-size: 0.85rem; margin-top: 0.75rem; }

.rejilla-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.rejilla-campos .ancho { grid-column: 1 / -1; }

/* Las opciones de entrega, como tarjetas que se pueden pulsar enteras. */
.opciones { display: grid; gap: 0.6rem; }
.opcion {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid rgba(248, 244, 236, 0.2);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background-color 0.2s var(--curva);
}
.opcion:hover { border-color: rgba(248, 244, 236, 0.45); }
.opcion:has(input:checked) {
  border-color: var(--cereza);
  background: rgba(232, 32, 58, 0.08);
}
.opcion input {
  width: 20px; height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--cereza);
  cursor: pointer;
}
.opcion-titulo { font-weight: 500; }
.opcion-nota { color: var(--humo); font-size: 0.82rem; margin-top: 0.2rem; }
.opcion-precio {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  white-space: nowrap;
}
.opcion[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.resumen { position: sticky; top: 5rem; }
.resumen-lineas { list-style: none; display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.resumen-linea {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.86rem;
}
.resumen-linea span:first-child { color: var(--humo); }
.resumen-linea b { font-weight: 400; font-variant-numeric: tabular-nums; }

.pago-espera {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(248, 244, 236, 0.3);
  border-radius: 0.9rem;
  color: var(--humo);
  font-size: 0.84rem;
}
.pago-marcas {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.pago-marca {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(248, 244, 236, 0.24);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aviso {
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  background: rgba(232, 32, 58, 0.12);
  border: 1px solid rgba(232, 32, 58, 0.4);
  font-size: 0.88rem;
}

/* ------------------------------------------------------------ estrecho -- */

@media (max-width: 1000px) {
  .pedido { grid-template-columns: 1fr; }
  .resumen { position: static; }
}

@media (max-width: 880px) {
  .servicios { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* En pantalla tactil no hay puntero fino: los 44 px van completos.
   Es lo que declara la pagina de accesibilidad y hay que cumplirlo. */
@media (pointer: coarse) {
  /* El carrito y las texturas ya van a 44 en todas partes. Aqui solo lo
     que en escritorio puede ser mas pequeno sin faltar a lo prometido:
     los mandos de una lista, que no son la accion principal. */
  .contador button { width: 44px; height: 44px; }
  .linea-fuera { width: 44px; height: 44px; }
}

@media (max-width: 620px) {
  .cajas-rejilla { grid-template-columns: 1fr; }
  .rejilla-campos { grid-template-columns: 1fr; }
  .regalo-dos { grid-template-columns: 1fr; }
  .cajon { width: 100vw; }
  /* El precio pasa bajo el nombre: a esta anchura, en la misma fila, uno de
     los dos se parte a la mitad de una palabra. */
  .linea {
    grid-template-columns: 46px 1fr auto;
    grid-template-areas:
      'foto medio  fuera'
      'foto mandos precio';
  }
  .linea-foto { width: 46px; height: 46px; }
}

/* Quien pidió que nada se mueva, que nada se mueva. */
@media (prefers-reduced-motion: reduce) {
  .cajon, .cajon-fondo { transition: none; }
}

/* --------------------------------------------------- el estado del pago -- */

.pago-estado {
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.7rem;
  background: rgba(248, 244, 236, 0.07);
  border: 1px solid rgba(248, 244, 236, 0.18);
  font-size: 0.85rem;
  line-height: 1.5;
}
.pago-estado-malo {
  background: rgba(232, 32, 58, 0.12);
  border-color: rgba(232, 32, 58, 0.45);
}

.btn:disabled { cursor: not-allowed; }

/* ------------------------------------------------- la vuelta del pago --- */

.gracias { max-width: 46rem; margin-inline: auto; }
.gracias .titulo { margin-block: 0.5rem 0.75rem; }

.gracias-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: rgba(248, 244, 236, 0.14);
  border: 1px solid rgba(248, 244, 236, 0.14);
  border-radius: 0.9rem;
  overflow: hidden;
}
.gracias-datos > div {
  background: var(--noche);
  padding: 0.9rem 1rem;
}
.gracias-datos dt { color: var(--humo); font-size: 0.66rem; margin-bottom: 0.3rem; }
.gracias-datos dd {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  /* La referencia es larga y no tiene por donde partirse sola. */
  overflow-wrap: anywhere;
}

/* ==========================================================================
   El pedido en un teléfono

   Aquí se decide una compra, y en un teléfono se decide con un pulgar y con
   el total fuera de la vista. Lo que sigue va sobre eso: que el total y el
   botón de pagar estén siempre a mano, que el teclado no tape lo que se
   está escribiendo, y que nada obligue a hacer zoom.
   ========================================================================== */

@media (max-width: 1000px) {
  /* El resumen deja de ir al final de la columna y sube: antes de rellenar
     nada, lo primero que quiere ver alguien es cuánto va a pagar. */
  .pedido { display: grid; }
  .pedido .resumen { order: -1; }
  .pedido-columna { order: 1; }
}

@media (max-width: 700px) {
  /* La barra de pago, pegada abajo. En una página de pedido que mide dos
     pantallas, el botón al final significa desplazarse a ciegas para
     comprobar el total y volver. */
  .resumen-fijo {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin: 1.5rem calc(clamp(1.25rem, 4vw, 3.5rem) * -1) 0;
    padding: 0.85rem clamp(1.25rem, 4vw, 3.5rem)
             calc(0.85rem + env(safe-area-inset-bottom));
    background: var(--noche-hondo);
    border-top: 1px solid rgba(248, 244, 236, 0.16);
    box-shadow: 0 -12px 30px rgba(3, 7, 26, 0.5);
  }
  .resumen-fijo .cuentas { margin-bottom: 0.6rem; }
  /* En la barra pegada solo se enseña el total: el desglose ya está arriba
     y repetirlo aquí come media pantalla. */
  .resumen-fijo .cuenta-fila:not(.cuenta-total) { display: none; }
  .resumen-fijo .cuenta-total { margin-top: 0; padding-top: 0; border-top: 0; }

  /* Los campos, a 16 px. Por debajo de eso Safari hace zoom al enfocarlos y
     ya no se vuelve solo: la página se queda torcida el resto del pedido. */
  .campo input,
  .campo textarea,
  .campo select { font-size: 16px; }

  /* Las opciones de entrega, más aireadas: se pulsan con el pulgar. */
  .opcion { padding: 1rem; gap: 0.9rem; }
  .opcion-precio { align-self: center; }

  .tarjeta { padding: 1.1rem; }
  .pedido { gap: 1rem; }

  /* La caja del pedido no necesita foto en un teléfono: el nombre y la
     textura dicen lo mismo y dejan sitio a lo que hay que tocar. */
  [data-caja] .linea {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'medio  fuera'
      'mandos precio';
  }
  [data-caja] .linea-foto { display: none; }
}

@media (max-width: 420px) {
  /* Con la barra de pago abajo, el botón manda y el resto se apoya. */
  .resumen-fijo .btn + .btn { margin-top: 0.45rem; }
}

/* ==========================================================================
   WhatsApp

   El verde es el de WhatsApp, no el de la marca. Es a proposito: ese verde
   es una senal reconocible y usar el cereza de Doui aqui haria que el boton
   pareciera otra cosa. Es el unico sitio del sitio donde entra un color de
   fuera de la paleta.
   ========================================================================== */

.icono-whatsapp { width: 20px; height: 20px; flex: none; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #25D366;
  border: 1.5px solid #25D366;
  color: #04240F;
  font-weight: 600;
}
.btn-whatsapp:hover { background: #1FBA57; border-color: #1FBA57; }

/* Es una frase, no una etiqueta: se lee de corrido. A 0,68 rem y en
   mayusculas monoespaciadas costaba, y es la que explica que pasa al
   pulsar el boton mas importante de la pagina. */
.pago-nota {
  margin-top: 0.6rem;
  color: var(--humo);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: center;
  max-width: 42ch;
  margin-inline: auto;
}

/* ------------------------------------------------------ la burbuja ------ */

/* Solo en telefono. En escritorio el boton del pedido esta a la vista y una
   burbuja flotante seria una segunda forma de hacer lo mismo, tapando foto. */
.burbuja-whatsapp { display: none; }

@media (max-width: 700px) {
  /* Redonda y solo con el logotipo: se reconoce sin leer, y ocupa lo
     minimo sobre la fotografia. */
  .burbuja-whatsapp {
    position: fixed;
    z-index: 45;
    right: 1rem;
    /* Encima de la barra del tema, no debajo: la barra esta fija abajo y
       se comeria la burbuja. El alto lo mide el script. */
    bottom: calc(var(--alto-tocadiscos, 0px) + 0.75rem);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #04240F;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(3, 7, 26, 0.55);
  }
  .burbuja-whatsapp .icono-whatsapp { width: 30px; height: 30px; }

  /* En la pagina de pedido sobra: ahi el boton grande ya es de WhatsApp y
     ademas va pegado abajo, justo donde se pondria la burbuja. */
  body:has([data-pedido]) .burbuja-whatsapp { display: none; }

  /* Que no se siente encima de lo ultimo de la pagina. */
  .pie { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

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

/* ------------------------------------------------- las cajas, con precio -- */

.caja-oferta { position: relative; }

/* La docena va marcada. Una de las dos tiene que ser la respuesta obvia, o
   las dos se leen como un examen. */
.caja-mejor {
  border-color: var(--cereza);
  background: rgba(232, 32, 58, 0.07);
}
.caja-cinta {
  position: absolute;
  top: 0;
  right: clamp(1.4rem, 2.5vw, 2.2rem);
  transform: translateY(-50%);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--cereza);
  color: #fff;
  font-size: 0.6rem;
}

.caja-precio strong { font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1; }
.caja-unidad {
  color: var(--crema);
  font-size: 1rem;
  margin-top: 0.15rem;
}
.caja-ahorro {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(126, 208, 143, 0.16);
  border: 1px solid rgba(126, 208, 143, 0.4);
  color: #7ED08F;
  font-size: 0.66rem;
  justify-self: start;
}
.caja-texto { color: var(--humo); font-size: 0.92rem; margin-top: 0.4rem; }

/* --------------------------------------------- los atajos del carrito ---- */

.atajos {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(248, 244, 236, 0.16);
  border-radius: 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.atajos-titulo { color: var(--humo); font-size: 0.66rem; }
.atajo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1.5px solid rgba(248, 244, 236, 0.24);
  border-radius: 0.6rem;
  background: transparent;
  color: var(--crema);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background-color 0.2s var(--curva);
}
.atajo:hover { border-color: var(--crema); background: rgba(248, 244, 236, 0.07); }
.atajo-ahorro { color: #7ED08F; font-size: 0.7rem; white-space: nowrap; }

/* ==========================================================================
   Programa de creadores
   ========================================================================== */

.pasos-creador {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  counter-reset: paso;
}
.pasos-creador li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-top: 1.1rem;
  border-top: 2px solid var(--cereza);
}
.pasos-creador h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.015em;
}
.pasos-creador p { color: var(--humo); font-size: 0.95rem; }
.pasos-creador strong { color: var(--crema); }

.creador-premios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.premio {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid rgba(248, 244, 236, 0.16);
  border-radius: 1.2rem;
  background: rgba(248, 244, 236, 0.04);
}
.premio h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
}
.premio p { color: var(--humo); font-size: 0.9rem; }

/* Las condiciones: plegadas, pero enteras. Nadie las lee al llegar y todo
   el mundo las busca cuando hay una duda, asi que ni se esconden ni ocupan
   media pagina de entrada. */
.reglas {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(248, 244, 236, 0.16);
  border-radius: 1.2rem;
  background: rgba(248, 244, 236, 0.03);
}
.reglas > summary {
  padding: 1.1rem clamp(1.2rem, 2.2vw, 1.8rem);
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  border-radius: 1.2rem;
}
.reglas[open] > summary { border-bottom: 1px solid rgba(248, 244, 236, 0.14); }
.reglas > summary:hover { color: var(--cereza); }

.reglas-cuerpo {
  padding: 0.5rem clamp(1.2rem, 2.2vw, 1.8rem) 1.6rem;
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
.reglas-cuerpo h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cereza);
  margin: 1.4rem 0 0.6rem;
  break-after: avoid;
}
.reglas-cuerpo h4:first-child { margin-top: 0.8rem; }
.reglas-cuerpo ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.reglas-cuerpo li {
  position: relative;
  padding-left: 1rem;
  color: var(--humo);
  font-size: 0.86rem;
  line-height: 1.6;
  break-inside: avoid;
}
.reglas-cuerpo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cereza);
}
.reglas-cuerpo strong { color: var(--crema); }

@media (max-width: 880px) {
  .pasos-creador,
  .creador-premios { grid-template-columns: 1fr; }
  .reglas-cuerpo { columns: 1; }
}

/* ==========================================================================
   Doui Bites

   El carrusel es scroll nativo con ajuste, no un transform propio. Se nota:
   el dedo arrastra con la inercia del sistema, la rueda funciona, el
   teclado funciona y el lector de pantalla lo recorre como lo que es, una
   lista. Un carrusel hecho a mano acierta lo primero y falla lo demás.
   ========================================================================== */

.bites-bloque {
  position: relative;
  /* El tono de la tarjeta que se está mirando tiñe el fondo de la sección,
     igual que hace la vitrina con las galletas. */
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in srgb, var(--tono-vivo, #101A4B) 26%, transparent),
      transparent 70%);
  transition: background 0.7s var(--curva);
}

.bites-sub {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: -0.02em;
}

/* La caja recorta y la pista se desliza dentro. El movimiento lo lleva
   cinta() por transform, no el scroll del navegador: el scroll nativo no
   sabe dar la vuelta -al llegar al ultimo se planta- y reencuadrarlo a
   mano con scrollLeft se ve. */
.bites-carrusel {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}
.bites-carrusel:focus-visible { outline: 2px solid var(--cereza); outline-offset: 4px; }

/* Sin gap: el hueco entre tarjetas lo pone cinta() con un margen, porque
   necesita saber el paso exacto en pixeles para dar la vuelta sin costura. */
.bites-pista {
  display: flex;
  gap: 0;
  will-change: transform;
  cursor: grab;
  /* El desplazamiento vertical sigue siendo del navegador: solo el
     horizontal es nuestro. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  padding-block: 0.5rem 1.25rem;
}
.bites-carrusel.arrastrando .bites-pista { cursor: grabbing; }

.bite {
  --t-alto: #fff;
  --t-bajo: rgba(255, 255, 255, 0.86);
  --t-linea: rgba(255, 255, 255, 0.2);
  /* El ancho lo escribe cinta() al medir, en pixeles. Aqui solo se dice
     que no se encoja para rellenar. */
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--tono);
  border-radius: 1.5rem;
  overflow: hidden;
  color: var(--t-alto);
}
.bite.claro {
  --t-alto: #131A05;
  --t-bajo: rgba(19, 26, 5, 0.84);
  --t-linea: rgba(19, 26, 5, 0.24);
}

/* Las fotografias no vienen todas del mismo tamano: las de Bites son 2:3,
   las de envase van de cuadradas a 2,4:1. Meterlas todas en un hueco
   cuadrado con object-fit: cover recortaba hasta el 58 % de la imagen y
   dejaba el producto cortado.

   Con contain se ve entera, y el hueco se pinta del tono del sabor, que es
   exactamente el fondo sobre el que se fotografio: el sobrante no se nota
   porque es del mismo color que el fondo de la foto. */
.bite-foto {
  background: var(--tono);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.bite-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bite-cuerpo {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: clamp(1rem, 2vw, 1.4rem);
}
.bite-nombre {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.bite-nota { color: var(--t-bajo); font-size: 0.9rem; line-height: 1.5; }
.bite-ficha {
  color: var(--t-bajo);
  font-size: 0.62rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--t-linea);
  margin-top: 0.3rem;
}

.bite-anadir { display: grid; gap: 0.6rem; margin-top: 0.7rem; }
.bite-precio {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
/* Sobre el tono de cada sabor, el botón va en la tinta de ese sabor y no
   en cereza: el cereza sobre dieciséis fondos distintos no funciona. */
.bite .btn-lleno {
  background: var(--t-alto);
  border-color: var(--t-alto);
  color: var(--tono);
  box-shadow: none;
}
.bite .btn-lleno:hover { transform: translateY(-2px); box-shadow: none; }

.bites-paso {
  position: absolute;
  top: 32%;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  background: rgba(5, 10, 34, 0.72);
  backdrop-filter: blur(8px);
  color: var(--crema);
  cursor: pointer;
  z-index: 2;
}
.bites-paso svg { width: 18px; height: 18px; }
.bites-paso.izq { left: 0.7rem; }
.bites-paso.der { right: 0.7rem; }
.bites-paso:hover { background: var(--cereza); }

.bites-rail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.bite-punto {
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bite-punto::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--tono);
  border: 1.5px solid rgba(248, 244, 236, 0.35);
  transition: transform 0.2s var(--curva), border-color 0.2s var(--curva);
}
.bite-punto[aria-current='true']::before {
  transform: scale(1.5);
  border-color: var(--crema);
}
.bite-punto:focus-visible { outline: 3px solid var(--cereza); outline-offset: -6px; border-radius: 50%; }

/* ------------------------------------------------------- los envases -- */

.bites-envases { margin-top: clamp(3rem, 6vw, 5rem); }

.bites-envases {
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
}

.envases-tira {
  display: flex;
  gap: 0;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  padding-bottom: 0.5rem;
}
.bites-envases.arrastrando .envases-tira { cursor: grabbing; }

.envase {
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
/* Las de envase se fotografiaron sobre crema, asi que el hueco va crema y
   el sobrante tampoco se nota. Entera y sin recortar. */
.envase img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 1.1rem;
  background: #F0E7DC;
}
.envase figcaption { color: var(--humo); font-size: 0.66rem; text-align: center; }

/* Con movimiento reducido, cinta() arranca detenida: la deriva no se
   pone en marcha sola y solo se mueve si la mueven. */
@media (prefers-reduced-motion: reduce) {
  .bites-bloque { transition: none; }
}

/* --------------------------------------------------- preventa de Bites -- */
/* Los Bites todavia no salen de la cocina. Se pueden reservar, y eso hay
   que decirlo en los tres sitios donde alguien decide: el encabezado de la
   seccion, la tarjeta del sabor y la linea del carrito.

   El sello va en rojo de marca sobre crema y no al reves: sobre el tono
   del sabor -que va de casi negro a verde lima- el rojo no siempre
   contrasta, y el crema si lo hace contra los dieciseis. */

.preventa-sello {
  display: inline-block;
  background: var(--cereza);
  color: var(--crema);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  vertical-align: 0.12em;
  margin-right: 0.5em;
}

.preventa-aviso {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgba(248, 244, 236, 0.16);
  background: rgba(248, 244, 236, 0.05);
  color: var(--humo);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Sobre la foto, arriba a la izquierda. La foto necesita ser el marco de
   referencia para que el sello no se vaya al rincon de la tarjeta. */
.bite-foto { position: relative; }
.bite-sello {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  background: var(--crema);
  color: var(--tinta);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.34em 0.8em;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(5, 10, 34, 0.3);
}

/* ----------------------------------------------- la lista de espera -- */
/* Reservar es comprometerse. Esto es para quien solo quiere que le avisen,
   asi que tiene que verse como lo que es: un campo y un boton, no otro
   escaparate. Va al final de la seccion, despues de los envases, que es
   donde acaba de mirar quien no ha pulsado nada. */

.lista-espera {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 1.5rem;
  border: 1px solid rgba(248, 244, 236, 0.16);
  background: rgba(248, 244, 236, 0.05);
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
@media (min-width: 800px) {
  .lista-espera { grid-template-columns: 1fr minmax(300px, 380px); }
}

.lista-espera-texto .bajada { margin-top: 0.5rem; max-width: 42ch; }

.lista-espera-forma { display: grid; gap: 0.75rem; }
.lista-espera-forma .campo { display: grid; gap: 0.35rem; }
.lista-espera-forma label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo-bajo);
}
.lista-espera-forma input[type='email'] {
  /* 44 px de alto minimo, como todo lo que se toca en este sitio. */
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(248, 244, 236, 0.22);
  background: rgba(5, 10, 34, 0.4);
  color: var(--crema);
  font: inherit;
  width: 100%;
}
.lista-espera-forma input[type='email']::placeholder { color: rgba(194, 203, 216, 0.5); }
.lista-espera-forma input[type='email']:focus-visible {
  outline: 2px solid var(--cereza);
  outline-offset: 2px;
  border-color: transparent;
}
.lista-espera-forma button { min-height: 48px; }

.lista-espera-estado { font-size: 0.85rem; min-height: 1.2em; margin: 0; }
.lista-espera-estado.bien { color: #8AB947; }
.lista-espera-estado.malo { color: #FF8A98; }

.lista-espera-letra {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--humo-bajo);
  margin: 0;
}
.lista-espera-letra a { color: inherit; }

/* La trampa para robots: fuera de la vista, fuera del foco y fuera del
   lector de pantalla, pero presente en el formulario. No se usa display:
   none porque hay robots que se saltan lo que esta oculto asi. */
.trampa {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sin JavaScript el formulario no puede hacer nada, asi que no se enseña:
   en su lugar queda la direccion de correo, que si funciona. */
.lista-espera-sin-js { display: none; margin: 0; font-size: 0.9rem; }
.sin-script .lista-espera-forma { display: none; }
.sin-script .lista-espera-sin-js { display: block; }

/* --------------------------------------------- tallas en el telefono -- */
/* Van aqui y no en doui.css porque esta hoja se carga despues: al mismo
   peso de selector, la ultima gana, y estas clases son de aqui.

   Medido en la pagina a 375 px. Por debajo de 12 px, en un telefono en la
   mano, el texto deja de leerse de pasada. */

@media (max-width: 700px) {
  /* Los alergenos de la tarjeta de Bites salian a 9,9 px. Es informacion
     que puede mandar a alguien al hospital: o se lee, o no sirve. */
  .bite-ficha { font-size: 0.78rem; line-height: 1.45; }

  /* Gruesa · Delgada · Bites son botones de verdad, no una etiqueta. */
  .anadir-textura { font-size: 0.75rem; }

  /* Los sellos y el contador del carrito, un punto mas grandes. */
  .preventa-sello,
  .bite-sello { font-size: 0.7rem; }
  .boton-carrito-cuenta { font-size: 0.75rem; }

  /* .tecnica es la etiqueta pequena de todo el sitio -pesos, alergenos,
     contadores-. A 9,9 px no se lee en la mano; se le pone un suelo. No es
     decoracion: ahi van los gramos y lo que contiene. */
  .tecnica { font-size: 0.72rem; }

  /* La cinta de promociones va pasando: si ademas es diminuta, no da
     tiempo a leerla. */
  .cinta-tira li { font-size: 0.75rem; }
}

/* ------------------------------------------------------------ resenas -- */
.resenas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.resena {
  border: 1px solid rgba(248, 244, 236, 0.16);
  background: rgba(248, 244, 236, 0.04);
  border-radius: 1.1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.resena-estrellas { margin: 0; color: var(--cereza); letter-spacing: 0.1em; font-size: 0.95rem; }
.resena-texto {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--crema);
  font-size: 1rem;
  line-height: 1.55;
}
.resena-firma { margin: 0; color: var(--humo-bajo); font-size: 0.7rem; }