: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);
}

/* El header medía distinto según la página: este bloque le daba a las páginas
   interiores un logo de hasta 112px y paddings recortados, y dejaba el home
   con su composición amplia. Medido en vivo daba 165px en el home contra 119
   en la ficha de producto, con posicionamientos distintos encima. Se leía como
   dos componentes diferentes y así lo reportó Facundo.

   Ahora la altura del logo y del header la fija anhelo-glass.tpl, igual en
   todas las plantillas, junto con la contracción al scrollear. Lo único que se
   conserva del home es que arriba de todo el header va transparente sobre el
   banner, que es donde corresponde.

   Queda solo el recorte del menú de escritorio, que no afecta a la altura. */
@media (min-width: 1024px) {
  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 .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. */
/* El catálogo tenía todo el mismo peso: fondo gris claro, ícono chico y gris,
   texto gris. Se leía apagado y ninguna tarjeta pedía atención.

   Ahora la prenda va en blanco sobre un bloque negro. Es la misma paleta de
   siempre —no se agrega un solo color— pero el contraste convierte la silueta
   en el protagonista, que es lo que la persona está mirando. La ficha técnica
   queda abajo, en claro. */
.an-members__reward {
  display: flex;
  flex-direction: column;
  min-height: 246px;
  padding: 0;
  overflow: hidden;
  background: var(--anm-card);
  text-align: center;
}

.an-members__reward-media {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 148px;
  margin: 0 0 16px;
  padding: 22px 16px;
  background: var(--an-ink);
}

.an-members__reward-icon {
  width: clamp(64px, 8vw, 92px);
  height: clamp(64px, 8vw, 92px);
  fill: var(--an-white);
}

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

/* Alcanzado: la tarjeta se enmarca en negro y el bloque de la prenda se apaga
   apenas, para que el ojo caiga en el botón y no en el dibujo. Sigue sin haber
   color: la diferencia es de contraste, no de semáforo. */
.an-members__reward.is-reachable {
  box-shadow: inset 0 0 0 2px var(--an-ink);
}

/* Y al revés: lo que todavía no se puede canjear baja el contraste de la
   silueta. Así las que están al alcance saltan solas sin necesidad de marcarlas
   con un cartel. */
.an-members__reward:not(.is-reachable) .an-members__reward-media { opacity: .78; }

.an-members__reward-pts {
  display: inline-block;
  align-self: center;
  margin: 0 0 8px;
  padding: 4px 10px;
  background: var(--an-ink);
  color: var(--an-white);
  font-family: var(--an-technical-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.an-members__reward-name {
  margin: 0 0 12px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

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

/* Avance hacia el premio. Pegada al borde inferior y sin marco: es una medida,
   no un componente, y no tiene que competir con el botón de canjear. */
.an-members__reward-bar {
  display: block;
  height: 3px;
  margin-top: auto;
  background: rgba(22, 22, 22, .12);
}

.an-members__reward-bar-fill {
  display: block;
  height: 100%;
  background: var(--an-ink);
}

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

/* El botón va pegado al borde inferior y a todo el ancho: la tarjeta ya no
   tiene padding propio, así que sin esto quedaba flotando en el medio. */
.an-members__reward-btn {
  margin-top: auto;
  padding: 13px 14px;
  border: 0;
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  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; }
}

/* Ficha del premio ------------------------------------------
   Solo las tarjetas con descripción se ven cliqueables. Una tarjeta que invita
   a tocarla y no hace nada es peor que una que no invita. */
.an-members__reward.is-clickable {
  cursor: pointer;
  transition: box-shadow .16s ease;
}

.an-members__reward.is-clickable:hover {
  box-shadow: inset 0 0 0 1px var(--an-ink);
}

.an-members__reward.is-clickable:focus-visible {
  outline: 2px solid var(--an-ink);
  outline-offset: 3px;
}

.an-members__ficha {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .62);
}

/* `hidden` por sí solo pierde contra el `display: flex` de arriba. */
.an-members__ficha[hidden] { display: none; }

.an-members__ficha-caja {
  position: relative;
  width: min(440px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: 30px 26px 28px;
  background: var(--an-white);
}

.an-members__ficha-cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--an-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.an-members__ficha-pts {
  margin: 0 0 6px;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.an-members__ficha-titulo {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.an-members__ficha-texto {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--an-muted);
}

.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; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v33 — CORRECCIONES DE BASE Y LENGUAJE iOS 26
   ═══════════════════════════════════════════════════════════════════════
   Este bloque va al final a propósito: gana por orden de cascada sobre todo
   lo de arriba sin tener que subirle la especificidad a nada.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. La tarjeta vuelve a tener jerarquía ────────────────────────────

   El sistema definía tres tintas pero la tarjeta usaba UNA sola para todo: el
   nombre del producto y el precio salían los dos en #595959, el gris de texto
   secundario, con seis puntos de diferencia de tamaño como única distinción.
   El precio, que es el dato por el que se entra a la ficha, no llegaba nunca a
   la tinta principal.

   Ahora: precio en tinta plena, nombre en gris —es una etiqueta, no un
   titular— y lo de abajo en el gris secundario que sí se lee. */
.item-product .item-price,
.js-item-product .item-price {
  color: var(--an-ink) !important;
  font-size: 14px;
}

.item-product .item-name,
.js-item-product .item-name {
  color: var(--an-ink-soft);
}

/* ── 2. Piso de contraste en la letra chica de la tarjeta ──────────────

   Cuotas y precio con transferencia venían en gris al 60% (2,78 a 1). El
   token ya se corrigió en style-tokens.tpl; acá se cierra el caso para los
   selectores que escribían el color a mano. */
.item-product .item-installments,
.item-product .js-payment-discount-price-product-container,
.item-product .js-payment-discount-price-product,
.js-item-product .item-installments {
  color: var(--an-muted) !important;
  font-size: var(--an-text-min);
}

/* ── 3. Áreas táctiles ─────────────────────────────────────────────────

   El enlace del carrito en el header de un teléfono medía 20x17. El mínimo
   que pide Apple, y el que evita el toque errado, es 44x44. Se agranda el
   área sin agrandar el ícono: el padding es invisible y es lo que se toca. */
.head-main .col-utility .utilities-container > a,
.head-main .col-utility a.utilities-container,
.head-main #ajax-cart > a,
.head-main .cart-summary > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Los "VER TODOS" de los carruseles medían 15px de alto. Mismo criterio: el
   texto queda igual, el área crece. */
.an-home-products-link,
.an-collections__all,
.an-product-rail__all {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ── 4. La aparición de las tarjetas, fuera del celular ────────────────

   Cada tarjeta entraba con medio segundo de desvanecido y 24px de
   desplazamiento. En una grilla de teléfono, donde se scrollea rápido y con
   el pulgar, eso deja tarjetas a medio aparecer: se ven fantasmas mientras se
   baja, y en una captura se ven directamente en blanco.

   En escritorio el efecto está bien —se scrollea despacio y con rueda— así
   que se conserva. En celular las tarjetas simplemente están. */
@media (max-width: 767px) {
  .template-category .item-product.an-reveal,
  .template-search .item-product.an-reveal,
  .an-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 5. Controles en cápsula ───────────────────────────────────────────

   La regla de iOS 26 que se adopta: lo que se OPERA es una pastilla, lo que
   se MIRA es recto. Por eso esta lista es explícita y corta, en vez de un
   `.btn { border-radius }` global: las fotos, las tarjetas y el hero tienen
   que seguir a cero, que es donde está la marca.

   Los radios salen de --r-capsule, así que si mañana se decide bajar a 12px
   se cambia en un solo lugar. */
.js-addtocart,
.js-prod-submit-form,
.an-sticky-buy__btn,
.item-actions .btn,
.js-quickshop-submit,
#go-to-checkout,
.btn-primary[data-component="cart.checkout-button"],
.js-ajax-cart-submit .btn,
.an-collections__tab,
.btn-variant,
.js-insta-variant,
.js-sort-by-private,
.js-category-controls .btn,
.an-hero__btn {
  border-radius: var(--r-capsule) !important;
}

/* Los talles pasan de cuadrados a pastillas. El ancho mínimo mantiene la fila
   pareja cuando conviven "0 / S" y "00 / XS". */
.btn-variant,
.js-insta-variant {
  min-width: 54px;
  min-height: 44px;
  padding-right: 12px;
  padding-left: 12px;
}

/* La fila de talles baja de línea en vez de desbordar.

   La pastilla es más ancha que el cuadrado que reemplaza, y las prendas
   Stained tienen cinco talles porque suman el 00. Cinco pastillas no entran en
   los 343px útiles de un iPhone.

   NO se toca el `display` de los contenedores de variantes: adentro también
   vive el rótulo "TALLE", y pasarlos a flex lo pondría en la misma línea que
   los botones. Los botones son inline-block, así que en el flujo normal ya
   bajan de línea solos; lo único que hace falta es que la segunda fila no
   quede pegada a la primera. */
.btn-variant,
.js-insta-variant {
  margin-bottom: 8px;
}

/* El talle elegido se invierte en vez de marcarse con un fondo apenas gris.
   Es el mismo lenguaje que la pestaña activa de colecciones, así que no hay
   un control nuevo que aprender. */
.btn-variant.selected,
.js-insta-variant.selected {
  border-color: var(--an-ink) !important;
  background: var(--an-ink) !important;
  color: #fff !important;
}

.btn-variant.selected .btn-variant-content,
.js-insta-variant.selected .btn-variant-content {
  color: inherit !important;
}

/* Sin stock: tachado y apagado, pero legible. Antes quedaba tan claro que no
   se distinguía de un talle disponible con poco contraste. */
.btn-variant-no-stock,
.js-insta-variant.btn-variant-no-stock {
  color: var(--an-muted) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .75;
}

/* ── 6. Hero: alto contenido ───────────────────────────────────────────

   Un hero de pantalla completa empuja el resto de la página fuera de la
   primera mirada. Con 78 la prenda sigue entrando entera y se ve que abajo
   sigue habiendo tienda, que es lo que invita a bajar. */
/* NO se le fija altura al banner.

   Acá estuvo el "mucho espacio" entre el banner y las categorías: la foto del
   banner mide 469px de alto natural, y al forzar la seccion a 78vh (633px en
   un iPhone) quedaban 164 PIXELES de blanco vacio abajo de la foto, adentro de
   la propia seccion. Medido en vivo.

   La altura forzada no servia para nada: la foto ya ocupaba el 58% de la
   pantalla, menos que el 78 que se le estaba pidiendo. Sin la regla, la seccion
   mide exactamente lo que mide la foto y el vacio desaparece. */

/* ── 7. Los rótulos más chicos del sitio ───────────────────────────────

   La barra de confianza tenía sus etiquetas en 8px y la franja de anuncios en
   9,5. Son rótulos en mayúscula con espaciado, o sea el peor caso posible para
   leer: mayúsculas sin ascendentes ni descendentes y letras separadas.

   No llegan al piso de 11px de los textos de lectura y es deliberado: son tres
   columnas en 375px de ancho, y "CALIFICACIÓN PROMEDIO" en 11px se parte en
   dos líneas y descuadra la fila. 10px es lo máximo que entra en una línea, y
   sobre 8 es un tercio más grande.

   Los valores van escritos acá y no en el token porque son la excepción, y una
   excepción que no se ve es una excepción que mañana alguien "corrige". */
.anhelo-trust-section__label {
  font-size: 10px !important;
  letter-spacing: .04em;
}

#anhelo-announcement .an-ann__item {
  font-size: 10.5px;
}

@media (max-width: 400px) {
  #anhelo-announcement .an-ann__item { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v34 — UN SOLO SISTEMA DE REDONDEO
   ═══════════════════════════════════════════════════════════════════════

   Contados en la home de un celular, sobre elementos con fondo o borde
   visible, convivían cuatro sistemas:

       999px   20 elementos   controles            ✓ corresponde
       50%     17 elementos   círculos de categoría ✓ corresponde
       6px      7 elementos   etiquetas sobre foto  ✗
       4px     17 elementos   logos de medios de pago ✗

   Los dos que sobran son los peores casos posibles porque están sobre la foto
   del producto: una etiqueta con las esquinas apenas redondeadas flotando
   sobre una imagen de esquina viva se lee como un error de maquetado, no como
   una decisión. Es literalmente lo que se ve al entrar a cualquier categoría.

   La regla, que ya estaba escrita en los tokens pero no se había aplicado
   entera: cápsula para lo que se toca, círculo para lo que es redondo, CERO
   para el contenido. Una etiqueta encima de una foto es contenido.
   ═══════════════════════════════════════════════════════════════════════ */

.js-labels-floating-group .label,
.js-stock-label-private,
.js-offer-label-private,
.js-shipping-label-private,
.js-free-shipping-minimum-label,
.item-product .label,
.js-item-product .label,
.preorder-label-list,
.preorder-label {
  border-radius: var(--r-content) !important;
}

/* Los logos de medios de pago del pie: son imágenes, o sea contenido. */
.js-footer .an-footer-logos img,
.an-footer-logos img,
.icon-logo {
  border-radius: var(--r-content) !important;
}

/* El selector de país del pie era el último elemento suelto: un control de
   formulario con 4px propios. Es un control, así que va a cápsula como los
   demás. Con esto no queda ningún radio fuera de los tres del sistema. */
.form-select.js-lang-select,
.js-footer select,
.js-lang-select {
  border-radius: var(--r-capsule) !important;
}

/* ── Los "ver todos" ───────────────────────────────────────────────────

   Al lado de una pestaña en cápsula, un "ver todos" sin fondo ni borde es
   texto suelto: no se lee como algo tocable. Estaba en el punto medio, que es
   el único lugar donde no funciona —ni control ni enlace.

   Se resuelve hacia el lado del enlace y no del botón a propósito: la acción
   principal de esa fila es tocar un producto, y meter un segundo botón con
   peso al lado de las pestañas le sacaría atención. Con subrayado permanente
   y la flecha alcanza para que se lea como enlace. */
.an-home-products-link,
.an-collections__all,
.an-product-rail__all {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  text-decoration: none;
}

.an-home-products-link:hover,
.an-collections__all:hover,
.an-product-rail__all:hover {
  opacity: .65;
}

/* ── Las capas flotantes que no eran de vidrio ─────────────────────────

   El material lo pone anhelo-glass.tpl. Acá va la geometría, que tiene que
   acompañar: una hoja que sube desde abajo lleva el radio de hoja, y un panel
   lateral no lleva ninguno porque va pegado al borde de la pantalla. */
@media (max-width: 767px) {
  .modal-nav-hamburger,
  .modal-nav-search {
    border-radius: 0;
  }

  .js-cross-selling-modal,
  #js-cross-selling-modal,
  .modal-bottom-sheet {
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    overflow: hidden;
  }
}

/* El aviso de "agregado al carrito" flota sobre el contenido: es una capa,
   así que lleva el mismo lenguaje que las demás. */
.js-notification.notification-fixed {
  border-radius: var(--r-sheet);
  box-shadow: var(--gl-edge), var(--gl-shadow);
}

@media (max-width: 767px) {
  .js-notification.notification-fixed {
    right: var(--chrome-inset);
    left: var(--chrome-inset);
    width: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v35 — BARRIDO ESTÉTICO
   ═══════════════════════════════════════════════════════════════════════

   Cambio de dirección pedido por Facundo: el contenido también se redondea.

   La versión anterior dejaba fotos, videos y tarjetas a radio cero, con la
   idea de que la esquina viva protegía lo grunge de la marca. La decisión
   ahora es otra —que todo hable el mismo idioma que los controles— y es
   coherente con lo que se viene buscando: en iOS 26 el redondeo no es un
   adorno, es lo que hace que las capas se lean como objetos apilados.

   Los radios quedan en cuatro y ninguno suelto:

       --r-media    16px   fotos, videos, tarjetas, reseñas
       --r-capsule  999px  todo lo que se toca
       --r-sheet    26px   paneles que suben desde abajo
       50%                 los círculos de categoría
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --r-media: 16px;
  --r-media-sm: 12px;
}

/* ── 1. Fotos de producto ──────────────────────────────────────────────
   La galería de la ficha y las fotos de la grilla. El contenedor lleva el
   recorte además del radio: sin overflow, la foto desborda la esquina y el
   redondeo no se ve. */
#single-product .anhelo-product-cover-gallery__item,
#single-product .anhelo-product-cover-gallery img,
#single-product .js-product-slider img,
#single-product .product-image-container img {
  border-radius: var(--r-media);
  overflow: hidden;
}

.item-product .item-image,
.js-item-product .item-image,
.item-product .js-product-item-image-container,
.js-item-product .js-product-item-image-container {
  border-radius: var(--r-media);
  overflow: hidden;
}

/* La foto de adentro también, por si el contenedor no recorta en algún
   navegador viejo. */
.item-product .item-image img,
.js-item-product .item-image img {
  border-radius: inherit;
}

/* ── 2. Videos del home ────────────────────────────────────────────────
   Traían border-radius 0 escrito con peso propio en el snippet, así que
   hace falta ganarle. */
.an-reel,
.an-reels__scroll .an-reel {
  border-radius: var(--r-media) !important;
  overflow: hidden;
}

.an-reel img {
  border-radius: inherit;
}

/* La ventana del video, cuando se abre. */
.an-reels-modal__box,
.an-product-social-modal__box {
  border-radius: var(--r-media);
  overflow: hidden;
}

/* Y las fotos de los productos que aparecen dentro de esa ventana. */
.an-reels-product__img {
  border-radius: var(--r-media-sm);
}

/* ── 3. Reseñas ────────────────────────────────────────────────────────
   El widget de Revie arma sus tarjetas con clases propias; se toman las que
   envuelven una reseña para no depender de una sola. */
.anhelo-home-reviews .tm-revie-review,
.anhelo-reviews-page .tm-revie-review,
#revie-tn-widget .tm-revie-review,
#revie-tn-widget .tm-revie-prod,
.an-product-reviews .tm-revie-review,
.tm-revie-product {
  border-radius: var(--r-media);
  overflow: hidden;
}

/* La foto del producto dentro de una reseña es más chica, así que le
   corresponde el radio chico: un 16 en una miniatura de 68px se come la
   esquina entera. */
#revie-tn-widget .tm-revie-product img,
.tm-revie-review img {
  border-radius: var(--r-media-sm);
}

/* ── 4. La tarjeta de compra flotante ──────────────────────────────────
   Es una capa que flota sobre las fotos del producto: le toca el radio de
   hoja, que es el de las capas, y no el de media. */
.an-buycard {
  border-radius: var(--r-sheet);
  overflow: hidden;
}

/* ── 5. Los círculos de categoría, con vidrio ──────────────────────────

   Eran un disco con un borde negro de 2px. El borde duro competía con la
   foto de adentro y hacía que once círculos en fila se leyeran como once
   marcos, no como once prendas.

   Ahora el borde es un anillo de luz —claro arriba, oscuro abajo— que es lo
   que hace que un objeto de vidrio parezca tener volumen. La foto sigue
   siendo lo único con color. */
.an-circles__media {
  border-color: rgba(22, 22, 22, .12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(0, 0, 0, .06),
    0 4px 14px rgba(0, 0, 0, .10);
  transition: box-shadow var(--an-fast, .22s) var(--an-ease),
              transform var(--an-fast, .22s) var(--an-ease);
}

@media (hover: hover) and (pointer: fine) {
  .an-circles__item:hover .an-circles__media {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      inset 0 -1px 0 rgba(0, 0, 0, .08),
      0 8px 22px rgba(0, 0, 0, .16);
    transform: translateY(-2px);
  }
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  /* El anillo de vidrio: un aro por fuera de la foto que toma lo que hay
     detrás. Se hace con ::after para no tocar las dos capas de foto que el
     script ya mete adentro del círculo. */
  .an-circles__media::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 2;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(circle, transparent calc(100% - 5px), #000 calc(100% - 4px));
    pointer-events: none;
  }
}

/* ── 6. Los títulos del home ───────────────────────────────────────────

   Los tres bloques —colecciones, en movimiento, bestsellers— tenían tres
   tamaños distintos (34, 24 y 28) y tres pesos parecidos pero no iguales.
   Puestos uno abajo del otro en la misma página, eso no se lee como ritmo:
   se lee como que cada sección la hizo otra persona.

   Se unifican en una sola escala y se les da más presencia. El texto de
   apoyo sube ARRIBA del título como etiqueta, que es lo que le da aire
   editorial: primero la categoría, después el nombre grande. */
.template-home .an-reels__title,
.template-home .an-collections__title,
.template-home .an-product-rail .an-home-products-title,
.template-home .an-product-rail .section-title .h5,
.template-home .an-product-rail .section-title h2 {
  font-size: clamp(28px, 3.8vw, 46px) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
  text-transform: uppercase !important;
  text-wrap: balance;
}

/* La línea de apoyo pasa a etiqueta: arriba, chica, espaciada y en mono.
   El column-reverse es lo que la sube sin tocar el marcado. */
.template-home .an-reels__head > div:first-child {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
}

.template-home .an-reels__sub {
  margin: 0 !important;
  color: var(--an-muted) !important;
  font-family: var(--an-technical-font, ui-monospace, monospace);
  font-size: 11px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Una línea fina debajo de cada cabecera. Separa la sección de su carrusel
   sin meter un bloque nuevo, y es el mismo recurso en las tres. */
.template-home .an-reels__head,
.template-home .an-collections__head,
.template-home .an-product-rail .an-home-products-head,
.template-home .an-product-rail .section-title {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--an-line);
}

/* Con la línea abajo, el margen que traían sobra. */
.template-home .an-reels__head { margin-bottom: 22px; }

@media (max-width: 767px) {
  .template-home .an-reels__title,
  .template-home .an-collections__title,
  .template-home .an-product-rail .an-home-products-title,
  .template-home .an-product-rail .section-title .h5,
  .template-home .an-product-rail .section-title h2 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .template-home .an-reels__sub { font-size: 10px !important; }
}

/* ── 7. El carrito, un poco menos raro ─────────────────────────────────

   El vidrio estaba al 86% y con mucho desenfoque: sobre una grilla de fotos
   quedaba una mancha de color detrás del texto que no se terminaba de leer
   ni como fondo ni como transparencia. Al 94% se conserva que se note que
   hay algo atrás, pero el panel vuelve a leerse como una superficie sólida,
   que es lo que tiene que ser cuando estás por pagar. */
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  #modal-cart {
    background: rgba(248, 245, 246, .94) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    backdrop-filter: blur(28px) saturate(1.2);
  }
}

/* Las fotos de los productos del carrito acompañan el redondeo general. */
#modal-cart .cart-item-image img,
#modal-cart .js-cart-item img {
  border-radius: var(--r-media-sm);
}

/* ── 8. Las etiquetas sobre la foto, revisadas ─────────────────────────

   En v34 se las mandó a radio cero para que acompañaran a la foto, que en ese
   momento tenía la esquina viva. Ahora la foto es redondeada, así que un
   rectángulo duro encima vuelve a ser el elemento que desentona, solo que al
   revés.

   Pasan a cápsula: son chips informativos —"sin stock", "30% off"— y un chip
   es de las pocas cosas que nunca se lee mal en forma de pastilla. */
.js-labels-floating-group .label,
.js-stock-label-private,
.js-offer-label-private,
.js-shipping-label-private,
.js-free-shipping-minimum-label,
.item-product .label,
.js-item-product .label,
.preorder-label-list,
.preorder-label {
  border-radius: var(--r-capsule) !important;
  padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v36 — CORRECCIONES DEL BARRIDO
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Reseñas: el contenedor correcto ────────────────────────────────

   En v35 redondeé `.tm-revie-review` y `.tm-revie-product` y les puse recorte.
   Ninguno de los dos es la tarjeta: `.tm-revie-review` es la fila interna que
   reparte el texto y la foto. Al recortarla, los nombres quedaron cortados por
   la izquierda —la "T" de Tomas, la "N" de Nelida— y la tarjeta siguió
   cuadrada, porque el borde lo dibuja otro elemento.

   La tarjeta de verdad es `.tt-rev-it`, y traía `border-radius: 0 !important`
   escrito a mano en el estilo del widget, que es lo que había que cambiar. */
.anhelo-home-reviews #revie-tn-widget .tm-revie-review,
.anhelo-reviews-page #revie-tn-widget .tm-revie-review,
#revie-tn-widget .tm-revie-review,
#revie-tn-widget .tm-revie-prod,
.an-product-reviews .tm-revie-review,
.tm-revie-product {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* La tarjeta, ahora sí. */
#revie-tn-widget .tt-rev-it,
.anhelo-home-reviews #revie-tn-widget .tt-rev-it,
.anhelo-reviews-page #revie-tn-widget .tt-rev-it,
.an-product-reviews .tt-rev-it {
  border-radius: var(--r-media) !important;
}

/* La foto de la reseña va adentro de la tarjeta, pegada al borde: necesita el
   redondeo del lado que toca. El recorte va acá, donde no hay texto que
   cortar. */
#revie-tn-widget .tm-rev-img,
#revie-tn-widget .tm-rev-img .imgTest,
#revie-tn-widget .tm-rev-img-prod {
  border-radius: var(--r-media-sm) !important;
  overflow: hidden !important;
}

/* ── 2. La tarjeta de producto, entera ─────────────────────────────────

   Se veía redondeada arriba y cuadrada abajo, y no era la foto: el bloque del
   nombre y el precio que va justo debajo tiene el MISMO fondo crema y no tenía
   redondeo. Los dos juntos se leen como un solo bloque gris, así que el de
   arriba redondeaba y el de abajo cortaba en seco.

   Se resuelve repartiendo el radio entre los dos: arriba el de la foto, abajo
   el del texto. El conjunto queda como una tarjeta sola. */
.item-product .js-product-item-image-container,
.js-item-product .js-product-item-image-container,
.item-product .js-product-item-image-container-private,
.js-item-product .js-product-item-image-container-private,
.item-product .item-image,
.js-item-product .item-image {
  border-radius: var(--r-media) var(--r-media) 0 0 !important;
}

.item-product .js-item-description,
.js-item-product .js-item-description,
.item-product .item-description,
.js-item-product .item-description {
  border-radius: 0 0 var(--r-media) var(--r-media);
}

/* ── 3. Los chips que quedaron con la estética vieja ───────────────────

   "Últimas unidades" y "No vuelve" los dibuja el sistema de escasez, que tiene
   sus propias clases y no entró en el barrido anterior. Son chips sobre la
   foto, igual que las etiquetas de stock: mismo tratamiento. */
.an-card-scarcity,
.an-no-restock,
.an-no-restock__texto,
[class*="scarcity"] {
  border-radius: var(--r-capsule) !important;
}

.an-card-scarcity {
  padding: 4px 10px !important;
}

/* ── 4. Los botones que seguían cuadrados ──────────────────────────────

   El sistema traía una regla base que le ponía `border-radius: 0 !important` a
   TODO lo que fuera `.btn`. En v33 se hizo una lista de botones para pasarlos a
   cápsula, pero la regla base seguía ahí y cualquiera que no estuviera en la
   lista quedaba cuadrado. Así quedó "Mostrar más reseñas", que usa la clase
   `.icon-Testimoniales`.

   Ahora que la dirección es que todo se redondee, la regla base cambia de lado
   y la lista deja de hacer falta. */
.btn,
.btn-primary,
.btn-default,
.btn-secondary,
.icon-Testimoniales,
.anhelo-home-reviews .icon-Testimoniales,
#revie-tn-widget .icon-Testimoniales,
button.btn,
input[type="submit"].btn {
  border-radius: var(--r-capsule) !important;
}

/* ── 5. La etiqueta de las secciones del home ──────────────────────────

   Estaba en tipografía monoespaciada. Es un recurso que se usa para datos
   técnicos y acá no hay ningún dato técnico: es la bajada de un título de una
   tienda de ropa. Desentonaba con el resto del sitio, que es todo Karla.

   Vuelve a la tipografía del sitio. Se mantiene chica, en mayúsculas y con
   espaciado, que es lo que la hace funcionar como etiqueta y no como párrafo. */
.template-home .an-reels__sub {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--an-muted) !important;
}

@media (max-width: 767px) {
  .template-home .an-reels__sub { font-size: 10px !important; }
}

/* ── 6. Los dos grises de la tarjeta ───────────────────────────────────

   Medido: el bloque de la foto usa #f5f4f2 y el del nombre y el precio, que va
   pegado abajo, usa #f8f5f6. Dos grises que por separado nadie distingue, pero
   que compartiendo un borde dejan un escalón visible justo en el medio de la
   tarjeta.

   Los tokens ya mandaban el contenedor de la foto al crema del sistema, pero
   apuntaban a `.js-product-item-image-container` y la clase que trae el tema es
   `...-container-private`, con sufijo. Por eso nunca aplicó. */
.js-product-item-image-container-private,
.item-product .js-product-item-image-container-private,
.js-item-product .js-product-item-image-container-private,
.item-product .item-image,
.js-item-product .item-image {
  background-color: var(--an-paper) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v37 — EL TEXTO DE LOS BOTONES, CENTRADO DE VERDAD
   ═══════════════════════════════════════════════════════════════════════

   Medido en el botón "Comprar" de una tarjeta: caja de 76x44, texto de 54x13,
   con 5px de aire arriba y 26 abajo. El texto colgaba del techo.

   La causa es mía y es de manual. El sistema le pone a los botones una altura
   mínima de 42 o 44px para que cumplan el mínimo táctil, pero los botones son
   `inline-block`: la altura mínima estira la caja hacia abajo y el texto se
   queda donde estaba, arriba. Se ve como si estuviera descentrado porque LO
   ESTÁ, solo que en el eje que uno no mira primero.

   Le pasa a todos los botones que tengan menos texto que altura, que es la
   razón por la que no era el único.

   `inline-flex` con centrado en los dos ejes lo resuelve de raíz: la altura
   mínima sigue valiendo y el contenido queda en el medio, tenga una línea o
   dos, un ícono o ninguno.

   Los `input[type=submit]` quedan afuera a propósito: no tienen hijos, el
   navegador ya les centra el texto, y forzarles flex no hace nada bueno. */

.btn:not(input),
a.btn,
button.btn,
.btn-primary:not(input),
.btn-secondary:not(input),
.btn-default:not(input),
.icon-Testimoniales,
.js-quickshop-modal-open,
.item-actions .btn,
.an-collections__tab,
.btn-variant,
.js-insta-variant,
.an-sticky-buy__btn,
.js-gift-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Los que ocupan todo el ancho lo siguen haciendo: `inline-flex` no anula el
   ancho, pero sí hace falta que sigan comportándose como bloque cuando el tema
   se los pide. */
.btn.w-100,
.btn.btn-block,
.js-addtocart.w-100 {
  display: flex;
  width: 100%;
}

/* El botón de checkout lleva el candado como imagen de fondo y padding
   asimétrico calculado para eso. Con flex, el texto se centra respecto del
   espacio que queda, que es exactamente lo que se buscaba. */
#go-to-checkout,
.btn-primary[data-component="cart.checkout-button"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   v38 — EL DESPLEGABLE DE SHOP, EN VIDRIO
   ═══════════════════════════════════════════════════════════════════════

   Era el último panel flotante con la estética anterior: fondo blanco sólido,
   esquinas vivas y un borde gris de un píxel. Al lado del encabezado en
   pastilla se leía como una pieza de otro sitio.

   Una advertencia técnica que condiciona los valores: el desplegable vive
   DENTRO del encabezado, y el encabezado trae un `transform` heredado del tema
   que encierra el desenfoque en su propia capa (es el mismo motivo por el que
   el vidrio del encabezado se dibuja en una capa aparte). Acá no se puede sacar
   afuera sin romper el hover del menú.

   Por eso el tinte va al 90% y no al 72% del encabezado: si el navegador
   desenfoca, se ve vidrio; si el desenfoque queda encerrado, igual se ve una
   superficie translúcida prolija y el texto se lee perfecto. Nunca queda la
   foto nítida pasando por detrás de los nombres de categoría.
   ═══════════════════════════════════════════════════════════════════════ */

/* El contenedor es transparente y solo da aire: el padding de arriba separa el
   panel del link SHOP sin abrir un hueco en el que el mouse perdería el hover,
   porque ese padding sigue siendo parte del área del desplegable. */
.head-main .an-head-col--nav .desktop-dropdown,
.head-main .desktop-dropdown {
  padding-top: 10px;
  background: transparent !important;
  overflow: visible;
}

/* El panel. Material y forma, compartidos con el desplegable chico de idiomas. */
.head-main .an-head-col--nav .desktop-list-subitems,
.head-main .desktop-list-subitems,
.head-main .desktop-dropdown-small {
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 22px !important;
  background-color: rgba(248, 245, 246, .9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 18px 44px rgba(0, 0, 0, .14),
    0 2px 6px rgba(0, 0, 0, .05) !important;
}

/* Ancho minimo y entrada, SOLO en el panel de categorias.

   El desplegable chico de idiomas queda afuera a proposito: el tema lo centra
   con `left: 50%` + `transform: translateX(-50%)`. Si recibiera este
   translateY, el transform nuevo reemplazaria al del tema y el panel se
   correria medio ancho hacia la derecha. */
.head-main .an-head-col--nav .desktop-list-subitems,
.head-main .desktop-list-subitems {
  min-width: 220px;
  transform: translateY(-4px);
  transition: transform .28s var(--an-ease, ease);
}

/* Entra con un desplazamiento mínimo de cuatro píxeles, acompañando el fundido
   que ya trae el tema. Es el gesto de iOS al abrir un menú: el panel "cae" en
   su lugar en vez de aparecer de golpe. */
.head-main .nav-dropdown:hover .desktop-list-subitems,
.head-main .nav-main-item:hover .desktop-list-subitems,
.head-main .nav-dropdown-content:hover .desktop-list-subitems {
  transform: none;
}

/* Cada categoría es una fila tocable con su propia pastilla al pasar el mouse,
   en vez de texto suelto separado por aire. Así se ve dónde termina una opción
   y empieza la otra, y el panel se lee como una lista de controles. */
.head-main .desktop-list-subitems .nav-item {
  margin: 0 !important;
}

.head-main .desktop-list-subitems .nav-list-link {
  display: block;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px;
  color: var(--an-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  /* Con !important porque el tema fija `line-height: 1.1 !important` en
     todos los links del menu de escritorio (.nav-desktop-list .nav-list-link)
     y sin esto la fila quedaba apretada contra su pastilla. */
  line-height: 1.2 !important;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s var(--an-ease, ease);
}

.head-main .desktop-list-subitems .nav-list-link:hover,
.head-main .desktop-list-subitems .nav-list-link:focus-visible {
  background-color: rgba(22, 22, 22, .07);
  opacity: 1;
}

.head-main .desktop-list-subitems .nav-list-link.selected {
  background-color: rgba(22, 22, 22, .1);
}

/* El subrayado animado que llevan los links de la barra principal no va acá
   adentro: en una lista de pastillas compite con el fondo del hover. */
.head-main .desktop-list-subitems .nav-list-link::after {
  display: none !important;
}

/* Sub-niveles, si alguna categoría los tiene: sangrados y un punto más chicos,
   dentro del mismo panel. */
.head-main .desktop-list-subitems .list-subitems {
  margin: 2px 0 6px 10px !important;
  padding: 0 !important;
}

.head-main .desktop-list-subitems .list-subitems .nav-list-link {
  padding: 7px 14px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--an-ink-soft) !important;
}

/* La categoría en rojo de ofertas conserva su color: es a propósito. */
.head-main .desktop-list-subitems .nav-list-link[href*="/hot-sale/"] {
  color: #d83835 !important;
}

@media (prefers-reduced-motion: reduce) {
  .head-main .desktop-list-subitems,
  .head-main .desktop-list-subitems .nav-list-link {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v39 — EN MOVIMIENTO Y ANHELO FAM, CON EL MISMO LENGUAJE
   ═══════════════════════════════════════════════════════════════════════

   Las dos páginas traen su CSS escrito dentro de la propia plantilla, en un
   <style> que se imprime en el cuerpo de la página. Eso lo pone DESPUÉS de esta
   hoja en la cascada: a igual especificidad gana siempre la plantilla. Por eso
   cada regla de acá lleva `body` adelante, que suma especificidad sin depender
   del orden, y `!important` solo donde la plantilla escribió el valor con peso.

   Mismo sistema que el resto del sitio:
     16px    videos, fotos, tarjetas
     cápsula filtros, botones, chips, buscador
     26px    ventanas que se abren encima
     vidrio  todo lo que flota sobre una foto o sobre la página
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tarjetas de video y de comunidad ──────────────────────────────── */
body .an-motion-card,
body .an-fam-card {
  border-radius: var(--r-media, 16px) !important;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .3s var(--an-ease, ease), transform .3s var(--an-ease, ease);
}

@media (hover: hover) and (pointer: fine) {
  body .an-motion-card:hover,
  body .an-fam-card--shop:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    transform: translateY(-2px);
  }
}

body .an-motion-card img,
body .an-fam-card__image,
body .an-fam-card__video {
  border-radius: inherit;
}

/* ── Lo que flota SOBRE la foto: botón de play, chips, íconos ───────────

   Estaban dibujados con un borde blanco de un píxel sobre un fondo casi
   transparente. Sobre una foto clara no se veían; sobre una oscura parecían
   un recuadro de otro sitio. Pasan a vidrio oscuro: se leen en cualquier foto
   y son el mismo objeto que los controles del resto de la web. */
body .an-motion-card__play,
body .an-fam-card__media-label {
  border: 1px solid rgba(255, 255, 255, .45) !important;
  background: rgba(20, 20, 20, .28) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .22);
}

body .an-motion-card__play {
  width: 52px;
  height: 52px;
}

body .an-motion-card__products,
body .an-fam-card__badge {
  padding: 5px 10px !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: var(--r-capsule, 999px) !important;
  background: rgba(20, 20, 20, .3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .07em;
  text-shadow: none;
}

/* "Disponible" se invierte: chip blanco sólido, el único con peso propio. */
body .an-fam-card__badge--available {
  border-color: rgba(255, 255, 255, .9) !important;
  background: rgba(255, 255, 255, .92);
  color: #111;
}

/* Los textos sobre la foto: el degradado de abajo se suaviza para que no
   compita con los chips de vidrio. */
body .an-motion-card__shade,
body .an-fam-card__shade {
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}

/* ── Títulos de página ─────────────────────────────────────────────────
   Misma escala y mismo peso que los títulos del home, así la navegación
   entre las tres se lee como un solo sitio. */
body .an-motion-page__title,
body .an-fam--archive .an-fam__title {
  font-family: inherit;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  line-height: .92 !important;
  text-transform: uppercase;
  text-wrap: balance;
}

body .an-fam--archive .an-fam__title {
  font-size: clamp(34px, 5vw, 64px) !important;
}

body .an-motion-page__eyebrow {
  color: var(--an-muted, #707070);
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

body .an-fam__sub {
  color: var(--an-muted, #707070) !important;
  font-size: 13px !important;
}

body .an-fam__all {
  padding: 8px 16px !important;
  border: 1px solid rgba(22, 22, 22, .18) !important;
  border-radius: var(--r-capsule, 999px);
}

body .an-fam__all:hover {
  border-color: #161616 !important;
  background: #161616;
  color: #fff !important;
}

/* Los números del resumen de En Movimiento, como fichas de vidrio. */
body .an-motion-page__summary {
  gap: 10px !important;
}

body .an-motion-page__stat {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-media-sm, 12px);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .05);
}

/* ── Controles de la barra de En Movimiento ────────────────────────────── */
body .an-motion-page__filter {
  min-height: 38px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(22, 22, 22, .16) !important;
  border-radius: var(--r-capsule, 999px) !important;
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 10px !important;
}

body .an-motion-page__filter.is-active,
body .an-motion-page__filter:hover {
  border-color: #161616 !important;
  background: #161616 !important;
  color: #fff !important;
}

/* El buscador era una línea sobre el fondo. Pasa a campo en cápsula de
   vidrio, como el buscador del encabezado. */
body .an-motion-page__search input {
  height: 42px !important;
  padding: 0 44px 0 18px !important;
  border: 1px solid rgba(22, 22, 22, .14) !important;
  border-radius: var(--r-capsule, 999px) !important;
  background: rgba(255, 255, 255, .6) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  font-size: 13px !important;
}

body .an-motion-page__search input:focus {
  border-color: #161616 !important;
  background: rgba(255, 255, 255, .85) !important;
}

body .an-motion-page__search svg {
  right: 16px !important;
}

body .an-motion-page__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-capsule, 999px) !important;
  font-size: 10px !important;
}

/* ── Las ventanas que se abren al tocar una tarjeta ──────────────────── */
body .an-motion-modal,
body .an-fam-modal {
  background: rgba(10, 10, 10, .55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body .an-motion-modal__box,
body .an-fam-modal__box {
  border-radius: var(--r-sheet, 26px) !important;
  background: rgba(248, 245, 246, .96) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

/* El video y la foto de la ventana acompañan el redondeo por su lado de
   afuera: en escritorio van a la izquierda, en celular arriba. */
body .an-motion-modal__video,
body .an-fam-modal__media {
  border-radius: var(--r-sheet, 26px) 0 0 var(--r-sheet, 26px);
}

/* Cerrar: botón circular de vidrio. Estaba en blanco sólido y cuadrado,
   pegado a la esquina de un video oscuro. */
body .an-motion-modal__close,
body .an-fam-modal__close {
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px rgba(0, 0, 0, .14);
  font-size: 22px !important;
  line-height: 1;
}

body .an-motion-product__img,
body .an-fam-product__img {
  border-radius: var(--r-media-sm, 12px);
}

body .an-motion-product,
body .an-fam-product {
  border-top-color: rgba(22, 22, 22, .08) !important;
}

@media (max-width: 767px) {
  body .an-motion-page__summary {
    flex-wrap: wrap;
  }

  body .an-motion-card__play {
    width: 42px;
    height: 42px;
  }

  body .an-motion-card__products,
  body .an-fam-card__badge {
    padding: 4px 8px !important;
    font-size: 8px !important;
  }

  /* En celular la ventana apila video y texto: el redondeo del video pasa
     a ser el de arriba. */
  body .an-motion-modal__box,
  body .an-fam-modal__box {
    border-radius: var(--r-sheet, 26px) !important;
  }

  body .an-motion-modal__video,
  body .an-fam-modal__media {
    border-radius: var(--r-sheet, 26px) var(--r-sheet, 26px) 0 0;
  }

  body .an-motion-modal__close {
    position: fixed !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .an-motion-card,
  body .an-fam-card {
    transition: none !important;
    transform: none !important;
  }
}

/* Los esqueletos que se ven mientras cargan los videos y las publicaciones:
   con la misma forma que la tarjeta que los va a reemplazar, para que al
   llegar el contenido no cambie el contorno. */
body .an-motion-page__grid .an-skeleton,
body .an-fam__grid .an-skeleton {
  border-radius: var(--r-media, 16px) !important;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   v40 — HOME NUEVO
   ═══════════════════════════════════════════════════════════════════════
   Banner con productos flotando · Bestsellers en negro · Completá tu look.
   Aprobado por Facundo sobre el boceto del 15 de septiembre de 2026.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Bandeja de productos sobre el banner ───────────────────────────── */

.an-hero-tray {
  position: absolute;
  right: var(--an-gutter, 32px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(290px, 28vw);
  /* Se apoya en la misma línea que el título del banner: el borde inferior de
     la franja visible, no el del banner, que suele quedar fuera de pantalla. */
  top: min(100%, calc(100svh - var(--an-hero-top, 60px)));
  padding-bottom: 52px;
  transform: translateY(-100%);
  pointer-events: auto;
}

/* Oculta hasta que llegan los productos de la categoría: display:flex de
   arriba le ganaría al atributo hidden. */
.an-hero-tray[hidden] {
  display: none !important;
}

.an-hero-tray__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.an-hero-tray__card,
.an-hero-tray__all {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  color: var(--an-ink, #161616);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 10px 28px rgba(0, 0, 0, .2);
  transition: transform .25s var(--an-ease, ease), box-shadow .25s var(--an-ease, ease);
}

.an-hero-tray__card {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding: 7px 14px 7px 7px;
  background: rgba(248, 245, 246, .86);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .an-hero-tray__card {
    background: rgba(248, 245, 246, .72);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
}

/* La foto entera, en 2:3: la misma proporción de las tarjetas de producto. */
.an-hero-tray__img {
  display: block;
  width: 44px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 11px;
  background: #f5f4f2;
}

.an-hero-tray__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.an-hero-tray__info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.an-hero-tray__name {
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.an-hero-tray__price {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.an-hero-tray__arrow {
  font-size: 15px;
}

.an-hero-tray__all {
  grid-template-columns: 1fr auto;
  padding: 13px 16px;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(22, 22, 22, .8);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .an-hero-tray__card:hover,
  .an-hero-tray__all:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 16px 34px rgba(0, 0, 0, .26);
  }
}

/* Debajo de 1024 la bandeja a la derecha pisaría el título. Pasa a una fila
   deslizable al pie del banner, y el botón del banner se esconde: la última
   tarjeta ya lleva a la colección y no entran las dos cosas sin tapar la foto. */
@media (max-width: 1023px) {
  .an-hero-tray {
    right: 0;
    left: 0;
    width: auto;
    flex-direction: row;
    gap: 8px;
    padding: 0 14px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .an-hero-tray::-webkit-scrollbar { display: none; }

  .an-hero-tray__list {
    flex: none;
    flex-direction: row;
  }

  .an-hero-tray__card,
  .an-hero-tray__all {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .an-hero-tray__card {
    width: 236px;
  }

  .an-hero-tray__all {
    width: 150px;
    grid-template-columns: 1fr;
    gap: 6px;
    white-space: normal;
  }

  .an-hero__overlay--with-products .an-hero__inner {
    padding-bottom: 104px;
  }

  .an-hero__overlay--with-products .an-hero__actions {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .an-hero-tray__card,
  .an-hero-tray__all {
    transition: none;
  }
}

/* ── 2. Bestsellers: la sección principal ──────────────────────────────── */

body .an-best {
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 72px);
  background: #161616;
  color: #fff;
}

body .template-home .an-best .an-home-products-head,
body .an-best .an-home-products-head {
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}

body .an-best .an-home-products-title,
body.template-home .an-best .an-home-products-title {
  color: #fff !important;
}

body .an-best .an-home-products-link {
  color: #fff !important;
  border-color: #fff !important;
}

.an-best__eyebrow {
  width: 100%;
  margin: 0 0 8px;
  color: #b9b4ae;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Primera versión: grilla con el N° 1 ocupando dos filas. Facundo la vio
   subida y quedó demasiado grande (más de una pantalla y media a 1440px).
   Ahora: una sola fila de cinco en escritorio, que entra en una pantalla, y
   debajo de 1024px el carrusel deslizable de siempre. El peso lo dan el fondo
   negro y el ranking, no el tamaño. */
body .an-best .js-products-featured-grid,
body .an-best .an-native-product-viewport > .swiper-wrapper {
  counter-reset: an-best;
}

html body .an-best .js-products-featured-grid > *,
html body.template-home .section-featured-home.an-best .an-native-product-viewport > .swiper-wrapper > .swiper-slide {
  position: relative;
  counter-increment: an-best;
}

@media (min-width: 1024px) {
  body .an-best .an-native-product-viewport {
    overflow: visible !important;
  }

  body .an-best .js-products-featured-grid,
  body .an-best .an-native-product-viewport > .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px !important;
    width: auto !important;
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 0 var(--an-gutter, 32px) !important;
    transform: none !important;
  }

  /* Especificidad alta a propósito: las reglas del carrusel le dan a cada
     tarjeta un ancho de 1/5 del contenedor con html body.template-home
     delante. Medido en vivo: sin esto, en la grilla quedaban de 60px. */
  html body .an-best .js-products-featured-grid > *,
  html body.template-home .section-featured-home.an-best .an-native-product-viewport > .swiper-wrapper > .swiper-slide {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .an-best .js-products-featured-grid > :nth-child(n+6) {
    display: none !important;
  }

  body .an-best .an-native-product-prev,
  body .an-best .an-native-product-next {
    display: none !important;
  }
}

/* El puesto en el ranking sale del orden real de la categoría Bestsellers:
   es un contador de CSS, así sigue al script que reordena las tarjetas. Va
   arriba a la derecha porque arriba a la izquierda viven las etiquetas de
   stock ("últimas unidades", "sin stock"). */
body .an-best .js-products-featured-grid > *::before {
  content: counter(an-best);
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(20, 20, 20, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  pointer-events: none;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  body .an-best .js-products-featured-grid > *::before {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

body .an-best .js-products-featured-grid > :first-child::before {
  content: counter(an-best) "  ·  MÁS VENDIDO";
  background: rgba(255, 255, 255, .92);
  color: #161616;
}


/* ── 2b. Bestsellers en vidrio y con menos aire (v43) ─────────────────────
   Pedido de Facundo con captura: mucho espacio entre Bestsellers y los
   círculos, y las tarjetas se veían como fichas opacas sobre el negro.

   Medido en vivo a 1905px:
   · 72px de relleno abajo de Bestsellers + 52px arriba de los círculos.
   · Cada tarjeta reservaba 60px para el botón "Comprar", que está oculto
     hasta pasar el mouse: el pie de la tarjeta quedaba vacío.

   El vidrio necesita algo detrás para refractar: sobre negro plano un blanco
   translúcido es solo gris. Por eso el fondo lleva dos luces suaves. */

html body .an-best {
  padding-top: clamp(40px, 4vw, 60px) !important;
  padding-bottom: clamp(28px, 3vw, 44px) !important;
  /* El tema le da 70px de margen abajo a las secciones de productos: con el
     fondo negro se leía como un hueco blanco antes de los círculos. */
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(255, 255, 255, .11), transparent 62%),
    radial-gradient(50% 70% at 90% 100%, rgba(255, 255, 255, .08), transparent 60%),
    #111 !important;
}

html body .an-best + .an-circles {
  padding-top: clamp(18px, 2.4vw, 30px);
}

/* Tarjeta: la misma ficha clara del resto del sitio, sobre el fondo negro.

   La primera versión hacía la tarjeta entera de vidrio translúcido, con el
   texto en blanco. Sobre el negro se perdían las estrellas de las reseñas, el
   precio con transferencia y las cuotas (Facundo, 18 de septiembre de 2026).

   Lo negro es el FONDO de la sección, que es lo que le da el peso visual. La
   tarjeta vuelve al crema del resto del catálogo, así la letra chica se lee
   igual que en cualquier otra parte del sitio. */
html body.template-home .section-featured-home.an-best .js-item-product {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: var(--an-paper, #f8f5f6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .3s var(--an-ease, ease), border-color .3s var(--an-ease, ease);
}

html body.template-home .section-featured-home.an-best .js-product-item-image-container-private {
  border-radius: 0 !important;
}

/* El bloque de abajo, del mismo color que la foto: la tarjeta se lee como una
   sola pieza y no como dos rectángulos pegados. */
html body.template-home .section-featured-home.an-best .item-description {
  position: relative;
  padding: 14px 16px 16px !important;
  background: var(--an-paper, #f8f5f6) !important;
}

/* "Comprar": cápsula de vidrio claro que aparece sobre el pie de la foto al
   pasar el mouse, en vez de reservar un hueco vacío debajo del precio. */
@media (min-width: 1024px) and (hover: hover) {
  html body.template-home .section-featured-home.an-best .item-actions {
    position: absolute;
    right: 14px;
    bottom: calc(100% + 14px);
    left: 14px;
    margin: 0 !important;
  }

  html body.template-home .section-featured-home.an-best .item-actions .btn {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .78) !important;
    color: #161616 !important;
    box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0, 0, 0, .2);
  }

  html body.template-home .section-featured-home.an-best .js-item-product:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .3);
  }
}

@media (min-width: 1024px) and (hover: hover) {
  @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    html body.template-home .section-featured-home.an-best .item-actions .btn {
      background: rgba(255, 255, 255, .6) !important;
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
      backdrop-filter: blur(16px) saturate(1.6);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.template-home .section-featured-home.an-best .js-item-product {
    transition: none;
  }
}

/* ── 2c. Reseñas en vidrio, home y página de reseñas (v44) ────────────────
   Facundo marcó que las reseñas seguían con el diseño viejo. Medido en vivo
   en el home Y en /reviews: tarjeta con radio 0, borde gris #e6e6e6, fondo
   blanco plano y "Mostrar más reseñas" cuadrado y negro.

   Por qué no aplicaba lo de v36: home-reviews-style.tpl y la página de reseñas
   traen su propio <style> dentro de la plantilla, con
   `.anhelo-home-reviews #revie-tn-widget .tt-rev-it { border-radius: 0 !important }`.
   Se imprime después de este archivo y, a igual peso, gana el último.

   La solución es el id repetido (#revie-tn-widget#revie-tn-widget): vale
   como dos ids y le gana a cualquier selector de la plantilla, que tiene uno,
   sin importar cuántas clases sume. Con eso no hace falta tocar plantillas. */

html body .anhelo-home-reviews,
html body .anhelo-reviews-page {
  background:
    radial-gradient(55% 60% at 8% 0%, rgba(22, 22, 22, .05), transparent 62%),
    radial-gradient(45% 60% at 96% 100%, rgba(22, 22, 22, .04), transparent 60%),
    var(--an-paper, #f8f5f6) !important;
}

:is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tt-rev-it {
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .66) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(22, 22, 22, .04),
    0 14px 34px rgba(22, 22, 22, .07) !important;
  transition: transform .3s var(--an-ease, ease), box-shadow .3s var(--an-ease, ease) !important;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  :is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tt-rev-it {
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
}

@media (hover: hover) and (pointer: fine) {
  :is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tt-rev-it:hover {
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 4px rgba(22, 22, 22, .04),
      0 20px 44px rgba(22, 22, 22, .1) !important;
  }
}

:is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tm-revie-hr {
  border-top-color: rgba(22, 22, 22, .08) !important;
}

:is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tm-rev-img .imgTest {
  border-radius: 14px !important;
}

:is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tm-rev-img-prod,
:is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tm-rev-img-prod img {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .8) !important;
}

/* "Mostrar más reseñas": cápsula de vidrio oscuro, como los botones del resto
   del sitio. */
:is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .icon-Testimoniales {
  min-height: 46px;
  padding: 0 28px !important;
  border: 1px solid rgba(22, 22, 22, .9) !important;
  border-radius: 999px !important;
  background: rgba(22, 22, 22, .88) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(22, 22, 22, .16) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.anhelo-home-reviews, .anhelo-reviews-page) #revie-tn-widget#revie-tn-widget .tt-rev-it {
    transition: none !important;
  }
}

/* ── 3. Completá tu look ───────────────────────────────────────────────── */

.an-look {
  padding: clamp(40px, 5vw, 64px) var(--an-gutter, 32px);
}

.an-look[hidden] {
  display: none;
}

.an-look__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.an-look__head {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--an-line, #deddd9);
}

.an-look__eyebrow {
  margin: 0 0 8px;
  color: var(--an-muted, #707070);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.an-look__title {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.an-look__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.an-look__card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 14px;
  border-radius: 22px;
  background: var(--an-white, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.an-look__card.an-skeleton {
  min-height: 420px;
}

.an-look__photos {
  display: grid;
  align-items: center;
  gap: 8px;
}

.an-look__photos--2 { grid-template-columns: 1fr auto 1fr; }
.an-look__photos--3 { grid-template-columns: 1fr auto 1fr auto 1fr; }

/* Enteras, en 2:3. Esta es la regla que no se negocia. */
.an-look__photo {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--r-media-sm, 12px);
  background: #f5f4f2;
}

.an-look__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.an-look__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--an-paper, #f8f5f6);
  font-weight: 800;
}

.an-look__items {
  display: grid;
  gap: 12px;
}

.an-look__item {
  display: grid;
  gap: 7px;
}

.an-look__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.an-look__name {
  color: var(--an-ink-soft, #595959);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}

.an-look__price {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.an-look__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.an-look__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(22, 22, 22, .18);
  border-radius: 999px;
  background: transparent;
  color: var(--an-ink, #161616);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.an-look__size:hover {
  border-color: #161616;
}

.an-look__size.is-active {
  border-color: #161616;
  background: #161616;
  color: #fff;
}

.an-look__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.an-look__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #e7efe8;
  color: #2f6b3a;
  font-size: 10.5px;
  font-weight: 700;
}

.an-look__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--an-line, #deddd9);
}

.an-look__total {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.an-look__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.an-look__cta:disabled {
  background: rgba(22, 22, 22, .12);
  color: rgba(22, 22, 22, .55);
  cursor: default;
}

@media (max-width: 767px) {
  .an-look {
    padding-right: 12px;
    padding-left: 12px;
  }

  .an-look__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .an-look__title {
    font-size: clamp(24px, 8vw, 32px);
  }

  .an-look__foot {
    flex-wrap: wrap;
  }

  .an-look__cta {
    flex: 1 1 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v45 — COMPLETÁ TU LOOK EN VIDRIO
   ═══════════════════════════════════════════════════════════════════════
   Pedido de Facundo: más estética liquid glass. Mismo lenguaje que las
   reseñas (v44): fondo crema con dos sombras suaves para que el vidrio se
   distinga, tarjeta de vidrio claro, controles en cápsula.

   Estas reglas van al final y con `html body` delante para ganarle a las del
   bloque v40 sin tocarlas. Las fotos siguen enteras en 2:3: no se recorta nada. */

html body .an-look {
  background:
    radial-gradient(50% 60% at 6% 0%, rgba(22, 22, 22, .05), transparent 62%),
    radial-gradient(45% 55% at 96% 100%, rgba(22, 22, 22, .045), transparent 60%),
    var(--an-paper, #f8f5f6);
}

html body .an-look__head {
  border-bottom-color: rgba(22, 22, 22, .1);
}

html body .an-look__card {
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(22, 22, 22, .04),
    0 16px 38px rgba(22, 22, 22, .07);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  html body .an-look__card {
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
  }
}

/* Mientras llegan los combos: el mismo vidrio con un brillo que pasa, en vez
   de un bloque gris quieto que parece roto. */
html body .an-look__card.an-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 460px;
}

html body .an-look__card.an-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: an-look-brillo 1.4s ease-in-out infinite;
}

@keyframes an-look-brillo {
  to { transform: translateX(100%); }
}

html body .an-look__photo {
  border-radius: 16px;
  background: #f5f4f2;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .04);
}

html body .an-look__plus {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(22, 22, 22, .08);
  font-size: 14px;
}

html body .an-look__size {
  border-color: rgba(22, 22, 22, .12);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: background-color .2s var(--an-ease, ease), border-color .2s var(--an-ease, ease), color .2s var(--an-ease, ease);
}

@media (hover: hover) and (pointer: fine) {
  html body .an-look__size:hover {
    border-color: rgba(22, 22, 22, .4);
    background: rgba(255, 255, 255, .9);
  }
}

html body .an-look__size.is-active {
  border-color: rgba(22, 22, 22, .9);
  background: rgba(22, 22, 22, .88);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px rgba(22, 22, 22, .16);
}

html body .an-look__chip {
  border: 1px solid rgba(47, 107, 58, .16);
  background: rgba(231, 239, 232, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

html body .an-look__foot {
  border-top-color: rgba(22, 22, 22, .08);
}

html body .an-look__cta {
  min-height: 46px;
  border: 1px solid rgba(22, 22, 22, .9);
  background: rgba(22, 22, 22, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(22, 22, 22, .16);
}

html body .an-look__cta:disabled {
  border-color: rgba(22, 22, 22, .1);
  background: rgba(255, 255, 255, .5);
  color: rgba(22, 22, 22, .5);
  box-shadow: inset 0 1px 0 #fff;
}

@media (prefers-reduced-motion: reduce) {
  html body .an-look__card.an-skeleton::after { animation: none; }
  html body .an-look__size { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v46 — PRE-ORDER: SIN PROMESA DE DESPACHO EN 24 H
   ═══════════════════════════════════════════════════════════════════════
   El bloque de compra muestra "En stock — despacho en 24 h hábiles" con el
   stock de Tiendanube. En un talle en pre-order eso contradecía al cartel de
   abajo, que dice que la entrega es a 20 días.

   La clase la pone el script de preventa del layout cuando el talle elegido
   no tiene entrega inmediata. Con entrega inmediata la línea vuelve. */
body .an-pdp-info.is-preorder-size .js-an-pdp-stock,
body .an-pdp-info.is-preorder-size .an-pdp-info__stock {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v47 — TALLES SOBRE LA TARJETA, LEGIBLES Y EN VIDRIO
   ═══════════════════════════════════════════════════════════════════════
   Facundo: "no se entiende y es feo, pero no está mal que esté".

   Qué tenía en contra, medido en la tarjeta:
   · tipografía monoespaciada de 10px, la que ya sacamos del resto del sitio;
   · el talle completo con su número de orden ("00 / XS 0 / S 1 / M"), que
     seguido se lee como una serie de números sueltos;
   · nada que dijera que eso son talles;
   · disponible y agotado se diferenciaban solo por un tachado gris claro.

   Ahora: la palabra "Talles" adelante, cápsula oscura en lo que hay y cápsula
   vacía tachada en lo que no, sobre una barra de vidrio. El texto corto lo
   arma anhelo-catalog-v5.js. Sigue apareciendo solo al pasar el mouse. */

@media (min-width: 1024px) and (hover: hover) {
  body .an-card-sizes {
    right: 10px;
    bottom: 10px;
    left: 10px;
    align-items: center;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(22, 22, 22, .12);
    transform: translateY(6px);
    transition: opacity .22s var(--an-ease, ease), transform .22s var(--an-ease, ease);
  }

  @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    body .an-card-sizes {
      background: rgba(255, 255, 255, .55);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      backdrop-filter: blur(20px) saturate(1.5);
    }
  }

  body .js-item-product:hover .an-card-sizes,
  body .js-item-product:focus-within .an-card-sizes {
    transform: none;
  }

  /* Sin esto la barra es una hilera de letras sueltas sobre la foto: nada
     dice que sean talles. */
  body .an-card-sizes::before {
    content: "Talles";
    margin-right: 2px;
    color: var(--an-muted, #707070);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  body .an-card-sizes__item {
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(22, 22, 22, .9);
    color: #fff;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body .an-card-sizes__item.is-agotado {
    border-color: rgba(22, 22, 22, .18);
    background: transparent;
    color: rgba(22, 22, 22, .38);
    text-decoration: line-through;
  }

  @media (prefers-reduced-motion: reduce) {
    body .an-card-sizes { transition: opacity .22s ease; transform: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v49 — MEMBERS EN VIDRIO
   ═══════════════════════════════════════════════════════════════════════
   La página había quedado afuera de todo el trabajo de vidrio: medido en vivo,
   cada bloque era un rectángulo #f2f1ee con radio 0 y sin sombra, y varios
   datos seguían en tipografía monoespaciada, la que ya sacamos del resto del
   sitio.

   Mismo lenguaje que las reseñas y Completá tu look: fondo crema con dos luces
   suaves, paneles de vidrio claro con borde blanco y brillo arriba, y controles
   en cápsula. Lo que ya era negro —el nivel alcanzado, las preguntas, el bloque
   de la prenda— sigue negro, ahora como vidrio oscuro.

   Las reglas llevan `html body` delante para ganarle a las de arriba sin
   tocarlas. */

html body .an-members {
  background:
    radial-gradient(50% 55% at 6% 0%, rgba(22, 22, 22, .05), transparent 62%),
    radial-gradient(45% 55% at 96% 100%, rgba(22, 22, 22, .04), transparent 60%),
    var(--an-paper, #f8f5f6);
}

/* ── Paneles de vidrio claro ─────────────────────────────────────────── */
html body .an-members__status,
html body .an-members__shipping,
html body .an-members__tier-card,
html body .an-members__step,
html body .an-members__earn-item,
html body .an-members__reward {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(22, 22, 22, .04),
    0 14px 34px rgba(22, 22, 22, .07);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  html body .an-members__status,
  html body .an-members__shipping,
  html body .an-members__tier-card,
  html body .an-members__step,
  html body .an-members__earn-item,
  html body .an-members__reward,
  html body .an-members__faq-item,
  html body .an-members__ficha-caja {
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
}

/* El estado del cliente era dos líneas horizontales sueltas. Pasa a ser el
   panel que abre la página. */
html body .an-members__status {
  padding: 22px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
}

html body .an-members__shipping {
  padding: 16px 18px 18px;
  border-radius: 18px;
}

/* ── Vidrio oscuro: nivel alcanzado, preguntas y bloque de la prenda ─── */
html body .an-members__tier-card.is-current {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(22, 22, 22, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 18px 40px rgba(22, 22, 22, .26);
}

html body .an-members__faq-item {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(22, 22, 22, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 26px rgba(22, 22, 22, .14);
}

html body .an-members__reward-media {
  background: rgba(22, 22, 22, .92);
}

/* ── Chips y etiquetas en cápsula ────────────────────────────────────── */
html body .an-members__reward-pts {
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

html body .an-members__tier-flag {
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--an-muted, #707070);
  opacity: 1;
}

html body .an-members__tier-card.is-current .an-members__tier-flag {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* La banda de la tasa deja de ser un bloque gris pegado y pasa a ser vidrio
   sobre el propio panel. */
html body .an-members__tier-rate {
  background: rgba(22, 22, 22, .05);
}

/* ── Controles ───────────────────────────────────────────────────────── */
html body .an-members__shipping-btn,
html body .an-members__cta,
html body .an-members__reward-btn,
html body .an-members-hero__btn,
html body .an-members__ficha-cerrar {
  border-radius: 999px;
}

html body .an-members__shipping-btn,
html body .an-members__cta,
html body .an-members__reward-btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(22, 22, 22, .9);
  background: rgba(22, 22, 22, .88);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(22, 22, 22, .16);
}

html body .an-members__shipping-btn:disabled,
html body .an-members__reward-btn:disabled {
  border-color: rgba(22, 22, 22, .1);
  background: rgba(255, 255, 255, .5);
  color: rgba(22, 22, 22, .5);
  box-shadow: inset 0 1px 0 #fff;
}

html body .an-members-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(0, 0, 0, .25);
}

html body .an-members-hero__btn.is-ghost {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  html body .an-members-hero__btn.is-ghost {
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
}

/* ── Barras de avance ────────────────────────────────────────────────── */
html body .an-members__bar,
html body .an-members__reward-bar {
  overflow: hidden;
  border-radius: 999px;
}

html body .an-members__bar-fill,
html body .an-members__reward-bar-fill {
  border-radius: 999px;
}

html body .an-members__reward-bar {
  height: 4px;
  margin: auto 14px 14px;
}

/* ── Tarjeta del premio: marco al alcance, sin el recuadro duro ──────── */
html body .an-members__reward.is-reachable {
  border-color: rgba(22, 22, 22, .85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 16px 36px rgba(22, 22, 22, .14);
}

html body .an-members__reward.is-clickable:hover {
  border-color: rgba(22, 22, 22, .5);
  box-shadow:
    inset 0 1px 0 #fff,
    0 20px 44px rgba(22, 22, 22, .12);
}

/* ── Ficha del premio ────────────────────────────────────────────────── */
html body .an-members__ficha {
  background: rgba(10, 10, 10, .45);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  html body .an-members__ficha {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

html body .an-members__ficha-caja {
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-sheet, 26px);
  background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 1px 0 #fff, 0 30px 70px rgba(0, 0, 0, .3);
}

html body .an-members__ficha-cerrar {
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(22, 22, 22, .1);
  background: rgba(255, 255, 255, .7);
  font-size: 22px;
}

/* ── Tipografía: se va la monoespaciada ──────────────────────────────
   Quedaba en el umbral de cada nivel, en "puntos disponibles", en el número de
   paso, en los puntos de cada premio y en la ficha. Mismo caso que ya
   corregimos en el home: en textos de marca se nota de más. */
html body .an-members__tier-min,
html body .an-members__points-l,
html body .an-members__step-n,
html body .an-members__earn-pts,
html body .an-members__reward-pts,
html body .an-members__reward-state,
html body .an-members__tier-flag,
html body .an-members__ficha-pts,
html body .an-members__label,
html body .an-members__shipping-count {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
   v50 — PRUEBA SOCIAL Y PASTILLA DE PRODUCTO EN LOS REELS
   ═══════════════════════════════════════════════════════════════════════
   Los dos bloques que Facundo aprobó del boceto del 18 de septiembre de 2026,
   tomados de la web que mandó como referencia:

   · la prueba social, como encabezado del bloque de reseñas del home;
   · la prenda adentro del video, en vez de tener que abrir la ventana.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Prueba social ──────────────────────────────────────────────────── */

.an-social {
  padding: clamp(28px, 4vw, 52px) clamp(14px, 2vw, 28px) 0;
  background: var(--an-paper, #f8f5f6);
}

.an-social__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 14px;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 26px;
  /* Negro con dos luces suaves: sobre negro plano, el vidrio de la cita y del
     botón se vería gris. Es el mismo recurso que en Bestsellers. */
  background:
    radial-gradient(60% 70% at 8% 0%, rgba(255, 255, 255, .1), transparent 60%),
    radial-gradient(50% 60% at 96% 100%, rgba(255, 255, 255, .07), transparent 58%),
    #111;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 60px rgba(13, 12, 11, .26);
  color: #fff;
}

.an-social--solo .an-social__panel {
  grid-template-columns: minmax(0, 1fr);
}

.an-social__num {
  margin: 0;
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

.an-social__titulo {
  margin: 10px 0 8px;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.an-social__texto {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, .66);
  font-size: 13.5px;
  line-height: 1.5;
}

.an-social__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 22px 0 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.an-social__dato strong {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.an-social__dato span {
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.an-social__estrellas {
  font-size: .62em;
  letter-spacing: .08em;
}

.an-social__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-capsule, 999px);
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--an-ease, ease), transform .2s var(--an-ease, ease);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .an-social__cta {
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}

@media (hover: hover) and (pointer: fine) {
  .an-social__cta:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
  }
}

.an-social__lateral {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}

.an-social__foto {
  aspect-ratio: 3 / 4;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: #2a2724;
}

.an-social__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Con una sola foto cargada, ocupa las dos columnas: media tarjeta suelta al
   costado se lee como un error de carga. */
.an-social__foto:only-of-type {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.an-social__cita {
  grid-column: 1 / -1;
  margin: 0;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  line-height: 1.45;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .an-social__cita {
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
  }
}

.an-social__cita .an-social__estrellas {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.an-social__cita cite {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

/* El bloque de reseñas viene pegado abajo: sin esto quedaban dos fondos claros
   con un salto de aire en el medio. */
.an-social + .anhelo-home-reviews {
  padding-top: clamp(28px, 3.4vw, 44px);
}

@media (max-width: 767px) {
  .an-social__panel {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }

  .an-social__fila {
    gap: 12px 22px;
  }
}

/* ── 2. La prenda, adentro del video ───────────────────────────────────── */

.an-reel__cuenta {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-capsule, 999px);
  background: rgba(16, 15, 14, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
}

/* Fila flexible y no grilla de columnas fijas: cuando el video tiene mas de
   una prenda aparece el chip "+2" y con tres columnas la flecha se caia a una
   segunda fila. La pastilla quedaba alta y descolocada (visto el 18 de
   septiembre de 2026 en las tarjetas 3, 4 y 5 del home). */
.an-reel__pill {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--r-capsule, 999px);
  background: rgba(252, 251, 249, .8);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0, 0, 0, .22);
  color: var(--an-ink, #161616);
  text-align: left;
  cursor: pointer;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .an-reel__cuenta {
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }

  .an-reel__pill {
    background: rgba(252, 251, 249, .7);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}

/* Hasta que llega la foto del catálogo, la casilla guarda su lugar: la pastilla
   no cambia de forma cuando se completa. */
.an-reel__pill-img {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 9px;
  background: #efece7;
}

.an-reel__pill-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.an-reel__pill-txt {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.an-reel__pill-name {
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.an-reel__pill-price {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.an-reel__pill-price:empty {
  display: none;
}

/* Cuando el video muestra más de una prenda: el resto se ve al abrirlo. */
.an-reel__pill-extra {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: var(--r-capsule, 999px);
  background: rgba(22, 22, 22, .1);
  font-size: 10px;
  font-weight: 800;
}

.an-reel__pill-arrow {
  flex: 0 0 auto;
  color: var(--an-muted, #707070);
  font-size: 14px;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .an-reel__pill:hover {
    background: rgba(255, 255, 255, .92);
  }
}

/* El botón de play se corre arriba: con la pastilla abajo, en el centro exacto
   quedaba justo sobre la cara de quien aparece en el video. */
.an-reel__pill ~ .an-reel__play,
.an-reel .an-reel__play {
  top: 44%;
}

@media (max-width: 767px) {
  .an-reel__cuenta {
    font-size: 10px;
    padding: 4px 9px;
  }

  .an-reel__pill {
    gap: 8px;
    padding: 6px 10px 6px 6px;
  }
}