/* ==========================================================================
   Wonder · Componentes por página
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

/* Proporciones medidas sobre el comp: el hero ocupa el 70% del ancho de
   contenido y el lateral el 29%, y la altura del panel es 0,43 de su
   propio ancho. */
.wd-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--wd-e4);
  padding-top: var(--wd-e5);
}

.wd-hero__principal { position: relative; }

/* El texto arranca a 60px del borde: en el comp las flechas quedan por
   fuera de la columna de texto, no debajo de ella. */
.wd-hero__lamina {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  border-radius: var(--wd-r-lg);
  padding: var(--wd-e8) 3.75rem;
  overflow: hidden;
  color: #fff;
}
/* El comp no usa una diagonal de lado a lado, sino un halo suave detrás de
   la ilustración sobre un navy profundo. */
.wd-hero__lamina--navy {
  background: radial-gradient(85% 120% at 68% 48%, #16456a 0%, #0c3452 48%, #072a3d 100%);
}
.wd-hero__lamina--teal {
  background: radial-gradient(85% 120% at 68% 48%, #1a8e99 0%, #10707c 48%, #0a4f58 100%);
}
.wd-hero__lamina--ciruela {
  background: radial-gradient(85% 120% at 68% 48%, #4c2a63 0%, #351c4a 48%, #241233 100%);
}

.wd-hero__texto { max-width: 30rem; position: relative; z-index: 1; }

.wd-hero__etiqueta {
  display: inline-block;
  background: var(--wd-amarillo-ui);
  color: var(--wd-navy);
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  border-radius: var(--wd-r-full);
  padding: var(--wd-e1) var(--wd-e3);
  margin-bottom: var(--wd-e4);
}

.wd-hero__titulo {
  font-size: var(--wd-t-3xl);
  font-weight: var(--wd-peso-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--wd-e3);
}

.wd-hero__resumen {
  font-size: var(--wd-t-base);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: var(--wd-e6);
}

.wd-hero__botones { display: flex; flex-wrap: wrap; gap: var(--wd-e3); }
.wd-hero__botones .wd-btn--contorno {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.wd-hero__botones .wd-btn--contorno:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Centrada verticalmente y contenida dentro del panel, como en el comp.
   Antes iba anclada abajo con `bottom: -0.5rem` y se salía por el borde. */
.wd-hero__arte {
  position: absolute;
  right: 4.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9.5rem;
  line-height: 1;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35));
}

/* En el comp las flechas son discos translúcidos sobre el panel oscuro, no
   los botones blancos de los carruseles de producto. */
.wd-hero__flecha {
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(3px);
}
.wd-hero__flecha:hover { background: rgba(255, 255, 255, 0.32); color: #fff; }
.wd-hero__flecha--ant { left: var(--wd-e3); }
.wd-hero__flecha--sig { right: var(--wd-e3); }

.wd-hero__puntos {
  position: absolute;
  left: 3.75rem;
  bottom: var(--wd-e5);
  display: flex;
  gap: var(--wd-e2);
}
.wd-hero__punto {
  width: 9px; height: 9px;
  border-radius: var(--wd-r-full);
  background: rgba(255, 255, 255, 0.45);
}
.wd-hero__punto[aria-selected="true"] { background: var(--wd-amarillo-ui); width: 26px; }

.wd-hero__lateral { display: grid; gap: var(--wd-e4); }

/* En el comp el contenido se reparte: la etiqueta arriba, el título y la
   llamada abajo, y la ilustración arriba a la derecha. No va centrado. */
.wd-promo-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--wd-e5);
  border-radius: var(--wd-r-lg);
  padding: var(--wd-e5);
  overflow: hidden;
  min-height: 152px;
}

/* El comp pinta la tarjeta teal de un tono plano (#28b7c2) con texto
   blanco encima: eso mide 2,4:1 y no pasa AA. En vez de cambiar el color
   del texto —que rompería el diseño aprobado— la tarjeta conserva el teal
   vivo arriba y se ahonda donde cae el texto.

   Verificado muestreando los píxeles ya renderizados, no calculando:
   el título queda sobre #197b87 → 4,97:1 y la etiqueta sobre #1a797a →
   5,17:1, ambos por encima del 4,5:1 exigido.

   El detector avisará igualmente de «#ffffff sobre #f7f8f6»: no sabe
   resolver un fondo de degradados apilados y cae al fondo de la página.
   Se probó a darle un `background-color` sólido de respaldo, que sí lo
   resuelve, pero entonces deduce que la página entera es oscura y suelta
   seis falsos «dark-glow». Entre un falso positivo explicable y seis
   engañosos, se deja el primero. */
.wd-promo-tarjeta--amarilla {
  background: linear-gradient(170deg, #fabd24 0%, #f7ab18 45%, #ef9c05 100%);
  color: var(--wd-navy);
}
/* Dos capas: el teal vivo del comp como base, y un velo anclado abajo que
   garantiza el contraste bajo el texto sea cual sea la altura de la
   tarjeta. Afinar los topes de un solo degradado a 170° no era fiable:
   el fondo medido bajo el título se quedaba en 3,5:1. */
.wd-promo-tarjeta--teal {
  background:
    linear-gradient(to top, rgba(4, 52, 58, 0.88) 0%, rgba(4, 52, 58, 0.5) 32%, rgba(4, 52, 58, 0) 66%),
    linear-gradient(170deg, #2fc3ce 0%, #23a9b5 100%);
  color: #fff;
}

/* La etiqueta es un oscurecido del propio fondo y hereda el color de texto
   de la tarjeta: navy sobre la amarilla, blanco sobre la teal. */
.wd-promo-tarjeta__etiqueta {
  align-self: flex-start;
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  background: rgba(6, 38, 44, 0.18);
  border-radius: var(--wd-r-full);
  padding: 3px var(--wd-e3);
}
/* La etiqueta va arriba, donde el degradado todavía es claro: necesita
   más oscurecido que el resto para que el blanco cumpla AA ahí. */
.wd-promo-tarjeta--teal .wd-promo-tarjeta__etiqueta { background: rgba(3, 44, 50, 0.5); }

.wd-promo-tarjeta__pie { display: grid; gap: var(--wd-e1); }
.wd-promo-tarjeta__titulo {
  font-size: var(--wd-t-md);
  font-weight: var(--wd-peso-bold);
  line-height: 1.2;
}
.wd-promo-tarjeta__cta { font-size: var(--wd-t-sm); font-weight: var(--wd-peso-bold); }
.wd-promo-tarjeta:hover .wd-promo-tarjeta__cta { text-decoration: underline; }

/* En la tarjeta amarilla el comp pone el título en navy y la llamada en
   BLANCO. Verificado recortando el comp a 18x: el contraste es distinto
   para cada uno a propósito.

   AVISO: blanco sobre este amarillo mide 1,9:1. Es el peor contraste de
   todo el prototipo y ningún ajuste lo salva sin dejar de ser amarillo,
   porque un amarillo lo bastante oscuro para el blanco ya no es amarillo.
   Se implementa así porque es el diseño aprobado y el cliente lo pidió
   expresamente. La alternativa accesible es el navy que ya usa el título
   de esta misma tarjeta: 7,6:1. Cambiar esta única línea lo resuelve. */
.wd-promo-tarjeta--amarilla .wd-promo-tarjeta__cta { color: #fff; }
.wd-promo-tarjeta__arte {
  position: absolute;
  right: var(--wd-e4);
  top: var(--wd-e3);
  font-size: 4.75rem;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

/* --- Departamentos --------------------------------------------------------- */

.wd-departamentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wd-e4);
}
.wd-depto {
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r-md);
  padding: var(--wd-e5);
}
/* Sin regla divisoria bajo la cabecera: en el diseño la separación la da
   el espacio, no una línea. */
.wd-depto__titulo {
  display: flex;
  align-items: center;
  gap: var(--wd-e3);
  font-size: var(--wd-t-md);
  font-weight: var(--wd-peso-bold);
  margin-bottom: var(--wd-e4);
}
/* El icono va dentro de un recuadro redondeado en tono crema, como el
   resto de superficies cálidas del sistema. */
.wd-depto__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--wd-crema);
  border-radius: var(--wd-r);
  font-size: 20px;
  line-height: 1;
}
.wd-depto__enlace {
  display: flex;
  gap: var(--wd-e2);
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-medio);
  color: var(--wd-navy);
  padding-block: var(--wd-e1);
}
/* Chevron dibujado, no el glifo «\203A»: a 13px heredados apenas se veía y
   su grosor dependía de la tipografía. Como SVG el tamaño y el trazo son
   exactos y casan con el resto de iconos. */
