/*
 * Dueño: C2-Fa. La hoja global del tema propio de Fortium, escrita de cero con los valores medidos de
 * la tienda de la marca (cliente-2/comparar/medidas/estilos.json y la sonda de C2-Fa sobre cliente-2/referencia).
 * Las variables (--at-*) las define snippets/at-fa-variables.liquid con los ajustes del tema.
 *
 * Lo que está acá lo heredan los bloques de la marca (que no traen tipografía propia para todo): la raíz de 10 px, el
 * cuerpo Poppins 500 de 15/16 px con interlineado 1,4 y espaciado 0,5 px, los títulos y sus márgenes (los del
 * navegador: la tienda no los cambia), los párrafos, las listas y los links del navegador.
 *
 * Además, el marco: el encabezado y su cajón del menú, el pie, la 404, el blog, la página, el contacto, el artículo,
 * las migas, la contraseña y cómo se ven las políticas (las dibuja la plataforma con su contenedor).
 *
 * Clases globales para todos los dueños (C2-DUENOS.md §5.7): .at-ancho, .at-esquema-claro, .at-esquema-oscuro,
 * .at-boton, .at-boton--secundario, .at-campo, .at-oculto-visual, .at-lista-limpia, .at-liquido.
 */
/* La raíz: toda la ventana de alto, 10 px por la escala del cuerpo (62,5 % de 16) y las cajas medidas por el borde. */
html {
  height: 100%;
  font-size: calc(62.5% * var(--at-escala-cuerpo));
  /* como en la tienda, todo desplazamiento de la página es suave (integración, 23/10/2026: sin esto, saltar de abajo
     a arriba con un link o un script dejaba el encabezado escondido, porque la tienda pasa por el medio y lo muestra) */
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* Cada caja mide como su padre (no border-box fijo): así un bloque de la marca que cambie la suya se la pasa a sus
   hijos, como en la tienda. */
*, ::before, ::after { box-sizing: inherit; }

/* El cuerpo es una columna: el contenido estira para que el pie quede abajo en una página corta (como en la tienda). */
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  font-size: 15px;
  letter-spacing: var(--at-cuerpo-espaciado);
  line-height: 1.4;
  font-family: var(--at-fuente-cuerpo);
  font-style: normal;
  font-weight: var(--at-fuente-cuerpo-peso);
  color: rgba(var(--at-claro-texto-rgb), 0.95);
  background-color: var(--at-claro-fondo);
  /* el suavizado del texto y sin negritas ni itálicas inventadas, como en la tienda */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

@media (min-width: 750px) {
  body {
    font-size: 16px;
  }
}

/* Los grupos del encabezado y del pie no dibujan caja: sus secciones son hijas directas de la columna del cuerpo
   (así el encabezado fijo se pega contra toda la página). */
.at-encabezado-grupo,
.at-pie-grupo {
  display: contents;
}

.at-contenido {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5 {
  color: rgb(var(--at-claro-texto-rgb));
  font-family: var(--at-fuente-titulos);
  font-weight: var(--at-fuente-titulos-peso);
  line-height: var(--at-titulos-interlineado);
  letter-spacing: var(--at-titulos-espaciado);
  word-break: break-word;
}

/* Tamaños medidos (celular / compu): 31,5/42 · 21/25,2 · 17,85/18,9 · 15,75 · 12,6/13,65 = la escala (105 %) por 30/40,
   20/24, 17/18, 15 y 12/13 px. */
h1 { font-size: calc(var(--at-escala-titulos) * 30px); }
h2 { font-size: calc(var(--at-escala-titulos) * 20px); }
h3 { font-size: calc(var(--at-escala-titulos) * 17px); }
h4 { font-size: calc(var(--at-escala-titulos) * 15px); }
h5 { font-size: calc(var(--at-escala-titulos) * 12px); }

@media (min-width: 750px) {
  h1 { font-size: calc(var(--at-escala-titulos) * 40px); }
  h2 { font-size: calc(var(--at-escala-titulos) * 24px); }
  h3 { font-size: calc(var(--at-escala-titulos) * 18px); }
  h5 { font-size: calc(var(--at-escala-titulos) * 13px); }
}

/* ── Contenedor de página: 1600 de ancho, 15 px de margen en el celular y 50 desde 750 px ── */
.at-ancho {
  max-width: var(--at-ancho-pagina);
  margin: 0 auto;
  padding: 0 var(--at-margen-pagina);
}

/* ── Esquemas de color (los de la tienda: claro = background-1, oscuro = background-2) ── */
.at-esquema-claro {
  --at-esquema-fondo: var(--at-claro-fondo);
  --at-esquema-texto-rgb: var(--at-claro-texto-rgb);
  --at-esquema-boton: var(--at-claro-boton);
  --at-esquema-boton-texto: var(--at-claro-boton-texto);
  --at-esquema-boton-secundario: var(--at-claro-boton-secundario);
  background-color: var(--at-claro-fondo);
  color: rgba(var(--at-claro-texto-rgb), 0.95);
}
.at-esquema-oscuro {
  --at-esquema-fondo: var(--at-oscuro-fondo);
  --at-esquema-texto-rgb: var(--at-oscuro-texto-rgb);
  --at-esquema-boton: var(--at-oscuro-boton);
  --at-esquema-boton-texto: var(--at-oscuro-boton-texto);
  --at-esquema-boton-secundario: var(--at-oscuro-boton-secundario);
  background-color: var(--at-oscuro-fondo);
  color: rgba(var(--at-oscuro-texto-rgb), 0.95);
}
.at-esquema-oscuro :is(h1, h2, h3, h4, h5) {
  color: rgb(var(--at-oscuro-texto-rgb));
}

/* ── Botón: Poppins 700 de 14/16 px, alto mínimo 49, relleno 0 20, radio 7, dorado con texto negro ── */
.at-boton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: var(--at-boton-alto);
  padding: 0 20px;
  border: 0;
  border-radius: var(--at-boton-radio);
  font-family: var(--at-fuente-botones);
  font-weight: var(--at-fuente-botones-peso);
  font-size: var(--at-boton-texto);
  line-height: 1.2;
  letter-spacing: normal;
  text-decoration: none;
  color: var(--at-esquema-boton-texto, var(--at-claro-boton-texto));
  background-color: var(--at-esquema-boton, var(--at-claro-boton));
  cursor: pointer;
}

/* El borde del botón: un aro de 1 px del color del botón por adentro, con el radio de adentro (6), arriba del fondo.
   Así salen las esquinas como en la tienda. */
.at-boton {
  position: relative;
}
.at-boton:not(.at-boton--secundario)::after {
  content: "";
  position: absolute;
  inset: var(--at-boton-borde);
  z-index: 1;
  border-radius: calc(var(--at-boton-radio) - var(--at-boton-borde));
  box-shadow: 0 0 0 var(--at-boton-borde) var(--at-esquema-boton, var(--at-claro-boton));
  pointer-events: none;
}

.at-boton--secundario {
  color: var(--at-esquema-boton-secundario, var(--at-claro-boton-secundario));
  background-color: transparent;
  box-shadow: inset 0 0 0 var(--at-boton-borde) currentColor;
}

.at-boton:focus-visible,
.at-campo:focus-visible {
  outline: 2px solid rgba(var(--at-claro-texto-rgb), 0.5);
  outline-offset: 3px;
}

/* ── Campo de texto: radio 8, borde de 1 px al 10 % ── */
.at-campo {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  font: inherit;
  border: var(--at-campo-borde) solid rgba(var(--at-claro-texto-rgb), var(--at-campo-borde-opacidad));
  border-radius: var(--at-campo-radio);
  background-color: var(--at-claro-fondo);
  color: rgb(var(--at-claro-texto-rgb));
}

/* ── Las secciones «Liquid de la marca» (portada: at-fa-liquido; ficha: at-fb-liquido): el relleno del ajuste,
      al 75 % en el celular (redondeado) y entero desde 750 px, como en la tienda ── */
.at-liquido {
  padding-top: var(--at-liquido-arriba-celular, 0px);
  padding-bottom: var(--at-liquido-abajo-celular, 0px);
}
@media (min-width: 750px) {
  .at-liquido {
    padding-top: var(--at-liquido-arriba, 0px);
    padding-bottom: var(--at-liquido-abajo, 0px);
  }
}

/* ── Lo vacío no se dibuja (los bloques de la marca cuentan con eso: en la tienda un div, un p o un título sin nada
      adentro no ocupa lugar, y así quedan escondidos el brillo y el anillo de mfch, que son divs vacíos con fondo).
      Solo adentro de los bloques de la marca (.at-liquido, el envoltorio de at-fa-liquido y at-fb-liquido), y con la
      especificidad de un elemento más una pseudo-clase: así una regla de la marca que lo muestre gana igual que en la
      tienda. ── */
:where(.at-liquido) :is(a, ul, dl, div, section, article, p, h1, h2, h3, h4, h5, h6):empty {
  display: none;
}

/* ── Utilidades ── */
/* Lo que solo leen los lectores de pantalla («Carrito», «2 artículos»): una caja de 1 px recortada entera, en una sola
   línea, que no empuja nada. */
.at-oculto-visual {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: -1px;
}

.at-lista-limpia {
  margin: 0;
  padding: 0;
  list-style: none;
}

.at-saltar {
  position: absolute;
  left: -9999px;
  z-index: 10;
}
.at-saltar:focus {
  left: 1rem;
  top: 1rem;
  padding: 1rem 2rem;
  background: var(--at-claro-fondo);
  color: rgb(var(--at-claro-texto-rgb));
}

.at-contenido:focus {
  outline: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ═════════════════════════════ El encabezado ═════════════════════════════
   Compu (desde 990 px): 53,8 de alto con la línea; menú · logo de 210 · carrito. Celular: 49; hamburguesa · logo ·
   carrito. Fijo al subir: at-base.js le pone .at-fijo (pegado arriba) y .at-escondido (fuera de la pantalla, al bajar)
   a la sección. */
.section-header {
  position: sticky;
  z-index: 3;
}
.section-header.at-fijo {
  top: 0;
}
.section-header.at-escondido {
  transform: translateY(-100%);
}
.section-header.at-animado {
  transition: transform 0.15s ease-out;
}

.at-encabezado {
  display: block;
  background-color: var(--at-claro-fondo);
  color: rgba(var(--at-claro-texto-rgb), 0.95);
}
.at-encabezado--linea {
  border-bottom: 1px solid rgba(var(--at-claro-texto-rgb), 0.08);
}

.at-encabezado__fila {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  max-width: var(--at-ancho-pagina);
  margin: 0 auto;
  padding: 2px 30px;
}

.at-encabezado__menu-celular {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-left: -12px;
}

.at-encabezado__icono {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--at-claro-texto-rgb));
  cursor: pointer;
  text-decoration: none;
}
.at-encabezado__icono svg {
  display: block;
  transition: transform 0.1s ease;
}
.at-encabezado__icono:hover svg {
  transform: scale(1.07);
}
.at-encabezado__icono .at-icono-cerrar {
  display: none;
}
.at-menu-abierto .at-encabezado__icono--menu .at-icono-menu {
  display: none;
}
.at-menu-abierto .at-encabezado__icono--menu .at-icono-cerrar {
  display: block;
}

