/* FooterWan: estilos compartidos y variantes por ruta. Orden de cascada conservado. */

/* --------------------------------------------------------------------------
 * El pie
 *
 * Se lee de arriba abajo en tres tiempos: quién es WAN y dónde seguirla, el
 * mapa del sitio en cuatro columnas, y la letra pequeña. Todo sobre un mismo
 * eje central, que es como abren las demás páginas de la casa —cobertura,
 * Familia, privacidad— y hasta ahora el pie era el único sitio que no.
 *
 * De tipografías hay tres y cada una tiene un trabajo: el serif es la marca y
 * solo aparece en el emblema; la monoespaciada en versalitas rotula secciones
 * y firma la letra legal; y la de texto es la de los enlaces. Antes los
 * rótulos iban a 0,52 rem y los enlaces a 0,7: casi el mismo cuerpo, así que
 * no había jerarquía y el pie se leía como una lista sin encabezar.
 * ------------------------------------------------------------------------ */

.wan-footer {
  position: relative;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(7, 32, 28, 0.98), rgba(3, 22, 19, 0.995)),
    #041916;
  padding: clamp(36px, 4vw, 50px) 0 18px;
}

/*
 * La costura.
 *
 * Era una raya de oro de borde a borde, y una raya así no cierra la página:
 * la corta. Ahora el hilo nace y muere en nada, se abre en el centro y en esa
 * abertura se posa una gota de lacre. Es la única licencia del pie y es la de
 * la casa: el hexágono del panal, que ya rotula las cifras de la portada y la
 * firma del quiz.
 */
.wan-footer-costura {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(213, 161, 58, 0.34) 16%,
    rgba(242, 204, 107, 0.62) 44%,
    transparent 46.5%,
    transparent 53.5%,
    rgba(242, 204, 107, 0.62) 56%,
    rgba(213, 161, 58, 0.34) 84%,
    transparent
  );
}

.wan-footer-costura::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 12.5px;
  background: linear-gradient(160deg, #ffe6a6, #f2cc6b 45%, #c9922c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 18px rgba(242, 204, 107, 0.5);
  transform: translate(-50%, -50%);
}

.wan-footer-ancho {
  position: relative;
  width: min(calc(100% - 40px), 1180px);
  margin-inline: auto;
}

/* ── La corona: quién es WAN y dónde seguirla ───────────────────────────── */

.wan-footer-corona {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(24px, 2.8vw, 34px);
}

.wan-footer-corona > p {
  max-width: 56ch;
  justify-self: center;
  font-size: 0.78rem;
  line-height: 1.75;
  text-align: center;
  color: rgba(224, 235, 230, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

/*
 * Las redes: bolas de oro macizas con la forma dentro.
 *
 * Macizas y no perfiladas, porque en un pie casi negro un círculo de línea
 * fina desaparece, y esto es lo único a lo que se puede seguir a WAN fuera de
 * la web. El halo es el mismo recurso del emblema de la cabecera: la bola no
 * está pegada al fondo, está encendida sobre él.
 */
.wan-footer-redes {
  display: flex;
  align-items: center;
  gap: 13px;
}

.wan-footer-redes a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #ffe6a6, #f2cc6b 42%, #c9922c);
  color: #0b0906;
  box-shadow:
    0 10px 24px -8px rgba(242, 204, 107, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.5);
  transition: transform 190ms ease, box-shadow 190ms ease;
}

.wan-footer-redes svg {
  display: block;
}

/*
 * El color va repetido aquí a propósito. La forma de dentro hereda el color
 * del redondel, así que cualquier regla que pinte los enlaces del pie al pasar
 * el ratón se llevaría también la f: quedaba crema sobre oro y la bola parecía
 * vaciarse al acercar el cursor.
 */
.wan-footer-redes a:is(:hover, :focus-visible) {
  transform: translateY(-3px);
  color: #0b0906;
  box-shadow:
    0 16px 30px -8px rgba(242, 204, 107, 0.72),
    inset 0 1px rgba(255, 255, 255, 0.5);
}

/* ── Las cuatro columnas ────────────────────────────────────────────────── */

.wan-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: clamp(26px, 3.4vw, 46px);
  border-top: 1px solid rgba(76, 139, 126, 0.17);
  padding-block: clamp(25px, 2.8vw, 34px) clamp(24px, 2.6vw, 32px);
}

.wan-footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-align: center;
}

