/* Las letras viven en este mismo sitio (/fonts, las mismas de skin care, con
   sus licencias OFL): nada de Google Fonts. Jost es variable (100-900). */
@font-face{font-family:"Prata";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/prata-latin.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/jost-latin.woff2") format("woff2")}

/* ==========================================================================
   COLIBRÍ — portado 1:1 desde el tema de Shopify
   header.liquid (2202 líneas) + base.css + settings_data.json
   Base: 1rem = 10px, igual que Dawn.
   ========================================================================== */

:root {
  /* medidas */
  --page-width: 1300px;
  --spacing-grid-h: 2.4rem;
  --spacing-grid-v: 3.2rem;
  --radius: 0;

  /* escala de aire vertical · todo el ritmo de la página sale de aquí */
  --aire-seccion: 9rem;   /* arriba y abajo de cada sección */
  --aire-rotulo: 1.4rem;  /* antetítulo -> título */
  --aire-rayita: 2.8rem;  /* MISMO arriba y abajo de la rayita: eso la centra */
  --aire-cierre: 4.4rem;  /* del contenido al enlace de cierre */
  --duration-short: 100ms;
  --ease-hermes: cubic-bezier(0.4, 0, 0.2, 1);
  --fold: 0.34s;
  --abre: 0.4s;   /* lo que tarda en abrirse el buscador */

  /* tipografía */
  /* Como en skin care: Prata (--font-heading) para los títulos, los nombres
     de las piezas y "Colibrí"; Jost (--font-body) para botones, menú,
     antetítulos, precios, filtros y el texto. */
  --font-marca: "Prata", "Times New Roman", Georgia, serif;
  --font-heading: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* esquema 1 · blanco (cuerpo) */
  --s1-bg: 255, 255, 255;
  --s1-fg: 26, 26, 26;

  /* esquema 2 · el MISMO lila del header. Un solo lila en toda la tienda. */
  --s2-bg: 215, 200, 231;
  --s2-fg: 26, 26, 26;

  /* esquema 3 · LAVANDA — el header vive aquí */
  --s3-bg: 215, 200, 231;      /* #D7C8E7 · el elegido para el header */
  --s3-fg: 0, 0, 0;
  --marca: 215, 200, 231;      /* el mismo lila; el único distinto es el del colibrí (el PNG) */
  --lila-hondo: 26, 26, 26;    /* el foco va en tinta: no inventamos un segundo lila */

  /* esquema 4 · negro — barra de anuncios y pie */
  --s4-bg: 0, 0, 0;
  --s4-fg: 255, 255, 255;
  --s4-btn: 215, 200, 231;

  /* esquema 5 · lavanda claro */
  --s5-bg: 215, 200, 231;
  --s5-fg: 26, 26, 26;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /* 1rem = 10px, como Dawn */
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: 1.7;
  color: rgb(var(--s1-fg));
  background: rgb(var(--s1-bg));
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 750px) {
  body { font-size: 1.6rem; }
}

img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
a { color: inherit; text-decoration: none; }

.page-width {
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* ==========================================================================
   BARRA DE ANUNCIOS · esquema 4 (negro)
   ========================================================================== */
.announcement-bar {
  background-color: rgb(var(--s4-bg));
  color: rgb(var(--s4-fg));
  text-align: center;
  padding: 0.9rem 2rem;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  border-bottom: 0.1px solid rgba(var(--s4-fg), 0.2);
}

/* ==========================================================================
   HEADER · esquema 3 (lavanda) · sticky + plegable estilo Hermès
   ========================================================================== */
.section-header {
  position: sticky;
  top: 0;
  z-index: 30;
}
@media screen and (min-width: 990px) {
  /* La fila de arriba (aire 1rem + lockup 7.6rem + hueco 0.6rem = 9.2rem) se va
     sola con el scroll y la de secciones se clava. Lo hace el compositor del
     navegador: cero JavaScript, cero recálculo de layout, cero trabón. */
  /* el ave de 52 px hizo crecer la fila de arriba: este top es lo que se
     pliega al bajar, y deja visible la fila de colecciones */
  /* 127 de header menos los 43 que deben quedar visibles (12 de aire + 19 de
     la fila de categorias + 12 de aire): eso es lo que se pliega al bajar. */
  .section-header { top: -8.4rem; }
}

.header-wrapper {
  display: block;
  background-color: rgb(var(--s3-bg));
  color: rgb(var(--s3-fg));
  border-bottom: 0.1rem solid rgba(var(--s3-fg), 0.08);
}

.header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0;
  padding: 1.6rem 0.6rem;
  position: relative;
  min-height: 5.6rem;
  max-width: var(--page-width);
  margin-inline: auto;
}

/* --- wordmark ------------------------------------------------------------ */
/* Lockup apilado, al modo de las casas de moda: la marca arriba,
   el nombre abajo. El <p.header__heading> ya no aporta caja. */
.header__heading { margin: 0; }
.header__heading-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
}
.colibri-marca {
  display: block;
  width: auto;
  height: 5.2rem;
  /* alto fijo + ancho automatico: la imagen nunca se deforma */
  transition: opacity var(--duration-short) ease;
}
.header__heading-link:hover .colibri-marca { opacity: 0.78; }
.colibri-wordmark {
  font-family: var(--font-marca);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(var(--s3-fg), 0.85);
  display: block;
  transition: color var(--duration-short) ease;
}
.header__heading-link:hover .colibri-wordmark { color: rgb(var(--s3-fg)); }
.colibri-wordmark sup {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.5em;
  top: -0.7em;
  margin-left: 0.12em;
  letter-spacing: 0;
  position: relative;
  vertical-align: baseline;
}

/* --- iconos Hermès Line -------------------------------------------------- */
.hl-icon { width: 1.9rem; height: 1.9rem; display: block; flex: none; }   /* flex:none o el círculo sale ovalado */
.header__icon {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  text-decoration: none;
  border: none;
  color: rgba(var(--s3-fg), 0.75);
  position: relative;
  transition: color var(--duration-short) ease;
}
.header__icon:hover { color: rgb(var(--s3-fg)); }
.header__icon-label { display: none; }

.cart-count-bubble {
  position: absolute;
  left: 1.5rem;
  top: -0.5rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 100%;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8rem;
  text-align: center;
  background: rgb(var(--s3-fg));
  color: rgb(var(--s3-bg));
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* --- buscador del header ------------------------------------------------- */
/* El campo nace corto y se estira cuando se abre el buscador: la raya
   pertenece al texto, nunca pasa por debajo de la lupa. */
.header__inline-search {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 17.8rem;
  max-width: 100%;
  transition: width var(--abre) var(--ease-hermes);
}
.section-header.buscador-abierto .header__inline-search { width: 34rem; }

.header__inline-search .campo { position: relative; flex-grow: 1; min-width: 0; }

.header__search-input {
  font-family: var(--font-body);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  line-height: 1;
  width: 100%;
  display: block;
  padding: 0 2.6rem 0.15rem 0;
  border: none;
  border-bottom: 0.1rem solid rgb(var(--s3-fg));
  border-radius: 0;
  background: transparent;
  color: rgb(var(--s3-fg));
  -webkit-appearance: none;
  appearance: none;
}
.header__search-input:focus { outline: none; }
.header__search-input::placeholder { color: rgba(var(--s3-fg), 0.7); }
.header__search-input::-webkit-search-cancel-button { display: none; }

/* La "x" se ve igual y en el mismo lugar, pero su caja mide 44 x 44 para el
   dedo: crece hacia la izquierda, arriba y abajo, y a la derecha solo hasta
   la orilla del header (un pixel mas y la tienda se movia de lado). */
.campo__x {
  position: absolute;
  right: -0.6rem;
  top: -1.5rem;
  height: 4.4rem;
  width: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.6rem 0 0;
  border: none;
  background: none;
  color: rgb(var(--s3-fg));
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.16s var(--ease-hermes);
}
.campo__x svg { width: 1.1rem; height: 1.1rem; display: block; }
.campo__x:hover, .campo__x:focus-visible { opacity: 1; }

/* --- barra de colecciones ------------------------------------------------ */
.header__inline-menu { display: none; }

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}
.header__menu-item {
  display: flex;
  align-items: center;
  /* el doble de aire entre categorias: 2.4 a cada lado = 4.8rem entre una y otra */
  padding: 0.6rem 2.4rem;
  text-decoration: none;
  color: rgba(var(--s3-fg), 0.75);
  font-size: 1.6rem;
  letter-spacing: 0.06rem;
  line-height: 1.3;
}
.header__menu-item:hover { color: rgb(var(--s3-fg)); }
.header__menu-item span { transition: text-decoration var(--duration-short) ease; }
.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* --- hamburguesa (solo móvil) -------------------------------------------- */
.header-drawer {
  flex: 0 0 auto;
  order: 1;
  background: none;
  border: none;
  padding: 0.4rem;
  color: rgba(var(--s3-fg), 0.75);
  cursor: pointer;
}

/* ==========================================================================
   MÓVIL (≤989px) — flex, wordmark absolutamente centrado, sin colecciones
   ========================================================================== */
@media screen and (max-width: 989px) {
  .header__inline-search { flex: 0 0 auto; order: 2; margin: 0; padding: 0; }
  .header__inline-search .header__search-input { display: none; }
  .header__icons {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 1.4rem;
    order: 4;
    display: inline-flex;
    align-items: center;
  }
  .header__heading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.4rem 1.2rem;
    order: 3;
    z-index: 1;
    width: auto;
    max-width: 60vw;
    text-align: center;
  }
  .header__heading-link { display: inline-flex; align-items: center; justify-content: center; }
  /* El relleno del logo centrado no recibe el dedo: solo la liga. Asi en un
     telefono de 320 no se come el borde de la caja de "Mi cuenta". */
  .header__heading { pointer-events: none; }
  .header__heading-link { pointer-events: auto; }
}

/* ==========================================================================
   DESKTOP (≥990px) — grid Hermès de dos filas
   ========================================================================== */
@media screen and (min-width: 990px) {

  .header-drawer { display: none; }

  .header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      'search heading icons'
      'nav nav nav';
    align-items: center;
    row-gap: 0.6rem;
    column-gap: 2rem;
    position: relative;
    padding: 2rem 3.4rem;
    max-width: none;
    min-height: 0;
  }

  .header > .header__inline-search {
    grid-area: search;
    justify-self: start;
    align-self: center;
    margin: 0; padding: 0;
  }
  .header > .header__heading {
    grid-area: heading;
    justify-self: center;
    align-self: center;
    text-align: center;
    position: static;
    transform: none;
    margin: 0; padding: 0;
    max-width: none;
  }
  .header > .header__icons {
    grid-area: icons;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    column-gap: 2.2rem;
    margin: 0;
  }
  .header > .header__inline-menu {
    grid-area: nav;
    grid-column: 1 / -1;
    justify-self: center;
    display: block;
    margin: 0;
    /* fondo propio, opaco y plano: durante el plegado el fondo
       del wrapper falla y se vería la página por debajo */
    background-color: rgb(var(--s3-bg));
    background-attachment: scroll;
    width: 100%;
    text-align: center;
  }

  .colibri-wordmark { font-size: 1.5rem; }
  .colibri-wordmark sup { font-size: 0.5em; top: -0.7em; margin-left: 0.12em; }

  /* las etiquetas: la firma quiet luxury */
  .header__icon-label {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-left: 0.7rem;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    vertical-align: middle;
  }

  /* El plegado por JS se quitó: ahora el header es position:sticky con
     top negativo, asi que aqui ya no va ningun max-height ni overflow.
     Ese overflow:hidden era justo lo que recortaba el panel del buscador. */


}

