/* ==========================================================================
   Zoled · estilos.css
   Organización: base/reset → globales → componentes → secciones → responsive.
   Basado en tokens (ver tokens.css). Ningún color hex/rgba crudo vive aquí:
   todo color se referencia con var(--…). Portado de la landing aprobada.
   ========================================================================== */

/* ==========================================================================
   1. BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--negro);
  background: var(--blanco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; }

/* Foco visible (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace para saltar al contenido */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--negro);
  color: var(--blanco);
  padding: 12px 20px;
  font-family: var(--dato);
  font-size: 12px;
  text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Contenedor de maquetación */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ritmo de sección */
.section { padding-block: var(--section-y); }
.section--hueso { background: var(--hueso); }

.section__sub {
  font-size: 14.5px;
  color: var(--plomo);
  margin: 4px 0 28px;
  max-width: 46ch;
}
.section__foot { margin-top: 36px; text-align: center; }

/* ==========================================================================
   2. UTILIDADES TIPOGRÁFICAS
   ========================================================================== */
.kicker {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 20px;
}
.kicker--light { color: var(--blanco-70); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--plomo);
}

.price {
  font-family: var(--dato);
  font-size: 13px;
  font-weight: 700;
  /* Evita que el precio se rompa carácter a carácter en contenedores estrechos. */
  white-space: nowrap;
}

/* ==========================================================================
   3. BOTONES Y COMPONENTES PEQUEÑOS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--vel-2) var(--curva),
              color var(--vel-2) var(--curva),
              border-color var(--vel-2) var(--curva);
}
.btn--sm { height: 42px; padding: 0 20px; font-size: 11px; }
.btn--block { width: 100%; }

/* Spec §3: hover del primario = --negro-hover (NO invertir a --grafito) */
.btn--primary { background: var(--negro); color: var(--blanco); border: 1px solid var(--negro); }
.btn--primary:hover { background: var(--negro-hover); }

/* Spec §3 (.btn.sec): hover del outline = lavado --hueso, NO invertir a negro */
.btn--outline { background: transparent; color: var(--negro); border: 1px solid var(--negro); }
.btn--outline:hover { background: var(--hueso); }

/* Spec §3 (.btn.blanco): hover del blanco = fondo --hueso + borde --hueso */
.btn--white { background: var(--blanco); color: var(--negro); border: 1px solid var(--blanco); }
.btn--white:hover { background: var(--hueso); border-color: var(--hueso); }

.btn--ghost { background: transparent; color: var(--humo); }
.btn--ghost:hover { color: var(--negro); }

/* Spec §3: offset de :focus-visible para botones es 3px */
.btn:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; }

/* Botón pequeño "Agregar" */
.btn-sm {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--vel-2) var(--curva), color var(--vel-2) var(--curva);
  white-space: nowrap;
}
.btn-sm:hover { background: var(--negro); color: var(--blanco); }
.btn-add.is-added { background: var(--exito); border-color: var(--exito); color: var(--blanco); }

.arrow-link {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--negro);
  white-space: nowrap;
}
.arrow-link:hover { color: var(--plomo); }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--blanco);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  font-family: var(--dato);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: var(--sombra-2);
}
.badge--soldout { color: var(--humo); }

.tag {
  display: inline-block;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.tag--soon {
  margin-left: 14px;
  color: var(--blanco-75);
  border: 1px solid var(--blanco-30);
}

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.dot--rosa { background: var(--rosa); }
.dot--verde { background: var(--verde); }
.dot--amarillo { background: var(--amarillo); }
.dot--gris { background: var(--gris); }
.dot--negro { background: var(--negro); }
.dot--celeste { background: var(--celeste); }

/* ==========================================================================
   4. GLOBALES · G1 barra superior
   ========================================================================== */
.topbar { background: var(--negro); color: var(--blanco); }
.topbar__inner { overflow: hidden; padding: 8px var(--gutter); }
.topbar__text {
  display: block;
  text-align: center;
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ==========================================================================
   5. GLOBALES · G2 header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--filete);
}
/* La barra de administración de WordPress es fixed en top:0 (32px; 46px ≤782px).
   El header sticky se desplaza para quedar justo debajo cuando hay un usuario
   logueado, y así no queda oculto ni se rompe al hacer scroll. */
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}
.header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__sun { width: 22px; height: 22px; color: var(--oro); }
.logo__word {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.logo--light .logo__word { color: var(--blanco); }
.logo--light .logo__sun { color: var(--sol); }

.nav__list { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
/* Spec §4: enlace de nav = borde inferior 1.5px, transparente por defecto;
   --negro en hover Y en el elemento activo. Sin cambio de color, sin scaleX. */
.nav__link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--negro);
  padding: 4px 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--vel-2) var(--curva);
}
.nav__link:hover,
.nav__link--active { border-bottom-color: var(--negro); }
.nav__toggle { font-size: 13px; color: var(--negro); }
.nav__search { font-size: 15px; }
/* El chevron del toggle "Cuidado en casa" rota 180° al abrir (§4) */
.nav__chev { display: inline-block; transition: transform var(--vel-2) var(--curva); }
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__item { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-3);
  padding: 14px;
  min-width: 220px;
  z-index: 60;
}
.dropdown__list { list-style: none; margin: 0 0 8px; padding: 0; }
.dropdown__list a {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  font-size: 13px;
  border-radius: 8px;
}
.dropdown__list a:hover { background: var(--hueso); }
.dropdown__all {
  display: block;
  border-top: 1px solid var(--filete);
  padding-top: 10px;
  margin-top: 4px;
  font-family: var(--dato);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--humo);
}