.at-encabezado__menu {
  display: none;
}

.at-encabezado__titulo {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  line-height: 0;
  text-align: center;
}

.at-encabezado__logo {
  grid-column: 2;
  grid-row: 1;
  display: inline-block;
  padding: 7.5px;
  line-height: 0;
  text-align: center;
  text-decoration: none;
  color: rgb(var(--at-claro-texto-rgb));
}
.at-encabezado__logo-marco {
  display: inline-block;
  width: 100%;
}
.at-encabezado__logo-img {
  width: var(--at-logo-ancho);
  max-width: 100%;
  height: auto;
}

.at-encabezado__iconos {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  padding-right: 8px;
}
.at-encabezado__icono--carrito {
  margin-right: -12px;
}

/* La burbuja del carrito (la actualiza at-carrito.js, C2-Fc): 17 px, dorada con borde negro, 9 px. */
.at-encabezado__cuenta {
  position: absolute;
  top: 4px;
  left: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgb(var(--at-claro-texto-rgb));
  border-radius: 100%;
  background-color: var(--at-dorado);
  color: rgb(var(--at-claro-texto-rgb));
  font-size: 9px;
  line-height: 1.1;
}
.at-encabezado__cuenta[hidden] {
  display: none;
}
.at-encabezado__cuenta > span[aria-hidden] {
  display: flex;
}