/* ==========================================================================
   TÍTULOS · misma fuente, peso y aire que el wordmark (colibri-typography)
   ========================================================================== */
.title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  font-size: 2.4rem;
  margin: 0 0 1.6rem;
}
@media screen and (min-width: 990px) {
  .title { font-size: 2.8rem; }
}

.rich-text__text {
  font-size: 1.5rem;
  line-height: 1.7;
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}
@media screen and (min-width: 990px) {
  .rich-text__text { font-size: 1.6rem; }
}

/* ==========================================================================
   SLIDESHOW
   ========================================================================== */
.slideshow {
  background: rgb(var(--s5-bg));
  color: rgb(var(--s5-fg));
  min-height: 56rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8.8rem 2rem;
  position: relative;
  overflow: hidden;
}
.slideshow__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8.8rem 2rem;
  opacity: 0;
  transition: opacity 0.9s var(--ease-hermes);
  pointer-events: none;
}
.slideshow__slide.is-active { opacity: 1; pointer-events: auto; }
.banner__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  margin: 0 0 1.8rem;
  max-width: 18ch;
}
.banner__text {
  font-size: 1.7rem;
  max-width: 46ch;
  margin: 0 auto 3.2rem;
}
.slideshow__dots {
  position: absolute;
  bottom: 2.8rem;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.slideshow__dot {
  width: 0.7rem; height: 0.7rem;
  border-radius: 100%;
  border: 0.1rem solid rgb(var(--s5-fg));
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.slideshow__dot[aria-current="true"] { background: rgb(var(--s5-fg)); }

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  padding: 1.4rem 3.4rem;
  border: 0.1rem solid rgb(var(--s3-bg));
  border-radius: var(--radius);
  background: rgb(var(--s3-bg));
  color: rgb(var(--s3-fg));
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s var(--ease-hermes), border-color 0.18s var(--ease-hermes);
}
.button:hover { opacity: 0.82; }

/* foco visible en lila, para quien navega con teclado */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 0.2rem solid rgb(var(--lila-hondo));
  outline-offset: 0.3rem;
}

/* ==========================================================================
   SECCIONES Y REJILLA DE COLECCIONES
   ========================================================================== */
.rich-text { padding: 6.4rem 0 4rem; }
.collection-list-section { padding-block: 2.4rem 6.4rem; }

.collection-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-grid-v) var(--spacing-grid-h);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 989px) { .collection-list { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 749px) { .collection-list { grid-template-columns: repeat(2, 1fr); } }

.card-collection { text-align: center; }
.card__media {
  aspect-ratio: 1 / 1;
  max-width: 100%;
  background: rgb(var(--s2-bg));
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.card-collection:nth-child(3n) .card__media { background: rgb(var(--s2-bg)); }
.card-collection:nth-child(4n) .card__media { background: rgb(var(--s3-bg)); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__placeholder {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  letter-spacing: 0.08em;
  opacity: 0.28;
  line-height: 1;
}
.card__heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin: 0;
  color: rgba(var(--s1-fg), 0.85);
  transition: color var(--duration-short) ease;
}
.card-collection:hover .card__heading {
  color: rgb(var(--s1-fg));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* ==========================================================================
   GARANTÍAS · carrusel sin flechas (scroll-snap en móvil)
   ========================================================================== */
.multicolumn {
  background: rgb(var(--s2-bg));
  color: rgb(var(--s2-fg));
  padding-block: var(--aire-seccion);
  margin-top: 0;
}
.multicolumn-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem var(--spacing-grid-h);
  list-style: none;
  margin: 0;
  padding: 0;
}
.multicolumn-card { text-align: center; }
.multicolumn-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.01em;
  margin: 0 0 1.2rem;
}
.multicolumn-card__info p { font-size: 1.5rem; margin: 0; }

@media screen and (max-width: 860px) {
  /* carrusel sin flechas: se desliza con el dedo */
  .multicolumn-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 2rem;
    padding-bottom: 0.8rem;
  }
  .multicolumn-list::-webkit-scrollbar { display: none; }
  .multicolumn-card { scroll-snap-align: center; }
}

/* ==========================================================================
   PIE · esquema 4 (negro)
   ========================================================================== */
.footer {
  background: rgb(var(--s4-bg));
  color: rgb(var(--s4-fg));
  padding-block: 5.6rem 4rem;
}
.footer__blocks {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 4rem var(--spacing-grid-h);
  align-items: start;
}
@media screen and (max-width: 749px) { .footer__blocks { grid-template-columns: 1fr; } }
.footer__wordmark {
  font-family: var(--font-marca);
  font-size: 2.4rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.2rem;
}
.footer h4 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin: 0 0 1.4rem;
  font-weight: 400;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; font-size: 1.5rem; }
.footer a { color: rgba(var(--s4-fg), 0.8); transition: color var(--duration-short) ease; }
.footer a:hover { color: rgb(var(--s4-btn)); }
.footer__note { font-size: 1.4rem; opacity: 0.7; max-width: 40ch; margin: 0; }
.footer__legal {
  max-width: var(--page-width);
  margin: 4rem auto 0;
  padding: 2rem 2rem 0;
  border-top: 0.1rem solid rgba(var(--s4-fg), 0.16);
  font-size: 1.3rem;
  opacity: 0.6;
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   MENÚ MÓVIL
   ========================================================================== */
.menu-movil {
  background: rgb(var(--s3-bg));
  border-top: 0.1rem solid rgba(var(--s3-fg), 0.12);
}
.menu-movil ul {
  list-style: none;
  margin: 0;
  padding: 0.8rem 2rem 1.6rem;
  display: grid;
  gap: 0.2rem;
}
.menu-movil .header__menu-item { padding: 0.9rem 0; font-size: 1.6rem; }
@media screen and (min-width: 990px) { .menu-movil { display: none; } }

/* ==========================================================================
   BUSCADOR
   ========================================================================== */
.header__inline-search { position: relative; }
.buscador-panel {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  min-width: 32rem;
  max-width: 90vw;
  background: rgb(var(--s5-bg));
  border: 0.1rem solid rgba(var(--s3-fg), 0.18);
  z-index: 20;
  max-height: 42rem;
  overflow-y: auto;
}
.buscador-panel a {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.1rem 1.6rem;
  font-size: 1.4rem;
  color: rgb(var(--s5-fg));
  border-bottom: 0.1rem solid rgba(var(--s3-fg), 0.08);
}
.buscador-panel a:last-child { border-bottom: none; }
.buscador-panel a:hover { background: rgba(var(--s3-bg), 0.55); }
.buscador-panel em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 1.3rem;
}
.buscador-vacio { margin: 0; padding: 1.4rem 1.6rem; font-size: 1.4rem; opacity: 0.7; }

/* ==========================================================================
   REJILLA DE PRODUCTOS
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem var(--spacing-grid-h);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 989px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 749px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 3.2rem 1.6rem; } }

.card-product { display: block; text-align: center; position: relative; }
.card-product .card__media { margin-bottom: 1.4rem; background: rgb(var(--s2-bg)); }
/* Al pasar el cursor aparece la segunda foto DE GOLPE, sin transicion.
   Las dos fotos tienen fondos opuestos (la pieza en negro, la mano en
   crema): cualquier fundido las promedia y a la mitad se ve gris. Sin
   transicion no hay mitad, y el cambio se siente inmediato.
   Solo donde hay cursor de verdad: en telefono no existe el hover.
   La clase .lista se la pone el JS cuando la foto YA bajo. Mientras no
   este, la tarjeta se queda con la primera en vez de parpadear en hueco. */
.card-product .card__media--dos { position: relative; }
.card__foto { display: block; width: 100%; height: auto; }
.card__foto--dos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
@media (hover: hover) {
  .card-product:hover .card__foto--dos.lista,
  .card-product:focus-visible .card__foto--dos.lista { opacity: 1; }
}
.card-product .card__heading {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
  color: rgba(var(--s1-fg), 0.9);
  line-height: 1.35;
}
.card-product:hover .card__heading { text-decoration: underline; text-underline-offset: 0.3rem; }
.card__price {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: rgba(var(--s1-fg), 0.74);
  letter-spacing: 0.02em;
}

.card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgb(var(--s4-bg));
  color: rgb(var(--s4-fg));
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
}
.card-product--agotado .card__media img { opacity: 0.5; }

/* ==========================================================================
   CABECERA DE COLECCIÓN
   ========================================================================== */
.collection-hero { padding: 6.4rem 0 3.2rem; }
.title--hero {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  margin-bottom: 1.8rem;
}
.collection-count {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: rgba(var(--s1-fg), 0.74);
  margin: 2.4rem 0 0;
}

/* ==========================================================================
   MIGAS DE PAN
   ========================================================================== */
.migas {
  padding-block: 2.4rem 0;
  font-size: 1.4rem;
  color: rgba(var(--s1-fg), 0.74);
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.migas a:hover { text-decoration: underline; text-underline-offset: 0.3rem; }

/* ==========================================================================
   FICHA DE PRODUCTO
   ========================================================================== */
.producto {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6rem;
  padding-block: 4rem 7.2rem;
  align-items: start;
}
.producto > * { min-width: 0; }
@media screen and (max-width: 860px) {
  .producto { grid-template-columns: 1fr; gap: 3.2rem; padding-block: 2.4rem 5.6rem; }
}

.producto__media { position: sticky; top: 14rem; }
@media screen and (max-width: 860px) { .producto__media { position: static; } }

.producto__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgb(var(--s2-bg));
  border-radius: var(--radius);
}
.producto__foto--vacia { display: grid; place-items: center; }
.producto__foto--vacia .card__placeholder { font-size: 8rem; }

