/* ==========================================================================
   Perspirex — Base: reset, tipografía, layout, componentes transversales
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--px-font);
  background: var(--px-white);
  color: var(--px-text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* El atributo hidden debe ganar siempre: varios componentes lo usan para
   conmutar paneles y las clases con display:flex lo anulaban. */
[hidden] { display: none !important; }
svg { display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
::selection { background: var(--px-blue); color: #fff; }

/* Foco visible en todo control interactivo (accesibilidad §) */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--px-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.px-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.px-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: #fff; color: var(--px-blue-deep); padding: 14px 22px;
  font-size: 14px; font-weight: 700; border-radius: 0 0 var(--px-r-sm) 0;
}
.px-skip-link:focus { left: 0; }

/* --- Layout -------------------------------------------------------------- */
.px-container { width: var(--px-container); margin-inline: auto; padding-inline: var(--px-gutter); }
.px-container--md { width: var(--px-container-md); margin-inline: auto; padding-inline: var(--px-gutter); }
.px-container--sm { width: var(--px-container-sm); margin-inline: auto; padding-inline: var(--px-gutter); }

.px-section { padding-block: var(--px-section-y); }
.px-section--lg { padding-block: var(--px-section-y-lg); }
.px-section--sm { padding-block: var(--px-section-y-sm); }

/* Fondos de módulo (campo ACF `fondo`) */
.px-bg-blanco    { background: var(--px-white); }
.px-bg-tinte     { background: var(--px-blue-tint); }
.px-bg-gradiente { background: var(--px-grad-section); }
.px-bg-suave     { background: var(--px-grad-soft); }
.px-bg-azul      { background: var(--px-blue-deep); }
.px-bg-navy      { background: var(--px-navy); }
.px-bg-tinte-2   { background: var(--px-blue-tint-2); }

/* En la home, los fondos planos pasan a gradiente sutil (pedido del cliente
   2026-08-28); ver la tabla de divergencias del README. `gradiente` y `suave`
   ya lo son, y el hero pinta su propio fondo. */
.home .px-bg-blanco  { background: var(--px-grad-blanco); }
.home .px-bg-tinte   { background: var(--px-grad-tinte); }
.home .px-bg-tinte-2 { background: var(--px-grad-tinte-2); }
.home .px-bg-azul    { background: var(--px-grad-azul); }
.home .px-bg-navy    { background: var(--px-grad-navy); }
.home .px-claims     { background: var(--px-grad-azul); }

/* Grillas intrínsecas: sin media queries (design.md §2.6) */
.px-grid { display: grid; gap: 28px; }
.px-grid--2   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--px-gap); }
.px-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.px-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.px-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.px-grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.px-grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.px-grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* --- Tipografía ---------------------------------------------------------- */
.px-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--px-blue); margin-bottom: 18px;
}
.px-eyebrow--sku { color: var(--sku-accent); }
.px-eyebrow--soft { color: var(--px-blue-soft); }
.px-eyebrow--sm {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--px-muted);
}

.px-h1 {
  font-size: var(--px-fs-hero-h1); line-height: .98; letter-spacing: -.035em;
  font-weight: 700; color: var(--px-text);
}
.px-h2 {
  font-size: var(--px-fs-h2); line-height: 1.08; letter-spacing: -.02em;
  font-weight: 700; color: var(--px-text);
}
.px-h2--sm { font-size: var(--px-fs-h2-sm); line-height: 1.1; }
.px-h2--xs { font-size: var(--px-fs-h2-xs); line-height: 1.15; }
.px-h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--px-text); }

.px-lead { font-size: var(--px-fs-lead); line-height: 1.6; color: var(--px-text-body); }
.px-body { font-size: 15.5px; line-height: 1.62; color: var(--px-text-soft); }

.px-section-head { max-width: 680px; margin-bottom: 54px; }
.px-section-head--center { text-align: center; margin-inline: auto; }
.px-section-head .px-h2 + p { margin-top: 18px; }

