/* PLP Diprovet — estilos de página.
   Todo valor de color, espacio, radio y tipografía viene del design system (--dp-*).
   Las sombras son locales: el sistema todavía no tiene tokens de elevación. */

:root {
  --plp-max: 1440px;
  --plp-gutter: var(--dp-spacing-page-margin);
  --plp-sidebar: 280px;
  --plp-header-h: 76px;
  --plp-shadow-card: 0 1px 3px 1px rgb(137 137 137 / 0.15);
  --plp-shadow-card-hover: 0 12px 28px -10px rgb(23 23 23 / 0.18), 0 2px 6px rgb(23 23 23 / 0.06);
  --plp-shadow-tile: 0 8px 24px -8px rgb(0 0 0 / 0.08);
  --plp-shadow-float: 0 16px 48px -12px rgb(4 56 77 / 0.28);
  --plp-ease: cubic-bezier(.2, .7, .2, 1);
  --plp-focus: 0 0 0 var(--dp-border-width-focus) var(--dp-color-surface-raised), 0 0 0 calc(var(--dp-border-width-focus) * 2) var(--dp-color-border-focus);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body {
  margin: 0;
  background: var(--dp-color-surface-default);
  color: var(--dp-color-text-primary);
  font-family: var(--dp-font-family-body);
  font-size: var(--dp-font-size-body-md);
  line-height: var(--dp-line-height-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
.ph, .ph-fill { line-height: 1; }
:focus-visible { outline: none; box-shadow: var(--plp-focus); border-radius: var(--dp-radius-button); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--dp-color-surface-inverse); color: var(--dp-color-text-inverse); padding: 10px 16px; border-radius: var(--dp-radius-button); text-decoration: none; }
.skip-link:focus { top: 12px; }
.muted { color: var(--dp-color-text-secondary); }
.container { width: 100%; max-width: var(--plp-max); margin-inline: auto; padding-left: max(var(--plp-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--plp-gutter), env(safe-area-inset-right, 0px)); }
@media (max-width: 989px) { .hide-mobile { display: none !important; } }
@media (min-width: 990px) { .hide-desktop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dp-button-gap);
  min-height: 40px; padding: 8px var(--dp-button-padding-x);
  border: var(--dp-border-width-default) solid transparent; border-radius: var(--dp-button-radius);
  font-family: var(--dp-font-family-headings); font-size: var(--dp-font-size-cta-sm); line-height: var(--dp-line-height-cta-sm);
  font-weight: var(--dp-font-weight-medium); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--plp-ease), border-color .18s var(--plp-ease), color .18s var(--plp-ease), transform .18s var(--plp-ease);
}
.btn .ph { font-size: 18px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--dp-button-primary-bg-default); color: var(--dp-button-primary-text); }
.btn--primary:hover { background: var(--dp-button-primary-bg-hover); }
.btn--primary:active { background: var(--dp-button-primary-bg-active); }
.btn--secondary { background: var(--dp-button-secondary-bg-default); color: var(--dp-button-secondary-text); border-color: var(--dp-color-action-secondary-border-default); }
.btn--secondary:hover { background: var(--dp-button-secondary-bg-hover); }
.btn--outline { background: var(--dp-color-surface-raised); color: var(--dp-color-text-primary); border-color: var(--dp-color-border-default); text-transform: none; letter-spacing: 0; font-size: var(--dp-font-size-body-sm); }
.btn--outline:hover { border-color: var(--dp-color-border-strong); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--dp-button-primary-bg-disabled); color: var(--dp-button-text-disabled); border-color: transparent; cursor: not-allowed; transform: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--dp-link-text); font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--dp-color-action-primary-hover); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; color: var(--dp-color-icon-strong); font-size: 28px; flex: 0 0 auto; transition: background-color .15s; }
.icon-btn:hover { background: var(--dp-color-surface-subtle); }

/* ---------- Etiquetas ---------- */
.label { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--dp-spacing-inset-xs); border-radius: var(--dp-radius-badge);
  font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); font-weight: var(--dp-font-weight-bold); letter-spacing: 0.02em; white-space: nowrap; }
.label .ph { font-size: 13px; }
/* surface-inverse (teal-700) en lugar de surface-label: con texto blanco pasa AA (5.4:1). */
.label--filled { background: var(--dp-color-surface-inverse); color: var(--dp-label-filled-text); }
.label--new { background: var(--dp-color-badge-new-bg); color: var(--dp-color-feedback-info-text); }
.label--sale { background: var(--dp-color-badge-sale-bg); color: var(--dp-color-badge-sale-text); }
.label--cold { background: var(--dp-color-feedback-info-bg); color: var(--dp-color-feedback-info-text); border: 1px solid var(--dp-color-feedback-info-border); }
.label--rx { background: var(--dp-color-surface-raised); color: var(--dp-color-text-primary); border: 1px solid var(--dp-color-border-default); }

