/* ==========================================================================
   VICKY MORENO · Hoja de estilos
   Librería boutique · papel, tinta y trabajo artesanal
   --------------------------------------------------------------------------
   Índice
   01. Tokens y reset          08. Categorías
   02. Tipografía base         09. Franja ilustrada / Sobre mí
   03. Layout y utilidades     10. Newsletter y pie
   04. Botones y formularios   11. Carrito (panel y página)
   05. Barra de avisos         12. Ficha de producto
   06. Cabecera y menú         13. Tienda (filtros)
   07. Carrusel del inicio     14. Animaciones y accesibilidad
   ========================================================================== */

/* 01 · TOKENS Y RESET ====================================================== */

:root {
  /* ---- PALETA OFICIAL (Brandboard Vicky Moreno, 2022) --------------------
     Son los 7 colores exactos del manual de marca. No inventar otros. */
  --crema:        #FFFBEE;
  --negro:        #000000;
  --rosa:         #E0C1B8;
  --oliva:        #90914E;
  --agua:         #84A5B2;
  --mostaza:      #F4D779;
  --gris:         #9797A0;

  /* ---- Derivados para la interfaz --------------------------------------
     Tintes de la crema para separar secciones, y grises tomados del gris
     de marca. El acento es el oliva: se usa en detalles, nunca en texto
     chico (sobre crema no llega al contraste mínimo). */
  --papel:        #FFFBEE;
  --papel-2:      #F7F1DF;
  --papel-3:      #EFE7D2;
  --tinta:        #000000;
  --tinta-70:     #55555C;
  /* Versión oscurecida del gris de marca: el #9797A0 original queda en 2,8:1
     sobre la crema y no se lee. El gris puro sigue disponible en --gris para
     bordes y detalles, donde el contraste no importa. */
  --tinta-45:     #6E6E77;
  --acento:       #90914E;
  /* El mismo oliva, pero transparente: es el resplandor que rodea un campo de
     texto cuando hacés clic adentro. Va en rgba y no en hex porque tiene que
     dejar ver el papel de abajo. */
  --acento-velo:  rgba(144, 145, 78, .18);
  --rosa-claro:   #F0DFD9;
  --linea:        rgba(0, 0, 0, .12);
  --linea-fuerte: rgba(0, 0, 0, .26);

  /* ---- TIPOGRAFÍAS ------------------------------------------------------
     Lora    -> títulos y elementos de interfaz (botones, menú, etiquetas)
     DM Sans -> textos corridos

     El manual indica Cormorant Garamond para textos, pero en pantalla dibuja
     muy fino y se perdía. DM Sans es geométrica y limpia, y el contraste con
     el serif de los títulos le da aire. Para probar otra, cambiá el nombre
     acá abajo y en el <link> de las páginas: 'Jost' (más geométrica) o
     'Work Sans' (más redondeada) funcionan igual de bien. */
  --titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --ui:     'Lora', Georgia, 'Times New Roman', serif;
  --texto:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ancho: 1240px;
  --gutter: clamp(1.15rem, 4.5vw, 3rem);

  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;

  --sombra-baja:  0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px -12px rgba(0, 0, 0, .20);
  --sombra-alta:  0 2px 6px rgba(0, 0, 0, .06), 0 26px 50px -26px rgba(0, 0, 0, .26);

  --transicion: 280ms cubic-bezier(.22, .61, .36, 1);
  --alto-cabecera: 68px;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1.5rem);
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grano de papel: le saca el brillo de pantalla y da textura de imprenta */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Lo que está marcado como oculto, se oculta.
   El navegador ya lo hace solo, pero cualquier regla nuestra que diga
   "display: flex" le gana y el bloque vuelve a aparecer. Pasaba con el
   renglón "Descuento combo" del resumen, que se mostraba en $ 0 aunque no
   hubiera ningún combo armado. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--rosa); color: var(--tinta); }


/* 02 · TIPOGRAFÍA BASE ===================================================== */

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.display     { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 500; }
.titulo-xl   { font-size: clamp(2rem, 4.2vw, 3.05rem); }
.titulo-lg   { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.titulo-md   { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }

/* Volanta: la etiqueta chiquita en versalitas.
   Va en negro y no en oliva: sobre la crema, el oliva no llega al
   contraste mínimo para texto de este tamaño. */
.volanta {
  font-family: var(--ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta);
  display: block;
}

/* Textos corridos en DM Sans, peso normal. */
.bajada,
.ficha__descripcion,
.diapo__texto p,
.categoria__cuerpo p,
.sobre-mi__texto p,
.acordeon__panel p,
.acordeon__panel li,
.tarjeta__resumen,
.linea-carrito__meta,
.encabezado-pagina .bajada {
  font-family: var(--texto);
  font-weight: 400;
  letter-spacing: -.005em;
}

.bajada {
  font-size: clamp(1rem, 1.2vw, 1.075rem);
  line-height: 1.6;
  color: var(--tinta-70);
  max-width: 60ch;
  text-wrap: pretty;
}

.firma {
  font-family: var(--titulo);
  font-style: italic;
}

/* Filete entre secciones ──────────────────────────────────────────────────
   Es el mismo subrayado dibujado a mano que va debajo de "Escribime y lo vemos
   juntas" en la tarjeta de contacto. Antes acá había una línea recta con una
   estrellita en el medio; se cambió porque esa estrella no salía de tu kit y
   desafinaba con el resto.

   El dibujo está escrito adentro del CSS —eso que parece un trabalenguas es el
   trazo de la rayita— para no tener que repetirlo en las ocho páginas donde
   aparece. Y va como máscara en vez de como imagen: así toma el color del texto
   del lugar donde esté, y funciona igual sobre la crema que sobre un fondo
   oscuro.

   OJO: el mismo trazo está también, suelto, en las tarjetas de papel (buscá
   "tarjeta-papel__raya"). Si algún día lo cambiás, son los dos lugares. */
.ornamento {
  width: clamp(120px, 38%, 230px);
  aspect-ratio: 23 / 1;
  margin-inline: auto;
  color: var(--tinta);
  background: currentColor;
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 10'%3E%3Cpath d='M3 6.5c34-4 62 3.4 96-.6 31-3.6 62 4.2 128 1.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 10'%3E%3Cpath d='M3 6.5c34-4 62 3.4 96-.6 31-3.6 62 4.2 128 1.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}


/* 03 · LAYOUT Y UTILIDADES ================================================ */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.contenedor--angosto { max-width: 780px; }

.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--ajustada { padding-block: clamp(2.5rem, 5vw, 4rem); }
.seccion--papel-2 { background: var(--papel-2); }

.seccion__encabezado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.seccion__encabezado--fila {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  gap: 1.5rem;
}

.centrado { text-align: center; }
.pila { display: flex; flex-direction: column; }
.fila { display: flex; align-items: center; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar-al-contenido {
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 999;
  padding: .7rem 1.1rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--transicion);
}
.saltar-al-contenido:focus { transform: none; }


/* 04 · BOTONES Y FORMULARIOS =============================================== */

.boton {
  --bg: var(--tinta);
  --fg: var(--papel);
  --bd: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion), color var(--transicion);
}
.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton:active { transform: translateY(0); }
.boton[disabled], .boton[aria-disabled='true'] {
  opacity: .45; pointer-events: none; transform: none; box-shadow: none;
}

.boton--contorno { --bg: transparent; --fg: var(--tinta); --bd: var(--linea-fuerte); }
.boton--contorno:hover { --bg: var(--tinta); --fg: var(--papel); --bd: var(--tinta); }

.boton--destacado { --bg: var(--oliva); --fg: var(--negro); --bd: var(--oliva); }
.boton--claro { --bg: var(--papel); --fg: var(--tinta); --bd: var(--papel); }
.boton--fantasma-claro { --bg: transparent; --fg: currentColor; --bd: currentColor; }
.boton--fantasma-claro:hover { --bg: currentColor; }

.boton--ancho { width: 100%; }
.boton--grande { padding: 1rem 2.2rem; font-size: .82rem; }
.boton--chico { padding: .58rem 1.05rem; font-size: .68rem; }

/* Enlace con subrayado dibujado */
.enlace-linea {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: gap var(--transicion), opacity var(--transicion);
}
.enlace-linea:hover { gap: .8rem; opacity: .7; }

.campo {
  width: 100%;
  padding: .82rem 1rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-velo);
}

/* Selector de cantidad */
.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--papel);
}
.cantidad button {
  width: 42px; height: 46px;
  font-size: 1.1rem;
  color: var(--tinta-70);
  transition: background-color var(--transicion), color var(--transicion);
}
.cantidad button:hover { background: var(--papel-3); color: var(--tinta); }
.cantidad input {
  width: 46px; height: 46px;
  text-align: center;
  border: none; background: none;
  font-weight: 600;
  -moz-appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* 05 · BARRA DE AVISOS ===================================================== */

.barra-avisos {
  background: var(--tinta);
  color: var(--papel);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.barra-avisos p {
  animation: aviso-entra 500ms ease both;
  padding-inline: 1rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .barra-avisos { height: 34px; font-size: .625rem; }
  .barra-avisos p { letter-spacing: .04em; padding-inline: .6rem; }
}
@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* 06 · CABECERA Y MENÚ ===================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 500;
  /* El crema de marca con transparencia: así la barra de arriba es el mismo
     papel que la página y no un tono aparte. */
  background: rgba(255, 251, 238, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow var(--transicion);
}
.cabecera.esta-fija { box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .35); }

.cabecera__interior {
  height: var(--alto-cabecera);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.cabecera__logo img { height: 40px; width: auto; }

.nav-principal { display: flex; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.nav-principal a {
  position: relative;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-70);
  padding-block: .4rem;
  transition: color var(--transicion);
}
.nav-principal a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicion);
}
.nav-principal a:hover,
.nav-principal a[aria-current='page'] { color: var(--tinta); }
.nav-principal a:hover::after,
.nav-principal a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