.producto__miniaturas {
  display: flex;
  gap: 1rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.producto__mini {
  width: 8rem;
  height: 8rem;
  padding: 0;
  border: 0.1rem solid transparent;
  background: rgb(var(--s2-bg));
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.7;
}
.producto__mini img { width: 100%; height: 100%; object-fit: cover; }
.producto__mini:hover { opacity: 1; }
.producto__mini.is-active { border-color: rgb(var(--s1-fg)); opacity: 1; }

.producto__titulo {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
.producto__precio {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin: 0 0 0.8rem;
}
.producto__estado {
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: rgb(var(--s1-fg));
  margin: 0 0 2.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.producto__estado::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 100%;
  background: #2f7a4f;
}
.producto__estado--agotado::before { background: rgba(var(--s1-fg), 0.35); }

.producto__descripcion { margin-bottom: 3.2rem; max-width: 52ch; }
.producto__descripcion p { margin: 0 0 1.4rem; font-size: 1.6rem; line-height: 1.75; }
.producto__descripcion p:last-child { margin-bottom: 0; }

.button--wa { width: 100%; text-align: center; padding: 1.7rem 3.4rem; }

.producto__datos {
  list-style: none;
  margin: 3.2rem 0 0;
  padding: 2.4rem 0 0;
  border-top: 0.1rem solid rgba(var(--s1-fg), 0.14);
  display: grid;
  gap: 1.2rem;
  font-size: 1.4rem;
}
.producto__datos li { display: grid; grid-template-columns: 10rem 1fr; gap: 1.6rem; }
.producto__datos strong {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: rgba(var(--s1-fg), 0.74);
  padding-top: 0.2rem;
}

/* ==========================================================================
   INICIO NUEVO · héroe, secciones, historia y diario
   ========================================================================== */

/* etiqueta junto al icono del header, solo en escritorio */
@media screen and (min-width: 990px) {
  .header__icon-label {
    display: inline;
    /* la misma letra que Anillos / Aretes: Jost, caja alta y baja */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-left: 0.8rem;
    white-space: nowrap;
  }
  .header__icons { gap: 2.6rem; }
}

/* --- piezas comunes --------------------------------------------------- */
.antetitulo {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(var(--s1-fg), 0.74);
  margin: 0 0 var(--aire-rotulo);
}
.antetitulo--claro { color: rgb(var(--s3-bg)); }

.regla {
  display: block;
  width: 4.4rem;
  height: 1px;
  background: rgb(var(--s3-bg));
  margin: var(--aire-rayita) auto 0;
}

.enlace-linea {
  display: inline-block;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  /* la misma letra que el resto de la página: Jost, caja alta y baja */
  font-family: var(--font-body);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.4rem;
  text-decoration: none;
  color: rgb(var(--s1-fg));
  transition: opacity var(--duration-short) ease;
}
.enlace-linea:hover { opacity: 0.6; }
.enlace-linea--claro { color: rgba(var(--s4-fg), 0.82); border-bottom-color: rgba(var(--marca), 0.6); }

.seccion { padding-block: var(--aire-seccion); }
.seccion--crema { background: rgb(var(--s2-bg)); }
.seccion__cabeza { text-align: center; margin-bottom: var(--aire-rayita); }
.seccion__cabeza .title { margin: 0 auto; }
.seccion__cabeza .rich-text__text { margin: var(--aire-rotulo) auto 0; }
.seccion__cierre { text-align: center; margin: var(--aire-cierre) 0 0; }
.title--angosto { max-width: 20ch; margin-inline: auto; }
@media screen and (max-width: 749px) {
  :root { --aire-seccion: 6rem; --aire-rayita: 2.2rem; --aire-cierre: 3.4rem; }
}

/* --- héroe ------------------------------------------------------------ */
.hero {
  background: rgb(var(--s4-bg));
  color: rgb(var(--s4-fg));
  display: grid;
  place-items: stretch;
  min-height: 0;
  padding: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.hero .slideshow__slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;          /* todas las diapositivas en la misma celda */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  align-items: center;
  place-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 58rem;
  text-align: left;
  background: rgb(var(--s4-bg));
  color: rgb(var(--s4-fg));
}
.hero .slideshow__slide:not(.is-active) { pointer-events: none; }
.hero .banner__heading { max-width: none; }
.hero .hero__texto { align-self: center; }
.hero__texto { padding: 7rem 5rem 7rem 6rem; }
.hero .banner__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(3.4rem, 4.2vw, 6rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0 0 2.4rem;
  color: rgb(var(--s4-fg));
}
.hero .banner__text {
  font-size: 1.65rem;
  line-height: 1.8;
  color: rgba(var(--s4-fg), 0.72);
  max-width: 46ch;
  margin: 0 0 3.6rem;
}
.hero__acciones { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.hero .button { background: rgb(var(--s3-bg)); color: rgb(var(--s3-fg)); }

.hero__media { position: relative; display: block; align-self: stretch; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__pie {
  position: absolute; right: 2.6rem; bottom: 2.6rem;
  text-align: right; display: grid; gap: 0.4rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.hero__pieza { font-family: var(--font-heading); font-size: 1.7rem; color: rgb(var(--s4-fg)); }
.hero__precio { font-size: 1.4rem; letter-spacing: 0.04em; color: rgb(var(--s3-bg)); font-variant-numeric: tabular-nums; }

.hero .slideshow__dots { bottom: 3rem; left: 6rem; transform: none; justify-content: flex-start; }
.hero .slideshow__dot { width: 2.6rem; height: 1px; border-radius: 0; background: rgba(255,255,255,0.32); }
.hero .slideshow__dot[aria-current="true"] { background: rgb(var(--s3-bg)); }

@media screen and (max-width: 989px) {
  .hero .slideshow__slide {
    grid-template-columns: 1fr;
    min-height: 0;
    position: relative;
  }
  .hero__texto { order: 2; padding: 3.4rem 2.4rem 5.4rem; text-align: center; }
  .hero__media { order: 1; aspect-ratio: 4 / 5; }
  .hero .banner__text { margin-inline: auto; }
  .hero__acciones { justify-content: center; gap: 2rem; }
  .hero .slideshow__dots { left: 0; right: 0; justify-content: center; bottom: 2rem; }
}

/* --- quiénes somos ---------------------------------------------------- */
.tiempos {
  list-style: none; margin: 0 auto; padding: 0; max-width: 115rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.4rem;
}
.tiempos__num { font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: 0.18em; color: rgba(var(--s1-fg), 0.74); }
.tiempos h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.9rem; margin: 1.2rem 0; }
.tiempos p { font-size: 1.45rem; line-height: 1.9; color: rgba(var(--s1-fg), 0.74); margin: 0; }
@media screen and (max-width: 860px) { .tiempos { grid-template-columns: 1fr; gap: 3.2rem; } }

/* --- colecciones con el nombre encima de la foto ---------------------- */
.card-collection { position: relative; display: block; }
.card-collection .card__media { aspect-ratio: 4 / 5; }
.card-collection__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.6rem;
  display: grid; gap: 0.6rem; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}
.card-collection__pie .card__heading { font-size: 2.1rem; color: rgb(var(--s4-fg)); margin: 0; }
.card-collection__pie .card__price {
  font-size: 1.4rem; letter-spacing: 0.02em;
  color: rgba(200,182,226,0.95); margin: 0;
}
.card-collection:hover .card__heading { text-decoration: underline; text-underline-offset: 0.3rem; }

/* --- diario ----------------------------------------------------------- */
.notas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; }
@media screen and (max-width: 989px) { .notas { grid-template-columns: repeat(2, 1fr); gap: 3.2rem; } }
@media screen and (max-width: 749px) { .notas { grid-template-columns: 1fr; gap: 3.6rem; } }

.nota { display: block; text-decoration: none; color: inherit; }
.nota__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: rgb(var(--s2-bg)); }
.nota__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease; }
.nota:hover .nota__media img { opacity: 0.86; }
.nota__meta { font-size: 1.3rem; letter-spacing: 0.02em; color: rgba(var(--s1-fg), 0.74); margin: 1.8rem 0 0; }
.nota__titulo { font-family: var(--font-heading); font-size: 2.1rem; line-height: 1.32; margin: 1rem 0 0; }
.nota:hover .nota__titulo { text-decoration: underline; text-underline-offset: 0.3rem; }
.nota__resumen { font-size: 1.4rem; line-height: 1.8; color: rgba(var(--s1-fg), 0.74); margin: 1rem 0 1.4rem; }
.nota .enlace-linea { font-size: 1.35rem; letter-spacing: 0.02em; padding-bottom: 0.3rem; }

/* --- nota completa ---------------------------------------------------- */
.nota-larga { max-width: 72rem; margin: 0 auto; padding: 2.4rem 2rem 5rem; }
.nota-larga__cabeza { text-align: center; margin-bottom: 3.4rem; }
.nota-larga__cabeza h1 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(2.8rem, 4vw, 4.4rem); line-height: 1.14; letter-spacing: 0.01em;
  margin: 1.2rem 0 0;
}
.nota-larga__entrada { font-size: 1.7rem; line-height: 1.8; color: rgba(var(--s1-fg), 0.74); margin: 1.6rem 0 0; }
.nota__foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 3.4rem; }
.nota-larga__cuerpo h2 {
  font-family: var(--font-heading); font-weight: 400; font-size: 2.2rem;
  margin: 3.6rem 0 1.2rem; padding-top: 2.4rem; border-top: 1px solid rgba(var(--s1-fg), 0.12);
}
.nota-larga__cuerpo p { font-size: 1.65rem; line-height: 1.95; color: rgba(var(--s1-fg), 0.82); margin: 0 0 1.6rem; }
.nota-larga__cuerpo a { color: rgb(var(--s1-fg)); text-decoration: underline; text-underline-offset: 0.3rem; }
.nota-larga__pie {
  margin-top: 4.4rem; padding-top: 3rem; border-top: 1px solid rgba(var(--s1-fg), 0.12); text-align: center;
}
.nota-larga__pie p { font-size: 1.5rem; color: rgba(var(--s1-fg), 0.74); margin: 0 0 2rem; }

