/*
 * Dueño: C2-Ba. Lo global del tema propio de Antropify para NOCTTIVO: tipografía, página, grilla, botones, campos,
 * encabezado, cajón del menú, pie y políticas. Escrito de cero; los valores se midieron de la tienda de la marca
 * (cliente-1/referencia, con la sonda de C2-Ba y cliente-1/comparar/medidas, 22/10/2026). Las variables --at-* las
 * arma snippets/at-ba-variables.liquid con los ajustes del tema.
 *
 * Los otros dueños ponen su CSS en su propia hoja (at-ficha, at-carrito, at-coleccion, at-busqueda) y pueden usar
 * estas variables y clases. Lo que no está acá no lo toca nadie sin avisar (C2B-DUENOS.md).
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-width: thin; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--at-fondo);
  color: var(--at-texto);
  font-family: var(--at-fuente-cuerpo);
  font-weight: var(--at-fuente-cuerpo-peso);
  font-size: var(--at-tamano-parrafo);
  line-height: var(--at-interlineado-parrafo);
  font-variation-settings: "slnt" 0;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }

/* Links: del color del texto, con el subrayado transparente salvo dentro de un párrafo o de texto enriquecido. */
a {
  color: currentColor;
  text-decoration-color: transparent;
  text-decoration-thickness: .075em;
  text-underline-offset: .125em;
  transition: text-decoration-color .125s ease-in-out, color .125s ease-in-out;
}
p a:not(.at-boton), .rte p a:not(.at-boton), .rte ul a:not(.at-boton), .rte ol a:not(.at-boton), .rte table a:not(.at-boton) { text-decoration-color: currentColor; }
p a:not(.at-boton):hover, .rte :is(ul, ol, table) a:not(.at-boton):hover { color: rgb(var(--at-texto-rgb) / .7); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: .2em; }

/* El primer párrafo o título de un bloque no lleva margen arriba, y el último no lleva margen abajo. */
p:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-block-start: 0; }
p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-block-end: 0; }
p:empty { display: none; }

/* Títulos: Inter 700 (h5 y h6 en 500). h1 de 48 a 56 px y h2 de 36 a 48 px según el ancho, como la tienda. Los
   márgenes quedan los del navegador salvo donde una sección los fija. */
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { letter-spacing: 0; }
h1, h2, h3, h4, .at-h1, .at-h2, .at-h3, .at-h4 { font-family: var(--at-fuente-titulo); font-weight: var(--at-fuente-titulo-peso); }
h5, h6, .at-h5, .at-h6 { font-family: var(--at-fuente-subtitulo); font-weight: var(--at-fuente-subtitulo-peso); }
h1, .at-h1 { font-size: var(--at-tamano-h1); line-height: 1; }
h2, .at-h2 { font-size: var(--at-tamano-h2); line-height: 1; }
h3, .at-h3 { font-size: var(--at-tamano-h3); line-height: 1.1; }
h4, .at-h4 { font-size: var(--at-tamano-h4); line-height: 1; }
h5, .at-h5 { font-size: var(--at-tamano-h5); line-height: 1.2; }
h6, .at-h6 { font-size: var(--at-tamano-h6); line-height: 1.2; }

/* ── La página ─────────────────────────────────────────────────────────
 * body y .page-wrapper son columnas del alto de la pantalla; el contenido crece y la última sección llena el
 * hueco (en la tienda, una página corta deja el pie abajo de todo). El grupo del encabezado no tiene caja.
 * Desde 990 px el documento queda quieto y se desplaza .page-wrapper (medido: la portada a 1280 tiene
 * documento de 900 y .page-wrapper de 3.034). Con el cajón del carrito abierto, la página se corre a la
 * izquierda el ancho del cajón: la clase la pone el cajón (C2-Bb). */
.page-wrapper { display: flex; flex-direction: column; min-height: 100dvh; transition: margin-right .125s cubic-bezier(.4, 0, .2, 1); }
.at-encabezado-grupo { display: contents; }
.at-contenido { display: flex; flex-direction: column; flex: 1 1 0%; }
.at-contenido > .shopify-section:last-child { flex: 1 1 auto; }
.at-pie-grupo { display: block; }
.shopify-section { position: relative; }