/* ---------- Barra de anuncios ---------- */
.announce { background: var(--dp-color-surface-subtle); }
.announce__in { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-spacing-gap-sm); min-height: 40px; padding-block: 8px; }
.announce__in > p { min-width: 0; }
.announce__links { display: flex; gap: var(--dp-spacing-gap-md); flex-shrink: 0; }
.announce__link { display: inline-flex; align-items: center; gap: 6px; text-underline-offset: 3px; }
.announce__link .ph { font-size: 18px; text-decoration: none; }
@media (max-width: 989px) { .announce__links { display: none; } .announce__in { justify-content: center; text-align: center; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--dp-color-surface-raised); transition: box-shadow .2s; }
.site-header.is-stuck { box-shadow: 0 6px 20px -12px rgb(0 0 0 / 0.25); }
.site-header__in { display: flex; align-items: center; gap: var(--dp-spacing-gap-sm); padding-block: 12px; }
.logo { flex: 0 0 auto; display: block; width: 180px; height: 52px; overflow: hidden; border-radius: 6px; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.search { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px; padding-right: 56px;
  background: var(--dp-color-surface-raised); border: var(--dp-border-width-default) solid var(--dp-color-border-subtle);
  border-radius: var(--dp-radius-searchbar); box-shadow: 0 0 2.5px rgb(0 0 0 / 0.15); transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--dp-color-border-focus); box-shadow: 0 0 0 3px var(--dp-color-surface-subtle-brand); }
.search__scope { position: relative; flex: 0 0 128px; }
.search__scope select { appearance: none; width: 100%; height: 42px; padding: 0 28px 0 var(--dp-input-padding-x);
  background: var(--dp-input-bg); border: var(--dp-input-border-width) solid var(--dp-input-border-default); border-radius: var(--dp-input-radius);
  color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-body-sm); }
.search__scope .ph { position: absolute; right: 9px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--dp-color-icon-default); font-size: 14px; }
.search input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 6px; border: 0; outline: 0; background: transparent; font-size: var(--dp-font-size-body-md); }
.search input::placeholder { color: var(--dp-color-text-placeholder); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search__btn { position: absolute; right: 5px; top: 5px; bottom: 5px; width: 44px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: var(--dp-color-surface-subtle); color: var(--dp-color-icon-default); font-size: 19px; transition: background-color .15s; }
.search__btn:hover { background: var(--dp-color-action-secondary-bg-hover); }
.header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.header-actions .btn--primary { margin-right: var(--dp-spacing-inset-md); text-transform: none; letter-spacing: 0; }
.exec-link { display: inline-flex; align-items: center; gap: 4px; margin-right: var(--dp-spacing-inset-md); color: var(--dp-color-text-btn-secondary); text-underline-offset: 3px; }
.exec-link .ph { font-size: 20px; color: #25d366; }
.cart-btn { position: relative; }
.cart-badge { position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  background: var(--dp-color-action-primary-default); color: var(--dp-color-text-inverse); border: 2px solid var(--dp-color-surface-raised);
  border-radius: 999px; font-size: 11px; font-weight: var(--dp-font-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.cart-badge.is-bump { animation: bump .45s var(--plp-ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (max-width: 989px) {
  .site-header__in { flex-wrap: wrap; gap: 4px; padding-block: 8px 12px; }
  .logo { width: 132px; height: 40px; margin-right: auto; }
  .search { order: 3; flex-basis: 100%; padding-left: 12px; background: var(--dp-color-surface-subtle); border-color: var(--dp-color-border-default); box-shadow: none; }
  .search__scope { display: none; }
  .search input { height: 44px; }
}

/* Navegación principal */
.main-nav { background: var(--dp-color-surface-inverse); border-block: var(--dp-border-width-default) solid #f5f5f5; }
.main-nav__list { display: flex; justify-content: center; flex-wrap: wrap; }
.main-nav__link { display: inline-flex; align-items: center; gap: var(--dp-spacing-inset-2xs); padding: 13px 14px; background: none; border: 0;
  color: var(--dp-color-text-inverse); font-family: var(--dp-font-family-headings); font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm);
  font-weight: var(--dp-font-weight-bold); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; position: relative; }
.main-nav__link .ph { font-size: 16px; transition: transform .2s; }
.main-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .2s var(--plp-ease); }
.main-nav__link:hover::after, .main-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.main-nav__link[aria-expanded="true"] .ph { transform: rotate(180deg); }
.main-nav__link:focus-visible { box-shadow: inset 0 0 0 2px var(--dp-color-text-inverse); }
@media (max-width: 989px) { .main-nav { display: none; } }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--dp-color-surface-raised); border-top: 1px solid var(--dp-color-border-subtle);
  box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.25); animation: drop .2s var(--plp-ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__in { display: grid; grid-template-columns: 2fr 1fr 1.1fr; gap: var(--dp-spacing-region-md); padding-block: var(--dp-spacing-region-md); }
.mega__col--full { grid-column: 1 / -1; }
.mega__title { margin-bottom: 14px; color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); font-weight: var(--dp-font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.mega__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mega__cats a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--dp-radius-card-inside); text-decoration: none; font-weight: var(--dp-font-weight-medium); font-size: var(--dp-font-size-body-sm); }
.mega__cats a:hover { background: var(--dp-color-surface-subtle); }
.mega__cats img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.mega__links { display: grid; gap: 4px; }
.mega__links a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: var(--dp-font-size-body-sm); }
.mega__links a:hover { background: var(--dp-color-surface-subtle); color: var(--dp-color-text-btn-secondary); }
.mega__links .ph { font-size: 20px; color: var(--dp-color-icon-default); }
.mega__promo { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: var(--dp-radius-card-inside);
  background: var(--dp-color-surface-subtle-brand); text-decoration: none; }
.mega__promo img { width: 112px; height: 112px; border-radius: 10px; object-fit: cover; }
.mega__promo .label { position: absolute; left: 22px; top: 22px; }
.mega__promo-text { display: grid; gap: 4px; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); color: var(--dp-color-text-secondary); }
.mega__promo-text b { color: var(--dp-color-text-primary); font-size: var(--dp-font-size-body-md); line-height: var(--dp-line-height-body-md); }
.mega__labs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mega__labs a { display: grid; place-items: center; height: 96px; border: 1px solid var(--dp-color-border-subtle); border-radius: var(--dp-radius-card-inside); background: var(--dp-color-surface-raised); transition: border-color .15s, transform .15s; }
.mega__labs a:hover { border-color: var(--dp-color-action-secondary-border-default); transform: translateY(-2px); }
.mega__labs img { max-height: 80px; object-fit: contain; }

/* ---------- Encabezado de colección ---------- */
.breadcrumbs { padding-block: var(--dp-spacing-region-sm) 6px; overflow-x: auto; scrollbar-width: none; }
.breadcrumbs ol { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); font-weight: var(--dp-font-weight-medium); }
.breadcrumbs a { color: var(--dp-color-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--dp-color-text-primary); text-decoration: underline; }
.breadcrumbs .ph { color: var(--dp-color-icon-default); font-size: 14px; }
.collection-head { display: grid; grid-template-columns: 1fr auto; gap: var(--dp-spacing-gap-lg); align-items: end; padding-block: 12px var(--dp-spacing-region-sm); }
.collection-head__text { display: grid; gap: 8px; max-width: 72ch; }
.collection-head__desc { color: var(--dp-color-text-secondary); }
@media (max-width: 989px) { .collection-head { grid-template-columns: 1fr; gap: var(--dp-spacing-gap-sm); } }

