/* =====================================================================
   TIENDA ONLINE — hoja de estilo · V04

   DE DÓNDE SALEN ESTOS VALORES
   ---------------------------------------------------------------------
   De dos sitios, y de ninguno más:

   1) De medir woowfotomaton.com — la Tienda vive DENTRO de su cabecera y
      su pie, así que el amarillo, el negro y las tipografías son los
      suyos:
        · Urbanist 900    → titulares
        · Poppins 600/800 → subtítulos y botones
        · Open Sans 16/1.6 → cuerpo
        · #f2e100 con texto negro y radio 999px → el botón real del sitio
        · #0e0e10 → el negro del pie
      Las familias tipográficas ya las carga el tema: aquí no se pide ni
      una fuente más. Una tienda que añade dos webfonts propias tarda más
      en pintar y encima se ve distinta del resto del sitio.

   2) De la maqueta 04 aprobada — de ahí vienen las superficies cálidas
      (papel #fffdf7, crema #f5f0e4, línea #ded6c6), los radios grandes,
      la sombra baja y, sobre todo, la ESTRUCTURA: bloque de título con
      el botón de familias, orden a la derecha, carrusel de destacados y
      rejilla densa de dos columnas en móvil.

   QUÉ CAMBIÓ RESPECTO A LA VERSIÓN ANTERIOR, Y POR QUÉ
   ---------------------------------------------------------------------
   La QA humana rechazó la versión móvil por larga y engorrosa. Medido:
   antes había una fotografía a pantalla completa, un H1, tres párrafos,
   una caja de búsqueda, un selector y un botón antes del primer producto.
   Ahora el primer producto entra en la primera pantalla de un iPhone SE.

   TODO VA PREFIJADO CON .woow-store
   ---------------------------------------------------------------------
   Ni una regla suelta sobre `a`, `h1`, `img` o `ul`. Esta hoja se carga
   dentro de la cabecera y el pie reales del sitio, y una regla global se
   llevaría por delante el menú o el widget de WhatsApp.
   ===================================================================== */

.woow-store {
  --woow-amarillo: #f2e100;
  --woow-amarillo-suave: #fff3a8;
  --woow-negro: #111111;
  --woow-tinta: #141414;
  --woow-gris: #6f6a60;
  --woow-gris-claro: #8b857a;
  --woow-linea: #ded6c6;
  --woow-papel: #fffdf7;
  --woow-crema: #f5f0e4;
  --woow-crema-2: #eee6d6;
  --woow-blanco: #ffffff;
  --woow-radio: 22px;
  --woow-radio-s: 14px;
  --woow-sombra: 0 18px 48px rgba(25, 20, 10, 0.10);
  --woow-ancho: 1420px;

  background: var(--woow-papel);
  color: var(--woow-tinta);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 26px 0 72px;
}

.woow-store *,
.woow-store *::before,
.woow-store *::after {
  box-sizing: border-box;
}

/*
 * LA TIENDA OCUPA LO QUE LE DA EL TEMA. Y HASTA HOY NO LO OCUPABA.
 *
 * EL DEFECTO, MEDIDO EN PRODUCCION
 * ---------------------------------------------------------------------
 * Astra mete el contenido en un `.ast-container` que es `display: flex`.
 * Un hijo de un contenedor flexible no es un bloque: es un elemento
 * flexible con `flex: 0 1 auto`, y eso significa que su ancho lo decide
 * SU CONTENIDO, no su contenedor.
 *
 * Medido en woowfotomaton.com con el contenedor a 1240 px: la tienda se
 * quedaba en 838. El `max-width` del envoltorio —1420 en el catalogo,
 * 1184 en el carrito— nunca llegaba a aplicarse, porque el limite no
 * estaba ahi.
 *
 * Es la mitad que faltaba de «demasiado estrecha, mucho espacio vacio».
 * La otra mitad era la rejilla de dos columnas de los pasos; esta solo
 * se ve DENTRO del tema, asi que ninguna vista previa la habria
 * encontrado.
 *
 * `min-width: 0` va con ello: sin eso, un hijo flexible no baja de su
 * anchura minima de contenido y una tabla ancha desbordaria la pagina.
 */
.woow-store {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.woow-store__wrap {
  width: 100%;
  max-width: var(--woow-ancho);
  margin: 0 auto;
  padding: 0 30px;
}

.woow-store img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------
   ESQUELETO

   El contenido va PRIMERO en el HTML y el menú después. En escritorio la
   rejilla lo devuelve a la izquierda con `order`, que es lo que permite
   tener un orden de lectura en móvil y otro visual en escritorio sin
   duplicar el marcado.
   --------------------------------------------------------------------- */
.woow-store__layout {
  display: block;
}

.woow-store__main {
  min-width: 0;
}

@media (min-width: 922px) {
  .woow-store__layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }
  .woow-store__aside {
    order: -1;
  }
}

.woow-store__saltar {
  position: absolute;
  left: -9999px;
}
.woow-store__saltar:focus {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: var(--woow-amarillo);
  color: var(--woow-negro);
  border-radius: 999px;
  font-weight: 800;
}

.woow-store__aviso {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-crema);
  color: #4a4438;
  font-size: 14px;
  line-height: 1.5;
}
.woow-store__aviso--lab {
  border-color: #d9cf9a;
  background: #fffbe2;
}

/* ---------------------------------------------------------------------
   CABECERA: título, texto y, sólo en móvil, el botón de familias
   --------------------------------------------------------------------- */
.woow-store__cabecera {
  margin: 0 0 18px;
}

.woow-store__eyebrow {
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7b725f;
}


.woow-store__h1 {
  margin: 0;
  font-family: "Urbanist", "Poppins", sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--woow-tinta);
  text-wrap: balance;
}

.woow-store__intro {
  max-width: 760px;
  margin: 14px 0 0;
  color: #625d54;
  font-size: 16px;
  line-height: 1.55;
}

/* El botón de familias. En escritorio no existe: allí el menú es la
   columna de la izquierda, y un botón que abre lo que ya está abierto
   es ruido. */
.woow-store__familias-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-top: 18px;
  padding: 13px 18px;
  border: 1.5px solid var(--woow-tinta);
  border-radius: 999px;
  background: var(--woow-blanco);
  color: var(--woow-tinta);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  /* Astra pone los botones en mayúsculas. Aquí no: la maqueta lo escribe
     en caja normal y en mayúsculas ocupa dos líneas. */
  text-transform: none;
  text-align: left;
  cursor: pointer;
}
.woow-store__familias-btn:hover {
  background: var(--woow-crema);
}

/* Las tres líneas, dibujadas y no escritas: un carácter «☰» cambia de
   tamaño y de forma en cada sistema. */
.woow-store__familias-btn-icono {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 12px;
  flex: 0 0 auto;
}
.woow-store__familias-btn-icono::before,
.woow-store__familias-btn-icono::after,
.woow-store__familias-btn-icono {
  background-image: linear-gradient(var(--woow-tinta), var(--woow-tinta));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 0;
}
.woow-store__familias-btn-icono::before,
.woow-store__familias-btn-icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
}
.woow-store__familias-btn-icono::before {
  top: 5px;
}
.woow-store__familias-btn-icono::after {
  top: 10px;
}

@media (min-width: 922px) {
  .woow-store__familias-btn {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   ORDEN — dos elecciones reales
   --------------------------------------------------------------------- */
.woow-store__orden-fila {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 22px 0 18px;
}

.woow-store__orden select {
  height: 48px;
  min-width: 245px;
  padding: 0 18px;
  border: 1px solid var(--woow-linea);
  border-radius: 999px;
  background: var(--woow-blanco);
  color: #292723;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.woow-store__orden-ok {
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--woow-tinta);
  color: var(--woow-blanco);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

/* Con JavaScript el selector navega solo y el botón sobra. Sin él, el
   botón es la única forma de aplicar el orden — por eso se esconde desde
   JavaScript y no desde aquí. */
.woow-store.js .woow-store__orden-ok {
  display: none;
}

/* ---------------------------------------------------------------------
   DESTACADOS — carrusel, no tres fotografías apiladas
   --------------------------------------------------------------------- */
.woow-store__destacados {
  margin: 8px 0 30px;
}

.woow-store__destacados-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.woow-store__destacados-t {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--woow-tinta);
}

.woow-store__destacados-mandos {
  display: flex;
  gap: 8px;
}

.woow-store__flecha {
  width: 40px;
  height: 40px;
  border: 1px solid var(--woow-linea);
  border-radius: 50%;
  background: var(--woow-blanco);
  color: var(--woow-tinta);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.woow-store__flecha:hover {
  background: var(--woow-crema);
}
.woow-store__flecha[disabled] {
  opacity: 0.35;
  cursor: default;
}

.woow-store__destacados-pista {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 2px 1px 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.woow-store__destacados-pista::-webkit-scrollbar {
  display: none;
}

.woow-store__destacado-item {
  flex: 0 0 min(420px, 35vw);
  scroll-snap-align: start;
  margin: 0;
}

.woow-store__destacado {
  position: relative;
  display: block;
  aspect-ratio: 1.15 / 1;
  overflow: hidden;
  border-radius: 26px;
  background: var(--woow-crema-2);
  box-shadow: var(--woow-sombra);
  text-decoration: none;
}

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

.woow-store__destacado-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.78) 100%);
}

.woow-store__destacado-txt {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: var(--woow-blanco);
}

.woow-store__destacado-n {
  font-family: "Urbanist", "Poppins", sans-serif;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.woow-store__destacado-p {
  flex: 0 0 auto;
  color: var(--woow-amarillo);
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   CATÁLOGO
   --------------------------------------------------------------------- */
.woow-store__catalogo-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 4px 0 16px;
}

.woow-store__catalogo-t {
  margin: 0;
  font-family: "Urbanist", "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--woow-tinta);
}

.woow-store__conteo {
  color: var(--woow-gris);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.woow-store__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.woow-store__vacio {
  margin: 24px 0;
  padding: 44px 24px;
  border: 1px dashed #cfc4b0;
  border-radius: var(--woow-radio);
  background: var(--woow-blanco);
  color: var(--woow-gris);
  text-align: center;
}

/* ---------------------------------------------------------------------
   LA TARJETA
   --------------------------------------------------------------------- */
.woow-store__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio);
  background: var(--woow-blanco);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woow-store__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(30, 24, 15, 0.10);
}

.woow-store__card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.woow-store__card-foto {
  position: relative;
  display: block;
  aspect-ratio: 1.18 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #eee7da, #ddd1b9);
}