@media (min-width: 990px) {
  html.at-pagina { overflow: hidden; height: 100dvh; }
  html.at-pagina body { overflow: hidden; height: 100dvh; }
  .page-wrapper { height: 100dvh; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgb(var(--at-texto-rgb) / .4) var(--at-fondo); }
  /* el corrimiento entra con la curva de entrada (0,125 s) y sale con la de salida, como la tienda */
  .page-wrapper.at-cajon-abierto { margin-right: var(--at-cajon-ancho); transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
}

/* ── La grilla de página ───────────────────────────────────────────────
 * Tres columnas: margen · contenido (hasta 1440 px) · margen. El margen es de 16 px en el celular y 40 px desde
 * 750 px (a 1280 queda 40 · 1200 · 40). Los hijos van a la columna del medio; `.at-completo` ocupa todo el ancho.
 * `.at-ancho` es lo mismo con relleno, para un bloque suelto. `.page-width` la usa la marca en su bloque de
 * rastreo (bloques-marca/rastreo.liquid): es un gancho y no se le da estilo acá. */
.at-grilla-pagina {
  display: grid;
  grid-template-columns: minmax(var(--at-margen-pagina), 1fr) minmax(0, var(--at-ancho-contenido)) minmax(var(--at-margen-pagina), 1fr);
}
.at-grilla-pagina > * { grid-column: 2; min-width: 0; }
.at-grilla-pagina > .at-completo { grid-column: 1 / -1; }
.at-ancho {
  width: 100%;
  max-width: calc(var(--at-ancho-contenido) + var(--at-margen-pagina) * 2);
  margin-inline: auto;
  padding-inline: var(--at-margen-pagina);
}

/* Rellenos verticales de sección: el de los ajustes en la compu y el 70 % en el celular, como el tema de la
   tienda (48 → 33,6; 30 → 21; 100 → 70). Cada sección pone --at-relleno-arriba / --at-relleno-abajo. */
.at-relleno-vertical { padding-block: calc(var(--at-relleno-arriba, 0px) * 0.7) calc(var(--at-relleno-abajo, 0px) * 0.7); }
@media (min-width: 750px) {
  .at-relleno-vertical { padding-block: var(--at-relleno-arriba, 0px) var(--at-relleno-abajo, 0px); }
}

/* ── Botones ───────────────────────────────────────────────────────────
 * Primario: fondo #000, texto blanco, 14/22,4, relleno 16/24, radio 14, sin borde: 54,4 px de alto. Al pasar el
 * mouse, #262626 (0,125 s). Secundario: transparente con borde de 1 px. */
.at-boton {
  display: inline-grid;
  place-items: center;
  padding: var(--at-boton-relleno);
  border: 0;
  border-radius: var(--at-boton-radio);
  background-color: var(--at-texto);
  color: var(--at-fondo);
  font-family: var(--at-fuente-cuerpo);
  font-size: var(--at-tamano-parrafo);
  font-weight: var(--at-fuente-cuerpo-peso);
  line-height: var(--at-interlineado-parrafo);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--at-texto);
  transition: color .125s ease-in-out, box-shadow .125s ease-in-out, background-color .125s ease-in-out;
}
.at-boton:hover { background-color: var(--at-boton-fondo-hover); }
.at-boton--secundario {
  background-color: transparent;
  color: var(--at-texto);
  box-shadow: inset 0 0 0 var(--at-boton-secundario-borde) var(--at-texto);
}
.at-boton--secundario:hover { background-color: rgb(var(--at-texto-rgb) / .15); }
.at-boton-limpio { padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* ── Campos ────────────────────────────────────────────────────────────
 * Relleno 16/20, radio 4, borde de 1 px #DFDFDF, texto #333 y el de ejemplo al 60 %. 16 px de letra en el
 * celular (así iOS no acerca) y 14 desde 750 px. */
.at-campo {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--at-campo-relleno);
  border: var(--at-campo-borde) solid var(--at-borde);
  border-radius: var(--at-campo-radio);
  background-color: var(--at-fondo);
  color: var(--at-texto-campos);
  font-family: var(--at-fuente-cuerpo);
  font-size: 16px;
  line-height: var(--at-interlineado-parrafo);
  text-overflow: ellipsis;
  scrollbar-color: rgb(var(--at-texto-rgb) / .4) var(--at-fondo);
}
.at-campo::placeholder { color: rgb(51 51 51 / .6); opacity: 1; }
.at-campo:focus { outline: none; box-shadow: 0 0 0 1.5px var(--at-borde); }
textarea.at-campo { resize: vertical; min-height: 55px; }
@media (min-width: 750px) { .at-campo { font-size: var(--at-tamano-parrafo); } }

