:root {
  --an-black: #0b0b0b;
  --an-white: #fff;
  --an-ink: #161616;
  --an-muted: #707070;
  --an-surface: #f5f4f1;
  --an-line: #dededb;
  --an-container: 1440px;
  --an-gutter: clamp(16px, 2.1vw, 32px);
  --an-section-space: clamp(58px, 7vw, 108px);
  --an-title-xl: clamp(34px, 5vw, 72px);
  --an-title-lg: clamp(25px, 3vw, 42px);
  --an-title-md: clamp(20px, 2vw, 28px);
  --an-text-sm: 12px;
  --an-ease: cubic-bezier(.22, 1, .36, 1);
  --an-fast: 220ms;
  --an-slow: 700ms;
}

html { scroll-behavior: smooth; }

body {
  color: var(--an-ink);
  background: var(--an-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El loader heredado sigue siendo inyectado por el CSS personalizado del tema.
   Lo convertimos en una transición de marca breve, sin bloquear la navegación. */
html.show-loader::before {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

body,
button,
input,
select,
textarea { font-family: inherit; }

::selection { color: #fff; background: #111; }

/* Foco visible para navegación por teclado.
   Más abajo hay reglas de formulario que hacen `outline: 0`; sin esto, quien
   navega con Tab (o con lector de pantalla) pierde de vista dónde está parado.
   Se usa :focus-visible, así que no aparece nada al hacer clic con el mouse. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.an-info-page__content input:focus-visible,
.an-info-page__content textarea:focus-visible,
.an-info-page__content select:focus-visible,
.js-footer .newsletter-input:focus-visible,
.js-footer input[type="email"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Header: más preciso y con transición tipo Represent */
.head-main {
  z-index: 1001;
  transition: background-color .35s var(--an-ease), box-shadow .35s var(--an-ease), transform .35s var(--an-ease) !important;
}

.head-main .container-fluid {
  padding-right: var(--an-gutter);
  padding-left: var(--an-gutter);
}

/* En páginas interiores el header ocupa menos pantalla; el Home conserva
   su composición amplia y transparente sobre el hero. */
@media (min-width: 1024px) {
  body:not(.template-home) .head-main {
    padding-top: 2px !important;
    padding-bottom: 0 !important;
  }

  body:not(.template-home) .head-main .logo,
  body:not(.template-home) .head-main .store-logo {
    margin-bottom: 0 !important;
  }

  body:not(.template-home) .head-main .logo-img,
  body:not(.template-home) .head-main img[alt*="Anhelo"] {
    width: auto !important;
    max-width: 220px !important;
    max-height: 112px !important;
    object-fit: contain !important;
  }

  body:not(.template-home) .head-main .nav-desktop {
    padding-bottom: 7px !important;
  }

  body:not(.template-home) .head-main .nav-desktop-list,
  body:not(.template-home) .head-main .nav-desktop-list ul {
    margin-bottom: 5px !important;
  }
}

.head-main .nav-list-link,
.head-main .region-switch,
.head-main .utility-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.head-main .nav-list-link {
  position: relative;
  padding-bottom: 5px;
}

.head-main .nav-list-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s var(--an-ease);
}

.head-main .nav-list-link:hover::after,
.head-main .nav-list-link.selected::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* El tema controla por sí mismo la transparencia y el estado al hacer scroll. */
.template-home .head-main.an-head-scrolled.head-transparent-on-section {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.region-switch--header {
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  transition: color var(--an-fast), background var(--an-fast) !important;
}

.region-switch--header:hover { color: #fff !important; background: #111 !important; }

/* Jerarquía común para títulos del Home y módulos agregados */
.template-home .section-title,
.template-home .an-product-social__title,
.template-home .anhelo-fam-title,
.template-home .an-reels-title,
.template-home #revie-tn-widget .topTest {
  margin: 0;
  color: var(--an-ink);
  font-family: inherit;
  font-size: var(--an-title-md) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  text-align: left;
  text-transform: uppercase;
}

.template-home .section-featured-home,
.template-home .section-testimonials-home,
.template-home .an-product-social,
.template-home .anhelo-home-reviews {
  scroll-margin-top: 110px;
}

/* Barra de filtros/orden pegada al scrollear.
   El tema la fija en top:0 asumiendo que no hay nada arriba, pero la barra de
   anuncios (28px, fixed) y el header sticky ocupan esa franja: quedaba 100%
   tapada. El valor lo calcula anhelo-ui-v6.js::initStickyOffsets() y lo deja
   en --an-sticky-offset. Va con !important porque el JS del tema escribe el
   top como estilo inline y si no, gana él. */
.js-category-controls {
  top: var(--an-sticky-offset, 0px) !important;
}

/* Título de categoría y de búsqueda.
   Estaba quedando en .h4 (18px) mientras los títulos de sección del home usan
   --an-title-md (hasta 28px) en mayúscula: la misma marca escribía
   "ÚLTIMA COLECCIÓN" grande y "OUTLET" chico. Acá se unifican.
   Se excluye la ficha de producto a propósito: ese h1 es el nombre del
   producto y tiene su propio tratamiento. */
.template-category .page-header h1,
.template-search .page-header h1 {
  margin: 0;
  font-size: var(--an-title-md);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.template-category .page-header .an-count,
.template-search .page-header .an-count {
  font-size: 11px;
}

/* Botones y enlaces: un solo sistema */
.btn,
.btn-primary,
.btn-default,
.icon-Testimoniales,
.anhelo-home-reviews .icon-Testimoniales {
  min-height: 42px;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  transition: color var(--an-fast), background-color var(--an-fast), border-color var(--an-fast), transform var(--an-fast) !important;
}

.btn-primary:hover,
.icon-Testimoniales:hover { transform: translateY(-1px); }

/* Producto: tarjetas más editoriales y consistentes */
.item-product .item-image {
  overflow: hidden;
  background: #f5f4f2;
}

.item-product .item-image img {
  transition: transform .75s var(--an-ease), opacity .4s var(--an-ease) !important;
}

@media (hover:hover) and (pointer:fine) {
  .item-product:hover .item-image-featured { transform: scale(1.018); }
}

.item-product .item-description { padding-top: 14px; }

.item-product .item-name {
  margin-bottom: 8px !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .015em;
  text-transform: uppercase;
}

/* El precio es el único protagonista de la tarjeta. Antes el precio real y el
   precio tachado compartían tamaño (12px) y competían entre sí; ahora el
   tachado acompaña. Esta es la fuente única del tratamiento: los tokens
   tipográficos generales no llegan acá porque este archivo gana en
   especificidad (.item-product .item-price). */
.item-product .item-price {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.item-product .price-compare {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

/* Ficha de producto: jerarquía del bloque de precio ----------------------
   El precio de venta y el precio tachado se estaban mostrando IGUALES:
   ambos 16px, peso 400 y el mismo negro; lo único que los diferenciaba era
   la línea del tachado. En una prenda de outlet, donde el descuento es el
   argumento de venta, el número que importa no se destacaba en absoluto. */
#single-product .js-price-container > .col {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

#single-product .js-price-display {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

#single-product .price-compare {
  font-size: 14px;
  font-weight: 400;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

/* Las cuotas vivían en una columna propia que las mandaba al extremo derecho
   de la fila —quedaban a ~780px del precio, como un dato suelto—. Bajan a su
   propia línea, debajo del precio y del precio con transferencia. */
#single-product .js-price-container > .col { order: 1; }
#single-product .js-price-container > .col-12 { order: 2; }

#single-product .js-price-container > .col-auto {
  order: 3;
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 8px;
}

#single-product .item-installments {
  font-size: 12px;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

/* "Precio sin impuestos" es un dato fiscal, no comercial: acompaña. */
#single-product .price-without-taxes-container {
  color: var(--an-muted);
}

/* Páginas informativas -------------------------------------------------- */
.an-info-page {
  min-height: 52vh;
  padding: clamp(56px, 7vw, 104px) var(--an-gutter) clamp(76px, 9vw, 132px);
  color: var(--an-ink);
  background: var(--an-white);
}

.an-info-page__header {
  width: min(100%, 960px);
  margin: 0 auto clamp(42px, 5vw, 70px);
  text-align: center;
}

.an-info-page__eyebrow {
  margin: 0 0 13px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.an-info-page__title {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.an-info-page__body {
  width: min(100%, 900px);
  margin: 0 auto;
}

.an-info-page__body--wide { width: min(100%, var(--an-container)); }

.an-info-page__content {
  color: #303030;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.72;
}

.an-info-page__content > :first-child { margin-top: 0 !important; }
.an-info-page__content > :last-child { margin-bottom: 0 !important; }

.an-info-page__content h2,
.an-info-page__content h3,
.an-info-page__content h4 {
  color: var(--an-ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.an-info-page__content h2 {
  margin: clamp(48px, 6vw, 76px) 0 20px;
  padding-top: 22px;
  border-top: 1px solid var(--an-line);
  font-size: clamp(21px, 2.4vw, 30px);
}

.an-info-page__content h3 { margin: 38px 0 14px; font-size: clamp(17px, 1.8vw, 22px); }
.an-info-page__content h4 { margin: 28px 0 10px; font-size: 14px; letter-spacing: .02em; }
.an-info-page__content p { margin: 0 0 19px; }
.an-info-page__content ul,
.an-info-page__content ol { margin: 0 0 25px; padding-left: 20px; }
.an-info-page__content li { margin-bottom: 9px; }
.an-info-page__content strong { color: var(--an-ink); font-weight: 700; }

.an-info-page__content a:not(.btn) {
  color: var(--an-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity var(--an-fast);
}
.an-info-page__content a:not(.btn):hover { opacity: .55; }

.an-info-page__content blockquote {
  margin: 38px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--an-ink);
  color: var(--an-ink);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.an-info-page__content hr {
  margin: 46px 0;
  border: 0;
  border-top: 1px solid var(--an-line);
}

.an-info-page__content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}

.an-info-page__content table {
  width: 100%;
  margin: 34px 0;
  border-collapse: collapse;
  font-size: 12px;
}
.an-info-page__content th,
.an-info-page__content td { padding: 14px 12px; border-bottom: 1px solid var(--an-line); text-align: left; }
.an-info-page__content th { color: var(--an-ink); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }

.an-info-page__content details {
  border-top: 1px solid var(--an-line);
  color: var(--an-ink);
}
.an-info-page__content details:last-of-type { border-bottom: 1px solid var(--an-line); }
.an-info-page__content summary {
  position: relative;
  padding: 21px 44px 21px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.an-info-page__content summary::-webkit-details-marker { display: none; }
.an-info-page__content summary::after {
  position: absolute;
  top: 50%;
  right: 3px;
  content: "+";
  font-size: 20px;
  font-weight: 400;
  transform: translateY(-50%);
}
.an-info-page__content details[open] summary::after { content: "−"; }
.an-info-page__content details > :not(summary) { margin-right: 30px; }

.an-info-page__content input:not([type="checkbox"]):not([type="radio"]),
.an-info-page__content textarea,
.an-info-page__content select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--an-line);
  border-radius: 0;
  color: var(--an-ink);
  background: #fff;
  box-shadow: none;
}
.an-info-page__content textarea { min-height: 150px; resize: vertical; }
.an-info-page__content input:focus,
.an-info-page__content textarea:focus,
.an-info-page__content select:focus { border-color: var(--an-ink); outline: 0; }

/* Sistema único de carruseles de producto ------------------------------- */
.an-product-rail {
  position: relative;
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(44px, 5vw, 72px);
  overflow: hidden;
  border-bottom: 1px solid var(--an-line);
}

.an-product-rail .an-home-products-head,
.an-product-rail .section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--an-container);
  margin: 0 auto 26px !important;
  padding-right: var(--an-gutter) !important;
  padding-left: var(--an-gutter) !important;
  text-align: left !important;
}

.an-product-rail .an-home-products-title,
.an-product-rail .section-title .h5,
.an-product-rail .section-title h2 {
  margin: 0 !important;
  font-size: var(--an-title-md) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
}

.an-product-rail .an-home-products-link {
  flex: 0 0 auto;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--an-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary)::-webkit-scrollbar { display: none; }

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  height: auto !important;
  transform: none !important;
  transition: none !important;
}

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper > .swiper-slide {
  display: flex;
  flex: 0 0 calc((100% - 32px) / 5) !important;
  width: calc((100% - 32px) / 5) !important;
  height: auto !important;
  margin: 0 !important;
}

.an-product-rail .swiper-slide > .js-item-product,
.an-product-rail .swiper-slide > .item-product {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.an-product-rail .item-description {
  flex: 1 1 auto;
  padding: 14px 12px 18px !important;
}

.an-product-rail > .swiper-button-prev,
.an-product-rail > .swiper-button-next,
.an-product-rail .js-swiper-related-prev,
.an-product-rail .js-swiper-related-next,
.an-product-rail .js-swiper-complementary-prev,
.an-product-rail .js-swiper-complementary-next {
  z-index: 4;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--an-line);
  border-radius: 50%;
  color: var(--an-ink);
  background: rgba(255,255,255,.94);
  box-shadow: none;
  transition: opacity var(--an-fast), color var(--an-fast), background var(--an-fast);
}

.an-product-rail > .swiper-button-prev:hover,
.an-product-rail > .swiper-button-next:hover,
.an-product-rail .js-swiper-related-prev:hover,
.an-product-rail .js-swiper-related-next:hover,
.an-product-rail .js-swiper-complementary-prev:hover,
.an-product-rail .js-swiper-complementary-next:hover { color: #fff; background: #111; border-color: #111; }
.an-product-rail > .swiper-button-prev[disabled],
.an-product-rail > .swiper-button-next[disabled],
.an-product-rail .js-swiper-related-prev[disabled],
.an-product-rail .js-swiper-related-next[disabled],
.an-product-rail .js-swiper-complementary-prev[disabled],
.an-product-rail .js-swiper-complementary-next[disabled] { opacity: .22 !important; cursor: default; }

@media (min-width: 768px) and (max-width: 1100px) {
  .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper > .swiper-slide {
    flex-basis: calc((100% - 16px) / 3) !important;
    width: calc((100% - 16px) / 3) !important;
  }
}

/* Footer compacto y editorial */
.js-footer {
  padding-top: clamp(50px, 5.5vw, 78px);
  border-top: 1px solid var(--an-line);
  color: var(--an-ink);
  background: #fff;
}

.js-footer .container-fluid {
  max-width: var(--an-container);
  padding-right: var(--an-gutter);
  padding-left: var(--an-gutter);
}

.js-footer .subtitle {
  margin-bottom: 19px !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.js-footer a { transition: opacity var(--an-fast); }
.js-footer a:hover { opacity: .55; }

.js-footer .an-footer-main {
  align-items: flex-start;
  margin: 0 !important;
  padding-bottom: clamp(42px, 5vw, 64px);
}

.js-footer .an-footer-news,
.js-footer .an-footer-column { margin-bottom: 0 !important; }

.js-footer .an-footer-column ul,
.js-footer .an-footer-contact ul { margin: 0; padding: 0; list-style: none; }

.js-footer .an-footer-column li,
.js-footer .an-footer-contact li { margin: 0 0 12px; }

.js-footer .an-footer-column a,
.js-footer .an-footer-contact a,
.js-footer .contact-link {
  color: var(--an-ink);
  font-size: 12px;
  line-height: 1.5;
}

/* La captura de mail es el canal directo de la marca (va a Supabase y de ahí a
   Perfit). Estaba compitiendo en peso con el listado de categorías; ahora
   respira y se lee como lo primero del footer. */
.js-footer .newsletter { margin-bottom: 32px; }
.js-footer .an-footer-news { padding-bottom: 8px; }
.js-footer .newsletter-title,
.js-footer .newsletter .subtitle { max-width: 430px; }

.js-footer .newsletter-form {
  position: relative;
  max-width: 460px;
  margin-top: 18px;
}

.js-footer .newsletter-input,
.js-footer input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 52px 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--an-ink);
  border-radius: 0;
  color: var(--an-ink);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

.js-footer .newsletter-input:focus,
.js-footer input[type="email"]:focus { outline: 0; border-bottom-width: 2px; }

.js-footer .newsletter-btn,
.js-footer .newsletter-form .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px !important;
  border: 0 !important;
  color: var(--an-ink) !important;
  background: transparent !important;
}

.js-footer .social-link,
.js-footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.js-footer .an-footer-logos {
  margin: 0 !important;
  padding: 24px 0 30px;
  border-top: 1px solid var(--an-line);
}

/* Los medios de pago son un requisito de confianza y legal, no un elemento de
   diseño: antes ocupaban una franja entera a todo color y competían con el
   resto del footer. Entran más chicos y desaturados, y recuperan color cuando
   la persona efectivamente los va a mirar. */
.js-footer .an-footer-logos img,
.js-footer .an-footer-logos svg {
  width: auto;
  max-width: 44px;
  max-height: 21px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: opacity .2s ease, filter .2s ease;
}

.js-footer .an-footer-logos:hover img,
.js-footer .an-footer-logos:hover svg {
  filter: grayscale(0);
  opacity: 1;
}

.js-footer .footer-legal {
  padding: 22px 0 26px;
  border-top: 1px solid var(--an-line);
  color: var(--an-muted);
  background: #fff;
}

.js-footer .footer-legal .font-small {
  margin-bottom: 12px !important;
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: .025em;
}

.js-footer .footer-legal a { color: inherit; }

/* Animaciones globales discretas */
.an-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--an-slow) var(--an-ease), transform var(--an-slow) var(--an-ease);
}

.an-reveal.is-visible { opacity: 1; transform: none; }

/* Outlet: aviso de temporadas anteriores + segunda selección -------------
   Bloque informativo, no promocional: no compite con las fotos de producto.
   Cuando hay acceso a segunda selección se parte en dos columnas separadas
   por una línea, para que quede visualmente claro que son dos cosas
   distintas (stock sano vs. prendas con detalle). */
/* El ancho y la alineación los da el .container-fluid que lo envuelve en
   outlet-notice.tpl, igual que el resto de la página de categoría. */
.an-outlet-notice {
  margin: 0 0 24px;
}

.an-outlet-notice__inner {
  /* Sin recuadro ni fondo propio: con borde y gris distinto al de la página
     se leía como un cartel pegado encima. Queda delimitado por reglas finas
     arriba y abajo, que es el recurso que usa el resto del sitio (footer,
     páginas informativas) para separar bloques sin encajonarlos. */
  max-width: 780px;
  padding: 16px 0;
  border-top: 1px solid var(--an-line);
  border-bottom: 1px solid var(--an-line);
  background: transparent;
}

/* Con segunda selección son dos columnas y ocupa todo el ancho del listado.
   Acotarlo (probé 1240px) lo dejaba cortado a media pantalla mientras la
   grilla seguía hasta el borde: se leía como un bloque suelto. Lo que se
   limita es el largo de línea del texto, no el ancho del recuadro. */
.an-outlet-notice__inner--split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 30px;
  align-items: start;
  max-width: none;
}

.an-outlet-notice__inner--split .an-outlet-notice__text { max-width: 60ch; }

/* El separador es un ::before, que en el DOM va primero. Sin `order` quedaría
   antes del primer bloque — se nota sobre todo en mobile, donde las columnas
   se apilan. Con order explícito el orden visual es siempre:
   temporadas anteriores → línea → segunda selección. */
.an-outlet-notice__inner--split > .an-outlet-notice__main { order: 1; }

.an-outlet-notice__inner--split::before {
  content: "";
  order: 2;
  align-self: stretch;
  background: var(--an-line);
}

.an-outlet-notice__inner--split > .an-outlet-notice__second { order: 3; }

.an-outlet-notice__label {
  margin: 0 0 7px;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.an-outlet-notice__text {
  margin: 0;
  color: var(--an-ink);
  font-size: 12px;
  line-height: 1.55;
}

/* Política de cambio. Se distingue del texto informativo con una línea
   superior y peso: es la condición de compra, no una aclaración más. */
.an-outlet-policy {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--an-line);
  color: var(--an-ink);
  font-size: 11px;
  line-height: 1.5;
}

.an-outlet-policy strong {
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Versión de ficha de producto: va arriba del botón de compra, así que
   necesita más presencia que en la categoría — es lo último que la persona
   lee antes de decidir. */
.an-outlet-policy--compact {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--an-ink);
  font-size: 11px;
}

.an-outlet-notice__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--an-ink);
  color: var(--an-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color var(--an-fast), background-color var(--an-fast);
}

.an-outlet-notice__cta:hover,
.an-outlet-notice__cta:focus-visible {
  color: var(--an-white);
  background: var(--an-ink);
  opacity: 1;
}

.an-outlet-notice__cta-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .an-outlet-notice { margin-bottom: 18px; }

  .an-outlet-notice__inner { padding: 17px 16px; }

  /* En mobile las columnas se apilan y la línea divisoria pasa a ser
     horizontal, manteniendo la separación entre los dos mensajes. */
  .an-outlet-notice__inner--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .an-outlet-notice__inner--split::before { height: 1px; }

  .an-outlet-notice__cta { width: 100%; justify-content: center; }
}