/* Titulares sobre fondos oscuros */
.px-on-dark .px-h2, .px-on-dark .px-h1, .px-on-dark .px-h3 { color: #fff; }
.px-on-dark .px-lead, .px-on-dark .px-body { color: var(--px-on-navy); }

/* --- Botones (design.md §3.2) --------------------------------------------- */
.px-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  padding: 16px 30px; border-radius: var(--px-r-sm);
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  min-height: 44px;
}
.px-btn--primary { background: var(--px-grad-cta); color: #fff; box-shadow: var(--px-shadow-cta); }
.px-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-cta-hover); }
.px-btn--sku { background: var(--sku-accent); color: #fff; box-shadow: 0 12px 30px var(--sku-glow); }
.px-btn--sku:hover { transform: translateY(-2px); }
.px-btn--secondary {
  background: #fff; color: var(--px-blue-deep);
  border: 1.5px solid var(--px-border-btn); padding: 16px 26px;
}
.px-btn--secondary:hover { border-color: var(--sku-accent); }
.px-btn--light { background: #fff; color: var(--px-blue-deep); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.px-btn--light:hover { transform: translateY(-2px); }
.px-btn--deep { background: var(--px-blue-deep); color: #fff; font-size: 14px; padding: 13px 22px; border-radius: 7px; }
.px-btn--deep:hover { transform: translateY(-2px); }
.px-btn-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* --- Nav (design.md §3.1) ------------------------------------------------- */
.px-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(10, 36, 99, .07);
  padding: 13px 0;
  transition: background .4s ease, box-shadow .4s ease;
}
.px-nav__inner {
  width: var(--px-container); margin-inline: auto; padding-inline: var(--px-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative;
}
.px-nav__logo { display: flex; align-items: center; position: relative; height: 44px; margin-right: auto; flex: none; }
.px-nav__logo img { height: 44px; width: auto; }
.px-nav__logo-white { opacity: 0; transition: opacity .35s ease; }
.px-nav__logo-color { transition: opacity .35s ease; }

.px-nav__menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
.px-nav__link {
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--px-ink-nav); transition: color .3s ease;
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.px-nav__link:hover, .px-nav__link[aria-current="page"] { color: var(--px-blue); }
.px-nav__link[aria-current="page"] { font-weight: 700; }
.px-nav__caret { transition: transform .3s ease; }
.px-nav__link[aria-expanded="true"] .px-nav__caret { transform: rotate(180deg); }

.px-nav__dropdown-wrap { position: relative; display: flex; align-items: center; }
.px-nav__dropdown {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: 240px; background: #fff; border: 1px solid var(--px-border);
  border-radius: var(--px-r); box-shadow: 0 22px 48px rgba(10, 36, 99, .18);
  padding: 9px; z-index: 220;
}
.px-nav__dropdown[data-open="true"] { display: flex; }
.px-nav__dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--px-blue-deep);
  min-height: 44px;
}
.px-nav__dropdown-item:hover { background: var(--px-blue-tint-2); }
.px-nav__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.px-nav__cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--px-grad-cta); color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  padding: 13px 24px; border-radius: var(--px-r-sm); white-space: nowrap;
  box-shadow: var(--px-shadow-cta);
  transition: transform .25s ease, box-shadow .25s ease;
}
.px-nav__cta:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-cta-hover); }

.px-nav__cta-mobile {
  display: none; align-items: center; gap: 6px;
  background: var(--px-grad-cta); color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  padding: 10px 14px; border-radius: 7px; white-space: nowrap; flex: none;
  box-shadow: 0 6px 18px rgba(73, 154, 219, .4); min-height: 44px;
}
.px-nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; padding: 0; flex: none;
}
.px-nav__panel {
  display: none; flex-direction: column; gap: 4px;
  position: absolute; top: calc(100% + 10px); right: clamp(18px, 5vw, 32px);
  width: min(264px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--px-border); border-radius: var(--px-r);
  box-shadow: var(--px-shadow-menu); padding: 10px; z-index: 200;
}
.px-nav__panel[data-open="true"] { display: flex; }
.px-nav__panel-item {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--px-blue-deep); min-height: 44px;
}
.px-nav__panel-item:hover { background: var(--px-blue-tint-2); }
.px-nav__panel-item--sep { margin-top: 4px; border-top: 1px solid var(--px-border-soft); }
.px-nav__panel-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--px-muted); padding: 10px 15px 6px; }