.header__actions { display: flex; align-items: center; gap: 12px; }
.bag-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bag-button__count {
  background: var(--negro);
  color: var(--blanco);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.hamburger { display: none; flex-direction: column; gap: 4px; padding: 6px; }
.hamburger span { width: 22px; height: 2px; background: var(--negro); border-radius: 2px; }

/* Drawer móvil a pantalla completa */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--blanco);
  padding: 20px var(--gutter-mobile);
  overflow-y: auto;
}
.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav > a, .mobile-nav__toggle, .mobile-nav__sub a {
  padding: 14px 0;
  border-bottom: 1px solid var(--filete);
  font-size: 16px;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
}
.mobile-nav__toggle { justify-content: space-between; }
.mobile-nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.mobile-nav__sub { padding-left: 10px; }
.mobile-nav__sub a { font-size: 14px; }
.mobile-nav__all { color: var(--humo); font-family: var(--dato); font-size: 12px; text-transform: uppercase; }

.icon-close { font-size: 20px; line-height: 1; padding: 6px; color: var(--negro); }

/* ==========================================================================
   6. SECCIÓN 1 · Hero
   ========================================================================== */
.hero { padding-block: 48px; }
.hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 52% 48%;
  gap: 40px;
  align-items: center;
  min-height: 520px;
}
.hero__copy { position: relative; }
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.15;
  margin: 12px 0 18px;
}
.hero__title em { font-style: italic; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; position: relative; z-index: 2; }
.hero__sun {
  position: absolute;
  right: 4%;
  bottom: -30px;
  width: 190px;
  height: 190px;
  color: var(--oro);
  opacity: 0.15;
  z-index: 0;
}

.hero__media { align-self: stretch; }
.media-frame {
  position: relative;
  height: 100%;
  min-height: 460px;
  background: var(--hueso);
  border-radius: 0;
  border-top-left-radius: var(--r-lg);
  overflow: hidden;
}
/* Imagen o video del hero: rellenan el marco sin alterar colores. */
.media-frame__video,
.media-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.media-frame__sun { width: 130px; height: 130px; color: var(--oro); opacity: 0.25; }
.media-frame__label {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--humo);
}
.media-play {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--negro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-3);
}
.media-play__icon { font-size: 16px; }

/* ==========================================================================
   7. SECCIÓN 2 · Banner diagnóstico
   ========================================================================== */
.banner-diag {
  position: relative;
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--r-md);
  padding: 56px 48px;
  overflow: hidden;
}
.banner-diag__copy { position: relative; z-index: 2; max-width: 56ch; }
.banner-diag__title {
  font-size: var(--fs-h2);
  color: var(--blanco);
  margin: 4px 0 14px;
}
.banner-diag__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--blanco-72);
  margin: 0 0 26px;
}
.banner-diag__sun {
  position: absolute;
  right: 24px;
  bottom: -30px;
  width: 200px;
  height: 200px;
  color: var(--blanco);
  opacity: 0.08;
  z-index: 1;
}

/* ==========================================================================
   8. SECCIÓN 3 · Líneas de cuidado
   ========================================================================== */
.lines { display: flex; flex-direction: column; gap: 12px; }
.line-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  padding: 20px 24px 20px 28px;
}
/* Spec §2.5: la barra de color mide FIJO 5px (no se ensancha en hover) */
.line-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 4px;
  background: var(--line-color, var(--gris));
}
.line-row__title { font-size: 20px; margin-bottom: 4px; }
.line-row__desc { font-size: 13px; color: var(--humo); max-width: 68ch; }

/* ==========================================================================
   9. SECCIÓN 4 · Pilares
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.pillar__icon { width: 24px; height: 24px; color: var(--negro); margin-bottom: 14px; }
.pillar__title { font-size: 16px; margin-bottom: 8px; }
.pillar__text { font-size: 13px; color: var(--plomo); line-height: 1.55; }

/* ==========================================================================
   10. SECCIÓN 5 · Tarjetas de producto
   ========================================================================== */
/* Grilla de productos: 4 columnas al ancho completo del contenedor. Con
   auto-fit + minmax(min(100%, 240px), 1fr) se reacomoda a menos columnas
   cuando el contenedor es estrecho (encapsulación) en vez de aplastarse; a
   ancho completo (1280px) el cálculo sigue dando las mismas 4 columnas. */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}
.product-card {
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--hueso);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__ph { width: 46%; height: 46%; color: var(--oro); opacity: 0.35; }
.product-card__bar { height: 2px; background: var(--line-color, var(--filete)); }
.product-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__name { font-size: 16px; }
.product-card__desc { font-size: 13px; color: var(--humo); flex: 1; }
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  /* Si el precio y "Agregar" no caben en una línea, la fila se envuelve con
     un pequeño hueco en vez de forzar el desbordamiento. */
  flex-wrap: wrap;
  gap: 8px;
}
.product-card.is-soldout .product-card__ph { opacity: 0.2; }

/* ==========================================================================
   11. SECCIÓN 6 · Tratamientos
   ========================================================================== */
/* 2 columnas al ancho completo; con auto-fit + minmax(min(100%, 480px), 1fr)
   reflowan a 1 columna en contenedores estrechos en lugar de aplastarse. A
   1280px el cálculo sigue dando las mismas 2 columnas. */
.treatments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 20px;
}
.treatment-card {
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.treatment-card__title { font-size: 20px; }
.treatment-card__text { font-size: 13px; color: var(--plomo); line-height: 1.55; max-width: 48ch; }
/* El 3er elemento ocupa una sola columna (según PRD): el grid ya lo hace. */

/* ==========================================================================
   12. SECCIÓN 7 · Testimonios
   ========================================================================== */
.testimonials {
  position: relative;
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  padding: 56px 40px 40px;
  overflow: hidden;
  text-align: center;
}
.testimonials__sun {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  color: var(--gris);
  opacity: 0.6;
  z-index: 0;
}
.testimonials__viewport { position: relative; z-index: 1; min-height: 120px; }
.testimonial { margin: 0; }
.testimonial__quote {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw + 12px, 24px);
  line-height: 1.35;
  margin: 0 auto 16px;
  max-width: 40ch;
}
.testimonial__author {
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  color: var(--humo);
}
.testimonials__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.carousel-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--filete);
  background: var(--blanco);
  font-size: 18px;
  line-height: 1;
  color: var(--negro);
}
.carousel-arrow:hover { background: var(--negro); color: var(--blanco); }
.dots { display: flex; gap: 8px; }
.dot-btn {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gris);
  padding: 0;
}
.dot-btn.is-active { background: var(--negro); }
.testimonials__note {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--humo);
}