.cabecera__acciones { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }

.boton-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--tinta);
  transition: background-color var(--transicion);
}
.boton-icono:hover { background: var(--papel-3); }

.contador-carrito {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 19px; height: 19px;
  padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--acento);
  /* Negro y no blanco: sobre el oliva, el negro es lo único que se lee bien
     en un número tan chiquito (misma regla que el resto del sitio). */
  color: var(--negro);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  transform: scale(0);
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.contador-carrito.tiene-items { transform: scale(1); }

.abre-menu { display: none; }

/* Menú móvil */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 700;
  visibility: hidden;
  pointer-events: none;
}
.menu-movil.esta-abierto { visibility: visible; pointer-events: auto; }

.menu-movil__velo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity var(--transicion);
}
.menu-movil.esta-abierto .menu-movil__velo { opacity: 1; }

.menu-movil__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(86vw, 360px);
  background: var(--papel);
  padding: 1.5rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transform: translateX(-100%);
  transition: transform 380ms cubic-bezier(.22, .61, .36, 1);
  overflow-y: auto;
}
.menu-movil.esta-abierto .menu-movil__panel { transform: none; }

.menu-movil__lista { display: flex; flex-direction: column; }
.menu-movil__lista a {
  font-family: var(--titulo);
  font-size: 1.55rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--linea);
  transition: padding-left var(--transicion), color var(--transicion);
}
.menu-movil__lista a:hover { padding-left: .5rem; color: var(--acento); }


/* 07 · CARRUSEL DEL INICIO ================================================ */

.carrusel { position: relative; overflow: hidden; }

.carrusel__pista { display: grid; }

.diapo {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(430px, 62vh, 620px);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 760ms ease, transform 900ms ease, visibility 760ms;
}
.diapo.esta-activa { opacity: 1; visibility: visible; transform: none; }

/* Ancho útil centrado dentro de la diapositiva */
.diapo__texto, .diapo__arte { max-width: calc(var(--ancho) / 2); }
.diapo__texto { justify-self: end; width: 100%; }
.diapo__arte  { justify-self: start; width: 100%; }

.diapo__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}
.diapo.esta-activa .diapo__texto > * {
  animation: sube 700ms cubic-bezier(.22, .61, .36, 1) both;
}
.diapo.esta-activa .diapo__texto > *:nth-child(1) { animation-delay: 120ms; }
.diapo.esta-activa .diapo__texto > *:nth-child(2) { animation-delay: 210ms; }
.diapo.esta-activa .diapo__texto > *:nth-child(3) { animation-delay: 300ms; }
.diapo.esta-activa .diapo__texto > *:nth-child(4) { animation-delay: 390ms; }

@keyframes sube {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.diapo__titulo { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.diapo__texto p { max-width: 46ch; opacity: .88; }
.diapo__acciones { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }

.diapo__arte {
  position: relative;
  display: grid;
  place-items: center;
}
/* La foto del producto va recortada con una mancha pintada a mano de tu kit
   de marca (la misma forma que usás en las plantillas de Instagram). Así el
   borde es irregular y hecho a mano, en vez de un cuadrado. */
.diapo__mancha {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 400px);
  aspect-ratio: 959 / 822;
  overflow: hidden;
  -webkit-mask: url('../img/marca/mancha.png') center / contain no-repeat;
          mask: url('../img/marca/mancha.png') center / contain no-repeat;
  animation: flota 7s ease-in-out infinite;
}
.diapo__mancha img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);   /* recorta apenas el margen sobrante de la foto */
}
@keyframes flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* La misma mancha, en color y apenas corrida: da el efecto de sello mal
   registrado que tiene la impresión artesanal. */
.diapo__arte::before {
  content: '';
  position: absolute;
  width: min(100%, 400px);
  aspect-ratio: 959 / 822;
  background: var(--mancha, currentColor);
  opacity: .55;
  translate: -16px 16px;
  rotate: -3deg;
  -webkit-mask: url('../img/marca/mancha.png') center / contain no-repeat;
          mask: url('../img/marca/mancha.png') center / contain no-repeat;
}

/* Temas de color — los cinco de la paleta.
   Sobre el negro va texto crema; sobre los colores va texto negro, que es
   lo único que da contraste suficiente sobre oliva, agua, rosa y mostaza. */
.diapo--tinta,
.diapo--negro   { background: var(--negro);   color: var(--crema); --mancha: var(--rosa); }
.diapo--rosa    { background: var(--rosa);    color: var(--negro); --mancha: var(--mostaza); }
.diapo--oliva   { background: var(--oliva);   color: var(--negro); --mancha: var(--mostaza); }
.diapo--agua    { background: var(--agua);    color: var(--negro); --mancha: var(--mostaza); }
.diapo--mostaza { background: var(--mostaza); color: var(--negro); --mancha: var(--agua); }
.diapo--crema   { background: var(--crema);   color: var(--negro); --mancha: var(--rosa); }

.diapo--tinta .volanta,
.diapo--negro .volanta { color: var(--rosa); }
.diapo--rosa .volanta,
.diapo--oliva .volanta,
.diapo--agua .volanta,
.diapo--mostaza .volanta { color: var(--negro); opacity: .7; }

.diapo--tinta .boton,
.diapo--negro .boton { --bg: var(--crema); --fg: var(--negro); --bd: var(--crema); }
.diapo--rosa .boton,
.diapo--oliva .boton,
.diapo--agua .boton,
.diapo--mostaza .boton,
.diapo--crema .boton { --bg: var(--negro); --fg: var(--crema); --bd: var(--negro); }

.diapo--crema .volanta { color: var(--negro); opacity: .7; }

/* Controles.
   Las flechas y las rayitas de abajo van en el crema de marca (#FFFBEE) con
   mucha transparencia: se apoyan sobre el rosa, el oliva y el mostaza de los
   banners, así que tienen que ser del mismo crema que el resto del sitio y no
   de un blanco cualquiera. */
.carrusel__flecha {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: inherit;
  background: rgba(255, 251, 238, .16);
  border: 1px solid rgba(255, 251, 238, .38);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--transicion), background-color var(--transicion);
}
.carrusel:hover .carrusel__flecha,
.carrusel__flecha:focus-visible { opacity: 1; }
.carrusel__flecha:hover { background: rgba(255, 251, 238, .34); }
.carrusel__flecha--previa { left: clamp(.6rem, 2vw, 1.6rem); }
.carrusel__flecha--siguiente { right: clamp(.6rem, 2vw, 1.6rem); }

.carrusel__puntos {
  position: absolute;
  bottom: clamp(1.1rem, 3vw, 1.9rem);
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: .55rem;
}
.carrusel__punto {
  width: 34px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 251, 238, .38);
  overflow: hidden;
  transition: background-color var(--transicion);
}
.carrusel__punto[aria-selected='true'] { background: rgba(255, 251, 238, .3); }
.carrusel__punto span {
  display: block;
  height: 100%;
  width: 100%;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
}
.carrusel__punto[aria-selected='true'] span {
  animation: progreso var(--duracion, 6500ms) linear forwards;
}
.carrusel.esta-pausado .carrusel__punto[aria-selected='true'] span { animation-play-state: paused; }
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* 08 · GRILLA Y TARJETAS DE PRODUCTO ====================================== */

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.4rem, 2.8vw, 2.4rem) clamp(1rem, 2.2vw, 1.9rem);
}
.grilla-productos--tres { grid-template-columns: repeat(3, 1fr); }

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* ── EL TINTE DE CADA CATEGORÍA ───────────────────────────────────────────
   Cada producto se apoya sobre un velo del color de su categoría, mezclado
   con la crema. Son colores de tu paleta, muy diluidos: la receta de cada uno
   está al lado por si algún día querés subirle o bajarle la intensidad.
   Sirven en cualquier lado donde se ponga data-categoria: la tarjeta de la
   grilla y la foto grande de la ficha. */