/* Las prendas de regalo no se muestran en ningún listado del sitio: ni en el
   buscador, ni en productos relacionados, ni en categorías. Solo se llega a
   ellas desde el selector del carrito.

   Se ocultan por CSS a propósito y no quitándolas del HTML: el selector arma
   su lista leyendo la página de la categoría por fetch, y el fetch trae el
   HTML crudo sin aplicar estilos. Así siguen disponibles para el sistema y no
   para quien navega. */
.an-gift-product {
  display: none !important;
}

/* Remera de regalo: progreso en el carrito -------------------------------
   Copia el tratamiento del progreso nativo de envío gratis, que está justo
   arriba: barra de 2px, texto centrado debajo, SIN recuadro ni fondo propio.
   Con borde y fondo gris se leía como un bloque pegado encima del carrito en
   lugar de como parte de él. */
.an-gift {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.an-gift__bar {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: var(--an-line);
}

.an-gift__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--an-ink);
  transition: width .45s var(--an-ease);
}

/* Mismo cuerpo que el mensaje nativo de envío gratis (14px), que está
   inmediatamente arriba: con 12px se leía como un texto de otra jerarquía. */
.an-gift__message {
  margin: 9px 0 0;
  color: var(--an-ink);
  font-size: 14px;
  line-height: 1.4;
}

