/* =========================================================
   BIOSELF — main.css
   Pasada funcional (no es el diseño final): tipografía del
   sistema, layout simple, y los componentes de las funciones
   configurables desde Configuración. El diseño premium queda
   para una etapa aparte.
   ========================================================= */

:root {
  /* Paleta "Rincón Creativo" — pastel, cálida y artesanal. */
  --lila: #c9b8d9;
  --menta: #b9d9cd;
  --rosa-claro: #fce4e7;
  --rosa: #f2a6b6;
  --menta-medio: #a6d4c3;
  --tinta: #1a1a1a;
  --texto: #3a3a3a;

  /* Nombres heredados del tema, remapeados a la paleta nueva para que los
     componentes existentes la tomen sin tocarlos uno por uno. dark y
     deepforest quedan en tinta: donde todavía haya un fondo oscuro con
     texto claro el contraste sigue siendo correcto (las bandas que pasan a
     pastel se resuelven en rincon.css, con texto oscuro). */
  --color-bg: var(--rosa-claro);
  --color-sage: var(--menta);
  --color-taupe: var(--lila);
  --color-dark: var(--tinta);
  --color-dark-soft: var(--texto);
  --color-deepforest: var(--tinta);
  --color-white: #ffffff;
  --color-text: var(--texto);
  --color-text-muted: #5f5560;
  --color-border: #f0d3da;
  --color-success: #2f6b55;
  --color-error: #a2453a;

  /* --font-heading lo usan también botones, menú y etiquetas en
     mayúsculas, así que queda en la sans redondeada; la script de pincel
     va solo en títulos (--font-script, aplicada en rincon.css). */
  --font-script: "Pacifico", "Brush Script MT", cursive;
  --font-heading: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito", "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 6px 24px rgba(26, 26, 26, 0.06);

  --container-width: 1200px;
  --space-lg: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
}

a {
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (max-width: 640px) {
  .container {
    padding-inline: 1.75rem;
  }
}

/* ---------- Header ----------
   Fondo blanco sólido y sticky en todas las páginas: el hero real tiene
   fotografía clara, así que un header transparente con texto claro
   quedaba ilegible encima. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--color-white);
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(68, 57, 53, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}

/* Selector con .site-header por especificidad: WooCommerce trae
   ".woocommerce-page img { height: auto; max-width: 100%; }" (1 clase + 1
   elemento) en las páginas de shop/categoría, que le empataría en
   especificidad a ".site-header__logo-mark" sola (1 clase) y el tamaño del
   logo quedaría al tamaño real del archivo en esas páginas. */
.site-header .site-header__logo-mark {
  flex: none;
  width: auto;
  height: 2.35rem;
  object-fit: contain;
}

.site-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.site-header__logo-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.site-header__logo-tagline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Nav desktop */
.site-header__nav {
  margin-inline: auto;
}

.site-header__nav > ul {
  list-style: none;
  display: flex;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
}

.site-header__nav > ul > li {
  position: relative;
}

.site-header__nav a {
  text-decoration: none;
  color: inherit;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.4rem 0;
  position: relative;
}

.site-header__nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-header__nav > ul > li:hover > a::after,
.site-header__nav > ul > li > a:focus-visible::after {
  transform: scaleX(1);
}

/* Dropdown */
.site-header__dropdown {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(68, 57, 53, 0.1);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.has-dropdown:hover .site-header__dropdown,
.has-dropdown:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header__dropdown li a {
  display: block;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
}

.site-header__dropdown li a::after {
  display: none;
}
.site-header__dropdown li a:hover {
  background: var(--color-bg);
}

/* Agrupa buscador + carrito a la derecha del nav */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Buscador + cuenta + carrito: misma caja (24x24) para que los íconos
   queden centrados y alineados entre sí, más allá del tamaño propio de
   cada SVG. */
.site-header__search-toggle,
.site-header__account,
.site-header__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.site-header__search-toggle svg,
.site-header__account svg,
.site-header__cart svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Carrito */
.site-header__cart-wrap {
  position: relative;
}

.site-header__cart {
  position: relative;
}

.site-header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Mini-carrito desplegable */
.mini-cart {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 2rem);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(68, 57, 53, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
  z-index: 110;
}

.site-header__cart-wrap.is-open .mini-cart {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mini-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.mini-cart__header h3 {
  margin: 0;
  font-size: 1rem;
}

.mini-cart__close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.25rem;
}

.mini-cart__content {
  padding: 1rem 1.25rem 1.25rem;
  max-height: 60vh;
  overflow-y: auto;
}

.mini-cart__empty {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.mini-cart__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mini-cart__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  position: relative;
}

.mini-cart__thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.mini-cart__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mini-cart__name {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-cart__price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.mini-cart__qty-static {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.mini-cart__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.mini-cart__qty-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
}

.mini-cart__qty-btn:hover {
  background: var(--color-bg);
}

.mini-cart__qty-value {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 1ch;
  text-align: center;
}

.mini-cart__remove {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.15rem;
}

.mini-cart__remove:hover {
  color: var(--color-error);
}

.mini-cart__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.mini-cart__actions {
  display: flex;
  gap: 0.6rem;
}

.mini-cart__actions .button-outline,
.mini-cart__actions .button-primary {
  flex: 1;
  text-align: center;
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
}

.mini-cart__actions .button-outline {
  border-color: var(--color-border);
  color: var(--color-dark);
}

/* Buscador: popup centrado con backdrop, resultados en tiempo real */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1.5rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}

.search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(68, 57, 53, 0.55);
}

.search-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(68, 57, 53, 0.25);
  overflow: hidden;
  transform: translateY(-16px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.is-open .search-modal__panel {
  transform: translateY(0);
}

.search-modal__form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.search-modal__form svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  flex: none;
}

.search-modal__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  background: none;
}

.search-modal__input::placeholder {
  color: var(--color-text-muted);
}

.search-modal__close {
  flex: none;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
}

.search-modal__close svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

.search-modal__results {
  max-height: 60vh;
  overflow-y: auto;
}

.search-modal__hint,
.search-modal__empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.search-modal__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.search-modal__item a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.search-modal__item a:hover {
  background: var(--color-bg);
}

.search-modal__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-border);
}

.search-modal__info {
  flex: 1;
  min-width: 0;
}