/* ── Utilidades ──────────────────────────────────────────────────────── */
.at-grilla { display: grid; gap: 16px; grid-template-columns: repeat(var(--at-columnas-celular, 2), minmax(0, 1fr)); }
@media (min-width: 750px) { .at-grilla { grid-template-columns: repeat(var(--at-columnas, 4), minmax(0, 1fr)); } }
.at-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.at-lista-limpia { list-style: none; margin: 0; padding: 0; }
.at-icono { display: block; flex: none; }

/* «Ir directamente al contenido»: fuera de la pantalla hasta que tiene el foco. */
.at-saltar { position: absolute; left: -99999px; top: 0; }
.at-saltar:focus { left: 16px; top: 16px; z-index: 20; padding: 16px 32px; background-color: transparent; box-shadow: 0 0 0 .2em var(--at-fondo); }

/* ── Encabezado ────────────────────────────────────────────────────────
 * Fijo arriba al bajar (sticky, 1 px por encima del borde, como la tienda). Fondo blanco. */
.at-encabezado-seccion { position: sticky; top: -1px; z-index: 18; }
.at-encabezado { background-color: var(--at-fondo); color: var(--at-texto); }
.at-encabezado__columnas { display: grid; align-items: center; min-width: 0; }
.at-encabezado__izquierda, .at-encabezado__derecha { display: flex; align-items: center; gap: 20px; }
.at-encabezado__derecha { justify-content: flex-end; }
.at-encabezado__logo { display: flex; flex: none; align-items: center; justify-content: center; text-decoration: none; }
.at-encabezado__logo-img { display: block; width: var(--at-logo-ancho); height: var(--at-logo-alto); max-width: 100%; object-fit: contain; }
.at-encabezado__menu { display: flex; min-width: 0; height: 44px; }
.at-encabezado__lista { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; margin: 0 -10px; padding: 0; list-style: none; }
.at-encabezado__item { display: flex; flex: none; align-items: center; height: 100%; white-space: nowrap; }
.at-encabezado__link {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--at-texto);
  font-size: 14px;
  line-height: 23.4px;
  text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 1.75px;
  transition: color, border-color;
}
.at-encabezado__texto { display: block; padding-inline: 11.2px; }
/* Con una página marcada o con el mouse arriba, el menú baja a 0,8 y queda entero solo el link de esa página
   (o el que está debajo del mouse). Sin ninguna marcada (fichas, políticas), los links van enteros. */
.at-encabezado__lista:has(.at-encabezado__link--actual) .at-encabezado__link,
.at-encabezado__lista:has(.at-encabezado__item:hover) .at-encabezado__link,
.at-encabezado__lista:has(.at-encabezado__item:focus-within) .at-encabezado__link { color: var(--at-texto-suave); }
.at-encabezado__lista:not(:has(.at-encabezado__item:hover)) .at-encabezado__link--actual,
.at-encabezado__item:is(:hover, :focus-within) .at-encabezado__link { color: var(--at-texto); }
.at-encabezado__acciones { display: flex; margin-inline-start: -14.4px; }
.at-encabezado__accion, .at-encabezado__menu-boton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--at-texto);
  cursor: pointer;
}
.at-encabezado__accion { overflow: hidden; }
.at-encabezado__accion[hidden] { display: none; }
.at-encabezado__accion > .svg-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.at-encabezado__accion .at-icono { width: 22px; height: 22px; }
/* Pasar el mouse por el menú, el botón del menú o una acción apaga un poco (0,8) lo otro de ese mismo lado del
   encabezado (izquierda o derecha), como la tienda. El logo no se apaga. */