/* La parte resaltada del mensaje (lo que va entre *asteriscos* en el panel).
   El aviso nativo destaca "envío gratis" solo con color; acá se suma negrita
   a propósito, para que el regalo pese más que el envío en la comparación. */
.an-gift__hl {
  font-weight: 700;
  color: var(--an-ink);
}

/* Aviso en la ficha de producto, reemplaza al nativo cuando además se alcanza
   el monto del regalo. Hereda el mismo tratamiento para que no se note el
   cambio de uno a otro. */
.an-gift-product-label {
  margin-bottom: 1.5rem;
  font-size: 14px;
  line-height: 1.4;
}

body.an-gift-product-active .js-shipping-add-product-label {
  display: none !important;
}

.an-gift__count {
  margin-left: 6px;
  font-family: var(--an-technical-font);
  font-size: 10px;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

.an-gift__chosen {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: var(--an-muted);
}

/* El botón sí tiene peso propio: es la acción, no un aviso. */
.an-gift__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 20px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--an-fast);
}

.an-gift__cta:hover { opacity: .82; }

/* Selector de la prenda de regalo */
.an-gift-modal__loading,
.an-gift-modal__error {
  padding: 26px 0;
  text-align: center;
  font-size: 12px;
  color: var(--an-muted);
}

.an-gift-modal__remaining {
  margin: 0 0 14px;
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--an-muted);
}

