/**
 * Estilos de las páginas de clúster de producto (Bipro, Crea Stack, …).
 *
 * Reparto del lenguaje visual de la home: el hero lleva el tratamiento oscuro
 * con resplandor radial, y la sección de rejillas el fondo claro de
 * .home-goals, blanco con un resplandor azul muy tenue. El acento se cambia
 * por página con --cluster-glow, sin tocar el resto.
 *
 * Todo va prefijado con .cluster- para no chocar con MDB ni con menu.css.
 */

.cluster {
  --cluster-ink: #0b0c0f;
  --cluster-muted: #4a5160;
  --cluster-line: #e4e7ec;
  --cluster-surface: #ffffff;
  --cluster-ground: #f6f7f9;
  --cluster-blue: #0071e3;
  --cluster-gold: #f2c94c;

  /* acento del hero: se sobreescribe por página */
  --cluster-bg: #0a0b0e;
  --cluster-glow: rgb(229 187 71 / 38%);

  --cluster-pad: clamp(1rem, 3vw, 2.5rem);
  --cluster-shell: 1320px;

  background: var(--cluster-surface);
  color: var(--cluster-ink);
  font-family: "Montserrat", Arial, sans-serif;
}

.cluster__shell {
  width: min(100%, calc(var(--cluster-shell) + (var(--cluster-pad) * 2)));
  margin-inline: auto;
  padding-inline: var(--cluster-pad);
}

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

/* Mismo patrón que .goal-card en la home: resplandor radial sobre un degradado
   oscuro, más un aro fino desplazado fuera del encuadre. Sin imagen de fondo,
   así que el hero no descarga nada y se adapta a cualquier alto. */

.cluster-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cluster-bg);
}

.cluster-hero::before,
.cluster-hero::after {
  position: absolute;
  z-index: -2;
  content: "";
  pointer-events: none;
}

.cluster-hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 78% 20%, var(--cluster-glow), transparent 32%),
    linear-gradient(135deg, #202127, var(--cluster-bg) 70%);
}

.cluster-hero::after {
  top: -16%;
  right: -8%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgb(255 255 255 / 2%),
    0 0 0 6rem rgb(255 255 255 / 2%);
}

@media (max-width: 640px) {
  .cluster-hero::after {
    top: -8%;
    right: -22%;
    width: 78%;
  }
}

.cluster-hero__content {
  display: grid;
  min-height: clamp(22rem, 42vw, 34rem);
  align-content: end;
  /* El mínimo son 7rem y no menos: el menú es position:fixed y mide ~71 px en
     móvil (1.1rem de padding x2 + logo de 36 px). Con 4.5rem el kicker quedaba
     pegado a la barra. 7rem deja ~41 px de aire por debajo. */
  padding-block: clamp(7rem, 12vw, 8rem) clamp(2.5rem, 6vw, 4rem);
  color: #fff;
}

.cluster-hero__copy {
  width: min(46rem, 100%);
}

/* El producto solo aparece en escritorio, que es donde el patrón deja espacio
   libre a la derecha. En móvil no cabe sin empujar el texto. */
.cluster-hero__producto {
  display: none;
}

@media (min-width: 62rem) {
  /* El envase ocupa el alto completo del hero y sangra por abajo.
     Las tres constantes salen de medir el canal alfa del propio archivo:
       · el producto opaco ocupa el 85.5 % del alto y el 49.2 % del ancho
       · deja 8.1 % de margen arriba y 25.3 % a cada lado
     Por eso la imagen se escala al 128 % del alto del hero (128 × 0.855 ≈ 109,
     algo más que el hero) y se corrige el margen lateral con translateX. */
  .cluster-hero__producto {
    position: absolute;
    z-index: -1;
    top: 0;
    right: clamp(1rem, 5vw, 5rem);
    bottom: 0;
    display: grid;
    width: auto;
    align-items: end;
    pointer-events: none;
  }

  .cluster-hero__producto img {
    width: auto;
    height: 128%;
    /* translateX(25.3 %) cancela el margen transparente del archivo, para que
       lo que se alinea a la derecha sea el bote y no su caja vacía. */
    transform: translate(25.3%, 14%) rotate(-8deg);
    transform-origin: 50% 50%;
  }

  /* Halo detrás del envase: lo despega del fondo sin una sombra dura, que en un
     recorte a sangre delataría el borde del archivo. */
  .cluster-hero__producto::before {
    position: absolute;
    z-index: -1;
    right: 4%;
    bottom: 12%;
    width: 62%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(229 187 71 / 20%), transparent 65%);
    content: "";
  }

  .cluster-hero__copy {
    width: min(32rem, 52%);
  }
}