.wd-depto__enlace::before {
  content: "";
  flex: none;
  align-self: center;
  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;
}
/* El subrayado va sobre la etiqueta, no sobre el enlace: puesto en el
   enlace, la decoración se propaga al ::before y subraya también el
   chevron. */
.wd-depto__enlace:hover .wd-depto__texto { text-decoration: underline; }

/* --- Sagas ------------------------------------------------------------------ */

/* Mismo contador de columnas que las tarjetas de producto: cinco arriba y
   bajando por tramos. Con `auto-fit` el número dependía del ancho y no del
   diseño. */
.wd-sagas {
  --wd-cols: 5;
  display: grid;
  grid-template-columns: repeat(var(--wd-cols), minmax(0, 1fr));
  gap: var(--wd-e4);
}
.wd-saga {
  display: grid;
  align-content: end;
  gap: var(--wd-e1);
  min-height: 148px;
  border-radius: var(--wd-r);
  padding: var(--wd-e5);
  color: #fff;
  transition: transform 0.15s ease;
}
.wd-saga:hover { transform: translateY(-2px); }
.wd-saga__conteo { font-size: var(--wd-t-xs); color: rgba(255, 255, 255, 0.75); }
.wd-saga__titulo { font-size: var(--wd-t-md); font-weight: var(--wd-peso-bold); }
.wd-saga__cta {
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  color: var(--wd-amarillo);
}