.an-gift-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px;
}

.an-gift-card__media {
  aspect-ratio: 4 / 5;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--an-surface);
}

.an-gift-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.an-gift-card__name {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.an-gift-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.an-gift-card__size {
  min-width: 34px;
  padding: 5px 7px;
  border: 1px solid var(--an-line);
  background: transparent;
  color: var(--an-ink);
  font-family: var(--an-technical-font);
  font-size: 10px;
  cursor: pointer;
  transition: color var(--an-fast), background-color var(--an-fast), border-color var(--an-fast);
}

.an-gift-card__size:hover,
.an-gift-card__size:focus-visible {
  border-color: var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
}

@media (max-width: 767px) {
  .an-gift-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
}

/* Programa de niveles: banner ------------------------------------------- */
.an-members-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(74vh, 620px);
  padding: clamp(48px, 8vw, 96px) var(--an-gutter);
  overflow: hidden;
  background: var(--an-black);
  text-align: center;
}

.an-members-hero__media {
  position: absolute;
  inset: 0;
}

.an-members-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo sobre la foto: sin esto el texto blanco se pierde según la imagen que
   se cargue, y la imagen la elige Facundo desde el panel. */
.an-members-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);
}

.an-members-hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  color: #fff;
}

.an-members-hero__title {
  margin: 0;
  font-size: clamp(38px, 9vw, 118px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.an-members-hero__text {
  max-width: 46ch;
  margin: 16px auto 0;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.5;
}

.an-members-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.an-members-hero__btn {
  padding: 13px 30px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--an-black);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity var(--an-fast);
}

.an-members-hero__btn.is-ghost { background: transparent; color: #fff; }
.an-members-hero__btn:hover { opacity: .82; }

/* Programa de niveles --------------------------------------------------- */
/* La página del programa usa su propia escala, más angosta que el resto del
   sitio: con el ancho completo (1440) las cinco tarjetas de nivel quedaban de
   272px y el bloque se leía como una tabla estirada. A 1340 dan ~250, que es
   el ancho en el que una tarjeta con ícono, nombre y lista se lee de un vistazo.

   Los tres tokens de acá abajo son locales a propósito: son decisiones de esta
   página y no tienen por qué filtrarse al design system. */
.an-members {
  --anm-card: #f2f1ee;
  --anm-band: rgba(22, 22, 22, .055);
  --anm-gap: clamp(8px, .9vw, 14px);

  max-width: 1340px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--an-gutter) clamp(64px, 8vw, 112px);
}

.an-members__header { margin-bottom: clamp(32px, 4vw, 52px); }

.an-members__eyebrow {
  margin: 0 0 8px;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.an-members__title {
  margin: 0;
  font-size: var(--an-title-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* Estado del cliente */
.an-members__status {
  max-width: 620px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: 22px 0;
  border-top: 1px solid var(--an-ink);
  border-bottom: 1px solid var(--an-line);
}

.an-members__status-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.an-members__label {
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.an-members__tier {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.an-members__spent,
.an-members__next {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--an-ink);
}

.an-members__spent { margin-bottom: 12px; }
.an-members__next { margin-top: 10px; color: var(--an-muted); }
.an-members__next strong { color: var(--an-ink); }

/* Envíos gratis del año.

   Va debajo del estado y no dentro de la lista de beneficios a propósito: los
   beneficios describen lo que te corresponde, esto es algo que se hace. Un
   bloque con su propio borde separa "lo que tenés" de "lo que podés reclamar". */
.an-members__shipping {
  margin-top: 18px;
  padding: 16px 18px 18px;
  border: 1px solid var(--main-foreground-opacity-10);
}

.an-members__shipping-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.an-members__shipping-count {
  font-family: var(--an-technical-font, monospace);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.an-members__shipping-note {
  margin: 0 0 14px;
  color: var(--an-muted);
  font-size: 13px;
  line-height: 1.5;
}

.an-members__shipping-btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.an-members__shipping-btn:hover:not(:disabled) {
  color: var(--button-foreground);
  background: var(--button-background);
  border-color: var(--button-background);
}

.an-members__shipping-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.an-members__bar {
  height: 2px;
  overflow: hidden;
  background: var(--an-line);
}

.an-members__bar-fill {
  display: block;
  height: 100%;
  background: var(--an-ink);
  transition: width .5s var(--an-ease);
}

/* Visitante sin cuenta */
.an-members__join {
  max-width: 520px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: 22px 0;
  border-top: 1px solid var(--an-ink);
  border-bottom: 1px solid var(--an-line);
}

.an-members__join-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
}

.an-members__cta {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.an-members__login {
  margin-left: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

/* Los niveles */
/* Los niveles.
   Cinco tarjetas separadas, no una grilla de filetes. La tarjeta es una pieza
   con fondo propio y aire alrededor: eso es lo que hace que se lean como cinco
   escalones y no como una tabla. Las cinco entran en una sola fila hasta 1100px
   —si una queda sola abajo, deja de leerse como escalera. */
.an-members__tiers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--anm-gap);
  background: none;
  border: 0;
}

.an-members__tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--anm-card);
}

/* El nivel alcanzado se marca invirtiendo el bloque: es el único que tiene
   que saltar a la vista cuando la persona escanea la tabla. */
.an-members__tier-card.is-current {
  background: var(--an-ink);
  color: var(--an-white);
}

.an-members__tier-card.is-current .an-members__tier-min { color: rgba(255,255,255,.65); }

.an-members__tier-card.is-passed .an-members__tier-name,
.an-members__tier-card.is-passed .an-members__tier-min { opacity: .45; }

/* Cabecera centrada: ícono, nombre y umbral. Lleva el padding lateral que la
   tarjeta ya no tiene, para que la banda de la tasa llegue a los bordes. */
.an-members__tier-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 16px 16px;
  text-align: center;
}

.an-members__tier-name {
  margin: 0 0 4px;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.an-members__tier-min {
  margin: 0;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 11px;
  letter-spacing: .06em;
}

/* Tasa de acumulación: banda propia a todo el ancho.
   Es el dato que explica por qué conviene subir de nivel, así que no puede
   quedar mezclado en la lista de abajo. */
.an-members__tier-rate {
  margin: 0;
  padding: 14px 12px;
  background: var(--anm-band);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.an-members__tier-card.is-current .an-members__tier-rate {
  background: rgba(255, 255, 255, .12);
}

/* Los beneficios sí van alineados a la izquierda: son una lista que se lee
   renglón por renglón, y centrada se vuelve ilegible en cuanto una entrada
   ocupa dos líneas. */
.an-members__perks {
  margin: 0;
  padding: 18px 16px 26px;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.45;
}

.an-members__perks li { margin-bottom: 9px; padding-left: 14px; position: relative; }
.an-members__perks li:last-child { margin-bottom: 0; }
.an-members__perks li::before { content: "—"; position: absolute; left: 0; opacity: .5; }

.an-members__tier-flag {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--an-technical-font);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* Puntos acumulados: el número es el protagonista del bloque de estado. */
.an-members__points {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
}

.an-members__points-n {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.an-members__points-l {
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--an-muted);
}

/* Título de sección, común a todos los bloques del programa.
   Centrado y grande: la página es una secuencia de bloques apilados y el título
   centrado es lo que marca dónde empieza cada uno. Alineado a la izquierda y a
   28px se confundía con el contenido de la tarjeta que tenía al lado. */
.an-members__h2 {
  margin: clamp(52px, 6vw, 84px) 0 clamp(20px, 2.4vw, 32px);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
}

/* Cómo funciona: tres pasos.
   Acá la numeración sí corresponde — es una secuencia real que la persona
   recorre en orden, no una decoración. */
.an-members__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--anm-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

.an-members__step {
  padding: 26px 20px 28px;
  background: var(--anm-card);
  text-align: center;
}

.an-members__step-n {
  display: block;
  margin-bottom: 10px;
  font-family: var(--an-technical-font);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--an-muted);
}

.an-members__step-t {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.an-members__step-d {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--an-muted);
}

/* Cómo sumar puntos.
   Acá quedan solo dos formas de sumar —crear la cuenta y comprar—, así que la
   grilla no puede repartir el ancho entre los hijos que haya: con dos, cada
   tarjeta se iba a 680px y el bloque parecía roto. Se fija el ancho de columna
   y se centra la fila, de modo que dos se vean igual de compactas que cinco. */
.an-members__earn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 250px));
  justify-content: center;
  gap: var(--anm-gap);
  background: none;
  border: 0;
}