.woow-store__card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El hueco de un producto sin fotografía. No es un icono de imagen rota:
   es la inicial, grande, sobre el mismo crema del resto. Un producto sin
   foto es un estado normal del trabajo. */
.woow-store__card-sinfoto {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, var(--woow-amarillo-suave), #ebdfc8 60%, #d8c7a7);
  font-family: "Urbanist", "Poppins", sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: rgba(20, 20, 20, 0.42);
}
.woow-store__card-sinfoto--grande {
  font-size: 92px;
  border-radius: var(--woow-radio);
}

.woow-store__badges {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.woow-store__badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--woow-amarillo);
  color: var(--woow-negro);
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woow-store__card-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 16px 8px;
}

/* Sobre la fotografía, como en la maqueta: dice de qué familia es sin
   gastar una línea del cuerpo, que en móvil vale oro. */
.woow-store__card-familia {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: blur(8px);
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--woow-tinta);
}

/* En la ficha no hay fotografía debajo: ahí vuelve a ser texto normal. */
.woow-store__ficha-datos .woow-store__card-familia {
  position: static;
  display: inline-block;
  margin: 0 0 10px;
  background: var(--woow-crema);
  backdrop-filter: none;
}

.woow-store__card-nombre {
  font-family: "Urbanist", "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--woow-tinta);
}

.woow-store__card-desc {
  color: #6e675c;
  font-size: 14px;
  line-height: 1.45;
}

.woow-store__card-precio {
  margin-top: auto;
  padding-top: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 900;
  color: var(--woow-tinta);
  white-space: nowrap;
}

.woow-store__card-antes {
  margin-right: 8px;
  color: var(--woow-gris-claro);
  font-size: 14px;
  font-weight: 600;
}

.woow-store__card-cta {
  display: block;
  margin: 0 16px 16px;
  padding: 11px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--woow-amarillo);
  color: var(--woow-negro);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.woow-store__card-cta:hover {
  filter: brightness(0.96);
}
.woow-store__card-cta--no {
  background: var(--woow-crema);
  color: var(--woow-gris);
}

/* ---------------------------------------------------------------------
   EL MENÚ DE FAMILIAS

   Tres estados, y los tres tienen que funcionar:
     · escritorio  → columna fija a la izquierda;
     · móvil con JavaScript → cajón que entra por la izquierda;
     · móvil sin JavaScript → lista normal al final de la página.

   El tercero es el que decide la forma de escribir esto: el cajón sólo se
   activa cuando el JavaScript ha marcado `.js`. Al revés —cajón por
   defecto, abierto con JavaScript— un fallo de red dejaría el menú
   inalcanzable.
   --------------------------------------------------------------------- */
.woow-store__aside {
  margin: 32px 0 0;
  padding: 18px;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio);
  background: var(--woow-blanco);
}

.woow-store__aside-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.woow-store__aside-titulo {
  margin: 0;
  padding: 5px 10px 5px 4px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--woow-gris);
}

/* Un rótulo por sitio: el de la columna en escritorio, el del cajón en
   móvil. Ver `part-sidebar.php`. */
.woow-store__aside-titulo--cajon {
  display: none;
}

/*
 * EL CERRAR DEL CAJON DE FAMILIAS.
 *
 * QUE ESTABA MAL
 * ---------------------------------------------------------------------
 * El rotulo del cajon es «Todos nuestros Productos» a 22 px y peso 900.
 * En un telefono de 390 px el cajon mide 340, quedan 304 de contenido, y
 * ese texto no cabe en una linea: se comia el hueco del boton y la cruz
 * acababa montada encima de la ultima palabra. Se veia como un fallo sin
 * que se supiera decir cual.
 *
 * Tres cosas lo arreglan y ninguna es mover la cruz: el titulo puede
 * partirse (`min-width: 0`), el boton no puede encogerse (`flex: 0 0
 * auto`, ya estaba) y entre los dos hay una separacion de verdad.
 *
 * 44x44 reales, que es el minimo tactil. Antes eran 42.
 */
.woow-store__aside-cerrar {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--woow-tinta);
  border-radius: 50%;
  background: var(--woow-blanco);
  color: var(--woow-tinta);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}

.woow-store__aside-cerrar:hover {
  background: var(--woow-crema);
}

.woow-store__aside-cerrar:active {
  transform: scale(0.92);
}

.woow-store__aside-cerrar:focus-visible {
  outline: 3px solid var(--woow-tinta);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .woow-store__aside-cerrar {
    transition: none;
  }
}

.woow-store__familias {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woow-store__familias li {
  margin: 0;
}

.woow-store__familia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: 13px;
  color: #2f2a24;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.woow-store__familia:hover {
  background: var(--woow-crema);
}
.woow-store__familia.is-activa {
  background: var(--woow-tinta);
  color: var(--woow-blanco);
}

.woow-store__familia-flecha {
  flex: 0 0 auto;
  font-size: 15px;
  opacity: 0.5;
}

.woow-store__aside-vacio {
  margin: 8px 4px 0;
  color: var(--woow-gris);
  font-size: 13px;
  line-height: 1.45;
}

.woow-store__aside-capa {
  display: none;
}

@media (min-width: 922px) {
  .woow-store__aside {
    position: sticky;
    top: 24px;
    margin: 0;
    box-shadow: 0 10px 28px rgba(35, 30, 20, 0.05);
  }
}

/* El cajón, sólo cuando el JavaScript está vivo y la pantalla es
   estrecha. */
@media (max-width: 921px) {
  .woow-store.js .woow-store__aside {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100000;
    width: min(340px, 88vw);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--woow-papel);
    box-shadow: 24px 0 50px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .woow-store.js .woow-store__aside[hidden] {
    display: none;
  }
  .woow-store.js .woow-store__aside-titulo {
    font-family: "Urbanist", "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--woow-tinta);
  }
  .woow-store.js .woow-store__aside-titulo--ancho {
    display: none;
  }
  .woow-store.js .woow-store__aside-titulo--cajon {
    display: inline;
  }
  .woow-store.js .woow-store__aside-cerrar {
    display: inline-flex;
  }

  /*
   * LA CABECERA DEL CAJON SE QUEDA A LA VISTA.
   *
   * Con nueve familias el cajon se desplaza, y la cruz se iba fuera de
   * pantalla: para cerrarlo habia que volver arriba primero. Pegada, la
   * salida esta siempre donde se dejo.
   *
   * El fondo es opaco a proposito: translucido dejaria pasar los enlaces
   * por debajo del titulo.
   */
  .woow-store.js .woow-store__aside-cab {
    position: sticky;
    top: 0;
    z-index: 1;
    gap: 16px;
    margin: -18px -18px 10px;
    padding: 18px;
    background: var(--woow-papel);
    border-bottom: 1px solid var(--woow-linea);
  }

  /* Que el titulo pueda partirse en dos lineas en vez de empujar la
     cruz. `min-width: 0` es lo que se lo permite dentro de un flex. */
  .woow-store.js .woow-store__aside-titulo {
    min-width: 0;
    line-height: 1.2;
  }
  .woow-store.js .woow-store__aside-capa {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.42);
  }
  .woow-store.js .woow-store__aside-capa[hidden] {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   LA FICHA
   --------------------------------------------------------------------- */
.woow-store__migas-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.woow-store__migas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--woow-gris);
}
.woow-store__migas a {
  color: var(--woow-gris);
  text-decoration: none;
  border-bottom: 1px solid var(--woow-linea);
}
.woow-store__migas a:hover {
  color: var(--woow-tinta);
}

.woow-store__ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.woow-store__ficha-foto {
  overflow: hidden;
  border-radius: 26px;
  background: var(--woow-crema-2);
  box-shadow: var(--woow-sombra);
}
.woow-store__ficha-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* La galería de la ficha (contrato 1.5). Miniaturas bajo la foto grande,
   con la principal delante; la elegida se marca con el borde. Va FUERA
   de `.woow-store__ficha-foto`, que recorta por su radio. */
.woow-store__ficha-media {
  min-width: 0;
}
.woow-store__galeria {
  list-style: none;
  margin: 12px 0 0;
  padding: 2px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.woow-store__galeria li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.woow-store__galeria-mini {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--woow-crema-2);
  transition: border-color .15s ease;
}
.woow-store__galeria-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.woow-store__galeria-mini.es-actual,
.woow-store__galeria-mini:focus-visible {
  border-color: var(--woow-tinta);
  outline: none;
}

.woow-store__ficha-resumen {
  margin: 12px 0 0;
  color: #625d54;
  font-size: 16px;
  line-height: 1.55;
}

.woow-store__ficha-precio {
  margin: 18px 0 0;
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--woow-tinta);
}

.woow-store__btn {
  display: inline-block;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--woow-amarillo);
  color: var(--woow-negro);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.woow-store__btn--grande {
  margin-top: 20px;
  padding: 16px 32px;
  font-size: 15px;
}

.woow-store__ficha-nota {
  margin: 14px 0 0;
  color: var(--woow-gris);
  font-size: 14px;
  line-height: 1.5;
}

.woow-store__h2,
.woow-store__h3 {
  font-family: "Urbanist", "Poppins", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--woow-tinta);
}
.woow-store__h2 {
  font-size: 26px;
  margin: 0 0 12px;
}
.woow-store__h3 {
  font-size: 17px;
  margin: 24px 0 10px;
}

.woow-store__variantes ul,
.woow-store__incluye ul ,
.woow-store__caracteristicas ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woow-store__variantes li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--woow-linea);
  font-size: 15px;
}
.woow-store__incluye li ,
.woow-store__caracteristicas li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 15px;
  line-height: 1.5;
}
.woow-store__incluye li::before ,
.woow-store__caracteristicas li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--woow-amarillo);
}

.woow-store__ficha-texto {
  margin: 40px 0 0;
  max-width: 760px;
}
.woow-store__ficha-texto p {
  color: #4f4a42;
  line-height: 1.65;
}

.woow-store__volver {
  margin: 34px 0 0;
}
.woow-store__volver a {
  color: var(--woow-tinta);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid var(--woow-amarillo);
}

/* ---------------------------------------------------------------------
   PAGINACIÓN
   --------------------------------------------------------------------- */
.woow-store__paginas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 0;
}
.woow-store__pagina {
  min-width: 44px;
  padding: 10px 14px;
  border: 1px solid var(--woow-linea);
  border-radius: 999px;
  background: var(--woow-blanco);
  color: #514a3f;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.woow-store__pagina.is-activa {
  border-color: var(--woow-tinta);
  background: var(--woow-tinta);
  color: var(--woow-blanco);
}