.price-access { display: flex; align-items: center; gap: 14px; max-width: 480px; padding: 12px 14px 12px 16px; border-radius: var(--dp-radius-card-inside);
  background: var(--dp-color-surface-raised); border: 1px solid var(--dp-color-border-subtle); box-shadow: var(--plp-shadow-tile); }
.price-access > .ph { font-size: 26px; color: var(--dp-color-icon-default); flex: 0 0 auto; }
.price-access__txt { display: grid; gap: 2px; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); color: var(--dp-color-text-secondary); min-width: 0; }
.price-access__txt b { color: var(--dp-color-text-primary); }
.price-access .btn { flex: 0 0 auto; }
.price-access.is-client { background: var(--dp-color-feedback-success-bg); border-color: var(--dp-color-feedback-success-border); box-shadow: none; }
.price-access.is-client > .ph { color: var(--dp-color-feedback-success-text); }
@media (max-width: 560px) { .price-access { flex-wrap: wrap; } .price-access .btn { width: 100%; } }

/* Tira de categorías */
.cat-strip { margin-bottom: var(--dp-spacing-region-sm); }
.cat-strip__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--dp-spacing-gap-sm); padding: var(--dp-spacing-inset-md);
  background: var(--dp-color-surface-raised); border-radius: 24px; box-shadow: var(--plp-shadow-tile); }
.cat { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 6px 4px 10px; background: none; border: 0; border-radius: var(--dp-radius-card); text-align: center; transition: background-color .15s; }
.cat__img { position: relative; width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: var(--dp-radius-card); overflow: hidden; background: var(--dp-color-surface-form); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--plp-ease); }
.cat__img--all { display: grid; place-items: center; background: var(--dp-color-surface-subtle); color: var(--dp-color-action-primary-default); font-size: 40px; }
.cat:hover .cat__img img { transform: scale(1.05); }
.cat__name { font-family: var(--dp-font-family-headings); font-size: var(--dp-font-size-heading-sm); line-height: var(--dp-line-height-heading-sm); font-weight: var(--dp-font-weight-bold); letter-spacing: -0.01em; }
.cat__count { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); font-variant-numeric: tabular-nums; }
.cat[aria-pressed="true"] .cat__img { outline-color: var(--dp-color-action-primary-default); }
.cat[aria-pressed="true"] .cat__name { color: var(--dp-color-action-primary-default); }
@media (max-width: 989px) {
  .cat-strip { margin-inline: calc(var(--plp-gutter) * -1); }
  .cat-strip__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0; box-shadow: none; background: transparent; padding: 4px var(--plp-gutter) 8px; scrollbar-width: none; }
  .cat { flex: 0 0 92px; scroll-snap-align: start; padding: 4px 0; }
  .cat__img { border-radius: var(--dp-radius-card-inside); }
  .cat__name { font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
}

/* ---------- Layout PLP ---------- */
.plp { display: grid; grid-template-columns: var(--plp-sidebar) minmax(0, 1fr); gap: var(--dp-spacing-region-md); align-items: start; padding-bottom: var(--dp-spacing-region-lg); }
@media (max-width: 989px) { .plp { grid-template-columns: minmax(0, 1fr); } }

