/* ==========================================================================
   Tienda (WooCommerce archive) — frame Figma 1661:267
   ========================================================================== */

.site-main.site-main--tienda {
  padding-block: 0;
  padding-inline: 0;
  max-width: none;
}

/* ==========================================================================
   Hero Tienda — mismo patrón que Home pero con altura propia
   ========================================================================== */
.hero--tienda {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding-block: calc(var(--spacing-unit) * 2.5);
  overflow: hidden;
}

.hero--tienda .hero__inner {
  display: grid;
  gap: 2rem;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
}

@media (min-width: 1024px) {
  .hero--tienda {
    padding-block: 4rem;
  }
  .hero--tienda .hero__inner {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: 3rem;
  }
  .hero--tienda .hero__image {
    justify-self: end;
    max-width: 800px;
  }
}

/* ==========================================================================
   Intro Tienda — texto explicativo bajo el hero
   ========================================================================== */
.tienda__intro {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-primary);
  max-width: 1040px;
}

.tienda__intro p {
  margin-bottom: 1em;
}

/* ==========================================================================
   "Y para los más peques…" — banda lavanda full-bleed: texto a la izquierda
   e ilustración (niña + Monstruo del Talento) a la derecha. Mismo patrón de
   banda que .por-cierto pero con color propio y media a la derecha.
   ========================================================================== */
.peques {
  background-color: var(--color-peques);
  color: var(--color-text-on-dark);
}

.peques__inner {
  position: relative;                  /* ancla para la ilustración que sobresale en desktop */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

/* El título reutiliza .section__title (tamaño 40px) pero en blanco sobre la banda. */
.peques__title {
  color: var(--color-text-on-dark);
  margin: 0 0 1rem;
}

.peques__text {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text-on-dark);
}

.peques__text p {
  margin: 0 0 1em;
}

.peques__text p:last-child {
  margin-bottom: 0;
}

.peques__media {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;                 /* centrada sobre el texto en móvil */
}

/* Tablet: dos columnas con la ilustración contenida (sin sobresalir). */
@media (min-width: 768px) {
  .peques__inner {
    grid-template-columns: 1fr minmax(0, 460px);   /* texto | ilustración */
    gap: 3rem;
  }
  .peques__media {
    max-width: 460px;
    margin-inline: 0;
    justify-self: end;
  }
}

/* Desktop: la ilustración sobresale un poco por arriba y por abajo de la banda.
   Absoluta y centrada en vertical, más alta que el texto (que define la altura
   de la banda). width fija + height auto => mantiene la proporción. */
@media (min-width: 1024px) {
  .peques {
    position: relative;
    z-index: 1;                        /* la ilustración que sobresale queda por encima de las secciones vecinas */
    overflow: visible;
  }
  .peques__inner {
    grid-template-columns: 1fr 420px;  /* col 2 reservada para la ilustración (absoluta) */
  }
  .peques__media {
    position: absolute;
    top: 50%;
    right: var(--content-padding-x);
    transform: translateY(-50%);
    width: 420px;
    max-width: none;
    margin: 0;
  }
}

.tienda__membership-cta {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--color-primary);
  margin-top: 1.5rem;
}

/* ==========================================================================
   Grid de productos — 1 / 2 / 4 columnas según breakpoint.
   WooCommerce layout aplica `float: left; width: 22.05%` por defecto a
   `ul.products li.product`, lo que rompe nuestra grid. Lo anulamos.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 2 columnas ya en móvil: una sola columna dejaba las cards e imágenes
     enormes y "raras" en pantallas pequeñas. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* Anula float/width que WC inyecta en los items para que la grid mande.
   `woocommerce-smallscreen.css` fuerza `width:48%; float:left` por debajo de
   768px con la misma specificity que el tema y se carga DESPUÉS, así que sin
   `!important` ganaba WC: las cards salían a media columna con un hueco a la
   derecha. Con `!important` la grid manda en todos los breakpoints. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
.product-card {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

/* WC añade un clearfix `::before/::after { content: " "; display: table }`
   sobre `ul.products`. En grid eso se convierte en items invisibles que
   ocupan celdas y desplazan las cards. Neutralizar. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
  content: none;
  display: none;
}

@media (min-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ==========================================================================
   Card de producto
   ========================================================================== */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background-color: var(--color-bg);
  /* Alineación vertical entre cards: el body ocupa el resto del card y
     dentro de él `margin-top: auto` empuja precio+botón al bottom, así
     todos los CTAs quedan al mismo Y aunque los títulos varíen de altura. */
}

.product-card__image {
  display: block;
  aspect-ratio: 238 / 217;
  overflow: hidden;
  border-radius: var(--border-radius-image);
  background-color: var(--color-primary-alpha-10);
  flex-shrink: 0;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 250ms ease;
}

.product-card__image:hover img {
  transform: scale(1.04);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;                            /* ocupa todo el espacio bajo la imagen */
  gap: 0.4rem;
  padding-block: 0.5rem 0;
}

.product-card__title {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-product-title-size);
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
  /* Reserva espacio para títulos de hasta 2 líneas, así los cards con
     títulos de 1 línea no descolocan el subtitle/disclaimer/price. */
  min-height: calc(2 * 1.5 * var(--font-product-title-size));
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
}

.product-card__title a:hover,
.product-card__title a:focus {
  text-decoration: underline;
}

.product-card__subtitle {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--font-product-title-size);
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
}

.product-card__disclaimer {
  font-family: var(--font-ui);
  font-size: var(--font-disclaimer-size);
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
}

.product-card__price,
.product-card .price {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-price-size);
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
  margin-top: auto;                        /* empuja precio + botón al bottom para alinear entre cards */
  padding-top: 0.4rem;
}

/* Anula los estilos de precio "tachado" sin oferta de WC, mantiene el del precio actual. */
.product-card .price ins {
  background: transparent;
  text-decoration: none;
}

.product-card .price del {
  color: var(--color-text-light);
  font-weight: 400;
  margin-right: 0.5rem;
}

.product-card__cta {
  margin-top: 0.5rem;
  width: 100%;
}

/* ==========================================================================
   Sección "¡Tu compra suma!"
   ========================================================================== */
.tu-compra-suma__copy {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-primary);
  max-width: 1040px;
  margin-bottom: 1.5rem;
}

.tu-compra-suma__copy p {
  margin-bottom: 1em;
}

/* ==========================================================================
   Helpers de color inline (usados en fragmentos con span dentro de párrafos)
   ========================================================================== */
.text-accent { color: var(--color-accent); }
.text-secondary { color: var(--color-secondary); }
.link-secondary {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 700;
}
.link-secondary:hover,
.link-secondary:focus {
  text-decoration: underline;
}