/* --- Marcas ------------------------------------------------------------------ */

.wd-marcas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--wd-e3);
}
.wd-marca {
  display: grid;
  place-items: center;
  gap: 2px;
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r);
  padding: var(--wd-e5) var(--wd-e3);
  text-align: center;
}
.wd-marca:hover { border-color: var(--wd-navy); }
.wd-marca__nombre {
  font-size: var(--wd-t-sm);
  font-weight: var(--wd-peso-bold);
  letter-spacing: 0.04em;
}
.wd-marca__conteo { font-size: var(--wd-t-xs); color: var(--wd-texto-tenue); }

/* --- Pestañas ----------------------------------------------------------------- */

.wd-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-e2);
  margin-bottom: var(--wd-e5);
}
.wd-pestana {
  border: 1px solid var(--wd-borde);
  background: var(--wd-superficie);
  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-pestana[aria-selected="true"] {
  background: var(--wd-navy);
  border-color: var(--wd-navy);
  color: #fff;
}

.wd-panel-edad { background: var(--wd-crema); }

/* --- Blog ---------------------------------------------------------------------- */

.wd-blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wd-e4);
}
.wd-blog__tarjeta {
  display: grid;
  align-content: start;
  gap: var(--wd-e2);
  background: var(--wd-superficie);
  border: 1px solid var(--wd-borde);
  border-radius: var(--wd-r);
  overflow: hidden;
  padding-bottom: var(--wd-e5);
}
.wd-blog__tarjeta:hover { box-shadow: var(--wd-sombra); }
.wd-blog__arte {
  display: grid;
  place-items: center;
  height: 120px;
  font-size: 3.25rem;
  margin-bottom: var(--wd-e3);
}
.wd-blog__arte--amarillo { background: var(--wd-amarillo-ui); }
.wd-blog__arte--teal { background: var(--wd-teal); }
.wd-blog__arte--navy { background: var(--wd-navy); }
.wd-blog__etiqueta,
.wd-blog__titulo,
.wd-blog__resumen,
.wd-blog__cta { padding-inline: var(--wd-e5); }
.wd-blog__etiqueta {
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wd-rojo);
}
.wd-blog__titulo { font-size: var(--wd-t-md); font-weight: var(--wd-peso-bold); }
.wd-blog__resumen { font-size: var(--wd-t-sm); color: var(--wd-texto-medio); }
.wd-blog__cta { font-size: var(--wd-t-sm); font-weight: var(--wd-peso-bold); }
.wd-blog__tarjeta:hover .wd-blog__cta { text-decoration: underline; }