/* el pie ahora lleva 4 columnas */
.footer__blocks { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media screen and (max-width: 989px) { .footer__blocks { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 749px) { .footer__blocks { grid-template-columns: 1fr; } }

/* azulejo de cierre de la rejilla de colecciones */
.card-collection--todo .card__media { background: rgb(var(--s3-bg)); }
.card-collection--todo .card-collection__pie { background: none; }
.card-collection--todo .card__heading { color: rgb(var(--s3-fg)); }
.card-collection--todo .card__price { color: rgba(var(--s3-fg), 0.74); }

/* el texto del heroe alineado con el resto de la pagina */
.hero__texto {
  padding-inline-start: max(2.4rem, calc((100vw - var(--page-width)) / 2 + 1.5rem));
  padding-inline-end: 5rem;
}
.hero .slideshow__dots { left: max(2.4rem, calc((100vw - var(--page-width)) / 2 + 1.5rem)); }
@media screen and (max-width: 989px) {
  .hero__texto { padding-inline: 2.4rem; }
  .hero .slideshow__dots { left: 0; }
}

/* la marca del pie, con el ® del mismo tamano que en el header */
.footer__wordmark sup {
  font-family: var(--font-body);
  font-size: 0.4em;
  top: -0.7em;
  margin-left: 0.18em;
  position: relative;
  vertical-align: baseline;
  color: rgb(var(--s4-btn));
}

/* ==========================================================================
   COLECCIÓN · barra de filtros y orden, en línea, sin recuadros
   ========================================================================== */
.barra { border-block: 1px solid rgba(var(--s1-fg), 0.16); margin-top: 3.4rem; }
.barra__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.4rem; padding-block: 1.4rem; flex-wrap: wrap;
}
.barra__grupo { display: flex; align-items: center; gap: 2.6rem; flex-wrap: wrap; }
.barra__etiqueta {
  font-family: var(--font-body); font-size: 1.4rem; letter-spacing: 0.02em;
  color: rgba(var(--s1-fg), 0.74);
}

.filtro { position: relative; }
.filtro__boton,
.filtro__interruptor {
  display: inline-flex; align-items: center; gap: 0.9rem;
  background: none; border: none; border-bottom: 1px solid rgba(var(--s1-fg), 0.35);
  padding: 0 0 0.4rem; margin: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 1.4rem; letter-spacing: 0.04em;
  color: rgb(var(--s1-fg));
  transition: border-color var(--duration-short) ease;
}
.filtro__boton:hover, .filtro__interruptor:hover { border-bottom-color: rgb(var(--s1-fg)); }
.filtro__interruptor.is-elegida,
.filtro__boton[aria-expanded="true"] { border-bottom-color: rgb(var(--s3-bg)); border-bottom-width: 2px; }
.filtro__flecha { width: 1.1rem; height: 1.1rem; transition: transform 0.18s var(--ease-hermes); }
.filtro__boton[aria-expanded="true"] .filtro__flecha { transform: rotate(180deg); }
.filtro__n { font-size: 1.3rem; color: rgba(var(--s1-fg), 0.74); font-variant-numeric: tabular-nums; }

.filtro__panel {
  position: absolute; z-index: 20; top: calc(100% + 1rem); left: 0; min-width: 22rem;
  background: rgb(var(--s1-bg)); border: 1px solid rgba(var(--s1-fg), 0.14);
  padding: 0.6rem 0; display: grid;
  box-shadow: 0 12px 34px rgba(0,0,0,0.09);
}
.barra__grupo--fin .filtro__panel { left: auto; right: 0; }
.filtro__opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 0.9rem 1.6rem; font-family: var(--font-body); font-size: 1.4rem;
  letter-spacing: 0.04em; color: rgba(var(--s1-fg), 0.78);
  transition: background-color var(--duration-short) ease;
}
.filtro__opcion:hover { background: rgb(var(--s2-bg)); }
.filtro__opcion.is-elegida { color: rgb(var(--s1-fg)); }
.filtro__opcion.is-elegida::after { content: ''; width: 1.4rem; height: 1px; background: rgb(var(--s3-bg)); }
.filtro__opcion--limpiar { border-top: 1px solid rgba(var(--s1-fg), 0.1); margin-top: 0.4rem; color: rgba(var(--s1-fg), 0.74); }

.barra__activos { display: flex; align-items: center; gap: 1.4rem; padding-bottom: 1.4rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 0.9rem;
  background: none; border: none; border-bottom: 1px solid rgba(var(--marca), 0.9);
  padding: 0 0 0.3rem; cursor: pointer;
  font-family: var(--font-body); font-size: 1.3rem; letter-spacing: 0.04em;
  color: rgba(var(--s1-fg), 0.72);
}
.chip svg { width: 1rem; height: 1rem; }
.chip--limpiar { border-bottom-color: transparent; color: rgba(var(--s1-fg), 0.74); }
.chip--limpiar:hover { border-bottom-color: rgba(var(--s1-fg), 0.3); }

/* etiquetas sobre la foto */
/* right: auto: la regla vieja de arriba dejaba right: 1rem y "Nuevo" salia
   como una franja casi del ancho de la foto, 1 rem corta del lado derecho. */
.card__badge {
  position: absolute; left: 0; top: 0; right: auto; z-index: 2;
  font-family: var(--font-body); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.02em;
  line-height: 1.4; padding: 0.4rem 1rem;
  background: rgba(0,0,0,0.72); color: rgb(var(--s4-fg));
}
.card__badge--nuevo { background: rgb(var(--s3-bg)); color: rgb(var(--s3-fg)); }
.card__badge--ultima { left: 0; right: 0; top: auto; bottom: 0; text-align: center; }
.card-product .card__badge--ultima { bottom: 5.6rem; }

/* pie de la rejilla: cuántas llevas y ver más */
.rejilla__celda[hidden] { display: none; }
.rejilla__pie { text-align: center; padding-top: 5.4rem; }
.rejilla__cuenta { font-size: 1.4rem; letter-spacing: 0.04em; color: rgba(var(--s1-fg), 0.74); margin: 0; font-variant-numeric: tabular-nums; }
.rejilla__barra { display: block; width: 19rem; height: 1px; background: rgba(var(--s1-fg), 0.14); margin: 1.2rem auto 0; }
.rejilla__barra span { display: block; height: 1px; background: rgb(var(--marca)); transition: width 0.3s var(--ease-hermes); }
.rejilla__pie .enlace-linea { margin-top: 2.6rem; background: none; border-top: none; border-inline: none; cursor: pointer; }
.rejilla__vacio { text-align: center; padding: 4rem 0; color: rgba(var(--s1-fg), 0.74); }
.rejilla__vacio .enlace-linea { margin-left: 1rem; cursor: pointer; }

@media screen and (max-width: 749px) {
  .barra__interior { gap: 1.2rem; }
  .barra__grupo { gap: 1.6rem; width: 100%; justify-content: flex-start; }
  .barra__grupo--fin { justify-content: space-between; }
  .filtro__panel { min-width: 20rem; }
}

/* ==========================================================================
   FICHA DE PIEZA · galería, columna de compra y acordeón
   ========================================================================== */
.producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46.8rem;
  gap: 5.4rem;
  align-items: start;
  padding-block: 2.4rem 6rem;
}
.producto__galeria { display: grid; grid-template-columns: 9.6rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.producto__miniaturas { display: flex; flex-direction: column; gap: 1.2rem; order: 1; }
.producto__principal { order: 2; position: relative; }
.producto__mini {
  width: 9.6rem; height: 9.6rem; padding: 0; border: none; background: rgb(var(--s2-bg));
  cursor: pointer; opacity: 0.72; transition: opacity var(--duration-short) ease, outline-color var(--duration-short) ease;
  outline: 1px solid transparent; outline-offset: 3px;
}
.producto__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producto__mini:hover { opacity: 1; }
.producto__mini.is-active { opacity: 1; outline-color: rgb(var(--marca)); }

.producto__lupa { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; position: relative; }
.producto__foto { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: rgb(var(--s2-bg)); }
.producto__foto--vacia { display: grid; place-items: center; }
.producto__lupa-aviso {
  position: absolute; right: 1.6rem; bottom: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: rgba(255,255,255,0.92); padding: 0.8rem 1.3rem;
  font-family: var(--font-body); font-size: 1.3rem; letter-spacing: 0.02em;
  opacity: 0; transition: opacity var(--duration-short) ease;
}
.producto__lupa:hover .producto__lupa-aviso, .producto__lupa:focus-visible .producto__lupa-aviso { opacity: 1; }
.producto__lupa-aviso svg { width: 1.4rem; height: 1.4rem; }

.producto__titulo {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(2.6rem, 3vw, 3.8rem); line-height: 1.12; letter-spacing: 0.01em; margin: 0;
}
.compra__precio-fila { display: flex; align-items: baseline; gap: 1.4rem; margin-top: 1.8rem; }
.producto__precio { font-size: 2.4rem; letter-spacing: 0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.compra__impuestos { font-size: 1.4rem; letter-spacing: 0.02em; color: rgba(var(--s1-fg), 0.74); }
.producto__estado { display: inline-flex; align-items: center; gap: 0.9rem; font-size: 1.4rem; letter-spacing: 0.02em; color: rgb(var(--s1-fg)); margin: 1.4rem 0 0; }
/* Mientras otra clienta la paga: el texto ocupa dos o tres renglones; el
   punto (apagado, como el de agotado) queda a la altura del primero. */
.producto__estado--apartada { display: flex; align-items: flex-start; line-height: 1.6; }
.producto__estado--apartada::before { flex: none; background: rgba(var(--s1-fg), 0.35); margin-top: calc((1.6em - 0.6rem) / 2); }

.compra { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid rgba(var(--s1-fg), 0.14); }
.compra__rotulo { font-family: var(--font-body); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.02em; color: rgb(var(--s1-fg)); }
.compra__talla-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; }
.compra__ayuda { font-size: 1.4rem; letter-spacing: 0.02em; color: rgb(var(--s1-fg)); border-bottom: 1px solid rgba(var(--s1-fg), 0.3); padding-bottom: 0.2rem; }
.compra__nota { font-size: 1.4rem; line-height: 1.75; color: rgba(var(--s1-fg), 0.74); margin: 1rem 0 2.6rem; }

.compra__fila { display: grid; grid-template-columns: 11.8rem minmax(0, 1fr); gap: 1.4rem; }
.compra__cantidad {
  height: 5.4rem; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid rgba(var(--s1-fg), 0.28); padding-inline: 1.2rem;
}
.compra__cantidad button {
  background: none; border: none; cursor: pointer; padding: 0 0.6rem;
  font-size: 1.7rem; line-height: 1; color: rgba(var(--s1-fg), 0.75); font-family: var(--font-body);
}
.compra__cantidad button:hover { color: rgb(var(--s1-fg)); }
.compra__cantidad span { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.boton {
  height: 5.4rem; display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-family: var(--font-body); font-size: 1.5rem; letter-spacing: 0.02em; text-transform: none;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none;
  transition: opacity var(--duration-short) ease;
  padding-inline: 1.6rem; text-align: center;
}
.boton svg { width: 1.7rem; height: 1.7rem; flex: none; }
.boton:hover { opacity: 0.85; }
.boton[disabled] { opacity: 0.35; cursor: not-allowed; }
.boton--negro { background: rgb(var(--s3-bg)); color: rgb(var(--s3-fg)); }
.boton--negro:hover { opacity: 0.82; }
.boton--lila { background: rgb(var(--s1-fg)); color: rgb(var(--s1-bg)); margin-top: 1.2rem; }
.boton--linea { background: none; color: rgb(var(--s1-fg)); border-color: rgba(var(--s1-fg), 0.28); margin-top: 1.2rem; }
/* Sin "Agregar" (la esta pagando otra persona) el primer boton no suma su margen al de la caja. */
.compra > .boton:first-child { margin-top: 0; }
.boton.is-listo { background: #2F7D5B; color: #fff; }
.boton.is-espera { background: rgba(var(--s1-fg), 0.55); letter-spacing: 0.02em; }
.compra__micro { font-size: 1.4rem; line-height: 1.7; color: rgb(var(--s1-fg)); margin: 1.6rem 0 0; text-align: center; }
/* Envio y cambios: en un renglon con su punto cuando caben; si no, uno
   arriba del otro, sin un punto colgando al final del renglon. */
.compra__micro span + span::before { content: "· "; }
.cesta__resumen .compra__micro span { display: block; }
.cesta__resumen .compra__micro span + span::before { content: none; }
@media screen and (max-width: 520px) {
  .compra__micro span { display: block; text-wrap: balance; }
  .compra__micro span + span::before { content: none; }
}
/* En un telefono de 320, "Agregar a la cesta" se partia en dos renglones y el
   boton quedaba mas alto que la caja de la cantidad de al lado. */
@media screen and (max-width: 380px) {
  .compra__fila { gap: 1rem; }
  .compra__fila .boton { padding-inline: 1rem; }
}

.acordeon { margin-top: 3.2rem; border-top: 1px solid rgba(var(--s1-fg), 0.14); }
.acordeon__bloque { border-bottom: 1px solid rgba(var(--s1-fg), 0.14); }
.acordeon__bloque summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding: 1.8rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-body); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.02em;
}
.acordeon__bloque summary::-webkit-details-marker { display: none; }
.acordeon__bloque summary svg { width: 1.2rem; height: 1.2rem; flex: none; transition: transform 0.2s var(--ease-hermes); }
.acordeon__bloque[open] summary svg { transform: rotate(180deg); }
.acordeon__cuerpo { padding-bottom: 2rem; }
.acordeon__cuerpo p { font-size: 1.5rem; line-height: 1.85; color: rgba(var(--s1-fg), 0.82); margin: 0 0 1.2rem; }
.acordeon__cuerpo p:last-child { margin-bottom: 0; }
.acordeon__cuerpo a { color: rgb(var(--s1-fg)); text-decoration: underline; text-underline-offset: 0.3rem; }
.datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.datos li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.6rem; font-size: 1.4rem; line-height: 1.7; }
.datos strong { font-weight: 400; color: rgba(var(--s1-fg), 0.74); }
.datos span { color: rgb(var(--s1-fg)); }