[data-categoria="libros"]       { --tinte: #F3EFDC; }  /* oliva   al 11% sobre la crema */
[data-categoria="guias"]        { --tinte: #F5E8DD; }  /* rosa    al 32% sobre la crema */
[data-categoria="cosas-lindas"] { --tinte: #FCF0CB; }  /* mostaza al 30% sobre la crema */

/* El marco ya no es un recuadro con borde: es un paño de color con las
   esquinas bien redondeadas. Si un producto tuviera una foto normal (JPG) en
   vez de una pieza recortada, la foto lo tapa entero y el color no se ve. */
.tarjeta__marco {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--tinte, var(--papel-3));
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta:hover .tarjeta__marco {
  box-shadow: var(--sombra-alta);
  transform: translateY(-4px);
}

/* La caja donde se acomoda la pieza, con el aire alrededor.
   Va en posición absoluta y no con padding porque necesita tener un alto
   firme: si no, el tope de alto de la pieza no tiene contra qué medirse y el
   navegador termina usando el tamaño natural del archivo. Y la celda de
   adentro mide exactamente lo que la caja, por lo mismo. */
.tarjeta__caja {
  position: absolute;
  inset: 9%;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
}

/* La pieza recortada. Las dos sombras hacen cosas distintas: la primera es
   finita y pegada al contorno —es la que le dibuja el borde, y hace falta
   porque la tela de las totebags y el papel de la postal son casi del mismo
   color que el fondo—; la segunda, más abierta, es la que la apoya.
   El alto de cada una lo calcula app.js: ver "acomodarPiezas". */
.tarjeta__pieza {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--alto, 100%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .14))
          drop-shadow(0 10px 16px rgba(0, 0, 0, .18));
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.tarjeta:hover .tarjeta__pieza { transform: translateY(-4px) scale(1.03); }

/* Una foto normal (JPG): a sangre, llenando el marco, como era antes */
.tarjeta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.tarjeta:hover .tarjeta__foto { transform: scale(1.045); }

/* La ramita de tu kit, apoyada en la esquina de algunas tarjetas.
   Es dibujo, no interfaz: no recibe clics y los lectores de pantalla la
   saltean. Cuáles la llevan y de qué lado lo decide app.js.

   Van alternando izquierda y derecha, y no es un capricho: aunque a dos les
   toque caer en la misma columna, una cuelga de un borde y la otra del otro,
   así que nunca forman una línea. La de la derecha va espejada (scale: -1 1)
   para que la ramita apunte hacia afuera de la tarjeta en los dos casos. */
.tarjeta__ramita {
  position: absolute;
  z-index: 3;
  width: clamp(34px, 4.6vw, 52px);
  opacity: .7;
  pointer-events: none;
}
.tarjeta__ramita--izquierda { top: -14px; left: -12px;  rotate: -20deg; }
.tarjeta__ramita--derecha   { top: -10px; right: -12px; rotate: -20deg; scale: -1 1; }

.tarjeta__insignia {
  position: absolute;
  top: .8rem; left: .8rem;
  z-index: 2;
  padding: .3rem .6rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tarjeta__insignia--digital { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.tarjeta__insignia--agotado { background: var(--papel-3); color: var(--tinta-70); }

/* Botón rápido de agregar, sube al pasar el mouse */
.tarjeta__rapido {
  position: absolute;
  left: .7rem; right: .7rem; bottom: .7rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transicion), transform var(--transicion);
}
.tarjeta:hover .tarjeta__rapido,
.tarjeta:focus-within .tarjeta__rapido { opacity: 1; transform: none; }

.tarjeta__cuerpo { display: flex; flex-direction: column; gap: .3rem; }
.tarjeta__nombre {
  font-family: var(--titulo);
  font-size: 1.075rem;
  line-height: 1.25;
  font-weight: 500;
}
.tarjeta:hover .tarjeta__nombre { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta__resumen {
  font-size: .875rem;
  color: var(--tinta-70);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta__precio {
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}

/* Enlace que cubre toda la tarjeta sin tapar el botón rápido */
.tapa-enlace::after { content: ''; position: absolute; inset: 0; z-index: 1; }


/* 09 · CATEGORÍAS ========================================================= */

.grilla-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

/* La tarjeta toma el tinte de su categoría, el mismo que usan sus productos en
   la tienda, y va sin borde: la ilustración de arriba ya es un rectángulo de
   color, así que si la tarjeta fuera de otro color el dibujo quedaría metido
   adentro de una caja ajena. */
.categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tinte, var(--papel-2));
  transition: transform var(--transicion), box-shadow var(--transicion);
}

/* Cosas lindas es la excepción, y es a propósito: su ilustración —el mate— es
   azul, mientras que sus productos van sobre el cremita cálido. Acá manda la
   ilustración, para que la tarjeta y el dibujo sean del mismo color.
   Es el agua de tu paleta al 17% sobre la crema. */
.categoria[data-categoria="cosas-lindas"] { background: #EAECE4; }
.categoria:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }

/* Las ilustraciones traen el nombre de la categoría dibujado en el 73–80%
   de su altura. Recortamos esa franja para que no se repita con el título
   de abajo, y queda sólo el dibujo. */
.categoria__imagen { position: relative; overflow: hidden; aspect-ratio: 2 / 1; }
.categoria__imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 720ms cubic-bezier(.22, .61, .36, 1);
}
.categoria:hover .categoria__imagen img { transform: scale(1.06); }

.categoria__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  flex: 1;
}
.categoria__titulo {
  font-family: var(--ui);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2em;
}
.categoria__cuerpo p { font-size: .925rem; line-height: 1.6; color: var(--tinta-70); flex: 1; }
/* En negro y no en oliva: sobre este fondo el oliva daba 2,93 de contraste y
   para un texto de este tamaño hace falta 4,5. Es la misma regla que rige en
   todo el sitio; acá se había escapado. */
.categoria__pie {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta);
}
.categoria:hover .categoria__pie { gap: .75rem; }


/* 10 · FRANJA ILUSTRADA, SOBRE MÍ, NEWSLETTER Y PIE ======================= */

/* Franja ilustrada a todo el ancho. Son los dos encabezados que te diseñaron
   para la tienda; para cambiar cuál va en cada página, se intercambian estos
   nombres de archivo. */
/* Es un respiro entre dos secciones, no una pieza de contenido: por eso es una
   banda fina de patrón, sin texto ni mensaje. Antes acá iba el encabezado con
   el globo que dice "Que la vida te encuentre leyendo" — ese archivo sigue
   guardado en assets/img/banner/ por si algún día lo querés de vuelta.

   Lo ÚNICO que hay que tocar para hacerla más gruesa o más fina es el alto de
   acá abajo. Los tres números son: el mínimo (celular), cuánto crece con el
   ancho de la pantalla, y el máximo (compu). El dibujo recortado mide
   1672x420, así que hasta unos 420px se ve sin estirarse. */
.franja-arte {
  position: relative;
  min-height: clamp(100px, 13vw, 180px);
  /* El color que queda debajo del dibujo, y que se ve donde el dibujo se
     desvanece. Arriba es el crema de la sección de categorías y abajo el de la
     página, así que la banda no corta contra ninguno de los dos: sale de uno y
     entra en el otro. */
  background: linear-gradient(var(--papel-2), var(--papel));
}

/* El dibujo va acá y no en la banda misma, porque necesita desvanecerse por
   arriba y por abajo sin llevarse puesto el color de atrás.

   Dos números para tocar, si querés más o menos:
     · el 22% y el 78% son dónde arranca y dónde termina la parte sólida —
       acercarlos entre sí hace el desvanecido más largo y suave;
     · el opacity es cuánta fuerza tiene el patrón. En 1 se ve tal cual;
       cuanto más bajo, más se funde con la crema y menos ruido hace. */
.franja-arte::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/banner/separador.jpg') center / cover no-repeat;
  opacity: .78;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.franja-arte--uno::before {
  background-image: url('../img/banner/encabezado-1.jpg');
}

/* ── "Quién soy": ilustración integrada, sin caja ──────────────────────────
   El fondo va con el MISMO crema que trae la ilustración (#FAF2EA), y los
   bordes de la foto se disuelven con una máscara: así el dibujo se funde con
   la página en vez de quedar dentro de un recuadro. */
.autora-hero {
  /* Arranca en el crema de la ilustración y termina en el crema de la página,
     así no hay escalón con la sección de texto de abajo. */
  background: linear-gradient(#FAF2EA 72%, var(--papel) 100%);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  text-align: center;
}
.autora-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 640px;
}
.autora-hero__intro .bajada { margin-inline: auto; }

.autora-hero__arte {
  position: relative;   /* ancla del vapor de la taza */
  margin: clamp(-1rem, -1vw, 0rem) auto 0;
  max-width: 560px;   /* celular: la ilustración vertical */
}
/* En compu la escena llena el ancho: se recorta a formato apaisado (sacando el
   cielo vacío de arriba y el crema de abajo) para que el contenido llegue a los
   costados y el borde irregular de la máscara se derrame sobre la página. */
@media (min-width: 760px) {
  .autora-hero__arte { max-width: 980px; margin-top: clamp(.5rem, 1vw, 1.5rem); }
  .autora-hero__arte img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center 60%;
  }
}
.autora-hero__arte img {
  width: 100%;
  height: auto;
  display: block;
  /* Borde de abajo irregular (forma orgánica pintada), para que el dibujo se
     derrame hacia la página en vez de cortarse en una línea. Los costados y el
     arriba también quedan suaves. */
  -webkit-mask: url('../img/marca/mascara-organica.png') center / 100% 100% no-repeat;
          mask: url('../img/marca/mascara-organica.png') center / 100% 100% no-repeat;
}

/* ── El vapor de la taza ───────────────────────────────────────────────────
   El borde de la taza está en x 30,2% / y 70,7% de la ilustración. En compu
   la imagen se recorta (5:4, encuadre al 60%), así que ese mismo punto cae
   más abajo dentro del marco: por eso el `top` cambia en el media query.
   El ancho va en % del ANCHO del marco, que en las dos pantallas coincide
   con el ancho de la ilustración — así el vapor conserva su escala. */
.vapor {
  position: absolute;
  left: 30.2%;
  top: 70.7%;                          /* celular: se ve la ilustración entera */
  width: 9%;
  height: auto;
  transform: translate(-50%, -100%);   /* apoya la base justo en el borde de la taza */
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  filter: blur(1.1px);                 /* le saca el filo de dibujo vectorial */
}
@media (min-width: 760px) {
  .vapor { top: 80.1%; }
}

.vapor__hilo {
  fill: none;
  stroke: #FFFDF6;
  stroke-width: 3.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: vapor-sube 6s ease-in-out infinite;
}
/* Duraciones y demoras distintas: si suben sincronizados parece un motor,
   y desfasados parece vapor. */
