/* ==========================================================================
   Wonder · Base, chrome y componentes
   Cada bloque de este archivo corresponde a un componente del comp
   aprobado. Lo que el comp no muestra, no está aquí.
   ========================================================================== */

/* --- Reinicio ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--wd-fuente);
  font-size: var(--wd-t-base);
  line-height: 1.5;
  color: var(--wd-texto);
  background: var(--wd-fondo);
  -webkit-font-smoothing: antialiased;
}

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

/* Los componentes de este prototipo se ocultan con la propiedad `hidden`.
   Sin esto, cualquier `display` declarado después la anula en silencio. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

/* El foco tiene que verse: se compra con teclado y con lector de pantalla. */
:focus-visible {
  outline: 3px solid var(--wd-amarillo-ui);
  outline-offset: 2px;
  border-radius: var(--wd-r-sm);
}

.wd-solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wd-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wd-amarillo-ui); color: var(--wd-navy);
  padding: var(--wd-e3) var(--wd-e5); font-weight: var(--wd-peso-bold);
}
.wd-saltar:focus { left: var(--wd-e4); top: var(--wd-e2); }

.wd-contenedor {
  width: 100%;
  max-width: var(--wd-ancho);
  margin-inline: auto;
  padding-inline: var(--wd-e5);
}

/* ==========================================================================
   Aviso de prototipo
   ========================================================================== */

.wd-aviso-demo {
  background: var(--wd-navy-medio);
  color: #fff;
  font-size: var(--wd-t-xs);
  text-align: center;
  padding: var(--wd-e2) var(--wd-e4);
}
.wd-aviso-demo strong { color: var(--wd-amarillo); }

/* ==========================================================================
   Barra superior
   ========================================================================== */

.wd-superior {
  background: var(--wd-superficie);
  border-bottom: 1px solid var(--wd-borde);
}

.wd-superior__fila {
  display: flex;
  align-items: center;
  gap: var(--wd-e5);
  padding-block: var(--wd-e3);
}
/* Los tres bloques comparten altura, así sus bordes cuadran entre sí. */
.wd-logo,
.wd-buscador,
.wd-accion { height: var(--wd-alto-cabecera); }

.wd-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 78px;
  background: var(--wd-navy);
  border-radius: var(--wd-r);
  padding: var(--wd-e2);
}
/* `contain` en lugar de `height: auto`: con altura fija, dejar crecer la
   imagen por proporción la desbordaba por abajo. */
.wd-logo img { width: 100%; height: 100%; object-fit: contain; }

/* --- Buscador ------------------------------------------------------------ */

/* El comp dibuja un rectángulo redondeado, no una pastilla, y el botón de
   buscar es un bloque navy a toda altura pegado al borde derecho, no un
   disco flotando dentro. El `overflow: hidden` recorta ese bloque contra
   el radio del contenedor, así no hay que repetir radios en el hijo. */
.wd-buscador {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: var(--wd-superficie);
  border: 2px solid var(--wd-navy);
  border-radius: var(--wd-r);
  overflow: hidden;
}
.wd-buscador:focus-within { box-shadow: 0 0 0 3px rgba(248, 184, 27, 0.4); }

/* La flecha es propia, no la del navegador: la nativa se pega al borde y
   no hay forma de separarla. Con `appearance: none` se dibuja como imagen
   de fondo y su distancia al borde queda bajo control (16px). El fondo va
   en el tono hundido, que es lo que hace el comp: la zona de categoría se
   distingue del campo de texto. */
.wd-buscador__cat {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-right: 1px solid var(--wd-borde);
  background-color: var(--wd-pozo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23082b3e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--wd-e4) center;
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  padding-inline: var(--wd-e4) 2.5rem;
  cursor: pointer;
}
.wd-buscador__cat:hover { background-color: #eceff0; }

.wd-buscador__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: var(--wd-e3) var(--wd-e4);
  font-size: var(--wd-t-sm);
}
.wd-buscador__campo::placeholder { color: var(--wd-texto-tenue); }

.wd-buscador__enviar {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  background: var(--wd-navy);
  color: #fff;
}
.wd-buscador__enviar:hover { background: var(--wd-navy-hover); }
.wd-buscador__enviar:focus-visible { outline-offset: -3px; }

/* --- Acciones de cuenta -------------------------------------------------- */

.wd-acciones { display: flex; gap: var(--wd-e3); flex: none; }