/* ---------------------------------------------------------------------
   TABLET
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .woow-store__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 921px) {
  .woow-store__wrap {
    padding: 0 16px;
  }
  .woow-store__ficha {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .woow-store__destacado-item {
    flex-basis: 46vw;
  }
}

/* ---------------------------------------------------------------------
   MÓVIL — donde se decidió todo

   Dos columnas y no una: con una sola columna cada tarjeta ocupa media
   pantalla y ver cinco productos cuesta cuatro deslizamientos. La
   descripción corta se esconde aquí porque el nombre y el precio ya
   dicen lo que hace falta para decidir si se toca.
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .woow-store {
    padding: 18px 0 56px;
  }

  .woow-store__h1 {
    font-size: 40px;
  }
  .woow-store__familias-btn {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 13px;
  }

  .woow-store__intro {
    font-size: 15px;
    line-height: 1.48;
  }

  .woow-store__orden-fila {
    margin: 16px 0 14px;
  }
  .woow-store__orden {
    flex: 1;
  }
  .woow-store__orden select {
    width: 100%;
    min-width: 0;
  }

  .woow-store__destacados {
    margin-bottom: 24px;
  }
  .woow-store__destacados-cab {
    margin-bottom: 11px;
  }
  /* Las flechas no salen: aquí se desliza con el dedo. */
  .woow-store__destacados-mandos {
    display: none !important;
  }
  /* Una tarjeta DOMINANTE, con el borde de la siguiente asomando para
     que se vea que hay más. */
  .woow-store__destacado-item {
    flex-basis: 86%;
  }
  .woow-store__destacado {
    border-radius: 20px;
  }
  /* EL BOTÓN DE WHATSAPP DEL SITIO VIVE EN ESA ESQUINA.
     Con nombre a la izquierda y precio a la derecha, el precio quedaba
     justo debajo del globo verde y no se leía. Se apilan a la izquierda,
     y además se deja el hueco de la burbuja. Sólo se ve dibujando: la
     maqueta no tiene widget de WhatsApp. */
  .woow-store__destacado-txt {
    left: 16px;
    right: 16px;
    bottom: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding-right: 68px;
  }
  .woow-store__destacado-n {
    font-size: 21px;
  }
  .woow-store__destacado-p {
    font-size: 15px;
  }

  .woow-store__catalogo-t {
    font-size: 24px;
  }

  .woow-store__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .woow-store__card {
    border-radius: 16px;
  }
  .woow-store__card-cuerpo {
    padding: 12px 12px 6px;
    gap: 6px;
  }
  .woow-store__card-nombre {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    letter-spacing: -0.01em;
  }
  .woow-store__card-desc {
    display: none;
  }
  .woow-store__card-familia {
    left: 8px;
    top: 8px;
    padding: 5px 8px;
    font-size: 9px;
  }
  .woow-store__card-precio {
    font-size: 16px;
  }
  .woow-store__card-cta {
    margin: 0 12px 12px;
    padding: 9px 8px;
    font-size: 10px;
  }
  .woow-store__card-sinfoto {
    font-size: 34px;
  }

  .woow-store__migas-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .woow-store__ficha-precio {
    font-size: 24px;
  }
}

/* Quien pide menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .woow-store__card,
  .woow-store__destacado img {
    transition: none;
  }
  .woow-store__destacados-pista {
    scroll-behavior: auto;
  }
}

/* =====================================================================
   EL CARRITO
   =====================================================================
   Mismos tokens que el resto de la V04: no hay ni un color nuevo. El
   carrito no es otra pantalla, es una capa de la misma tienda.

   TRES SITIOS, TRES COMPORTAMIENTOS
   ---------------------------------
   · Escritorio: botón arriba a la derecha, cajón que entra por el lado.
   · Móvil: el botón se esconde y aparece una barra abajo — pero sólo
     cuando hay algo dentro, porque una franja fija permanente en un
     teléfono es pantalla que se pierde para siempre.
   · Sin JavaScript: el cajón es una sección normal al final de la
     página. Nada de esto lo esconde `hidden`; lo esconde `.js`.
   ===================================================================== */

/*
 * EL CARRITO NO SE ENCIERRA EN SU PROPIA CAPA.
 *
 * Aquí ponía `position: relative; z-index: 5`, y con eso el cajón —que es
 * `fixed`— quedaba atrapado en un contexto de apilamiento de nivel 5. La
 * cabecera del tema tiene 99. Resultado medido: el cajón se abría, se
 * veía moverse, y sus primeros cien píxeles quedaban DETRÁS de la
 * cabecera. El botón «Quitar» de la primera línea no se podía pulsar —el
 * clic se lo comía `.ast-primary-header-bar`— y no había forma de saberlo
 * mirando, porque el botón estaba a la vista.
 *
 * Sin `z-index` propio, las capas fijas del carrito participan en el
 * apilamiento de la página y pueden ponerse por encima de lo que haga
 * falta. El botón de escritorio va en el flujo normal y no necesita nada.
 */
.woow-cart {
  position: static;
}

/* --- LAS DOS ACCIONES: cuenta y carrito --- */

/*
 * UN CONTENEDOR, DOS SITIOS.
 *
 * DONDE VA CADA UNO, Y POR QUE
 * ---------------------------------------------------------------------
 * . A partir de 768 px --tableta y escritorio-- la pareja sube al bloque
 *   del titulo: fila a la derecha, a la altura de «Tienda Online». Es
 *   donde se buscan en una tienda de escritorio, y donde se ven sin
 *   competir con el globo de WhatsApp.
 *
 * . Por debajo de 768 px se queda como rail flotante a la derecha, que
 *   acompana el desplazamiento. En un telefono eso es lo util: el
 *   carrito no se pierde catalogo abajo.
 *
 * EL MISMO MARCADO EN LAS DOS. No hay una version de escritorio y otra
 * de movil: hay un contenedor que cambia de posicion. Dos copias serian
 * dos carritos que mantener de acuerdo, y el numero de uno acabaria
 * discrepando del otro.
 *
 * LA SEPARACION ES UN `gap`, no una resta. Antes cada boton tenia su
 * propio `bottom` y la distancia entre ellos salia de restar cuatro
 * numeros repartidos por dos bloques `@media`; se desalinearon una vez y
 * el arreglo tuvo que ir al final del archivo porque la regla base
 * deshacia la excepcion. Con un contenedor eso ya no puede ocurrir.
 */
.woow-cart__acciones {
  position: fixed;
  right: 0.85rem;
  /* Por encima del globo de WhatsApp, que es de otro plugin y tiene su
     esquina reservada. No se le quita: se le respeta. */
  bottom: 5.4rem;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

/*
 * LA FORMA COMPARTIDA.
 *
 * EL DEFECTO QUE ESTO CIERRA
 * ---------------------------------------------------------------------
 * Los dos mandos eran blancos con una linea negra finisima --1 px, y en
 * la cuenta encima a un 12 % de opacidad-- sobre un fondo casi blanco.
 * A la vista no eran botones: eran dos dibujos. La QA humana lo dijo con
 * dos palabras: se pierden.
 *
 * Ahora los dos llevan aro de 2 px de tinta plena y sombra en dos capas
 * --una corta que los pega a la pagina y otra larga que los levanta--,
 * que es lo que hace que algo se lea como pulsable y no como impreso.
 */
.woow-cart__btn,
.woow-cart__cuenta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 52 px. Por encima de los 44 que pide el minimo tactil, y el mismo en
     todas las anchuras: un mando que encoge en el telefono es un mando
     mas dificil de acertar justo donde mas cuesta acertar. */
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 2px solid var(--woow-tinta);
  border-radius: 999px;
  color: var(--woow-tinta);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(35, 30, 20, 0.20), 0 6px 18px rgba(35, 30, 20, 0.22);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

/*
 * EL CARRITO LLEVA EL AMARILLO REAL DEL SITIO.
 *
 * No es un color nuevo: es el mismo `#f2e100` del boton «Solicitar
 * presupuesto» de la cabecera y del «Ver mas» de cada tarjeta. La accion
 * principal de la tienda tiene el color de las acciones de la casa.
 *
 * Tinta sobre amarillo da 14,1:1 -- el icono se lee sin esfuerzo.
 */
.woow-cart__btn {
  background: var(--woow-amarillo);
}

/* La cuenta es la secundaria: papel dentro del mismo aro. Dos rellenos
   distintos con la misma forma se leen como una pareja con jerarquia;
   dos formas distintas se leerian como dos sitios sin relacion. */
.woow-cart__cuenta {
  background: var(--woow-blanco);
}

/* Quien ya dijo quien es lo ve marcado: no es lo mismo «entra» que
   «vuelve a lo tuyo». */
.woow-cart__cuenta[data-woow-cuenta="dentro"] {
  background: var(--woow-crema-2);
}

/* --- los tres estados --- */

.woow-cart__btn:hover,
.woow-cart__cuenta:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(35, 30, 20, 0.22), 0 10px 26px rgba(35, 30, 20, 0.28);
}

/* Pulsado: se hunde. Es la senal de que el dedo ha llegado, y llega
   ANTES que la respuesta del servidor. */
.woow-cart__btn:active,
.woow-cart__cuenta:active {
  transform: translateY(0) scale(0.93);
  box-shadow: 0 1px 2px rgba(35, 30, 20, 0.24);
}

/*
 * EL FOCO, POR FUERA.
 *
 * El aro del boton ya es tinta, asi que un contorno de tinta pegado a el
 * seria invisible. Con `outline-offset` el anillo cae sobre el papel, que
 * es donde se ve.
 */
.woow-cart__btn:focus-visible,
.woow-cart__cuenta:focus-visible {
  outline: 3px solid var(--woow-tinta);
  outline-offset: 3px;
}

/* Quien pide menos movimiento recibe menos movimiento -- pero no menos
   informacion: el cambio de estado sigue ocurriendo, sin transicion. */
@media (prefers-reduced-motion: reduce) {
  .woow-cart__btn,
  .woow-cart__cuenta {
    transition: none;
  }
}

/* --- los iconos, dibujados y no traidos --- */

.woow-cart__btn-icono {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  position: relative;
  flex: 0 0 auto;
}

/* El asa. Dos bordes y un radio: un icono que no pesa una peticion. */
.woow-cart__btn-icono::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: -7px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* Silueta de persona con dos formas: sin SVG externo, que la CSP de la
   Tienda no deja traer nada de fuera. */