@media (min-width: 990px) {
  .at-encabezado__fila {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 20px;
    padding: var(--at-enc-arriba, 4px) 50px var(--at-enc-abajo, 4px);
  }
  .at-encabezado__menu-celular {
    display: none;
  }
  .at-encabezado__menu {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin-left: -12px;
  }
  .at-encabezado__lista {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .at-encabezado__link {
    display: flex;
    align-items: center;
    padding: 12px;
    font-family: var(--at-fuente-menu);
    font-weight: var(--at-fuente-menu-peso);
    font-size: var(--at-menu-tamano);
    letter-spacing: var(--at-menu-espaciado);
    line-height: 1.3;
    color: rgba(var(--at-claro-texto-rgb), 0.95);
    text-decoration: none;
  }
  .at-encabezado__link > span {
    display: block;
  }
  .at-encabezado__link-actual {
    color: rgb(var(--at-claro-texto-rgb));
  }
  .at-encabezado__link:hover > span {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* El cajón del menú en el celular: baja del encabezado, a todo el ancho y hasta el final de la pantalla. Links de
   18 px con 11/30 de relleno (el de la página actual con fondo al 4 %), y abajo las redes sobre un fondo al 3 %. */
.at-menu-cajon {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 49px);
  height: calc(100dvh - 49px);
  overflow-y: auto;
  background-color: var(--at-claro-fondo);
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.2s ease, visibility 0.2s;
}
.at-menu-abierto .at-menu-cajon {
  visibility: visible;
  transform: none;
}
.at-menu-cajon__nav {
  padding: 30px 0;
}
.at-menu-cajon__nav li {
  margin-bottom: 2px;
}
.at-menu-cajon__link {
  display: flex;
  padding: 11px 30px;
  font-size: 18px;
  line-height: 1.3;
  color: rgb(var(--at-claro-texto-rgb));
  text-decoration: none;
}
.at-menu-cajon__link--actual {
  background-color: rgba(var(--at-claro-texto-rgb), 0.04);
}
.at-menu-cajon__utilidades {
  margin-top: auto;
  padding: 20px 30px;
  background-color: rgba(var(--at-claro-texto-rgb), 0.03);
}
.at-menu-cajon__redes {
  margin-left: -12.5px;
}
html.at-sin-desplazar {
  overflow: hidden;
}

/* ── Las redes (pie y cajón del menú): links de 44 × 44 con el ícono de 22 ── */
.at-redes {
  display: flex;
}
.at-redes__link {
  display: flex;
  align-items: center;
  padding: 11px;
  color: inherit;
}
.at-redes__link svg {
  display: block;
}
.at-pie .at-redes__link {
  color: rgb(var(--at-oscuro-texto-rgb));
}

/* ═════════════════════════════ El pie ═════════════════════════════
   Relleno 45/15 en el celular y 60/20 desde 750 px (ajustes). */
.at-pie {
  padding-top: var(--at-pie-arriba-celular, 45px);
  padding-bottom: var(--at-pie-abajo-celular, 15px);
}
.at-pie a {
  color: inherit;
  text-decoration: none;
}
.at-pie a:not(.at-redes__link):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.at-redes__link svg {
  transition: transform 0.1s ease;
}
.at-redes__link:hover svg {
  transform: scale(1.07);
}
.at-pie__arriba {
  max-width: var(--at-ancho-pagina);
  margin: 0 auto;
  padding: 0 40px 30px;
  font-size: 16px;
  line-height: 1.4;
}
.at-pie__bloques {
  margin-bottom: 20px;
}
.at-pie__titulo {
  position: relative;
  margin: 0;
  padding: 35px 15px 15px 0;
  font-weight: 500;
  color: rgb(var(--at-oscuro-texto-rgb));
  cursor: pointer;
}
@media (max-width: 749px) {
  .at-pie__titulo::after {
    content: "-";
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    font-size: 24px;
    line-height: 1.1;
    text-align: center;
    transform: translateY(-50%);
  }
  .at-pie__bloque[data-at-cerrado] .at-pie__titulo::after {
    content: "+";
  }
  .at-pie__bloque[data-at-cerrado] [data-at-pie-contenido] {
    display: none;
  }
}
.at-pie__links,
.at-pie__texto {
  margin-bottom: 30px;
}
.at-pie__link {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.at-pie__texto > p:first-child {
  margin-top: 0;
}
.at-pie__texto > p:last-child {
  margin-bottom: 0;
}
.at-pie__redes-fila {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.at-pie__abajo {
  font-size: 15px;
}
.at-pie__fila {
  display: flex;
  justify-content: center;
  max-width: var(--at-ancho-pagina);
  margin: 0 auto;
  padding: 0 15px;
}
.at-pie__pagos-columna {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 15px 20px 0;
}
.at-pie__pagos-lista {
  display: flex;
  margin: 15px 0;
}
.at-pie__pago {
  display: flex;
  align-items: center;
  padding: 5px;
}
.at-pie__pago svg {
  display: block;
  width: 38px;
  height: 24px;
}
.at-pie__copyright {
  margin-top: 15px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.7px;
  text-align: center;
}
.at-pie__copyright-texto {
  font-size: 11px;
}
.at-pie__politicas {
  display: inline;
}
.at-pie__politicas li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.at-pie__politicas li::before {
  content: "\00B7";
  display: block;
  padding: 0 8px;
}
.at-pie__politicas .at-pie__copyright-texto,
.at-pie__politicas a {
  display: block;
}
.at-pie__politicas a {
  padding: 6px 0;
}

@media (min-width: 750px) {
  .at-pie {
    padding-top: var(--at-pie-arriba, 60px);
    padding-bottom: var(--at-pie-abajo, 20px);
  }
  .at-pie__arriba {
    padding: 0 50px 50px;
  }
  .at-pie__bloques {
    display: flex;
    gap: 60px;
    margin-bottom: 0;
  }
  .at-pie__bloque {
    flex: 1 1 0;
    min-width: 0;
  }
  .at-pie__titulo {
    margin: 0 0 20px;
    padding: 0;
    cursor: default;
  }
  .at-pie__links,
  .at-pie__texto {
    margin-bottom: 0;
  }
  .at-pie__link {
    display: inline-block;
    padding: 5px 0;
  }
  .at-pie__redes-fila {
    align-items: flex-end;
  }
  .at-pie__abajo {
    padding-top: 30px;
    font-size: 16px;
  }
  .at-pie__fila {
    padding: 0 50px;
  }
  .at-pie__pagos-columna {
    padding: 0;
  }
  .at-pie__pagos {
    margin-top: 15px;
  }
  .at-pie__pagos-lista {
    margin: 16px 0;
  }
  .at-pie__copyright {
    font-size: 12px;
  }
  .at-pie__politicas a {
    padding: 0;
  }
}

/* ═════════════════════════════ Las páginas del marco ═════════════════════════════ */

/* La 404 (y las políticas que la tienda no tiene): «404», el título y «Seguir comprando», al medio, con 70 px arriba
   y abajo. */
.at-404 {
  margin: 70px auto;
  text-align: center;
}
.at-404__titulo {
  margin: 30px 0 20px;
}
.at-404__boton {
  margin-top: 10px;
}
@media (min-width: 750px) {
  .at-404__titulo {
    margin: 50px 0 30px;
  }
  .at-404__boton {
    margin-top: 20px;
  }
}

/* El texto de arriba del blog («Blog Posts» y el párrafo en mayúsculas). */
.at-texto {
  padding-top: var(--at-texto-arriba-celular);
  padding-bottom: var(--at-texto-abajo-celular);
}
.at-texto__envoltorio {
  display: flex;
  justify-content: center;
  max-width: var(--at-ancho-pagina);
  margin: 0 20px;
  padding: 0 15px;
}
.at-texto__bloques {
  width: 100%;
  text-align: center;
}
.at-texto__titulo {
  margin: 0;
}
.at-texto__titulo--h1 {
  font-size: calc(var(--at-escala-titulos) * 30px);
}
.at-texto__parrafo {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
@media (min-width: 750px) {
  .at-texto {
    padding-top: var(--at-texto-arriba);
    padding-bottom: var(--at-texto-abajo);
  }
  .at-texto__envoltorio {
    margin: 0 auto;
    padding: 0 50px;
  }
  .at-texto__titulo--h1 {
    font-size: calc(var(--at-escala-titulos) * 40px);
  }
}
@media (min-width: 990px) {
  .at-texto__bloques {
    max-width: 780px;
  }
}

/* El blog: el título del blog y sus artículos (la tienda no tiene). */
.at-blog {
  padding-top: var(--at-blog-arriba-celular);
  padding-bottom: var(--at-blog-abajo-celular);
}
.at-blog__titulo {
  margin: 40px 0;
}
.at-blog__articulos {
  display: grid;
  gap: 16px;
}
.at-blog__articulo a {
  color: inherit;
  text-decoration: none;
}
.at-blog__articulo-foto {
  display: block;
  width: 100%;
  border-radius: var(--at-foto-radio);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.at-blog__articulo-titulo {
  margin: 12px 0 6px;
}
.at-blog__articulo-fecha {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(var(--at-claro-texto-rgb), 0.75);
}
@media (min-width: 750px) {
  .at-blog {
    padding-top: var(--at-blog-arriba);
    padding-bottom: var(--at-blog-abajo);
  }
  .at-blog__titulo {
    margin: 20px 0;
  }
  .at-blog__articulos {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 16px;
  }
}

/* Una página y un artículo (sin referencia: valores del tema de la tienda): la columna de lectura de 726 px, relleno 28
   en la compu y el 75 % en el celular; el título de la página a 30 px del texto (40 en la compu). */
.at-pagina-contenido {
  padding-top: var(--at-pagina-arriba-celular, 21px);
  padding-bottom: var(--at-pagina-abajo-celular, 21px);
}
.at-pagina-contenido__columna,
.at-articulo__columna {
  max-width: 726px;
  margin: 0 auto;
}
.at-pagina-contenido__titulo {
  margin: 0 0 30px;
}
.at-rte > :first-child {
  margin-top: 0;
}
.at-rte > :last-child {
  margin-bottom: 0;
}
.at-rte ul,
.at-rte ol {
  padding-left: 20px;
  list-style-position: inside;
}
.at-rte img {
  border-radius: var(--at-foto-radio);
}
.at-rte table {
  table-layout: fixed;
  border-collapse: collapse;
}
.at-rte blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid rgba(var(--at-claro-texto-rgb), 0.15);
}
@media (min-width: 750px) {
  .at-pagina-contenido {
    padding-top: var(--at-pagina-arriba, 28px);
    padding-bottom: var(--at-pagina-abajo, 28px);
  }
  .at-pagina-contenido__titulo {
    margin-bottom: 40px;
  }
}
.at-articulo {
  padding: 0 15px 27px;
}
.at-articulo__columna--foto {
  max-width: 1100px;
  margin-bottom: 30px;
}
.at-articulo__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--at-foto-radio);
}
.at-articulo__cabecera {
  margin-bottom: 30px;
}
.at-articulo__cabecera h1 {
  margin: 0 0 10px;
}
.at-articulo__fecha {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(var(--at-claro-texto-rgb), 0.75);
}
.at-articulo__compartir {
  margin-top: 30px;
}
.at-articulo__compartir-boton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.at-articulo__volver-fila {
  margin-top: 50px;
  text-align: center;
}
.at-articulo__volver {
  color: inherit;
  text-decoration: none;
}
.at-articulo__volver:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 750px) {
  .at-articulo {
    padding: 0 50px 36px;
  }
  .at-articulo__columna--foto {
    margin-bottom: 40px;
  }
}

/* Las migas de pan: al 80 % del texto, separadas por una rayita gris de 14 px inclinada 15°; relleno 8/20 en la compu y el
   75 % en el celular. */
.at-migas {
  padding-top: var(--at-migas-arriba-celular, 6px);
  padding-bottom: var(--at-migas-abajo-celular, 15px);
}
.at-migas__item {
  display: inline-block;
  font-size: 80%;
}
.at-migas__item a {
  color: inherit;
  text-decoration: none;
}
.at-migas__item a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.at-migas__item:not(:last-child)::after {
  content: "";
  position: relative;
  display: inline-block;
  height: 14px;
  margin: 0 8px;
  border-left: 1px solid #cbcbcb;
  vertical-align: middle;
  transform: rotate(15deg);
}
@media (min-width: 750px) {
  .at-migas {
    padding-top: var(--at-migas-arriba, 8px);
    padding-bottom: var(--at-migas-abajo, 20px);
  }
}

/* El contacto (sin referencia: valores del tema de la tienda): el título en una columna de 700 px (a la izquierda en la
   compu, al medio en el celular) y el formulario debajo; cada campo de 50 px de alto con radio 8 y un aro de 1 px al
   10 %, la etiqueta de 16 px adentro que sube a 10 px al escribir, 15 px entre campos (20 en la compu), el comentario
   de 100 px (como en la tienda, aunque tenga 10 renglones) y el botón a 30 px (40 en la compu). La columna del formulario
   ocupa todo el ancho de la página, como en la tienda (la de 700 px es solo la del título). Relleno 36 en la compu y el 75 % en el celular. */
.at-contacto {
  padding-top: var(--at-contacto-arriba-celular);
  padding-bottom: var(--at-contacto-abajo-celular);
}
.at-contacto__titulo {
  max-width: 700px;
  margin: 0 auto 20px;
  text-align: var(--at-contacto-alineado-celular, center);
}
.at-contacto__titulo--h1 {
  font-size: calc(var(--at-escala-titulos) * 30px);
}
.at-contacto__subtitulo {
  max-width: 700px;
  margin: 0 auto 20px;
  text-align: var(--at-contacto-alineado-celular, center);
}
.at-contacto__subtitulo > p:first-child {
  margin-top: 0;
}
.at-contacto__columna {
  margin-top: 20px;
}
.at-contacto__form {
  position: relative;
  isolation: isolate;
}
.at-contacto__campo {
  position: relative;
  display: flex;
  margin-bottom: 15px;
}
.at-contacto__campo::after {
  content: "";
  position: absolute;
  inset: var(--at-campo-borde);
  border-radius: var(--at-campo-radio);
  box-shadow: 0 0 0 var(--at-campo-borde) rgba(var(--at-claro-texto-rgb), var(--at-campo-borde-opacidad));
  pointer-events: none;
  z-index: 1;
}
.at-contacto__campo:hover::after {
  box-shadow: 0 0 0 calc(var(--at-campo-borde) + 1px) rgba(var(--at-claro-texto-rgb), var(--at-campo-borde-opacidad));
}
.at-contacto__entrada {
  flex-grow: 1;
  width: 100%;
  height: 50px;
  margin: var(--at-campo-borde);
  padding: 22px 15px 8px 20px;
  border: 0;
  border-radius: var(--at-campo-radio);
  appearance: none;
  background-color: var(--at-claro-fondo);
  color: rgb(var(--at-claro-texto-rgb));
  font-family: var(--at-fuente-cuerpo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-overflow: ellipsis;
}
.at-contacto__entrada::placeholder {
  opacity: 0;
}
.at-contacto__entrada:focus-visible {
  outline: 2px solid rgba(var(--at-claro-texto-rgb), 0.5);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--at-claro-fondo), 0 0 5px 4px rgba(var(--at-claro-texto-rgb), 0.3);
}
.at-contacto__entrada--texto {
  min-height: 100px;
  resize: none;
  font-weight: var(--at-fuente-cuerpo-peso);
}
.at-contacto__etiqueta {
  position: absolute;
  top: 50%;
  left: calc(var(--at-campo-borde) + 15px);
  transform: translateY(-50%);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: rgb(var(--at-claro-texto-rgb));
  pointer-events: none;
  transition: top 0.1s ease, font-size 0.1s ease;
}
.at-contacto__entrada--texto ~ .at-contacto__etiqueta {
  top: calc(var(--at-campo-borde) + 13px);
  transform: none;
}
.at-contacto__entrada:focus ~ .at-contacto__etiqueta,
.at-contacto__entrada:not(:placeholder-shown) ~ .at-contacto__etiqueta {
  top: calc(var(--at-campo-borde) + 5px);
  transform: none;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.at-contacto__enviar {
  margin-top: 30px;
}
.at-contacto__aviso {
  margin: 0 0 20px;
  padding: 12px 15px;
  border-radius: var(--at-campo-radio);
  background-color: rgba(var(--at-claro-texto-rgb), 0.04);
}
.at-contacto__aviso--error {
  color: #b3261e;
  background-color: rgba(179, 38, 30, 0.06);
}
@media (min-width: 750px) {
  .at-contacto {
    padding-top: var(--at-contacto-arriba);
    padding-bottom: var(--at-contacto-abajo);
  }
  .at-contacto__titulo,
  .at-contacto__subtitulo {
    text-align: var(--at-contacto-alineado, left);
  }
  .at-contacto__titulo--h1 {
    font-size: calc(var(--at-escala-titulos) * 40px);
  }
  .at-contacto__campo {
    margin-bottom: 20px;
  }
  .at-contacto__enviar {
    margin-top: 40px;
  }
}

/* La página de contraseña (la tienda cerrada al público): el logo, el título y el texto, al medio de la pantalla. */
.at-contrasena {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.at-contrasena__logo {
  width: var(--at-logo-ancho);
  max-width: 70%;
  height: auto;
  margin-bottom: 40px;
}
.at-contrasena h1 {
  margin: 0 0 20px;
}
.at-contrasena__texto > :first-child {
  margin-top: 0;
}
.at-contrasena__texto > :last-child {
  margin-bottom: 0;
}

/* ── Las políticas: las dibuja la plataforma con su contenedor (shopify-policy__container, rutas.ts) y su hoja de 65
      caracteres; la tienda la ensancha a 95, la lista va con la viñeta adentro y 20 px de sangría, y los links son del
      color del botón al 85 % (igual en el texto de una página o un artículo, .at-rte). ── */
.at-contenido .shopify-policy__container {
  max-width: 95ch;
}
.shopify-policy__body ul,
.shopify-policy__body ol {
  padding-left: 20px;
  list-style-position: inside;
}
.shopify-policy__body a,
.at-rte a {
  color: color-mix(in srgb, var(--at-claro-boton) 85%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}