/* SleepHome — portada. Requiere tokens.css + components.css.
   Solo se carga donde está el hero. Fuente: SleepHome Home.dc.html (versión 2a). */

/* .shm-inner vive en components.css (se usa en todo el sitio, no solo el Home). */

/* Kadence añade separación vertical al contenido según el Personalizador (en
   prod venía activada y metía un hueco sobre el hero). El hero es a sangre y
   debe pegar al header, así que lo anulamos aquí en vez de depender del ajuste.
   !important porque Kadence imprime su CSS en un <style> del head, después
   de esta hoja. */
.content-area { margin-top: 0 !important; }
.site-main > .content-wrap,
.entry-content-wrap { padding-top: 0 !important; }

/* Anular el margen vertical que WP mete entre bloques de nivel superior:
   dejaba ver el fondo arena (#F0EDE7) entre secciones. Cada sección ya trae
   su propio padding, así que van pegadas. Especificidad 0,2,0 para ganar. */
.wp-block-group.shm-hero,
.wp-block-group.shm-trust,
.wp-block-group.shm-cats,
.wp-block-group.shm-test,
.wp-block-group.shm-fav,
.wp-block-group.shm-reviews {
  margin-block: 0;
}

/* Antetítulo reutilizable en varias secciones del Home. */
.shm-eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: var(--fw-medium);
  margin: 0 0 22px;
}

/* ============ Hero ============ */

/* Sin gap sobre el hero y fondo blanco (Unboxed muestra el crema del sitio). */
.shm-hero {
  margin-top: 0;
  background: var(--color-bg);
}

/* Hero contenido a 1280 centrado (fiel al diseño en ultrawide). */
.shm-hero__cols.wp-block-columns {
  gap: 0;
  margin-inline: auto;
  margin-block: 0;
  max-width: var(--container-max);
  align-items: stretch; /* ambas columnas a la misma altura */
}

/* Texto centrado vertical dentro de su columna a altura completa. */
.shm-hero__text.wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 92px 64px 92px 48px;
}

/* Anular el "block gap" de WP entre hijos de la columna: el espaciado lo
   controlan los márgenes de cada elemento, no el gap automático. */
.shm-hero__text.wp-block-column > * {
  margin-top: 0;
  margin-bottom: 0;
}

.shm-hero__text .shm-eyebrow { margin-bottom: 22px; }
.shm-hero__text .shm-hero__title { margin-bottom: 24px; }
.shm-hero__text .shm-hero__lead { margin-bottom: 36px; }

.shm-hero__title {
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: -.5px;
  margin: 0 0 24px;
}

.shm-hero__lead {
  font-size: var(--text-lead);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
  max-width: 430px;
  margin: 0 0 36px;
}

.shm-hero__actions.wp-block-buttons {
  gap: var(--space-4);
  align-items: center;
}

/* Botón primario del hero: valores exactos del diseño (Kadence mete otros). */
.shm-hero__actions .wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  border-radius: var(--radius-btn);
  padding: 16px 34px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-medium);
  letter-spacing: .5px;
}

.shm-hero__actions .wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

/* El 2º botón es un enlace subrayado, no una cápsula. Especificidad alta
   para ganarle a los estilos de botón de Kadence (borde + padding + fondo). */
.shm-hero__actions .shm-btn-link .wp-block-button__link {
  background: transparent;
  color: var(--color-brand-strong);
  border: 0;
  border-bottom: 1px solid var(--color-accent-soft);
  border-radius: 0;
  padding: 0 0 3px;
  font-size: 16px;
  font-weight: var(--fw-medium);
}

.shm-hero__actions .shm-btn-link .wp-block-button__link:hover {
  background: transparent;
  color: var(--color-brand-stronger);
  border-bottom-color: var(--color-accent);
}

/* --- Slider --- */
.shm-hero__media.wp-block-column {
  align-self: stretch;
  display: flex; /* deja que el slider llene la altura de la columna */
}

.shm-hero__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1; /* imagen cuadrada 1:1 */
  overflow: hidden;
}