.woow-cart__cuenta-icono {
  position: relative;
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.woow-cart__cuenta-icono::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.woow-cart__cuenta-icono::after {
  content: "";
  position: absolute;
  bottom: 0.05rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.2rem;
  height: 0.62rem;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 0.7rem 0.7rem 0 0;
}

/* La chapa: encima del icono, no al lado. Al lado obligaria al boton a
   ensancharse con el numero y dejaria de ser un circulo. */
.woow-cart__btn-num {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.45em;
  padding: 0.1em 0.35em;
  /* Aro del color del papel: la chapa cae mitad sobre el amarillo del
     boton y mitad sobre la pagina, y sin aro se confundiria con los dos. */
  border: 2px solid var(--woow-papel);
  border-radius: 999px;
  background: var(--woow-tinta);
  color: var(--woow-papel);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Vacio: la chapa desaparece. Un «0» permanente es ruido que ademas
   invita a pulsar algo que no tiene nada dentro. */
.woow-cart__btn-num--cero {
  display: none;
}

/*
 * TABLETA Y ESCRITORIO: la pareja sube junto al titulo.
 *
 * COMO SE COLOCA SIN DUPLICAR MARCADO
 * ---------------------------------------------------------------------
 * La fila vuelve al flujo, alineada a la derecha, y un margen inferior
 * negativo del ALTO EXACTO de la fila devuelve el hueco que ocupa. El
 * resultado: el bloque del titulo arranca a la misma altura que los
 * mandos, sin sacarlos de su sitio en el documento ni pintarlos dos
 * veces.
 *
 * Se hace con margen y no con `position: absolute` a proposito: en
 * absoluto habria que adivinar la distancia desde arriba, y esa distancia
 * cambia cuando aparece el aviso del administrador. En el flujo, se
 * coloca sola.
 *
 * SIN JAVASCRIPT NO SE APLICA. Sin el, el cajon del carrito es una
 * tarjeta normal aqui mismo, y el margen negativo la meteria debajo de
 * los botones. El camino degradado se queda con la fila en su propia
 * linea: mas fea y entera, que es el orden correcto cuando algo fallo.
 */
@media (min-width: 768px) {
  .woow-store.js .woow-cart__acciones {
    position: relative;
    right: auto;
    bottom: auto;
    flex-direction: row;
    justify-content: flex-end;
    z-index: 3;
    margin-bottom: -3.25rem;
    /*
     * LA TIRA ES INVISIBLE PERO OCUPA TODO EL ANCHO.
     *
     * Al volver al flujo, el contenedor es un bloque: mide lo que mide la
     * pagina, aunque sus dos hijos esten pegados a la derecha. Con el
     * margen negativo eso pone una franja transparente de 52 px de alto
     * por encima de la primera linea del contenido, y una franja con
     * `z-index` SI se lleva los clics.
     *
     * Hoy debajo no hay nada pulsable, asi que no se nota. Manana puede
     * haberlo, y el sintoma seria un enlace que no responde sin ninguna
     * razon visible: exactamente el fallo que ya costo un arreglo en este
     * plugin. Se cierra antes de que exista.
     */
    pointer-events: none;
  }

  .woow-store.js .woow-cart__acciones > * {
    pointer-events: auto;
  }

  /*
   * Y EL TEXTO DEL TITULO SE APARTA.
   *
   * Sin esto, la frase de bajo el H1 --que ocupa todo el ancho-- pasaria
   * por debajo de los dos circulos a 768 px. Se reserva el sitio de los
   * dos mandos (114 px con su separacion) mas un respiro.
   */
  .woow-store.js .woow-store__cabecera {
    padding-right: 8rem;
  }
}

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

.woow-cart__capa {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 8, 0.42);
  border: 0;
  /* Por encima de la cabecera del tema (99) y del globo de WhatsApp. */
  z-index: 100000;
}

.woow-cart__cajon {
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio);
  background: var(--woow-blanco);
  padding: 1.15rem 1.15rem 1.35rem;
  margin: 0 0 1.6rem;
}

.woow-cart__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------------
 * `hidden` TIENE QUE OCULTAR. Y AQUÍ NO OCULTABA.
 *
 * EL DEFECTO, Y ES EL QUE LA QA HUMANA ESTABA VIENDO
 * ---------------------------------------------------------------------
 * El paso pendiente y su chapa de «Añadiendo» nacen con el atributo
 * `hidden` en el HTML y el JavaScript los enseña y los esconde con
 * `elemento.hidden = true/false`. Los dos llevaban además una regla
 * `display: flex` de esta hoja.
 *
 * `[hidden] { display: none }` vive en la hoja del NAVEGADOR, y entre una
 * regla del navegador y una del autor gana la del autor pase lo que pase
 * con la especificidad. O sea: `display: flex` ganaba SIEMPRE y el
 * atributo `hidden` no ocultaba nada.
 *
 * Resultado: cada vez que alguien abría el carrito veía el paso del
 * evento —el título, la explicación y sus dos campos— pegado debajo de
 * su selección, sin haber pulsado nada y sin tener nada pendiente. Es
 * exactamente lo que la QA humana devolvió como «aparecen campos de
 * fecha/tipo de evento que no queremos en este punto».
 *
 * No se arregla quitando el `display`, que hace falta cuando el paso SÍ
 * está en marcha: se arregla devolviéndole al atributo la última palabra.
 * `!important` es el instrumento correcto aquí y no un parche: `hidden`
 * significa «esto no está», y ninguna regla de presentación debe poder
 * discutirlo.
 *
 * Va acotado a la tienda: el tema y sus plugins tienen su propia hoja y
 * no se les toca.
 * ------------------------------------------------------------------ */
.woow-store [hidden],
.woow-cart [hidden] {
  display: none !important;
}

/*
 * EL RÓTULO DEL CAJÓN.
 *
 * Era un titular de 1,22 rem con su peso: en un panel de 380 px, la
 * palabra «Carrito» se llevaba el primer tercio de la pantalla para
 * repetir lo que ya dice el icono que se acaba de pulsar para abrirlo.
 *
 * Ahora es una etiqueta pequeña en versalitas con el mismo icono
 * delante — la marca de que este panel y aquel botón son la misma cosa.
 * Sigue siendo un `h2` de verdad: ha encogido de tamaño, no de
 * semántica.
 */
.woow-cart__titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--woow-gris);
}

/* El mismo cesto del botón, en pequeño y en tinta atenuada. Dibujado con
   bordes, como los otros: la CSP de la Tienda no deja traer un SVG. */
.woow-cart__titulo-icono {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.woow-cart__titulo-icono::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: -5px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

/*
 * EL CERRAR DEL CARRITO.
 *
 * Era un caracter «x» gris de 1,7 rem con 0,2 rem de relleno lateral: un
 * blanco de unos 27x27 px, muy por debajo del minimo tactil, y ademas
 * gris sobre blanco. Ahora es el mismo boton redondo de 44 px que cierra
 * el cajon de familias — dos cajones que se cierran igual son un gesto
 * que se aprende una vez.
 */
.woow-cart__cerrar {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--woow-tinta);
  border-radius: 50%;
  background: var(--woow-blanco);
  font-size: 24px;
  line-height: 1;
  color: var(--woow-tinta);
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}

.woow-cart__cerrar:hover {
  background: var(--woow-crema);
}

.woow-cart__cerrar:active {
  transform: scale(0.92);
}

.woow-cart__cerrar:focus-visible {
  outline: 3px solid var(--woow-tinta);
  outline-offset: 2px;
}

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

.woow-cart__error {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--woow-radio-s);
  background: var(--woow-crema);
  border-left: 3px solid var(--woow-tinta);
  font-size: 0.92rem;
}

.woow-cart__vacio {
  margin: 0;
  color: var(--woow-gris);
  font-size: 0.96rem;
}

.woow-cart__vacio span {
  display: block;
  color: var(--woow-gris-claro);
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.woow-cart__aviso {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--woow-radio-s);
  background: var(--woow-amarillo-suave);
  font-size: 0.9rem;
}

/* --- las líneas --- */

.woow-cart__lineas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.woow-cart__linea {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.8rem;
  align-items: start;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--woow-linea);
}

.woow-cart__linea:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.woow-cart__linea--bloqueada {
  opacity: 0.72;
}

.woow-cart__linea-foto {
  width: 64px;
  height: 64px;
  border-radius: var(--woow-radio-s);
  overflow: hidden;
  background: var(--woow-crema);
  display: grid;
  place-items: center;
  color: var(--woow-gris-claro);
  font-weight: 700;
  font-size: 1.4rem;
}

.woow-cart__linea-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.woow-cart__linea-nombre {
  margin: 0;
  font-weight: 650;
  line-height: 1.25;
}

.woow-cart__linea-variante {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--woow-gris);
}

/*
 * LAS UNIDADES, Y SÓLO CUANDO SON VARIAS.
 *
 * El importe de la línea viene multiplicado por la cantidad, así que sin
 * esta línea «204,99 € + IVA» parecería el precio de una unidad. Aquí no
 * se calcula nada: es el número que manda el motor.
 */
.woow-cart__linea-uds {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--woow-gris);
}