.wd-accion {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  color: var(--wd-navy);
  padding: var(--wd-e1) var(--wd-e2);
  border-radius: var(--wd-r-sm);
}
.wd-accion:hover { background: var(--wd-pozo); }

/* Los iconos van en SVG de trazo y heredan el color por `currentColor`,
   así que basta con quitarles el hueco de línea base. */
.wd-icono { display: block; flex: none; }
/* Dentro de texto corrido el icono deja de ser bloque y se sienta sobre la
   línea base. */
.wd-btn .wd-icono,
.wd-resumen__nota .wd-icono { display: inline-block; vertical-align: -3px; }

.wd-accion__contador {
  position: absolute;
  top: -4px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--wd-rojo);
  color: #fff;
  font-size: 10px;
  font-weight: var(--wd-peso-bold);
  border-radius: var(--wd-r-full);
}

/* ==========================================================================
   Navegación principal
   ========================================================================== */

.wd-nav {
  background: var(--wd-navy);
  color: #fff;
  position: relative;
  z-index: 40;
}
.wd-nav__fila { display: flex; align-items: stretch; }

.wd-nav__todos {
  display: flex;
  align-items: center;
  gap: var(--wd-e2);
  background: var(--wd-amarillo-ui);
  color: var(--wd-navy);
  font-weight: var(--wd-peso-bold);
  font-size: var(--wd-t-sm);
  padding-inline: var(--wd-e5);
}
.wd-nav__todos:hover { background: var(--wd-amarillo); }

.wd-nav__lista { display: flex; align-items: stretch; }

.wd-nav__enlace {
  display: flex;
  align-items: center;
  gap: var(--wd-e1);
  padding: var(--wd-e3) var(--wd-e4);
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  white-space: nowrap;
}
.wd-nav__enlace:hover,
.wd-nav__enlace[aria-expanded="true"] { background: var(--wd-navy-medio); }
.wd-nav__enlace--destacado { color: var(--wd-amarillo); }

.wd-nav__sucursal {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--wd-e1);
  font-size: var(--wd-t-sm);
  color: #b6c3cc;
  padding-inline: var(--wd-e4);
}

/* --- Mega-menú ----------------------------------------------------------- */

.wd-mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--wd-superficie);
  color: var(--wd-texto);
  border-bottom: 3px solid var(--wd-amarillo-ui);
  box-shadow: var(--wd-sombra-alta);
}
.wd-mega[hidden] { display: none; }
.wd-mega__cuerpo { padding-block: var(--wd-e6); }

/* Cabecera, lista de secciones y sucursal solo existen en el cajón de
   móvil. En escritorio esa información ya está en la barra. */
.wd-mega__cab,
.wd-mega__secciones { display: none; }

.wd-mega__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wd-e8);
}
/* El resumen no muestra el triángulo del navegador: con `display: flex`
   desaparece el marcador y la fila se controla como cualquier otra. */
.wd-mega__resumen { display: flex; align-items: center; list-style: none; }
.wd-mega__resumen::-webkit-details-marker { display: none; }
.wd-mega__chevron { display: none; }

.wd-mega__titulo {
  flex: 1;
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  margin-bottom: var(--wd-e3);
  padding-bottom: var(--wd-e2);
  border-bottom: 2px solid var(--wd-amarillo-ui);
}
.wd-mega__enlace {
  display: block;
  font-size: var(--wd-t-sm);
  color: var(--wd-texto-medio);
  padding-block: var(--wd-e1);
}
.wd-mega__enlace:hover { color: var(--wd-navy); text-decoration: underline; }
/* En escritorio la columna entera ya es el departamento: el «Ver todo»
   sobra y solo añadiría ruido. */
.wd-mega__enlace--todo { display: none; }

/* ==========================================================================
   Ticker promocional
   ========================================================================== */

.wd-promo {
  background: var(--wd-rojo);
  color: #fff;
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
}
.wd-promo__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--wd-e2);
  padding-block: var(--wd-e2);
  text-align: center;
}
.wd-promo__pastilla {
  background: var(--wd-rojo-oscuro);
  border-radius: var(--wd-r-sm);
  padding: 1px var(--wd-e2);
}
.wd-promo__sep { opacity: 0.6; }
.wd-promo__extra { display: contents; }

.wd-nav__todos-movil { display: none; }

/* ==========================================================================
   Migas de pan
   ========================================================================== */

.wd-migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-e2);
  font-size: var(--wd-t-sm);
  color: var(--wd-texto-tenue);
  padding-block: var(--wd-e4);
}
.wd-migas a:hover { color: var(--wd-navy); text-decoration: underline; }
.wd-migas__actual { color: var(--wd-navy); font-weight: var(--wd-peso-bold); }