.vapor__hilo--1 { animation-duration: 6.4s; animation-delay: 0s;    stroke-width: 3.6; }
.vapor__hilo--2 { animation-duration: 7.6s; animation-delay: -2.6s; stroke-width: 2.8; }
.vapor__hilo--3 { animation-duration: 5.8s; animation-delay: -4.4s; stroke-width: 2.6; }

@keyframes vapor-sube {
  0%   { opacity: 0;   transform: translateY(5px)   scaleX(.92); }
  20%  { opacity: .5;  }
  60%  { opacity: .32; }
  100% { opacity: 0;   transform: translateY(-15px) scaleX(1.18); }
}

/* ── Las "z" del perro y del gato ──────────────────────────────────────────
   Mismo criterio que el vapor: el punto se mide sobre la ilustración y el
   `top` se recalcula para compu, donde la imagen va recortada.
     perro → cabeza en x 69-76%, y 61%     gato → cabeza en x 81-87%, y 62%
   Las dos suben hacia la derecha, sobre pared despejada. */
.duerme {
  position: absolute;
  width: 5.4%;
  height: auto;
  transform: translateY(-100%);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.duerme--perro { left: 71%;   top: 61%; }
.duerme--gato  { left: 86.5%; top: 62%; }

@media (min-width: 760px) {
  .duerme--perro { top: 61.9%; }
  .duerme--gato  { top: 63.75%; }
}

.duerme__z {
  fill: none;
  stroke: #2A2320;               /* la tinta del dibujo, no negro puro */
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: duerme-z 4.2s ease-in-out infinite;
}
/* Se encienden en orden, de la más chica a la más grande */
.duerme__z--1 { animation-delay: 0s; }
.duerme__z--2 { animation-delay: .5s; }
.duerme__z--3 { animation-delay: 1s; }

/* El gato respira un poco más lento que el perro, para que no vayan al unísono */
.duerme--gato .duerme__z { animation-duration: 5s; }
.duerme--gato .duerme__z--1 { animation-delay: 1.9s; }
.duerme--gato .duerme__z--2 { animation-delay: 2.5s; }
.duerme--gato .duerme__z--3 { animation-delay: 3.1s; }

@keyframes duerme-z {
  0%       { opacity: 0;   transform: translateY(3px) scale(.85); }
  18%      { opacity: .45; transform: translateY(0)   scale(1); }
  42%      { opacity: .38; }
  62%, 100%{ opacity: 0;   transform: translateY(-5px) scale(1.05); }
}

.sobre-mi {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}
/* La foto va recortada con la mancha pintada a mano del kit —el mismo recurso
   que el banner— con otra mancha en color detrás, apenas corrida: el efecto de
   sello mal registrado de la impresión artesanal. Nada de recuadro. */
.sobre-mi__marco {
  position: relative;
  /* La proporción la manda la mancha, no la foto: por eso la foto va en
     posición absoluta (si no, al ser cuadrada, estiraba el marco). */
  aspect-ratio: 959 / 822;
  background: none;
  border-radius: 0;
}
.sobre-mi__marco::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rosa);
  opacity: .85;
  translate: -15px 15px;
  rotate: -3deg;
  -webkit-mask: url('../img/marca/mancha.png') center / contain no-repeat;
          mask: url('../img/marca/mancha.png') center / contain no-repeat;
}
.sobre-mi__marco img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;   /* deja la cara bien ubicada dentro de la mancha */
  -webkit-mask: url('../img/marca/mancha.png') center / contain no-repeat;
          mask: url('../img/marca/mancha.png') center / contain no-repeat;
}
.sobre-mi__texto { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.sobre-mi__cita {
  font-family: var(--titulo);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-style: italic;
  line-height: 1.35;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  padding-left: 1.15rem;
  border-left: 2px solid var(--rosa);
}


/* ── LA TARJETA DE MARCA ──────────────────────────────────────────────────
   Una hoja de papel con los adornos de tu kit: la ramita arriba, la mancha
   rosa asomando en la esquina, el firulete abajo y una escena ilustrada a la
   derecha. La usan dos bloques distintos y por eso el nombre es genérico:

     · "Escribime y lo vemos juntas", al final de la tienda (escena del
       anotador y el lápiz: escribir).
     · "Algo bonito para leer en tu bandeja de entrada", la carta mensual del
       inicio y de Quién soy (escena del libro y la taza: leer).

   Lo único que cambia entre las dos es el texto.

   El 01/08/2026 se les sacó la escena ilustrada que iba a la derecha —la pila
   de libros en una, el anotador con el lápiz en la otra—. En compu medía
   477x408 px y competía con el texto en vez de acompañarlo. Ahora el texto va
   solo y centrado, y lo que sostiene la identidad son los tres adornos: la
   ramita, la mancha rosa y el firulete. Las dos escenas siguen guardadas en
   assets/img/marca/ (escena-carta.jpg y escena-escribime.jpg) por si algún día
   las querés de vuelta.

   OJO con una cosa: la mancha rosa es un JPG **aplanado sobre el color de esta
   tarjeta**. Por eso el fondo de acá es un color liso y no lleva la textura de
   papel de la carta: si se le agrega textura, va a aparecer el rectángulo de
   esa imagen. Si algún día se cambia el color de la tarjeta, hay que volver a
   exportarla sobre el color nuevo. */
.tarjeta-papel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: clamp(1.9rem, 4vw, 3.2rem);
  background: #FCF8EC;                        /* el mismo papel que la carta */
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: clamp(18px, 2.4vw, 30px);
  /* Sombra pareja alrededor, para que se lea como una tarjeta apoyada y no
     como una hoja pegada a la página. La primera no tiene desplazamiento —de
     ahí que rodee los cuatro lados—; la segunda cae apenas hacia abajo, que es
     lo único que le da peso y evita que parezca flotando. */
  box-shadow:
    0 0 30px -4px rgba(23, 19, 16, .13),
    0 10px 34px -12px rgba(23, 19, 16, .20);
}

/* Los adornos no reciben clics: son dibujo, no interfaz.
   Van por debajo del texto y por encima del fondo: adornos (2) · texto (3). */
.tarjeta-papel__adorno,
.tarjeta-papel__mancha,
.tarjeta-papel__firulete {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

/* El adorno de arriba a la izquierda: la hoja alargada del kit (ilustración 4).
   Antes iba la ramita a línea, pero desde que también aparece en las tarjetas
   de producto de la tienda se repetía demasiado.

   La clase se llama "adorno" y no con el nombre del dibujo a propósito: si el
   nombre dice "ramita" y la imagen es otra cosa, dentro de un mes no se
   entiende nada. Para probar otro adorno, se cambia el archivo en los tres HTML
   y, si el dibujo tiene otra forma, el ancho de acá abajo. En
   assets/img/marca/ están guardados los otros dos que probamos: olivo.png
   (pintada, en verde) y hojita.png (una hoja sola, más corta).

   El ancho es bastante menor que el de la ramita original porque este dibujo es
   alto y angosto: con el ancho de antes quedaba larguísimo de alto. Lo que se
   iguala entre un adorno y otro no es el ancho sino cuánto ocupan. */
.tarjeta-papel__adorno {
  top: clamp(.9rem, 2.2vw, 1.9rem);
  left: clamp(.9rem, 2.2vw, 2rem);
  width: clamp(30px, 3.6vw, 48px);
  rotate: -8deg;
}

/* Asomando por la esquina de abajo a la izquierda, cortada por el borde.
   La posición va en píxeles y no en porcentaje: al sacarle la escena, la
   tarjeta bajó de alto, y un "20% del alto" en una tarjeta más baja dejaba la
   mancha asomando el doble de lo debido.
   La máscara le saca las cuatro esquinas al rectángulo del JPG —que son del
   color de la tarjeta pero opacas—. La elipse es del tamaño exacto de la
   imagen, así que recorta sólo el aire de las esquinas y no toca la pintura,
   que ya viene redondeada. */
.tarjeta-papel__mancha {
  left: -40px;
  bottom: -46px;
  width: clamp(150px, 22%, 220px);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 92%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 92%, transparent 100%);
}

.tarjeta-papel__firulete {
  right: clamp(.9rem, 2.6vw, 2.2rem);
  bottom: clamp(.7rem, 1.8vw, 1.4rem);
  width: clamp(54px, 7.5vw, 100px);
  opacity: .55;
}

/* El texto va por encima de los adornos, centrado y con un ancho máximo: sin
   ese tope, en una pantalla ancha los renglones se estiran de punta a punta y
   se vuelven incómodos de leer. */
.tarjeta-papel__texto {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  padding-top: clamp(.4rem, 1.6vw, 1.2rem);
}

/* La rayita rosa debajo de la volanta */
.tarjeta-papel__texto .volanta { position: relative; padding-bottom: .62rem; }
.tarjeta-papel__texto .volanta::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  translate: -50% 0;
  width: 58px; height: 3px;
  border-radius: 2px;
  background: var(--rosa);
}

.tarjeta-papel__titulo {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: -.35rem;
}
/* La segunda línea en itálica, como en la referencia */
.tarjeta-papel__titulo em {
  display: block;
  font-style: italic;
  font-size: .94em;
}

/* Subrayado dibujado a mano, apenas ondulado */
.tarjeta-papel__raya {
  display: block;
  width: clamp(130px, 62%, 240px);
  color: var(--tinta);
  opacity: .45;
}
.tarjeta-papel__raya svg { display: block; width: 100%; height: auto; }

.tarjeta-papel__texto p {
  font-family: var(--texto);
  font-size: clamp(.97rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--tinta-70);
  max-width: 40ch;
  text-wrap: pretty;
}