.search-modal__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-modal__price {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

body.bioself-search-open {
  overflow: hidden;
}

/* Hamburger (mobile) — trazo fino, minimalista */
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 22px;
  height: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-header__menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.site-header__mobile-nav {
  display: none;
}

@media (max-width: 960px) {
  .site-header__inner {
    justify-content: flex-start;
    padding: 10px 10px;
  }

  .site-header__logo {
    order: 1;
  }

  .site-header__nav {
    display: none;
  }

  /* Orden mobile: logo a la izquierda, buscador + carrito + menú
     agrupados a la derecha (en ese orden). */
  .site-header__actions {
    order: 2;
    margin-left: auto;
    gap: 1rem;
  }

  .site-header__menu-toggle {
    display: flex;
    order: 3;
  }

  /* Panel mobile: minimalista, tipografía chica, botón de cerrar fijo
	   arriba y abajo del todo. */
  .site-header__mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--color-bg);
    color: var(--color-dark);
    transform: translateY(-100%);
    opacity: 0;
    transition:
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.4s ease;
    z-index: 90;
  }

  .site-header__mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
  }

  .site-header__mobile-top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__mobile-top-label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .site-header__mobile-close {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--color-dark);
    cursor: pointer;
    display: flex;
  }

  .site-header__mobile-close svg {
    width: 18px;
    height: 18px;
  }

  .site-header__mobile-nav > ul {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
  }

  .site-header__mobile-nav li a {
    display: block;
    padding: 0.6rem 0;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__mobile-nav a.site-header__mobile-account {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .site-header__mobile-account svg {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: currentColor;
  }

  /* "Más" y "Cuidado facial": acordeones nativos (<details>), sin JS.
	   La flechita rota al abrirse, mismo trazo fino que el resto del menú. */
  .site-header__mobile-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    list-style: none;
  }

  .site-header__mobile-details summary::-webkit-details-marker {
    display: none;
  }

  .site-header__mobile-details summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    flex: none;
  }

  .site-header__mobile-details[open] > summary::after {
    transform: rotate(-135deg);
  }

  .site-header__mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem 1rem;
  }

  .site-header__mobile-submenu li a {
    font-size: 0.82rem;
    font-weight: 400;
    border-bottom: none;
    padding: 0.5rem 0;
  }

  .site-header__mobile-submenu .site-header__mobile-details summary {
    font-size: 0.82rem;
    font-weight: 400;
    border-bottom: none;
    padding: 0.5rem 0;
  }

  .site-header__mobile-close--bottom {
    flex: none;
    display: block;
    width: calc(100% - 3rem);
    margin: 0 auto 1.5rem;
    padding: 0.8rem;
    border: 1px solid var(--color-dark);
    border-radius: 999px;
    background: transparent;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
  }

  .site-header__mobile-close--bottom:hover {
    background: var(--color-dark);
    color: var(--color-white);
  }
}

body.bioself-menu-open {
  overflow: hidden;
}

/* ---------- Cards de producto ----------
   Minimalistas: sin recuadros ni sombras pesadas, la imagen es la
   protagonista. El único gesto "naturaleza" es el corner-radius asimétrico
   de la imagen (evoca una hoja, sin caer en un ícono literal) y el
   subrayado del nombre que se dibuja al hover, coherente con el mismo
   recurso que ya usamos en la nav del header. */
/* Cards de producto — todo escopeado bajo .bioself-products-grid /
   .bioself-product-card / .bioself-add-to-cart (clases propias que
   agregamos vía PHP en inc/frontend-features.php, sin usar antes en
   ningún lado). Al ser exclusivas, cualquier regla nuestra que las
   combine gana la cascada contra las hojas de estilo de WooCommerce sin
   necesitar !important ni selectores gigantes. */

.bioself-product-card {
  margin: 0;
  list-style: none;
}

.bioself-product-card .woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  padding: 0.5em 0;
  margin: 0;
  font-size: 1em;
  min-height: 53px;
}
.bioself-product-card .bioself-product-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 40px 8px 40px 8px;
  background: var(--color-border);
  margin-bottom: 1rem;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease;
}

.bioself-product-card:hover .bioself-product-thumb {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(68, 57, 53, 0.12);
}

/* La imagen de WooCommerce trae width/height como atributos HTML y su
   propia regla de ancho/alto — acá reemplazamos por completo ese
   comportamiento (recorte "cover" a pantalla completa de la card), así
   que el !important es intencional, no un parche. */
.bioself-product-card .bioself-product-thumb__img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  margin: 0;
}

.bioself-product-card .bioself-product-thumb__hover {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.bioself-product-card:hover .bioself-product-thumb__hover {
  opacity: 1;
}

.bioself-product-card .onsale {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin: 0;
  min-height: 0;
  line-height: 1;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}

.bioself-product-card .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  min-height: 32px;
  font-weight: 500;
  margin: 0 0 0.35rem;
  display: inline-block;
  position: relative;
}

.bioself-product-card .woocommerce-loop-product__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.bioself-product-card:hover .woocommerce-loop-product__title::after {
  transform: scaleX(1);
}

.bioself-product-card .price,
.bioself-product-card .price .woocommerce-Price-amount {
  color: var(--color-text-muted);
}

.bioself-product-card .price {
  display: block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  margin-bottom: 0.85rem;
}

.bioself-product-card .price ins,
.bioself-product-card .price ins .woocommerce-Price-amount {
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 600;
}

.bioself-product-card .price del {
  opacity: 0.7;
  margin-right: 0.4rem;
}

.bioself-product-card .star-rating {
  font-size: 0.75rem;
  color: var(--color-sage);
  margin-bottom: 0.5rem;
}

/* El botón "Agregar al carrito" es el que más pelea WooCommerce trae
   consigo. Dos problemas distintos, mismo origen (specificity):
   1) padding/ancho propios — con el texto en español ("Agregar al
      carrito") más largo que el "Add to cart" original, cualquier ancho
      heredado lo hace saltar de línea. white-space:nowrap + padding
      generoso lo resuelven de raíz.
   2) WooCommerce agrega la clase "woocommerce" al <body> en Shop y
      categorías (no en el home), y ahí trae su propio reset de color,
      fondo, borde y margin-top para ".button" con más specificity que
      esta regla — sin los !important de abajo, el botón se ve distinto
      en /shop/ que en el carrusel del home. */
.bioself-product-card .bioself-add-to-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: transparent !important;
  border: 1px solid var(--color-dark) !important;
  color: var(--color-dark) !important;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.4rem !important;
  border-radius: 999px !important;
  margin-top: 0.5rem !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.bioself-product-card .bioself-add-to-cart:hover {
  background: var(--color-dark) !important;
  color: var(--color-white) !important;
}

.bioself-product-card .added_to_cart {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  text-decoration: underline;
}