/* Filtros */
.filters { position: sticky; top: calc(var(--plp-header-h) + 16px); max-height: calc(100vh - var(--plp-header-h) - 32px); display: flex; flex-direction: column;
  background: var(--dp-color-surface-raised); border-radius: var(--dp-radius-card); box-shadow: var(--plp-shadow-card); overflow: hidden; }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--dp-color-border-subtle); }
.filters__head .dp-text-heading-sm-bold { margin-right: auto; }
.filters__body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; scrollbar-width: thin; }
.facet { border-bottom: var(--dp-border-width-default) solid var(--dp-accordion-border); }
.facet:last-child { border-bottom: 0; }
.facet__btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: none; border: 0; text-align: left;
  font-size: var(--dp-font-size-body-md); line-height: var(--dp-line-height-body-md); font-weight: var(--dp-font-weight-medium); }
.facet__btn .facet__sel { margin-left: auto; color: var(--dp-color-action-primary-default); font-size: var(--dp-font-size-caption-md); font-weight: var(--dp-font-weight-bold); }
.facet__btn > .ph { color: var(--dp-color-icon-default); font-size: 16px; transition: transform .2s var(--plp-ease); }
.facet__btn[aria-expanded="false"] > .ph { transform: rotate(-90deg); }
.facet__panel { padding: 0 20px 18px; display: grid; gap: 10px; }
.facet__search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; background: var(--dp-input-bg); border: var(--dp-input-border-width) solid var(--dp-input-border-default); border-radius: var(--dp-input-radius); }
.facet__search:focus-within { border-color: var(--dp-input-border-focus); }
.facet__search .ph { color: var(--dp-color-icon-subtle); }
.facet__search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: var(--dp-font-size-body-sm); }
.facet__more { justify-self: start; }

/* Checkbox (componente checkbox de Figma + estado checked propuesto) */
.check { display: flex; align-items: center; gap: var(--dp-spacing-inset-xs); cursor: pointer; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); user-select: none; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; border: var(--dp-checkbox-border-width) solid var(--dp-checkbox-border);
  border-radius: 4px; background: var(--dp-checkbox-bg); color: transparent; font-size: 12px; transition: background-color .15s, border-color .15s; }
.check:hover .check__box { border-color: var(--dp-color-action-primary-default); }
.check input:checked + .check__box { background: var(--dp-checkbox-bg-checked); border-color: var(--dp-checkbox-border-checked); color: var(--dp-checkbox-icon-checked); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 2px var(--dp-color-surface-raised), 0 0 0 4px var(--dp-checkbox-focus-ring-color); }
.check input:disabled + .check__box { background: var(--dp-checkbox-bg-disabled); border-color: var(--dp-checkbox-border-disabled); }
.check.is-disabled { color: var(--dp-color-text-disabled); cursor: default; }
.check__label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.check__label img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.check__count { margin-left: auto; opacity: .7; font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); font-variant-numeric: tabular-nums; }

/* Switch */
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; flex: 0 0 38px; height: 22px; border-radius: var(--dp-radius-toggle); background: var(--dp-color-border-default); transition: background-color .18s; }
.switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--dp-color-surface-raised); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .18s var(--plp-ease); }
.switch input:checked + .switch__track { background: var(--dp-color-action-primary-default); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--plp-focus); }

@media (max-width: 989px) {
  .filters { position: fixed; z-index: 70; inset: 0 auto 0 0; top: 0; width: min(400px, 92vw); max-height: none; border-radius: 0 var(--dp-radius-card) var(--dp-radius-card) 0;
    transform: translateX(-102%); transition: transform .28s var(--plp-ease); visibility: hidden; }
  .filters.is-open { transform: none; visibility: visible; }
  .filters__head { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .filters__body { flex: 1; }
  .filters__foot { padding: 12px 20px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dp-color-border-subtle); }
}

/* Barra de herramientas */
.toolbar { display: flex; align-items: center; gap: var(--dp-spacing-gap-sm); margin-bottom: 12px; min-height: 44px; }
.toolbar__count { color: var(--dp-color-text-secondary); margin-right: auto; }
.toolbar__count b { color: var(--dp-color-text-primary); font-weight: var(--dp-font-weight-bold); }
.toolbar__right { display: flex; align-items: center; gap: 12px; }
.select { display: flex; align-items: center; gap: 10px; }
.select__label { color: var(--dp-color-text-secondary); white-space: nowrap; }
.select__box { position: relative; }
.select__box select { appearance: none; height: 42px; min-width: 200px; padding: 0 36px 0 12px; background: var(--dp-input-bg); border: var(--dp-input-border-width) solid var(--dp-input-border-default);
  border-radius: var(--dp-input-radius); font-size: var(--dp-font-size-body-sm); cursor: pointer; }
