/* ==========================================================================
   Módulos de la landing (design.md §4)
   ========================================================================== */

/* --- 4.4 Indicador de severidad ------------------------------------------ */
.px-sev__panel {
  background: #fff; border: 1px solid var(--px-border-card); border-radius: var(--px-r-lg);
  /* El padding cede en pantallas chicas: con 44 px fijos las 10 barras del
     indicador se quedaban sin ancho. */
  padding: clamp(26px, 3.4vw, 48px) clamp(16px, 3vw, 44px) clamp(24px, 3.2vw, 44px);
  box-shadow: 0 24px 60px rgba(10, 36, 99, .07);
}
/* Escala de 10 barras del Sweating Severity Indicator ©. Las barras sin
   producto son decorativas; las que sí lo tienen son botones. El ancho lo
   reparte flex, así que no hace falta media query: las de producto reservan
   sus 44 px de área táctil y las pálidas se comprimen. */
.px-sev__chart { margin-bottom: 34px; }
.px-sev__bars {
  display: flex; align-items: flex-end; gap: clamp(4px, .6vw, 8px);
  height: clamp(190px, 24vw, 268px); margin-bottom: 14px;
}
.px-sev__bar {
  flex: 1 1 0; min-width: 0; height: var(--h, 50%);
  border: none; padding: 0; border-radius: 7px 7px 0 0;
  background: var(--px-blue-pale);
  transform-origin: bottom;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.px-sev__bar--sku {
  min-width: 44px;
  background: var(--px-bar, var(--px-blue));
  color: var(--px-bar-ink, #fff);
  cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 18px;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
/* En la ficha de producto el gráfico no conmuta nada: las barras de los otros
   SKU son enlaces y la del SKU de la página lleva `--actual`, que hereda el
   mismo realce que `.is-active` sin depender del JS.
   Los otros SKU van atenuados con su tinte de px_sku_soft() para que la vista
   caiga en el producto de la página; recuperan el color pleno al pasar el
   cursor o al enfocar. Se atenúa el fondo, no la opacidad del bloque, para que
   el número siga legible: tinta azul profunda sobre un tinte claro. */
a.px-sev__bar--sku {
  text-decoration: none;
  background: var(--px-bar-soft, #CFE2F4);
  color: var(--px-blue-deep);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
a.px-sev__bar--sku:hover, a.px-sev__bar--sku:focus-visible {
  background: var(--px-bar, #499ADB);
  color: var(--px-bar-ink, #fff);
}
.px-sev__bar--actual { cursor: default; }
.px-sev__bar--sku:hover, .px-sev__bar--sku.is-active, .px-sev__bar--actual { transform: translateY(-5px); }
.px-sev__bar--sku.is-active, .px-sev__bar--actual {
  box-shadow: 0 14px 28px color-mix(in srgb, var(--px-bar, #499ADB) 42%, transparent);
}
.px-sev__bar--sku.is-active::after, .px-sev__bar--actual::after {
  content: ''; position: absolute; inset: -5px -5px 0;
  border: 2px solid var(--px-bar, #499ADB); border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.px-sev__bar-num { font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; line-height: 1; }
.px-sev__bar-name {
  /* Horizontal, lectura normal (pedido del cliente 2026-08-28). Bajo 800 px la
     barra SKU baja a sus 44 px de área táctil y el nombre no cabe: se oculta y
     queda el número — el color, el panel inferior y el aria-label del control
     mantienen la identidad del SKU. */
  margin-top: 10px; padding-top: 10px;
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; max-width: calc(100% - 8px);
  border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
@media (max-width: 799.98px) {
  .px-sev__bar-name { display: none; }
}
.px-sev__scale {
  display: flex; align-items: center; justify-content: space-between;
}
.px-sev__scale span {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--px-muted);
}

/* Las barras crecen al entrar en pantalla. Solo bajo .px-motion-ready: si el
   JS de movimiento no llega a cargar, el inline de px_motion_flag() retira la
   clase y las barras quedan en su altura final (design.md §7.6).
   El selector cuelga de [data-reveal] y no del panel de la home, para que la
   ficha de producto herede el crecimiento con su propio contenedor. */
.px-motion-ready [data-reveal]:not(.is-revealed) .px-sev__bar { transform: scaleY(.12); }

.px-sev__detail {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  padding: 28px; border-radius: var(--px-r);
  background: var(--sku-tint); transition: background .35s ease;
}
.px-sev__pack {
  width: 92px; height: 92px; border-radius: var(--px-r); background: #fff;
  border: 1px solid var(--px-border-card);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.px-sev__pack img { width: 78px; height: 84px; object-fit: contain; }
.px-sev__info { flex: 1 1 240px; }
.px-sev__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.px-sev__name { font-size: 21px; font-weight: 700; color: var(--px-blue-deep); letter-spacing: -.01em; }
.px-sev__tag { background: var(--sku-tint); color: var(--sku-deep); border: 1px solid var(--sku-tint-border); }
.px-sev__desc p { font-size: 15px; line-height: 1.55; color: var(--px-text-soft); max-width: 440px; }
.px-sev__level {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--px-muted); margin-top: 12px;
}
.px-sev__cta { flex: none; }
.px-sev__note {
  margin-top: 20px; display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 14px; border-radius: 10px; background: var(--px-blue-tint-2);
}
.px-sev__note span { font-size: 13.5px; color: var(--px-text-body); }
.px-sev__note strong { color: var(--px-blue-deep); font-weight: 700; }

/* --- 4.5 Beneficios ------------------------------------------------------- */
/* Cards independientes con borde de 1 px y gap de 20 px, como en la referencia
   aprobada. No se usa el truco de "fondo del contenedor como divisor": con 5
   cards la última fila no se llena y ese fondo se vería como un hueco. */
/* 3 columnas en desktop (design.md §4.5): con 5 beneficios la última fila
   queda 3 + 2, que es el reparto más equilibrado posible. */
.px-benef__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 20px;
}
.px-benef__card {
  background: #fff; padding: 34px 30px;
  border: 1px solid var(--px-border); border-radius: var(--px-r);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.px-benef__card:hover {
  background: #F7FBFE;
  box-shadow: 0 16px 40px rgba(10, 36, 99, .07);
  transform: translateY(-4px);
}
.px-benef__icon {
  width: 48px; height: 48px; border-radius: 11px; background: var(--px-blue-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.px-benef__icon--green { background: #EFF7E6; }
.px-benef__title { font-size: 18px; font-weight: 700; color: var(--px-blue-deep); letter-spacing: -.01em; margin-bottom: 10px; }
.px-benef__text p { font-size: 14.5px; line-height: 1.6; color: var(--px-text-soft); }

/* --- 4.6 Cómo aplicar (video) --------------------------------------------- */
.px-aplicar { position: relative; overflow: hidden; }
.px-aplicar__orb {
  position: absolute; top: -140px; left: -120px; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(73, 154, 219, .32), transparent 68%);
  animation: px-floatA 14s ease-in-out infinite;
}
.px-aplicar__inner { position: relative; align-items: center; }
.px-aplicar__lead { font-size: 16.5px; line-height: 1.68; color: #AEBED5; max-width: 460px; margin: 22px 0 32px; }
.px-aplicar__pasos { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; counter-reset: paso; }
.px-aplicar__pasos li { display: flex; gap: 16px; align-items: flex-start; counter-increment: paso; }
.px-aplicar__paso-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.px-aplicar__paso-num::before { content: counter(paso, decimal-leading-zero); }
.px-aplicar__paso-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.px-aplicar__paso-text { font-size: 14.5px; line-height: 1.62; color: #AEBED5; }

/* --- Caja de video reutilizable ------------------------------------------- */
.px-videobox {
  position: relative; border-radius: var(--px-r-lg); overflow: hidden;
  background: var(--px-navy); box-shadow: 0 30px 70px rgba(3, 12, 38, .42);
  aspect-ratio: 16 / 9;
}
.px-videobox video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-videobox__toggle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; background: rgba(3, 12, 38, .42); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .35s ease;
}
.px-videobox.is-playing .px-videobox__toggle { background: rgba(3, 12, 38, 0); }
.px-videobox__play {
  width: clamp(62px, 6vw, 82px); height: clamp(62px, 6vw, 82px); border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 40px rgba(3, 12, 38, .42);
  transition: opacity .25s ease;
}
.px-videobox__play svg { margin-left: 4px; }
.px-videobox.is-playing .px-videobox__play { opacity: 0; }
.px-videobox__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px clamp(16px, 2.4vw, 26px);
  background: linear-gradient(180deg, transparent, rgba(3, 10, 30, .78));
  pointer-events: none;
}
.px-videobox__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.px-videobox__title { font-size: clamp(14.5px, 1.4vw, 16px); font-weight: 600; color: #fff; margin-top: 4px; }

/* --- 4.7 Ciencia ----------------------------------------------------------- */
.px-ciencia__inner { align-items: center; }
.px-ciencia__lead { font-size: 16.5px; line-height: 1.65; color: var(--px-text-body); margin: 22px 0 34px; }
.px-ciencia__sellos { gap: 16px; }
.px-ciencia__sello {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px; border: 1px solid var(--px-border); border-radius: 11px;
  /* Fondo explícito: sin él, el gradiente de la sección se ve a través de la
     card (pedido del cliente 2026-08-28). */
  background: var(--px-white);
}
.px-ciencia__sello span { font-size: 14px; font-weight: 600; color: #3A4658; }
.px-ciencia__cifra { display: block; font-size: 22px; font-weight: 700; color: var(--px-blue-deep); letter-spacing: -.02em; }
.px-ciencia__aside { position: relative; }
.px-ciencia__media { border-radius: var(--px-r-md); overflow: hidden; background: var(--px-blue-tint); }
.px-ciencia__img { width: 100%; height: 380px; object-fit: cover; object-position: center 28%; }
.px-ciencia__quote {
  margin-top: 24px; padding: 30px 32px; border-radius: var(--px-r);
  background: var(--px-blue-tint-2); border: 1px solid var(--px-border-card);
}
.px-ciencia__quote blockquote {
  font-size: 18px; line-height: 1.55; color: var(--px-blue-deep);
  font-weight: 600; letter-spacing: -.01em; margin: 14px 0 18px;
}
.px-ciencia__autor { display: block; font-size: 13px; font-weight: 700; color: #3A4658; }
.px-ciencia__meta { display: block; font-size: 13px; color: var(--px-muted); }

/* --- 4.8 Card de producto (design.md §3.3) --------------------------------- */
.px-gama__grid { gap: 22px; }
.px-prodcard {
  background: #fff; border: 1px solid var(--px-border-card); border-radius: var(--px-r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.px-prodcard:hover { transform: translateY(-4px); box-shadow: var(--px-shadow-card); }
.px-prodcard__bar { display: block; height: 6px; }
.px-prodcard__media {
  position: relative;
  padding: 30px 24px 6px; display: flex; align-items: center; justify-content: center;
  background: #F7FBFE;
}
.px-prodcard__media img {
  width: auto; height: 178px; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(10, 36, 99, .16));
}
.px-prodcard__sello { position: absolute; top: 14px; left: 14px; width: clamp(52px, 22%, 68px); }
.px-prodcard__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.px-prodcard__tag { background: var(--sku-tint); color: var(--sku-deep); align-self: flex-start; margin-bottom: 10px; }
.px-prodcard__name { font-size: 21px; font-weight: 700; color: var(--px-blue-deep); letter-spacing: -.01em; margin-bottom: 4px; }
.px-prodcard__conc { font-size: 13.5px; font-weight: 600; color: var(--px-muted); margin-bottom: 14px; }
.px-prodcard__short { font-size: 14px; line-height: 1.58; color: var(--px-text-soft); margin-bottom: 20px; flex: 1; }
.px-prodcard__link {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 700; color: var(--px-blue-deep);
  padding-top: 16px; border-top: 1px solid var(--px-border-soft); min-height: 44px;
}
.px-prodcard__link:hover { color: var(--px-blue); }

/* --- 4.9 Dónde comprar ------------------------------------------------------ */
.px-donde__inner { text-align: center; }
.px-donde__lead { max-width: 560px; margin: 16px auto 44px; }
.px-donde__logos { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.px-donde__logo {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-width: 240px; border: 1.5px solid var(--px-border); background: #fff;
  padding: 28px 34px; border-radius: var(--px-r);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.px-donde__logo:hover {
  border-color: var(--px-retailer-color, var(--px-blue));
  transform: translateY(-4px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--px-retailer-color, #499ADB) 18%, transparent);
}
.px-donde__logo img { height: 54px; width: auto; object-fit: contain; }
.px-donde__nota { font-size: 13px; color: var(--px-muted); margin-top: 26px; }

/* --- CTA de cierre ---------------------------------------------------------- */
.px-cta__inner { text-align: center; }
.px-cta__lead { max-width: 560px; margin: 18px auto 34px; }
.px-cta .px-btn-row { justify-content: center; }