/* El botón en mostaza, con el negro encima: es el único par de la paleta que
   da buen contraste para texto sobre un color fuerte. */
.boton--mostaza {
  --bg: var(--mostaza);
  --fg: var(--negro);
  --bd: var(--mostaza);
  box-shadow: 0 10px 20px -14px rgba(23, 19, 16, .75);
}

.tarjeta-papel .boton { margin-top: .25rem; }

.tarjeta-papel__texto p.tarjeta-papel__aparte {
  font-size: .93rem;
  color: var(--tinta-70);
}
.tarjeta-papel__aparte a {
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transicion);
}
.tarjeta-papel__aparte a:hover { text-decoration-color: var(--tinta); }

@media (max-width: 760px) {
  .tarjeta-papel { gap: 1.4rem; }
  .tarjeta-papel__texto { padding-top: clamp(1.6rem, 7vw, 2.4rem); }
  /* El botón, un punto más chico y con las letras menos separadas: con el
     tamaño original "Recibir la próxima carta" no entraba en un renglón y se
     partía en dos. Lo que más ocupaba era el espaciado entre letras. */
  .tarjeta-papel .boton {
    padding-inline: 1.25rem;
    font-size: .74rem;
    letter-spacing: .09em;
  }
  .tarjeta-papel__adorno { left: 50%; translate: -50% 0; }
  .tarjeta-papel__firulete { opacity: .4; }
  /* Acá la tarjeta es mucho más alta, así que el desborde de la mancha se mide
     en píxeles: con porcentajes se iba entera abajo del borde y no se veía. */
  .tarjeta-papel__mancha { left: -46px; bottom: -42px; width: clamp(180px, 54%, 230px); }
}

.pie {
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.pie__grilla {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
}
.pie__logo img { height: 46px; margin-bottom: .9rem; }
.pie h3 {
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--tinta);
}
.pie li + li { margin-top: .5rem; }
.pie a, .pie p { font-size: .885rem; color: var(--tinta-70); }
.pie a { transition: color var(--transicion); }
.pie a:hover { color: var(--acento); }
.pie__legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  font-size: .78rem;
  color: var(--tinta-45);
}


/* 11 · CARRITO (PANEL Y PÁGINA) =========================================== */

.panel-carrito { position: fixed; inset: 0; z-index: 800; visibility: hidden; pointer-events: none; }
.panel-carrito.esta-abierto { visibility: visible; pointer-events: auto; }

.panel-carrito__velo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity var(--transicion);
}
.panel-carrito.esta-abierto .panel-carrito__velo { opacity: 1; }

.panel-carrito__panel {
  position: absolute;
  inset-block: 0; right: 0;
  width: min(92vw, 430px);
  background: var(--papel);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(.22, .61, .36, 1);
  box-shadow: -30px 0 60px -40px rgba(0, 0, 0, .45);
}
.panel-carrito.esta-abierto .panel-carrito__panel { transform: none; }

.panel-carrito__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--gutter);
  border-bottom: 1px solid var(--linea);
}
.panel-carrito__cuerpo { flex: 1; overflow-y: auto; padding: 1.25rem var(--gutter); }
.panel-carrito__pie {
  border-top: 1px solid var(--linea);
  padding: 1.25rem var(--gutter) 1.6rem;
  background: var(--papel-2);
  display: flex; flex-direction: column; gap: .9rem;
}

.linea-carrito {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.linea-carrito:first-child { padding-top: 0; }
.linea-carrito__imagen {
  aspect-ratio: 1;
  background: var(--papel-3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.linea-carrito__imagen img { width: 100%; height: 100%; object-fit: cover; }
.linea-carrito__datos { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.linea-carrito__nombre { font-family: var(--titulo); font-size: .98rem; line-height: 1.25; }
.linea-carrito__meta { font-size: .75rem; color: var(--tinta-45); }
.linea-carrito__controles { display: flex; align-items: center; gap: .7rem; margin-top: .2rem; }
.linea-carrito__precio { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quitar {
  font-size: .72rem;
  color: var(--tinta-45);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transicion);
}
.quitar:hover { color: var(--acento); }

.cantidad--mini button { width: 30px; height: 32px; font-size: .95rem; }
.cantidad--mini input { width: 34px; height: 32px; font-size: .85rem; }

.resumen-linea {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .885rem; color: var(--tinta-70);
}
.resumen-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
  font-family: var(--titulo);
  font-size: 1.3rem;
  font-weight: 600;
}

/* ── El aviso del envío gratis y el campo del cupón ────────────────────────
   Los dos se agregan desde app.js dentro del resumen, así no hay que repetir
   el mismo bloque en las seis páginas donde vive el carrito. */
.nota-envio-gratis {
  font-size: .78rem;
  color: var(--tinta-70);
  text-align: center;
  padding: .45rem .6rem;
  border-radius: var(--r-xs);
  background: var(--papel-2);
}
.nota-envio-gratis.esta-logrado { color: var(--negro); font-weight: 600; background: var(--rosa-claro); }

/* ── Los pares de botones del resumen ──────────────────────────────────────
   Dos botones que se comportan como un par: siempre hay uno elegido. Los usan
   "cómo querés recibirlo" y "cómo preferís pagar", pegados a su renglón del
   resumen. Se llama "par-opciones" y no "envio-modo" justamente porque ya no
   es solo del envío: si mañana hace falta un tercer par, es el mismo dibujo. */
.par-opciones { display: flex; gap: .4rem; margin: .1rem 0 .2rem; }
.par-opciones__opcion {
  flex: 1 1 0;
  padding: .42rem .5rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-xs);
  background: var(--papel);
  font-size: .78rem;
  line-height: 1.2;
  color: var(--tinta-70);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.par-opciones__opcion:hover { border-color: var(--tinta); color: var(--tinta); }
.par-opciones__opcion.esta-activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
  font-weight: 600;
}
.par-opciones__nota {
  font-size: .78rem;
  color: var(--tinta-70);
  line-height: 1.5;
  padding: .5rem .6rem;
  border-radius: var(--r-xs);
  background: var(--rosa-claro);
}
.par-opciones__nota a { text-decoration: underline; text-underline-offset: 2px; }

/* El renglón que titula cada par ("¿Cómo preferís pagar?") */
.par-opciones__titulo {
  font-size: .78rem;
  color: var(--tinta-70);
  margin: .6rem 0 .25rem;
}

/* ── "¿No se te abre el mail? Copiá el pedido" ─────────────────────────────
   Es la salida para quien toca Finalizar compra y no le pasa nada porque su
   celular no tiene correo configurado. Va deliberadamente discreto: es un
   respaldo, no una segunda opción que compita con el botón de arriba. */
/* Los datos de quien compra, en la página del pedido ----------------------
   Los casilleros no están escritos en el HTML: los dibuja app.js, porque
   cambian según el pedido. Acá está solamente cómo se ven. */
.datos-envio {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.datos-envio__intro {
  font-size: .85rem;
  color: var(--tinta-45);
  margin: .5rem 0 1.4rem;
  max-width: 48ch;
}
.datos-envio__donde { margin-bottom: 1.5rem; }

/* Dos columnas: los casilleros cortos conviven de a pares y los largos
   —la calle, la sucursal, la aclaración— se llevan el ancho entero. */
.datos-envio__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.datos-envio__campo { margin: 0; }
.datos-envio__campo--ancho { grid-column: 1 / -1; }

.datos-envio__etiqueta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--ui);
  font-size: .82rem;
  color: var(--tinta-70);
}
.datos-envio__opcional { color: var(--tinta-45); font-style: italic; }

/* Lo que falta completar. La paleta de marca no tiene ningún rojo y no se
   inventa uno: el aviso se hace con la mostaza, que sí es de marca y salta
   igual a la vista. El borde negro es lo que lo hace visible de verdad para
   quien no distingue bien los colores. */
.campo--falta {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(244, 215, 121, .6);
}
.datos-envio__aviso {
  margin-top: 1.2rem;
  padding: .75rem .95rem;
  border-radius: var(--r-xs);
  border-left: 3px solid var(--mostaza);
  background: rgba(244, 215, 121, .3);
  font-size: .85rem;
  font-weight: 600;
  color: var(--negro);
}

.copiar-pedido { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.copiar-pedido__boton {
  font-size: .78rem;
  color: var(--tinta-70);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  /* En pantalla táctil este relleno crece, para que el dedo lo acierte. Está
     abajo de todo, en el bloque "pointer: coarse". */
  padding: .2rem;
  transition: color var(--transicion);
}
.copiar-pedido__boton:hover { color: var(--tinta); }
.copiar-pedido__nota {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tinta-70);
  padding: .55rem .7rem;
  border-radius: var(--r-xs);
  background: var(--rosa-claro);
  width: 100%;
}
.copiar-pedido__nota a { text-decoration: underline; text-underline-offset: 2px; }
.copiar-pedido__texto {
  width: 100%;
  margin-top: .5rem;
  font-size: .72rem;
  line-height: 1.45;
  padding: .4rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-xs);
  background: var(--papel);
  resize: vertical;
}

.cupon { display: flex; flex-direction: column; gap: .5rem; }
.cupon__abrir {
  align-self: flex-start;
  font-size: .78rem;
  color: var(--tinta-45);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transicion);
}
.cupon__abrir:hover { color: var(--acento); }

.cupon__caja { display: flex; gap: .5rem; }
.cupon__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-xs);
  background: var(--papel);
  font-family: var(--texto);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cupon__caja .boton { flex: 0 0 auto; }