.select__box select:focus-visible { border-color: var(--dp-input-border-focus); }
.select__box .ph { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--dp-color-icon-default); }
.view-toggle { display: inline-flex; padding: 3px; gap: 2px; background: var(--dp-input-bg); border: var(--dp-input-border-width) solid var(--dp-input-border-default); border-radius: var(--dp-input-radius); }
.view-toggle button { width: 36px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--dp-color-icon-subtle); font-size: 18px; }
.view-toggle button[aria-pressed="true"] { background: var(--dp-color-surface-raised); color: var(--dp-color-action-primary-default); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.count-pill { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--dp-color-action-primary-default); color: var(--dp-color-text-inverse); font-size: 11px; font-weight: var(--dp-font-weight-bold); }
@media (max-width: 989px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar__count { order: 3; flex-basis: 100%; }
  .toolbar__right { margin-left: auto; }
  .select__label { display: none; }
  .select__box select { min-width: 0; width: 168px; }
}
@media (max-width: 400px) { .view-toggle { display: none; } }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-filters:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--dp-radius-chip);
  background: var(--dp-color-surface-subtle); color: var(--dp-color-text-btn-secondary); border: 1px solid var(--dp-color-action-secondary-bg-hover);
  font-size: var(--dp-font-size-body-sm); font-weight: var(--dp-font-weight-medium); }
.chip .ph { font-size: 14px; }
.chip:hover { background: var(--dp-color-action-secondary-bg-hover); }

/* ---------- Grilla y product card ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--dp-spacing-gap-md); }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.grid__item { display: flex; container-type: inline-size; animation: rise .4s var(--plp-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.grid__item.is-static { animation: none; }

.card { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--dp-product-card-bg); border-radius: var(--dp-product-card-radius);
  box-shadow: var(--plp-shadow-card); overflow: hidden; transition: box-shadow .25s var(--plp-ease), transform .25s var(--plp-ease); }
.card:hover { box-shadow: var(--plp-shadow-card-hover); transform: translateY(-3px); }
.card__media { position: relative; display: block; aspect-ratio: 1; border-bottom: 1px solid var(--dp-color-border-subtle); background: var(--dp-color-surface-form); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--plp-ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__badges { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.card__ref { position: absolute; right: 10px; bottom: 8px; color: var(--dp-color-text-secondary); font-size: 10px; letter-spacing: .04em; opacity: .8; }
.card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px var(--dp-product-card-padding-x-desktop) var(--dp-product-card-padding-x-desktop); }
.card__brand { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); letter-spacing: .04em; text-transform: uppercase; }
.card__title { display: grid; gap: 4px; }
.card__name { font-size: var(--dp-font-size-body-md); line-height: var(--dp-line-height-body-md); font-weight: var(--dp-font-weight-bold); letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__name a { text-decoration: none; }
.card__name a::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.card__variant { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--dp-color-surface-form); color: var(--dp-color-text-secondary);
  font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); }
.meta-tag .ph { font-size: 13px; color: var(--dp-color-icon-subtle); }
.inventory { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px;
  background: var(--dp-color-feedback-warning-bg); border: 1px solid var(--dp-color-feedback-warning-border); color: var(--dp-color-feedback-warning-text);
  font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); font-weight: var(--dp-font-weight-medium); }
.inventory .ph { color: var(--dp-color-stock-low); font-size: 14px; }
.inventory--out { background: var(--dp-color-feedback-error-bg); border-color: var(--dp-color-feedback-error-border); color: var(--dp-color-feedback-error-text); }
.inventory--out .ph { color: var(--dp-color-stock-out); }

.price { position: relative; z-index: 1; display: grid; gap: 8px; padding: 12px 11px; border-radius: var(--dp-radius-card-inside); background: var(--dp-color-surface-subtle); border: 1px solid var(--dp-color-border-subtle); }
.price__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.price__row + .price__row { padding-top: 8px; border-top: 1px solid var(--dp-color-border-subtle); }
.price__k { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); font-weight: var(--dp-font-weight-bold); }
.price__row + .price__row .price__k { font-weight: var(--dp-font-weight-regular); }
.price__v { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price__v b { font-size: var(--dp-font-size-price-sm); line-height: var(--dp-line-height-price-sm); font-weight: var(--dp-font-weight-bold); }
.price__row + .price__row .price__v b { font-size: var(--dp-font-size-caption-sm); color: var(--dp-color-text-secondary); }
.price__v small { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-sm); line-height: var(--dp-line-height-caption); }
.price__v s { color: var(--dp-color-price-compare); font-size: var(--dp-font-size-caption-md); }
.price__save { color: var(--dp-color-price-sale); font-size: var(--dp-font-size-caption-md); font-weight: var(--dp-font-weight-bold); }
.price-lock { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: var(--dp-radius-card-inside);
  background: var(--dp-color-surface-form); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); color: var(--dp-color-text-primary); }
.price-lock .ph { font-size: 16px; color: var(--dp-color-icon-subtle); }
.price-lock button { margin-left: auto; font-size: var(--dp-font-size-caption-md); white-space: nowrap; }
@container (max-width: 262px) {
  .price__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .price-lock { flex-wrap: wrap; row-gap: 2px; }
  .price-lock button { margin-left: 24px; }
}

.card__foot { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: auto; }
.card__compare { justify-self: start; }
.qty { display: grid; grid-template-columns: 44px 1fr 44px; height: 40px; border: var(--dp-stepper-border-width) solid var(--dp-color-action-primary-default); border-radius: var(--dp-button-radius); overflow: hidden; background: var(--dp-color-surface-raised); }
.qty button { border: 0; background: var(--dp-stepper-bg-default); color: var(--dp-color-action-primary-default); font-size: 16px; display: grid; place-items: center; }
.qty button:hover { background: var(--dp-stepper-bg-hover); }
.qty output { display: grid; place-items: center; font-weight: var(--dp-font-weight-bold); font-variant-numeric: tabular-nums; border-inline: 1px solid var(--dp-color-border-subtle); font-size: var(--dp-font-size-body-sm); }
.qty__note { color: var(--dp-color-text-btn-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); display: flex; align-items: center; gap: 4px; justify-content: center; }
.card .btn { width: 100%; }
@media (max-width: 640px) {
  .card { border-radius: var(--dp-radius-card); }
  .card__body { padding: 12px var(--dp-product-card-padding-x-mobile) var(--dp-product-card-padding-x-mobile); gap: 10px; }
  .card__badges { left: 8px; top: 8px; right: 8px; }
  .card__badges .label:nth-child(n+3) { display: none; }
  .card .btn { padding-inline: 8px; font-size: var(--dp-font-size-caption-md); letter-spacing: 0; }
  .card__meta { display: none; }
}

/* Vista lista */
.grid.is-list { grid-template-columns: 1fr; gap: 14px; }
.grid.is-list .card { flex-direction: row; }
.grid.is-list .card__media { flex: 0 0 210px; aspect-ratio: 1; border-bottom: 0; border-right: 1px solid var(--dp-color-border-subtle); }
.grid.is-list .card__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "title foot" "meta foot"; align-items: start; column-gap: var(--dp-spacing-gap-md); padding: 20px; }
.grid.is-list .card__title { grid-area: title; }
.grid.is-list .card__meta { grid-area: meta; align-self: end; }
.grid.is-list .card__name { min-height: 0; }
.grid.is-list .card__foot { grid-area: foot; margin-top: 0; }
@media (max-width: 760px) {
  .grid.is-list .card__media { flex-basis: 128px; }
  .grid.is-list .card__body { grid-template-columns: 1fr; grid-template-areas: "title" "meta" "foot"; padding: 14px; row-gap: 10px; }
}