@media (min-width: 90rem) {
  .cluster-hero__copy {
    width: min(40rem, 55%);
  }
}

.cluster-kicker {
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--cluster-gold);
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.75rem;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cluster-kicker::before {
  width: 2.25rem;
  height: 3px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.cluster-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 1rem + 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-wrap: balance;
}

.cluster-hero__lead {
  max-width: 38rem;
  margin: clamp(1rem, 2.5vw, 1.6rem) 0 0;
  color: rgb(255 255 255 / 86%);
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.7;
}

/* ---------- Secciones ---------- */

.cluster-section {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.cluster-section__heading {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.cluster-section__heading h2 {
  margin: 0;
  color: var(--cluster-ink);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}

/* :not(.cluster-kicker) es imprescindible: el kicker también es un <p> hijo
   directo de este bloque, y sin excluirlo hereda la barra y la sangría. */
.cluster-section__heading > p:not(.cluster-kicker) {
  margin: 1rem 0 0;
  color: var(--cluster-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}

.cluster-section__heading > p strong {
  color: var(--cluster-ink);
  font-weight: 800;
}

.cluster-kicker--dark {
  color: var(--cluster-blue);
}

/* ---------- Sección de rejillas ----------
   Mismo fondo que .home-goals en la home: blanco con un resplandor azul muy
   tenue arriba a la izquierda. La textura oscura de .goal-card es de la
   tarjeta individual, no de la sección, y aquí se reserva para el hero. */

.cluster-catalogo {
  background:
    radial-gradient(circle at 5% 10%, rgb(0 113 227 / 8%), transparent 30rem),
    var(--cluster-surface);
}

/* ---------- Grupo de presentación ---------- */

.cluster-grupo {
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--cluster-line);
}

.cluster-grupo:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.cluster-grupo__cabecera {
  display: flex;
  max-width: 46rem;
  flex-direction: column;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  gap: 0.7rem;
}

.cluster-grupo h3 {
  position: relative;
  margin: 0;
  padding-left: 1rem;
  color: var(--cluster-ink);
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* Filete vertical: el mismo gesto de barra del kicker, girado */
.cluster-grupo h3::before {
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--cluster-blue);
  content: "";
}

.cluster-grupo__intro {
  max-width: 42rem;
  margin: 0;
  padding-left: 1rem;
  color: var(--cluster-muted);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.65;
  text-wrap: pretty;
}

.cluster-grupo__datos {
  display: flex;
  flex-wrap: wrap;
  margin: 0.15rem 0 0;
  padding: 0 0 0 1rem;
  gap: 0.45rem;
  list-style: none;
}

.cluster-grupo__datos li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--cluster-line);
  border-radius: 2rem;
  background: var(--cluster-ground);
  color: var(--cluster-muted);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* La sangría alinea el texto bajo el h3 en pantallas anchas, pero en móvil
   roba demasiado ancho: por debajo de 640px todo vuelve al borde. */
@media (max-width: 640px) {
  .cluster-grupo h3,
  .cluster-grupo__intro,
  .cluster-grupo__datos {
    padding-left: 0;
  }

  .cluster-grupo h3 {
    padding-left: 0.85rem;
  }
}

/* ---------- Rejilla de productos ---------- */

.cluster-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.cluster-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--cluster-line);
  border-radius: 1rem;
  background: var(--cluster-surface);
  color: var(--cluster-ink);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cluster-card:hover,