.cupon__mensaje { font-size: .78rem; color: var(--tinta-70); }
.cupon__mensaje.esta-bien { color: var(--negro); font-weight: 600; }

.carrito-vacio { text-align: center; padding-block: 3rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.carrito-vacio p { color: var(--tinta-45); }

/* Página del carrito */
.carrito-pagina { display: grid; grid-template-columns: 1.6fr .85fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
.carrito-pagina__resumen {
  position: sticky;
  top: calc(var(--alto-cabecera) + 1.5rem);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: .85rem;
}


/* 12 · FICHA DE PRODUCTO ================================================== */

.miga {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: .75rem; color: var(--tinta-45);
  padding-block: 1.4rem;
}
.miga a:hover { color: var(--tinta); text-decoration: underline; }

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }

/* ── La foto del producto ─────────────────────────────────────────────────
   Cuando el producto trae páginas de adentro (las guías), esto es un carrusel:
   el marco de siempre con las fotos apiladas una encima de otra, y las
   miniaturas debajo. Con una sola foto se ve exactamente igual que antes,
   porque la estructura es la misma y lo demás simplemente no se dibuja. */
.ficha__galeria {
  position: sticky;
  top: calc(var(--alto-cabecera) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* El marco es el que tiene la forma y el recorte. El color de fondo es el
   mismo tinte de categoría que usa la tarjeta de la tienda, así la ficha se
   siente la continuación de la grilla y no otra cosa. */
.galeria__marco {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--tinte, var(--papel-3));
  border-radius: var(--r-lg);
}

/* ── Piezas recortadas fuera de la grilla ────────────────────────────────
   Una foto con fondo transparente (PNG) nunca se corta a sangre: se muestra
   entera y con aire. Vale para la foto grande de la ficha, sus miniaturas,
   el combo y el carrito. Las fotos normales (JPG) siguen llenando su marco. */
.galeria__foto.es-recorte {
  object-fit: contain;
  padding: 7%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12))
          drop-shadow(0 10px 18px rgba(0, 0, 0, .16));
}
.galeria__mini img.es-recorte,
.combo__pieza img.es-recorte,
.linea-carrito__imagen img.es-recorte { object-fit: contain; padding: 9%; }

/* Las fotos van una sobre otra y se cruzan con un fundido. Se apilan con
   position:absolute y no con grid porque el marco ya define el alto. */
.galeria__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms;
}
.galeria__foto.esta-activa { opacity: 1; visibility: visible; }

/* Flechas y contador. Van en crema translúcido y no en blanco: apoyados sobre
   el borde de la foto, el blanco puro se notaba como un parche. */
.galeria__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--tinta);
  background: rgba(255, 251, 238, .84);
  border: 1px solid var(--linea);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--sombra-baja);
  opacity: 0;
  transition: opacity var(--transicion), background-color var(--transicion);
}
.ficha__galeria:hover .galeria__flecha,
.galeria__flecha:focus-visible { opacity: 1; }
.galeria__flecha:hover { background: var(--crema); }
.galeria__flecha--previa { left: .7rem; }
.galeria__flecha--siguiente { right: .7rem; }

.galeria__contador {
  position: absolute;
  z-index: 2;
  right: .75rem; bottom: .75rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: rgba(255, 251, 238, .84);
  border: 1px solid var(--linea);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-70);
}

/* Miniaturas: se reparten el ancho en partes iguales y bajan a un segundo
   renglón solas si algún día son muchas. */
.galeria__miniaturas { display: flex; flex-wrap: wrap; gap: .5rem; }

.galeria__mini {
  flex: 1 1 62px;
  min-width: 62px;
  /* El tope es para que con dos o tres fotos no queden enormes; con cuatro,
     que es lo que traen las guías, llenan justo el ancho del marco. */
  max-width: 142px;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--tinte, var(--papel-3));
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  /* Apagadas, pero no tanto: son la invitación a mirar adentro, así que tienen
     que leerse como páginas y no como manchitas grises. */
  opacity: .68;
  transition: opacity var(--transicion), border-color var(--transicion);
}
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria__mini:hover { opacity: .9; }
.galeria__mini[aria-selected='true'] { opacity: 1; border-color: var(--linea-fuerte); }

.ficha__panel { display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; }
.ficha__precio {
  font-family: var(--titulo);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ficha__stock { font-size: .8rem; color: var(--tinta-45); }
.ficha__stock strong { color: var(--tinta); font-weight: 600; }
.ficha__stock.es-bajo strong { color: var(--acento); }

/* ── Precios en promoción ──────────────────────────────────────────────────
   Cuando un producto tiene una promo con fecha, el precio de lista queda
   tachado y al lado va el nuevo.

   El precio nuevo va en negro y no en oliva, aunque el oliva sea el color de
   "atención" de la marca: sobre la crema el oliva llega a 3,2:1 y para texto
   de este tamaño hace falta 4,5:1. La señal de que hay oferta la dan el
   tachado y la insignia, que sí tienen contraste de sobra. */
.precio-antes {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--tinta-45);
  font-weight: 400;
  font-size: .78em;
  margin-right: .45em;
}
.precio-ahora { font-weight: 700; }

/* La insignia de oferta va a la derecha porque a la izquierda puede estar la
   de "Digital": un ebook en promoción llevaría las dos. */
.tarjeta__insignia--promo {
  left: auto; right: .8rem;
  background: var(--rosa);
  color: var(--negro);
  border-color: var(--rosa);
}

.ficha__promo {
  align-self: flex-start;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: var(--rosa-claro);
  color: var(--negro);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.ficha__compra { display: flex; flex-wrap: wrap; gap: .8rem; width: 100%; }
.ficha__compra .boton { flex: 1 1 200px; }

/* ── La franja del mundo del libro ─────────────────────────────────────────
   Ilustración a todo el ancho, debajo de la descripción. La ilustración es
   cuadrada, así que se recorta: el encuadre deja la luna y el skyline, que es
   lo que da la atmósfera. Los bordes de arriba y abajo se funden con la página
   para que no quede como una foto pegada. */
.ambiente {
  position: relative;
  overflow: hidden;
}

/* El difuminado se hace con degradados, no con una imagen de máscara.
   Antes usaba un PNG dibujado a mano, pero al estirarse a lo ancho de la
   franja (1,56×) la ondulación se deformaba en olas largas que se leían como
   un borde mal recortado. Con degradados la caída es perfectamente pareja,
   se adapta sola a cualquier proporción de pantalla y no pesa nada.
   Los porcentajes intermedios suavizan la curva: sin ellos se nota el punto
   donde el degradado "arranca". */
.ambiente__marco {
  position: relative;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.4) 7%, rgba(0,0,0,.85) 15%, #000 24%,
                               #000 76%, rgba(0,0,0,.85) 85%, rgba(0,0,0,.4) 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.85) 19%, #000 30%,
                               #000 70%, rgba(0,0,0,.85) 81%, rgba(0,0,0,.4) 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, rgba(0,0,0,.4) 7%, rgba(0,0,0,.85) 15%, #000 24%,
                               #000 76%, rgba(0,0,0,.85) 85%, rgba(0,0,0,.4) 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.85) 19%, #000 30%,
                               #000 70%, rgba(0,0,0,.85) 81%, rgba(0,0,0,.4) 91%, transparent 100%);
          mask-composite: intersect;
}

/* Velo apenas oscuro detrás de la frase. Queda bien adentro de la zona sólida:
   si se estiraba hasta el borde, seguía oscuro donde la ilustración ya se
   había desvanecido y formaba ese bulto raro contra el crema.
   Solo aparece si el producto tiene frase: en una ilustración clara y sin texto
   encima, este velo no ayudaba a leer nada y ensuciaba el centro del dibujo. */
.ambiente__marco--con-frase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(44% 30% at 50% 50%,
              rgba(9, 18, 30, .5) 0%, rgba(9, 18, 30, .2) 60%, transparent 100%);
  pointer-events: none;
}

/* La forma de la franja y el encuadre salen de app.js, porque cada ilustración
   necesita lo suyo: una cuadrada hay que recortarla mucho, una ya apaisada casi
   nada. Los valores de acá son el default, por si alguna no está en esa lista. */
.ambiente__arte {
  width: 100%;
  height: auto;
  aspect-ratio: var(--recorte, 21 / 9);
  object-fit: cover;
  object-position: var(--encuadre, center 12%);
  display: block;
}

/* Las estrellas que titilan ───────────────────────────────────────────────
   Las estrellitas están pintadas adentro del JPG, así que no se pueden animar
   por separado. Lo que hace esto es apoyar encima un resplandor color crema,
   justo sobre las más brillantes, que va y viene despacio. A la vista, la
   estrella dibujada respira.

   Por qué calzan exactas: la ilustración es cuadrada y la franja la recorta,
   así que esta capa repite la misma geometría (mismo ancho, y cuadrada) y se
   corre hacia arriba exactamente lo que corre el recorte. La cuenta es
   el encuadre × (1 − la proporción del recorte):
       21/9 con 12%  →  0,12 × (1 − 21/9) = −16%
       5/4  con 30%  →  0,30 × (1 − 5/4)  = −7,5%
   Esa cuenta la hace sola app.js a partir del encuadre de cada ilustración, así
   que si cambiás el recorte las luces se acomodan y no hay que tocar nada acá.
   Las posiciones de cada estrella también están en app.js.
   (Vale para ilustraciones cuadradas, que es de donde salió el aspect-ratio 1/1
   de acá abajo. Con una apaisada habría que rehacerlo.) */