@media screen and (max-width: 989px) {
  .producto { grid-template-columns: 1fr; gap: 3.2rem; }
  .producto__galeria { grid-template-columns: 1fr; }
  .producto__miniaturas { order: 2; flex-direction: row; overflow-x: auto; }
  .producto__principal { order: 1; }
  .producto__mini { width: 7.2rem; height: 7.2rem; flex: none; }
  .producto__lupa-aviso { opacity: 1; }
}

/* visor de foto */
.visor {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.94);
  display: grid; place-items: center; padding: 4rem 2rem;
}
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor__cerrar {
  position: absolute; top: 2rem; right: 2rem; width: 4.4rem; height: 4.4rem;
  background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer;
}
.visor__cerrar svg { width: 2.2rem; height: 2.2rem; }

/* ==========================================================================
   LA CESTA
   ========================================================================== */
.cesta { padding-block: 4.8rem 7rem; }
.cesta__vacia { text-align: center; padding: 4rem 0; }
.cesta__vacia p { color: rgba(var(--s1-fg), 0.74); margin-bottom: 2rem; }
.cesta__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 38rem; gap: 5.4rem; align-items: start; margin-top: 3.4rem; }
.cesta__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--s1-fg), 0.14); }
.cesta__pieza {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14rem 3.4rem;
  align-items: center; gap: 1.8rem; padding: 2rem 0;
  border-bottom: 1px solid rgba(var(--s1-fg), 0.1);
}
.cesta__nombre { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.35; color: rgb(var(--s1-fg)); }
.cesta__nombre:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.cesta__unit { font-size: 1.4rem; color: rgba(var(--s1-fg), 0.74); font-variant-numeric: tabular-nums; }
.cesta__cant { display: inline-flex; align-items: center; gap: 0.4rem; }
.cesta__cant button { background: none; border: none; cursor: pointer; width: 3rem; height: 4rem; font-size: 1.6rem; color: rgba(var(--s1-fg), 0.74); }
.cesta__cant button:hover { color: rgb(var(--s1-fg)); }
.cesta__cant > span { min-width: 2.4rem; text-align: center; font-size: 1.45rem; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(var(--s1-fg), 0.16); padding-bottom: 0.2rem; }
/* 14rem y sin partir: cabe "$ 199,999.00 MXN" en un renglon. */
.cesta__sub { text-align: right; font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cesta__quitar { background: none; border: none; cursor: pointer; color: rgba(var(--s1-fg), 0.6); width: 3.4rem; height: 3.4rem; }
.cesta__quitar:hover { color: rgb(var(--s1-fg)); }
.cesta__quitar svg { width: 1.3rem; height: 1.3rem; }

.cesta__resumen { background: rgb(var(--s2-bg)); padding: 3rem 2.8rem; position: sticky; top: 2rem; }
.cesta__resumen-titulo { font-family: var(--font-heading); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.01em; margin: 0 0 2rem; color: rgb(var(--s1-fg)); }
.cesta__linea { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; padding: 0.9rem 0; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.cesta__linea--total { border-top: 1px solid rgba(var(--s1-fg), 0.16); margin-top: 0.9rem; padding-top: 1.6rem; font-size: 1.8rem; }
.cesta__aviso { font-size: 1.4rem; line-height: 1.7; color: rgba(var(--s1-fg), 0.74); margin: 0.6rem 0 1.6rem; }
.cesta__resumen .boton { margin-top: 1.2rem; width: 100%; }
/* El boton de la tienda es lila y este resumen tambien: sobre lila
   "Pagar con tarjeta" desaparecia. Aqui va en tinta. */
.cesta__resumen .boton--negro { background: rgb(var(--s1-fg)); color: rgb(var(--s1-bg)); }
/* En un telefono de 320 "Subtotal $ 1,335.00 MXN" no cabia y el MXN bajaba solo:
   el monto no se parte y el resumen gana 1.6rem de ancho. */
.cesta__linea > span:last-child { white-space: nowrap; }
@media screen and (max-width: 380px) {
  .cesta__resumen { padding-inline: 2rem; }
}

@media screen and (max-width: 989px) {
  .cesta__cuerpo { grid-template-columns: 1fr; gap: 3.2rem; }
  .cesta__resumen { position: static; }
}
/* Hasta 1199 el renglon va como en el telefono (nombre, precio por pieza y cantidad uno bajo
   otro; total y quitar a la derecha): entre 990 y 1199 la lista mide 516-725 y en cinco
   columnas el nombre se quedaba en 50 px. */
@media screen and (max-width: 1199px) {
  .cesta__pieza { grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: auto; row-gap: 0.8rem; }
  .cesta__unit { grid-column: 1; }
  .cesta__cant { grid-column: 1; }
  .cesta__sub { grid-column: 2; grid-row: 1; }
  .cesta__quitar { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: center; }
}

/* Cualquier elemento con el atributo hidden se esconde de verdad.
   Sin esto, un display: grid/flex propio le gana al hidden y el panel
   de filtros se quedaba abierto tapando el resto de la barra. */
[hidden] { display: none !important; }

/* el boton crece si el texto se va a dos lineas, pero nunca mide menos de 54 */
.boton { height: auto; min-height: 5.4rem; padding-block: 1.2rem; line-height: 1.4; }

/* el globo del contador, pegado al icono de la cesta y no encima */
@media screen and (min-width: 990px) {
  .cart-count-bubble { left: 1.3rem; top: -0.7rem; }
}

/* ==========================================================================
   LOCKUP DE LA MARCA · tamaños por pantalla y versión del pie
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Reparto medido del header de Hermès (px CSS, viewport 1440):
       5 de aire arriba · 38 el logo entero · 25 del logo al menú
       · 7.5 de trazo del menú · 15 al borde de abajo  =  91 px de header.
     La lección: el logo es CHICO y el aire va entre el logo y el menú,
     no repartido en migajas por todos lados. Aquí va lo mismo con tu marca. */
  /* El nombre recupera tamaño (26 px) y el hueco entre el nombre y las
     secciones se va casi entero: 6 px. Antes eran 18 px de nada y un nombre
     de 17: el alto ahora se gasta en LETRA, no en aire.
       8 arriba · ave 34 · 4 · Colibrí 26 · 6 · secciones 19 · 9 abajo
     line-height 1 en el nombre: con 0.82 la caja subía y el ave se le
     encimaba a la C. Ese era el choque. */
  .colibri-marca    { height: 5.2rem; }
  .colibri-wordmark { font-size: 1.8rem; line-height: 1; letter-spacing: 0.03em; }
  /* Los tres huecos del header valen lo mismo: arriba del ave, entre el
     nombre y la fila de colecciones, y debajo de esa fila. Eso es lo que
     lo hace leerse simétrico en vez de deforme. */
  .section-header .header { padding-top: 1.2rem; padding-bottom: 1.2rem; row-gap: 1.2rem; }
  /* El <nav> es un bloque y heredaba el line-height 1.7 del body: su caja medía
     27 px aunque la lista de adentro midiera 16. Once píxeles de nada. */
  /* La fila de títulos se pliega para dejarle su lugar al buscador. */
  .section-header .header__inline-menu {
    display: grid;
    grid-template-rows: 1fr;
    line-height: 1;
    transition: grid-template-rows var(--abre) var(--ease-hermes);
  }
  .section-header.buscador-abierto .header__inline-menu { grid-template-rows: 0fr; }
  .section-header .header__inline-menu > .plegable {
    overflow: hidden;
    min-height: 0;
    display: flex;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.22s var(--ease-hermes);
  }
  .section-header.buscador-abierto .header__inline-menu > .plegable { opacity: 0; }
  .section-header .header__heading-link { gap: 0.2rem; }
  .section-header .header__menu-item {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.25;
  }
  /* al plegarse el header la marca se encoge antes de desaparecer,
     así el movimiento se siente continuo y no un corte seco */
}
@media screen and (max-width: 989px) {
  .header__heading-link { gap: 0.3rem; }
  .colibri-marca    { height: 4rem; }
  .colibri-wordmark { font-size: 1.5rem; line-height: 1; letter-spacing: 0.03em; }
  /* lockup = 28 ave + 3 + 20 nombre = 51; + 7 y 7 de aire = 65 */
  .header { min-height: 6.5rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
}

/* la marca en el pie, sobre negro: va la de dos tintas */
.footer__wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.footer__marca { display: block; width: auto; height: 4.6rem; }
.footer__wordmark span {
  font-family: var(--font-marca);
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: rgb(var(--s4-fg));
}
.footer__wordmark sup {
  font-family: var(--font-body);
  font-size: 0.34em;
  top: -0.8em;
  margin-left: 0.04em;
  letter-spacing: 0;
  position: relative;
  vertical-align: baseline;
  color: rgb(var(--s4-btn));
}

/* sin cursivas ni negritas fingidas (Prata trae un solo peso) */
.title, .banner__heading, .producto__titulo, .card__heading,
.colibri-wordmark, .nota__titulo, .nota-larga__cabeza h1,
.multicolumn-card__title, .tiempos h3, .vitrina__titulo, .cesta__nombre, .cesta__resumen-titulo,
.cajon__nombre, .cajon__titulo-vacio, .asis__titulo, .footer h4, .entrada__titulo, .cuenta__rotulo, .cuenta__hola {
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
}

/* ==========================================================================
   VITRINA · la portada. Una pieza sobre negro, sin nada que se mueva.
   El fondo negro de las fotos es el mismo negro del bloque: la pieza flota.
   ========================================================================== */
.vitrina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52%;
  align-items: center;
  background: rgb(var(--s4-bg));
  color: rgb(var(--s4-fg));
  min-height: 58rem;
}
.vitrina__texto { padding: 7rem 5rem 7rem 8rem; }
.vitrina__titulo {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(3.4rem, 4.2vw, 5.6rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0 0 2.2rem;
  color: rgb(var(--s4-fg));
  text-wrap: balance;
}
.vitrina__parrafo {
  font-size: 1.6rem;
  line-height: 1.95;
  color: rgba(var(--s4-fg), 0.7);
  max-width: 42ch;
  margin: 0 0 3.6rem;
}
.vitrina__acciones { display: flex; align-items: center; gap: 2.8rem; flex-wrap: wrap; }
.vitrina .button {
  background: rgb(var(--marca));
  border-color: rgb(var(--marca));
  color: rgb(var(--s3-fg));
}

.vitrina__media {
  position: relative;
  align-self: stretch;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.vitrina__media img {
  width: 100%;
  height: 100%;
  min-height: 58rem;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-hermes);
}
.vitrina__media:hover img { transform: scale(1.02); }
.vitrina__pie {
  position: absolute;
  right: 3.4rem;
  bottom: 3rem;
  display: grid;
  gap: 0.5rem;
  text-align: right;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.vitrina__pieza { font-family: var(--font-heading); font-size: 1.7rem; color: rgb(var(--s4-fg)); }
.vitrina__precio {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: rgb(var(--marca));
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 989px) {
  .vitrina { grid-template-columns: 1fr; min-height: 0; }
  .vitrina__media { order: 1; }
  .vitrina__media img { min-height: 0; aspect-ratio: 4 / 5; }
  .vitrina__texto { order: 2; padding: 3.6rem 2.4rem 4.4rem; text-align: center; }
  .vitrina__parrafo { margin-inline: auto; }
  .vitrina__acciones { justify-content: center; gap: 2rem; }
  .vitrina__pie { right: 2rem; bottom: 2rem; }
}


/* ==========================================================================
   BUSCADOR · el cajón es parte del header, baja en flujo y empuja la página.
   Nada flota encima de nada: por eso ningún overflow lo puede recortar.
   ========================================================================== */
.cajon {
  display: grid;
  grid-template-rows: 0fr;
  background: rgb(var(--s3-bg));
  transition: grid-template-rows var(--abre) var(--ease-hermes);
}
.section-header.buscador-abierto .cajon { grid-template-rows: 1fr; }
.cajon__ventana { overflow: hidden; min-height: 0; }
.cajon__int {
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity 0.28s var(--ease-hermes) 0.09s,
              transform var(--abre) var(--ease-hermes);
}
.section-header.buscador-abierto .cajon__int { opacity: 1; transform: translateY(0); }
.cajon__caja { padding-top: 1.8rem; padding-bottom: 3rem; }

.cajon__rejilla { display: grid; gap: 3.2rem; }
@media (min-width: 990px) {
  .cajon__rejilla { grid-template-columns: 25rem minmax(0, 1fr); gap: 7.2rem; align-items: start; }
}

.cajon__rotulo {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--s3-fg), 0.74);
  margin: 0 0 1.4rem;
}

/* columna izquierda · en qué colecciones cayó la búsqueda */
.cajon__lado { display: flex; flex-direction: column; gap: 2.8rem; }
.cajon__grupo { display: flex; flex-direction: column; gap: 1.4rem; }
.cajon__col, .cajon__sug {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: rgb(var(--s3-fg));
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}
.cajon__sug { justify-content: flex-start; color: rgba(var(--s3-fg), 0.8); }
.cajon__col:hover span:first-child,
.cajon__sug:hover { text-decoration: underline; text-underline-offset: 0.4rem; }
.cajon__n { font-size: 1.3rem; color: rgba(var(--s3-fg), 0.74); font-variant-numeric: tabular-nums; }

/* columna derecha · las piezas */
.cajon__piezas { display: flex; flex-direction: column; }
.cajon__pieza {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 0.9rem 1.2rem 0.9rem 0;
  border-bottom: 0.1rem solid rgba(var(--s3-fg), 0.13);
  text-decoration: none;
  color: rgb(var(--s3-fg));
  transition: background 0.16s var(--ease-hermes);
}
.cajon__pieza:hover { background: rgba(var(--s3-fg), 0.06); }
.cajon__mini {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  background: #0a0a0a;
  display: block;
  object-fit: cover;
}
.cajon__nombre {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  line-height: 1.3;
  flex-grow: 1;
  color: rgba(var(--s3-fg), 0.7);
}
.cajon__nombre b { font-weight: inherit; color: rgb(var(--s3-fg)); }
.cajon__precio {
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--s3-fg), 0.74);
  white-space: nowrap;
}
.cajon__cierre { margin-top: 2.2rem; }

