/*
 * Storefront público compartido — F1/F2.
 *
 * Capa progresiva cargada después de los estilos de cada página. Consolida
 * accesibilidad, navegación, estados y comportamiento responsive sin cambiar
 * los contratos JavaScript existentes del catálogo, producto o carrito.
 */

:root {
  --web-surface: #fff;
  --web-surface-subtle: color-mix(in srgb, var(--web-background-alt, #f8fafc) 82%, #fff);
  --web-border: color-mix(in srgb, var(--web-text, #111827) 13%, transparent);
  --web-border-strong: color-mix(in srgb, var(--web-text, #111827) 22%, transparent);
  --web-focus-ring: color-mix(in srgb, var(--web-primary, #0054a6) 34%, transparent);
  --web-radius-sm: 8px;
  --web-radius-md: 12px;
  --web-radius-lg: 18px;
  --web-radius-xl: 24px;
  --web-shadow-sm: 0 1px 2px rgb(15 23 42 / 5%), 0 5px 16px rgb(15 23 42 / 5%);
  --web-shadow-md: 0 16px 38px rgb(15 23 42 / 10%);
  --web-shadow-lg: 0 24px 60px rgb(15 23 42 / 16%);
  --web-touch-target: 44px;
  --web-title-hero-size: clamp(1.65rem, 3vw, 2.45rem);
  --web-title-section-size: clamp(1.3rem, 2.1vw, 1.85rem);
  --web-z-navbar: 1020;
  --web-z-offcanvas: 1045;
  --web-z-help: 1035;
  --web-z-toast: 1090;
  accent-color: var(--web-primary, #0054a6);
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body.web-page {
  min-inline-size: 0;
}

.web-page main,
.web-page main > *,
.web-page .container,
.web-page .row,
.web-page [class*="col-"] {
  min-inline-size: 0;
}

.web-page :where(h1, h2, h3) {
  text-wrap: balance;
}

.web-page :where(p, li) {
  text-wrap: pretty;
}

.web-page :where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

.web-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--web-focus-ring);
  outline-offset: 2px;
}

.web-page :where(.btn, .form-control, .form-select) {
  border-radius: var(--web-radius-sm);
}

.web-page :where(.btn:not(.btn-sm), .form-control:not(.form-control-sm), .form-select:not(.form-select-sm)) {
  min-block-size: var(--web-touch-target);
}

.web-page :where(button, .btn, a) {
  touch-action: manipulation;
}

/* Estados compartidos */
.web-state {
  inline-size: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
  padding: clamp(28px, 6vw, 56px) clamp(18px, 4vw, 36px);
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius-lg);
  background: var(--web-surface);
  color: var(--web-text, #111827);
  text-align: center;
  box-shadow: var(--web-shadow-sm);
}

.web-state__icon {
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  margin-block-end: 4px;
  border-radius: 18px;
  background: var(--web-primary-light, #e5efff);
  color: var(--web-primary-text, #003d7a);
  font-size: 1.35rem;
}

.web-state h3,
.web-state p {
  margin: 0;
}

.web-state h3 {
  color: var(--web-text, #111827);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.web-state p {
  max-inline-size: 40ch;
  color: var(--web-text-light, #667085);
  font-size: .9rem;
  line-height: 1.55;
}

.web-state .btn {
  min-block-size: var(--web-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 8px;
}

.web-state--error {
  border-color: color-mix(in srgb, var(--web-danger, #f04438) 22%, transparent);
  background: color-mix(in srgb, var(--web-danger, #f04438) 3%, #fff);
}

.web-state--error .web-state__icon {
  background: color-mix(in srgb, var(--web-danger, #f04438) 10%, #fff);
  color: color-mix(in srgb, var(--web-danger, #f04438) 72%, #111827);
}

.toast-container {
  z-index: var(--web-z-toast);
}

.web-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--web-radius-sm);
  background: color-mix(in srgb, var(--web-text, #111827) 8%, #fff);
}

.web-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 70%) 45%, transparent 70%);
  content: "";
  translate: -100% 0;
  animation: web-skeleton-shimmer 1.35s ease-in-out infinite;
}

@keyframes web-skeleton-shimmer {
  to {
    translate: 100% 0;
  }
}

/* Navegación principal */
.web-navbar {
  z-index: var(--web-z-navbar);
}

.storefront-mobile-menu-trigger {
  min-inline-size: var(--web-touch-target);
  min-block-size: var(--web-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding-inline: 12px;
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius-sm);
  background: var(--web-surface);
  color: var(--web-text, #111827);
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
}

.storefront-mobile-menu-trigger i {
  color: var(--web-primary-text, #003d7a);
  font-size: 1rem;
}

@media (width < 870px) {
  .web-navbar .navbar-content {
    gap: 8px;
  }

  .web-navbar .web-nav {
    display: none;
  }

  .web-navbar .navbar-right {
    min-inline-size: 0;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .web-navbar .btn-carrito,
  .web-navbar .btn-wishlist,
  .web-navbar .user-dropdown .dropdown-toggle,
  .web-navbar .account-dropdown .dropdown-toggle {
    min-inline-size: var(--web-touch-target);
    min-block-size: var(--web-touch-target);
  }
}

@media (870px <= width) {
  .web-navbar .web-nav a,
  .web-navbar .btn-carrito,
  .web-navbar .btn-wishlist,
  .web-navbar .user-dropdown .dropdown-toggle,
  .web-navbar .account-dropdown .dropdown-toggle {
    min-block-size: var(--web-touch-target);
  }
}

@media (870px <= width <= 1120px) {
  .web-navbar .web-nav > li > a,
  .web-navbar .btn-carrito,
  .web-navbar .btn-wishlist,
  .web-navbar .user-dropdown .dropdown-toggle,
  .web-navbar .account-dropdown .dropdown-toggle {
    inline-size: var(--web-touch-target);
    min-inline-size: var(--web-touch-target);
  }

  .web-navbar .btn-carrito {
    inline-size: 50px;
  }
}

@media (width <= 390px) {
  .storefront-mobile-menu-trigger span,
  .web-navbar .account-text,
  .web-navbar .user-name {
    display: none;
  }

  .storefront-mobile-menu-trigger {
    padding-inline: 0;
  }
}

/* Menú móvil */
.storefront-mobile-nav {
  --bs-offcanvas-width: min(90vw, 390px);
  --tblr-offcanvas-width: min(90vw, 390px);
  z-index: var(--web-z-offcanvas);
  border: 0;
  background: var(--web-surface);
  color: var(--web-text, #111827);
}

.storefront-mobile-nav .offcanvas-header {
  min-block-size: 84px;
  padding: max(16px, env(safe-area-inset-top)) 18px 16px;
  border-block-end: 1px solid var(--web-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--web-primary-light, #e5efff) 58%, #fff), #fff 66%);
}

.storefront-mobile-nav .btn-close {
  inline-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
  flex: 0 0 var(--web-touch-target);
  padding: 0;
  border-radius: var(--web-radius-sm);
  background-size: 12px;
}

.storefront-mobile-nav__identity {
  min-inline-size: 0;
  max-inline-size: calc(100% - var(--web-touch-target) - 12px);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.storefront-mobile-nav__logo {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 52px;
  object-fit: contain;
  object-position: left center;
}

.storefront-mobile-nav__identity-fallback {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.storefront-mobile-nav__identity-fallback[hidden] {
  display: none;
}

.storefront-mobile-nav__identity-fallback > div {
  min-inline-size: 0;
}

.storefront-mobile-nav__monogram {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 22%, transparent);
  border-radius: 14px;
  background: var(--web-surface);
  color: var(--web-primary-text, #003d7a);
  font-weight: 850;
}

.storefront-mobile-nav__eyebrow,
.storefront-mobile-nav__section-label {
  display: block;
  color: var(--web-text-light, #667085);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.storefront-mobile-nav .offcanvas-title {
  margin: 2px 0 0;
  color: var(--web-text, #111827);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storefront-mobile-nav .offcanvas-body {
  padding:
    18px
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.storefront-mobile-search {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-block-size: 52px;
  padding-inline-start: 14px;
  border: 1px solid var(--web-border-strong);
  border-radius: 15px;
  background: var(--web-surface-subtle);
}

.storefront-mobile-search > i {
  color: var(--web-text-light, #667085);
  text-align: center;
}

.storefront-mobile-search input {
  min-inline-size: 0;
  block-size: 50px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--web-text, #111827);
  font: inherit;
  font-size: .9rem;
}

.storefront-mobile-search button {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  margin-inline-end: 3px;
  border: 0;
  border-radius: 12px;
  background: var(--web-primary, #0054a6);
  color: var(--web-on-primary, #fff);
}

.storefront-mobile-nav__links {
  display: grid;
  gap: 4px;
  margin-block-start: 18px;
}

.storefront-mobile-nav__links a,
.storefront-mobile-nav__account a {
  min-block-size: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--web-text, #111827);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.storefront-mobile-nav__links a:hover,
.storefront-mobile-nav__links a.active,
.storefront-mobile-nav__account a:hover {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 15%, transparent);
  background: color-mix(in srgb, var(--web-primary-light, #e5efff) 48%, #fff);
  color: var(--web-primary-text, #003d7a);
}

.storefront-mobile-nav__icon,
.storefront-mobile-nav__account a > i {
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 11px;
  background: var(--web-surface-subtle);
  color: var(--web-primary-text, #003d7a);
}

.storefront-mobile-nav__count {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--web-primary, #0054a6);
  color: var(--web-on-primary, #fff);
  font-size: .7rem;
}

.storefront-mobile-nav__account {
  display: grid;
  gap: 4px;
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--web-border);
}

.storefront-mobile-nav__section-label {
  margin: 0 10px 4px;
}

.storefront-mobile-nav__account a > i {
  font-size: .9rem;
}

.storefront-mobile-nav__login {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 18%, transparent) !important;
}

/* Carrito rápido */
.quick-cart-offcanvas {
  --bs-offcanvas-width: min(100vw, 430px);
  --tblr-offcanvas-width: min(100vw, 430px);
}

.quick-cart-offcanvas .offcanvas-header {
  min-block-size: 72px;
}

.quick-cart-empty,
.quick-cart-error {
  min-block-size: 300px;
}

.quick-cart-empty .btn {
  min-block-size: var(--web-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 8px;
}

.quick-cart-error {
  inline-size: 100%;
  border: 0;
  box-shadow: none;
}

.quick-cart-footer {
  padding-block-end: max(12px, env(safe-area-inset-bottom));
}

.quick-cart-footer .btn {
  min-block-size: 46px;
}

/* Footer útil */
.web-footer {
  margin-block-start: clamp(44px, 7vw, 88px);
  padding-block: 0;
  border-block-start-color: var(--web-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--web-background-alt, #f8fafc) 82%, #fff), var(--web-background-alt, #f8fafc));
}

.web-footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(2, minmax(150px, .75fr));
  gap: clamp(22px, 4vw, 48px);
  padding-block: clamp(24px, 4vw, 40px);
}

.web-footer__grid:has(.web-footer__contact) {
  grid-template-columns:
    minmax(240px, 1.35fr)
    repeat(2, minmax(135px, .675fr))
    minmax(180px, .9fr);
}

.web-footer__brand,
.web-footer__column {
  min-inline-size: 0;
}

.web-footer__eyebrow {
  display: block;
  margin-block-end: 6px;
  color: var(--web-primary-text, #003d7a);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.web-footer__brand h2,
.web-footer__column h2 {
  margin: 0;
  color: var(--web-text, #111827);
}

.web-footer__brand h2 {
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.web-footer__brand p {
  max-inline-size: 42ch;
  margin: 6px 0 0;
  color: var(--web-text-light, #667085);
  font-size: .86rem;
  line-height: 1.35;
}

.web-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.web-footer__column h2 {
  margin-block-end: 4px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.web-footer__column > a,
.web-footer__address {
  inline-size: 100%;
  min-block-size: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-block: 1px;
  color: var(--web-text-light, #667085);
  font-size: .8rem;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (pointer: coarse) {
  .web-footer__column > a {
    min-block-size: 44px;
  }
}

.web-footer__column > a:hover {
  color: var(--web-primary-text, #003d7a);
}

.web-footer__contact i {
  inline-size: 18px;
  flex: 0 0 18px;
  color: var(--web-primary-text, #003d7a);
  text-align: center;
}

.web-footer__bar {
  min-block-size: 72px;
  padding-block:
    12px
    max(12px, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--web-border);
}

.web-footer__copyright {
  font-size: .75rem;
}

.web-footer__powered {
  border-radius: var(--web-radius-sm);
}

@media (width <= 960px) {
  .web-footer__grid,
  .web-footer__grid:has(.web-footer__contact) {
    grid-template-columns: minmax(230px, 1.25fr) repeat(2, minmax(150px, .75fr));
  }

  .web-footer__contact {
    grid-column: 2 / -1;
  }
}

@media (width <= 680px) {
  .web-footer__grid,
  .web-footer__grid:has(.web-footer__contact) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
    padding-block: 24px;
  }

  .web-footer__brand {
    grid-column: 1 / -1;
  }

  .web-footer__contact {
    grid-column: 1 / -1;
  }

  .web-footer__bar {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .web-footer__meta,
  .web-footer__actions {
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
  }

  .web-footer__copyright {
    order: initial;
    margin-block-start: 0;
  }
}

@media (width <= 380px) {
  .web-footer__grid,
  .web-footer__grid:has(.web-footer__contact) {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-footer__brand,
  .web-footer__contact {
    grid-column: auto;
  }
}

/* Widget de ayuda */
.web-help {
  position: fixed;
  z-index: var(--web-z-help);
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: end;
  gap: 12px;
  pointer-events: none;
}

.web-help__trigger,
.web-help__panel {
  pointer-events: auto;
}

/* En los pasos transaccionales ya existen acciones contextuales de ayuda.
   Evita que el disparador flotante tape cantidades, campos o el CTA principal. */
.web-page--carrito .web-help,
.web-page--checkout .web-help {
  display: none;
}

.web-help__trigger {
  min-inline-size: 112px;
  min-block-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-inline: 17px;
  border: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 25%, transparent);
  border-radius: 999px;
  background: var(--web-primary, #0054a6);
  color: var(--web-on-primary, #fff);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--web-primary, #0054a6) 27%, transparent);
  font: inherit;
  font-size: .83rem;
  font-weight: 800;
}

.web-help__trigger[aria-expanded="true"] {
  background: var(--web-primary-dark, #003d7a);
  color: var(--web-on-primary-dark, #fff);
}

.web-help__panel {
  inline-size: min(360px, calc(100vw - 32px));
  max-block-size: min(620px, calc(100dvh - 100px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius-lg);
  background: var(--web-surface);
  color: var(--web-text, #111827);
  box-shadow: var(--web-shadow-lg);
  transform-origin: bottom right;
  animation: web-help-enter 180ms ease-out both;
}

.web-help__panel[hidden] {
  display: none;
}

@keyframes web-help-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
}

.web-help__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.web-help__header > div {
  min-inline-size: 0;
}

.web-help__eyebrow {
  display: block;
  color: var(--web-primary-text, #003d7a);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.web-help__header h2 {
  margin: 3px 0 0;
  color: var(--web-text, #111827);
  font-size: 1.08rem;
  font-weight: 850;
}

.web-help__close {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  margin: -8px -8px 0 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--web-text-light, #667085);
}

.web-help__close:hover {
  border-color: var(--web-border);
  background: var(--web-surface-subtle);
  color: var(--web-text, #111827);
}

.web-help__copy {
  margin: 8px 0 14px;
  color: var(--web-text-light, #667085);
  font-size: .82rem;
  line-height: 1.5;
}

.web-help__copy small {
  display: block;
  margin-block-start: 4px;
  color: var(--web-text-muted, #667085);
  font-size: .72rem;
}

.web-help__reason {
  display: grid;
  gap: 5px;
  margin-block-end: 12px;
  color: var(--web-text-light, #667085);
  font-size: .7rem;
  font-weight: 750;
}

.web-help__reason select {
  min-block-size: 44px;
  inline-size: 100%;
  padding-inline: 11px 34px;
  border: 1px solid var(--web-border);
  border-radius: 11px;
  background: var(--web-surface);
  color: var(--web-text, #111827);
  font: inherit;
  font-size: .8rem;
}

.web-help__actions {
  display: grid;
  gap: 8px;
}

.web-help__action {
  min-block-size: 56px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--web-border);
  border-radius: 13px;
  background: var(--web-surface);
  color: var(--web-text, #111827);
  text-decoration: none;
}

.web-help__action:hover {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 30%, transparent);
  background: color-mix(in srgb, var(--web-primary-light, #e5efff) 35%, #fff);
  color: var(--web-primary-text, #003d7a);
}

.web-help__action > span:first-child {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--web-primary-light, #e5efff);
  color: var(--web-primary-text, #003d7a);
}

.web-help__action > span:nth-child(2) {
  min-inline-size: 0;
  display: grid;
}

.web-help__action strong,
.web-help__action small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-help__action strong {
  font-size: .82rem;
  font-weight: 800;
}

.web-help__action small {
  color: var(--web-text-light, #667085);
  font-size: .7rem;
}

.web-help__action > i {
  color: var(--web-text-light, #667085);
  font-size: .75rem;
}

@media (width <= 540px) {
  .web-help {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .web-help__trigger {
    min-inline-size: 48px;
    inline-size: 48px;
    padding: 0;
  }

  .web-help__trigger span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .web-help__panel {
    inline-size: calc(100vw - 24px);
  }
}

/* Catálogo: capa responsive por ancho real del componente */
.catalog-results-zone {
  background-color: var(--web-background, #fff);
  background-image: linear-gradient(
    180deg,
    var(--web-background, #fff) 0%,
    color-mix(
      in srgb,
      var(--web-primary, #0054a6) 5%,
      var(--web-background, #fff)
    ) 48%,
    var(--web-background, #fff) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% clamp(160px, 18vw, 220px);
}

.productos-container {
  container: web-catalog / inline-size;
}

#productosGrid > [class*="col-"] {
  flex: 0 0 auto;
  inline-size: 50%;
}

@container web-catalog (width >= 700px) {
  #productosGrid > [class*="col-"] {
    inline-size: 33.3333%;
  }
}

@container web-catalog (width >= 980px) {
  #productosGrid > [class*="col-"] {
    inline-size: 25%;
  }
}

@container web-catalog (width >= 1420px) {
  #productosGrid > [class*="col-"] {
    inline-size: 20%;
  }
}

.search-bar .container {
  min-inline-size: 0;
}

.search-bar-social a {
  inline-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.search-input-group {
  min-block-size: 44px;
}

.search-input-wrapper input {
  min-block-size: 44px;
  font-size: 1rem;
}

#btnClearSearch {
  inline-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
  padding: 0;
}

.btn-filters {
  min-inline-size: var(--web-touch-target);
  min-block-size: 44px;
  height: auto;
  transition: color 180ms ease, background-color 180ms ease;
}

@media (width <= 767.98px), (pointer: coarse) {
  .search-input-group,
  .search-input-wrapper input {
    min-block-size: 52px;
  }

  .btn-filters {
    min-block-size: 48px;
  }
}

.category-nav :where(a, button),
.categorias-offcanvas :where(a, button) {
  min-block-size: var(--web-touch-target);
}

.category-nav-arrow {
  min-inline-size: var(--web-touch-target);
}

.catalog-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-block-end: 14px;
  padding: 14px 0;
  border-block-end: 1px solid var(--web-border);
}

.catalog-results-summary {
  min-inline-size: 0;
}

#resultTitle {
  margin: 0;
  color: var(--web-text, #111827);
  font-size: clamp(1rem, 2cqi, 1.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

#resultCount {
  display: block;
  margin-block-start: 3px;
  line-height: 1.35;
}

.catalog-sort-form {
  flex: 0 0 auto;
  min-inline-size: 0;
  margin-inline-start: auto;
}

.catalog-sort-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.catalog-sort-caption {
  color: var(--web-text-light, #667085);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.catalog-sort-trigger {
  min-inline-size: 164px;
  min-block-size: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px 0 16px;
  border: 1px solid color-mix(
    in srgb,
    var(--web-text, #111827) 15%,
    transparent
  );
  border-radius: 999px;
  background: var(--web-surface, #fff);
  color: var(--web-text, #111827);
  font: inherit;
  font-size: .82rem;
  font-weight: 680;
  line-height: 1;
  text-align: start;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.catalog-sort-trigger:hover,
.catalog-sort-trigger[aria-expanded="true"] {
  border-color: color-mix(
    in srgb,
    var(--web-primary, #0054a6) 42%,
    var(--web-border)
  );
  color: var(--web-primary-text, #003d7a);
}

.catalog-sort-trigger:focus-visible {
  border-color: var(--web-primary, #0054a6);
  outline: 0;
  box-shadow: 0 0 0 3px var(--web-focus-ring);
}

.catalog-sort-trigger > i {
  flex: 0 0 auto;
  color: var(--web-text-light, #667085);
  font-size: .62rem;
  transition: transform 160ms ease;
}

.catalog-sort-trigger [data-catalog-sort-label] {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-sort-trigger[aria-expanded="true"] > i {
  transform: rotate(180deg);
}

.catalog-sort-menu {
  min-inline-size: 218px;
  margin-block-start: 7px !important;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--web-border);
  border-radius: 12px;
  background: var(--web-surface, #fff);
  color: var(--web-text, #111827);
  box-shadow: 0 18px 45px -20px rgb(15 23 42 / 32%);
}

.catalog-sort-option {
  min-block-size: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--web-text, #111827);
  font-size: .8rem;
  line-height: 1.2;
  text-align: start;
}

.catalog-sort-option > i {
  color: var(--web-primary-text, #003d7a);
  font-size: .65rem;
  opacity: 0;
}

.catalog-sort-option:hover,
.catalog-sort-option:focus-visible {
  background: color-mix(
    in srgb,
    var(--web-primary, #0054a6) 5%,
    var(--web-surface, #fff)
  );
  color: var(--web-text, #111827);
}

.catalog-sort-option.is-selected {
  background: color-mix(
    in srgb,
    var(--web-primary, #0054a6) 8%,
    var(--web-surface, #fff)
  );
  color: var(--web-primary-text, #003d7a);
  font-weight: 720;
}

.catalog-sort-option.is-selected > i {
  opacity: 1;
}

@media (width <= 575px) {
  .catalog-results-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .catalog-sort-form {
    inline-size: 100%;
    flex-basis: auto;
    margin-inline-start: 0;
  }

  .catalog-sort-dropdown {
    justify-content: space-between;
  }

  .catalog-sort-trigger {
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .catalog-sort-menu {
    inline-size: min(100%, 240px);
  }
}

#productosGrid[aria-busy="true"]:not(:has(.web-product-skeleton)) {
  opacity: .72;
}

.web-product-skeleton {
  height: 100%;
  padding: 10px;
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius-md);
  background: var(--web-surface);
}

.web-product-skeleton__image {
  aspect-ratio: 1;
}

.web-product-skeleton__line {
  block-size: 12px;
  margin-block-start: 12px;
}

.web-product-skeleton__line--short {
  inline-size: 58%;
}

.web-product-skeleton__actions {
  block-size: 44px;
  margin-block-start: 18px;
}

.product-card {
  container: web-product-card / inline-size;
  border-color: var(--web-border);
  border-radius: var(--web-radius-md);
  box-shadow: var(--web-shadow-sm);
}

.product-card-seo-link {
  border-radius: inherit;
}

.product-card-link-label {
  min-block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 10px 0;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--web-border);
  color: var(--web-primary-text, #003d7a);
  font-size: .75rem;
  font-weight: 600;
}

.product-card-link-label i {
  font-size: .7rem;
}

.btn-product-action,
.btn-favorite,
.product-card .btn-product-action,
.product-card .btn-favorite {
  inline-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
  min-inline-size: var(--web-touch-target);
  min-block-size: var(--web-touch-target);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.product-actions {
  gap: 6px;
}

.product-card :where(a, button):focus-visible {
  position: relative;
  z-index: 3;
}

/* La configuración comercial de la tarjeta también gobierna los selectores
   del modal y de la ficha completa. Las miniaturas conservan su tratamiento. */
:is(.modal-variants, .producto-variantes).variant-badge-model-suave
  :is(.modal-variant-badge, .variante-badge):not(.variant-image-badge, .unavailable, .selected) {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 34%, #d1d5db);
  border-radius: 999px;
  background: color-mix(in srgb, var(--web-primary, #0054a6) 10%, #fff);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
}

:is(.modal-variants, .producto-variantes).variant-badge-model-contorno
  :is(.modal-variant-badge, .variante-badge):not(.variant-image-badge, .unavailable, .selected) {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 62%, #d1d5db);
  border-radius: 6px;
  background: transparent;
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  box-shadow: none;
}

:is(.modal-variants, .producto-variantes).variant-badge-model-solido
  :is(.modal-variant-badge, .variante-badge):not(.variant-image-badge, .unavailable) {
  min-block-size: 32px;
  padding-block: 0;
  border-color: var(--web-primary, #0054a6);
  border-radius: 5px;
  background: var(--web-primary, #0054a6);
  color: var(--web-on-primary, #fff);
  line-height: 1;
}

:is(.modal-variants, .producto-variantes).variant-badge-model-solido
  :is(.modal-variant-badge, .variante-badge):not(.variant-image-badge)
  :is(.variant-name, .variante-nombre) {
  padding-block: 4px;
  padding-inline: 9px;
  font-size: .7rem;
  line-height: 1.1;
}

:is(.modal-variants, .producto-variantes).variant-badge-model-solido
  :is(.modal-variant-badge, .variante-badge):not(.variant-image-badge)
  :is(.variant-stock, .variante-stock) {
  padding-block: 4px;
  padding-inline: 7px;
  font-size: .65rem;
  line-height: 1.1;
}

:is(.modal-variants, .producto-variantes):is(
  .variant-badge-model-suave,
  .variant-badge-model-contorno,
  .variant-badge-model-solido
) :is(.modal-variant-badge, .variante-badge):not(.variant-image-badge, .unavailable)
  :is(.variant-name, .variante-nombre) {
  color: inherit;
}

:is(.modal-variants, .producto-variantes).variant-badge-model-solido
  :is(.modal-variant-badge, .variante-badge).selected:not(.variant-image-badge) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--web-primary, #0054a6) 24%, transparent);
}

:is(.modal-variant-badge, .variante-badge).variant-color-badge:not(.variant-image-badge) {
  inline-size: auto;
}

:is(.modal-variant-badge, .variante-badge)
  :is(.variant-color-swatch, .variante-color-swatch) {
  inline-size: 14px;
  block-size: 14px;
  flex: 0 0 14px;
  margin-inline-start: 8px;
  border: 1px solid color-mix(in srgb, currentColor 24%, #fff);
  border-radius: 50%;
  background: var(--variant-color, #e5e7eb);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

:is(.modal-variants, .producto-variantes)[data-sold-out-variants="ocultas"]
  > :is(.modal-variant-badge, .variante-badge).unavailable {
  display: none;
}

.modal-price-offer {
  text-align: center;
}

.modal-price-offer .modal-price-original {
  display: inline-block;
  margin-block-end: 2px;
  color: var(--web-secondary, #667085);
  font-size: .82rem;
  line-height: 1.2;
  text-decoration: line-through;
}

.modal-price-offer .modal-discount-badge {
  display: inline-flex;
  margin-block: -5px 9px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--web-accent, #10b981);
  color: var(--web-on-accent, #fff);
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.2;
}

.modal-price-offer :is(.modal-price-original, .modal-discount-badge)[hidden] {
  display: none;
}

@media (width >= 768px) {
  .modal-price-offer {
    text-align: left;
  }
}

.pagination-arrow,
.page-pill {
  min-inline-size: var(--web-touch-target);
  inline-size: auto;
  min-block-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
}

.page-pill-gap {
  min-inline-size: 20px;
  block-size: var(--web-touch-target);
  display: grid;
  place-items: center;
  color: var(--web-text-light, #667085);
  font-weight: 750;
}

#paginationPills {
  max-inline-size: min(70vw, 620px);
  overflow-x: auto;
  padding: 3px;
  scrollbar-width: thin;
}

#filtrosOffcanvas {
  inline-size: min(92vw, 420px) !important;
}

#filtrosOffcanvas .offcanvas-header,
#filtrosOffcanvas .offcanvas-body {
  padding-inline: clamp(16px, 4vw, 24px);
}

#filtrosOffcanvas .btn-close,
.categorias-offcanvas .btn-close {
  inline-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
  flex: 0 0 var(--web-touch-target);
  padding: 0;
  background-size: 12px;
}

#filtrosOffcanvas .btn-group .btn,
#catalogo-filter-apply,
#catalogo-filter-reset {
  min-block-size: var(--web-touch-target);
}

#filtrosOffcanvas .form-switch {
  min-block-size: var(--web-touch-target);
  display: flex;
  align-items: center;
}

.empty-state {
  inline-size: min(100%, 560px);
  margin: clamp(24px, 5vw, 56px) auto;
  padding: clamp(32px, 6vw, 58px) 20px;
  border: 1px dashed var(--web-border-strong);
  border-radius: var(--web-radius-lg);
  background: var(--web-surface-subtle);
}

.empty-state i {
  inline-size: 58px;
  block-size: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--web-primary-light, #e5efff);
  color: var(--web-primary-text, #003d7a);
  font-size: 1.35rem;
  opacity: 1;
}

.empty-state h3,
.empty-state p {
  margin-block: 0;
}

.empty-state p {
  margin-block-start: 6px;
}

#modalAgregar :where(.btn-close, .carousel-control-prev, .carousel-control-next, .modal-thumbnail, .modal-variant-badge),
.modal-lightbox :where(button) {
  min-inline-size: var(--web-touch-target);
  min-block-size: var(--web-touch-target);
}

#modalAgregar .modal-variants.variant-badge-model-solido
  .modal-variant-badge:not(.variant-image-badge) {
  min-inline-size: 0;
  min-block-size: 32px;
}

.modal-quantity button,
.btn-modal-favorite,
.btn-modal-whatsapp {
  inline-size: var(--web-touch-target);
  block-size: var(--web-touch-target);
}

.modal-quantity input {
  min-block-size: var(--web-touch-target);
}

/* Autosuggest compartido: catálogo, Home y búsqueda móvil. */
.storefront-suggest-host {
  position: relative;
  overflow: visible;
}

.storefront-suggest-list {
  position: absolute;
  z-index: calc(var(--web-z-offcanvas) + 8);
  inset-block-start: calc(100% + 8px);
  inset-inline: 0;
  max-block-size: min(420px, 60dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--web-border-strong);
  border-radius: var(--web-radius-md);
  background: var(--web-surface);
  box-shadow: var(--web-shadow-lg);
}

.storefront-suggest-list[hidden] {
  display: none;
}

.storefront-suggest-option,
.storefront-suggest-all {
  min-block-size: var(--web-touch-target);
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  padding: 7px 9px;
  border-radius: 9px;
  color: var(--web-text, #111827);
  text-decoration: none;
}

.storefront-suggest-option:hover,
.storefront-suggest-option[aria-selected="true"],
.storefront-suggest-all:hover,
.storefront-suggest-all[aria-selected="true"] {
  color: var(--web-text, #111827);
  background: color-mix(in srgb, var(--web-primary, #0054a6) 9%, #fff);
}

.storefront-suggest-option__image,
.storefront-suggest-option__icon {
  inline-size: 48px;
  block-size: 48px;
  flex: 0 0 48px;
  border-radius: 9px;
}

.storefront-suggest-option__image {
  object-fit: cover;
  background: var(--web-surface-subtle);
}

.storefront-suggest-option__icon {
  display: grid;
  place-items: center;
  color: var(--web-primary, #0054a6);
  background: color-mix(in srgb, var(--web-primary, #0054a6) 11%, #fff);
}

.storefront-suggest-option__icon.is-categoria {
  color: #8a5a00;
  background: #fff5d6;
}

.storefront-suggest-option__copy {
  min-inline-size: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.storefront-suggest-option__copy strong,
.storefront-suggest-option__copy small {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storefront-suggest-option__copy strong {
  font-size: .88rem;
}

.storefront-suggest-option__copy small {
  margin-block-start: 3px;
  color: var(--web-secondary, #667085);
  font-size: .74rem;
}

.storefront-suggest-option__arrow {
  flex: 0 0 auto;
  color: var(--web-secondary, #667085);
  font-size: .78rem;
}

.storefront-suggest-all {
  justify-content: space-between;
  margin-block-start: 4px;
  border-block-start: 1px solid var(--web-border);
  border-radius: 0 0 9px 9px;
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  font-size: .82rem;
  font-weight: 700;
}

.storefront-mobile-search .storefront-suggest-list {
  inset-block-start: calc(100% + 6px);
}

@container web-product-card (width < 220px) {
  .product-card-link-label {
    margin-inline: 8px;
    font-size: .7rem;
  }

  .product-actions {
    gap: 4px;
  }
}

@media (width <= 575px) {
  .productos-container {
    padding-inline-start: max(10px, env(safe-area-inset-left));
    padding-inline-end: max(10px, env(safe-area-inset-right));
  }

  .productos-container #productosGrid {
    --bs-gutter-x: .65rem;
    --tblr-gutter-x: .65rem;
  }

  .search-bar-social {
    display: none;
  }

  .search-input-wrapper input {
    padding-inline-end: 54px;
  }

  #btnClearSearch {
    right: 46px;
  }

  .btn-filters {
    inline-size: 46px;
    padding-inline: 0;
    justify-content: center;
  }
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--web-shadow-md);
  }
}

.product-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset-inline: 18%;
  inset-block-end: 0;
  block-size: 3px;
  pointer-events: none;
  border-radius: 999px 999px 0 0;
  background: var(--web-primary, #0054a6);
  opacity: 0;
  transform: scaleX(.6);
  transform-origin: center;
  transition: opacity .2s ease, transform .2s ease;
}

.product-card-resaltado-linea:is(:hover, :focus-within)::after {
  opacity: 1;
  transform: scaleX(1);
}

.product-card-resaltado-difuminado::after {
  opacity: 0;
}

/*
 * Comportamiento configurable de las tarjetas.
 * Estas reglas viven después de los estilos base para que las opciones del
 * editor no queden anuladas por la cascada general del storefront.
 */
.product-card.product-card-forma-cuadrado,
.product-card.product-card-forma-cuadrado::before,
.product-card.product-card-forma-cuadrado .product-image-container {
  border-radius: 0;
}

.product-card.product-card-resaltado-difuminado:is(:hover, :focus-within) {
  border-color: transparent;
  box-shadow:
    0 16px 30px rgb(15 23 42 / 13%),
    0 0 26px -10px color-mix(in srgb, var(--web-primary, #0054a6) 34%, transparent),
    0 0 58px -18px color-mix(in srgb, var(--web-accent, #10b981) 34%, transparent);
}

.product-card.product-card-resaltado-difuminado:is(:hover, :focus-within)::before,
.product-card.product-card-resaltado-difuminado:is(:hover, :focus-within)::after {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .product-card.product-card-animacion-sin-zoom:hover {
    transform: none;
  }

  .product-card.product-card-animacion-sin-zoom:hover .product-image {
    transform: none;
  }

  .product-card.product-card-animacion-sin-zoom.product-card-resaltado-linea:hover {
    box-shadow: var(--web-shadow-sm);
  }
}

@container web-product-card (inline-size < 230px) {
  .product-actions:has(.product-action-left, .product-action-right) {
    display: grid;
    gap: 0;
    align-items: center;
    padding-inline: 4px;
  }

  .product-actions:has(.product-action-left):has(.product-action-right) {
    grid-template-columns:
      var(--web-touch-target)
      minmax(0, 1fr)
      var(--web-touch-target);
  }

  .product-actions:has(.product-action-left):not(:has(.product-action-right)) {
    grid-template-columns: var(--web-touch-target) minmax(0, 1fr);
  }

  .product-actions:has(.product-action-right):not(:has(.product-action-left)) {
    grid-template-columns: minmax(0, 1fr) var(--web-touch-target);
  }

  .product-actions .product-action-left,
  .product-actions .product-action-right {
    position: static;
  }

  .product-actions .product-action-left {
    grid-column: 1;
  }

  .product-actions .product-price-container {
    min-inline-size: 0;
  }

  .product-actions:has(.product-action-left):has(.product-action-right)
    .product-price-container {
    grid-column: 2;
  }

  .product-actions:has(.product-action-left):has(.product-action-right)
    .product-action-right,
  .product-actions:has(.product-action-right):not(:has(.product-action-left))
    .product-action-right {
    grid-column: -2;
  }

  .product-actions:has(.product-action-left):has(.product-action-right)
    .product-price-current {
    font-size: clamp(0.8125rem, 8cqi, 0.9375rem);
    letter-spacing: -0.04em;
    white-space: nowrap;
  }

  .product-actions:has(.product-action-left):has(.product-action-right)
    .product-price-original {
    font-size: 0.625rem;
    white-space: nowrap;
  }
}

/* Filtros avanzados del catálogo */
#filtrosOffcanvas.catalog-filter-drawer {
  --catalog-filter-surface: color-mix(in srgb, var(--web-background, #fff) 96%, #fff);
  --catalog-filter-subtle: color-mix(in srgb, var(--web-primary, #0054a6) 4%, #fff);
  --catalog-filter-accent: color-mix(in srgb, var(--web-primary, #0054a6) 11%, #fff);
  --catalog-filter-border: color-mix(in srgb, var(--web-text, #111827) 10%, transparent);
  inline-size: min(100vw, 430px) !important;
  max-inline-size: 100vw;
  border: 0;
  border-inline-start: 1px solid var(--catalog-filter-border);
  background: var(--catalog-filter-subtle);
  color: var(--web-text, #111827);
  box-shadow: -20px 0 60px rgb(15 23 42 / 14%);
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__header {
  position: relative;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-block-end: 1px solid var(--catalog-filter-border) !important;
  background: var(--catalog-filter-surface);
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__header::after {
  position: absolute;
  inset-inline: 14px;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--web-primary, #0054a6),
    color-mix(in srgb, var(--web-primary, #0054a6) 22%, transparent) 58%,
    transparent
  );
  content: "";
}

.catalog-filter-drawer__identity {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.catalog-filter-drawer__mark {
  inline-size: 34px;
  block-size: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 16%, transparent);
  border-radius: 10px;
  background: var(--catalog-filter-accent);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  font-size: .78rem;
}

.catalog-filter-drawer__heading {
  min-inline-size: 0;
}

.catalog-filter-drawer__eyebrow {
  display: block;
  margin-block-end: 1px;
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__heading .offcanvas-title {
  margin: 0;
  color: var(--web-text, #111827);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.catalog-filter-drawer__heading p {
  display: none;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__close {
  inline-size: 34px;
  block-size: 34px;
  flex: 0 0 34px;
  margin: 0;
  border: 1px solid var(--catalog-filter-border);
  border-radius: 50%;
  background-color: var(--catalog-filter-subtle);
  opacity: 1;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    rotate 180ms ease;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__close:hover {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 25%, transparent);
  background-color: var(--catalog-filter-accent);
  rotate: 4deg;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__body {
  padding: 9px;
  background: var(--catalog-filter-subtle);
  scrollbar-color: color-mix(in srgb, var(--web-text, #111827) 24%, transparent) transparent;
  scrollbar-width: thin;
}

.catalog-filter-drawer__stack {
  display: grid;
  gap: 8px;
}

.catalog-filter-panel {
  padding: 11px;
  border: 1px solid var(--catalog-filter-border);
  border-radius: 14px;
  background: var(--catalog-filter-surface);
  box-shadow: 0 1px 2px rgb(15 23 42 / 3%);
}

.catalog-filter-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--catalog-filter-border);
}

.catalog-filter-panel__icon {
  inline-size: 28px;
  block-size: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--catalog-filter-accent);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  font-size: .68rem;
}

.catalog-filter-panel__header h3,
.catalog-filter-panel__header p {
  margin: 0;
}

.catalog-filter-panel__header h3 {
  color: var(--web-text, #111827);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.012em;
}

.catalog-filter-panel__header p {
  display: none;
}

.catalog-filter-panel__fields {
  display: grid;
  gap: 9px;
  padding-block-start: 9px;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field .form-label,
#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field > .form-label {
  display: block;
  margin: 0 0 4px;
  color: var(--web-text, #111827);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.3;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field__hint,
#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field__switch-row small {
  display: block;
  margin-block-start: 4px;
  color: var(--web-text-light, #667085);
  font-size: .63rem;
  line-height: 1.3;
}

#filtrosOffcanvas.catalog-filter-drawer .form-control,
#filtrosOffcanvas.catalog-filter-drawer .form-select,
#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-control {
  min-block-size: 38px;
  border: 1px solid var(--catalog-filter-border) !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  color: var(--web-text, #111827);
  font-size: .75rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 3%);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

#filtrosOffcanvas.catalog-filter-drawer .form-control,
#filtrosOffcanvas.catalog-filter-drawer .form-select {
  padding-inline: 11px;
}

#filtrosOffcanvas.catalog-filter-drawer .form-control:hover,
#filtrosOffcanvas.catalog-filter-drawer .form-select:hover,
#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-control:hover {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 30%, transparent) !important;
}

#filtrosOffcanvas.catalog-filter-drawer .form-control:focus,
#filtrosOffcanvas.catalog-filter-drawer .form-select:focus,
#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-wrapper.focus .ts-control {
  border-color: var(--web-primary, #0054a6) !important;
  box-shadow: 0 0 0 3px var(--web-focus-ring) !important;
}

#filtrosOffcanvas.catalog-filter-drawer .form-select:disabled {
  background-color: color-mix(in srgb, var(--web-text, #111827) 4%, #fff) !important;
  color: var(--web-text-light, #667085);
  cursor: wait;
  opacity: .76;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--attributes {
  padding-block-start: 9px;
  border-block-start: 1px dashed var(--catalog-filter-border);
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs {
  --bs-gutter-y: .45rem;
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-control {
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-control .item {
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: var(--catalog-filter-accent);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  font-size: .72rem;
  font-weight: 600;
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-dropdown {
  overflow: hidden;
  margin-block-start: 6px;
  border: 1px solid var(--catalog-filter-border);
  border-radius: 12px;
  box-shadow: var(--web-shadow-md);
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-dropdown .option {
  padding: 10px 12px;
  font-size: .78rem;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--stock legend {
  float: none;
  inline-size: auto;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--stock .btn-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--catalog-filter-border);
  border-radius: 11px;
  background: var(--catalog-filter-subtle);
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--stock .btn {
  min-inline-size: 0;
  min-block-size: 34px;
  display: grid;
  place-items: center;
  padding: 5px 4px;
  border: 0;
  border-radius: 8px !important;
  background: transparent;
  color: var(--web-text-light, #667085);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.15;
  box-shadow: none;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--stock .btn:hover {
  background: color-mix(in srgb, var(--web-primary, #0054a6) 7%, #fff);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--stock .btn-check:checked + .btn {
  background: var(--web-primary, #0054a6) !important;
  color: var(--web-on-primary, #fff) !important;
  box-shadow: 0 4px 11px color-mix(in srgb, var(--web-primary, #0054a6) 20%, transparent);
}

.catalog-filter-field__switch-row {
  min-block-size: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px 7px 11px;
  border: 1px solid var(--catalog-filter-border);
  border-radius: 11px;
  background: var(--catalog-filter-subtle);
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field__switch-row .form-label {
  margin: 0;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field__switch-row small {
  margin-block-start: 2px;
}

#filtrosOffcanvas.catalog-filter-drawer .form-switch {
  min-block-size: 0;
  flex: 0 0 auto;
  margin: 0;
  padding-inline-start: 0;
}

#filtrosOffcanvas.catalog-filter-drawer .form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  inline-size: 36px;
  block-size: 20px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--web-text, #111827) 52%, #fff);
  background-color: color-mix(in srgb, var(--web-text, #111827) 44%, #fff);
  background-image: var(--bs-form-switch-bg);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  cursor: pointer;
}

#filtrosOffcanvas.catalog-filter-drawer .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  border-color: var(--web-primary, #0054a6);
  background-color: var(--web-primary, #0054a6);
}

#filtrosOffcanvas.catalog-filter-drawer .form-switch .form-check-input:focus-visible {
  outline: 3px solid var(--web-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-price {
  margin-block-start: 7px;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-price .input-group {
  flex-wrap: nowrap;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-price .input-group-text {
  min-inline-size: 30px;
  justify-content: center;
  padding-inline: 6px;
  border: 1px solid var(--catalog-filter-border);
  border-inline-end: 0;
  border-radius: 10px 0 0 10px;
  background: var(--catalog-filter-accent);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
  font-size: .66rem;
  font-weight: 600;
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-price .form-control {
  min-inline-size: 0;
  padding-inline: 9px;
  border-radius: 0 10px 10px 0 !important;
}

.catalog-filter-drawer__footer {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr);
  gap: 7px;
  padding: 7px 9px max(7px, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--catalog-filter-border);
  background: color-mix(in srgb, var(--catalog-filter-surface) 94%, transparent);
  box-shadow: 0 -10px 28px rgb(15 23 42 / 5%);
}

#filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__footer .btn {
  min-inline-size: 0;
  min-block-size: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 600;
  box-shadow: none;
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-filter-reset {
  border: 1px solid var(--catalog-filter-border);
  background: var(--catalog-filter-surface);
  color: var(--web-text-light, #667085);
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-filter-reset:hover {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 26%, transparent);
  background: var(--catalog-filter-accent);
  color: var(--web-primary-text, var(--web-primary, #0054a6));
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-filter-apply {
  border: 1px solid var(--web-primary, #0054a6);
  background: var(--web-primary, #0054a6);
  color: var(--web-on-primary, #fff);
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-filter-apply:hover {
  border-color: var(--web-primary-dark, #003d7a);
  background: var(--web-primary-dark, #003d7a);
  color: var(--web-on-primary-dark, #fff);
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-filter-apply i {
  transition: translate 180ms ease;
}

#filtrosOffcanvas.catalog-filter-drawer #catalogo-filter-apply:hover i {
  translate: 3px 0;
}

#filtrosOffcanvas.catalog-filter-drawer.showing .catalog-filter-panel,
#filtrosOffcanvas.catalog-filter-drawer.show .catalog-filter-panel {
  animation: catalog-filter-panel-enter 320ms ease-out both;
}

#filtrosOffcanvas.catalog-filter-drawer.showing .catalog-filter-panel:nth-child(2),
#filtrosOffcanvas.catalog-filter-drawer.show .catalog-filter-panel:nth-child(2) {
  animation-delay: 45ms;
}

@keyframes catalog-filter-panel-enter {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (width <= 479px) {
  #filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__header {
    padding-inline:
      max(16px, env(safe-area-inset-left))
      max(16px, env(safe-area-inset-right));
  }

  #filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__body {
    padding-inline:
      max(12px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-right));
  }

  .catalog-filter-drawer__footer {
    padding-inline:
      max(12px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-right));
  }

  .catalog-filter-panel {
    padding: 14px;
    border-radius: 16px;
  }
}

@media (pointer: coarse) {
  #filtrosOffcanvas.catalog-filter-drawer .form-control,
  #filtrosOffcanvas.catalog-filter-drawer .form-select,
  #filtrosOffcanvas.catalog-filter-drawer #catalogo-attrs-inputs .ts-control,
  #filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__footer .btn {
    min-block-size: 44px;
  }

  #filtrosOffcanvas.catalog-filter-drawer .catalog-filter-field--stock .btn {
    min-block-size: 40px;
  }

  #filtrosOffcanvas.catalog-filter-drawer .catalog-filter-drawer__close {
    inline-size: 40px;
    block-size: 40px;
    flex-basis: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-page *,
  .web-page *::before,
  .web-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .product-card::after {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --web-border: currentColor;
    --web-border-strong: currentColor;
  }

  .web-page :where(.btn, button, input, select, textarea) {
    border-color: currentColor;
  }
}

/* Preguntas frecuentes previas al pie de página */
.web-faq {
  margin-block-start: clamp(42px, 7vw, 84px);
  border-block: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 10%, var(--web-border, #e5e7eb));
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--web-primary, #0054a6) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--web-primary, #0054a6) 3%, #fff), #fff);
}

.web-faq + .web-footer {
  margin-block-start: 0;
}

.web-faq__inner {
  inline-size: min(1120px, calc(100% - 32px));
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  margin-inline: auto;
  padding-block: clamp(42px, 6vw, 72px);
}

.web-faq__header {
  align-self: start;
}

.web-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--web-primary, #0054a6);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.web-faq__header h2 {
  margin: 10px 0 0;
  color: var(--web-text, #111827);
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.web-faq__header p {
  max-inline-size: 42ch;
  margin: 14px 0 0;
  color: var(--web-text-muted, #667085);
  font-size: .96rem;
  line-height: 1.65;
}

.web-faq__list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.web-faq__item {
  overflow: clip;
  align-self: start;
  border: 1px solid var(--web-border, #e5e7eb);
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 18px rgba(17, 24, 39, .045);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.web-faq__item[open] {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 34%, var(--web-border, #e5e7eb));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--web-primary, #0054a6) 9%, transparent);
}

.web-faq__item summary {
  min-block-size: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 16px;
  padding: 11px 12px 11px 18px;
  cursor: pointer;
  color: var(--web-text, #111827);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.web-faq__item summary::-webkit-details-marker {
  display: none;
}

.web-faq__item summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--web-primary, #0054a6) 24%, transparent);
  outline-offset: -3px;
}

.web-faq__toggle {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--web-primary, #0054a6);
  background: color-mix(in srgb, var(--web-primary, #0054a6) 9%, #fff);
  font-size: .8rem;
}

.web-faq__toggle i {
  transition: transform .18s ease;
}

.web-faq__item[open] .web-faq__toggle i {
  transform: rotate(45deg);
}

.web-faq__answer {
  padding: 0 18px 18px;
}

.web-faq__answer::before {
  content: "";
  display: block;
  margin-block-end: 14px;
  border-block-start: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 11%, var(--web-border, #e5e7eb));
}

.web-faq__answer p {
  margin: 0;
  color: var(--web-text-muted, #667085);
  font-size: .92rem;
  line-height: 1.68;
}

/* Variante 2: lista esencial, sin superficies elevadas */
.web-faq[data-faq-style="minimal"] {
  border-block: 0;
  background: var(--web-surface, #fff);
}

.web-faq[data-faq-style="minimal"] .web-faq__inner {
  max-inline-size: 920px;
  display: block;
}

.web-faq[data-faq-style="minimal"] .web-faq__header {
  max-inline-size: 650px;
  margin-inline: auto;
  text-align: center;
}

.web-faq[data-faq-style="minimal"] .web-faq__eyebrow {
  justify-content: center;
}

.web-faq[data-faq-style="minimal"] .web-faq__header h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.65rem);
}

.web-faq[data-faq-style="minimal"] .web-faq__header p {
  margin-inline: auto;
}

.web-faq[data-faq-style="minimal"] .web-faq__list {
  gap: 0;
  margin-block-start: clamp(28px, 5vw, 44px);
  border-block-start: 1px solid var(--web-border, #e5e7eb);
}

.web-faq[data-faq-style="minimal"] .web-faq__item,
.web-faq[data-faq-style="minimal"] .web-faq__item[open] {
  border: 0;
  border-block-end: 1px solid var(--web-border, #e5e7eb);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.web-faq[data-faq-style="minimal"] .web-faq__item summary {
  min-block-size: 68px;
  padding: 15px 2px;
  font-size: 1rem;
}

.web-faq[data-faq-style="minimal"] .web-faq__toggle {
  border: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 18%, var(--web-border, #e5e7eb));
  border-radius: 50%;
  background: transparent;
}

.web-faq[data-faq-style="minimal"] .web-faq__answer {
  padding: 0 58px 22px 2px;
}

.web-faq[data-faq-style="minimal"] .web-faq__answer::before {
  display: none;
}

/* Variante 3: tarjetas independientes en una retícula flexible */
.web-faq[data-faq-style="mosaico"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--web-primary, #0054a6) 8%, #fff), #fff 58%),
    var(--web-surface, #fff);
}

.web-faq[data-faq-style="mosaico"] .web-faq__inner {
  display: block;
}

.web-faq[data-faq-style="mosaico"] .web-faq__header {
  max-inline-size: 680px;
}

.web-faq[data-faq-style="mosaico"] .web-faq__header h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}

.web-faq[data-faq-style="mosaico"] .web-faq__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: clamp(28px, 4.5vw, 42px);
}

.web-faq[data-faq-style="mosaico"] .web-faq__item {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 14%, var(--web-border, #e5e7eb));
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .065);
}

.web-faq[data-faq-style="mosaico"] .web-faq__item[open] {
  border-color: color-mix(in srgb, var(--web-primary, #0054a6) 42%, var(--web-border, #e5e7eb));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--web-primary, #0054a6) 11%, transparent);
}

.web-faq[data-faq-style="mosaico"] .web-faq__item summary {
  min-block-size: 76px;
  padding: 15px 14px 15px 20px;
}

.web-faq[data-faq-style="mosaico"] .web-faq__toggle {
  border-radius: 50%;
}

.web-faq[data-faq-style="mosaico"] .web-faq__answer {
  padding: 0 20px 22px;
}

/* Variante 4: composición tipográfica con numeración visible */
.web-faq[data-faq-style="editorial"] {
  border-block: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 18%, #cfc7ba);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--web-primary, #0054a6) 4%, #fbf8f1), #fffdf8 62%);
}

.web-faq[data-faq-style="editorial"] .web-faq__inner {
  grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
  gap: clamp(34px, 7vw, 92px);
}

.web-faq[data-faq-style="editorial"] .web-faq__eyebrow {
  letter-spacing: .12em;
}

.web-faq[data-faq-style="editorial"] .web-faq__header h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(2.35rem, 4.6vw, 4rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .96;
}

.web-faq[data-faq-style="editorial"] .web-faq__list {
  gap: 0;
  counter-reset: web-faq-item;
  border-block-end: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 20%, #cfc7ba);
}

.web-faq[data-faq-style="editorial"] .web-faq__item {
  counter-increment: web-faq-item;
}

.web-faq[data-faq-style="editorial"] .web-faq__item,
.web-faq[data-faq-style="editorial"] .web-faq__item[open] {
  border: 0;
  border-block-start: 1px solid color-mix(in srgb, var(--web-primary, #0054a6) 20%, #cfc7ba);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.web-faq[data-faq-style="editorial"] .web-faq__item summary {
  min-block-size: 72px;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  gap: 14px;
  padding: 14px 2px;
}

.web-faq[data-faq-style="editorial"] .web-faq__item summary::before {
  content: counter(web-faq-item, decimal-leading-zero);
  color: var(--web-primary, #0054a6);
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

.web-faq[data-faq-style="editorial"] .web-faq__toggle {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 0;
  background: transparent;
  font-size: .72rem;
}

.web-faq[data-faq-style="editorial"] .web-faq__answer {
  padding: 0 46px 24px 52px;
}

.web-faq[data-faq-style="editorial"] .web-faq__answer::before {
  display: none;
}

/* Variante 5: banda oscura con expansión clara de alto contraste */
.web-faq[data-faq-style="contraste"] {
  border-block: 0;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--web-primary, #0054a6) 42%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--web-primary-dark, #003d7a) 34%, #08111f), #08111f 72%);
}

.web-faq[data-faq-style="contraste"] .web-faq__inner {
  padding-block: clamp(48px, 7vw, 82px);
}

.web-faq[data-faq-style="contraste"] .web-faq__eyebrow,
.web-faq[data-faq-style="contraste"] .web-faq__header h2 {
  color: #fff;
}

.web-faq[data-faq-style="contraste"] .web-faq__header h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
}

.web-faq[data-faq-style="contraste"] .web-faq__header p {
  color: rgba(255, 255, 255, .76);
}

.web-faq[data-faq-style="contraste"] .web-faq__item {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.web-faq[data-faq-style="contraste"] .web-faq__item summary {
  color: #fff;
}

.web-faq[data-faq-style="contraste"] .web-faq__toggle {
  color: var(--web-primary-dark, #003d7a);
  background: #fff;
}

.web-faq[data-faq-style="contraste"] .web-faq__item[open] {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

.web-faq[data-faq-style="contraste"] .web-faq__item[open] summary {
  color: #111827;
}

.web-faq[data-faq-style="contraste"] .web-faq__item[open] .web-faq__toggle {
  color: #fff;
  background: var(--web-primary-dark, #003d7a);
}

.web-faq[data-faq-style="contraste"] .web-faq__item[open] .web-faq__answer::before {
  border-color: #e5e7eb;
}

.web-faq[data-faq-style="contraste"] .web-faq__item[open] .web-faq__answer p {
  color: #4b5563;
}

.web-faq[data-faq-style="contraste"] .web-faq__item summary:focus-visible {
  outline-color: rgba(255, 255, 255, .72);
}

.web-faq[data-faq-style="contraste"] .web-faq__item[open] summary:focus-visible {
  outline-color: color-mix(in srgb, var(--web-primary, #0054a6) 34%, transparent);
}

@media (width <= 760px) {
  .web-faq {
    margin-block-start: 48px;
  }

  .web-faq__inner {
    grid-template-columns: 1fr;
    gap: 25px;
    padding-block: 38px;
  }

  .web-faq__header p {
    margin-block-start: 10px;
  }

  .web-faq__item summary {
    min-block-size: 58px;
    padding-inline-start: 15px;
    font-size: .92rem;
  }

  .web-faq[data-faq-style="mosaico"] .web-faq__list {
    grid-template-columns: 1fr;
  }

  .web-faq[data-faq-style="minimal"] .web-faq__answer {
    padding-inline-end: 2px;
  }

  .web-faq[data-faq-style="editorial"] .web-faq__inner {
    grid-template-columns: 1fr;
  }

  .web-faq[data-faq-style="editorial"] .web-faq__header h2 {
    max-inline-size: 12ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-faq *,
  .web-faq *::before,
  .web-faq *::after {
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  .web-faq__item,
  .web-faq[data-faq-style="contraste"] .web-faq__item {
    border-color: currentColor;
  }
}