.ambiente__cielo {
  position: absolute;
  left: 0;
  top: var(--corrimiento, -16%);
  width: 100%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.ambiente__estrella {
  position: absolute;
  width: var(--tam, 1.7%);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  /* La caída es rápida a propósito: así el centro se lee como un punto de luz
     que se aviva, y no como una pelotita de niebla apoyada encima. */
  background: radial-gradient(circle,
              rgba(255, 251, 238,   1) 0%,
              rgba(255, 251, 238, .55) 22%,
              rgba(255, 251, 238, .14) 48%,
              rgba(255, 251, 238,   0) 72%);
  opacity: 0;
  animation: titila var(--dura, 5s) ease-in-out var(--espera, 0s) infinite;
}

/* Sube y baja: nunca prende de golpe. Cada estrella tiene su propio tiempo y
   su propia espera (en app.js) para que no titilen todas juntas, que es lo que
   delata que es una animación.
   Con "movimiento reducido" activado en el sistema, la regla general del final
   del archivo apaga la animación: el resplandor no aparece y la ilustración
   queda como siempre, con sus estrellas quietas. */
@keyframes titila {
  0%, 100% { opacity: 0;                 transform: scale(.82); }
  50%      { opacity: var(--brillo, .8); transform: scale(1); }
}

.ambiente__frase {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(100% - 2 * var(--gutter), 44ch);
  margin: 0;
  text-align: center;
  font-family: var(--titulo);
  font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem);
  line-height: 1.45;
  color: #FFFBEE;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
  text-wrap: balance;
}

@media (max-width: 700px) {
  /* En celular una franja 21:9 quedaría una rendija: se deja más alta */
  .ambiente__arte {
    aspect-ratio: var(--recorte-cel, 5 / 4);
    object-position: var(--encuadre-cel, center 30%);
  }
  /* Y las luces se corren lo mismo, para seguir calzando (ver la cuenta arriba) */
  .ambiente__cielo { top: var(--corrimiento-cel, -7.5%); }
}

/* Barra de compra fija en celular. Aparece sola cuando el botón principal se
   va de pantalla, y se esconde cuando vuelve a verse. En compu no existe. */
.barra-compra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .65rem var(--gutter);
  padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 251, 238, .96);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -12px 28px -22px rgba(0, 0, 0, .5);
  transform: translateY(115%);
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}
.barra-compra.esta-visible { transform: none; }

.barra-compra__datos { flex: 1; min-width: 0; }
.barra-compra__nombre {
  font-family: var(--texto);
  font-size: .76rem;
  color: var(--tinta-70);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-compra__precio {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.barra-compra .boton { flex-shrink: 0; }

@media (min-width: 880px) { .barra-compra { display: none; } }
@media (max-width: 879px) {
  /* que la barra no tape el final del pie ni los avisos */
  body[data-pagina="producto"] { padding-bottom: 4.6rem; }
  body[data-pagina="producto"] .avisos-flotantes { bottom: 5.4rem; }
}

.ficha__descripcion { display: flex; flex-direction: column; gap: .95rem; color: var(--tinta-70); font-size: 1rem; line-height: 1.68; }
.ficha__descripcion p { text-wrap: pretty; }

/* ── El índice del producto ───────────────────────────────────────────────
   Los capítulos, debajo de la descripción. Los números los cuenta el navegador
   solo (counter), así que agregar o sacar un capítulo en datos.js no obliga a
   renumerar nada a mano. */
/* El margen de abajo es para despegarlo de la tabla de detalles, que también
   son renglones con una rayita: pegados se leían como una sola lista larga. */
.ficha__indice {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: .55rem;
}

.ficha__indice ol { counter-reset: capitulo; border-top: 1px solid var(--linea); }

.ficha__indice li {
  counter-increment: capitulo;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .1rem .6rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--texto);
  font-size: .9rem;
  line-height: 1.45;
}

/* decimal-leading-zero para que queden 01, 02… como en las páginas de la guía.
   Del 10 en adelante sigue solo, sin romperse. */
.ficha__indice li::before {
  content: counter(capitulo, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--titulo);
  font-size: .85rem;
  font-weight: 600;
  /* Este gris y no el oliva de marca: sobre la crema el oliva no llega al
     contraste mínimo para un texto de este tamaño. */
  color: var(--tinta-45);
  font-variant-numeric: tabular-nums;
  padding-top: .05rem;
}

.ficha__indice li b { font-weight: 600; color: var(--tinta); }
.ficha__indice li span { color: var(--tinta-70); }

.tabla-detalles { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-detalles th, .tabla-detalles td { padding: .65rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla-detalles th { font-weight: 600; color: var(--tinta); width: 42%; }
.tabla-detalles td { color: var(--tinta-70); }

/* Acordeón de envíos y pagos */
.acordeon { width: 100%; border-top: 1px solid var(--linea); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__boton {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  text-align: left;
}
.acordeon__boton .signo { font-size: 1.1rem; color: var(--acento); transition: transform var(--transicion); }
.acordeon__boton[aria-expanded='true'] .signo { transform: rotate(45deg); }
.acordeon__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms ease; }
.acordeon__boton[aria-expanded='true'] + .acordeon__panel { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p, .acordeon__panel li { font-size: .925rem; line-height: 1.6; color: var(--tinta-70); }
.acordeon__panel > div > * { padding-bottom: 1.1rem; }
.acordeon__panel li { position: relative; padding-left: 1.1rem; margin-bottom: .35rem; }
.acordeon__panel li::before { content: '·'; position: absolute; left: .25rem; color: var(--acento); font-weight: 700; }

/* Combo: "Llevalos juntos" — la venta cruzada */
.combo {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-lg);
  background: var(--papel-2);
  padding: clamp(1.3rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.combo__piezas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}
.combo__pieza {
  position: relative;
  width: 88px; aspect-ratio: 1;
  background: var(--papel-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.combo__pieza img { width: 100%; height: 100%; object-fit: cover; }
.combo__mas { font-size: 1.15rem; color: var(--tinta-45); }
.combo__lista { display: flex; flex-direction: column; gap: .55rem; }
.combo__item { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; }
.combo__item input { margin-top: .35rem; accent-color: var(--acento); width: 16px; height: 16px; }
.combo__item span { color: var(--tinta-70); }
.combo__item b { font-weight: 600; color: var(--tinta); }
.combo__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.combo__total { font-family: var(--titulo); font-size: 1.35rem; font-weight: 600; }
.combo__total small { display: block; font-family: var(--ui); font-size: .72rem; font-weight: 500; color: var(--tinta-45); letter-spacing: .04em; }
.combo__ahorro { color: var(--acento); font-weight: 600; font-size: .8rem; }


/* 13 · TIENDA (FILTROS) =================================================== */

.encabezado-pagina {
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.encabezado-pagina .bajada { margin-inline: auto; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--linea);
}
.filtros__grupo { display: flex; flex-wrap: wrap; gap: .5rem; }
.pildora {
  padding: .55rem 1.1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-70);
  transition: all var(--transicion);
}
.pildora:hover { border-color: var(--tinta); color: var(--tinta); }
.pildora[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.filtros__orden { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--tinta-45); }
.filtros__orden select {
  padding: .5rem .7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--papel);
  font-size: .82rem;
}

.sin-resultados { text-align: center; padding-block: 4rem; color: var(--tinta-45); }


/* 12 bis · LO QUE DICEN LAS LECTORAS ======================================
   Dos formas de lo mismo: la cita grande de la portada y la fila de
   comentarios de cada ficha.

   Las dos van SIN recuadro y CON comillas. Las comillas no son adorno: sin
   una caja que las contenga, son ellas las que le marcan al ojo dónde empieza
   y dónde termina cada frase. Las pone app.js, no se escriben en datos.js. */

/* ── La cita grande de la portada ─────────────────────────────────────── */
.cita-lectora { text-align: center; }
.cita-lectora__ramita { width: 54px; margin: 0 auto 1.4rem; display: block; opacity: .75; }
.cita-lectora__texto {
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-style: italic;
  line-height: 1.35;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: balance;
}
.cita-lectora__quien {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--texto); font-style: normal;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-45);
}
/* De qué libro habla. Va en un segundo renglón y sin mayúsculas: el título de
   un libro en versalitas se lee mal y encima pierde la cursiva, que es como el
   resto del sitio escribe los títulos. */
.cita-lectora__libro {
  display: block; margin-top: .5rem;
  font-size: .88rem; letter-spacing: 0; text-transform: none;
  color: var(--tinta-45);
}
.cita-lectora__libro em { font-style: italic; color: var(--tinta-70); }

/* ── La fila de comentarios de la ficha ───────────────────────────────── */
.comentarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-top: 1.1rem;
  text-align: center;
}
[data-comentarios] .volanta { display: block; text-align: center; }
.comentario { position: relative; margin: 0; }
.comentario__texto {
  font-family: var(--titulo);
  font-size: 1.06rem; font-style: italic; line-height: 1.55;
  margin: 0;
}
/* La rayita fina que separa un comentario del siguiente */
.comentario + .comentario::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.4rem, 4vw, 3rem) / -2);
  top: 6%; bottom: 6%;
  width: 1px;
  background: var(--linea);
}
/* En celular se apilan, así que la rayita se acuesta */
@media (max-width: 720px) {
  .comentario + .comentario::before {
    left: 22%; right: 22%;
    top: calc(clamp(1.4rem, 4vw, 3rem) / -2);
    width: auto; height: 1px; bottom: auto;
  }
}