.at-encabezado__atenuable { transition: opacity .125s ease-in-out; }
@media (hover: hover) {
  :is(.at-encabezado__izquierda, .at-encabezado__derecha):has(.at-encabezado__atenuable:hover) .at-encabezado__atenuable:not(:hover) { opacity: .8; }
}
/* La burbuja del carrito: 20×20 negra, número de 10 px, arriba a la derecha de la bolsa. */
.at-encabezado__cuenta {
  position: absolute;
  top: 4.5px;
  left: 21.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0 2.8px;
  border-radius: 50%;
  color: var(--at-fondo);
  font-size: 10px;
  line-height: 10px;
  z-index: 0;
}
/* El círculo va aparte del número y «late» al aparecer (1 → 1,2 → 1 en 0,125 s), como la tienda. */
.at-encabezado__cuenta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: var(--at-texto);
  animation: at-late .125s ease-in-out;
}
@keyframes at-late { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.at-encabezado__cuenta[hidden] { display: none; }
/* Con artículos, la bolsa se recorta en un círculo de 10 px alrededor de la burbuja, como la tienda. */
.at-encabezado__accion:has(> .at-encabezado__cuenta:not([hidden])) .at-icono {
  -webkit-mask-image: radial-gradient(22px at calc(100% - 2.5px) 4.5px, transparent 45.45%, #fff 45.45%, #fff 100%);
  mask-image: radial-gradient(22px at calc(100% - 2.5px) 4.5px, transparent 45.45%, #fff 45.45%, #fff 100%);
}

/* El botón del menú (celular): 13,6 px de ícono con 16 de relleno; con el cajón abierto muestra la cruz. */
.at-encabezado__celda-menu { display: none; }
.at-encabezado__menu-boton { width: auto; height: auto; padding: 16px; transition: opacity .125s ease-in-out; }
.at-icono-menu { display: flex; align-items: center; justify-content: center; width: 13.6px; height: 13.6px; }
.at-icono-menu .at-icono { flex: none; }
.at-icono-menu--abrir .at-icono { width: 13.6px; height: 20px; }
.at-icono-menu--cerrar .at-icono { width: 13.6px; height: 13.6px; }
.at-icono-menu--cerrar,
.at-encabezado__menu-boton[aria-expanded="true"] .at-icono-menu--abrir { display: none; }
.at-encabezado__menu-boton[aria-expanded="true"] .at-icono-menu--cerrar { display: flex; }

/* Celular: cinco columnas (44 · 44 · el resto · 44 · 44), 60 px de alto, a todo el ancho. */
@media (max-width: 749px) {
  .at-encabezado__columnas {
    grid-column: 1 / -1;
    grid-template-columns: 44px 44px 1fr 44px 44px;
    padding-inline-end: 2px;
  }
  .at-encabezado__izquierda, .at-encabezado__derecha { display: contents; }
  .at-encabezado__celda-menu { display: flex; grid-column: 1; align-items: center; width: 44px; min-height: 60px; }
  .at-encabezado__logo { grid-column: 3; align-self: stretch; padding: 0; }
  .at-encabezado__menu { display: none; }
  .at-encabezado__acciones { grid-column: 5; justify-self: end; }
}
/* Compu: el logo y el menú a la izquierda, las acciones a la derecha; relleno de 11,2 px arriba y abajo. */
@media (min-width: 750px) {
  .at-encabezado__columnas { grid-template-columns: auto minmax(max-content, 1fr); column-gap: 20px; padding-block: 11.2px; }
  .at-encabezado__logo { min-height: 44px; }
}

/* ── El cajón del menú (celular) ───────────────────────────────────────
 * Entra desde la izquierda en 0,2 s: 95 % del ancho (tope 500 px), del alto de la pantalla, borde derecho de 1 px.
 * Atrás, un velo que oscurece la página (brillo al 75 %). Los links (28 px) aparecen de a uno, 0,1 s después
 * del anterior, y los productos destacados al final. */
.at-menu-cajon__panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  width: 95vw;
  max-width: 500px;
  height: 100dvh;
  overflow: auto;
  background-color: var(--at-fondo);
  border-right: 1px solid var(--at-borde);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--at-velocidad-cajon) ease, visibility var(--at-velocidad-cajon) ease, opacity var(--at-velocidad-cajon) ease;
}
.at-menu-cajon__fondo {
  position: fixed;
  inset: 0;
  z-index: 16;
  width: 100vw;
  height: 100dvh;
  -webkit-backdrop-filter: brightness(.75);
  backdrop-filter: brightness(.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--at-velocidad-cajon) ease;
}
.at-menu-cajon.at-abierto .at-menu-cajon__panel { transform: translateX(0); visibility: visible; }
.at-menu-cajon.at-abierto .at-menu-cajon__fondo { opacity: 1; pointer-events: auto; }
.at-menu-cajon__cerrar {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 16px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.at-menu-cajon__cerrar .svg-wrapper { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.at-menu-cajon__cerrar .at-icono { width: 13.6px; height: 13.6px; }
.at-menu-cajon__lista { margin: 0 0 8px; padding: 0 18.2px; list-style: none; }
.at-menu-cajon__item { display: flex; margin-bottom: 12.8px; }
.at-menu-cajon__link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 45.6px;
  padding: 4px 0;
  color: var(--at-texto);
  font-size: 28px;
  line-height: 38.8px;
  text-decoration: none;
}
.at-menu-cajon__destacados { margin-top: auto; container-type: inline-size; }
/* Hasta que el cajón se abre por primera vez, los destacados no se dibujan: así su foto (diferida) no se pide
   en cada página, igual que en la tienda, donde llegan recién al abrir el menú. */
.at-menu-cajon:not(.at-usado) .at-menu-cajon__destacados { content-visibility: hidden; }
.at-menu-cajon__tarjetas { display: flex; gap: 14px; margin: 0; padding: 0 0 16px; overflow-x: auto; list-style: none; }
.at-menu-cajon__tarjeta { flex: 0 0 auto; width: 35cqi; }
.at-menu-cajon__tarjeta:first-child { margin-inline-start: 20px; }
.at-menu-cajon__tarjeta:last-child { margin-inline-end: 20px; }
@keyframes at-entra-de-costado { from { visibility: hidden; opacity: 0; transform: translateX(-.5rem); } to { visibility: visible; opacity: 1; transform: translateX(0); } }
.at-menu-cajon.at-abierto .at-menu-cajon__entra { animation: at-entra-de-costado .2s ease-in-out backwards; animation-delay: calc(.2s + var(--at-orden, 0) * .1s); }
.at-menu-tarjeta { display: flex; flex-direction: column; gap: 8px; color: var(--at-texto); text-decoration: none; }
.at-menu-tarjeta__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.at-menu-tarjeta__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.at-menu-tarjeta__datos { display: flex; flex-direction: column; gap: 2px; }
.at-menu-tarjeta__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; overflow-wrap: break-word; }
.at-menu-tarjeta__antes { display: inline-block; color: var(--at-texto-suave); text-decoration: line-through 1.5px rgb(var(--at-texto-rgb) / .3); white-space: nowrap; }
.at-menu-tarjeta__precio { display: inline-block; font-weight: 500; white-space: nowrap; }
@media (min-width: 750px) { .at-menu-cajon { display: none; } }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.at-pie, .at-pie-util { background-color: var(--at-fondo); }
.at-pie__contenido { display: grid; }
.at-pie-util__fila {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 0 48px;
  border-top: 1px solid var(--at-borde);
  color: var(--at-texto-apagado);
  white-space: nowrap;
}
.at-pie-util__copia { font-size: 12px; line-height: 1.6; text-wrap: pretty; }
.at-pie-util__marca { text-decoration: underline; }
.at-pie-util__politicas { justify-self: center; text-align: center; }
.at-pie-util__boton { display: block; font-size: 12px; line-height: normal; color: inherit; transition: all; anchor-name: --at-politicas; }
/* La lista de políticas: 16 px arriba del botón, alineada con él en la compu y centrada en el celular. Entra en
   0,3 s (de 0,7 de opacidad, 6 px más abajo y al 94 %). Con «anchor positioning» se ubica sola; si el navegador no
   lo tiene, at-base.js pone left/top. */
.at-pie-util__lista {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  /* el borde (transparente) deja ver el fondo con un velo blanco al 15 %, como la tienda */
  background: linear-gradient(var(--at-fondo) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / .15) 0 100%) border-box;
  color: var(--at-texto);
  box-shadow: 0 4px 20px rgb(0 0 0 / .15);
  overflow: auto;
  text-align: center;
  line-height: 14px;
  opacity: 0;
  translate: 0 6px;
  scale: .94;
}
.at-pie-util__lista:popover-open { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: no-preference) {
  .at-pie-util__lista { transition: display .3s allow-discrete, overlay .3s allow-discrete, opacity .3s cubic-bezier(.32, .72, 0, 1), scale .3s cubic-bezier(.32, .72, 0, 1), translate .3s cubic-bezier(.32, .72, 0, 1); }
  @starting-style { .at-pie-util__lista:popover-open { opacity: .7; translate: 0 6px; scale: .94; } }
}
@supports (position-anchor: --a) {
  .at-pie-util__lista { position-anchor: --at-politicas; bottom: calc(anchor(top) + 1rem); left: anchor(left); }
  @media (max-width: 749px) { .at-pie-util__lista { left: anchor(center); transform: translateX(-50%); transform-origin: 0% 100%; } }
}
.at-pie-util__lista li { border-radius: 6px; }
.at-pie-util__lista li:is(:hover, :focus-within) { background: rgb(var(--at-texto-rgb) / .15); }
.at-pie-util__link { display: inline-block; width: 100%; padding: 8px; color: var(--at-texto); font-size: 12px; line-height: 12px; text-align: start; outline-color: transparent; }
.at-pie-util__redes { justify-self: end; }
@media (max-width: 749px) {
  .at-pie-util__fila { display: flex; flex-direction: column; padding: 20px 0 33.6px; }
  .at-pie-util__copia { text-align: center; }
  .at-pie-util__redes { justify-self: auto; }
}