/* ==========================================================================
   Botones
   ========================================================================== */

.wd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wd-e2);
  padding: var(--wd-e3) var(--wd-e5);
  border-radius: var(--wd-r);
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  text-align: center;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wd-btn--bloque { width: 100%; }
.wd-btn--grande { padding: var(--wd-e4) var(--wd-e6); font-size: var(--wd-t-base); }

/* Navy sobre blanco y amarillo con texto navy: ambos verificados AA. */
.wd-btn--primario { background: var(--wd-navy); color: #fff; }
.wd-btn--primario:hover { background: var(--wd-navy-hover); }

.wd-btn--cta { background: var(--wd-amarillo-ui); color: var(--wd-navy); }
.wd-btn--cta:hover { background: var(--wd-amarillo-hover); }

.wd-btn--contorno {
  background: var(--wd-superficie);
  color: var(--wd-navy);
  border-color: var(--wd-borde-fuerte);
}
.wd-btn--contorno:hover { border-color: var(--wd-navy); }

/* Un botón deshabilitado por opacidad deja el texto por debajo de AA. Se
   apaga con un par de colores propios que sí cumplen. */
.wd-btn:disabled {
  background: var(--wd-borde);
  border-color: var(--wd-borde);
  color: #414d57;
  cursor: not-allowed;
}

/* ==========================================================================
   Selector de cantidad
   Compartido por la ficha de producto y el carrito: vive aquí y no en
   ficha.css, que el carrito no carga.
   ========================================================================== */

.wd-cantidad {
  display: flex;
  align-items: center;
  border: 1px solid var(--wd-borde-fuerte);
  border-radius: var(--wd-r);
  overflow: hidden;
}
.wd-cantidad button { width: 38px; height: 40px; font-size: 17px; font-weight: var(--wd-peso-bold); }
.wd-cantidad button:hover { background: var(--wd-pozo); }
.wd-cantidad input {
  width: 46px;
  height: 40px;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--wd-borde);
  font-weight: var(--wd-peso-bold);
  -moz-appearance: textfield;
}
.wd-cantidad input::-webkit-outer-spin-button,
.wd-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   Chips y distintivos
   ========================================================================== */

.wd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wd-e2);
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r-full);
  padding: var(--wd-e2) var(--wd-e4);
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
}
.wd-chip--stock { color: var(--wd-exito); border-color: #bfe0cb; }

.wd-distintivo {
  display: inline-block;
  border-radius: var(--wd-r-sm);
  padding: 3px var(--wd-e2);
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  line-height: 1.3;
}
.wd-distintivo--desc { background: var(--wd-rojo); color: #fff; }
.wd-distintivo--nuevo { background: #d7f2f4; color: #0d5a61; }
.wd-distintivo--best { background: var(--wd-navy); color: #fff; }
.wd-distintivo--excl { background: var(--wd-amarillo-ui); color: var(--wd-navy); }

/* ==========================================================================
   Encabezado de sección
   ========================================================================== */

.wd-seccion { padding-block: var(--wd-e10); }
.wd-seccion--ajustada { padding-block: var(--wd-e8); }

.wd-seccion__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wd-e4);
  margin-bottom: var(--wd-e5);
}
.wd-seccion__titulo {
  font-size: var(--wd-t-lg);
  font-weight: var(--wd-peso-bold);
  letter-spacing: -0.01em;
}
.wd-seccion__enlace {
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  color: var(--wd-navy-medio);
  white-space: nowrap;
}
.wd-seccion__enlace:hover { text-decoration: underline; }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

/* Cinco columnas, como el diseño. Con `auto-fill` y un mínimo de 190px el
   contenedor de 1240 daba para seis pistas, así que una fila de cinco
   tarjetas dejaba un hueco vacío a la derecha. El número de columnas vive
   en --wd-cols y lo comparten rejilla y carrusel. */
.wd-rejilla {
  --wd-cols: 5;
  display: grid;
  grid-template-columns: repeat(var(--wd-cols), minmax(0, 1fr));
  gap: var(--wd-e4);
}

.wd-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r);
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.wd-tarjeta:hover {
  border-color: var(--wd-borde-fuerte);
  box-shadow: var(--wd-sombra);
}

.wd-tarjeta__medio {
  position: relative;
  aspect-ratio: 1;
  background: var(--wd-pozo);
  padding: var(--wd-e4);
  /* Rejilla centrada en lugar de height:100% sobre la imagen: un porcentaje
     de altura no resuelve contra una altura derivada de `aspect-ratio`, y la
     foto se desbordaba sobre la marca y el título de la tarjeta. */
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Confina el mix-blend-mode de la foto a esta caja. Sin aislar, el grupo
     de mezcla llega hasta el contexto de apilamiento de más arriba y algunos
     navegadores acaban multiplicando también la etiqueta de descuento y el
     corazón, que se pintan encima: el rojo sólido salía granate sobre las
     portadas de color. */
  isolation: isolate;
}
.wd-tarjeta__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* z-index y mezcla normal explícitos: la etiqueta va siempre por encima de
   la foto y nunca se mezcla con ella, sea cual sea el navegador. */
.wd-tarjeta__distintivo {
  position: absolute;
  top: var(--wd-e2);
  left: var(--wd-e2);
  z-index: 1;
  mix-blend-mode: normal;
}

.wd-tarjeta__deseo {
  position: absolute;
  top: var(--wd-e2);
  right: var(--wd-e2);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r-full);
  font-size: 14px;
}
.wd-tarjeta__deseo:hover { border-color: var(--wd-rojo); }
.wd-tarjeta__deseo[aria-pressed="true"] { background: var(--wd-rojo); color: #fff; }

.wd-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--wd-e2);
  padding: var(--wd-e4);
  flex: 1;
}