.cluster-card:focus-within {
  border-color: #c9d6ea;
  box-shadow: 0 10px 28px rgb(11 12 15 / 8%);
  transform: translateY(-2px);
}

.cluster-card__media {
  position: relative;
  display: block;
  background: #f5f5f5;
}

.cluster-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 260ms ease;
}

.cluster-card__media:hover img,
.cluster-card__media:focus-visible img {
  transform: scale(1.05);
}

.cluster-card__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  background: #d32f2f;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cluster-card__badge--nuevo {
  right: 0.6rem;
  left: auto;
  background: var(--cluster-gold);
  color: var(--cluster-ink);
}

.cluster-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.9rem 1rem 1.1rem;
  gap: 0.55rem;
}

/* Reserva de 3 líneas: es lo que ocupa el nombre más largo del catálogo. Sin
   ella, un nombre de una línea sube el precio y descuadra la fila respecto a
   las tarjetas vecinas. */
.cluster-card h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  min-height: calc(3 * 1.35em);   /* 3 líneas */
  text-wrap: pretty;
}

.cluster-card h4 a {
  color: inherit;
  text-decoration: none;
}

.cluster-card h4 a:hover,
.cluster-card h4 a:focus-visible {
  text-decoration: underline;
}

.cluster-card__precio {
  display: flex;
  align-items: baseline;
  margin: 0;
  gap: 0.5rem;
}