.woow-cart__linea-bloqueo {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

/*
 * EL PRECIO, TERCERA COLUMNA DE LA REJILLA.
 *
 * Antes era un bloque `.woow-cart__linea-cierre` con el importe y, debajo,
 * el enlace de «Quitar». Ese enlace se fue a la página del carrito con el
 * resto de lo que convertía un panel de confirmación en un editor, así que
 * el envoltorio sobraba: el importe es ahora hijo directo de la rejilla.
 */
.woow-cart__linea-importe {
  margin: 0;
  align-self: start;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * AQUÍ VIVÍAN LOS TOTALES DEL CAJÓN.
 *
 * Cuatro reglas —`__totales`, `__total`, `__cobrable`, `__nota`— más las
 * de `__subtotal` y `__iva` que estaban al final del archivo. Dibujaban
 * subtotal, IVA, total, importe a pagar y el párrafo que explica por qué
 * los dos últimos no coinciden, todo dentro de un panel de 380 px.
 *
 * Se han ido enteras con su marcado: en un panel que se abre al pulsar
 * «Añadir», esas cinco cifras son una factura delante de alguien que sólo
 * quería comprobar que su clic funcionó.
 *
 * Están en la página del carrito, con los mismos números y las mismas
 * palabras, bajo `.woow-paso__totales`.
 * ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
 * EL PASO PENDIENTE — lo que queda del formulario del evento.
 *
 * Tenía título, párrafo, un desplegable de tipo de evento y un selector
 * de fecha, con sus reglas de `.woow-cart__campo`. Los dos campos se
 * preguntan ahora en `/tienda-online/carrito/`, a ancho completo: dos
 * datos obligatorios no se piden en un panel que se cierra pulsando
 * fuera sin avisar.
 *
 * Lo que queda aquí es un aviso corto y el botón que lleva allí.
 * ------------------------------------------------------------------ */

.woow-cart__pendiente {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.woow-cart__pendiente-texto {
  margin: 0;
  font-size: 0.9rem;
  color: var(--woow-gris);
  line-height: 1.45;
}

/* --- pie --- */

.woow-cart__pie {
  margin-top: 1.1rem;
}

/*
 * LA ACCIÓN PRINCIPAL DEL CAJÓN.
 *
 * Se llamaba `.woow-cart__continuar` y era el botón que arrancaba el
 * cierre de la compra. Ahora es `.woow-cart__ver`, que lleva a la página
 * del carrito: el mini-cart no cierra la venta.
 *
 * `display: inline-flex` porque `__ver` es un `<a>` y `.woow-store__btn`
 * puede venir de un `<button>`, que ya es flex por su propia regla. Sin
 * esto, el enlace no centraría su texto.
 */
.woow-cart__ver,
.woow-cart__evento-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* =====================================================================
   CON JAVASCRIPT: el cajón se convierte en cajón
   ===================================================================== */

.woow-store.js .woow-cart__cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--woow-linea);
  box-shadow: var(--woow-sombra);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 100001;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  padding: 1.25rem 1.25rem 2rem;
}

.woow-store.js .woow-cart.abierto .woow-cart__cajon {
  transform: translateX(0);
}

.woow-store.js .woow-cart__cerrar {
  display: inline-flex;
}

/*
 * LA CABECERA DEL CARRITO TAMBIEN SE QUEDA.
 *
 * Con cuatro lineas y sus totales el cajon se desplaza, y sin esto la
 * salida se pierde arriba. Es el mismo razonamiento que en el cajon de
 * familias, y por eso se resuelve igual.
 */
/*
 * Y EL PRIMER PRODUCTO YA NO SE METE DEBAJO DE ELLA.
 *
 * EL DEFECTO, MEDIDO
 * ---------------------------------------------------------------------
 * La cabecera llevaba `margin-top: -1.25rem` para comerse el relleno
 * superior del cajon y llegar hasta el borde. Con `position: sticky` eso
 * abre una discrepancia: el sitio que la cabecera OCUPA en el flujo es
 * -20 px, pero el sitio donde se PEGA es el borde de la caja de relleno,
 * o sea 0. Veinte pixeles de diferencia.
 *
 * Resultado medido con el cajon abierto y sin desplazar: la cabecera de
 * 0 a 97 y la primera linea empezando en 91. Seis pixeles del nombre y
 * de la foto del primer producto, tapados — y el primer producto es
 * justo el que se acaba de anadir.
 *
 * Se arregla quitando la pelea: el cajon no pone relleno arriba, la
 * cabecera no tira hacia arriba, y el sitio donde se pega y el sitio que
 * ocupa son el mismo. Los margenes laterales pasan a valer lo que vale
 * el relleno del cajon (1,15 rem, no 1,25): antes sobresalia 1,6 px por
 * cada lado.
 */
.woow-store.js .woow-cart__cajon {
  padding-top: 0;
}

.woow-store.js .woow-cart__cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: center;
  margin: 0 -1.15rem 0.9rem;
  padding: 1rem 1.15rem;
  background: var(--woow-blanco);
  border-bottom: 1px solid var(--woow-linea);
}

@media (prefers-reduced-motion: reduce) {
  .woow-store.js .woow-cart__cajon {
    transition: none;
  }
}

/* Con el cajón abierto, la página de detrás no se mueve. */
html.woow-cart-abierto {
  overflow: hidden;
}

/* =====================================================================
   MÓVIL
   ===================================================================== */

@media (max-width: 921px) {
  /*
   * AQUI YA NO HAY NADA DEL BOTON DEL CARRITO.
   *
   * Vivian dos excepciones: una encogia el mando a 3,05 rem y otra lo
   * subia. Las dos existian porque cada boton tenia su propia posicion
   * fija, y mantener la pareja alineada obligaba a repetir el ajuste en
   * los dos. Ahora la posicion la lleva `.woow-cart__acciones` y el
   * tamano no cambia con la anchura: no hay nada que sincronizar.
   */

  .woow-store.js .woow-cart__cajon {
    top: auto;
    width: 100%;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--woow-linea);
    border-radius: var(--woow-radio) var(--woow-radio) 0 0;
    transform: translateY(100%);
    padding-bottom: 2.4rem;
  }

  .woow-store.js .woow-cart.abierto .woow-cart__cajon {
    transform: translateY(0);
  }

  .woow-cart__linea {
    grid-template-columns: 56px 1fr auto;
    gap: 0.65rem;
  }

  .woow-cart__linea-foto {
    width: 56px;
    height: 56px;
  }
}

/* ---------------------------------------------------------------------
 * PRECIO BASE + IVA (2026-08-18)
 *
 * La cifra que se anuncia es la base. El total va debajo, atenuado: es
 * información, no es el titular. Y en la cesta se enseñan los tres
 * escalones —subtotal, IVA, total— porque si no, el total parece que
 * sube solo al final.
 * ------------------------------------------------------------------ */
.woow-store__ficha-precio-iva {
  margin: .15rem 0 0;
  font-size: .875rem;
  color: rgba(0, 0, 0, .55);
}

/*
 * Y AQUÍ ESTABAN EL SUBTOTAL Y EL IVA DEL CAJÓN.
 *
 * Los tres escalones se siguen enseñando —el precio de WooW se anuncia
 * sin impuestos y sin ellos el total parecería subir solo al final—, pero
 * en la página del carrito, que es donde se decide. En el panel lateral
 * la única cifra es el precio base de cada línea con su «+ IVA» al lado.
 */

/* ---------------------------------------------------------------------
 * EL ICONO DE CUENTA YA NO VIVE AQUI.
 *
 * Estaba al final del archivo por una razon que ya no se aplica: su
 * excepcion movil peleaba por especificidad con la regla base, y la
 * ultima ganaba. Se resolvio poniendola la ultima de todas.
 *
 * Esa pelea existia porque la posicion del icono se escribia dos veces.
 * Ahora se escribe una sola, en `.woow-cart__acciones`, junto al carrito
 * y con la misma forma: ver «LAS DOS ACCIONES» mas arriba.
 * ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
 * §8 — LA TARJETA ES PARA DESCUBRIR
 *
 * El precio baja de rango: sigue estando —ocultarlo sería peor— pero deja
 * de competir con la fotografía y el nombre. La decisión se toma en la
 * ficha, con la descripción delante.
 * ------------------------------------------------------------------ */
.woow-store__card-precio {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.62);
}

.woow-store__card-nombre {
  font-weight: 650;
}

/* §9 — lo que condiciona la compra, dicho con palabras. */
.woow-store__ficha-avisos {
  margin-top: 1.5rem;
}

.woow-store__ficha-avisos ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.woow-store__ficha-avisos li {
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.5;
}


/* =====================================================================
   §7 — EL CARRITO RÁPIDO
   =====================================================================
   La jerarquía que pide el encargo, en este orden: qué he añadido,
   cuánto cuesta, qué hago ahora. Nada de este bloque añade un campo:
   todos quitan fricción o dan una salida.
   ===================================================================== */

/* --- el paso del evento, presentado como un paso y no como un muro --- */

/*
 * QUÉ SE ESTÁ AÑADIENDO, ARRIBA DEL TODO.
 *
 * El formulario aparecía suelto: dos campos y un botón, sin decir sobre
 * qué. Con el nombre delante, el paso pertenece a una compra concreta.
 */
.woow-cart__evento-que {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0 0.35rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--woow-radio-s);
  background: var(--woow-crema);
}

.woow-cart__evento-que span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--woow-gris);
}

.woow-cart__evento-que strong {
  font-size: 1.02rem;
  line-height: 1.25;
}

.woow-cart__evento-mandos {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/*
 * EL ENLACE DE SALIDA.
 *
 * Segundo nivel a propósito: se ve, se pulsa y no compite con la acción
 * principal. Es un botón de verdad —no un `<a href="#">`— porque no
 * navega a ninguna parte.
 */
.woow-cart__enlace {
  border: 0;
  background: none;
  padding: 0.55rem 0.4rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--woow-gris);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  /* Blanco táctil de 44 px sin dibujar una caja de 44 px. */
  min-height: 44px;
}

.woow-cart__enlace:hover,
.woow-cart__enlace:focus-visible {
  color: var(--woow-tinta);
}

.woow-cart__enlace:focus-visible {
  outline: 2px solid var(--woow-tinta);
  outline-offset: 2px;
  border-radius: var(--woow-radio-s);
}

.woow-cart__seguir {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  text-align: center;
}

/* El vacío deja de ser un callejón. */
.woow-cart__vacio-salida {
  margin: 0.9rem 0 0;
}

.woow-cart__vacio-salida a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--woow-tinta);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   §9 — LA ESPERA, DIBUJADA
   =====================================================================
   Añadir al carrito son dos saltos de red: el navegador pregunta a
   WordPress y WordPress pregunta a WooW desde su servidor. Eso no se
   puede acortar desde aquí — lo que sí se puede es dejar de tener la
   pantalla quieta mientras ocurre.
   ===================================================================== */

.woow-cart__cuerpo--cargando {
  position: relative;
  min-height: 8.5rem;
}

/* El contenido viejo se atenúa en vez de desaparecer: quitarlo dejaría
   un hueco que salta, y volver a ponerlo, otro. */
.woow-cart__cuerpo--cargando > * {
  opacity: 0.35;
}

/* Tres barras: una foto y dos líneas de texto. No imita el contenido
   exacto —eso sería mentir sobre lo que va a llegar— sino su forma. */
.woow-cart__cuerpo--cargando::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--woow-radio-s);
  background:
    linear-gradient(var(--woow-crema) 0 0) 0 0 / 64px 64px no-repeat,
    linear-gradient(var(--woow-crema) 0 0) 80px 6px / 55% 14px no-repeat,
    linear-gradient(var(--woow-crema) 0 0) 80px 30px / 35% 12px no-repeat;
  animation: woow-cart-latido 1.1s ease-in-out infinite;
}

@keyframes woow-cart-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .woow-cart__cuerpo--cargando::after {
    animation: none;
  }
}

/*
 * EL BOTÓN QUE SE ACABA DE PULSAR SE QUEDA PULSADO.
 *
 * Es la mitad del acuse de recibo: el cajón dice «estoy trayendo algo» y
 * el botón dice «fui yo». Sin lo segundo, con dos productos a la vista no
 * se sabe cuál se pulsó.
 */