@media (max-width: 960px) {
  .bioself-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .bioself-products-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-top: 4.5rem;
  background: var(--color-deepforest);
  color: rgba(244, 240, 234, 0.72);
  font-size: 0.9rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.site-footer__brand {
  padding-right: 2rem;
}

.site-footer__logo {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.site-footer__tagline {
  margin: 0;
  line-height: 1.6;
  max-width: 26rem;
}

.site-footer__col h3 {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__col a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-footer__col a:hover {
  color: var(--color-white);
}

.site-footer__newsletter p {
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.site-footer .bioself-lead-form {
  justify-content: flex-start;
}

.site-footer .bioself-lead-form input[type="email"] {
  background: rgba(244, 240, 234, 0.08);
  border-color: rgba(244, 240, 234, 0.25);
  color: var(--color-white);
}

.site-footer .bioself-lead-form input[type="email"]::placeholder {
  color: rgba(244, 240, 234, 0.5);
}

.site-footer .bioself-lead-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-sage);
}

.site-footer .bioself-lead-form button {
  background: var(--color-sage);
  color: var(--color-deepforest);
}

.site-footer .bioself-lead-form__thanks {
  color: var(--color-sage);
}

.site-footer__bottom {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(244, 240, 234, 0.12);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(244, 240, 234, 0.5);
}

.site-footer__bottom p {
  margin: 0;
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding-top: 3rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer .bioself-lead-form {
    flex-wrap: nowrap;
  }

  .site-footer .bioself-lead-form input[type="email"] {
    min-width: 0;
    flex: 1;
  }
}

/* ---------- Barra de envío gratis ---------- */
.bioself-shipping-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 1.5rem;
  text-align: center;
}

/* Carrito vacío: el wrapper del header sigue en el DOM (lo necesita el
   reemplazo de "fragments" de WooCommerce) pero no ocupa espacio ni
   dibuja el borde — bioself-shipping-bar-intro.js escucha el momento en
   que deja de tener esta clase para animar la entrada. */
.bioself-shipping-bar--empty {
  padding: 0;
  border-bottom: 0;
  height: 0;
  overflow: hidden;
}

/* Aviso emergente (bioself-shipping-bar-intro.js): tarjeta angosta y
   centrada — no ocupa el ancho de la pantalla — que aparece flotando la
   primera vez que se agrega algo al carrito y se retira deslizándose hacia
   arriba a los pocos segundos. Reusa el mismo track/fill de la barra real
   (bioself-shipping-bar__*), por eso pisa su padding/fondo/borde propios:
   acá esos elementos son solo contenido dentro de la tarjeta. */
.bioself-shipping-announce {
  position: fixed;
  top: 40%;
  left: 50%;
  z-index: 9999;
  width: min(90vw, 400px);
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(20, 20, 15, 0.28);
  padding: 1.3rem 1.5rem 1.5rem;
  text-align: center;
  pointer-events: none;
}

.bioself-shipping-announce__headline {
  margin: 0 0 0.85rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-deepforest);
}