/* 13 bis · LEGALES Y PRIVACIDAD ==========================================
   Una página de puro texto. Va más angosta que el resto (la usa
   .contenedor--angosto) porque un renglón muy largo cansa de leer, y estos
   son justamente los textos que nadie tiene ganas de leer. */

.legales__indice {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .4rem;
  padding-bottom: 2rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--linea);
}
.legales__indice a {
  padding: .42rem .85rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .8rem;
  text-decoration: none;
  color: var(--tinta-70);
  transition: all var(--transicion);
}
.legales__indice a:hover { border-color: var(--tinta); color: var(--tinta); }

.legales__bloque { margin-bottom: clamp(2.8rem, 6vw, 4rem); }
.legales__bloque > * + * { margin-top: 1rem; }
.legales__bloque p { line-height: 1.75; }

/* Un poco de aire arriba de cada subtítulo, para que se vean los bloques */
.legales__subtitulo {
  font-family: var(--titulo);
  font-size: 1.06rem;
  font-weight: 600;
  margin-top: 2rem !important;
}

/* La hoja de estilos le saca los puntitos a todas las listas (arriba de todo,
   buscando "list-style"). Acá los queremos: son enumeraciones de verdad y el
   puntito ayuda a leerlas. */
.legales__lista { list-style: disc; padding-left: 1.15rem; }
.legales__lista li { margin-bottom: .7rem; line-height: 1.7; }
.legales__lista li::marker { color: var(--acento); }

/* Los datos de la vendedora: dos columnas, etiqueta y valor */
.legales__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem 1.1rem;
  padding: 1.2rem 1.4rem;
  background: var(--papel-2);
  border-radius: var(--r-md);
  font-size: .95rem;
}
.legales__datos dt { color: var(--tinta-45); font-size: .82rem; padding-top: .12rem; }
.legales__datos dd { font-weight: 500; }

/* El botón de arrepentimiento, destacado del resto del texto */
.legales__accion {
  padding: 1.5rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  text-align: center;
}
.legales__accion .boton { margin-bottom: .7rem; }
.legales__aparte { font-size: .8rem; color: var(--tinta-45); margin: 0 !important; }

/* El texto que exige la normativa de datos personales. Va en tono más bajo
   porque es una fórmula legal, no algo escrito por vos. */
.legales__aparte-caja {
  padding: 1.2rem 1.4rem;
  border-left: 2px solid var(--linea-fuerte);
  background: var(--papel-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.legales__aparte-caja p {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--tinta-70);
}
.legales__aparte-caja p + p { margin-top: .8rem; }

.legales__fecha { font-size: .82rem; color: var(--tinta-45); font-style: italic; }

@media (max-width: 540px) {
  .legales__datos { grid-template-columns: 1fr; gap: .1rem; }
  .legales__datos dd { margin-bottom: .6rem; }
}


/* 14 · AVISO FLOTANTE, ANIMACIONES Y ACCESIBILIDAD ======================== */

.avisos-flotantes {
  position: fixed;
  bottom: 1.2rem; left: 50%;
  translate: -50% 0;
  z-index: 850;
  display: flex; flex-direction: column; gap: .5rem;
  width: min(92vw, 420px);
  pointer-events: none;
}
.aviso {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-alta);
  font-size: .875rem;
  animation: aviso-flota 320ms cubic-bezier(.22, .61, .36, 1) both;
}
.aviso.se-va { animation: aviso-sale 280ms ease forwards; }
.aviso__marca { color: var(--rosa); font-size: 1rem; }
@keyframes aviso-flota { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale  { to { opacity: 0; transform: translateY(10px); } }

/* Aparición al hacer scroll */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity 760ms ease, transform 760ms cubic-bezier(.22, .61, .36, 1); }
.revelar.es-visible { opacity: 1; transform: none; }

body.sin-scroll { overflow: hidden; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .sobre-mi { grid-template-columns: 1fr; }
  /* En una columna: la mancha se achica pero mantiene su proporción.
     El width:100% es necesario porque el margin-inline:auto desactiva el
     estirado del grid y, sin contenido en flujo, el ancho colapsaría a 0. */
  .sobre-mi__marco { width: 100%; max-width: 420px; margin-inline: auto; }
  .carrito-pagina { grid-template-columns: 1fr; }
  .carrito-pagina__resumen { position: static; }
}

@media (max-width: 880px) {
  :root { --alto-cabecera: 60px; }

  .nav-principal { display: none; }
  .abre-menu { display: grid; }
  .cabecera__interior { grid-template-columns: auto 1fr auto; }
  .cabecera__logo { justify-self: center; }
  .cabecera__logo img { height: 34px; }

  .diapo {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
    padding-block: clamp(2.2rem, 7vw, 3.2rem) 4.2rem;
    gap: 1.8rem;
  }
  .diapo__texto { justify-self: center; align-items: center; order: 2; max-width: 100%; }
  .diapo__arte  { justify-self: center; order: 1; max-width: 100%; }
  /* En celular achicamos la mancha entera, no la foto de adentro:
     si tocás la foto, se desalinea con la mancha de color de atrás. */
  .diapo__mancha,
  .diapo__arte::before { width: min(78%, 290px); }
  .diapo__acciones { justify-content: center; }
  .carrusel__flecha { display: none; }

  .grilla-categorias { grid-template-columns: 1fr; }

  /* En celular la ficha se apila, y ahí el objetivo es que el botón de comprar
     entre en la primera pantalla. Se recortan los aires acumulados (miga,
     separación foto/datos y espacio entre líneas) sin tocar la foto, que es
     lo que realmente vende. */
  .ficha { grid-template-columns: 1fr; gap: 1.15rem; }
  .ficha__galeria { position: static; }
  .galeria__marco { aspect-ratio: 4 / 3; }
  /* Acá no hay hover que las muestre: se pasa deslizando el dedo o tocando
     las miniaturas, que además dicen mucho más que una flecha. */
  .galeria__flecha { display: none; }
  .ficha__panel { gap: .85rem; }
  .miga { padding-block: .7rem; }

  .seccion__encabezado--fila { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  /* En un celular, dos casilleros por renglón quedan angostos para escribir */
  .datos-envio__campos { grid-template-columns: 1fr; }

  .grilla-productos { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .9rem; }
  .grilla-productos--tres { grid-template-columns: repeat(2, 1fr); }
  /* El tercer destacado ocupa el ancho completo, como cierre de la fila */
  .grilla-productos--tres > :last-child:nth-child(odd) { grid-column: span 2; }
  .grilla-productos--tres > :last-child:nth-child(odd) .tarjeta__marco { aspect-ratio: 16 / 9; }

  .tarjeta__resumen { display: none; }

  /* Sin hover que valga: el atajo queda siempre visible, pero como un "+"
     chiquito en la esquina para no taparle la foto al producto. */
  .tarjeta__rapido {
    opacity: 1;
    transform: none;
    left: auto;
    right: .55rem;
    bottom: .55rem;
  }
  .tarjeta__rapido .boton {
    width: 44px; height: 44px; min-height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    box-shadow: var(--sombra-baja);
  }
  .tarjeta__rapido .boton::before {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
  }
  .tarjeta__rapido .boton[disabled] { display: none; }

  .pie__grilla { grid-template-columns: 1fr; text-align: center; }
  .pie__logo img { margin-inline: auto; }
  .pie__legal { justify-content: center; text-align: center; }

  .filtros { flex-direction: column; align-items: stretch; }
  .filtros__grupo { justify-content: center; }
  .filtros__orden { justify-content: center; }

  .ficha__compra .boton { flex: 1 1 100%; }
  .linea-carrito { grid-template-columns: 62px 1fr; }
  .linea-carrito__precio { grid-column: 2; text-align: right; }
}

/* Sólo en celulares muy angostos (iPhone SE y similares) va una sola columna */
@media (max-width: 359px) {
  .grilla-productos, .grilla-productos--tres { grid-template-columns: 1fr; }
  .grilla-productos--tres > :last-child:nth-child(odd) { grid-column: auto; }
  .grilla-productos--tres > :last-child:nth-child(odd) .tarjeta__marco { aspect-ratio: 5 / 4; }
}


/* En pantallas táctiles, nada por debajo de 44px: es lo que mide un dedo */
@media (pointer: coarse) {
  .boton, .pildora, .quitar { min-height: 44px; }
  .quitar { display: inline-flex; align-items: center; }
  .cantidad--mini button { width: 38px; height: 40px; }
  .cantidad--mini input { height: 40px; }

  /* Los pares de opciones del pedido —cómo lo recibe, cómo paga, dónde lo
     recibe— se habían quedado afuera de esta regla y quedaban en 30px. */
  .par-opciones__opcion { min-height: 44px; }

  /* Y el botón de copiar el pedido, que es la salida de emergencia cuando el
     mail no abre: justo el que más importa acertar en un celular. La letra no
     cambia, solo la zona que responde al dedo (de 27px a 46). */
  .copiar-pedido__boton { padding: .8rem .5rem; }
}

/* Respeta la preferencia de menos movimiento del sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .diapo { transition: opacity .01ms; }
  /* Sin animación el vapor quedaría como tres rayas fijas: mejor no mostrarlo.
     Las "z" en cambio se dejan visibles y quietas, que se entienden igual. */
  .vapor { display: none; }
  .duerme__z { opacity: .4; }
}

@media print {
  .cabecera, .barra-avisos, .panel-carrito, .carrusel__flecha,
  .carrusel__puntos, .galeria__flecha, .galeria__contador,
  .tarjeta-papel, .avisos-flotantes { display: none !important; }
  body::after { display: none; }
}