.wan-footer h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-bottom: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--color-miel);
}

/* La rayita bajo el rótulo dice dónde empieza cada columna sin gritar. */
.wan-footer h2::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 204, 107, 0.6), transparent);
}

.wan-footer-grid :is(a, span) {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(224, 235, 230, var(--wan-opacidad-lectura-min));
}

/*
 * Todos los enlaces del pie se subrayan igual: la raya no está puesta, aparece
 * al pasar el ratón, al llegar con el tabulador y mientras el dedo mantiene
 * pulsado. Reservada del mismo grosor para que al encenderse no mueva nada.
 */
.wan-footer-grid a {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 170ms ease, border-bottom-color 170ms ease;
}

.wan-footer-grid a:is(:hover, :focus-visible) {
  border-bottom-color: rgba(242, 204, 107, 0.72);
  color: var(--color-miel-clara);
}

.wan-footer-telefono {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem !important;
  font-weight: 750;
  letter-spacing: 0.035em;
  color: #f6efe0 !important;
}

/* Quién es el número, en versalitas de miel: rótulo, no otro renglón más. */
.wan-footer-telefono small {
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--color-miel);
}

.wan-footer-correo {
  white-space: nowrap;
  color: rgba(246, 239, 224, 0.78) !important;
}

:is(.wan-footer-telefono, .wan-footer-correo):is(:hover, :focus-visible) {
  color: #f2cc6b !important;
}

/* ── La letra pequeña ───────────────────────────────────────────────────── */

/*
 * El cierre. La raya que lo abre es la misma que la costura de arriba —nace y
 * muere en nada— para que el pie empiece y acabe con el mismo gesto; esta va
 * sin la gota, que es de la de arriba y solo hay una.
 */
.wan-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
  padding: 19px 0 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(0.56rem, 0.68vw, 0.63rem);
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 235, 230, var(--wan-opacidad-rotulo-min));
}

.wan-footer-legal::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  margin-top: -21px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(213, 161, 58, 0.26) 22%,
    rgba(213, 161, 58, 0.26) 78%,
    transparent
  );
}

.wan-footer-legal > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

/* El Libro conserva un lugar propio, pero como sello y no como otra franja. */
.wan-footer-reclamo {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 clamp(24px, 2.6vw, 32px);
}

/* Una ficha legal breve, alineada al mapa del sitio y legible de un vistazo. */
.wan-footer-libro {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(242, 204, 107, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(213, 161, 58, 0.1), transparent 48%),
    rgba(14, 11, 7, 0.82);
  padding: 6px 9px 6px 7px;
  color: var(--color-miel-clara);
  box-shadow:
    0 12px 24px -18px rgba(224, 165, 56, 0.38),
    inset 0 1px rgba(255, 231, 166, 0.09);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 220ms ease;
}

.wan-footer-libro::before {
  content: "";
  width: 1px;
  height: 18px;
  order: 2;
  background: rgba(242, 204, 107, 0.2);
}

.wan-footer-libro::after {
  content: none;
}

.wan-footer-libro-icono {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 6px;
  background: rgba(242, 204, 107, 0.1);
  color: var(--color-miel-clara);
  transition: background 180ms ease, color 180ms ease, transform 220ms ease;
}

.wan-footer-libro-icono svg { width: 21px; height: 21px; }

.wan-footer-libro-texto {
  display: contents;
  min-width: 0;
}

.wan-footer-libro-texto strong {
  order: 1;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #f8efd9;
  transition: color 180ms ease;
}

.wan-footer-libro-texto small {
  order: 3;
  font-size: var(--wan-texto-minimo);
  line-height: 1;
  white-space: nowrap;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
}

.wan-footer-libro-accion {
  order: 4;
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 50%;
  background: rgba(242, 204, 107, 0.07);
  color: rgba(242, 204, 107, 0.78);
}