/* --- Membresía ------------------------------------------------------------------ */

.wd-membresia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wd-e6);
  background: linear-gradient(120deg, #082b3e 0%, #1d4460 100%);
  color: #fff;
  border-radius: var(--wd-r-md);
  padding: var(--wd-e8);
}
.wd-membresia__etiqueta {
  display: inline-block;
  background: var(--wd-amarillo-ui);
  color: var(--wd-navy);
  font-size: var(--wd-t-xs);
  font-weight: var(--wd-peso-bold);
  border-radius: var(--wd-r-sm);
  padding: 2px var(--wd-e2);
  margin-bottom: var(--wd-e3);
}
.wd-membresia__titulo {
  font-size: var(--wd-t-lg);
  font-weight: var(--wd-peso-bold);
  margin-bottom: var(--wd-e4);
}
.wd-membresia__ventajas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-e8);
  font-size: var(--wd-t-sm);
  color: rgba(255, 255, 255, 0.8);
}
.wd-membresia__ventajas strong { color: var(--wd-amarillo); font-size: var(--wd-t-md); }

/* --- Boletín --------------------------------------------------------------------- */

.wd-boletin {
  background: var(--wd-crema);
  border: 1px solid var(--wd-crema-borde);
  border-radius: var(--wd-r-md);
  padding: var(--wd-e8);
  text-align: center;
}
.wd-boletin__titulo { font-size: var(--wd-t-lg); font-weight: var(--wd-peso-bold); }
.wd-boletin__nota {
  font-size: var(--wd-t-sm);
  color: var(--wd-texto-medio);
  margin-block: var(--wd-e2) var(--wd-e5);
}
.wd-boletin__campos {
  display: flex;
  gap: var(--wd-e2);
  justify-content: center;
  flex-wrap: wrap;
}
.wd-boletin__campos input {
  min-width: 260px;
  border: 1px solid var(--wd-borde-fuerte);
  border-radius: var(--wd-r);
  padding: var(--wd-e3) var(--wd-e4);
  background: var(--wd-superficie);
}

/* ==========================================================================
   Adaptación
   ========================================================================== */

@media (max-width: 1000px) {
  .wd-hero { grid-template-columns: 1fr; }
  .wd-hero__lateral { grid-template-columns: 1fr 1fr; }
  .wd-departamentos { grid-template-columns: 1fr 1fr; }
  .wd-blog { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .wd-hero__lamina { min-height: 260px; padding: var(--wd-e5); }
  .wd-hero__titulo { font-size: var(--wd-t-xl); }
  .wd-hero__arte { font-size: 6rem; right: var(--wd-e2); opacity: 0.35; }
  .wd-hero__texto { max-width: none; }
  .wd-hero__puntos { left: var(--wd-e5); bottom: var(--wd-e3); }
  .wd-hero__lateral { grid-template-columns: 1fr; }
  .wd-departamentos { grid-template-columns: 1fr; }
  .wd-membresia { padding: var(--wd-e5); }
  .wd-membresia__ventajas { gap: var(--wd-e5); }
  .wd-boletin { padding: var(--wd-e5); }
  .wd-boletin__campos input { min-width: 0; width: 100%; }
}