/* ==========================================================================
   13. SECCIÓN 8 · Banda Professional
   ========================================================================== */
.professional { position: relative; }
.professional__edge { display: block; width: 100%; height: 60px; }
.professional__edge--top { margin-bottom: -1px; }
.professional__edge--bottom { margin-top: -1px; }
.professional__inner {
  position: relative;
  background: var(--negro);
  color: var(--blanco);
  padding-block: 40px 48px;
  overflow: hidden;
}
.professional__content { position: relative; z-index: 2; max-width: 56ch; }
.professional__title {
  font-size: clamp(26px, 2vw + 14px, 32px);
  color: var(--blanco);
  margin: 4px 0 14px;
}
.professional__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--blanco-72);
  margin: 0 0 26px;
}
.professional__sun {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 240px;
  color: var(--grafito);
  z-index: 1;
}

/* ==========================================================================
   14. SECCIÓN 9 · Dos columnas
   ========================================================================== */
/* 2 columnas al ancho completo; reflowan a 1 columna en contenedores estrechos
   con auto-fit + minmax(min(100%, 460px), 1fr). A 1280px se mantienen las 2. */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 40px; }
.two-col__title { font-size: 20px; margin-bottom: 10px; }
.two-col__text { font-size: 13px; color: var(--plomo); line-height: 1.55; max-width: 48ch; margin-bottom: 18px; }

/* ==========================================================================
   14b. SISTEMA DE TARJETAS DINÁMICAS (bloques zoled/tarjetas + zoled/tarjeta)
   ==========================================================================
   La grilla usa auto-fit + minmax(min(100%, 260px), 1fr): el cliente añade o
   quita tarjetas libremente y la grilla se reacomoda sola con 1, 2, 3 o 4+
   tarjetas, sin aplastarse en contenedores estrechos. Solo tokens var(--…).
   ========================================================================== */
.zoled-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
/* La tarjeta replica el aspecto de .treatment-card (fondo blanco, borde
   --filete de 1px, radio --r-sm, padding), con el mismo hover de elevación. */
.zoled-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow var(--vel-2) var(--curva),
              transform var(--vel-2) var(--curva);
}
.zoled-tarjeta:hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}
.zoled-tarjeta:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }
.zoled-tarjeta__titulo { font-family: var(--serif); font-size: 20px; }
.zoled-tarjeta__texto { font-size: 13px; color: var(--plomo); line-height: 1.55; max-width: 48ch; }

/* ==========================================================================
   14c. SECCIÓN DE MARCA (bloque zoled/seccion)
   ==========================================================================
   Contenedor con ritmo vertical de sección y variantes de fondo. Sobre --negro
   el texto pasa a claro reutilizando los tokens de texto claro existentes
   (--blanco / --blanco-72), sin ningún hex nuevo.
   ========================================================================== */
.zoled-seccion { padding-block: var(--section-y); }
.zoled-seccion--blanco { background: var(--blanco); }
.zoled-seccion--hueso { background: var(--hueso); }
.zoled-seccion--negro { background: var(--negro); color: var(--blanco-72); }
.zoled-seccion--negro h1,
.zoled-seccion--negro h2,
.zoled-seccion--negro h3,
.zoled-seccion--negro h4 { color: var(--blanco); }
.zoled-seccion--negro .kicker { color: var(--blanco-70); }

/* ==========================================================================
   15. GLOBALES · G3 footer
   ========================================================================== */
.footer { background: var(--negro); color: var(--gris); padding-top: 56px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
}
.footer__brand { max-width: 34ch; }
.footer__tagline { font-size: 14px; color: var(--blanco); margin: 16px 0 10px; line-height: 1.5; }
.footer__tagline em { font-style: italic; }
.footer__desc { font-size: 13px; color: var(--humo); margin: 0 0 16px; }
.footer__social { display: flex; gap: 16px; }
.footer__social a { font-family: var(--dato); font-size: 11px; letter-spacing: 0.05em; color: var(--gris); }
.footer__social a:hover { color: var(--blanco); }

.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__title {
  font-family: var(--dato);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 4px;
}
.footer__col a, .footer__cookies {
  font-size: 13px;
  color: var(--gris);
  text-align: left;
  padding: 0;
}
.footer__col a:hover, .footer__cookies:hover { color: var(--blanco); }

.footer__pay {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--blanco-12);
  padding-top: 24px;
}
.footer__pay-title {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--humo);
}
.pay-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-chip {
  font-family: var(--dato);
  font-size: 11px;
  color: var(--gris);
  border: 1px solid var(--blanco-25);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}
.footer__bottom { padding: 24px 0 40px; }
.footer__bottom p {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--humo);
  margin: 0;
}

/* ==========================================================================
   16. Drawer de la bolsa
   ========================================================================== */
.drawer-overlay, .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--velo-modal);
}
.bag-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 310;
  width: min(420px, 100vw);
  height: 100%;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-4);
}
.bag-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--filete);
}
.bag-drawer__title { font-size: 20px; }
.bag-drawer__body { flex: 1; overflow-y: auto; padding: 24px; }