.woow-store__btn.is-cargando,
.woow-store__card-cta.is-cargando {
  opacity: 0.72;
  cursor: progress;
}

/* =====================================================================
   LOS CUATRO PASOS DEL EMBUDO
   (SAME-DOMAIN-FUNNEL-01 §5, §7, §22, §28)

   Una sola columna, centrada y estrecha. No es una decisión estética:
   son pantallas de trabajo, y el catálogo al lado invitaba a irse justo
   cuando se está decidiendo. El camino de vuelta existe y está escrito
   con palabras —«Seguir comprando»— no insinuado con una rejilla en el
   margen.

   TODO SE MIDE EN `rem`. Estas pantallas se ven mucho más en un teléfono
   que en un escritorio, y lo que se rompe en un móvil es lo que se fijó
   en píxeles.
   ===================================================================== */

.woow-store__wrap--paso {
  max-width: 46rem;
}

.woow-paso {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 3rem;
}

.woow-paso__migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--woow-gris);
}

.woow-paso__migas a {
  color: var(--woow-gris);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.woow-paso__migas a:hover,
.woow-paso__migas a:focus-visible {
  color: var(--woow-tinta);
}

.woow-paso__titulo {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  text-wrap: balance;
}

.woow-paso__aviso,
.woow-paso__error {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: var(--woow-radio-s);
  font-size: 0.95rem;
  line-height: 1.45;
}

.woow-paso__aviso {
  border: 1px solid var(--woow-linea);
  background: var(--woow-crema);
  color: var(--woow-tinta);
}

/* El error NO usa sólo el color para decir que es un error: lleva borde
   grueso y un signo. Quien no distingue rojo de gris tiene que poder
   verlo igual. */
.woow-paso__error {
  border: 2px solid #a3271f;
  background: #fdf1ef;
  color: #7d1e17;
  font-weight: 600;
}

.woow-paso__error::before {
  content: "\26A0  ";
}

.woow-paso__vacio,
.woow-paso__recuerdo,
.woow-paso__dentro,
.woow-paso__enviado,
.woow-paso__recibido {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}

.woow-paso__vacio span {
  display: block;
  margin-top: 0.25rem;
  color: var(--woow-gris);
  font-size: 0.95rem;
}

.woow-paso__nota,
.woow-paso__pie-nota,
.woow-paso__secundario,
.woow-paso__bloque-texto {
  margin: 0;
  color: var(--woow-gris);
  font-size: 0.9rem;
  line-height: 1.5;
}

.woow-paso__secundario a {
  color: var(--woow-tinta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

.woow-paso__lineas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woow-paso__linea {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  grid-template-areas:
    "foto datos"
    "foto cantidad"
    "cierre cierre";
  gap: 0.5rem 0.875rem;
  padding: 0.875rem;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-blanco);
}

.woow-paso__linea--bloqueada {
  border-color: #d8b4ae;
  background: #fdf7f6;
}

.woow-paso__linea-foto {
  grid-area: foto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 0.625rem;
  background: var(--woow-crema);
  font-weight: 700;
  color: var(--woow-gris);
}

.woow-paso__linea-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.woow-paso__linea-datos { grid-area: datos; }
.woow-paso__linea-cantidad { grid-area: cantidad; }
.woow-paso__linea-cierre { grid-area: cierre; }

.woow-paso__linea-nombre {
  margin: 0;
  font-weight: 650;
  line-height: 1.3;
}

.woow-paso__linea-variante,
.woow-paso__linea-clase {
  margin: 0.125rem 0 0;
  font-size: 0.85rem;
  color: var(--woow-gris);
}

.woow-paso__linea-bloqueo {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #a3271f;
}

.woow-paso__linea-cantidad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.woow-paso__linea-cantidad form {
  margin: 0;
}

/* 2.75rem = 44 px al tamaño de fuente por defecto: el mínimo táctil de
   la guía de accesibilidad, y el mismo que ya usan las cruces de los
   cajones. */
.woow-paso__cant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--woow-tinta);
  border-radius: 0.625rem;
  background: var(--woow-blanco);
  color: var(--woow-tinta);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.woow-paso__cant:hover,
.woow-paso__cant:focus-visible {
  background: var(--woow-amarillo-suave);
}

.woow-paso__cant-num {
  min-width: 1.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.woow-paso__linea-cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--woow-linea);
}

.woow-paso__linea-cierre form {
  margin: 0;
}

.woow-paso__linea-importe {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.woow-paso__quitar,
.woow-paso__enlace {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--woow-gris);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.woow-paso__quitar:hover,
.woow-paso__quitar:focus-visible,
.woow-paso__enlace:hover,
.woow-paso__enlace:focus-visible {
  color: var(--woow-tinta);
}

@media (min-width: 40rem) {
  .woow-paso__linea {
    grid-template-columns: 5rem 1fr auto auto;
    grid-template-areas: "foto datos cantidad cierre";
    align-items: center;
  }

  .woow-paso__linea-cierre {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- totales ---------- */

.woow-paso__totales {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-crema);
}

.woow-paso__totales p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.95rem;
}

.woow-paso__totales strong {
  font-variant-numeric: tabular-nums;
}

.woow-paso__total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--woow-linea);
  font-size: 1.05rem;
  font-weight: 700;
}

.woow-paso__cobrable strong {
  color: #1d6b3f;
}

/* ---------- mandos ---------- */

.woow-paso__mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.woow-paso__mandos form {
  margin: 0;
}

.woow-paso__continuar,
.woow-paso__enviar {
  min-width: 14rem;
}

/* ---------- acceso ---------- */

.woow-paso__puertas {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .woow-paso__puertas {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.woow-paso__puerta {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-blanco);
}

.woow-paso__puerta h2 {
  margin: 0;
  font-size: 1.15rem;
}

.woow-paso__puerta form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
}

.woow-paso__campo {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  font-size: 0.9rem;
}

.woow-paso__campo > span {
  font-weight: 600;
}

.woow-paso__campo em {
  font-style: normal;
  font-weight: 400;
  color: var(--woow-gris);
}

.woow-paso__campo input {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1.5px solid var(--woow-linea);
  border-radius: 0.625rem;
  background: var(--woow-papel);
  color: var(--woow-tinta);
  font: inherit;
}

.woow-paso__campo input:focus-visible {
  border-color: var(--woow-tinta);
  outline: 2px solid var(--woow-amarillo);
  outline-offset: 1px;
}

.woow-paso__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.woow-paso__check input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
}

.woow-paso__o {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--woow-gris);
  font-size: 0.85rem;
}

.woow-paso__o::before,
.woow-paso__o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--woow-linea);
}

.woow-paso__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid var(--woow-tinta);
  border-radius: 0.625rem;
  background: var(--woow-blanco);
  color: var(--woow-tinta);
  font-weight: 600;
  text-decoration: none;
}

.woow-paso__google:hover,
.woow-paso__google:focus-visible {
  background: var(--woow-crema);
}

/* ---------- finalizar y confirmación ---------- */

.woow-paso__bloque {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-blanco);
}

.woow-paso__bloque h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--woow-gris);
}

.woow-paso__quien,
.woow-paso__evento {
  margin: 0;
}

.woow-paso__quien strong,
.woow-paso__evento strong {
  display: block;
  font-size: 1.05rem;
}

.woow-paso__quien span,
.woow-paso__evento span {
  display: inline-block;
  margin-right: 0.75rem;
  color: var(--woow-gris);
  font-size: 0.9rem;
}

.woow-paso__resumen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woow-paso__resumen li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.woow-paso__resumen-nombre em {
  font-style: normal;
  color: var(--woow-gris);
}

.woow-paso__resumen-nombre small {
  color: var(--woow-gris);
}