.cluster-card__precio strong {
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.cluster-card__precio s {
  color: #8a919e;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.cluster-card__precio .es-oferta {
  color: #c62828;
}

/* Fila de cantidad y añadir al carrito. El botón de comprar va debajo, a lo
   ancho, porque es el acceso directo al checkout y debe destacar sobre los dos. */
.cluster-card__cantidad {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  align-items: stretch;
  gap: 0.4rem;
}

/* Cuando hay selector, el bloque de compra ya viene anclado por él: si además
   llevara margin-top:auto, los dos se separarían y volverían a desalinearse. */
.cluster-card__cantidad + .cluster-card__acciones {
  margin-top: 0;
}

.cluster-pasos {
  display: flex;
  min-height: 2.75rem;
  overflow: hidden;
  align-items: stretch;
  border: 1px solid var(--cluster-line);
  border-radius: 0.55rem;
}

/* 2.75rem = 44 px, el mínimo de WCAG 2.5.5 para objetivos táctiles. Con menos,
   Lighthouse marca la auditoría «tap-targets» y en móvil se falla el toque. */
.cluster-pasos__btn {
  width: 2.75rem;
  border: 0;
  background: var(--cluster-ground);
  color: var(--cluster-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 150ms ease;
}

.cluster-pasos__btn:hover,
.cluster-pasos__btn:focus-visible {
  background: #dde3ec;
}

.cluster-pasos__valor {
  flex: 1;
  width: 100%;
  /* Suelo y techo a la vez. El mínimo evita que el input se colapse a cero
     cuando la fila va justa —era lo que hacía desaparecer la cantidad— y como
     flex-shrink sigue activo, lo que cede es el hueco, no el número. */
  min-width: 2.4rem;
  padding: 0.4rem 0;
  border: 0;
  border-inline: 1px solid var(--cluster-line);
  appearance: textfield;
  -moz-appearance: textfield;
  background: var(--cluster-surface);
  color: var(--cluster-ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.cluster-pasos__valor::-webkit-outer-spin-button,
.cluster-pasos__valor::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.cluster-pasos__valor:focus-visible {
  outline: 2px solid var(--cluster-blue);
  outline-offset: -2px;
}

/* El selector se estira y el botón de añadir queda cuadrado: es solo icono,
   así que un ancho fijo lo mantiene proporcionado en cualquier tarjeta. */
.cluster-card__cantidad .cluster-pasos {
  flex: 1;
}

.cluster-card__cantidad .cluster-btn--anadir {
  flex: 0 0 auto;
  width: 2.75rem;
  padding-inline: 0;
  font-size: 0.9rem;
}

.cluster-card__acciones {
  display: flex;
  margin-top: auto;
  gap: 0.4rem;
}

.cluster-btn {
  display: inline-flex;
  min-height: 2.75rem;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.55rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 0.35rem;
  letter-spacing: 0.02em;
  transition: background-color 160ms ease, transform 160ms ease;
}

.cluster-btn--comprar {
  background: var(--cluster-blue);
  color: #fff;
}

.cluster-btn--anadir {
  background: var(--cluster-ink);
  color: #fff;
}

.cluster-btn:hover,
.cluster-btn:focus-visible {
  transform: translateY(-1px);
}

.cluster-btn--comprar:hover,
.cluster-btn--comprar:focus-visible {
  background: #0060c4;
}

.cluster-btn[disabled] {
  background: #c9ced8;
  color: #6d7683;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Preguntas frecuentes ---------- */

.cluster-faq {
  display: grid;
  max-width: 52rem;
  gap: 0.6rem;
}

.cluster-faq details {
  overflow: hidden;
  border: 1px solid var(--cluster-line);
  border-radius: 0.9rem;
  background: var(--cluster-surface);
}

.cluster-faq summary {
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
}

.cluster-faq summary::-webkit-details-marker {
  display: none;
}

.cluster-faq summary::after {
  float: right;
  color: var(--cluster-blue);
  content: "+";
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}

.cluster-faq details[open] summary::after {
  content: "\2212";
}

.cluster-faq details > p {
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  color: var(--cluster-muted);
  font-size: 0.94rem;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .cluster-card,
  .cluster-card__media img,
  .cluster-btn {
    transition: none;
  }

  .cluster-card:hover,
  .cluster-card:focus-within {
    transform: none;
  }
}

/* En móviles estrechos las tres piezas no caben en una fila sin bajar de 44 px,
   así que se apilan: antes encoger el objetivo táctil, se prefiere ocupar dos
   filas. El corte son 35rem, el mismo de la rejilla estrecha: mientras las tarjetas
   sean de 2 o 3 columnas, el selector va en su propia fila. */
@media (max-width: 35rem) {
  .cluster-card__cantidad {
    flex-direction: column;
  }

  /* En columna, flex:1 haría crecer el selector a lo alto en vez de a lo ancho */
  .cluster-card__cantidad .cluster-pasos {
    flex: 0 0 auto;
    width: 100%;
  }

  .cluster-card__cantidad .cluster-btn--anadir {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .cluster-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }

  .cluster-card__acciones {
    flex-wrap: wrap;
  }
}


/* ---------- Aviso de añadido al carrito ---------- */

.cluster-aviso {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  max-width: min(24rem, calc(100vw - 2rem));
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--cluster-ink);
  box-shadow: 0 18px 40px rgb(11 12 15 / 30%);
  color: #fff;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity 220ms ease, transform 220ms ease;
}

.cluster-aviso.esta-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cluster-aviso__icono {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1c6b46;
  font-size: 0.8rem;
  place-items: center;
}

.cluster-aviso__cuerpo {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
  line-height: 1.35;
}

.cluster-aviso__cuerpo strong {
  font-size: 0.85rem;
  font-weight: 800;
}

.cluster-aviso__cuerpo span {
  overflow: hidden;
  color: rgb(255 255 255 / 72%);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cluster-aviso__ver {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--cluster-blue);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
}

.cluster-aviso__ver:hover,
.cluster-aviso__ver:focus-visible {
  background: #0060c4;
  color: #fff;
}

.cluster-aviso__cerrar {
  flex: 0 0 auto;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 60%);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.cluster-aviso__cerrar:hover,
.cluster-aviso__cerrar:focus-visible {
  color: #fff;
}

@media (max-width: 35rem) {
  .cluster-aviso {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cluster-aviso {
    transition: opacity 220ms ease;
    transform: none;
  }
}

/* Oculta a la vista pero lo deja en el árbol de accesibilidad: la rejilla
   necesita un h3 para no romper la jerarquía cuando la categoría no tiene
   subgrupos, pero mostrarlo sería redundante con el h2 de arriba. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Enlaces a artículos del blog ----------
   Son el enlace interno que convierte la página en centro del tema. Se les da
   entidad de tarjeta para que no parezcan un pie de página. */

.cluster-articulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}

.cluster-articulo {
  display: grid;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cluster-line);
  border-left: 3px solid var(--cluster-blue);
  border-radius: 0.9rem;
  background: var(--cluster-surface);
  color: inherit;
  gap: 0.35rem;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cluster-articulo:hover,
.cluster-articulo:focus-visible {
  box-shadow: 0 10px 26px rgb(11 12 15 / 8%);
  color: inherit;
  transform: translateY(-2px);
}

.cluster-articulo__etiqueta {
  color: var(--cluster-blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cluster-articulo__titulo {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-wrap: pretty;
}

.cluster-articulo__resumen {
  color: var(--cluster-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  text-wrap: pretty;
}

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

  .cluster-articulo:hover,
  .cluster-articulo:focus-visible {
    transform: none;
  }
}


/* ---------- Guía de pasos ----------
   Ojo con el nombre: .cluster-pasos ya es el selector de cantidad de la
   tarjeta de producto. Esto es otra cosa, de ahí .cluster-guia.

   El número lo pone un contador CSS y no el marcado: es decoración, y el orden
   real ya lo comunica el <ol> a quien navega con lector de pantalla. */

.cluster-guia {
  display: grid;
  margin: 0;
  padding: 0;
  counter-reset: paso;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none;
}

.cluster-guia__paso {
  padding: 1.4rem 1.25rem 1.25rem;
  border: 1px solid var(--cluster-line);
  border-radius: 0.9rem;
  background: var(--cluster-ground);
  counter-increment: paso;
}

.cluster-guia__paso::before {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-items: center;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--cluster-ink);
  color: #fff;
  content: counter(paso);
  font-size: 0.85rem;
  font-weight: 800;
}

.cluster-guia__titulo {
  margin: 0 0 0.35rem;
  color: var(--cluster-ink);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cluster-guia__texto {
  margin: 0;
  color: var(--cluster-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.cluster-nota {
  max-width: 44rem;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  color: var(--cluster-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.cluster-nota a {
  color: var(--cluster-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ---------- Fórmula ----------
   Cada ingrediente con su dosis. La cantidad va antes que el nombre y en el
   dorado del acento: es el dato que sostiene el argumento premium, así que es
   lo primero que debe saltar al ojo al escanear la rejilla. */

.cluster-formula {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  list-style: none;
}

.cluster-formula__item {
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--cluster-line);
  border-top: 3px solid var(--cluster-gold);
  border-radius: 0.9rem;
  background: var(--cluster-surface);
}

.cluster-formula__dosis {
  margin: 0;
  color: var(--cluster-ink);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cluster-formula__nombre {
  margin: 0.4rem 0 0.5rem;
  color: var(--cluster-ink);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cluster-formula__texto {
  margin: 0;
  color: var(--cluster-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Bloque destacado ----------
   El argumento que más pesa en la decisión de compra, sacado del cuerpo de
   texto para que no se pierda entre párrafos. Fondo oscuro: es el mismo gesto
   del hero, y lo separa del resto de la sección clara. */

.cluster-destacado {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #202127, var(--cluster-bg) 70%);
  color: #fff;
}

.cluster-destacado::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(circle at 88% 15%, var(--cluster-glow), transparent 42%);
  content: "";
  pointer-events: none;
}

.cluster-destacado > * {
  position: relative;
  z-index: 1;
}

.cluster-destacado__titulo {
  margin: 0 0 0.6rem;
  color: var(--cluster-gold);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.cluster-destacado__texto {
  max-width: 46rem;
  margin: 0;
  color: rgb(255 255 255 / 86%);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
  line-height: 1.75;
  text-wrap: pretty;
}