.title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

/* Título exclusivo de #/inicio. */
.inicio-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

/* Título exclusivo de #/bienvenida (igual que .title pero a 32px). */
.bienvenida-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 50px;
}

/* Título exclusivo de #/bienestar. */
.bienestar-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
}

/* Texto exclusivo de #/menstruacion-extra. Los \n del texto (ver data.js)
 * se respetan gracias a white-space: pre-line. */
.menstruacion-extra-subtitle {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
}

/* #/detalle: icono de la categoría (option-card__icon reutilizado) encima
 * del subtitle con su nombre. */
.detalle-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: 20px;
  font-weight: 400;
}

.field__hint {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: -4px;
}

.input {
  appearance: none;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px var(--space-3);
  font-size: 15px;
}

.btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 24px;
  font-weight: 500;
  transition:
    background-color 150ms ease,
    opacity 150ms ease;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid #913D09;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: var(--space-3);
  background: var(--color-option-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.option[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: color-mix(
    in srgb,
    var(--color-primary) 10%,
    var(--color-option-bg)
  );
  font-weight: 600;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 10px;
  padding-top: 25px;
  padding-bottom: 15px;
  background: var(--color-option-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.option-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: color-mix(
    in srgb,
    var(--color-primary) 10%,
    var(--color-option-bg)
  );
}

.option-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.option-card__label {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
}

.product-hero {
  background: linear-gradient(
    180deg,
    rgba(229, 151, 133, 0.05) 0%,
    rgba(229, 151, 133, 0.5) 100%
  );
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  padding-bottom: 80px;
}

/*
 * Collage de botes dentro de .product-hero. Reproduce funcionamiento/diseños/
 * 1-producto.png a 6-productos.png. Medidas por conteo sacadas midiendo los
 * mockups a nivel de píxel (ancho de bote y solape como % del ancho de la
 * caja): 1=52%/sin solape, 2=53%/-23%, 3=39%/-12%, 4=33%/-10%; con 5-6
 * (dos filas de hasta 3) los botes de cada fila casi no se solapan entre sí
 * (~33% de ancho, separados por un pequeño gap) y es la fila inferior la
 * que se solapa verticalmente con la superior.
 */
.product-collage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-collage__row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.product-collage__row img {
  width: 33%;
  max-width: 130px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

/* En las filas de una sola fila (2-4 productos) cada bote va un poco más
 * abajo que el anterior (el más al frente, el último del DOM, es el más
 * bajo) — ver 2/3/4-productos.png. Con 2 filas (5-6) no hay este escalonado,
 * cada fila queda nivelada y solo se solapan las filas entre sí. */
.product-collage__row img:nth-child(2) {
  transform: translateY(9%);
}

.product-collage__row img:nth-child(3) {
  transform: translateY(18%);
}

.product-collage__row img:nth-child(4) {
  transform: translateY(27%);
}

.product-collage[data-count="5"] .product-collage__row img,
.product-collage[data-count="6"] .product-collage__row img {
  transform: none;
}

.product-collage[data-count="1"] .product-collage__row img {
  width: 52%;
  max-width: 200px;
}

.product-collage[data-count="2"] .product-collage__row img {
  width: 53%;
  max-width: 195px;
}

.product-collage[data-count="2"] .product-collage__row img + img {
  margin-left: -23%;
}

.product-collage[data-count="3"] .product-collage__row img {
  width: 39%;
  max-width: 150px;
}

.product-collage[data-count="3"] .product-collage__row img + img {
  margin-left: -12%;
}

.product-collage[data-count="4"] .product-collage__row img {
  width: 33%;
  max-width: 130px;
}

.product-collage[data-count="4"] .product-collage__row img + img {
  margin-left: -10%;
}

/* 5 y 6 productos: dos filas; los botes de cada fila casi se tocan (gap
 * pequeño, sin solape) y la fila inferior se solapa hacia arriba, dentro
 * de la fila anterior. */
.product-collage[data-count="5"] .product-collage__row,
.product-collage[data-count="6"] .product-collage__row {
  gap: 2%;
}

.product-collage[data-count="5"] .product-collage__row + .product-collage__row,
.product-collage[data-count="6"] .product-collage__row + .product-collage__row {
  margin-top: -10%;
}

.product-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Si el número de productos es impar, el último ocupa el ancho completo
 * (ver 3-productos.png y 5-productos.png). Con número par se reparten en
 * un grid de 2 columnas normal (2, 4 y 6 productos). */
.product-list__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.product-list__item {
  text-align: center;
  background: #fcece2;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.product-list__name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
}

.product-list__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-text-secondary);
}

.product-list__footnote {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  margin-top: 6px;
  color: var(--color-text-secondary);
}