.bioself-shipping-announce__bar .bioself-shipping-bar {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.bioself-shipping-announce__bar .bioself-shipping-bar__text {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.bioself-shipping-bar__text {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.bioself-shipping-bar__track {
  max-width: 420px;
  margin: 0 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.bioself-shipping-bar__fill {
  height: 100%;
  min-width: 6px;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.bioself-shipping-bar--cart,
.bioself-shipping-bar--checkout {
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.bioself-shipping-bar--mini-cart {
  padding: 0;
  background: transparent;
  border: none;
  text-align: left;
  margin-bottom: 1rem;
}

.bioself-shipping-bar--mini-cart .bioself-shipping-bar__text {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.bioself-shipping-bar--mini-cart .bioself-shipping-bar__track {
  max-width: none;
  margin: 0;
  height: 6px;
}

/* ---------- Toast (envío gratis en tiempo real) ---------- */
.bioself-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -20px);
  background: var(--color-dark);
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}

.bioself-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Botón de WhatsApp ---------- */
.bioself-whatsapp-button {
  position: fixed;
  bottom: 20px;
  z-index: 999;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bioself-whatsapp-button--derecha {
  right: 20px;
}
.bioself-whatsapp-button--izquierda {
  left: 20px;
}

/* ---------- Slider del home ---------- */
.bioself-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bioself-slider__track {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
}

.bioself-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.6s ease;
  display: block;
}

.bioself-slider__slide.is-active {
  opacity: 1;
  z-index: 2;
}

.bioself-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bioself-slider__img--mobile {
  display: none;
}

@media (max-width: 768px) {
  .bioself-slider__track {
    aspect-ratio: 4 / 5;
  }
  .bioself-slider__img--desktop {
    display: none;
  }
  .bioself-slider__img--mobile {
    display: block;
  }
}

.bioself-slider__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.bioself-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}

.bioself-slider__dot.is-active {
  background: #fff;
}

/* ---------- Antes/después: slider de comparación ---------- */
.bioself-before-after {
  max-width: 480px;
}

.bioself-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  background: var(--color-border);
}

.bioself-compare__after,
.bioself-compare__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.bioself-compare__before {
  clip-path: inset(0 50% 0 0);
}

.bioself-compare__label {
  position: absolute;
  top: 12px;
  background: rgba(68, 57, 53, 0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  pointer-events: none;
}

.bioself-compare__label--before {
  left: 12px;
}
.bioself-compare__label--after {
  right: 12px;
}

.bioself-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bioself-compare__handle-knob {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.bioself-compare.is-dragging .bioself-compare__handle-knob {
  transform: scale(1.08);
}

/* ---------- Video en producto ---------- */
.bioself-product-video video,
.bioself-product-video iframe {
  max-width: 100%;
}

/* ---------- Carrito: regalo, transferencia ---------- */
.bioself-gift-tag {
  display: inline-block;
  background: var(--color-sage);
  color: var(--color-dark);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.5rem;
}

.bioself-transfer-notice {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.875rem;
}

/* ---------- Modo Próximamente ---------- */
.bioself-coming-soon {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bioself-coming-soon__wrap {
  max-width: 480px;
  text-align: center;
  padding: 2rem;
}

.bioself-coming-soon__form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.bioself-coming-soon__form input[type="email"] {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.bioself-coming-soon__form button {
  background: var(--color-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.bioself-coming-soon__thanks {
  font-weight: 600;
  color: var(--color-success);
}

/* ---------- Home ---------- */

/* Animación de entrada al hacer scroll: siempre lenta y sutil (scroll-reveal.js
   agrega .is-visible una sola vez, la primera vez que la sección entra en
   pantalla). Respeta prefers-reduced-motion. */
.home-section,
.home-hero,
.home-video {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-section.is-visible,
.home-hero.is-visible,
.home-video.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-section,
  .home-hero,
  .home-video {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.home-section {
  padding: var(--space-lg, 4rem) 0;
}

.home-section__title {
  text-align: center;
  margin-bottom: 3rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-deepforest);
}

.home-section__empty {
  text-align: center;
  color: var(--color-text-muted);
}

.button-primary,
.button-outline {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-heading);
}

.button-primary {
  background: var(--color-dark);
  color: var(--color-white);
}

.button-outline {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

/* 1. Hero */
.home-hero {
  position: relative;
  background: var(--color-dark);
}

/* Texto a la izquierda con un degradé que solo oscurece esa franja — la
   parte derecha de la foto (donde suele estar el sujeto) queda intacta,
   sin un velo parejo encima que le reste impacto.
   El degradé vive en este wrapper de ancho completo (inset:0, sin
   .container) para que cubra todo el hero más allá de los 1200px del
   contenido — el "container" real es solo el wrapper interno de abajo,
   que alinea el texto con el resto de las secciones del sitio. */
.home-hero__caption {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: linear-gradient(
    90deg,
    rgba(68, 57, 53, 0.68) 0%,
    rgba(68, 57, 53, 0.4) 40%,
    rgba(68, 57, 53, 0) 68%
  );
  pointer-events: none;
}

.home-hero__caption-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.home-hero__caption-inner > * {
  pointer-events: auto;
}

.home-hero__caption h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 0.5rem;
}

.home-hero__caption p {
  margin: 0 0 1.5rem;
  max-width: 26rem;
}

@media (max-width: 768px) {
  .home-hero__caption {
    align-items: flex-end;
    padding-bottom: 2.5rem;
    background: linear-gradient(
      180deg,
      rgba(68, 57, 53, 0) 0%,
      rgba(68, 57, 53, 0.7) 65%
    );
  }

  .home-hero__caption h1 {
    font-size: 1.75rem;
  }

  .home-hero__caption p {
    font-size: 0.9rem;
    max-width: 20rem;
  }
}

/* El título, el texto y el botón cambian según el slide activo (slider.js)
   — el fade es cortito a propósito, es una actualización de contenido, no
   una animación de entrada de sección. */
.home-hero__caption [data-hero-title],
.home-hero__caption [data-hero-text],
.home-hero__caption [data-hero-button] {
  transition: opacity 0.25s ease;
}

/* Entrada escalonada del contenido del hero (título → texto → botón):
   suben y aparecen una tras otra cuando el hero entra en pantalla
   (scroll-reveal.js le pone .is-visible). fill-mode "backwards" para que,
   una vez terminada, la opacidad vuelva a manejarla el crossfade de
   cambio de slide sin quedar "trabada" por la animación. */
@keyframes bioself-hero-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.home-hero.is-visible .home-hero__caption-inner > * {
  animation: bioself-hero-in 2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.home-hero.is-visible .home-hero__caption-inner > *:nth-child(1) {
  animation-delay: 0.25s;
}

.home-hero.is-visible .home-hero__caption-inner > *:nth-child(2) {
  animation-delay: 0.55s;
}

.home-hero.is-visible .home-hero__caption-inner > *:nth-child(3) {
  animation-delay: 0.85s;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero.is-visible .home-hero__caption-inner > * {
    animation: none;
  }
}

/* Indicador de scroll del hero: el ícono de pasos de la marca (flor de 4
   pétalos, pág. 38 del manual) se transforma en el isotipo real de Bioself
   (hoja.svg) y después en flecha hacia abajo, en loop. Todo crossfade +
   escala/rotación suave — sin bounce, sin easing elástico, sin que el
   ícono "salte" o se desplace: solo cambia de forma sobre el mismo lugar.
   Velocidad ajustable vía --scroll-cue-speed. */
.bioself-scroll-cue {
  --scroll-cue-speed: 14.5s;
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 6;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 234, 0.6);
  background: rgba(244, 240, 234, 0.12);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease;
}

.bioself-scroll-cue:hover {
  background: rgba(244, 240, 234, 0.22);
  border-color: rgba(244, 240, 234, 0.85);
}

.bioself-scroll-cue__svg {
  width: 36px;
  height: 36px;
  overflow: visible;
}

.bioself-scroll-cue__shape {
  transform-origin: 62px 62px;
  transform-box: view-box;
  opacity: 0;
}

.bioself-scroll-cue__shape--flower {
  animation: bioselfCueFlower var(--scroll-cue-speed)
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bioself-scroll-cue__shape--leaf {
  animation: bioselfCueLeaf var(--scroll-cue-speed) cubic-bezier(0.4, 0, 0.2, 1)
    infinite;
}

.bioself-scroll-cue__shape--arrow {
  animation: bioselfCueArrow var(--scroll-cue-speed)
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Fases (sobre un loop de 14.5s): fade-in 1.5s, hold 2.5s, morph 2s
   (flor → hoja), hold 2.5s, morph 2s (hoja → flecha), hold 2.5s,
   fade-out 1.5s. */
@keyframes bioselfCueFlower {
  0% {
    opacity: 0;
    transform: scale(0.85) rotate(-8deg);
  }
  10.34% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  27.59% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  41.38% {
    opacity: 0;
    transform: scale(1.15) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.15) rotate(8deg);
  }
}

@keyframes bioselfCueLeaf {
  0%,
  27.59% {
    opacity: 0;
    transform: scale(0.85) rotate(-6deg);
  }
  41.38% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  58.62% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  72.41% {
    opacity: 0;
    transform: scale(1.1) rotate(6deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.1) rotate(6deg);
  }
}

@keyframes bioselfCueArrow {
  0%,
  58.62% {
    opacity: 0;
    transform: scale(0.85);
  }
  72.41% {
    opacity: 1;
    transform: scale(1);
  }
  89.66% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bioself-scroll-cue__shape {
    animation: none;
    opacity: 0;
  }
  .bioself-scroll-cue__shape--arrow {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .bioself-scroll-cue {
    bottom: 16px;
    width: 58px;
    height: 58px;
  }
  .bioself-scroll-cue__svg {
    width: 30px;
    height: 30px;
  }
}

/* Video — editorial a pantalla completa, inspirado en el mockup de home del
   manual de marca (pág. 51): foto/video a sangre con un único gesto
   interactivo, el botón de play circular centrado. El eyebrow en itálica y
   el párrafo van en una banda Deep forest debajo del frame (no encima), así
   no compiten con el botón. */
/* Título estático arriba del frame ("Mirá el método en video"): banda
   clara para separar visualmente esta sección de "Arquitectura cutánea"
   (Deep forest) que queda justo arriba. */
.home-video__heading {
  background: var(--color-bg);
  padding: var(--space-lg, 4rem) 0 2rem;
}

.home-video__heading .home-section__title {
  margin-bottom: 0;
}

.home-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--color-deepforest);
}

.home-video__poster,
.home-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-video__embed {
  position: absolute;
  inset: 0;
}

.home-video__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(54, 56, 43, 0) 45%,
    rgba(54, 56, 43, 0.28) 100%
  );
  transition: opacity 0.7s ease;
}

.home-video.is-playing .home-video__overlay {
  opacity: 0;
  pointer-events: none;
}

/* Texto fuera del video: banda propia debajo del frame, en Deep forest,
   columna angosta centrada y alineada a la izquierda. Así nunca pisa el
   botón de play y se lee cómodo. */
.home-video__caption {
  background: var(--color-deepforest);
  color: var(--color-white);
  padding: 2.75rem 0 3rem;
}

.home-video__caption .container {
  max-width: 46rem;
}

.home-video__eyebrow {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.35;
  margin: 0 0 0.9rem;
  color: var(--color-white);
}

.home-video__text {
  font-size: 0.95rem;
  line-height: 1.75;
  opacity: 0.82;
  margin: 0;
}

.home-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 234, 0.7);
  background: rgba(244, 240, 234, 0.12);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.4s ease;
}

.home-video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.home-video__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(244, 240, 234, 0.25);
}

@media (max-width: 768px) {
  .home-video__frame {
    aspect-ratio: 4 / 5;
  }

  .home-video__caption {
    padding: 2rem 0 2.25rem;
  }
}

/* 1.5 Barra de sellos — 8 claims (origen natural, vegano, etc.) en grilla
   con líneas finas, entre el hero y el shop. Los íconos son SVG en línea
   (set Lucide) que heredan color por currentColor, así el hover y la
   entrada animada se resuelven 100% con CSS. */
.home-trust {
  padding: 0;
  background: var(--color-bg);
}

/* Ancho completo de la página, sin el max-width ni el padding lateral
   del .container general: la grilla de sellos debe tocar los dos bordes
   de la pantalla, a diferencia del resto de las secciones del home. */
.home-trust .container {
  max-width: none;
  padding-inline: 0;
}

.home-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.home-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2.25rem 1rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-trust__icon {
  width: 30px;
  height: 30px;
  color: var(--color-dark-soft);
  transition:
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-trust__label {
  max-width: 11rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  transition: color 0.4s ease;
}

.home-trust__item:hover .home-trust__icon,
.home-trust__item:focus-within .home-trust__icon {
  color: var(--color-deepforest);
  transform: translateY(-4px) scale(1.1);
}

.home-trust__item:hover .home-trust__label,
.home-trust__item:focus-within .home-trust__label {
  color: var(--color-dark);
}

/* Entrada escalonada: cada sello sube y aparece por turno cuando la
   sección entra en pantalla (misma convención que .metodo-pillar). */
@keyframes bioself-trust-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.home-section.is-visible .home-trust__item {
  animation: bioself-trust-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.home-trust__item:nth-child(1) {
  animation-delay: 0.05s;
}

.home-trust__item:nth-child(2) {
  animation-delay: 0.12s;
}

.home-trust__item:nth-child(3) {
  animation-delay: 0.19s;
}

.home-trust__item:nth-child(4) {
  animation-delay: 0.26s;
}

.home-trust__item:nth-child(5) {
  animation-delay: 0.33s;
}

.home-trust__item:nth-child(6) {
  animation-delay: 0.4s;
}

.home-trust__item:nth-child(7) {
  animation-delay: 0.47s;
}

.home-trust__item:nth-child(8) {
  animation-delay: 0.54s;
}

@media (prefers-reduced-motion: reduce) {
  .home-section.is-visible .home-trust__item {
    animation: none;
  }
}

@media (max-width: 900px) {
  .home-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .home-trust__item {
    padding: 1.75rem 0.5rem;
  }

  .home-trust__label {
    font-size: 0.75rem;
  }
}

/* 1.55 Flora Collection — banner de primer lanzamiento, entre la barra de
   sellos y la grilla "Explorá". Fondo Deep forest a pantalla completa,
   contenido centrado y angosto, con entrada escalonada (isotipo → eyebrow
   → título → texto → CTA) reusando el keyframe de entrada del hero. */
.home-flora {
  background: var(--color-deepforest);
  color: var(--color-white);
  text-align: center;
}

.home-flora__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 34rem;
}

.home-flora__isotipo {
  width: 40px;
  height: 40px;
  margin-bottom: 1.25rem;
  fill: var(--color-sage);
}

.home-flora__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sage);
}

.home-flora__title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home-flora__text {
  margin: 0 0 2rem;
  color: rgba(244, 240, 234, 0.82);
  line-height: 1.6;
}

.home-flora__cta:hover,
.home-flora__cta:focus-visible {
  background: var(--color-white);
  color: var(--color-deepforest);
}

.home-section.is-visible .home-flora__inner > * {
  animation: bioself-hero-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.home-flora__inner > *:nth-child(1) {
  animation-delay: 0s;
}

.home-flora__inner > *:nth-child(2) {
  animation-delay: 0.12s;
}

.home-flora__inner > *:nth-child(3) {
  animation-delay: 0.24s;
}

.home-flora__inner > *:nth-child(4) {
  animation-delay: 0.36s;
}

.home-flora__inner > *:nth-child(5) {
  animation-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
  .home-section.is-visible .home-flora__inner > * {
    animation: none;
  }
}

/* 1.6 Grilla "Explorá" — 2 imágenes a pantalla completa con título y link,
   configurables desde Configuración → Home — Explorá. Ancho completo de
   la página, igual que .home-trust. */
.home-explore {
  padding: 0;
  background: var(--color-dark);
}

.home-explore__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.home-explore__grid--single {
  grid-template-columns: 1fr;
}

.home-explore__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
}

.home-explore__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-explore__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(68, 57, 53, 0.65) 0%,
    rgba(68, 57, 53, 0) 45%
  );
  transition: background-color 0.4s ease;
}

.home-explore__caption {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.home-explore__arrow {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

a.home-explore__item:hover .home-explore__img,
a.home-explore__item:focus-visible .home-explore__img {
  transform: scale(1.06);
}

a.home-explore__item:hover .home-explore__arrow,
a.home-explore__item:focus-visible .home-explore__arrow {
  transform: translateX(8px);
}

/* Entrada escalonada: cada columna aparece por turno, la misma
   convención que .home-trust__item. */
@keyframes bioself-explore-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.home-section.is-visible .home-explore__item {
  animation: bioself-explore-in 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.home-explore__item:nth-child(2) {
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .home-explore__img,
  .home-explore__arrow {
    transition: none;
  }

  .home-section.is-visible .home-explore__item {
    animation: none;
  }
}

@media (max-width: 768px) {
  .home-explore__grid {
    grid-template-columns: 1fr;
  }

  .home-explore__item {
    aspect-ratio: 1 / 1;
  }

  .home-explore__caption {
    left: 1.5rem;
    bottom: 1.5rem;
  }
}

/* 1.7 Motor genérico de "marquee" (frases en loop infinito): lo comparten
   la barra animada del home (debajo de "Explorá") y la barra de promos del
   header. Técnica: el track contiene el mismo grupo de frases dos veces
   seguidas y se desplaza -50% de su ancho total (que, al ser dos grupos
   iguales, equivale a exactamente un grupo) — el segundo grupo entra
   pisando el lugar del primero sin corte visible, en loop infinito. */
.bioself-marquee__track {
  display: flex;
  width: max-content;
  animation-name: bioself-marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bioself-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bioself-marquee__item {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(244, 240, 234, 0.88);
  white-space: nowrap;
  padding: 0 1rem;
}

.bioself-marquee__dot {
  color: var(--color-sage);
  opacity: 0.6;
}

@keyframes bioself-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* marquee.js mide cuántas copias del grupo de frases hacen falta para
       cubrir el ancho de pantalla sin huecos y fija esta propiedad acorde
       (-100/n%); -50% es el fallback si JS no llegó a correr (arranca
       asumiendo las 2 copias que ya trae el HTML servido). */
    transform: var(--bioself-marquee-end, translateX(-50%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bioself-marquee__track {
    animation: none;
    flex-wrap: wrap;
  }

  .bioself-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

.home-marquee,
.header-marquee {
  overflow: hidden;
}

.home-marquee:hover .bioself-marquee__track,
.header-marquee:hover .bioself-marquee__track {
  animation-play-state: paused;
}

.home-marquee {
  padding: 1.1rem 0;
  background: var(--color-deepforest);
}

/* Header — barra de promos entre el envío gratis y el menú. Más angosta
   y con texto más chico que la del home, para no competir con el logo. */
.header-marquee {
  padding: 0.55rem 0;
}

.header-marquee .bioself-marquee__item {
  font-size: 0.78rem;
}

/* 1.8 Necesidades — 4 accesos rápidos por categoría, debajo de "Explorá".
   Minimalista: mismo lenguaje que .home-trust (grilla con líneas finas,
   sin tarjetas/sombras/radios), pero cada celda es un link, así que suma
   una flecha que se desliza en hover como en .home-explore. */
.home-necesidades {
  padding: 0;
  background: var(--color-bg);
}

/* Ancho completo de la página, sin el max-width ni el padding lateral del
   .container general — igual criterio que .home-trust. */
.home-necesidades .container {
  max-width: none;
  padding-inline: 0;
}

.home-necesidades__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.home-necesidades__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2.5rem 1rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.home-necesidades__icon {
  width: 30px;
  height: 30px;
  color: var(--color-dark-soft);
  transition:
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-necesidades__card:hover .home-necesidades__icon,
.home-necesidades__card:focus-visible .home-necesidades__icon {
  color: var(--color-deepforest);
  transform: translateY(-4px) scale(1.1);
}

.home-necesidades__label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-deepforest);
}

.home-necesidades__arrow {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-necesidades__card:hover .home-necesidades__arrow,
.home-necesidades__card:focus-visible .home-necesidades__arrow {
  transform: translateX(6px);
}

/* Entrada escalonada: igual convención que .home-trust__item. */
@keyframes bioself-necesidades-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.home-section.is-visible .home-necesidades__card {
  animation: bioself-necesidades-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.home-necesidades__card:nth-child(1) {
  animation-delay: 0.05s;
}
.home-necesidades__card:nth-child(2) {
  animation-delay: 0.15s;
}
.home-necesidades__card:nth-child(3) {
  animation-delay: 0.25s;
}
.home-necesidades__card:nth-child(4) {
  animation-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .home-section.is-visible .home-necesidades__card {
    animation: none;
  }
}

@media (max-width: 900px) {
  .home-necesidades__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1.85 Arquitectura cutánea — CTA angosto al test de piel, debajo de
   "Necesidades". Fondo Deep forest + texto Calm (mismo par que el resto de
   las franjas oscuras del home) y un pill sólido claro para que destaque
   sobre el fondo oscuro; invierte a outline en hover. */
.home-arquitectura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3.5rem 1.375rem;
  background: var(--color-deepforest);
  color: var(--color-bg);
  text-align: center;
}

.home-arquitectura__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-weight: 500;
}

.home-arquitectura__cta {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  background: var(--color-bg);
  color: var(--color-deepforest);
  border: 1px solid var(--color-bg);
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-arquitectura__cta:hover,
.home-arquitectura__cta:focus-visible {
  background: transparent;
  color: var(--color-bg);
  transform: translateY(-2px);
}

.home-section.is-visible .home-arquitectura > * {
  animation: bioself-hero-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.home-arquitectura > *:nth-child(1) {
  animation-delay: 0s;
}

.home-arquitectura > *:nth-child(2) {
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .home-section.is-visible .home-arquitectura > * {
    animation: none;
  }
}

/* 1.95 Longevity Journal — reemplaza a "El método B.I.O.S." en el home,
   debajo del Shop. Fondo Deep forest a pantalla completa (mismo par
   oscuro que .home-flora/.home-metodo) con las tarjetas en una grilla de
   líneas finas a pantalla completa (mismo criterio que .home-explore):
   foto de borde a borde, sin radios ni separación entre tarjetas. */
.home-journal {
  background: var(--color-deepforest);
  color: var(--color-bg);
}

.home-journal .container {
  max-width: none;
  padding-inline: 0;
}

.home-journal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  margin-bottom: 1.75rem;
  text-align: left;
}

.home-journal__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.home-journal__subtitle {
  margin: 0;
  color: rgba(244, 240, 234, 0.75);
}

.home-journal__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.home-journal__subscribe {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.home-journal__subscribe:hover {
  background: var(--color-white);
  color: var(--color-deepforest);
  transform: translateY(-2px);
}

.home-journal__viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
}

.home-journal__viewall span {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-journal__viewall:hover span {
  transform: translateX(4px);
}

.home-journal__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-inline: 1.5rem;
  margin-bottom: 2rem;
}

.home-journal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.home-journal__filter {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 240, 234, 0.4);
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.home-journal__filter:hover {
  border-color: var(--color-white);
}

.home-journal__filter.is-active {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-deepforest);
}

.home-journal__nav {
  display: flex;
  gap: 0.6rem;
  flex: none;
}

.home-journal__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.home-journal__arrow svg {
  width: 16px;
  height: 16px;
}

.home-journal__arrow:hover {
  background: var(--color-white);
  color: var(--color-deepforest);
}

.home-journal__arrow:active {
  transform: scale(0.94);
}

.home-journal__arrow.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.home-journal-swiper {
  overflow: hidden;
  border-top: 1px solid rgba(244, 240, 234, 0.18);
  border-left: 1px solid rgba(244, 240, 234, 0.18);
}

.home-journal-swiper .swiper-slide {
  height: auto;
}

.home-journal-swiper .swiper-slide.is-filtered-out {
  display: none;
}

.home-journal-card {
  height: 100%;
  border-right: 1px solid rgba(244, 240, 234, 0.18);
}

.home-journal-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.home-journal-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-bottom: 1px solid rgba(244, 240, 234, 0.18);
}

.home-journal-card__media--sage {
  background: linear-gradient(155deg, var(--color-sage) 0%, var(--color-deepforest) 130%);
}

.home-journal-card__media--taupe {
  background: linear-gradient(155deg, var(--color-taupe) 0%, var(--color-deepforest) 130%);
}

.home-journal-card__media--deepforest {
  background: linear-gradient(155deg, rgba(195, 198, 175, 0.4) 0%, var(--color-deepforest) 130%);
}

.home-journal-card__media--dark {
  background: linear-gradient(155deg, var(--color-dark) 0%, var(--color-taupe) 150%);
}

.home-journal-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-journal-card__link:hover .home-journal-card__img {
  transform: scale(1.04);
}

.home-journal-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.home-journal-card__title {
  margin: 1.1rem 1.25rem 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
}

.home-journal-card__author {
  margin: 0 1.25rem 1.25rem;
  font-size: 0.8rem;
  color: rgba(244, 240, 234, 0.65);
}

.home-journal__pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.home-journal__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: transparent;
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.home-journal__pagination .swiper-pagination-bullet-active {
  background: var(--color-white);
  transform: scale(1.2);
}

@media (max-width: 640px) {
  .home-journal__actions {
    width: 100%;
    justify-content: space-between;
  }

  .home-journal__controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-journal__arrow {
    display: none;
  }
}

/* 3. Cuidado facial — "cuadrados giratorios" (flip cards).
   Cada necesidad rota 180° en Y al hacer hover/focus; la cara trasera
   revela, con un fundido lento, una imagen de fondo configurable
   (var(--need-img), inyectada inline por front-page.php) más una
   descripción breve. Imagen y texto se editan en:
   Configuración → Cuidado facial. */
.home-needs {
  background: var(--color-taupe);
}

/* La tipografía grande la aporta ahora .home-section__title (compartida por
   todo el home). Acá sólo se agrega la bajada "por necesidad" en versalitas
   espaciadas, separada por una fina línea. */
.home-needs__title-accent {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-white);
}

.home-needs__title-accent::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin: 0 auto 0.85rem;
  background: var(--color-white);
  opacity: 0.65;
}

.home-needs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 780px;
  margin-inline: auto;
}

.needs-flip {
  position: relative;
  display: block;
  min-height: 140px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  perspective: 1200px;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Entrada por scroll-reveal, coherente con el resto del home. */
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-section.is-visible .needs-flip {
  opacity: 1;
  translate: 0 0;
}

.home-needs__grid .needs-flip:nth-child(2) {
  transition-delay: 0.05s;
}
.home-needs__grid .needs-flip:nth-child(3) {
  transition-delay: 0.1s;
}
.home-needs__grid .needs-flip:nth-child(4) {
  transition-delay: 0.15s;
}
.home-needs__grid .needs-flip:nth-child(5) {
  transition-delay: 0.2s;
}
.home-needs__grid .needs-flip:nth-child(6) {
  transition-delay: 0.25s;
}

.needs-flip:focus-visible {
  box-shadow: 0 0 0 3px rgba(54, 56, 43, 0.4);
}

.needs-flip__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.needs-flip:hover .needs-flip__inner,
.needs-flip:focus .needs-flip__inner,
.needs-flip:focus-within .needs-flip__inner {
  transform: rotateY(180deg);
}

.needs-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* --- Cara frontal: tarjeta clara con acento e índice, no un bloque blanco
   vacío. Se apoya el mismo lenguaje que los pilares del Método. --- */
.needs-flip__face--front {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-sage);
  transition:
    box-shadow 0.3s ease,
    border-top-color 0.3s ease;
}

.needs-flip:hover .needs-flip__face--front {
  border-top-color: var(--color-taupe);
  box-shadow: 0 14px 30px rgba(68, 57, 53, 0.14);
}

.needs-flip__index {
  align-self: flex-end;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--color-sage);
  opacity: 0.4;
}

.needs-flip__hint {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.needs-flip__hint::after {
  content: " \2192";
}

.needs-flip__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  text-align: left;
  color: var(--color-dark);
}

/* --- Cara trasera --- */
.needs-flip__face--back {
  transform: rotateY(180deg);
  align-items: flex-end;
  background-color: var(--color-deepforest);
  background-size: cover;
  background-position: center;
}

/* Imagen de fondo: aparece despacio, con fundido + leve zoom-out. */
.needs-flip__face--back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--need-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity 1.1s ease,
    transform 1.6s ease;
}

.needs-flip:hover .needs-flip__face--back::after,
.needs-flip:focus .needs-flip__face--back::after,
.needs-flip:focus-within .needs-flip__face--back::after {
  opacity: 1;
  transform: scale(1);
}

/* Velo para que el texto se lea sobre cualquier foto. */
.needs-flip__face--back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(28, 29, 21, 0.1) 0%,
    rgba(28, 29, 21, 0.86) 100%
  );
}