/* ── Políticas ─────────────────────────────────────────────────────────
 * El motor las dibuja con su contenedor (shopify-policy__container, rutas.ts): columna de 65 caracteres con 20 px
 * de relleno; título como h1 centrado con 0,25em abajo; el cuerpo es texto enriquecido (.rte). */
.shopify-policy__container { max-width: 65ch; margin: 0 auto; padding: 20px; }
.shopify-policy__title { text-align: center; }

/* ── Texto enriquecido (políticas, páginas) ────────────────────────────
 * Párrafos con 1em entre sí (los del navegador); títulos con 3,3em arriba (entre 24 y 40 px) y 0,25em abajo;
 * listas sin margen arriba, 1em abajo (solo la de afuera) y 1,5em de sangría; tablas a todo el ancho, con la
 * fila de títulos sombreada en mayúsculas y una línea suave entre filas. */
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6,
.shopify-policy__title h1 { margin-block: clamp(1.5rem, 3.3em, 2.5rem) .25em; }
.rte :first-child:is(p, h1, h2, h3, h4, h5, h6), .shopify-policy__title h1:first-child { margin-block-start: 0; }
.rte ul, .rte ol { margin-block-start: 0; padding-inline-start: 1.5em; }
.rte :is(ul, ol):not(:is(ul, ol) *) { margin-block-end: 1em; }
.rte table { width: 100% !important; border-collapse: collapse; }
.rte thead, .rte tr:not(:has(td)) { background-color: rgb(var(--at-texto-rgb) / .05); font-weight: bold; text-transform: uppercase; }
.rte tr:has(td) { border-bottom: 1px solid rgb(var(--at-texto-rgb) / .1); }
.rte th, .rte td { padding: 11.2px 12.8px; text-align: start; }

/* Con el cajón del menú abierto la página no se desplaza (at-base.js). */
html.at-sin-desplazar, html.at-sin-desplazar .page-wrapper { overflow: hidden; }