/* Selector con .wp-block-image (0,3,0) para ganarle a Kadence
   figure.wp-block-image{margin-bottom} y a core .wp-block-image img{height:auto};
   sin esto la imagen no llena el alto y los controles caen debajo. */
.shm-hero__slider .shm-hero__slide.wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.shm-hero__slider .shm-hero__slide.wp-block-image.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* img posicionado absoluto: llena el slide sin depender de height:100%,
   que Kadence/core alteran. A prueba de balas. */
.shm-hero__slider .shm-hero__slide.wp-block-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shm-hero__dots {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: flex;
  gap: var(--space-2);
  z-index: 4;
}

.shm-hero__dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  padding: 0;
  transition: width .3s ease, background .3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.shm-hero__dot.is-active {
  width: 26px;
  background: var(--color-bg);
}

.shm-hero__arrows {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  gap: var(--space-2);
  z-index: 4;
}

.shm-hero__arrow {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--color-text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
}

.shm-hero__arrow:hover {
  background: var(--color-bg);
}

/* ============ Responsive ============
   El handoff no trae specs de móvil — puntos de corte tentativos. */

@media (max-width: 900px) {
  .shm-hero__cols.wp-block-columns {
    flex-wrap: wrap;
  }
  /* .wp-block-column para igualar la especificidad de la regla base
     (.shm-hero__text.wp-block-column); si no, gana el padding de escritorio. */
  .shm-hero__text.wp-block-column {
    padding: 30px var(--space-5) 44px;
  }
  .shm-hero__title {
    font-size: 40px;
  }
  .shm-hero__slider {
    /* Los slides son promos cuadradas (1:1) con texto; recortarlas cortaba el
       texto arriba/abajo. En móvil mostramos el cuadrado completo. */
    aspect-ratio: 1;
  }
}

@media (max-width: 560px) {
  .shm-hero__text.wp-block-column {
    padding: 22px var(--space-5) 36px;
  }
  .shm-hero__title {
    font-size: 34px;
  }
}

/* ============ Encabezados compartidos del Home ============ */

.shm-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-h2);
  color: var(--color-text);
  margin: 0;
}

.shm-link-underline a {
  font-size: 15px;
  color: var(--color-brand-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-soft);
  padding-bottom: 3px;
}

.shm-link-underline a:hover { color: var(--color-brand-stronger); }

/* ============ Sellos de confianza ============ */

.shm-trust { background: var(--color-bg); }

/* Markup = wp:columns (flex). Forzamos grid encima y anulamos gap/margen de core. */
.shm-trust__grid.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-block: 0; /* margin-inline:auto lo pone .shm-inner — centra la fila */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-inline: 0;
}

.shm-trust__item.wp-block-column {
  display: block; /* anula el flex-column de core y su gap entre párrafos */
  padding: 26px 24px;
  text-align: center;
  border-right: 1px solid var(--color-border);
}

.shm-trust__item.wp-block-column:last-child { border-right: 0; }

/* Especificidad 0,2,0 para ganarle al margin-bottom de párrafo de Kadence. */
.shm-trust__item .shm-trust__title {
  margin: 0;
  font-size: 15px;
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.shm-trust__item .shm-trust__sub {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ============ Categorías editorial ============ */

.shm-cats { background: var(--color-bg); padding-block: 84px 70px; }

.shm-cats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: var(--space-4);
}

.shm-cats__grid.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 tarjetas cuadradas iguales */
  gap: 18px;
  margin: 0;
}

.shm-cats__item.wp-block-column {
  position: relative;
  aspect-ratio: 1; /* cuadrada 1:1 */
  border-radius: 4px;
  overflow: hidden;
}

.shm-cats__img {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
}

.shm-cats__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shm-cats__label {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: var(--fw-bold);
  background: var(--color-bg);
  padding: 5px 14px;
  border-radius: 3px;
  line-height: 1.2;
}

.shm-cats__label a {
  color: var(--color-text);
  text-decoration: none;
}