/* nada encontrado */
.cajon__titulo-vacio { font-family: var(--font-heading); font-size: 2rem; line-height: 1.4; margin: 0 0 1.2rem; }
.cajon__texto-vacio { font-size: 1.45rem; line-height: 1.75; color: rgba(var(--s3-fg), 0.74); max-width: 54rem; margin: 0; }

@media (max-width: 989px) {
  /* Con la lupa abierta el header se queda solo con el campo. */
  .section-header.buscador-abierto .header__heading,
  .section-header.buscador-abierto .header__icons,
  .section-header.buscador-abierto .header-drawer { display: none; }
  .section-header.buscador-abierto .header { min-height: 0; }
  .section-header.buscador-abierto .header__inline-search { width: auto; flex-grow: 1; }
  .section-header.buscador-abierto .header__inline-search .header__search-input { display: block; }
  .section-header.buscador-abierto .header__inline-search .campo { display: block; }
  .header__inline-search .campo { display: none; }
  .header__inline-search .hl-icon--search { cursor: pointer; }
  /* En celular el campo va oculto: la caja debe medir lo que mide la lupa,
     no los 17.8rem del escritorio, o se le encima al lockup centrado. */
  .header__inline-search { width: auto; }
  /* el ave de 40 px pide un poco más de alto que los 6.5rem de antes */
  .header { min-height: 7rem; }
  .cajon__caja { padding-top: 1.4rem; padding-bottom: 2.2rem; }
  .cajon__rejilla { gap: 2.2rem; }
  .cajon__lado .cajon__grupo + .cajon__grupo { display: none; }  /* "lo más buscado" no cabe */
  .cajon__lado { gap: 0; }
  .cajon__nombre { font-size: 1.45rem; }
  .cajon__mini { width: 4.6rem; height: 4.6rem; }
}

/* Al pedir "Ver las N piezas" se abre la lista entera aquí mismo. */
.cajon__piezas--todas { max-height: 46rem; overflow-y: auto; }
@media (max-width: 989px) { .cajon__piezas--todas { max-height: 38rem; } }

/* ---------- la cuenta de quien compra -------------------------------
   Un solo sistema para las dos pantallas: rótulo, raya, renglones. Todo
   sale de una retícula de 8 px. Los botones miden lo mismo sean <a> o
   <button>, y el margin-top que .boton--linea trae de la cesta se anula
   aquí: ese margen era el que hacía que "Borrar mi cuenta" se viera más
   grande que los otros dos. */

/* Cuenta y entrar: como en toda la tienda (y en skin care), los títulos en
   Prata y los botones y el texto en Jost. Lo que se veía como dos páginas
   pegadas era Prata TAMBIÉN en los botones. */
.entrada .boton,
.cuenta .boton {
  margin-top: 0; font-family: var(--font-body); font-weight: 500;
  font-size: 1.5rem; letter-spacing: 0.01em;
}

.entrada__rotulo,
.cuenta__rotulo {
  /* Antes iba en mayúsculas de 11 px, separadas y en gris: se leía como
     un letrero, no como un título. Ahora es un título normal, en tinta. */
  display: block; font-family: var(--font-heading); font-weight: 400; font-size: 2.2rem;
  line-height: 1.3; letter-spacing: 0.01em; text-transform: none;
  color: rgb(var(--s1-fg)); margin: 0 0 1.6rem;
}
/* El que va arriba del "Hola" y el que va sobre el campo del correo son
   etiquetas, no títulos de sección: más chicos, pero igual de legibles. */
.cuenta__cab .cuenta__rotulo,
.entrada__forma .entrada__rotulo,
p.entrada__rotulo {
  font-family: var(--font-body); font-size: 1.5rem; letter-spacing: 0.01em;
}