.bag-empty { text-align: center; padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bag-empty__sun { width: 90px; height: 90px; color: var(--oro); opacity: 0.3; margin-bottom: 4px; }
.bag-empty__title { font-family: var(--serif); font-size: 18px; }
.bag-empty__text { font-size: 13px; color: var(--humo); max-width: 30ch; margin: 0 0 8px; }
.bag-empty .btn { width: 100%; max-width: 280px; }

.bag-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bag-item { display: flex; gap: 12px; align-items: center; }
.bag-item__thumb {
  width: 56px; height: 56px; flex: none;
  background: var(--hueso); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.bag-item__thumb svg { width: 60%; height: 60%; color: var(--oro); opacity: 0.4; }
.bag-item__info { flex: 1; }
.bag-item__name { font-family: var(--serif); font-size: 15px; }
.bag-item__price { font-family: var(--dato); font-size: 12px; color: var(--humo); }
.bag-item__remove { font-family: var(--dato); font-size: 11px; color: var(--humo); text-decoration: underline; }

.bag-drawer__foot { border-top: 1px solid var(--filete); padding: 20px 24px; }
.bag-progress__text { font-family: var(--dato); font-size: 11px; color: var(--humo); margin: 0 0 8px; }
.bag-progress__bar { height: 6px; background: var(--filete); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 18px; }
.bag-progress__bar span { display: block; height: 100%; width: 0; background: var(--exito); transition: width var(--vel-3) var(--curva); }
.bag-subtotal { display: flex; justify-content: space-between; font-family: var(--dato); font-size: 13px; margin-bottom: 16px; }

/* ==========================================================================
   17. Modales (rol + cookies)
   ========================================================================== */
.modal-overlay { display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal {
  position: relative;
  background: var(--blanco);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-4);
  padding: 40px 36px 32px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.modal__close { position: absolute; top: 14px; right: 14px; }
.modal__sun { width: 64px; height: 64px; color: var(--oro); opacity: 0.4; margin: 0 auto 14px; }
.modal__title { font-size: 24px; margin-bottom: 22px; }
.modal__foot { font-size: 12px; color: var(--humo); margin: 20px 0 0; }

.role-options { display: grid; gap: 12px; }
.role-option {
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  text-align: left;
  transition: border-color var(--vel-2) var(--curva), background var(--vel-2) var(--curva);
}
.role-option:hover { border-color: var(--negro); background: var(--hueso); }
.role-option__name { display: block; font-family: var(--serif); font-size: 18px; }
.role-option__desc { display: block; font-size: 13px; color: var(--humo); margin-top: 2px; }

.cookie-prefs { display: flex; flex-direction: column; gap: 4px; text-align: left; margin-bottom: 22px; }
.cookie-pref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filete);
}
.cookie-pref__name { display: block; font-family: var(--serif); font-size: 16px; }
.cookie-pref__desc { display: block; font-size: 12.5px; color: var(--humo); margin-top: 2px; }
.cookie-pref input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--negro); }

/* ==========================================================================
   18. GLOBALES · G4 banner de cookies
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 280;
  width: min(680px, calc(100vw - 32px));
  background: var(--blanco);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-4);
  padding: 22px 24px;
}
.cookie-banner__text { font-size: 13px; color: var(--plomo); line-height: 1.5; margin: 0 0 16px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   19. GLOBALES · G5 chat flotante
   ========================================================================== */
.chat-fab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 270;
  width: 44px;
  height: 44px;
  background: var(--negro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: var(--sombra-3);
}
.chat-fab:hover { background: var(--grafito); }

/* ==========================================================================
   20. Toast
   ========================================================================== */
/* Spec §7: el toast aparece elevándose 12px + fade in (--vel-2) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(12px);
  z-index: 400;
  background: var(--negro);
  color: var(--blanco);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-family: var(--dato);
  font-size: 12px;
  box-shadow: var(--sombra-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vel-2) var(--curva), transform var(--vel-2) var(--curva);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Utilidades */
[hidden] { display: none !important; }
.no-scroll { overflow: hidden; }

/* ==========================================================================
   20b. MOVIMIENTO / INTERACCIONES  (conciliado con zoled-interacciones.md)
   Lenguaje de movimiento sobrio (§0.3): los únicos efectos permitidos son
   cambio de border-color, fondo --hueso, subrayado, translateY(-2px)+sombra
   en tarjetas, fade de opacidad y rotación del chevron. SIN scale/zoom, SIN
   rebote, SIN parallax. Cada transición usa --vel-2 (200ms) o --vel-3 (320ms)
   con --curva. El subrayado del nav-link (§4), el chevron (§4) y la barra de
   line-row (§2.5) viven en sus bloques de sección. Reduced motion en §22.
   ========================================================================== */

/* ---- Tarjetas: elevación + sombra (§2.1–2.5). Solo translateY(-2px) ------ */
.product-card {
  transition: box-shadow var(--vel-2) var(--curva),
              transform var(--vel-2) var(--curva);
}
/* §2.1: hover = sombra-3 + translateY(-2px); el NOMBRE se subraya */
.product-card:not(.is-soldout):hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}
.product-card:not(.is-soldout):hover .product-card__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* §2.1: tarjeta agotada = opacidad .72 (sin elevación, sin subrayado) */
.product-card.is-soldout { opacity: 0.72; }

/* ---- Líneas de cuidado (§2.5): la fila "se recoge" + lavado --hueso ------ */
/* Hover real: padding-left/right 14px + fondo --hueso. Sin elevación, sin
   tinte de color, sin deslizar la flecha, sin ensanchar la barra. La barra
   de 5px queda fija (ver §2.5). */
.line-row {
  transition: padding var(--vel-2) var(--curva),
              background var(--vel-2) var(--curva);
}
.line-row:hover {
  padding-left: 14px;
  padding-right: 14px;
  background: var(--hueso);
}

/* ---- Tarjetas de guía / necesidad / tratamiento (§2.2–2.3) -------------- */
/* Nota: .two-col__item es una COLUMNA de texto (sin borde/fondo/radio) según
   el PRD y zoled-interacciones.md — NO es una tarjeta interactiva, así que NO
   recibe hover. */
.treatment-card {
  transition: box-shadow var(--vel-2) var(--curva),
              transform var(--vel-2) var(--curva);
}
.treatment-card:hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}
/* offset de :focus-visible para tarjetas = 2px (§2.2/2.4) */
.treatment-card:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }

/* ---- Filas de subtarjeta / dropdown (§2.4): border-color negro en hover -- */
.dropdown__list a { transition: background var(--vel-2) var(--curva); }
.dropdown__all { transition: color var(--vel-2) var(--curva); }
.dropdown__all:hover { color: var(--negro); }

/* ---- Chips (§6): border-color negro en hover; .on = fondo negro texto blanco */
/* No hay chips en el home; se conserva por paridad si se agregan luego. */
.chip { transition: all var(--vel-2) var(--curva); }
.chip:hover { border-color: var(--negro); }
.chip.on { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

/* ==========================================================================
   20c. ANIMACIONES DE ENTRADA (§12 · "sugerido") — activadas por JS
   ========================================================================== */

/* ---- Drawer móvil: entra deslizándose desde la IZQUIERDA (§5) ------------ */
/* Spec §5: 82% de ancho, máx 300px, desde la izquierda, con velo --velo.
   El drawer + velo viven bajo un host (#mobile-drawer) que cubre la pantalla. */
.mobile-drawer {
  inset: 0;
  padding: 0;                 /* el padding vive ahora en el panel interior */
  background: transparent;    /* el velo aporta el oscurecido, el panel es blanco */
  overflow: hidden;
}
.mobile-drawer__veil {
  position: absolute;
  inset: 0;
  background: var(--velo);
  opacity: 0;
  transition: opacity var(--vel-2) var(--curva);
}
.mobile-drawer.open .mobile-drawer__veil { opacity: 1; }
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 82%;
  max-width: 300px;
  height: 100%;
  background: var(--blanco);
  box-shadow: var(--sombra-4);
  overflow-y: auto;
  padding: 20px var(--gutter-mobile) 24px;
  transform: translateX(-100%);
  transition: transform var(--vel-3) var(--curva);
}
.mobile-drawer.open .mobile-drawer__panel { transform: translateX(0); }

/* ---- Dropdown / submenú de cuidado (§12): cae 8px + fade in -------------- */
.dropdown {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  visibility: hidden;
  transition: opacity var(--vel-2) var(--curva),
              transform var(--vel-2) var(--curva),
              visibility 0s linear var(--vel-2);
}
.dropdown.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

/* ---- Modales (§12): el fondo hace fade; el modal translateY(12px)->0 ----- */
.modal-overlay {
  opacity: 0;
  transition: opacity var(--vel-2) var(--curva);
}
.modal-overlay.open { opacity: 1; }
.modal {
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--vel-3) var(--curva), opacity var(--vel-3) var(--curva);
}
.modal-overlay.open .modal { transform: none; opacity: 1; }

/* ---- Toast (§7): se eleva 12px + fade in -------------------------------- */
/* La base + .is-visible están definidas en §20; nada extra aquí. */

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .nav { display: none; }
  .hamburger { display: flex; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
  .hero__inner { min-height: 0; }
}