.needs-flip:not(.has-image) .needs-flip__face--back::before {
  background: linear-gradient(
    180deg,
    rgba(28, 29, 21, 0.4) 0%,
    rgba(28, 29, 21, 0.72) 100%
  );
}

.needs-flip__back-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.25rem;
  text-align: left;
}

.needs-flip__name--back {
  display: block;
  color: #fff;
}

.needs-flip__desc {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(244, 240, 234, 0.9);
}

.needs-flip__cta {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.needs-flip__cta::after {
  content: " \2192";
}

@media (max-width: 480px) {
  /* Selector algo más específico para ganarle a la regla compartida de
     768px (que deja la grilla en 2 columnas). */
  .home-needs .home-needs__grid {
    grid-template-columns: 1fr;
    max-width: 20rem;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .needs-flip,
  .needs-flip__inner,
  .needs-flip__face--back::after {
    transition-duration: 0.001s;
  }
}

/* 4. Rituales */
.home-rituales {
  background: var(--color-bg);
}

.home-rituales__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.home-rituales__card a {
  text-decoration: none;
  color: var(--color-dark);
}

/* 5. Método B.I.O.S. */
.home-metodo {
  background: var(--color-deepforest);
  color: var(--color-white);
  text-align: center;
}

.home-metodo .home-section__title {
  color: var(--color-white);
}

.home-metodo__text {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

/* Los 4 pilares dentro de la home. Reusan .metodo-pillar (grilla, hover y
   animación de scroll) pero adaptados al fondo Deep forest de la sección:
   tarjetas translúcidas y texto claro en lugar de tarjetas blancas. */
.home-metodo__pillars {
  margin: 2.75rem auto;
  text-align: left;
}

.home-metodo__pillars .metodo-pillar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.home-metodo__pillars .metodo-pillar:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.home-metodo__pillars .metodo-pillar__name {
  color: var(--color-white);
}

.home-metodo__pillars .metodo-pillar__text {
  color: rgba(244, 240, 234, 0.72);
}

.home-metodo__pillars .metodo-pillar__letter {
  opacity: 0.16;
}

/* Sobre Deep forest los acentos oscuros (nature/deepforest) no contrastan:
   se sustituyen por tonos claros de la misma paleta. */
.home-metodo__pillars .metodo-pillar--nature {
  border-top-color: var(--color-taupe);
}

.home-metodo__pillars .metodo-pillar--nature .metodo-pillar__letter,
.home-metodo__pillars .metodo-pillar--nature .metodo-pillar__initial {
  color: var(--color-taupe);
}

.home-metodo__pillars .metodo-pillar--deepforest {
  border-top-color: var(--color-sage);
}

.home-metodo__pillars .metodo-pillar--deepforest .metodo-pillar__letter,
.home-metodo__pillars .metodo-pillar--deepforest .metodo-pillar__initial {
  color: var(--color-sage);
}

/* 6. Antes/después - reviews */
.home-social-proof {
  background: var(--color-bg);
}

.home-social-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.home-social-proof__item {
  text-align: center;
}

.home-social-proof__item a {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 600;
}

/* 7. Inspiración */
.home-inspiracion {
  background: var(--color-sage);
  text-align: center;
}

.home-inspiracion__text {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}

/* 8. Contacto */
.home-contacto {
  background: var(--color-bg);
  text-align: center;
}

/* Formulario de leads (Próximamente / Inspiración) */
.bioself-lead-form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bioself-lead-form input[type="email"] {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  min-width: 220px;
}

.bioself-lead-form button {
  background: var(--color-dark);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.bioself-lead-form__thanks {
  font-weight: 600;
  color: var(--color-success);
}

@media (max-width: 768px) {
  .home-needs__grid,
  .home-rituales__grid,
  .home-social-proof__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Página "El método B.I.O.S." (page-metodo-bios.php)
   Recorre la paleta de marca de punta a punta: hero y cierre en Deep
   forest, cuerpo en Calm — cada sección reusa .home-section, así que
   entra con la misma animación de scroll que el resto del sitio.
   ========================================================= */

.metodo-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sage);
}

.metodo-eyebrow--center {
  text-align: center;
}

.metodo-eyebrow--light {
  color: rgba(244, 240, 234, 0.6);
}

/* ---------- Hero ---------- */
.metodo-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-deepforest);
  color: var(--color-bg);
  padding: 6rem 0 5.5rem;
  text-align: center;
}

.metodo-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(6rem, 22vw, 15rem);
  letter-spacing: 0.08em;
  color: rgba(244, 240, 234, 0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.metodo-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.metodo-hero .metodo-eyebrow {
  text-align: center;
}

.metodo-hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--color-white);
}