.wan-footer-libro-accion b {
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.wan-footer-libro:is(:hover, :focus-visible) {
  border-color: rgba(255, 224, 142, 0.78);
  transform: translateX(3px);
  box-shadow:
    0 14px 26px -18px rgba(224, 165, 56, 0.5),
    inset 0 1px rgba(255, 231, 166, 0.14);
}

.wan-footer-libro:is(:hover, :focus-visible) .wan-footer-libro-icono {
  background: linear-gradient(150deg, #f6ce6a, #b87c24);
  color: #130e07;
  transform: rotate(-3deg);
}

.wan-footer-libro:is(:hover, :focus-visible) .wan-footer-libro-accion b { transform: translateX(3px); }

.wan-footer-libro:focus-visible {
  outline: 2px solid var(--color-miel-clara);
  outline-offset: 4px;
}

/* Quien hizo la página, al otro extremo del cierre y sin levantar la voz. */
.wan-footer-autor a {
  border-bottom: 1px solid transparent;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  transition: border-bottom-color 170ms ease, color 170ms ease;
}

.wan-footer-autor a:is(:hover, :focus-visible) {
  border-bottom-color: rgba(242, 204, 107, 0.7);
  color: var(--color-miel-clara);
}

@media (max-width: 900px) {
  .wan-footer-corona { gap: 22px; }

  .wan-footer-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 760px) {

  .wan-footer-ancho { width: min(calc(100% - 28px), 620px); }

  .wan-footer-corona {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    padding-bottom: 24px;
    text-align: center;
  }

  .wan-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }

  .wan-footer-corona > p { font-size: 0.75rem; }

  .wan-footer-reclamo { padding-bottom: 24px; }

  .wan-footer-legal {
    min-height: 0;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 6px;
    font-size: var(--wan-texto-minimo);
    text-align: center;
  }

  .wan-footer-legal > p { justify-content: center; }

}

@media (max-width: 430px) {
  /* Se quedan en dos: cuatro secciones en una sola columna convierten el pie
     en una página entera de pura lista. */
  .wan-footer-grid { gap: 26px 14px; }
  .wan-footer-legal > div { flex-wrap: wrap; justify-content: center; }
  .wan-footer-redes a { width: 37px; height: 37px; }

  .wan-footer-libro {
    min-height: 44px;
    gap: 7px;
    padding: 5px 7px 5px 6px;
  }

  .wan-footer-libro-icono { width: 31px; height: 31px; flex-basis: 31px; }
  .wan-footer-libro-icono svg { width: 19px; height: 19px; }
  .wan-footer-libro-texto strong { font-size: var(--wan-texto-minimo); letter-spacing: 0.06em; }
  .wan-footer-libro-texto small { font-size: var(--wan-texto-minimo); }
  .wan-footer-libro-accion { width: 21px; height: 21px; flex-basis: 21px; }
  .wan-footer-libro-accion b { font-size: 0.78rem; }
}

/* Descubre tu miel: una sola cámara jade iluminada, de borde a borde. */

/* Panal de día: el cambio de temperatura da aire, pero conserva los recortes,
   las gotas y el dibujo hexagonal de WAN. */

/* Preguntas sobre salvia: lectura oscura, cofres claros y el contacto jade
   como bisagra antes del pie. */

body[data-vista-wan="portada"] .wan-footer {
  border-top: 3px solid #d7a13d;
  background:
    radial-gradient(circle at 12% 0, rgba(34, 92, 79, 0.42), transparent 34%),
    linear-gradient(180deg, #082c26, #041c18 72%);
}

/* ── El panal de familias también se vuelve nocturno ─────────────── */

/* ── Preguntas: cofres negros en vez de tarjetas claras ──────────── */

body[data-vista-wan="portada"] .wan-footer {
  border-top-color: var(--inicio-oro);
  background:
    radial-gradient(circle at 12% 0, rgba(213, 161, 58, 0.085), transparent 34%),
    linear-gradient(180deg, #0b0906, #020202 72%);
}

/* Catálogo: vitrina negra, marcos de miel y ninguna superficie jade. */

/* Cobertura: el oro conserva la jerarquía funcional del mapa. */

/* Familia: el formulario y sus cofres usan el mismo estuche negro de Inicio. */

/* Pie negro y número directo del asesor. */
body .wan-footer,
body[data-vista-wan="portada"] .wan-footer {
  border-top: 0;
  background:
    linear-gradient(180deg, rgba(1, 1, 1, 0.18), rgba(2, 2, 2, 0.5) 55%, rgba(1, 1, 1, 0.9)),
    url("/identidad/footer-miel-wan-v2.webp") center / cover no-repeat,
    #020202;
}

.wan-footer-grid { border-top-color: rgba(213, 161, 58, 0.22); }


/* La costura, en oro sobre el negro. */
.wan-footer-costura {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(213, 161, 58, 0.4) 16%,
    rgba(242, 204, 107, 0.72) 44%,
    transparent 46.5%,
    transparent 53.5%,
    rgba(242, 204, 107, 0.72) 56%,
    rgba(213, 161, 58, 0.4) 84%,
    transparent
  );
}

/* ===========================================================================
 * Página individual de fragancia · SPEC 05
 * Una ficha aromática abierta sobre ónix: misma gramática WAN, sin modal.
 * ======================================================================== */

/* ── Las formas de pago, dentro de Legal ─────────────────────────────────
 *
 * Cierran la columna que contiene las condiciones de compra y aprovechan su
 * aire inferior. Contacto queda reservado para las vías por las que responde
 * la tienda; Yape y Plin se reconocen como sellos, no como otro enlace.
 *
 * Van como sellos y no como lista con explicación: esto no se lee, se
 * reconoce. Dos colores y dos nombres bastan.
 */
.wan-footer-reclamo {
  flex-wrap: wrap;
  align-items: center;
}

.wan-footer-pagos {
  display: grid;
  gap: 9px;
  justify-items: center;
  /* Un respiro para que no se lea como una línea más de la columna. */
  margin-top: 9px;
}

.wan-footer-pagos > small {
  font-family: var(--font-sans);
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-miel);
}

.wan-footer-pagos ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wan-footer-pagos li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 15px 7px 11px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  /* Un filo claro por dentro: sobre el negro del pie, el color plano se ve
     pegado, y esto lo levanta como una pastilla de verdad. */
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

.wan-footer-pagos svg {
  width: 17px;
  height: 17px;
  flex: none;
}



/* ── El pie, después del repaso ─────────────────────────────────────────────
 *
 * Tres arreglos que vienen de mirarlo en el navegador: el emblema ahora lleva
 * a Inicio, el libro y las formas de pago dejan de estar en dos extremos del
 * mismo renglón, y la burbuja de WhatsApp se aparta de la última línea.
 */

/* El emblema es un enlace y tiene que parecerlo al tabular. */
.wan-footer-marca {
  display: inline-flex;
  border-radius: 14px;
  transition: opacity 180ms ease;
}

.wan-footer-marca:hover { opacity: 0.86; }

.wan-footer-marca:focus-visible {
  outline: 3px solid var(--color-miel-clara);
  outline-offset: 6px;
}

/* El libro se queda solo en su renglón, alineado con el resto del pie. */
.wan-footer-reclamo { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .wan-footer-marca { transition: none; }
}

/* --------------------------------------------------------------------------
 * Pie WAN · caída de miel
 *
 * La fotografía generada vive como atmósfera y no como contenido: el velo
 * conserva el contraste, mientras la frase central ocupa exactamente el eje
 * de la caída. El mapa del sitio se agrupa en una sola bandeja de vidrio para
 * dejar de parecer cuatro listas sueltas.
 * ------------------------------------------------------------------------ */
.wan-footer {
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(30px, 3.2vw, 46px);
}

.wan-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48) 35% 65%, rgba(0, 0, 0, 0.08)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0.68));
  pointer-events: none;
}