.an-members__earn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 18px 28px;
  background: var(--anm-card);
  text-align: center;
}

.an-members__earn-icon {
  width: 22px;
  height: 22px;
  fill: var(--an-ink);
  flex: 0 0 auto;
}

.an-members__earn-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--an-ink);
}

.an-members__earn-pts {
  margin: auto 0 0;
  font-family: var(--an-technical-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Ícono del nivel: imagen cuadrada cargada desde el editor.
   NO se invierte en el nivel alcanzado, aunque el bloque pase a fondo negro:
   los íconos tienen color propio (bronce, plata, oro...) y al invertirlos
   cambiaban de metal — el bronce se leía como diamante. */
.an-members__tier-icon {
  width: clamp(76px, 7vw, 104px);
  height: clamp(76px, 7vw, 104px);
  margin-bottom: 12px;
}

.an-members__tier-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Catálogo de canje */
.an-members__rewards { margin-top: 0; }

.an-members__reward-icon {
  display: block;
  width: 76px;
  height: 76px;
  fill: var(--an-ink);
}

.an-members__rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 250px));
  justify-content: center;
  gap: var(--anm-gap);
  background: none;
  border: 0;
}

/* Tarjetas casi cuadradas, con el símbolo ocupando la mitad de arriba.
   Con las tarjetas bajas y el ícono chico el catálogo se leía como una lista
   de precios; el premio tiene que entrar por la imagen, no por el texto. */