/* Móvil (≤640px) */
@media (max-width: 640px) {
  :root { --gutter: var(--gutter-mobile); }
  .section { padding-block: var(--section-y-mobile); }

  .header__inner { height: 60px; }
  .topbar__text { font-size: 10px; }

  /* Hero: media arriba, texto debajo */
  .hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .hero__media { order: -1; }
  .media-frame { min-height: 300px; }
  .hero__sun { width: 130px; height: 130px; right: 0; bottom: -10px; }

  .banner-diag { padding: 40px 24px; }
  .banner-diag__sun { width: 150px; height: 150px; }

  .line-row { flex-direction: column; align-items: flex-start; gap: 12px; }

  .pillars { grid-template-columns: 1fr; gap: 24px; }

  /* Productos: scroll horizontal con snap */
  .products {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .product-card { flex: 0 0 78%; scroll-snap-align: start; }

  .treatments { grid-template-columns: 1fr; }
  .zoled-tarjetas { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .professional__sun { width: 150px; opacity: 0.7; right: -20px; }

  .cookie-banner { bottom: 12px; padding: 18px; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* ==========================================================================
   22. Reduced motion
   ========================================================================== */
/* Spec §1: desactivar TODA animación/transición y mostrar estados finales. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  /* Los overlays que animan su entrada deben mostrar su estado final visible
     al instante (sin translate/opacity/visibility residual), para que abrir
     siga funcionando. */
  .dropdown.open { opacity: 1; transform: translateX(-50%); visibility: visible; }
  .mobile-drawer.open .mobile-drawer__panel { transform: translateX(0); }
  .mobile-drawer.open .mobile-drawer__veil { opacity: 1; }
  .modal-overlay.open { opacity: 1; }
  .modal-overlay.open .modal { transform: none; opacity: 1; }
  .toast.is-visible { opacity: 1; transform: translateX(-50%); }

  /* Neutralizar la elevación de las tarjetas para que nada se mueva; el
     feedback de hover queda vía sombra / subrayado / fondo (estáticos). */
  .product-card:not(.is-soldout):hover,
  .treatment-card:hover,
  .zoled-tarjeta:hover { transform: none !important; }
}

/* ==========================================================================
   19. ESTILOS DE BLOQUES NATIVOS ON-BRAND
   Estilos registrados vía register_block_style() en el plugin zoled-core
   (includes/estilos-bloques.php). El alcance se limita a las clases
   .is-style-* y a los contenedores de bloque del núcleo (.wp-block-button…),
   por lo que NUNCA afectan a los componentes propios (.btn, .product-card,
   .treatment-card, etc.). Solo se usan tokens var(--…); nunca hex crudo.
   ========================================================================== */

/* ---- core/button · "Zoled · contorno" (espejo de .btn--outline) ---------- */
/* font-size, height y padding deben declararse aquí: theme.json define
   fontFamily/textTransform/letterSpacing para core/button pero NO fontSize,
   por lo que el núcleo hereda su tamaño de fuente por defecto (~16px) y lo
   aplica también sobre .is-style-zoled-contorno. Estas tres propiedades
   igualan visualmente el botón nativo al .btn--outline del tema. */
.wp-block-button.is-style-zoled-contorno .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  background-color: transparent;
  color: var(--negro);
  border: 1px solid var(--negro);
  border-radius: var(--r-pill);
  font-family: var(--dato);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color var(--vel-2) var(--curva),
              color var(--vel-2) var(--curva),
              border-color var(--vel-2) var(--curva);
}
.wp-block-button.is-style-zoled-contorno .wp-block-button__link:hover,
.wp-block-button.is-style-zoled-contorno .wp-block-button__link:focus {
  background-color: var(--hueso);
  color: var(--negro);
  border-color: var(--negro);
}

/* ---- core/group · "Tarjeta Zoled" (espejo de .treatment-card) ------------ */
.wp-block-group.is-style-tarjeta-zoled {
  background-color: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  padding: 28px 24px;
}

/* ==========================================================================
   20. NECESIDADES (CPT `necesidad`)
   Porte de las clases del prototipo (source/estilos.css) para el listado
   `/necesidades` (vNecesidades) y el detalle `/necesidades/<slug>`
   (vNecesidad). Convertidas a tokens de diseño: sin hex crudo. Reutiliza los
   componentes del tema (.btn, .product-card, .kicker, .lead, .price) y solo
   añade lo específico de necesidad: breadcrumb, títulos serif, la grilla de
   síntomas, el encabezado tintado por línea y el bloque de cierre.
   ========================================================================== */

/* Ritmo de sección de las páginas de necesidad (referencia .sec: 34px base,
   54px ≥901px, 62px ≥1500px — NO los 80px globales del tema). Scopeado para
   no alterar el resto del sitio. */
.necesidades-listado,
.necesidad-recomendados { padding-block: 34px; }

/* ---- Breadcrumb (Inicio › Necesidades › {título}) ----------------------- */
/* Referencia .crumbs: banda full-bleed con borde inferior; el TEXTO se alinea
   con el contenido de la página (contenedor centrado), como en las capturas. */
.necesidades-crumbs {
  border-bottom: 1px solid var(--filete);
}
.necesidades-crumbs__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px var(--gutter);
  font-family: var(--dato);
  font-size: 11.5px;
  color: var(--humo);
}
.necesidades-crumbs a {
  color: var(--humo);
  text-decoration: none;
}
.necesidades-crumbs a:hover { color: var(--negro); }

/* ---- Títulos serif del prototipo (.h-l / .h-xl / .h-m) ------------------- */
/* Base = valores móviles de la referencia; el salto a desktop está más abajo. */
.h-l {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  margin: 0 0 10px;
}
.h-xl {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.05;
  margin: 0 0 12px;
}
.h-m {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px;
}

/* ---- Kicker de necesidades (referencia .kick: .15em, 11.5px→12px) -------- */
.necesidades-listado .kicker,
.linea-head .kicker,
.necesidad-recomendados .kicker,
.cierre-diag .kicker {
  font-size: 11.5px;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

/* ---- Lead de necesidades (referencia .lead: 15px→17.5px, lh 1.6) --------- */
.necesidades-listado .lead,
.linea-head .lead,
.necesidad-recomendados .lead {
  font-size: 15px;
  line-height: 1.6;
  max-width: 600px;
}

/* ---- Fila de botones (.btnrow) ------------------------------------------ */
.btnrow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 22px;
}

/* ---- Listado: lead y grilla de síntomas (.necgrid / .necard) ------------ */
.necesidades-listado__lead { max-width: 640px; }

.necgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
/* Columnas fijas del listado de necesidades (opción «necesidades_columnas»). */
.necgrid.necgrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.necgrid.necgrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.necgrid.necgrid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.necard {
  display: block;
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  padding: 20px;
  background: var(--blanco);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--vel-2) var(--curva),
              transform var(--vel-2) var(--curva);
}
.necard:hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}
.necard h4 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
}
.necard p {
  margin: 0;
  font-size: 13px;
  color: var(--plomo);
}

/* ---- Detalle: encabezado tintado por línea (.linea-head) ---------------- */
/* Referencia: banda full-bleed tintada con el color de la línea al ~13% (vía
   color-mix con el token, sin hex, inline en la plantilla). El contenido se
   centra en el contenedor del sitio (como el resto de secciones) y el texto se
   limita a 640px como en la referencia (.lh-txt max-width:640px). */
.linea-head {
  position: relative;
  overflow: hidden;
  padding-block: 34px 20px;
  padding-inline: var(--gutter);
}
.linea-head__txt {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
}
/* El texto largo se limita a ~640px (referencia .lh-txt) manteniéndose alineado
   a la izquierda del contenedor, como en la captura. */
.linea-head .lead { margin-top: 8px; max-width: 640px; }

/* ---- Detalle: grilla de productos recomendados -------------------------- */
/* Referencia .pgrid: 4 columnas fijas, gap 14px. Se reutiliza el componente
   .product-card del tema afinado a los valores de referencia (barra 3px, gap
   14px) SOLO dentro del contexto de necesidad. */
.necesidad-recomendados .products {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.necesidad-recomendados .product-card__bar { height: 3px; }
.necesidad-recomendados .product-card__body { padding: 12px 14px 14px; gap: 4px; }
.necesidad-recomendados .product-card__name { font-size: 15.5px; }
.necesidad-recomendados .product-card__desc { font-size: 13px; }
.necesidad-recomendados .price { font-size: 14px; font-weight: 400; }
.necesidad-recomendados__nota { margin-top: 18px; max-width: 600px; }

/* ---- Foto real dentro de la tarjeta de producto ------------------------- */
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card.is-soldout .product-card__img { opacity: 0.72; }

/* ---- Bloque de cierre «Diagnóstico capilar» (.cierre-diag) -------------- */
.cierre-diag {
  position: relative;
  overflow: hidden;
  background: var(--hueso);
  border-top: 1px solid var(--filete);
  padding: 46px var(--gutter);
  text-align: center;
}
.cierre-diag .cd-sol {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  color: var(--negro);
  opacity: 0.12;
  pointer-events: none;
}
.cierre-diag .cd-sol svg { width: 100%; height: 100%; }
.cierre-diag > *:not(.cd-sol) { position: relative; z-index: 1; }
.cierre-diag .kicker { margin-bottom: 8px; }
/* Referencia: el título del cierre usa tamaño .h-m (20px→23px) en italic. */
.cierre-diag__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  max-width: 560px;
  margin: 0 auto 8px;
}
.cierre-diag__title em { font-style: italic; }
.cierre-diag__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--plomo);
  max-width: 520px;
  margin: 0 auto 16px;
}
.cierre-diag__actions { display: flex; justify-content: center; }
.cierre-diag .btn__sun { width: 14px; height: 14px; }