.wan-footer-ancho,
.wan-footer-costura {
  z-index: 1;
}

/* El pie es compartido, pero no tiene por qué entrar igual desde todas las
   páginas. Este velo recupera el fondo del último capítulo de cada ruta y lo
   entrega lentamente a la fotografía de miel del footer. */
.wan-footer-transicion {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  height: clamp(118px, 11vw, 172px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(1, 1, 1, 0.38) 55%, #020202 100%),
    var(--wan-footer-puente) var(--wan-footer-puente-posicion, center bottom) /
      var(--wan-footer-puente-tamano, cover) var(--wan-footer-puente-repeticion, no-repeat);
  -webkit-mask-image: linear-gradient(180deg, #000 0 58%, rgba(0, 0, 0, 0.68) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 58%, rgba(0, 0, 0, 0.68) 76%, transparent 100%);
  pointer-events: none;
}

.wan-footer[data-variante] .wan-footer-transicion { display: block; }

.wan-footer[data-variante="inicio"] {
  --wan-footer-puente: url("/identidad/faq-miel-ambar-wan-v1.webp");
  --wan-footer-puente-posicion: center 88%;
}

.wan-footer[data-variante="catalogo"] {
  --wan-footer-puente: url("/identidad/catalogowan-continuacion.webp");
  --wan-footer-puente-posicion: center 78%;
  background:
    linear-gradient(180deg, rgba(6, 6, 8, 0.02), rgba(2, 2, 2, 0.36) 20%, rgba(1, 1, 1, 0.84) 66%),
    url("/identidad/catalogowan-continuacion.webp") center top / 100% auto no-repeat,
    url("/identidad/footer-miel-wan-v2.webp") center / cover no-repeat,
    #020202;
}

.wan-footer[data-variante="catalogo"]::before {
  background:
    radial-gradient(circle at 9% 6%, rgba(213, 161, 58, 0.14), transparent 19%),
    radial-gradient(circle at 91% 8%, rgba(213, 161, 58, 0.11), transparent 18%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.7));
}

.wan-footer[data-variante="catalogo"] .wan-footer-transicion {
  height: clamp(148px, 14vw, 214px);
  opacity: 0.88;
}

.wan-footer[data-variante="cobertura"] {
  --wan-footer-puente: url("/identidad/cobertura-wan.webp");
  --wan-footer-puente-posicion: center 86%;
}

.wan-footer[data-variante="familia"] {
  --wan-footer-puente: url("/identidad/familia-wan-fondo.webp");
  --wan-footer-puente-posicion: center 78%;
}

/* Una firma breve sobre La casa WAN: el corte no atraviesa la pantalla y la
   luz se concentra alrededor del pequeño sello central. */
.wan-footer-costura {
  right: auto;
  left: 50%;
  width: min(520px, calc(100% - 48px));
  height: 8px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(176, 117, 27, 0.22) 12%,
    rgba(242, 204, 107, 0.64) 42%,
    transparent 47%,
    transparent 53%,
    rgba(242, 204, 107, 0.64) 58%,
    rgba(176, 117, 27, 0.22) 88%,
    transparent
  ) center / 100% 1px no-repeat;
  box-shadow: none;
  transform: translateX(-50%);
}