.woow-paso__resumen-importe {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.woow-paso__resultado {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woow-paso__resultado li {
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--woow-amarillo);
  border-radius: 0 var(--woow-radio-s) var(--woow-radio-s) 0;
  background: var(--woow-crema);
  line-height: 1.5;
}

.woow-paso__referencia {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.woow-paso__firma {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.woow-paso__firma span {
  color: var(--woow-gris);
  font-size: 0.9rem;
}

.woow-paso__salida {
  margin: 0;
}


/* =====================================================================
   CIERRE VISUAL DEL EMBUDO (2026-08-19)

   Lo que sigue no es un rediseño: es cerrar lo que ya existía. Tres
   defectos que la QA humana devolvió con nombre y apellidos —el carrito
   de escritorio estrecho y vacío, los dos mandos solapando el título de
   los pasos, y la puerta de acceso encogida— y una pasada de coherencia
   para que las siete superficies se sientan del mismo sistema.
   ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. EL ANCHO DE CADA PASO
 *
 * Había uno solo, 46 rem, para los cuatro. En la confirmación —un
 * párrafo y un botón— es correcto: leer una línea de 90 caracteres es
 * peor que leer una de 65. En el carrito era el defecto: una tabla con
 * totales al lado metida en 736 px, centrada en una pantalla de 1440,
 * con dos tercios de papel en blanco a los lados.
 *
 * Ahora cada paso pide lo suyo. La regla base sigue siendo una.
 * ------------------------------------------------------------------ */

/*
 * Y AQUI ESTABA LA CAUSA DE VERDAD DE «EL CARRITO ES DEMASIADO ESTRECHO».
 *
 * EL DEFECTO, MEDIDO
 * ---------------------------------------------------------------------
 * `.woow-store__layout` es una rejilla de DOS columnas a partir de 922 px:
 * `250px minmax(0, 1fr)`, menu de familias a la izquierda y contenido a la
 * derecha. En los pasos del embudo el menu NO se dibuja —son pantallas de
 * trabajo— asi que la rejilla se queda con un solo hijo. Y un solo hijo en
 * una rejilla de dos columnas cae en la PRIMERA.
 *
 * O sea: el carrito, el acceso, la revision y la confirmacion se dibujaban
 * en una columna de 250 px en cualquier pantalla de escritorio, con el
 * resto en blanco. Ensanchar el contenedor no arreglaba nada, porque el
 * contenedor no era lo que apretaba.
 *
 * Es exactamente lo que devolvio la QA humana —«demasiado estrecha, mucho
 * espacio vacio, elementos pequenos»— y no se veia en el arnes porque el
 * arnes no dibujaba estas pantallas con contenido dentro.
 *
 * Sin menu al lado no hay dos columnas que repartir: bloque.
 */
.woow-store__wrap--paso .woow-store__layout {
  display: block;
}

.woow-store__wrap--paso {
  max-width: 46rem;
}

/* El carrito: dos columnas de verdad a partir de 62 rem. */
.woow-store__wrap--paso-carrito {
  max-width: 74rem;
}

/* El acceso: dos puertas una al lado de la otra sin apretarlas. */
.woow-store__wrap--paso-acceso {
  max-width: 64rem;
}

/* La revisión enseña la selección otra vez, así que necesita más que un
   párrafo y menos que una tabla editable. */
.woow-store__wrap--paso-finalizar {
  max-width: 56rem;
}

/* ---------------------------------------------------------------------
 * 2. LOS DOS MANDOS NO PISAN EL TÍTULO DEL PASO
 *
 * EL DEFECTO QUE ESTO CIERRA
 * ---------------------------------------------------------------------
 * A partir de 768 px la pareja de mandos vuelve al flujo y un margen
 * inferior negativo de 3,25 rem —su alto exacto— devuelve el hueco que
 * ocupa. Eso los pone a la altura de la primera línea de contenido, que
 * es lo que se busca.
 *
 * En el catálogo hay una regla que aparta el texto: `.woow-store__cabecera`
 * reserva 8 rem a la derecha. En los pasos del embudo NO HAY cabecera:
 * lo primero es la miga de pan y justo debajo el `h1`, que puede llegar a
 * 2,4 rem y ocupa todo el ancho. Los dos círculos caían encima.
 *
 * Se reserva el mismo sitio en las dos piezas que viven en esa banda. No
 * se toca la posición de los mandos: se aparta lo que hay debajo, que es
 * lo que ya se hacía en el catálogo.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
  .woow-store.js .woow-paso__migas,
  .woow-store.js .woow-paso__titulo {
    padding-right: 8rem;
  }
}

/* ---------------------------------------------------------------------
 * 3. EL CARRITO EN ESCRITORIO: SELECCIÓN Y RESUMEN, LADO A LADO
 *
 * El orden del DOCUMENTO es selección primero, resumen después — que es
 * como se lee en un teléfono y como se recorre con el tabulador. La
 * rejilla lo coloca al lado sin mover una línea del marcado.
 *
 * El corte está en 62 rem y no en la anchura del contenedor: por debajo
 * de eso, dos columnas dejarían las líneas del carrito demasiado
 * estrechas para su foto, su nombre y sus mandos de cantidad.
 * ------------------------------------------------------------------ */

.woow-paso__carrito {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 62rem) {
  .woow-paso__carrito {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
    gap: 2rem;
  }
}

/*
 * LA CAJA DE RESUMEN.
 *
 * `position: sticky` sólo donde hay dos columnas: en una sola, pegar el
 * resumen a la ventana lo dejaría flotando sobre el listado en un
 * teléfono. `top` deja aire suficiente para que no toque el borde.
 */
.woow-paso__resumen-caja {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 1.25rem;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio);
  background: var(--woow-crema);
  box-shadow: var(--woow-sombra);
}

@media (min-width: 62rem) {
  .woow-paso__resumen-caja {
    position: sticky;
    top: 1.5rem;
  }
}

/*
 * DENTRO DE LA CAJA, LOS TOTALES PIERDEN SU PROPIO MARCO.
 *
 * `.woow-paso__totales` traía borde, fondo crema y radio: una tarjeta
 * dentro de otra tarjeta del mismo color, con dos líneas separándolas a
 * 1 px de distancia. Aquí es sólo la lista de cifras.
 */
.woow-paso__resumen-caja .woow-paso__totales {
  padding: 0;
  border: 0;
  background: none;
}

/* En la caja los mandos se apilan: hay 21 rem, no una fila entera. */
.woow-paso__resumen-caja .woow-paso__mandos {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.woow-paso__resumen-caja .woow-paso__continuar {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.woow-paso__resumen-caja .woow-paso__enlace {
  text-align: center;
}

/* ---------------------------------------------------------------------
 * 4. EL PASO DEL EVENTO, AHORA QUE VIVE EN UNA PANTALLA COMPLETA
 *
 * Los mismos dos campos que estaban en el cajón, con el sitio que les
 * corresponde: un título de verdad, la explicación de por qué se
 * preguntan y dos campos que caben uno al lado del otro.
 * ------------------------------------------------------------------ */

.woow-paso__evento-paso {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 2px solid var(--woow-tinta);
  border-radius: var(--woow-radio);
  background: var(--woow-blanco);
}

.woow-paso__evento-que {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}

.woow-paso__evento-que span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--woow-gris);
}

.woow-paso__evento-que strong {
  font-size: 1.15rem;
  line-height: 1.25;
}

.woow-paso__evento-titulo {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.woow-paso__evento-texto {
  margin: 0;
  max-width: 46rem;
  font-size: 0.95rem;
  color: var(--woow-gris);
  line-height: 1.5;
}

.woow-paso__evento-form {
  display: grid;
  gap: 0.875rem;
  margin: 0.25rem 0 0;
}

@media (min-width: 40rem) {
  .woow-paso__evento-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  /* Los mandos ocupan la fila entera debajo de los dos campos. */
  .woow-paso__evento-mandos {
    grid-column: 1 / -1;
  }
}

/* El desplegable comparte forma con los campos de texto del acceso: dos
   controles del mismo formulario no pueden parecer de dos sistemas. */
.woow-paso__campo select {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1.5px solid var(--woow-linea);
  border-radius: 0.625rem;
  background: var(--woow-papel);
  color: var(--woow-tinta);
  font: inherit;
}

.woow-paso__campo select:focus-visible {
  border-color: var(--woow-tinta);
  outline: 2px solid var(--woow-amarillo);
  outline-offset: 1px;
}

.woow-paso__evento-mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ---------------------------------------------------------------------
 * 5. LA PUERTA DE ACCESO
 *
 * No cambia ni una decisión de autenticación: cambia el sitio que ocupa.
 * Las dos puertas eran dos tarjetas de 1,25 rem de relleno en un
 * contenedor de 46 rem, o sea dos columnas de 21 rem con seis campos
 * dentro. Se veían pequeñas y técnicas porque LO ERAN.
 * ------------------------------------------------------------------ */

.woow-paso__puerta {
  padding: 1.5rem;
  border-radius: var(--woow-radio);
}

@media (min-width: 48rem) {
  .woow-paso__puertas {
    gap: 1.5rem;
  }
}

/*
 * LA PUERTA DE ENTRAR LLEVA EL PESO.
 *
 * Las dos eran idénticas: mismo borde, mismo fondo, mismo todo. Con dos
 * caminos igual de marcados, quien ya tiene cuenta tiene que leerse los
 * dos para saber cuál es el suyo. El primero es el de siempre —volver—,
 * así que se marca con el aro de tinta, y el segundo se queda en su
 * línea fina.
 */
.woow-paso__puerta:first-child {
  border: 2px solid var(--woow-tinta);
}

.woow-paso__puerta h2 {
  font-size: 1.3rem;
  line-height: 1.2;
}

.woow-paso__puerta-texto {
  margin: 0;
  color: var(--woow-gris);
  font-size: 0.95rem;
  line-height: 1.5;
}

/*
 * LA ENTRADILLA. Ancho de lectura, no ancho de contenedor: con 64 rem de
 * caja, una línea de texto corrido llegaría a 120 caracteres y se lee
 * peor que una de 65.
 */
.woow-paso__entradilla {
  margin: 0;
  max-width: 38rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--woow-gris);
}

/* El botón de cada puerta ocupa su ancho: en dos columnas, un botón que
   mide lo que mide su texto queda flotando en medio del vacío. */
.woow-paso__puerta .woow-store__btn {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* ---------------------------------------------------------------------
 * 6. COHERENCIA — la misma forma en las siete superficies
 *
 * Los pasos del embudo usaban `--woow-radio-s` (14 px) para sus tarjetas
 * mientras el catálogo usa `--woow-radio` (22 px) para las suyas. Es el
 * tipo de diferencia que nadie sabe nombrar y todo el mundo nota: dos
 * pantallas del mismo sitio con dos redondeos distintos.
 *
 * Las cajas grandes —las que contienen una sección— pasan al radio
 * grande. Los controles pequeños —campos, botones de cantidad— se quedan
 * con el suyo: un campo de texto con 22 px de radio parece una pastilla.
 * ------------------------------------------------------------------ */

.woow-paso__bloque,
.woow-paso__totales {
  border-radius: var(--woow-radio);
}

.woow-paso__aviso,
.woow-paso__error {
  border-radius: var(--woow-radio-s);
}

/*
 * EL AVISO DE PRECIO CAMBIADO.
 *
 * Segundo plano —no compite con el importe de hoy, que es el que manda—
 * pero legible: el gris de la paleta sobre el blanco de la línea da
 * 4,9:1. Un aviso de dinero por debajo de 4,5:1 sería un aviso que se
 * puede no ver.
 *
 * A la derecha sólo cuando la línea es horizontal: ahí vive en la
 * columna del importe, y esa columna está alineada a la derecha para que
 * las cifras cuadren en vertical.
 */
.woow-paso__linea-antes {
  margin: 0.2rem 0 0;
  max-width: 16rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--woow-gris);
}

/*
 * EN EL TELÉFONO, EL AVISO SE LLEVA SU PROPIA LÍNEA.
 *
 * EL DEFECTO, VISTO A 390 px
 * ---------------------------------------------------------------------
 * La fila de cierre es `space-between` con tres cosas dentro: el importe,
 * este aviso y el botón de quitar. En un teléfono eso deja al importe
 * unos 70 px, y «440,00 € + IVA» se parte en TRES líneas — el número más
 * importante de la fila, roto en tres.
 *
 * Con `wrap` y base 100 %, el aviso baja entero y arriba quedan las dos
 * piezas que de verdad van en la misma línea: cuánto cuesta y cómo se
 * quita.
 *
 * El orden se escribe en las DOS anchuras a propósito: a partir de 40 rem
 * la fila se vuelve columna alineada a la derecha, y ahí el aviso tiene
 * que ir pegado a su importe, no debajo del botón.
 */
.woow-paso__linea-cierre {
  flex-wrap: wrap;
}

.woow-paso__linea-importe {
  order: 1;
}

.woow-paso__linea-cierre form {
  order: 2;
}

.woow-paso__linea-antes {
  order: 3;
  flex: 1 0 100%;
}

@media (min-width: 40rem) {
  .woow-paso__linea-antes {
    order: 2;
    flex: 0 0 auto;
    text-align: right;
  }

  .woow-paso__linea-cierre form {
    order: 3;
  }
}

.woow-paso__linea-antes s {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   PILOT-18 §21 — EL LOGOTIPO DE WooW SHOP EN LA PORTADA
   =====================================================================
   Alto fijo y ancho automático: el asset es el mismo PNG normalizado que
   usan la app y la Cuenta Web, y deformarlo para que «encaje» sería
   estropear la marca. En teléfono baja de 68 a 52 px para que el primer
   producto siga entrando en la primera pantalla, que es la regla que
   ordena esta página desde V04. */
.woow-store__logo {
    display: block;
    height: 68px;
    width: auto;
    max-width: 100%;
    margin: 0 0 4px;
}

@media (max-width: 640px) {
    .woow-store__logo {
        height: 52px;
    }
}

/* El título accesible de la portada: existe para el buscador y el lector
   de pantalla, no para la vista. `screen-reader-text` es la clase de
   WordPress, pero el tema puede no traerla: se declara aquí para no
   depender de ello. */
.woow-store__h1.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   WOOW SHOP — CATÁLOGO Y «MI PRESUPUESTO» (1.14, WEV-SHOP-FUNNEL-02)

   Lo que se añade para el catálogo que termina en presupuesto. Las reglas
   del carrito anterior se quedan donde estaban: no pintan nada porque su
   marcado ya no existe, y podarlas sería una optimización sin medida
   detrás (el cuello de botella medido era la espera al Core, no la hoja).
   ===================================================================== */

/* --- «Mi presupuesto (n)»: arriba a la derecha en escritorio ---------- */
.woow-mp {
  position: sticky;
  top: 14px;
  z-index: 40;
  height: 0;
  display: flex;
  justify-content: flex-end;
}
.woow-mp__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: var(--woow-negro);
  color: var(--woow-blanco);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.22);
}
.woow-mp__btn:hover,
.woow-mp__btn:focus-visible {
  color: var(--woow-blanco);
  outline: 2px solid var(--woow-amarillo);
  outline-offset: 2px;
}
.woow-mp__icono {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 4px;
  position: relative;
}
.woow-mp__icono::before,
.woow-mp__icono::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  background: currentColor;
}
.woow-mp__icono::before { top: 4px; }
.woow-mp__icono::after { top: 9px; }
/* El hueco del número está reservado: pasar de 0 a 12 no mueve nada. */
.woow-mp__num {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--woow-amarillo);
  color: var(--woow-negro);
  font-size: 14px;
  line-height: 32px;
  text-align: center;
}
.woow-mp__num--cero {
  background: #3a3a3a;
  color: var(--woow-blanco);
}