/* Único breakpoint del sistema: < 800px (design.md §9) */
@media (max-width: 799.98px) {
  .px-nav__menu { display: none; }
  .px-nav__cta-mobile, .px-nav__burger { display: inline-flex; }
}

/* Nav transparente sobre el hero de la landing */
.px-nav--overlay:not(.is-scrolled) {
  background: transparent; box-shadow: none;
}
.px-nav--overlay:not(.is-scrolled) .px-nav__link { color: rgba(255, 255, 255, .88); }
.px-nav--overlay:not(.is-scrolled) .px-nav__burger svg { stroke: rgba(255, 255, 255, .88); }
.px-nav--overlay:not(.is-scrolled) .px-nav__logo-white { opacity: 1; }
.px-nav--overlay:not(.is-scrolled) .px-nav__logo-color { opacity: 0; }
.px-nav--overlay .px-nav__logo-color { position: absolute; left: 0; top: 0; }
.px-nav--overlay.is-scrolled {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(10, 36, 99, .07), 0 8px 30px rgba(10, 36, 99, .05);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.px-breadcrumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 600; color: var(--px-muted); margin-bottom: 34px;
}
.px-breadcrumb a:hover { color: var(--sku-accent); }
.px-breadcrumb__sep { color: #C6D2E0; }
.px-breadcrumb__current { color: var(--sku-deep); }

/* --- Franja de claims (design.md §4.2) ------------------------------------ */
.px-claims { background: var(--px-blue-deep); padding: clamp(18px, 2.2vw, 28px) 0; }
.px-claims__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.px-claim { display: flex; align-items: center; gap: 10px; }
.px-claim span { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--px-blue-pale); }

/* --- Footer (design.md §3.5) ---------------------------------------------- */
.px-footer { background: var(--px-navy); padding: clamp(46px, 5vw, 66px) 0 clamp(32px, 3.5vw, 46px); }
.px-footer__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.px-footer__brand { max-width: 300px; }
.px-footer__brand img { height: 52px; width: auto; margin-bottom: 18px; opacity: .95; }
.px-footer__desc { font-size: 14.5px; line-height: 1.6; color: var(--px-footer-desc); }
/* Redes: las filas de px_org_sameas que declaran red (ver px_social_links()). */
.px-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; list-style: none; padding: 0; }
.px-footer__social-link {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; color: var(--px-blue-pale);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .15);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.px-footer__social-link:hover,
.px-footer__social-link:focus-visible {
  border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff;
}
/* Farmacovigilancia: mismo bloque que en Umbrella, la marca hermana. */
.px-footer__farmaco {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .15);
  transition: border-color .3s ease, background .3s ease;
}
.px-footer__farmaco:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }
.px-footer__farmaco-icon {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255, 255, 255, .1); color: var(--px-blue-pale);
  display: flex; align-items: center; justify-content: center;
}
.px-footer__farmaco-txt { display: flex; flex-direction: column; gap: 2px; }
.px-footer__farmaco-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--px-footer-label);
}
.px-footer__farmaco-label { font-size: 14px; font-weight: 600; color: #fff; }
.px-footer__nav { display: flex; flex-direction: column; gap: 11px; }
.px-footer__nav-title {
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--px-footer-label); margin-bottom: 3px;
}
.px-footer__nav a { color: var(--px-footer-text); font-size: 14px; font-weight: 600; }
.px-footer__nav a:hover { color: #fff; }
.px-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.px-footer__col-title {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #5E7099; margin-bottom: 14px;
}
.px-footer__col a { display: block; font-size: 14px; color: var(--px-footer-text); margin-bottom: 10px; }
.px-footer__col a:last-child { margin-bottom: 0; }
.px-footer__col a:hover { color: #fff; }
.px-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: 26px;
}
.px-footer__legal { display: flex; flex-direction: column; gap: 6px; }
.px-footer__legal span { font-size: 13.5px; color: var(--px-footer-muted); }
.px-footer__megalabs { height: 52px; width: auto; opacity: .95; }

/* --- Modal "Cómpralo en" (design.md §3.4) --------------------------------- */
.px-modal {
  display: none; position: fixed; inset: 0; z-index: 300;
  align-items: center; justify-content: center;
  background: rgba(6, 18, 46, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}
.px-modal[data-open="true"] { display: flex; }
.px-modal__panel {
  position: relative; background: #fff; border-radius: 18px;
  width: 100%; max-width: 440px; padding: 36px 32px 30px;
  box-shadow: 0 40px 90px rgba(6, 18, 46, .4);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.px-modal__close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  border: none; background: #F1F4F8; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--px-text-body); line-height: 1;
}
.px-modal__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-right: 40px; }
.px-modal__thumb {
  width: 62px; height: 62px; border-radius: 12px; background: var(--sku-tint);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.px-modal__thumb img { height: 52px; width: auto; object-fit: contain; }
.px-modal__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sku-accent); margin-bottom: 4px;
}
.px-modal__title { font-size: 20px; font-weight: 700; color: var(--sku-deep); letter-spacing: -.01em; line-height: 1.1; }
.px-modal__intro { font-size: 14.5px; line-height: 1.55; color: var(--px-text-soft); margin-bottom: 22px; }
.px-modal__list { display: flex; flex-direction: column; gap: 11px; }
.px-retailer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1.5px solid var(--px-border); background: #fff; padding: 16px 20px; border-radius: 11px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.px-retailer:hover { transform: translateY(-2px); border-color: var(--px-retailer-color, var(--px-blue)); }
.px-retailer img { height: 42px; width: auto; object-fit: contain; }
.px-retailer__go { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--px-muted); }
.px-retailer__go svg { stroke: var(--px-retailer-color, var(--px-blue)); }
.px-modal__note { font-size: 13px; line-height: 1.5; color: var(--px-muted); margin-top: 20px; text-align: center; }
body.px-modal-open { overflow: hidden; }