.wan-footer-costura::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 24%;
  left: 24%;
  height: 4px;
  background: radial-gradient(ellipse at center, rgba(255, 226, 148, 0.2), transparent 68%);
  filter: blur(2px);
}

.wan-footer-costura::after {
  width: 9px;
  height: 10px;
  box-shadow:
    0 0 0 3px rgba(242, 204, 107, 0.04),
    0 0 15px rgba(242, 204, 107, 0.5);
}

.wan-footer-corona {
  grid-template-columns: minmax(210px, 0.9fr) minmax(460px, 1.3fr) minmax(210px, 0.9fr);
  gap: clamp(20px, 2.7vw, 42px);
  min-height: 104px;
  padding-bottom: clamp(18px, 2vw, 26px);
}

.wan-footer-corona > p {
  display: grid;
  width: min(100%, 520px);
  max-width: none;
  justify-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 4px 0 6px;
  color: inherit;
  box-shadow: none;
  backdrop-filter: none;
}

.wan-footer-corona > p > span {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--wan-texto-minimo);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: #e4ad3f;
}

.wan-footer-corona > p > strong {
  font-family: var(--font-serif);
  font-size: clamp(1.14rem, 1.4vw, 1.38rem);
  font-weight: 600;
  line-height: 1.08;
  color: #fff6e4;
  text-wrap: balance;
}

.wan-footer-corona > p > small {
  max-width: 47ch;
  font-size: var(--wan-texto-minimo);
  line-height: 1.45;
  color: rgba(246, 239, 224, var(--wan-opacidad-lectura-min));
  text-wrap: pretty;
}

.wan-footer-grid {
  gap: clamp(18px, 2.5vw, 38px);
  border: 1px solid rgba(213, 161, 58, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(255, 237, 183, 0.045), transparent 30%),
    rgba(2, 2, 2, 0.62);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 3.2vw, 42px);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 239, 190, 0.07);
  backdrop-filter: blur(9px);
}

.wan-footer-grid > div:not(:last-child) {
  border-right: 1px solid rgba(213, 161, 58, 0.13);
  padding-right: clamp(12px, 2vw, 28px);
}

.wan-footer-reclamo {
  padding: 11px 0 9px;
}

.wan-footer-libro {
  min-height: 44px;
  background:
    linear-gradient(100deg, rgba(242, 204, 107, 0.13), transparent 56%),
    rgba(7, 6, 4, 0.86);
  box-shadow:
    0 10px 26px -18px rgba(242, 204, 107, 0.44),
    inset 0 1px rgba(255, 238, 188, 0.12);
}