.an-members__reward {
  display: flex;
  flex-direction: column;
  min-height: 246px;
  padding: 22px 18px 24px;
  background: var(--anm-card);
  text-align: center;
}

.an-members__reward-media {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 96px;
  margin-bottom: 14px;
}

.an-members__reward-img {
  max-width: 100%;
  max-height: 108px;
  object-fit: contain;
}

/* Lo alcanzable se marca con una línea superior, no con color: el catálogo
   tiene que leerse como una escalera, no como un semáforo. */
.an-members__reward.is-reachable { box-shadow: inset 0 2px 0 var(--an-ink); }

.an-members__reward-pts {
  margin: 0 0 6px;
  font-family: var(--an-technical-font);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

.an-members__reward-name {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.an-members__reward-state {
  font-family: var(--an-technical-font);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--an-muted);
}

.an-members__reward-state.is-ok { color: var(--an-ink); }

.an-members__reward-btn {
  padding: 7px 14px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--an-fast);
}

.an-members__reward-btn:hover { opacity: .82; }

.an-members__reward-btn:disabled {
  background: transparent;
  color: var(--an-muted);
  border-color: var(--an-line);
  cursor: default;
}

.an-members__msg {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--an-ink);
}

.an-members__msg.is-error { color: var(--an-muted); }

/* Preguntas frecuentes.
   Barras negras a todo el ancho, al revés que el resto de la página: es el
   único bloque que no se escanea sino que se lee, y el contraste marca que acá
   hay que detenerse. */
.an-members__faq-intro {
  margin: -14px 0 clamp(20px, 2.4vw, 30px);
  color: var(--an-muted);
  font-size: 13px;
  text-align: center;
}

.an-members__faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.an-members__faq-item {
  background: var(--an-ink);
  color: var(--an-white);
}

/* El marcador propio del navegador se saca por las dos vías: Safari usa un
   pseudo-elemento con prefijo y el resto el estándar. */
.an-members__faq summary::-webkit-details-marker { display: none; }

.an-members__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.an-members__faq-q:hover { opacity: .78; }

/* La flecha se dibuja con bordes en vez de un ícono del sprite: es una sola
   forma y así rota sin depender de que el SVG esté cargado. */
.an-members__faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.an-members__faq details[open] .an-members__faq-q::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.an-members__faq-a {
  padding: 0 18px 18px;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 767px) {
  .an-members__faq-q { padding: 14px 15px; }
  .an-members__faq-a { padding: 0 15px 16px; }
}

/* =========================================================
   HOME — CÍRCULOS DE CATEGORÍA
   ========================================================= */

.an-circles {
  /* Color del círculo mientras la foto no llegó. Una vez cargada, el fondo lo
     pone la propia imagen (ver .an-circles__foto), así que este valor solo se
     ve durante el instante de carga y no hace falta que coincida con nada. */
  --an-mockup-bg: #f4f3f1;

  position: relative;
  width: 100%;
  padding: clamp(28px, 4vw, 52px) clamp(12px, 1.6vw, 22px) clamp(20px, 3vw, 36px);
}

/* Once categorías no entran en ninguna pantalla, así que la fila se desplaza en
   todos los tamaños. Scroll nativo y no transform: el dedo, la rueda y el
   teclado funcionan sin escribir nada. */
.an-circles__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.an-circles__viewport::-webkit-scrollbar { display: none; }

/* `justify-content: center` centra la fila cuando entra entera y no hace nada
   cuando desborda, que es exactamente el comportamiento buscado. */
/* En desktop las once se reparten el ancho completo de la pantalla: `flex: 1`
   sobre cada una en vez de un ancho fijo. Así no hay flechas ni scroll —el
   menú entra entero y se lee de una— y la fila crece con el monitor. */
.an-circles__row {
  display: flex;
  gap: clamp(8px, 1vw, 18px);
  width: 100%;
  padding: 4px 0;
}

.an-circles__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--an-ink);
  scroll-snap-align: start;
  text-decoration: none;
}

/* El aspecto lo fija el contenedor y no la imagen: el círculo ocupa su lugar
   desde el primer pintado, antes de que llegue ninguna foto.

   El fondo es el mismo gris de los mockups, no blanco: con el disco blanco se
   veía el cuadrado gris de la foto flotando adentro, como una imagen pegada.
   Igualando los dos, la prenda queda recortada sobre el círculo y el bloque se
   lee como un menú y no como una galería. */
.an-circles__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--an-ink);
  border-radius: 50%;
  background: var(--an-mockup-bg);
}

/* Dos capas de la MISMA foto, y ahí está el truco.

   La de arriba es la prenda con `contain`: entra entera, sin perder mangas ni
   capuchas como pasaba con `cover`. La de abajo es la misma imagen ampliada
   ocho veces y anclada a su esquina superior izquierda —donde todo mockup tiene
   solo fondo—, así que rellena el círculo exactamente con el gris de esa foto.

   Por eso no hay ningún hex escrito acá: el color sale de la imagen misma. Da
   igual si un mockup es un punto más claro que otro, o si algún día cambia el
   fondo del estudio: el círculo siempre coincide y el recuadro no aparece.

   `background-origin` distinto por capa es lo que separa las dos: la prenda
   respeta el padding y queda despegada del borde, el fondo lo ignora y llega
   hasta la línea negra. */