/* --- Sistema de movimiento (design.md §7.6) ------------------------------- */
/* Sin JS, sin WAAPI o con reduced-motion: el contenido siempre se ve. */
[data-reveal], [data-enter] { opacity: 1; }
.px-motion-ready [data-reveal]:not(.is-revealed),
.px-motion-ready [data-enter]:not(.is-revealed) { opacity: 0; }
[data-parallax] { will-change: transform; }

@keyframes px-floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -18px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .px-motion-ready [data-reveal], .px-motion-ready [data-enter] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Utilidades ----------------------------------------------------------- */
.px-card {
  background: #fff; border: 1px solid var(--px-border); border-radius: var(--px-r);
  padding: 38px 32px; transition: box-shadow .3s ease, transform .3s ease;
}
.px-card:hover { box-shadow: 0 18px 44px rgba(10, 36, 99, .08); transform: translateY(-4px); }
.px-icon-box {
  width: 54px; height: 54px; border-radius: 12px; background: var(--px-blue-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.px-icon-box--green { background: #EFF7E6; }
.px-chip {
  font-size: 13px; font-weight: 700; color: var(--sku-deep);
  background: var(--sku-tint); border: 1px solid var(--sku-tint-border);
  border-radius: var(--px-r-pill); padding: 8px 15px;
}
.px-tag {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: var(--px-r-pill);
}

/* --- Sello «Clínicamente probado» ---------------------------------------- */
/* Arte del cliente (2026-09-13) redibujado en px_sello_clinico(). La estrella
   toma currentColor; el tamaño lo pone cada contexto con width (height: auto
   respeta el viewBox). El texto curvo es parte del arte, no copy: su nombre
   accesible va en el <title> del SVG. */
.px-sello { display: block; height: auto; color: var(--px-blue); filter: drop-shadow(0 6px 12px rgba(10, 36, 99, .18)); }
.px-sello__txt { font-family: var(--px-font); font-weight: 700; font-size: 10.4px; letter-spacing: .03em; fill: #fff; }