/* ---- Escalado a escritorio (≥901px) · valores de referencia ------------- */
@media (min-width: 901px) {
  .necesidades-listado,
  .necesidad-recomendados { padding-block: 54px; }
  .necesidades-crumbs__inner { font-size: 12px; padding-block: 13px; }
  .h-l { font-size: 34px; }
  .h-xl { font-size: 46px; }
  .h-m { font-size: 23px; }
  .necesidades-listado .kicker,
  .linea-head .kicker,
  .necesidad-recomendados .kicker,
  .cierre-diag .kicker { font-size: 12px; }
  .necesidades-listado .lead,
  .linea-head .lead,
  .necesidad-recomendados .lead { font-size: 17.5px; max-width: 680px; }
  .necesidades-listado__lead { max-width: 680px; }
  .cierre-diag__title { font-size: 23px; }
  .cierre-diag__lead { font-size: 17.5px; }
  /* Botón «Agregar» de la tarjeta: 42px en escritorio (referencia .btn.sm). */
  .necesidad-recomendados .btn-sm { height: 42px; padding: 0 18px; font-size: 11.5px; }
}

@media (min-width: 1500px) {
  .necesidades-listado,
  .necesidad-recomendados { padding-block: 62px; }
}

/* ---- Responsive (~390 px): coincide con las capturas móviles ------------ */
@media (max-width: 900px) {
  .necesidades-listado,
  .necesidad-recomendados { padding-block: 22px; }
  .necesidades-crumbs__inner { padding: 10px var(--gutter-mobile); }
  .necgrid { grid-template-columns: 1fr; }
  /* En móvil las columnas fijas se colapsan: 3 → 1 columna; 4 y 5 → 2 columnas. */
  .necgrid.necgrid--cols-3 { grid-template-columns: 1fr; }
  .necgrid.necgrid--cols-4,
  .necgrid.necgrid--cols-5 { grid-template-columns: 1fr 1fr; }
  .linea-head { padding: 22px var(--gutter-mobile) 14px; }
  /* Referencia .pgrid móvil: 2 columnas fijas (no el carrusel del home). */
  .necesidad-recomendados .products {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    display: grid;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .necesidad-recomendados .product-card { flex: initial; }
  .necesidad-recomendados .product-card__name { font-size: 14.5px; }
  .cierre-diag { padding: 40px var(--gutter-mobile); }
  .btnrow .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   21. CENTRO DE EXPERIENCIA (CPT `guia`)
   Porte de las clases del prototipo (source/estilos.css → .chips/.chip,
   .guias/.guia/.g-top/.g-tipo/.g-min/.g-bar/.g-go, .destacado) para la página
   `centro-de-experiencia` (vExperiencia). Convertidas a tokens de diseño: sin
   hex crudo. Scopeado a los contenedores de la página para no afectar al resto
   del sitio. Ritmo de sección alineado a la referencia (.sec: 34px base, 54px
   ≥901px, 62px ≥1500px), como en las páginas de necesidad.
   ========================================================================== */

/* Ritmo de sección de la página (referencia .sec). La grilla y el destacado
   arrancan sin margen superior para ir pegados a la intro (referencia usa
   `padding-top:0` en esas secciones). */
.experiencia-intro { padding-block: 34px; }
.experiencia-grid,
.experiencia-destacado-sec { padding-block: 0 34px; }

.experiencia-intro__title { max-width: 560px; }

/* ---- Kicker y lead (mismos valores que las páginas de necesidad) --------- */
.experiencia-intro .kicker {
  font-size: 11.5px;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.experiencia-intro .lead {
  font-size: 15px;
  line-height: 1.6;
  max-width: 600px;
}

/* ---- Chips de filtro (referencia .chips / .chip / .chip.on) ------------- */
.experiencia-intro .chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 18px 0 0;
}
.experiencia-intro .chip {
  border: 1px solid var(--filete);
  background: var(--blanco);
  font-family: var(--dato);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 13px;
  min-height: 34px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--vel-2) var(--curva);
}
.experiencia-intro .chip:hover { border-color: var(--negro); }
.experiencia-intro .chip.on {
  background: var(--negro);
  color: var(--blanco);
  border-color: var(--negro);
}
.chips__contador {
  font-family: var(--dato);
  font-size: 11.5px;
  color: var(--humo);
  align-self: center;
  margin-left: 6px;
}

/* ---- Grilla de contenidos (referencia .guias / .guia / .g-*) ------------ */
.guias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.guia {
  border: 1px solid var(--filete);
  background: var(--blanco);
  border-radius: var(--r-sm);
  padding: 18px 20px 20px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--vel-2) var(--curva),
              transform var(--vel-2) var(--curva);
}
.guia:hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}
.guia:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 2px;
}
.g-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.g-tipo {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--negro);
  padding: 4px 8px;
}
.g-min {
  font-family: var(--dato);
  font-size: 11.5px;
  color: var(--humo);
}
.g-bar {
  height: 3px;
  width: 38px;
  margin-bottom: 12px;
}
.guia__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.22;
  margin: 0 0 6px;
}
.guia__desc {
  font-size: 13px;
  color: var(--plomo);
  margin: 0 0 14px;
  flex: 1;
}
.g-go {
  font-family: var(--dato);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ---- Bloque destacado «Diagnóstico en vivo» (referencia .destacado) ------
   El sol decorativo del fondo se dibuja con un pseudo-elemento tintado con el
   token de marca (sin hex crudo), en vez del data-uri con hex del prototipo. */
.experiencia-destacado-sec .destacado {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  background: var(--blanco);
  box-shadow: var(--sombra-3);
  padding: 26px 104px 26px 28px;
}
.experiencia-destacado-sec .destacado::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--negro);
  opacity: 0.15;
  pointer-events: none;
}
.experiencia-destacado-sec .destacado > * { position: relative; z-index: 1; }
.experiencia-destacado__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.experiencia-destacado__desc {
  font-size: 13.5px;
  color: var(--plomo);
  margin: 0 0 12px;
  max-width: 560px;
}