.an-circles__foto {
  position: absolute;
  inset: 0;
  padding: 9%;
  background-origin: content-box, padding-box;
  background-clip: content-box, padding-box;
  background-position: center, left top;
  background-size: contain, 800%;
  background-repeat: no-repeat, no-repeat;
  opacity: 0;
  transition: opacity .55s ease;
}

.an-circles__foto.is-visible { opacity: 1; }

.an-circles__item:hover .an-circles__media { border-color: var(--an-ink); }

.an-circles__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.an-circles__item:focus-visible {
  outline: 2px solid var(--an-ink);
  outline-offset: 4px;
}

/* Las flechas solo existen mientras la fila se desplaza, o sea nunca en
   desktop. Se dejan en el markup porque en tablet sí hacen falta. */
.an-circles__prev,
.an-circles__next {
  position: absolute;
  top: calc(50% - 14px);
  z-index: 2;
  transform: translateY(-50%);
}

.an-circles__prev { left: 2px; }
.an-circles__next { right: 2px; }

.an-circles__prev:disabled,
.an-circles__next:disabled { opacity: .25; pointer-events: none; }

@media (min-width: 1024px) {
  .an-circles__prev,
  .an-circles__next { display: none !important; }
}

/* Debajo de 1024px once círculos repartidos quedarían de 60px y la etiqueta no
   entra. Ahí sí vuelven a tener ancho propio y la fila se desplaza. */
@media (max-width: 1023px) {
  .an-circles__item { flex: 0 0 auto; width: clamp(94px, 13vw, 130px); }
}

@media (max-width: 767px) {
  /* La fila arranca pegada al borde izquierdo: si el primer círculo queda
     centrado, se corta por la mitad y no se entiende que la fila sigue. */
  .an-circles { padding-left: 0; padding-right: 0; }
  .an-circles__row { padding-left: 14px; padding-right: 14px; }
  .an-circles__item { width: 94px; }
  .an-circles__label { font-size: 9.5px; letter-spacing: .05em; }
}

/* =========================================================
   HOME — COLECCIONES CON PESTAÑAS
   ========================================================= */

/* Ancho completo, como Bestsellers: el carrusel se corta contra el borde de la
   pantalla y eso es lo que avisa que hay más productos a la derecha. Con el
   contenedor angosto la última tarjeta terminaba justo antes del margen y
   parecía que ahí se acababa la colección. */
.an-collections {
  position: relative;
  width: 100%;
  padding: clamp(36px, 5vw, 68px) 0;
}

/* La cabecera sí respeta el margen: el título alineado al borde de la pantalla
   se lee mal. Solo el carrusel va de punta a punta. */
.an-collections__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px 20px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  padding: 0 clamp(14px, 2vw, 28px);
}

.an-collections__title {
  grid-column: 1;
  margin: 0;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.an-collections__tabs {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pastillas: la activa se invierte. Es el mismo lenguaje que los filtros de
   talle de la categoría, así que no hay que aprender un control nuevo. */
.an-collections__tab {
  padding: 9px 16px;
  border: 1px solid var(--an-line);
  background: transparent;
  color: var(--an-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.an-collections__tab:hover { border-color: var(--an-ink); }

.an-collections__tab.is-active {
  border-color: var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
}

.an-collections__all {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--an-ink);
  color: var(--an-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Carrusel por scroll nativo y no por transform: arrastrar con el dedo, la
   rueda y el teclado funcionan sin escribir nada. */
.an-collections__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.an-collections__viewport::-webkit-scrollbar { display: none; }

.an-collections__track {
  display: flex;
  gap: 8px;
  min-width: 100%;
}

.an-collections__slide {
  flex: 0 0 auto;
  width: clamp(190px, 22vw, 268px);
  scroll-snap-align: start;
}

.an-collections__status {
  padding: 60px 0;
  width: 100%;
  color: var(--an-muted);
  font-size: 12px;
  text-align: center;
}

.an-collections__prev,
.an-collections__next {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.an-collections__prev { left: 4px; }
.an-collections__next { right: 4px; }

.an-collections__prev:disabled,
.an-collections__next:disabled { opacity: .25; pointer-events: none; }

@media (max-width: 767px) {
  .an-collections__head { grid-template-columns: 1fr; }
  .an-collections__all { grid-column: 1; grid-row: auto; justify-self: start; }
  .an-collections__slide { width: 62vw; }
}

.an-members__content { margin-top: clamp(40px, 5vw, 64px); }

/* Los cinco niveles en una fila necesitan ~1100px para que la tarjeta no baje
   de 200. Debajo de eso se reparten en tres y dos, que sigue leyéndose como
   escalera; en teléfono van de a dos, nunca una sola por fila —apiladas, la
   comparación entre niveles se pierde y hay que recordar la anterior. */
@media (max-width: 1100px) {
  .an-members__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .an-members__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-members__steps { grid-template-columns: 1fr; }
  .an-members__tier-head { padding: 20px 12px 14px; }
  .an-members__perks { padding: 14px 12px 20px; }
  .an-members__login { display: inline-block; margin: 12px 0 0; }
}

/* Selector inicial de región */
.an-region-gate {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7,7,7,.76);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .4s var(--an-ease), visibility .4s;
}

.an-region-gate.is-open { opacity: 1; visibility: visible; }

.an-region-gate__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 46%) 1fr;
  width: min(920px, 96vw);
  min-height: 570px;
  overflow: hidden;
  background: #fff;
  transform: translateY(18px) scale(.985);
  transition: transform .55s var(--an-ease);
}

.an-region-gate.is-open .an-region-gate__dialog { transform: none; }

.an-region-gate__visual { position: relative; min-height: 570px; background: #deddd9; }
.an-region-gate__visual::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35)); }
.an-region-gate__visual img { display:block; width:100%; height:100%; object-fit:cover; }
.an-region-gate__visual-label { position:absolute; z-index:1; right:24px; bottom:22px; left:24px; margin:0; color:#fff; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }

.an-region-gate__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 6vw, 72px);
}