.wd-tarjeta__marca {
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wd-texto-tenue);
  /* Una sola línea siempre. "SCHOLASTIC, INCORPORATED" ocupa dos y
     "SCHOLASTIC INC." una: si se deja crecer, los títulos de una misma
     fila dejan de alinearse. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-tarjeta__titulo {
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wd-tarjeta:hover .wd-tarjeta__titulo { text-decoration: underline; }

.wd-tarjeta__pie { margin-top: auto; display: grid; gap: var(--wd-e3); }

/* El enlace cubre la tarjeta entera, pero los controles quedan por encima
   para que el corazón y el botón sigan siendo pulsables por separado.
   El corazón solo necesita el z-index: ya está posicionado en absoluto
   arriba a la derecha, y volver a declararle `position: relative` aquí lo
   devolvía al flujo, donde el `place-items: center` del contenedor lo
   plantaba en el centro de la foto. */
.wd-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; }
.wd-tarjeta__deseo { z-index: 1; }
.wd-tarjeta__pie .wd-btn { position: relative; z-index: 1; }

/* --- Valoración ---------------------------------------------------------- */

.wd-valoracion {
  display: flex;
  align-items: center;
  gap: var(--wd-e2);
  font-size: var(--wd-t-xs);
  color: var(--wd-texto-medio);
}
.wd-valoracion__estrellas { color: var(--wd-amarillo-ui); letter-spacing: 0.5px; }
.wd-valoracion__nota { font-weight: var(--wd-peso-bold); color: var(--wd-texto); }

/* --- Precio -------------------------------------------------------------- */

.wd-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--wd-e2);
}
.wd-precio__actual {
  font-size: var(--wd-t-md);
  font-weight: var(--wd-peso-bold);
  font-variant-numeric: tabular-nums;
}
.wd-precio__antes {
  font-size: var(--wd-t-sm);
  color: var(--wd-texto-tenue);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.wd-precio__ahorro {
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  color: var(--wd-rojo);
}

/* ==========================================================================
   Carrusel
   ========================================================================== */

.wd-carrusel { position: relative; }

.wd-carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  --wd-cols: 5;
  grid-auto-columns: calc((100% - (var(--wd-cols) - 1) * var(--wd-e4)) / var(--wd-cols));
  gap: var(--wd-e4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--wd-e2);
  scrollbar-width: thin;
}
.wd-carrusel__pista > * { scroll-snap-align: start; }

.wd-carrusel__flecha {
  position: absolute;
  top: 38%;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde-fuerte);
  border-radius: var(--wd-r-full);
  box-shadow: var(--wd-sombra);
  font-size: 15px;
}
.wd-carrusel__flecha:hover { background: var(--wd-navy); color: #fff; }
/* El desplazamiento no puede pasar del margen lateral del contenedor
   (--wd-e5): con --wd-e6 la flecha asomaba 4px fuera de la página en
   cuanto el contenedor dejaba de tener aire a los lados. */
.wd-carrusel__flecha--ant { left: calc(var(--wd-e5) * -1); }
.wd-carrusel__flecha--sig { right: calc(var(--wd-e5) * -1); }
.wd-carrusel__flecha[disabled] { opacity: 0.3; }

/* ==========================================================================
   Barra de confianza
   ========================================================================== */

.wd-confianza {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wd-e4);
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r);
  padding: var(--wd-e5);
}
.wd-confianza__item { display: flex; gap: var(--wd-e3); align-items: flex-start; }
.wd-confianza__icono { color: var(--wd-navy); }
/* El salto entre título y nota lo da la rejilla, no un <br> en el marcado:
   así el espacio entre líneas es un token y no depende de la altura de
   línea heredada. */