.metodo-hero__lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(244, 240, 234, 0.8);
}

/* ---------- Manifest ---------- */
.metodo-manifest {
  background: var(--color-bg);
}

.metodo-manifest__inner {
  max-width: 42rem;
}

.metodo-manifest__list {
  position: relative;
  padding-left: 1.75rem;
}

/* Riel vertical: la línea de base queda siempre, la de color "crece" de
   0 a 100% de alto recién cuando la sección entra en pantalla —efecto
   lectura sin depender de un scroll-listener continuo. */
.metodo-manifest__list::before,
.metodo-manifest__list::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 2px;
  border-radius: 999px;
}

.metodo-manifest__list::before {
  bottom: 0.4em;
  background: var(--color-border);
}

.metodo-manifest__list::after {
  height: 0;
  background: var(--color-sage);
  transition: height 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.home-section.is-visible .metodo-manifest__list::after {
  height: calc(100% - 0.8em);
}

.metodo-manifest__item {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-dark);
}

.metodo-manifest__item:first-child {
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

.metodo-manifest__item:last-of-type {
  margin-bottom: 0;
}

.metodo-manifest__tagline {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-dark);
}

/* ---------- Arquitectura ---------- */
.metodo-arquitectura {
  padding-top: 0;
}

.metodo-arquitectura__inner {
  max-width: 46rem;
  text-align: center;
}