/* Tarjeta de registro dentro de la grilla */
.promo-card { flex: 1; display: grid; align-content: space-between; gap: 18px; padding: 24px; border-radius: var(--dp-radius-card); background: var(--dp-color-surface-dark); color: var(--dp-color-text-inverse); position: relative; overflow: hidden; }
.promo-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(0 196 179 / .45), transparent 70%); }
.promo-card .eyebrow { font-size: var(--dp-font-size-caption-md); letter-spacing: .1em; text-transform: uppercase; color: var(--dp-color-teal-300); font-weight: var(--dp-font-weight-bold); }
.promo-card h3 { font-size: var(--dp-font-size-heading-md); line-height: var(--dp-line-height-heading-md); font-weight: var(--dp-font-weight-bold); letter-spacing: -0.01em; }
.promo-card ul { display: grid; gap: 8px; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); color: var(--dp-color-blue-200); }
.promo-card li { display: flex; gap: 8px; align-items: center; }
.promo-card li .ph { color: var(--dp-color-teal-300); font-size: 18px; }
.promo-card .btn { position: relative; z-index: 1; background: var(--dp-color-surface-raised); color: var(--dp-color-text-btn-secondary); }
.promo-card .btn:hover { background: var(--dp-color-surface-subtle); }
.grid.is-list .grid__item--promo { display: none; }

/* Sin resultados */
.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 64px 24px; text-align: center; background: var(--dp-color-surface-raised); border-radius: var(--dp-radius-card); border: 1px dashed var(--dp-color-border-default); }
.empty .ph { font-size: 44px; color: var(--dp-color-icon-default); }
.empty p { color: var(--dp-color-text-secondary); max-width: 46ch; }

/* Cargar más */
.load-more { display: grid; justify-items: center; gap: 12px; margin-top: var(--dp-spacing-region-md); }
.load-more:empty { display: none; }
.load-more p { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-body-sm); }
.progress { width: 220px; height: 4px; border-radius: 999px; background: var(--dp-color-border-subtle); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--dp-color-action-primary-default); border-radius: inherit; transition: width .3s var(--plp-ease); }

/* ---------- Bloques inferiores (Figma: registro, beneficios, newsletter, footer) ---------- */
.pro-banner { margin-bottom: var(--dp-spacing-region-md); }
.pro-banner__in { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-spacing-gap-lg); padding: var(--dp-spacing-inset-xl) var(--dp-spacing-region-gutter);
  background: var(--dp-color-surface-raised); border-radius: var(--dp-radius-card); box-shadow: var(--plp-shadow-tile); }
.pro-banner__in > div { display: grid; gap: 6px; max-width: 70ch; }
.pro-banner p { color: var(--dp-color-text-secondary); }
@media (max-width: 989px) { .pro-banner__in { flex-direction: column; align-items: stretch; padding: 24px 20px; } }