.wan-footer-legal {
  min-height: 60px;
  margin-top: 8px;
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(90deg, transparent, rgba(213, 161, 58, 0.035) 18% 82%, transparent),
    linear-gradient(180deg, rgba(255, 229, 161, 0.055), rgba(0, 0, 0, 0.18));
  padding: 21px clamp(12px, 1.5vw, 18px) 12px;
  box-shadow: 0 -14px 34px rgba(213, 161, 58, 0.035);
}

.wan-footer-legal::before {
  top: 0;
  right: clamp(12px, 2vw, 24px);
  left: clamp(12px, 2vw, 24px);
  height: 2px;
  margin-top: 0;
  background: linear-gradient(90deg, transparent, rgba(213, 161, 58, 0.34) 14%, rgba(255, 226, 148, 0.66) 50%, rgba(213, 161, 58, 0.34) 86%, transparent);
  box-shadow: 0 5px 18px rgba(213, 161, 58, 0.12);
}

@media (max-width: 760px) {
  .wan-footer-transicion {
    height: 124px;
    background-position: center, var(--wan-footer-puente-posicion, center bottom);
  }

  .wan-footer-costura {
    width: min(240px, calc(100% - 56px));
  }

  body .wan-footer,
body[data-vista-wan="portada"] .wan-footer {
    background:
      linear-gradient(180deg, rgba(1, 1, 1, 0.18), rgba(2, 2, 2, 0.58) 48%, rgba(1, 1, 1, 0.94)),
      url("/identidad/footer-miel-wan-v2.webp") left top / auto 54% no-repeat,
      url("/identidad/footer-miel-wan-v2.webp") right bottom / auto 54% no-repeat,
      #020202;
  }

  .wan-footer::before {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.5) 28% 72%, rgba(0, 0, 0, 0.08)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28) 44%, rgba(0, 0, 0, 0.7));
  }

  .wan-footer[data-variante="catalogo"] {
    background:
      linear-gradient(180deg, rgba(6, 6, 8, 0.04), rgba(2, 2, 2, 0.48) 19%, rgba(1, 1, 1, 0.92) 64%),
      url("/identidad/catalogowan-continuacion.webp") 56% top / auto 360px no-repeat,
      url("/identidad/footer-miel-wan-v2.webp") left bottom / auto 58% no-repeat,
      #020202;
  }

  .wan-footer { padding-top: 28px; }

  .wan-footer-corona {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 12px;
    padding-bottom: 18px;
  }

  .wan-footer-corona > p {
    grid-row: 1;
    padding: 2px 10px 5px;
  }

  .wan-footer-marca { grid-row: 2; }
  .wan-footer-redes { grid-row: 3; }

  .wan-footer-grid {
    gap: 30px 14px;
    border-radius: 18px;
    padding: 26px 18px;
  }

  .wan-footer-grid > div:not(:last-child) {
    border-right: 0;
    padding-right: 0;
  }

  .wan-footer-reclamo {
    padding: 11px 0 9px;
  }

  .wan-footer-libro {
    display: grid;
    width: 100%;
    min-height: 64px;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    gap: 11px;
    padding: 9px 10px;
  }

  .wan-footer-libro::before { content: none; }

  .wan-footer-libro-texto {
    display: grid;
    min-width: 0;
    gap: 5px;
    text-align: left;
  }

  .wan-footer-libro-texto :is(strong, small) {
    order: initial;
    line-height: 1.25;
    white-space: normal;
  }

  .wan-footer-libro-texto strong { letter-spacing: 0.08em; }

  .wan-footer-libro-icono {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .wan-footer-libro-accion {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .wan-footer-legal {
    gap: 12px;
    margin-top: 6px;
    padding: 20px 12px 13px;
  }
}

/* --------------------------------------------------------------------------
 * El umbral: por dónde empieza el pie
 *
 * Hasta aquí el pie abría con un hilo corto y centrado, de 520 px, colgado en
 * mitad de una banda de fotografía donde no pasaba nada. En Inicio y en el
 * catálogo eso no separaba: los dos fondos son miel y el pie parecía la
 * continuación de la sección de arriba. En el quiz pasaba lo contrario y era
 * peor: la sección acaba en negro plano, la fotografía del pie entra de golpe
 * y el cambio se leía como un corte mal hecho, no como un final.
 *
 * El umbral hace de canto y se lee de arriba abajo en tres tiempos: la junta
 * —un filo casi negro que despega el oro de cualquier fotografía—, el hilo de
 * oro de borde a borde, y la luz cayendo hasta apagarse sobre la sombra que
 * apoya el pie. Del hilo cuelga el sello de lacre por un tallo de un píxel:
 * es el hexágono del panal, el mismo que rotula las cifras de la portada.
 *
 * Va con el velo de transición, no contra él. El velo sigue trayendo el fondo
 * del último capítulo de cada ruta, pero ahora entra por debajo de una tapa
 * que se ve: el campo de miel puede seguir siendo continuo mientras la junta
 * dice dónde acaba la página y empieza la casa.
 * ------------------------------------------------------------------------ */

.wan-footer {
  /* Sitio para el umbral: la corona empieza donde la luz ya se ha apagado. */
  padding-top: clamp(58px, 5.4vw, 84px);
}

.wan-footer-costura {
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  height: clamp(58px, 5.4vw, 82px);
  background:
    /* La luz que cae del filo. */
    radial-gradient(128% 100% at 50% 0, rgba(242, 204, 107, 0.12), transparent 64%),
    /* Y la sombra sobre la que apoya el pie. */
    linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.13) 44%, transparent 78%);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/*
 * La junta, el hilo y el tallo, en tres capas de un mismo pseudo-elemento.
 *
 * El filo oscuro va encima del oro y no debajo: sobre la miel de Inicio un
 * hilo dorado solo no se despega del fondo, y con la junta encima el borde se
 * lee entero aunque detrás pase la parte más clara de la fotografía.
 */