.metodo-arquitectura .metodo-eyebrow {
  text-align: center;
}

.metodo-arquitectura__text {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--color-dark-soft);
}

/* ---------- Los 4 pilares ---------- */
.metodo-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.metodo-pillar {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border-top: 3px solid var(--color-border);
  border-radius: 16px;
  padding: 2.25rem 1.75rem 2rem;
  box-shadow: 0 4px 24px rgba(68, 57, 53, 0.05);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.home-section.is-visible .metodo-pillar {
  opacity: 1;
  transform: translateY(0);
}

.metodo-pillars__grid .metodo-pillar:nth-child(1) {
  transition-delay: 0s;
}
.metodo-pillars__grid .metodo-pillar:nth-child(2) {
  transition-delay: 0.1s;
}
.metodo-pillars__grid .metodo-pillar:nth-child(3) {
  transition-delay: 0.2s;
}
.metodo-pillars__grid .metodo-pillar:nth-child(4) {
  transition-delay: 0.3s;
}

.metodo-pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(68, 57, 53, 0.12);
}

.metodo-pillar__letter {
  position: absolute;
  top: -0.5rem;
  right: 0.75rem;
  z-index: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  opacity: 0.1;
  transition: opacity 0.4s ease;
}

.metodo-pillar:hover .metodo-pillar__letter {
  opacity: 0.18;
}