/* La 2ª y 3ª tarjeta (columnas angostas) llevan la etiqueta más pequeña. */
.shm-cats__item.wp-block-column:nth-child(n+2) .shm-cats__label { font-size: 23px; }

/* ============ Banda test de descanso (teal) ============ */

.shm-test { background: var(--color-brand); padding-block: 78px; }

.shm-test__grid.wp-block-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-block: 0; /* centrado por .shm-inner */
  align-items: center;
}

.shm-test__intro.wp-block-column,
.shm-test__cards.wp-block-column { margin: 0; }

.shm-eyebrow--on-teal { color: rgba(255,255,255,.9); letter-spacing: 3px; }

.shm-test__title { font-size: 36px; color: var(--color-text-on-brand); line-height: 1.12; margin-bottom: 18px; }

.shm-test__lead {
  font-size: 17px;
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,.92);
  max-width: 440px;
  margin: 0 0 30px;
}

.shm-test__cards.wp-block-column { display: flex; flex-direction: column; gap: 14px; }

.shm-test__card.wp-block-group {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 22px 26px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin: 0;
}

/* Especificidad 0,2,0: sin esto Kadence añade margin-bottom al párrafo e
   infla la altura de la tarjeta. */
.shm-test__card .shm-test__num { margin: 0; flex: none; font-family: var(--font-heading); font-size: 23px; color: var(--color-accent-soft); }
.shm-test__card .shm-test__q { margin: 0; font-size: 17px; color: var(--color-text); }

/* Botón dorado (secundario) */
.shm-btn-accent .wp-block-button__link {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-text);
  border: 0;
  border-radius: var(--radius-btn);
  padding: 16px 34px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: .5px;
}

.shm-btn-accent .wp-block-button__link:hover { background: var(--btn-accent-bg-hover); color: var(--color-text-on-brand); }

/* ============ Favoritos ============ */

.shm-fav { background: var(--color-bg); padding-block: 84px 70px; }
.shm-fav .shm-h2 { margin-bottom: 40px; }
.shm-fav ul.products { grid-template-columns: repeat(4, 1fr); }

/* ============ Reseñas ============ */

.shm-reviews { background: var(--color-bg-alt); padding-block: 80px; border-top: 1px solid var(--color-border); }

/* Estilo por estructura (no por clase): el título es el h2 y el rating el
   párrafo, hijos directos de .shm-inner. Resiste ediciones que pierden clases.
   Las tarjetas están más adentro (dentro de columnas), así que > p no las toca. */
.shm-reviews .shm-inner > h2 {
  font-size: 32px;
  margin: 0 0 6px;
  text-align: center;
}

.shm-reviews .shm-inner > p {
  font-size: 16px;
  color: var(--color-accent);
  letter-spacing: 1px;
  text-align: center;
  margin: 0 0 38px;
}

/* Párrafo vacío sobrante de una edición: no ocupa espacio. */
.shm-reviews .shm-inner > p:empty { display: none; }

.shm-reviews__grid.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: 0;
}

.shm-reviews__card.wp-block-column {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px;
  margin: 0;
}

.shm-reviews__stars { color: var(--color-accent); font-size: 16px; margin: 0 0 14px; }
.shm-reviews__text { font-size: 17px; line-height: var(--lh-snug); color: #444; margin: 0 0 18px; font-weight: var(--fw-light); }
.shm-reviews__author { font-size: 15px; color: var(--color-text-tertiary); font-weight: var(--fw-medium); margin: 0; }

/* ============ Responsive secciones ============ */

@media (max-width: 900px) {
  .shm-test__grid.wp-block-columns { grid-template-columns: 1fr; gap: var(--space-8); }
  .shm-cats__grid.wp-block-columns { grid-template-columns: 1fr 1fr; }
  .shm-reviews__grid.wp-block-columns { grid-template-columns: 1fr; }
  .shm-fav ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .shm-trust__grid.wp-block-columns { grid-template-columns: 1fr 1fr; }
  .shm-trust__item.wp-block-column:nth-child(2) { border-right: 0; }
  .shm-cats__grid.wp-block-columns { grid-template-columns: 1fr; }
}