.wan-footer-costura::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 22px;
  filter: none;
  background:
    linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.88) 6% 94%, transparent) top / 100% 1px no-repeat,
    linear-gradient(
      90deg,
      transparent,
      rgba(213, 161, 58, 0.32) 7%,
      rgba(255, 226, 148, 0.92) 50%,
      rgba(213, 161, 58, 0.32) 93%,
      transparent
    ) 0 1px / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(242, 204, 107, 0.5), rgba(242, 204, 107, 0)) 50% 2px / 1px 13px no-repeat;
}

/*
 * El sello. Cuelga del hilo en vez de partirlo: una raya que se abre en el
 * centro deja de ser un borde y vuelve a ser un adorno, y lo que se le pide
 * al umbral es justo lo contrario.
 *
 * La sombra va por `filter` y no por `box-shadow` porque el hexágono está
 * recortado con `clip-path`, que se lleva por delante cualquier sombra de caja.
 */
.wan-footer-costura::after {
  top: 14px;
  width: 13px;
  height: 15px;
  background: linear-gradient(158deg, #ffe9b4, #f2cc6b 46%, #b8791f);
  box-shadow: none;
  filter:
    drop-shadow(0 0 9px rgba(242, 204, 107, 0.5))
    drop-shadow(0 3px 9px rgba(0, 0, 0, 0.55));
  transform: translateX(-50%);
}

/* El velo entra ya por debajo del umbral: si empezara en el filo, la parte
   más clara de la fotografía de arriba se comería la junta. */
.wan-footer-transicion {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14% 58%, rgba(0, 0, 0, 0.66) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14% 58%, rgba(0, 0, 0, 0.66) 78%, transparent 100%);
}

/*
 * El quiz también entrega su escenario.
 *
 * Era la única de las cinco rutas de la cabecera que llegaba al pie sin
 * puente, y se notaba más que en ninguna: su última sección acaba en negro
 * plano y la miel del pie aparecía de una línea a la siguiente. El puente es
 * la misma fotografía con la que se firma la ruta del quiz.
 */
.wan-footer[data-variante="quiz"] {
  --wan-footer-puente: url("/identidad/quiz-ruta-miel-wan-v1.webp");
  --wan-footer-puente-posicion: center 82%;
}

/* ── La corona, atada por dos hilos ──────────────────────────────────────
 *
 * El emblema, la frase y las redes eran tres cosas sueltas separadas por
 * sesenta píxeles de fotografía, y a esa distancia dejan de leerse como una
 * fila. Dos hilos verticales que nacen y mueren en nada —el mismo gesto del
 * umbral, en pequeño— las vuelven a coser sin encerrarlas en una caja.
 */
.wan-footer-corona {
  min-height: 96px;
}