.metodo-pillar__name {
  position: relative;
  z-index: 1;
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.metodo-pillar__initial {
  font-weight: 700;
}

.metodo-pillar__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.metodo-pillar--sage {
  border-top-color: var(--color-sage);
}
.metodo-pillar--sage .metodo-pillar__letter,
.metodo-pillar--sage .metodo-pillar__initial {
  color: var(--color-sage);
}

.metodo-pillar--taupe {
  border-top-color: var(--color-taupe);
}
.metodo-pillar--taupe .metodo-pillar__letter,
.metodo-pillar--taupe .metodo-pillar__initial {
  color: var(--color-taupe);
}

.metodo-pillar--nature {
  border-top-color: var(--color-dark-soft);
}
.metodo-pillar--nature .metodo-pillar__letter,
.metodo-pillar--nature .metodo-pillar__initial {
  color: var(--color-dark-soft);
}

.metodo-pillar--deepforest {
  border-top-color: var(--color-deepforest);
}
.metodo-pillar--deepforest .metodo-pillar__letter,
.metodo-pillar--deepforest .metodo-pillar__initial {
  color: var(--color-deepforest);
}

@media (max-width: 900px) {
  .metodo-pillars__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .metodo-pillars__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Cierre: Smart Beauty ---------- */
.metodo-closing {
  background: var(--color-dark);
  color: var(--color-bg);
  text-align: center;
}

.metodo-closing__inner {
  max-width: 42rem;
}

.metodo-closing .metodo-eyebrow {
  text-align: center;
}

.metodo-closing__text {
  margin: 0 0 2rem;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.7;
  color: rgba(244, 240, 234, 0.9);
}

@media (max-width: 560px) {
  .metodo-hero {
    padding: 4.5rem 0 4rem;
  }

  .metodo-manifest__list {
    padding-left: 1.25rem;
  }
}

/* =========================================================
   Rituales — archivo (grilla de cards) + single
   ========================================================= */
.bioself-rituales {
  padding-block: 3rem 5rem;
}

.bioself-rituales__header {
  max-width: 42rem;
  margin: 0 0 2.75rem;
}

.bioself-rituales__header .metodo-eyebrow {
  color: var(--color-dark-soft);
}

.bioself-rituales__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-deepforest);
}

.bioself-rituales__intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-dark-soft);
}

.bioself-rituales__intro p {
  margin: 0;
}

.bioself-rituales__empty {
  color: var(--color-text-muted);
}

/* ---------- Grilla ---------- */
.ritual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.75rem;
}

/* ---------- Card ---------- */
.ritual-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}

.ritual-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(68, 57, 53, 0.12);
}

.ritual-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg);
}

.ritual-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ritual-card:hover .ritual-card__media img {
  transform: scale(1.04);
}

.ritual-card__media-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-sage), var(--color-taupe));
  opacity: 0.5;
}

.ritual-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.6rem;
}

.ritual-card__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.ritual-card__title a {
  color: var(--color-deepforest);
  text-decoration: none;
}

.ritual-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ritual-card__excerpt {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-dark-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ritual-card__more {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-deepforest);
  text-decoration: none;
}

.ritual-card__more::after {
  content: " →";
  transition: margin-left 0.2s ease;
}

.ritual-card:hover .ritual-card__more::after {
  margin-left: 0.25rem;
}

/* ---------- Paginación ---------- */
.bioself-rituales .navigation.pagination {
  margin-top: 3rem;
}

.bioself-rituales .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.bioself-rituales .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  font-size: 0.88rem;
  color: var(--color-dark);
  text-decoration: none;
}

.bioself-rituales .page-numbers.current {
  background: var(--color-deepforest);
  border-color: var(--color-deepforest);
  color: var(--color-white);
}

.bioself-rituales .page-numbers:not(.current):hover {
  background: var(--color-bg);
}

@media (max-width: 900px) {
  .ritual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ritual-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Single ---------- */
.bioself-ritual-single {
  padding-block: 2.5rem 5rem;
}

.ritual-single {
  max-width: 46rem;
  margin: 0 auto;
}

.ritual-single__back {
  display: inline-block;
  margin-bottom: 1.75rem;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark-soft);
  text-decoration: none;
}

.ritual-single__back:hover {
  color: var(--color-deepforest);
}

.ritual-single__header .metodo-eyebrow {
  color: var(--color-dark-soft);
}

.ritual-single__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-deepforest);
}

.ritual-single__media {
  margin: 0 0 2rem;
}

.ritual-single__media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.ritual-single__content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-dark);
}

.ritual-single__content > *:first-child {
  margin-top: 0;
}

.ritual-single__content h2,
.ritual-single__content h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-deepforest);
  margin: 2rem 0 0.75rem;
}

.ritual-single__content img {
  border-radius: 12px;
  height: auto;
}