/* ---- Escalado a escritorio (≥901px) · valores de referencia ------------- */
@media (min-width: 901px) {
  .experiencia-intro { padding-block: 54px; }
  .experiencia-grid,
  .experiencia-destacado-sec { padding-block: 0 54px; }
  .experiencia-intro .kicker { font-size: 12px; }
  .experiencia-intro .lead { font-size: 17.5px; max-width: 680px; }
  .experiencia-intro .chip { font-size: 12px; min-height: 40px; padding: 0 16px; }
  .guia__title { font-size: 18px; }
  .guia__desc { font-size: 14.5px; }
  .g-tipo { font-size: 11.5px; }
  .g-min { font-size: 12px; }
}

@media (min-width: 1500px) {
  .experiencia-intro { padding-block: 62px; }
  .experiencia-grid,
  .experiencia-destacado-sec { padding-block: 0 62px; }
}

/* ---- Responsive (~390 px): coincide con las capturas móviles ------------ */
@media (max-width: 900px) {
  .experiencia-intro { padding-block: 22px; }
  .experiencia-grid,
  .experiencia-destacado-sec { padding-block: 0 22px; }
  .guias { grid-template-columns: 1fr; }
  .experiencia-destacado-sec .destacado {
    padding: 22px 24px;
  }
  .experiencia-destacado-sec .destacado::after {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   21. HOME — SECCIONES NATIVAS
   Las secciones Pilares, Tratamientos y Dos columnas del home se arman ahora
   con bloques nativos del núcleo (core/group, core/columns, core/heading…) que
   reutilizan las clases del tema (.section, .container, .pillars, .treatments,
   .two-col, .treatment-card, .two-col__item). Los envoltorios del núcleo
   (.wp-block-group / .wp-block-columns / .wp-block-column) traen su propia
   maquetación (flex, márgenes, gap), así que aquí se neutraliza y se fuerza el
   mismo resultado que la versión PHP. Solo se usan tokens var(--…); nunca hex.
   ========================================================================== */

/* ---- Envoltorios de grupo: sin ancho ni márgenes propios del núcleo ------- */
/* .section y .container ya aportan padding/max-width; los grupos del núcleo no
   deben añadir su propio max-width, márgenes automáticos ni relleno.
   NOTA: .section__foot se excluye de este reset para conservar su margin-top
   (36px, definido en .section__foot) que lo separa de la grilla de pilares. */
.wp-block-group.section,
.wp-block-group.container,
.wp-block-group.pillars,
.wp-block-group.pillar {
  margin-block: 0;
}
.wp-block-group.container { max-width: var(--container); }

/* ---- Pilares: la grilla vive en .pillars; el grupo del núcleo no la pisa --- */
/* .pillars ya es grid de 4 columnas; solo hay que evitar el blockGap vertical
   que el núcleo aplicaría entre los artículos hijos. */
.wp-block-group.pillars { gap: 28px; }
/* Cada .pillar es un grupo del núcleo: reproduce el flujo vertical del <article>
   original (icono → título → texto) sin márgenes automáticos del núcleo. */
.wp-block-group.pillar > * { margin-block: 0; }
.wp-block-group.pillar .pillar__title { margin-bottom: 8px; }

/* ---- Pie de sección con botón de contorno (espejo de .section__foot) ------ */
/* El botón nativo (core/button, is-style-zoled-contorno) ya replica .btn--outline;
   aquí solo se centra la fila de botones como en .section__foot. */
.wp-block-group.section__foot .wp-block-buttons { justify-content: center; }

/* ---- Tratamientos y Dos columnas: core/columns → grid del tema ------------ */
/* core/columns es flex; se convierte a grid para que apliquen las reglas ya
   existentes de .treatments y .two-col (mismas columnas y gaps). Se anula el
   gap flex del núcleo y el margen inferior automático de los .wp-block-column. */
.wp-block-columns.treatments,
.wp-block-columns.two-col {
  display: grid;
  margin-block: 0;
}
.wp-block-columns.treatments { gap: 20px; }
.wp-block-columns.two-col { gap: 40px; }
/* Los .wp-block-column no deben aplicar el flex-basis/margen del núcleo: al
   estar el padre en grid, cada columna ocupa su celda completa. */
.wp-block-column.treatment-card,
.wp-block-column.two-col__item {
  flex-basis: auto !important;
  margin-block: 0;
}
/* .treatment-card ya define fondo/borde/padding/flex; .two-col__item es una
   columna de texto sin caja. Se neutralizan los márgenes automáticos que el
   núcleo pone a headings, párrafos y botones dentro de la columna. */
.wp-block-column.treatment-card > *,
.wp-block-column.two-col__item > * { margin-block: 0; }
.wp-block-column.two-col__item .two-col__title { margin-bottom: 10px; }
.wp-block-column.two-col__item .two-col__text { margin-bottom: 18px; }

/* ---- Responsive (≤640px): 1 columna, igual que la versión PHP ------------- */
@media (max-width: 640px) {
  .wp-block-columns.treatments,
  .wp-block-columns.two-col { grid-template-columns: 1fr; }
  .wp-block-columns.two-col { gap: 28px; }
}