.an-region-gate__eyebrow { margin:0 0 18px; font-size:9px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.an-region-gate__title { margin:0 0 12px; font-size:clamp(30px, 4vw, 48px); font-weight:700; line-height:.98; letter-spacing:-.045em; text-transform:uppercase; }
.an-region-gate__intro { max-width:410px; margin:0 0 32px; color:var(--an-muted); font-size:13px; line-height:1.55; }
.an-region-gate__choices { display:grid; gap:10px; }
.an-region-gate__choice { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:14px 17px; border:1px solid var(--an-line); color:#111; background:#fff; text-decoration:none; transition:color var(--an-fast),background var(--an-fast),border-color var(--an-fast); }
.an-region-gate__choice:hover { color:#fff; background:#111; border-color:#111; }
.an-region-gate__choice strong { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.an-region-gate__choice small { display:block; margin-top:3px; color:var(--an-muted); font-size:9px; }
.an-region-gate__choice:hover small { color:rgba(255,255,255,.66); }
.an-region-gate__arrow { font-size:19px; }
.an-region-gate__close { position:absolute; z-index:4; top:14px; right:14px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; color:#111; background:#fff; font-size:22px; cursor:pointer; }
.an-region-lock { overflow:hidden !important; }

@media (max-width: 767px) {
  :root { --an-section-space: 56px; }

  /* Selector regional mobile: fotografía contenida + dos opciones visibles. */
  html body #region-overlay.an-region-gate {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body #region-overlay.an-region-gate:not(.is-open) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #region-overlay.an-region-gate.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body #region-modal.an-region-gate__dialog {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    transform: none !important;
  }

  html body #region-modal .an-region-gate__visual {
    position: relative !important;
    display: block !important;
    flex: 0 0 190px !important;
    width: 100% !important;
    height: 190px !important;
    min-height: 0 !important;
    max-height: 190px !important;
    overflow: hidden !important;
    background: #111 !important;
  }

  html body #region-modal .an-region-gate__visual img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 38% !important;
  }

  html body #region-modal .an-region-gate__content {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 20px 18px 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body #region-modal .an-region-gate__eyebrow { margin: 0 0 6px !important; }
  html body #region-modal .an-region-gate__title { margin: 0 0 7px !important; font-size: 24px !important; }
  html body #region-modal .an-region-gate__intro { margin: 0 0 14px !important; font-size: 11px !important; }
  html body #region-modal .an-region-gate__choices { display: grid !important; gap: 8px !important; }
  html body #region-modal .an-region-gate__choice { width: 100% !important; min-height: 60px !important; padding: 11px 14px !important; }
  html body #region-modal .an-region-gate__close { top: 9px !important; right: 9px !important; width: 40px !important; height: 40px !important; }

  /* Sliders editoriales mobile: lectura cómoda y gesto horizontal claro. */
  html body.template-home .section-featured-home {
    padding-top: 46px !important;
    padding-bottom: 34px !important;
  }

  html body.template-home .section-featured-home .an-home-products-head {
    margin-bottom: 24px !important;
    padding-right: 20px !important;
    padding-left: 6px !important;
    gap: 12px !important;
  }

  html body.template-home .section-featured-home .an-home-products-title {
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: -.01em !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport) {
    padding-right: 18px !important;
    padding-bottom: 0 !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport) > .swiper-wrapper {
    gap: 10px !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 72vw !important;
    width: 72vw !important;
    max-width: 310px !important;
    scroll-snap-align: start !important;
  }

  html body.template-home .section-featured-home .item-description {
    padding: 14px 12px 16px !important;
  }

  html body.template-home .section-featured-home .item-name {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .item-product .item-description { padding:11px 10px 0; }
}

@media (max-width: 767px) and (max-height: 680px) {
  html body #region-modal .an-region-gate__visual {
    flex-basis: 125px !important;
    height: 125px !important;
    max-height: 125px !important;
  }

  html body #region-modal .an-region-gate__content {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  html body #region-modal .an-region-gate__eyebrow,
  html body #region-modal .an-region-gate__intro {
    display: none !important;
  }

  html body #region-modal .an-region-gate__title {
    margin-bottom: 11px !important;
    font-size: 21px !important;
  }
}

@media (max-width: 767px) {
  /* En mobile todos los carruseles comparten jerarquía centrada y muestran
     una tarjeta completa más un anticipo claro de la siguiente. */
  html body .an-product-rail {
    padding-top: 46px !important;
    padding-bottom: 38px !important;
  }

  html body .an-product-rail .an-home-products-head,
  html body .an-product-rail .section-title {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px !important;
    margin-bottom: 24px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    text-align: center !important;
  }

  html body .an-product-rail .an-home-products-title,
  html body .an-product-rail .section-title .h5,
  html body .an-product-rail .section-title h2 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  html body .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) {
    padding-right: 18px !important;
    scroll-snap-type: x mandatory !important;
  }

  html body .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper {
    gap: 10px !important;
  }

  html body .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 74vw !important;
    width: 74vw !important;
    max-width: 310px !important;
    scroll-snap-align: start !important;
  }

  html body .an-product-rail > .swiper-button-prev,
  html body .an-product-rail > .swiper-button-next,
  html body .an-product-rail .js-swiper-related-prev,
  html body .an-product-rail .js-swiper-related-next,
  html body .an-product-rail .js-swiper-complementary-prev,
  html body .an-product-rail .js-swiper-complementary-next {
    display: none !important;
  }

  .an-info-page {
    min-height: 45vh;
    padding: 48px 18px 76px;
  }

  .an-info-page__header { margin-bottom: 38px; }
  .an-info-page__eyebrow { margin-bottom: 10px; font-size: 8px; }
  .an-info-page__title { font-size: clamp(32px, 11vw, 48px); }
  .an-info-page__content { font-size: 14px; line-height: 1.67; }
  .an-info-page__content h2 { margin-top: 44px; padding-top: 18px; font-size: 21px; }
  .an-info-page__content h3 { margin-top: 32px; font-size: 18px; }
  .an-info-page__content blockquote { margin: 30px 0; padding-left: 18px; font-size: 18px; }

  .an-info-page__content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .js-footer { padding-top: 42px; }
  .js-footer .container-fluid { padding-right: 18px; padding-left: 18px; }
  .js-footer .an-footer-main { padding-bottom: 32px; }
  .js-footer .an-footer-news { margin-bottom: 34px !important; padding-right: 0 !important; }
  .js-footer .newsletter { margin-bottom: 20px; }

  .js-footer .an-footer-column {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--an-line);
  }

  .js-footer .an-footer-column:last-child { border-bottom: 1px solid var(--an-line); }

  .js-footer .an-footer-column > .js-accordion-toggle-mobile {
    align-items: center;
    min-height: 58px;
    margin: 0;
    padding: 0 3px;
  }

  .js-footer .an-footer-column > .subtitle,
  .js-footer .an-footer-column > .js-accordion-toggle-mobile .subtitle {
    margin: 0 !important;
    padding: 21px 3px;
  }

  .js-footer .an-footer-column .js-accordion-content-mobile { padding: 0 3px 20px; }
  .js-footer .an-footer-logos { padding: 22px 0 24px; }
  .js-footer .an-footer-logos > span { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
  .js-footer .footer-legal { padding: 19px 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .an-reveal { opacity:1; transform:none; }
}