.bottom { display: grid; gap: 0; padding-block: 0; }
.tile { background: var(--dp-color-surface-raised); border: 1px solid var(--dp-color-border-subtle); border-radius: var(--dp-radius-card-inside); box-shadow: var(--plp-shadow-tile); }
.benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 30px 40px; }
.benefit { display: flex; align-items: center; gap: var(--dp-spacing-inset-md); }
.benefit > .ph { flex: 0 0 auto; font-size: 36px; color: var(--dp-color-icon-default); }
.benefit div { display: grid; gap: 2px; }
.newsletter { display: flex; align-items: center; gap: 64px; padding: 48px var(--dp-spacing-region-gutter); margin-top: -1px; }
.newsletter > div { flex: 1; display: grid; gap: 8px; }
.newsletter p { color: var(--dp-color-text-secondary); }
.newsletter__form { flex: 0 1 600px; display: flex; flex-wrap: wrap; gap: 12px; }
.field { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: var(--dp-color-surface-raised); border: 1px solid var(--dp-color-border-default); border-radius: var(--dp-radius-button); }
.field:focus-within { border-color: var(--dp-input-border-focus); }
.field.is-error { border-color: var(--dp-input-border-error); }
.field .ph { color: var(--dp-color-icon-default); font-size: 20px; }
.field input { border: 0; outline: 0; width: 100%; background: transparent; font-size: var(--dp-font-size-body-sm); }
.newsletter__form .btn { height: 48px; }
.field-msg { flex-basis: 100%; min-height: 0; font-size: var(--dp-font-size-caption-md); }
.field-msg.is-error { color: var(--dp-input-error-text); }
.field-msg.is-ok { color: var(--dp-color-feedback-success-text); }
@media (max-width: 989px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 20px; gap: 20px; }
  .newsletter { flex-direction: column; align-items: stretch; gap: 20px; padding: 28px 20px; }
  .newsletter__form { flex-basis: auto; }
}
@media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } }

.site-footer { padding-bottom: 0; }
.footer { margin-top: -1px; overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; padding: 60px 40px; }
.footer__cols > div { display: grid; align-content: start; gap: 12px; }
.footer__cols ul { display: grid; gap: 8px; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { text-decoration: underline; color: var(--dp-color-text-btn-secondary); }
.footer__brand a { text-decoration: underline !important; }
.footer__logo { width: 180px; height: 52px; object-fit: cover; }
/* text-link (#0082a4) es el fondo de la barra en Figma; el texto pasa a blanco para cumplir contraste. */
.footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 40px; background: var(--dp-color-text-link); color: var(--dp-color-text-inverse); }
.footer__social { display: flex; gap: 12px; }
.footer__social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--dp-color-text-inverse); font-size: 22px; text-decoration: none; }
.footer__social a:hover { background: rgb(255 255 255 / .14); }
.payments { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 12px var(--dp-spacing-region-md); padding: 20px var(--dp-spacing-region-gutter);
  background: var(--dp-color-surface-subtle); border-radius: var(--dp-radius-card-inside); color: var(--dp-color-text-secondary); }
.payments__list { display: flex; align-items: center; gap: 12px; }
.pay { width: 40px; height: 24px; object-fit: contain; display: block; }
.pay--aquipago { background: url("../assets/payments/aquipago-raw.png") center / 128% auto no-repeat; }
.payments__text { color: var(--dp-color-text-link); }
@media (max-width: 989px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px 20px; }
  .footer__bar { flex-direction: column-reverse; align-items: flex-start; padding: 20px; }
  .payments { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}
@media (max-width: 480px) { .footer__cols { grid-template-columns: 1fr; } }