.wd-confianza__texto { display: grid; gap: 2px; }
.wd-confianza__titulo { font-size: var(--wd-t-sm); font-weight: var(--wd-peso-bold); }
.wd-confianza__nota { font-size: var(--wd-t-xs); color: var(--wd-texto-medio); }

/* ==========================================================================
   Pie de página
   ========================================================================== */

.wd-pie { background: var(--wd-navy); color: #cdd8de; margin-top: var(--wd-e12); }

.wd-pie__principal {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--wd-e8);
  padding-block: var(--wd-e10);
}
.wd-pie__marca { display: grid; gap: var(--wd-e4); align-content: start; }
.wd-pie__lema { font-size: var(--wd-t-sm); line-height: 1.55; }
.wd-pie__social { display: flex; gap: var(--wd-e2); }
.wd-pie__social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--wd-navy-medio);
  border-radius: var(--wd-r);
  color: #fff;
}
.wd-pie__social a:hover { background: var(--wd-amarillo-ui); color: var(--wd-navy); }

.wd-pie__titulo {
  color: #fff;
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  margin-bottom: var(--wd-e3);
}
.wd-pie__enlace { display: block; font-size: var(--wd-t-sm); padding-block: var(--wd-e1); }
.wd-pie__enlace:hover { color: #fff; text-decoration: underline; }

/* El icono acompaña a la primera línea de una dirección de varias, así que
   la fila se alinea arriba y no al centro del bloque. */
.wd-pie__direccion { display: flex; gap: var(--wd-e2); align-items: flex-start; }
.wd-pie__sucursal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-e6);
  justify-content: space-between;
  align-items: center;
  background: var(--wd-navy-medio);
  border-radius: var(--wd-r);
  padding: var(--wd-e4) var(--wd-e5);
  font-size: var(--wd-t-sm);
}

.wd-pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-e4);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--wd-navy-medio);
  margin-top: var(--wd-e8);
  padding-block: var(--wd-e5);
  font-size: var(--wd-t-xs);
}
.wd-pie__sellos { display: flex; flex-wrap: wrap; gap: var(--wd-e5); }
.wd-pie__sellos > span { display: inline-flex; align-items: center; gap: var(--wd-e2); }

.wd-pie__pagos { display: flex; gap: var(--wd-e2); flex-wrap: wrap; align-items: center; }
.wd-pie__pagos img { display: block; height: 24px; width: auto; }

/* ==========================================================================
   Adaptación a pantallas menores
   ========================================================================== */

@media (max-width: 1100px) {
  .wd-pie__principal { grid-template-columns: 1fr 1fr 1fr; }
}

/* ==========================================================================
   Navegación en móvil: cajón lateral
   El scroll horizontal que había antes escondía la mitad de las secciones
   sin ningún aviso. Aquí la barra se reduce al botón de menú y todo el
   contenido pasa a un cajón que se puede recorrer.
   ========================================================================== */