/* ---- entrar ---- */
.entrada { max-width: 44rem; padding-top: 8rem; padding-bottom: 10rem; }
.entrada__titulo {
  font-family: var(--font-heading); font-weight: 400; font-size: 3.4rem;
  line-height: 1.2; letter-spacing: 0.01em; margin: 0 0 2.4rem;
}
.entrada__texto { font-size: 1.6rem; line-height: 1.7; font-weight: 400; margin: 0; }
.entrada__texto b { font-weight: 400; overflow-wrap: anywhere; }
.entrada__aviso {
  margin: 2.4rem 0 0; padding: 1.6rem 2rem; border-left: 2px solid rgb(164, 52, 47);
  background: rgba(164, 52, 47, 0.05); font-size: 1.4rem; line-height: 1.6;
}
.entrada__forma { margin-top: 4rem; display: flex; flex-direction: column; }
.entrada__forma .entrada__rotulo { margin-bottom: 1.2rem; }
.entrada__campo {
  width: 100%; border: 0; border-bottom: 1px solid rgb(var(--s1-fg)); border-radius: 0;
  background: none; padding: 0 0 1.2rem; font-family: var(--font-body); font-size: 2rem;
  font-weight: 400; line-height: 1.4; color: rgb(var(--s1-fg)); -webkit-appearance: none; appearance: none;
}
.entrada__campo::placeholder { color: rgba(var(--s1-fg), 0.62); }
.entrada__campo:focus { outline: none; border-bottom-width: 2px; padding-bottom: 1.1rem; }
.entrada__error { margin: 1.2rem 0 0; font-size: 1.4rem; line-height: 1.6; color: rgb(164, 52, 47); }
.entrada .entrada__boton { width: 100%; margin-top: 3.2rem; }
.entrada__huella .boton { width: 100%; }
.entrada__o {
  display: flex; align-items: center; gap: 1.6rem; margin: 2.4rem 0;
  font-size: 1.4rem; font-weight: 400; color: rgba(var(--s1-fg), 0.82);
}
.entrada__o::before,
.entrada__o::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(var(--s1-fg), 0.14); }
.entrada__promesas {
  list-style: none; margin: 5.6rem 0 0; padding: 0;
  border-top: 1px solid rgba(var(--s1-fg), 0.18);
}
.entrada__promesas li {
  padding: 2rem 0; border-bottom: 1px solid rgba(var(--s1-fg), 0.1);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.entrada__promesa-t { font-family: var(--font-body); font-weight: 500; font-size: 1.6rem; line-height: 1.4; }
.entrada__promesa-s { font-size: 1.5rem; line-height: 1.6; font-weight: 400; color: rgba(var(--s1-fg), 0.82); }
.entrada__legal { margin: 2.4rem 0 0; font-size: 1.4rem; line-height: 1.6; font-weight: 400; color: rgba(var(--s1-fg), 0.82); }
.entrada__legal a,
.entrada__cambiar,
.cuenta__accion {
  color: rgb(var(--s1-fg)); text-decoration: underline; text-decoration-color: rgb(var(--marca));
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.entrada__pista { margin: 1.6rem 0 0; font-size: 1.5rem; line-height: 1.6; font-weight: 400; color: rgba(var(--s1-fg), 0.82); }
.entrada__cambiar {
  display: block; margin: 2.4rem auto 0; background: none; border: 0; padding: 0.4rem 0;
  font-family: var(--font-body); font-size: 1.4rem; cursor: pointer;
}

/* ---- ya adentro ---- */
.cuenta { max-width: 72rem; padding-top: 6.4rem; padding-bottom: 10rem; }
.cuenta__cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2.4rem;
  margin-bottom: 6.4rem;
}
.cuenta__cab .cuenta__rotulo { margin-bottom: 1.2rem; }
.cuenta__cab .cuenta__accion { margin-bottom: 0; }   /* con el saludo chico, van a la misma línea */
/* El saludo mide lo mismo que "Tus pedidos" o "Acceso": es un título más
   de la página, no un letrero. */
.cuenta__hola {
  font-family: var(--font-heading); font-weight: 400; font-size: 2.2rem;
  line-height: 1.3; letter-spacing: 0.01em; margin: 0;
}
.cuenta__bloque + .cuenta__bloque { margin-top: 6.4rem; }
.cuenta__lista,
.cuenta__datos { border-top: 1px solid rgba(var(--s1-fg), 0.18); }

.fila {
  display: flex; align-items: center; justify-content: space-between; gap: 2.4rem;
  min-height: 7.2rem; padding: 1.6rem 0; box-sizing: border-box;
  border-bottom: 1px solid rgba(var(--s1-fg), 0.1);
}
.fila__txt { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.fila__t { font-size: 1.6rem; line-height: 1.4; font-weight: 500; color: rgb(var(--s1-fg)); overflow-wrap: anywhere; }
.fila__s { font-size: 1.5rem; line-height: 1.5; font-weight: 400; color: rgba(var(--s1-fg), 0.82); overflow-wrap: anywhere; }
.fila__lado { flex: 0 0 auto; text-align: right; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.fila--vacia .fila__s { font-size: 1.5rem; }
.fila__txt:empty { display: none; }   /* sin esto, la columna vacia + el gap corrian el enlace 24 px */
.fila--extra { justify-content: flex-start; min-height: 0; padding: 1.6rem 0 0; border-bottom: 0; }

.cuenta__accion {
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  font-family: var(--font-body); font-size: 1.5rem; letter-spacing: 0.02em; white-space: nowrap;
}
.cuenta__accion[disabled] { opacity: 0.45; cursor: default; }
.cuenta__aviso { margin: 1.6rem 0 0; font-size: 1.4rem; line-height: 1.6; color: rgb(164, 52, 47); }

.cuenta__texto { margin: 2rem 0 0; font-size: 1.6rem; line-height: 1.7; font-weight: 400; }
.cuenta__texto--peligro { color: rgb(164, 52, 47); font-weight: 400; }
.cuenta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2.4rem; }
.cuenta__acciones .boton { width: 22rem; padding-inline: 2.4rem; }

.boton--peligro { background: none; border-color: rgb(164, 52, 47); color: rgb(164, 52, 47); }
.boton--peligro-lleno { background: rgb(164, 52, 47); border-color: rgb(164, 52, 47); color: #fff; }

@media screen and (max-width: 749px) {
  .entrada { padding-top: 4.8rem; padding-bottom: 8rem; }
  .entrada__titulo { font-size: 2.8rem; }
  .cuenta { padding-top: 4rem; padding-bottom: 8rem; }
  .cuenta__cab { flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-bottom: 4.8rem; }
  .cuenta__bloque + .cuenta__bloque { margin-top: 4.8rem; }
  .cuenta__acciones { flex-direction: column; align-items: stretch; }
  .cuenta__acciones .boton { width: 100%; }
}

/* Titulos repartidos parejo y parrafos sin una palabra sola en la ultima
   linea ("momento." colgando). Donde el navegador no lo soporta, no pasa
   nada: se ve como antes. */
.entrada__titulo, .cuenta__hola { text-wrap: balance; }
.entrada__texto, .entrada__promesa-s, .entrada__pista, .entrada__legal,
.cuenta__texto, .fila__t, .fila__s { text-wrap: pretty; }

/* ==========================================================================
   EL TELEFONO · lo que faltaba para el dedo y para el iPhone
   ========================================================================== */
/* La etiqueta de "Ultima pieza" ahora vive DENTRO de la foto: antes se
   ponia a 5.6rem del fondo de la tarjeta y, si el nombre ocupaba dos
   renglones, se le encimaba al nombre. */
.card__media { position: relative; }
.card__media > .card__badge--ultima { bottom: 0; }

/* Cantidades: el boton apagado se ve apagado. */
.compra__cantidad button:disabled,
.cesta__cant button:disabled { opacity: 0.28; cursor: default; }
/* Pieza unica: sin selector de cantidad, el boton ocupa todo el ancho. */
.compra__fila--una { grid-template-columns: minmax(0, 1fr); }
.compra__fila--una .compra__cantidad { display: none; }
/* Aviso de la cesta cuando algo se vendio o quedan menos. */
.cesta__ajuste { margin: 2rem 0 0; padding: 1.2rem 1.6rem; background: rgb(var(--s2-bg)); border-left: 2px solid rgb(164, 52, 47); font-size: 1.4rem; line-height: 1.6; color: rgb(var(--s1-fg)); }

/* El visor de la foto usa el alto que de verdad se ve (con la barra del
   navegador). Con el telefono acostado la foto salia cortada. */
.visor { padding: max(4rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(4rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left)); }
.visor img { max-height: calc(100vh - 8rem); }
@supports (height: 100dvh) { .visor img { max-height: calc(100dvh - 8rem); } }

@media (hover: none) {
  /* En el telefono el "hover" se queda pegado despues de picar. */
  .boton:hover { opacity: 1; }
  .boton:active { opacity: 0.8; }
}

@media screen and (max-width: 989px) {
  /* iPhone se acerca solo si un campo tiene letra de menos de 16px. El
     buscador del header era de 14. */
  .header__search-input { font-size: 1.6rem; }

  /* Cada icono del header vive en una caja de 44 x 44 que recibe el dedo.
     Las cajas van pegadas entre si y a las orillas, sin encimarse: antes
     median 33 de ancho y el dedo caia en el icono de al lado. Asi los dos
     lados quedan iguales: 44 de un icono al otro y 12.5 de la orilla. */
  .header__icon, .header-drawer { min-height: 4.4rem; }
  .header__icons { gap: 0; }
  .header__icons .header__icon { padding: 1.25rem; margin: 0; }
  /* El ultimo (WhatsApp) llega justo a la orilla: el header tiene 6 de
     margen y con un pixel de mas toda la tienda se movia de lado. */
  .header__icons .header__icon:last-child { margin-right: -0.6rem; }
  /* El globo de la cesta se mide desde esa caja: sigue en la esquina de la bolsita. */
  .header__icons .header__icon .cart-count-bubble { left: 2.75rem; top: 0.35rem; }
  .header-drawer { padding: 1.25rem; margin-left: -0.6rem; }
  .header__inline-search { min-height: 4.4rem; }
  .header__inline-search .hl-icon--search { box-sizing: content-box; padding: 1.25rem; margin: 0; }
  /* Con el buscador abierto la lupa y el campo se quedan donde estaban. */
  .section-header.buscador-abierto .header__inline-search .hl-icon--search { margin: 0 -1.25rem; }

  /* El menu del telefono: si no cabe (telefono acostado), rueda por dentro. */
  .menu-movil { max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
  @supports (height: 100dvh) { .menu-movil { max-height: calc(100dvh - 7rem); } }
  .menu-movil .header__menu-item { min-height: 4.4rem; }

  /* Miniaturas de la ficha: una sola fila que se desliza (antes se partia
     en dos renglones). El aire de arriba y abajo deja ver el marco. */
  .producto__miniaturas { flex-wrap: nowrap; padding: 0.4rem 0.4rem 0.6rem; scrollbar-width: none; }
  .producto__miniaturas::-webkit-scrollbar { display: none; }

  /* Cantidad de la ficha y de la cesta: 44 para el dedo. */
  .compra__cantidad button { min-width: 4.4rem; min-height: 4.4rem; padding: 0; }
  .compra__cantidad { padding-inline: 0.4rem; }
  .cesta__cant button { width: 4.4rem; height: 4.4rem; }
  .cesta__quitar { width: 4.4rem; height: 4.4rem; }

  /* Las ligas del pie: renglones de 44 que se alcanzan con el dedo. */
  .footer ul { gap: 0; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 4.4rem; min-width: 4.4rem; }

  /* El precio nunca se parte en dos renglones. */
  .producto__precio, .card__price, .cesta__sub { white-space: nowrap; }
}

/* ==========================================================================
   EL DEDO · todo lo que se toca mide por lo menos 44 x 44
   Sin cambiar el dibujo: donde un relleno moveria la linea o el texto, la
   caja que recibe el dedo crece por fuera con un ::before transparente
   (para el navegador es parte de la liga o del boton).
   ========================================================================== */
.enlace-linea, .compra__ayuda, .filtro__boton, .filtro__interruptor, .chip, .migas a, .cesta__nombre, .pago__volver, a.fila__t { position: relative; }
.enlace-linea::before, .compra__ayuda::before, .filtro__boton::before, .filtro__interruptor::before, .chip::before,
.migas a::before, .cesta__nombre::before, .pago__volver::before, a.fila__t::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 4.4rem);
  height: max(100%, 4.4rem);
  transform: translate(-50%, -50%);
}
/* Las opciones de Precio y de Ordenar. */
.filtro__opcion { min-height: 4.4rem; }
/* Sugerencias y colecciones del buscador: renglones de 44, pegados. */
.cajon__grupo { gap: 0; }
.cajon__col, .cajon__sug { padding-block: 0.95rem; }
/* La cuenta: "Cerrar sesion", "Activar", "Quitar", "Ver mi pedido"... */
.cuenta__accion { display: inline-flex; align-items: center; min-height: 4.4rem; }
.entrada__cambiar { min-height: 4.4rem; }
.entrada__campo { min-height: 4.4rem; }
/* Las ligas de cada pedido en "Tus pedidos". */
.fila__ligas { display: flex; flex-wrap: wrap; gap: 0 2.4rem; }
/* "Este aparato ya esta activado" no es un error: va en tinta, no en rojo. */
.cuenta__aviso--bien { color: rgb(var(--s1-fg)); }
/* El campo del buscador: 44 de alto para el dedo sin mover la raya ni el
   texto (la caja crece hacia arriba con relleno y margen negativo). */
.header__search-input { padding-top: 1.8rem; margin-top: -1.8rem; }

.cuenta__aviso a { text-decoration: underline; text-underline-offset: 0.3rem; }

/* ==========================================================================
   LA ASESORA VIRTUAL · el chat de "Pregúntanos" (colibri.js → initAsistente)
   La misma de la tienda hermana, vestida con lo de aquí: el lila del header
   arriba y en los botones, tinta para lo que se toca, Jost, radio 0. Lo pinta
   el JavaScript solo si /api/asistente/estado dice que está encendida.
   El botón va debajo del header (z 25 < 30): el menú del celular lo tapa en
   vez de quedar con el botón encima. La ventana abierta sí va sobre todo
   (z 45), menos el visor de la foto (z 90).
   ========================================================================== */
.asis-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Aquí los botones no traen reinicio global: se reinician solo dentro del chat
   (con :where, para que cualquier clase de abajo les gane). */
:where(.asis) button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; border-radius: var(--radius); cursor: pointer; }
:where(.asis) a:focus-visible, :where(.asis) button:focus-visible { outline: 0.2rem solid rgb(var(--lila-hondo)); outline-offset: 0.2rem; }

.asis-lanza {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 25;
  display: inline-flex; align-items: center; gap: 0.9rem; min-height: 5rem; padding: 0 2.2rem 0 1.2rem; margin: 0;
  background: rgb(var(--s3-bg)); color: rgb(var(--s3-fg));
  border: 0.1rem solid rgba(var(--s3-fg), 0.18); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1;
  box-shadow: 0 0.4rem 1.6rem rgba(var(--s1-fg), 0.14);
  cursor: pointer;
}
.asis-lanza__ave { display: block; width: 3rem; height: auto; flex: none; }
/* Contestó con el chat cerrado: un punto en la esquina del botón. */
.asis-lanza__punto { position: absolute; top: -0.5rem; right: -0.5rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgb(var(--s1-fg)); border: 0.2rem solid #fff; }
.asis-lanza:hover { opacity: 0.9; }
.asis-lanza:focus-visible { outline: 0.2rem solid rgb(var(--lila-hondo)); outline-offset: 0.3rem; }
.asis-lanza[hidden], .asis[hidden] { display: none !important; }

.asis {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 45;
  width: min(41rem, calc(100vw - 4.8rem));
  height: min(66rem, calc(100vh - 4.8rem)); height: min(66rem, calc(100dvh - 4.8rem));
  display: flex; flex-direction: column;
  background: rgb(var(--s1-bg)); color: rgb(var(--s1-fg));
  border: 0.1rem solid rgba(var(--s1-fg), 0.28); border-radius: var(--radius);
  box-shadow: 0 1.2rem 4rem rgba(var(--s1-fg), 0.16);
  font-family: var(--font-body); letter-spacing: 0.02em;
}
.asis__cab {
  flex: none; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.4rem 1.2rem 1.4rem 2rem;
  background: rgb(var(--s3-bg)); color: rgb(var(--s3-fg));
  border-bottom: 0.1rem solid rgba(var(--s3-fg), 0.08);
}
.asis__ave { flex: none; display: block; width: 4rem; height: auto; }
/* Mientras contesta, el colibrí flota suave (quieto si el aparato pide menos movimiento). */
@keyframes asisFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.3rem); } }
.asis.pensando .asis__ave { animation: asisFlota 1.6s ease-in-out infinite; }
.asis__quien { flex: 1; min-width: 0; }
.asis__titulo { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1.9rem; line-height: 1.25; letter-spacing: 0.02em; color: rgb(var(--s3-fg)); }
.asis__sub { margin: 0.3rem 0 0; font-size: 1.3rem; line-height: 1.45; color: rgba(var(--s3-fg), 0.78); }
/* Ya platicando, «Empezar de nuevo» toma el lugar del subtítulo: la cabecera no crece. */
.asis .asis__otra {
  display: inline-flex; align-items: center; min-height: 4.4rem; margin: -1rem 0 -1.2rem;
  font-size: 1.3rem; font-weight: 400; color: rgb(var(--s3-fg));
  text-decoration: underline; text-underline-offset: 0.4rem; text-decoration-color: rgba(var(--s3-fg), 0.45);
}
.asis .asis__cerrar { flex: none; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; color: rgb(var(--s3-fg)); }
.asis__cerrar svg { width: 2.2rem; height: 2.2rem; }