.wan-footer-corona > p {
  padding-inline: clamp(20px, 2.8vw, 44px);
  background:
    linear-gradient(180deg, transparent, rgba(213, 161, 58, 0.34) 26% 74%, transparent)
      left center / 1px 64% no-repeat,
    linear-gradient(180deg, transparent, rgba(213, 161, 58, 0.34) 26% 74%, transparent)
      right center / 1px 64% no-repeat;
}

/* ── La bandeja del mapa del sitio ───────────────────────────────────────
 *
 * Mismo vidrio, mejor filo: una luz arriba que la levanta del fondo y unos
 * separadores que se apagan por los extremos, para que las cuatro columnas se
 * lean como una tabla y no como cuatro celdas con reja.
 */
.wan-footer-grid {
  border-color: rgba(213, 161, 58, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 237, 183, 0.055), transparent 20%),
    linear-gradient(115deg, rgba(255, 237, 183, 0.04), transparent 34%),
    rgba(2, 2, 2, 0.66);
  box-shadow:
    0 30px 74px rgba(0, 0, 0, 0.46),
    inset 0 1px rgba(255, 239, 190, 0.1);
}

.wan-footer-grid > div:not(:last-child) {
  border-right: 0;
  background: linear-gradient(180deg, transparent, rgba(213, 161, 58, 0.24) 15% 85%, transparent)
    right top / 1px 100% no-repeat;
}

/* El rótulo de cada columna, con la rayita algo más ancha y encendida: es lo
   que marca dónde empieza una lista y hasta ahora casi no se veía. */
.wan-footer h2::after {
  width: 34px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 148, 0.78), transparent);
}

/* ── El sello del libro y el cierre ──────────────────────────────────────
 *
 * El libro se quedaba solo en su renglón y parecía olvidado ahí. Sigue a la
 * izquierda —es un acceso legal, no una llamada—, pero con el mismo filo de
 * oro que ahora tiene el resto del pie para que se lea como parte de la casa.
 */
.wan-footer-libro {
  border-color: rgba(242, 204, 107, 0.4);
  box-shadow:
    0 12px 28px -18px rgba(242, 204, 107, 0.5),
    inset 0 1px rgba(255, 238, 188, 0.14);
}

/*
 * El sello ocupaba un tercio del renglón y los otros dos tercios eran
 * fotografía vacía, así que parecía un botón que alguien dejó suelto. El hilo
 * le da el resto del ancho sin darle importancia de más: sigue siendo un
 * acceso legal, pero ahora el renglón se lee entero de un lado al otro.
 */
.wan-footer-reclamo {
  gap: clamp(14px, 2vw, 26px);
}

.wan-footer-reclamo::after {
  content: "";
  height: 1px;
  flex: 1;
  min-width: 60px;
  background: linear-gradient(90deg, rgba(213, 161, 58, 0.3), rgba(213, 161, 58, 0.06) 62%, transparent);
}

.wan-footer-legal::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(213, 161, 58, 0.3) 12%,
    rgba(255, 226, 148, 0.72) 50%,
    rgba(213, 161, 58, 0.3) 88%,
    transparent
  );
}

@media (max-width: 760px) {
  /* En móvil el umbral se acorta: la misma junta, menos caída de luz. */
  .wan-footer { padding-top: 48px; }

  .wan-footer-costura {
    right: 0;
    left: 0;
    width: auto;
    height: 52px;
    transform: none;
  }

  /* Los hilos de la corona sobran en una sola columna: ahí ya no cosen nada. */
  .wan-footer-corona > p {
    padding-inline: 10px;
    background: none;
  }

  /*
   * En dos columnas el separador solo tiene sentido en la de la izquierda: si
   * lo llevan todas menos la última, el de la segunda cae sobre el borde de la
   * bandeja y parece que a la reja le falta un tramo.
   */
  .wan-footer-grid > div { background: none; }

  .wan-footer-grid > div:nth-child(odd) {
    background: linear-gradient(180deg, transparent, rgba(213, 161, 58, 0.2) 12% 88%, transparent)
      right top / 1px 100% no-repeat;
  }

  /* El correo es la línea más larga del pie y en 390 px no cabe en media
     bandeja: que parta por la arroba antes de salirse de la caja. */
  .wan-footer-correo {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* El sello ya ocupa el ancho entero: el hilo no tendría dónde ir. */
  .wan-footer-reclamo::after { content: none; }
}