/* ---------- Capas ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgb(4 56 77 / .42); backdrop-filter: blur(2px); animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer { position: fixed; z-index: 80; top: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--dp-color-surface-raised); box-shadow: var(--plp-shadow-float); }
.drawer--right { right: 0; animation: in-right .3s var(--plp-ease) both; }
.drawer--left { left: 0; width: min(390px, 100vw); animation: in-left .3s var(--plp-ease) both; }
@keyframes in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes in-left { from { transform: translateX(-100%); } to { transform: none; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(16px, env(safe-area-inset-top, 0px)) 16px 12px 20px; border-bottom: 1px solid var(--dp-color-border-subtle); }
.drawer__logo { width: 150px; height: 44px; object-fit: cover; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer__foot { padding: 16px 20px max(16px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dp-color-border-subtle); display: grid; gap: 12px; }
.drawer__foot:empty { display: none; }

.quote-empty { display: grid; justify-items: center; gap: 12px; padding: 64px 32px; text-align: center; color: var(--dp-color-text-secondary); }
.quote-empty .ph { font-size: 48px; color: var(--dp-color-icon-default); }
.quote-list { display: grid; }
.quote-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--dp-color-border-subtle); }
.quote-item img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--dp-color-surface-form); }
.quote-item__txt { display: grid; gap: 2px; min-width: 0; }
.quote-item__txt b { font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
.quote-item__txt span { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); }
.quote-item__side { display: grid; gap: 6px; justify-items: end; }
.quote-item .qty { width: 112px; grid-template-columns: 34px 1fr 34px; height: 34px; }
.quote-item__rm { background: none; border: 0; color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); display: inline-flex; gap: 4px; align-items: center; }
.quote-item__rm:hover { color: var(--dp-color-action-destructive-default); }
.totals { display: grid; gap: 6px; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
.totals div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.totals .is-total { padding-top: 8px; border-top: 1px solid var(--dp-color-border-subtle); font-size: var(--dp-font-size-body-md); font-weight: var(--dp-font-weight-bold); }
.min-order { display: grid; gap: 6px; font-size: var(--dp-font-size-caption-md); color: var(--dp-color-text-secondary); }
.drawer-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--dp-color-feedback-info-bg); color: var(--dp-color-feedback-info-text); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); }
.drawer-note .ph { font-size: 16px; flex: 0 0 auto; }

.mobile-menu__nav { padding: 8px 20px; }
.mobile-menu__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--dp-color-border-subtle); text-decoration: none;
  font-family: var(--dp-font-family-headings); font-weight: var(--dp-font-weight-bold); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.mobile-menu__nav .ph { color: var(--dp-color-icon-default); font-size: 16px; }
.mobile-menu__account { display: grid; gap: 16px; padding: 24px 20px; }
.mobile-menu__account p { display: flex; align-items: center; gap: 12px; }
.mobile-menu__account .ph { font-size: 28px; }
.mobile-menu__contact { display: grid; gap: 16px; padding: 24px 20px; background: var(--dp-color-surface-subtle); }
.mobile-menu__contact p { display: flex; align-items: center; gap: 12px; }

.modal { position: fixed; z-index: 80; left: 50%; top: 50%; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); translate: -50% -50%;
  display: flex; flex-direction: column; background: var(--dp-color-surface-raised); border-radius: var(--dp-radius-modal); box-shadow: var(--plp-shadow-float); animation: pop .25s var(--plp-ease) both; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 14px 24px; border-bottom: 1px solid var(--dp-color-border-subtle); }
.modal__body { overflow: auto; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--dp-color-border-subtle); }
.cmp thead th { position: sticky; top: 0; background: var(--dp-color-surface-raised); z-index: 1; min-width: 200px; }
.cmp tbody th { position: sticky; left: 0; background: var(--dp-color-surface-form); color: var(--dp-color-text-secondary); font-weight: var(--dp-font-weight-medium); width: 170px; min-width: 140px; }
.cmp__prod { display: grid; gap: 8px; }
.cmp__prod img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; background: var(--dp-color-surface-form); }
.cmp__prod b { font-size: var(--dp-font-size-body-sm); }
.cmp .is-diff { background: var(--dp-color-feedback-warning-bg); }

.compare-bar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: var(--dp-color-surface-raised); border-top: 1px solid var(--dp-color-border-subtle);
  box-shadow: 0 -12px 32px -16px rgb(0 0 0 / .3); animation: up .28s var(--plp-ease) both; padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.compare-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.compare-bar__items { display: flex; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.compare-bar__items::-webkit-scrollbar { display: none; }
.cmp-slot { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: 220px; padding: 6px 30px 6px 6px; border: 1px solid var(--dp-color-border-subtle); border-radius: 12px; background: var(--dp-color-surface-raised); }
.cmp-slot img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.cmp-slot span { font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp-slot button { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--dp-color-surface-form); display: grid; place-items: center; font-size: 12px; }
.cmp-slot--empty { justify-content: center; padding: 6px; border-style: dashed; color: var(--dp-color-text-disabled); font-size: var(--dp-font-size-caption-md); min-height: 58px; }
.compare-bar__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
@media (max-width: 760px) { .cmp-slot { width: 58px; padding: 6px; } .cmp-slot span, .cmp-slot--empty { display: none; } .compare-bar__actions .link-btn { display: none; } }
body.has-compare .demo { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.has-compare .site-footer { padding-bottom: 96px; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; background: var(--dp-color-surface-dark); color: var(--dp-color-text-inverse);
  font-size: var(--dp-font-size-body-sm); line-height: var(--dp-line-height-body-sm); box-shadow: var(--plp-shadow-float); animation: toast .3s var(--plp-ease) both; }
.toast .ph { font-size: 20px; color: var(--dp-color-teal-300); }
.toast button { margin-left: 6px; background: none; border: 0; color: var(--dp-color-teal-300); font-weight: var(--dp-font-weight-bold); text-decoration: underline; text-underline-offset: 3px; }
body.has-compare .toast { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
@keyframes toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Control del prototipo */
.demo { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; justify-items: end; transition: bottom .25s var(--plp-ease); }
.demo__toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--dp-color-border-default);
  background: var(--dp-color-surface-raised); box-shadow: var(--plp-shadow-tile); font-size: var(--dp-font-size-body-sm); font-weight: var(--dp-font-weight-medium); }
.demo__toggle .ph { color: var(--dp-color-action-primary-default); font-size: 18px; }
.demo__panel { order: -1; width: 300px; display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--dp-color-surface-raised); border: 1px solid var(--dp-color-border-subtle); box-shadow: var(--plp-shadow-float); animation: pop .2s var(--plp-ease) both; }
.demo__title { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); font-weight: var(--dp-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.demo__hint { color: var(--dp-color-text-secondary); font-size: var(--dp-font-size-caption-md); line-height: var(--dp-line-height-caption); }
.demo .link-btn { justify-self: start; font-size: var(--dp-font-size-caption-md); }