.asis__hilo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 2rem 2rem 1.2rem; display: flex; flex-direction: column; gap: 1.6rem;
}
.asis__hilo:focus { outline: none; }
.asis-m { font-size: 1.55rem; line-height: 1.6; font-weight: 300; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.asis-m p { margin: 0; }
.asis-m p + p, .asis-m p + ul, .asis-m ul + p, .asis-m .asis-prod + p { margin-top: 1rem; }
.asis-m ul { margin: 0.8rem 0 0; padding-left: 2rem; }
.asis-m li + li { margin-top: 0.4rem; }
.asis-m strong { font-weight: 500; }
.asis-m a:not(.asis-prod__accion):not(.asis-prod__foto):not(.asis-prod__nombre) { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; }
.asis-m--c { align-self: flex-end; max-width: 86%; background: rgba(var(--s3-bg), 0.5); padding: 1rem 1.4rem; white-space: pre-line; }
.asis-m--a { align-self: stretch; }
.asis-paso { font-weight: 500; }
.asis-m .asis-paso:not(:first-child) { margin-top: 1.8rem; }
.asis-m--aviso p { padding: 1.2rem 1.4rem; border: 0.1rem solid rgba(var(--s1-fg), 0.28); }
.asis-m--nota p, .asis-nota { font-size: 1.4rem; line-height: 1.55; color: rgba(var(--s1-fg), 0.74); }
.asis-nota { margin-top: 1rem; }

.asis__ideas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.asis .asis__idea {
  min-height: 4.4rem; padding: 0.9rem 1.4rem;
  border: 0.1rem solid rgba(var(--s1-fg), 0.28); background: rgb(var(--s1-bg));
  font-size: 1.4rem; line-height: 1.35; text-align: left; font-weight: 400;
}
.asis .asis__idea:hover { border-color: rgb(var(--s1-fg)); }

/* La tarjeta: foto a la izquierda; nombre, precio y el botón uno debajo del
   otro (en 360 px "Agregar a la cesta" no cabe al lado del nombre). */
.asis-prod {
  display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.2rem; row-gap: 0.8rem;
  align-items: start; margin-top: 1rem; padding: 1rem 1.2rem 1rem 1rem;
  border: 0.1rem solid rgba(var(--s1-fg), 0.18); background: rgb(var(--s1-bg));
}
.asis-prod__foto { grid-row: 1 / span 2; display: block; width: 6.4rem; height: 6.4rem; background: rgb(var(--s1-bg)); }
.asis-prod__foto img { width: 6.4rem; height: 6.4rem; object-fit: cover; }
.asis-prod__foto img.asis-prod__sinfoto { object-fit: contain; padding: 1rem; background: rgba(var(--s3-bg), 0.4); }
.asis-prod__txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.asis-prod__tipo { font-size: 1.25rem; line-height: 1.4; letter-spacing: 0.06em; color: rgba(var(--s1-fg), 0.74); }
.asis-prod__nombre { font-size: 1.45rem; line-height: 1.35; font-weight: 400; }
.asis-prod__nombre:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.asis-prod__precio { font-size: 1.4rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.asis-prod__agotado { color: rgb(164, 52, 47); font-size: 1.3rem; margin-left: 0.4rem; }
.asis-prod__lugar { grid-column: 2; }
.asis .asis-prod__accion {
  min-height: 4.4rem; padding: 0 1.6rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--s3-bg)); color: rgb(var(--s3-fg)); border: 0.1rem solid transparent;
  font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; text-decoration: none;
}
.asis .asis-prod__accion:hover { opacity: 0.85; }
.asis .asis-prod__accion--linea { background: none; border-color: rgba(var(--s1-fg), 0.28); color: rgb(var(--s1-fg)); }
.asis .asis-prod__accion[disabled] { background: none; border-color: rgba(var(--s1-fg), 0.28); color: rgba(var(--s1-fg), 0.74); cursor: default; opacity: 1; }

.asis-espera { display: flex; gap: 0.6rem; padding: 0.8rem 0; }
.asis-espera span { width: 0.7rem; height: 0.7rem; background: rgb(var(--s1-fg)); opacity: 0.2; animation: asisPunto 1.2s infinite ease-in-out; }
.asis-espera span:nth-child(2) { animation-delay: 0.18s; }
.asis-espera span:nth-child(3) { animation-delay: 0.36s; }
@keyframes asisPunto { 0%, 80%, 100% { opacity: 0.18; } 40% { opacity: 0.75; } }

.asis__form {
  flex: none; display: flex; align-items: flex-end; gap: 0.8rem; margin: 0;
  padding: 1.2rem 1.6rem 0.8rem; border-top: 0.1rem solid rgba(var(--s1-fg), 0.14);
}
.asis__form textarea {
  flex: 1; min-width: 0; resize: none; min-height: 4.6rem; max-height: 13.2rem; padding: 1.2rem 1.4rem; margin: 0;
  border: 0.1rem solid rgba(var(--s1-fg), 0.28); border-radius: var(--radius);
  background: rgb(var(--s1-bg)); color: rgb(var(--s1-fg));
  font-family: inherit; font-weight: 300; font-size: 16px; line-height: 1.4; letter-spacing: 0.02em;
}
.asis__form textarea::placeholder { color: rgba(var(--s1-fg), 0.62); }
.asis__form textarea:focus { outline: 0.2rem solid rgb(var(--s1-fg)); outline-offset: -0.2rem; }
.asis .asis__enviar { flex: none; width: 4.6rem; height: 4.6rem; display: grid; place-items: center; background: rgb(var(--s1-fg)); color: rgb(var(--s1-bg)); }
.asis__enviar svg { width: 2.2rem; height: 2.2rem; }
.asis .asis__enviar[disabled] { opacity: 0.4; cursor: default; }
.asis__pie { flex: none; margin: 0; padding: 0.2rem 1.6rem 1.2rem; font-size: 1.25rem; line-height: 1.5; letter-spacing: 0.01em; color: rgba(var(--s1-fg), 0.74); }
.asis__pie a { color: rgb(var(--s1-fg)); text-decoration: underline; text-underline-offset: 0.3rem; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .asis-espera span { animation: none; opacity: 0.45; }
  .asis.pensando .asis__ave { animation: none; }
}
/* En celular la ventana ocupa toda la pantalla, y lo de atrás no se mueve. */
@media (max-width: 700px) {
  .asis-lanza { right: 1.6rem; bottom: calc(1.6rem + env(safe-area-inset-bottom)); min-height: 4.8rem; padding: 0 1.8rem 0 1rem; }
  .asis { inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; box-shadow: none; }
  html.asis-abierto, html.asis-abierto body { overflow: hidden; }
  .asis__cab { padding: 1.2rem 0.8rem 1.2rem 1.6rem; }
  .asis__hilo { padding: 1.6rem 1.6rem 1rem; }
  .asis__form { padding: 1rem 1.2rem 0.6rem; }
  .asis__pie { padding: 0.2rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); }
  .asis-prod { grid-template-columns: 5.6rem minmax(0, 1fr); column-gap: 1rem; padding: 0.8rem 1rem 0.8rem 0.8rem; }
  .asis-prod__foto, .asis-prod__foto img { width: 5.6rem; height: 5.6rem; }
}
/* Con el botón en la página, el pie deja aire abajo: así no tapa su último
   renglón (el botón mide 5 rem y va a 2.4 rem de la orilla). */
html.asis-hay .footer { padding-bottom: 11.2rem; }
@media print { .asis, .asis-lanza { display: none !important; } }