/* La confirmación de «añadido»: fija y fuera del flujo, no empuja nada. */
.woow-mp__aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--woow-negro);
  color: var(--woow-blanco);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.28);
}
.woow-mp__aviso[hidden] { display: none; }
.woow-mp__aviso a {
  color: var(--woow-amarillo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- la portada: título, grupos y secciones ------------------------- */
.woow-cat__cabecera {
  padding-right: 230px;
}
.woow-cat__cabecera .woow-store__logo {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}
.woow-cat__h1 {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.08;
  margin: 0 0 12px;
}
.woow-cat__intro {
  max-width: 44rem;
}
.woow-cat__grupos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.woow-cat__grupo-enlace {
  display: inline-block;
  padding: 9px 16px;
  border: 1.5px solid var(--woow-tinta);
  border-radius: 999px;
  color: var(--woow-tinta);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.woow-cat__grupo-enlace:hover,
.woow-cat__grupo-enlace:focus-visible {
  background: var(--woow-amarillo);
  border-color: var(--woow-amarillo);
  color: var(--woow-negro);
}
/* 1.26 (WOOW-SHOP-INTEGRACION-01): las tres landings, desde la portada. */
.woow-cat__landings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 16px;
  font-size: 14px;
}
.woow-cat__landings-t {
  color: var(--woow-gris-texto, #55575f);
}
.woow-cat__landing {
  color: var(--woow-tinta);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woow-cat__landing:hover,
.woow-cat__landing:focus-visible {
  color: var(--woow-negro);
  text-decoration-thickness: 2px;
}
.woow-cat__grupo {
  margin-top: 40px;
  scroll-margin-top: 90px;
}
.woow-cat__grupo-t {
  margin: 0 0 16px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1.15;
}

/* --- la tarjeta: familia en el cuerpo, detalle y el botón ----------- */
.woow-store__card-cuerpo .woow-store__card-familia {
  position: static;
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 0;
  background: none;
  backdrop-filter: none;
  color: var(--woow-gris);
}
.woow-store__card-detalle {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--woow-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woow-anadir {
  text-align: center;
}
.woow-anadir.is-anadido {
  background: var(--woow-blanco);
  box-shadow: inset 0 0 0 2px var(--woow-tinta);
}

/* --- el menú: los tres grupos --------------------------------------- */
.woow-store__aside-grupo {
  margin: 18px 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woow-store__aside-grupo a {
  color: var(--woow-gris);
  text-decoration: none;
}
.woow-store__aside-grupo a:hover {
  color: var(--woow-tinta);
}

/* --- la ficha: la landing propietaria ------------------------------- */
.woow-store__ficha-landing {
  margin: 14px 0 0;
  font-weight: 700;
}
.woow-store__ficha-landing a {
  color: var(--woow-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Mi presupuesto ------------------------------------------------- */
.woow-store__wrap--paso-presupuesto {
  max-width: 74rem;
}
.woow-store__wrap--paso-enviado {
  max-width: 46rem;
}
.woow-mp__pagina {
  display: grid;
  gap: 32px;
  margin-top: 8px;
}
.woow-mp__h2 {
  margin: 0 0 14px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}
.woow-mp__lineas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.woow-mp__linea {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-blanco);
}
.woow-mp__linea--revisar {
  border-color: #b3261e;
  background: #fff6f5;
}
.woow-mp__linea-foto {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--woow-crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.woow-mp__linea-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.woow-mp__linea-familia {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--woow-gris);
}
.woow-mp__linea-nombre {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}
.woow-mp__linea-nombre a {
  color: var(--woow-tinta);
  text-decoration: none;
}
.woow-mp__linea-motivo {
  margin: 4px 0 0;
  font-size: 13px;
  color: #8c1d18;
}
.woow-mp__quitar {
  margin: 0;
}
.woow-mp__mas {
  margin: 14px 0 0;
  font-weight: 700;
}
.woow-mp__mas a {
  color: var(--woow-tinta);
}
.woow-mp__entradilla {
  margin: 0 0 16px;
  color: var(--woow-gris);
}
.woow-mp__form {
  display: grid;
  gap: 14px;
}
.woow-mp__fila {
  display: grid;
  gap: 14px;
}
.woow-mp__form select,
.woow-mp__form textarea {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--woow-linea);
  border-radius: 0.625rem;
  background: var(--woow-papel);
  color: var(--woow-tinta);
  font: inherit;
}
.woow-mp__form textarea {
  resize: vertical;
}
.woow-mp__form [aria-invalid="true"] {
  border-color: #b3261e;
}
.woow-mp__form input[readonly] {
  background: var(--woow-crema);
}
.woow-paso__campo small {
  font-weight: 400;
  color: var(--woow-gris);
}
.woow-mp__campo-error {
  font-size: 13px;
  font-weight: 600;
  color: #8c1d18;
}
.woow-mp__nota-campo {
  color: var(--woow-gris);
}
.woow-mp__acepta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.woow-mp__acepta input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
}
.woow-mp__enviar {
  width: 100%;
  margin-top: 6px;
}
.woow-mp__enviar.is-cargando {
  opacity: 0.72;
  cursor: progress;
}
.woow-mp__pie {
  margin: 0;
  font-size: 13px;
  color: var(--woow-gris);
  text-align: center;
}
/* El campo trampa: fuera de la pantalla, fuera del teclado. */
.woow-mp__trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.woow-mp__confirmar,
.woow-mp__cuenta {
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid var(--woow-linea);
  border-radius: var(--woow-radio-s);
  background: var(--woow-blanco);
}
.woow-mp__confirmar form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.woow-mp__referencia {
  margin: 0 0 12px;
  font-size: 18px;
}
.woow-mp__referencia strong {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.woow-mp__cuenta {
  margin-top: 32px;
  background: var(--woow-crema);
}

@media (min-width: 600px) {
  .woow-mp__fila {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .woow-mp__pagina {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
  .woow-mp__datos {
    padding: 22px 24px;
    border: 1px solid var(--woow-linea);
    border-radius: var(--woow-radio);
    background: var(--woow-blanco);
  }
}

/* --- teléfono: «Mi presupuesto» abajo a la IZQUIERDA ------------------
   Abajo a la derecha vive el botón de WhatsApp del sitio (joinchat). */
@media (max-width: 921px) {
  .woow-mp {
    position: fixed;
    top: auto;
    left: 14px;
    bottom: 16px;
    height: auto;
    justify-content: flex-start;
  }
  .woow-mp__aviso {
    bottom: 84px;
  }
  .woow-cat__cabecera {
    padding-right: 0;
  }
}
@media (max-width: 560px) {
  .woow-mp__btn {
    height: 46px;
    font-size: 12px;
  }
  .woow-mp__linea {
    grid-template-columns: 52px 1fr;
  }
  .woow-mp__linea-foto {
    width: 52px;
    height: 52px;
  }
  .woow-mp__quitar {
    grid-column: 2;
  }
}

/* ---------------------------------------------------------------------
   1.15 · MODALIDADES (WEV-SHOP-VARIANTS-03)
   Las variantes del Core se eligen en la ficha (radios) y se cambian en
   Mi presupuesto (selector). Elegir es opcional.
   --------------------------------------------------------------------- */
.woow-store__variantes {
  margin: 20px 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.woow-store__variantes legend {
  padding: 0;
  margin: 0 0 10px;
}
.woow-store__variante {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  margin: 0 0 8px;
  border: 1px solid var(--woow-linea);
  border-radius: 14px;
  background: var(--woow-blanco);
  font-size: 15px;
  cursor: pointer;
}
.woow-store__variante input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--woow-negro);
  flex: none;
}
.woow-store__variante span {
  flex: 1;
}
.woow-store__variante:has(input:checked) {
  border-color: var(--woow-negro);
  box-shadow: inset 0 0 0 1px var(--woow-negro);
}
.woow-store__variante:has(input:focus-visible) {
  outline: 2px solid var(--woow-negro);
  outline-offset: 2px;
}
.woow-store__variantes-nota {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--woow-gris);
}
.woow-mp__variante {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 14px;
}
.woow-mp__variante span {
  color: var(--woow-gris);
}
.woow-mp__variante select {
  min-height: 40px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--woow-linea);
  border-radius: 10px;
  background: var(--woow-blanco);
  font: inherit;
}