@media (max-width: 900px) {
  .wd-confianza { grid-template-columns: 1fr 1fr; }
  .wd-nav__sucursal { display: none; }

  /* El botón ocupa la franja entera y de borde a borde: como bloque fino
     con navy asomando a los lados no se leía como el control de menú que
     es, sino como un adorno entre el buscador y el ticker. */
  /* Especificidad por encima de `.wd-contenedor`: su padding se redefine
     más abajo, en el tramo de 720px, y con igual peso ganaría por orden. */
  .wd-nav > .wd-nav__fila { padding-inline: 0; }
  .wd-nav__lista { display: none; }
  .wd-nav__todos {
    flex: 1;
    height: 50px;
    padding-inline: var(--wd-e4);
    font-size: var(--wd-t-md);
    gap: var(--wd-e3);
  }
  .wd-nav__todos-texto { display: none; }
  .wd-nav__todos-movil { display: inline; }
  .wd-nav__todos-flecha { margin-left: auto; }

  /* El ticker se queda en un solo mensaje: con los cuatro ocupaba tres
     líneas de rojo y se comía la navegación. */
  .wd-promo__extra { display: none; }
  .wd-promo__fila { padding-block: var(--wd-e2); font-size: var(--wd-t-xs); }

  .wd-nav__velo {
    position: fixed;
    inset: 0;
    background: rgba(6, 26, 38, 0.55);
    z-index: 55;
  }

  .wd-mega {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 340px);
    /* Sin el filo amarillo del desplegable: en un cajón esa franja lateral
       lo hace parecer una pestaña pegada al borde. La separación del fondo
       la da la sombra que ya hereda, que es lo que corresponde a algo que
       flota sobre la página. */
    border-bottom: 0;
    overflow-y: auto;
    /* Sin esto, al llegar al final del cajón el gesto sigue desplazando la
       página de detrás. */
    overscroll-behavior: contain;
    z-index: 60;
    animation: wd-entra-cajon 0.22s ease-out;
  }
  .wd-mega__cuerpo {
    display: grid;
    gap: var(--wd-e5);
    padding-block: var(--wd-e4) var(--wd-e8);
  }

  .wd-mega__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--wd-e3);
    border-bottom: 1px solid var(--wd-borde);
  }
  .wd-mega__cab-titulo { font-size: var(--wd-t-md); font-weight: var(--wd-peso-bold); }
  .wd-mega__cerrar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--wd-r);
    color: var(--wd-navy);
  }
  .wd-mega__cerrar:hover { background: var(--wd-pozo); }

  .wd-mega__secciones { display: grid; }
  .wd-panel__seccion {
    display: block;
    padding-block: var(--wd-e3);
    font-size: var(--wd-t-md);
    font-weight: var(--wd-peso-bold);
    border-bottom: 1px solid var(--wd-borde);
  }
  .wd-panel__seccion--destacado { color: var(--wd-rojo); }

  /* Cada departamento es una fila pulsable que despliega sus enlaces. */
  .wd-mega__rejilla { grid-template-columns: 1fr; gap: 0; }

  .wd-mega__depto { border-bottom: 1px solid var(--wd-borde); }
  .wd-mega__resumen { cursor: pointer; padding-block: var(--wd-e3); gap: var(--wd-e3); }
  .wd-mega__resumen:hover { color: var(--wd-navy-medio); }
  .wd-mega__titulo {
    font-size: var(--wd-t-md);
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .wd-mega__chevron {
    display: block;
    flex: none;
    width: 11px;
    height: 11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c596e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
  }
  .wd-mega__depto[open] .wd-mega__chevron { transform: rotate(90deg); }

  .wd-mega__enlaces { display: grid; padding-bottom: var(--wd-e3); }
  .wd-mega__enlace { padding-block: var(--wd-e2); padding-left: var(--wd-e4); }
  .wd-mega__enlace--todo {
    display: block;
    font-weight: var(--wd-peso-bold);
    color: var(--wd-navy);
  }

}

@keyframes wd-entra-cajon {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

/* Mientras el cajón tapa la pantalla, la página de detrás no se desplaza. */
.wd-sin-scroll { overflow: hidden; }

@media (max-width: 1100px) {
  .wd-rejilla, .wd-carrusel__pista, .wd-sagas { --wd-cols: 4; }
}

@media (max-width: 900px) {
  .wd-rejilla, .wd-carrusel__pista, .wd-sagas { --wd-cols: 3; }
}

@media (max-width: 720px) {
  .wd-contenedor { padding-inline: var(--wd-e4); }
  .wd-superior__fila { flex-wrap: wrap; gap: var(--wd-e3); }
  .wd-buscador { order: 3; width: 100%; flex-basis: 100%; }
  .wd-acciones { margin-left: auto; }
  .wd-buscador__cat { display: none; }
  .wd-pie__principal { grid-template-columns: 1fr; gap: var(--wd-e6); }
  .wd-seccion { padding-block: var(--wd-e8); }
  .wd-carrusel__flecha { display: none; }
  .wd-rejilla, .wd-sagas { --wd-cols: 2; }
  /* Fracción a propósito: deja asomar la tarjeta siguiente, que es lo que
     avisa de que la fila se desplaza. */
  .wd-carrusel__pista { --wd-cols: 2.2; }
}

@media (max-width: 520px) {
  .wd-confianza { grid-template-columns: 1fr; }
  .wd-seccion__titulo { font-size: var(--wd-t-md); }
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}