/* Inkhouse.col — página pública. */

/* ---------- Fondo ---------- */

.rejilla-fondo {
  position: fixed;
  inset: -10%;
  z-index: var(--z-fondo);
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 22%, #000 0%, transparent 78%);
}

/* La deriva se hace con transform sobre una capa hija, nunca animando
   background-position. Esa propiedad obliga a redibujar la capa entera en
   cada fotograma: medido, era la única capa que se repintaba con la página
   quieta, unas 60 veces por segundo sobre más de 4 millones de píxeles en un
   celular de densidad 3. Con transform la tarjeta gráfica solo la desplaza.
   La capa sobra 68 px arriba y a la izquierda, que es lo que avanza en cada
   vuelta, así que nunca asoma un borde.

   Aun así, en celular se queda quieta. Moverla obliga a volver a aplicar la
   máscara en cada fotograma, y medido, quieta la página hace la mitad del
   trabajo gráfico. A 2.6 px por segundo y detrás de todo, en una pantalla de
   teléfono la deriva no se ve; lo que sí se nota es el scroll trabado. */
.rejilla-fondo::before {
  content: '';
  position: absolute;
  inset: -68px 0 0 -68px;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
}

@media (hover: hover) and (pointer: fine) {
  .rejilla-fondo::before { animation: deriva 26s linear infinite; }
}

@keyframes deriva { to { transform: translate(68px, 68px); } }

/* ---------- Saltar al contenido ---------- */

.saltar {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -140%;
  z-index: var(--z-aviso);
  padding: 0.75rem 1.25rem;
  background: var(--acento);
  color: var(--sobre-acento);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radio-chico) var(--radio-chico);
  transition: translate var(--micro) var(--salida);
}
.saltar:focus-visible { translate: -50% 0; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-fijo);
  background: oklch(0.1149 0 0 / 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.marca img { border-radius: 50%; }
.marca__texto { display: grid; line-height: 1.15; }
.marca__texto strong {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.marca__texto small { color: var(--gris); font-size: 0.8125rem; font-weight: 500; }

.cabecera__nav {
  display: flex;
  gap: 1.6rem;
  margin-inline: auto;
  font-size: 0.9375rem;
  font-weight: 600;
}
.cabecera__nav a {
  text-decoration: none;
  color: var(--gris);
  transition: color var(--micro) var(--salida);
}
.cabecera__nav a:hover { color: var(--blanco); }

@media (max-width: 860px) {
  .cabecera__nav { display: none; }
  .boton-pedido { margin-inline-start: auto; }
  .marca__texto small { display: none; }
}

.boton-pedido {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0 1.1rem;
  background: oklch(1 0 0 / 0.04);
  /* 2px y un gris visible: con 1px de #1F1F1F el contorno desaparecía
     sobre el negro y el botón no se leía como botón. */
  border: 2px solid var(--borde-vivo);
  border-radius: 999px;
  color: var(--blanco);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--micro) var(--salida),
              background var(--micro) var(--salida),
              scale 220ms var(--salida);
}
.boton-pedido:hover { border-color: var(--acento); background: oklch(1 0 0 / 0.08); }
.boton-pedido__icono { flex: 0 0 auto; }

/* Salta cuando entra algo al pedido: es el único aviso de que se agregó. */
.boton-pedido[data-rebote='si'] { animation: rebote 420ms var(--salida); }
@keyframes rebote {
  0% { scale: 1; }
  40% { scale: 1.12; }
  100% { scale: 1; }
}

@media (max-width: 420px) {
  .boton-pedido__texto { display: none; }
  .boton-pedido { padding: 0 0.8rem; }
}
.boton-pedido__contador {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--gris);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background var(--micro) var(--salida), color var(--micro) var(--salida);
}
.boton-pedido[data-lleno='si'] { border-color: var(--acento); }
.boton-pedido[data-lleno='si'] .boton-pedido__contador {
  background: var(--acento);
  color: var(--sobre-acento);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: translate 260ms var(--salida), scale var(--micro) var(--salida), background var(--micro) var(--salida);
}
.boton {
  /* translate va aparte de transform, así el imán no pisa ninguna otra
     transformación que el elemento tenga. */
  translate: var(--iman-x, 0) var(--iman-y, 0);
}
.boton:hover { scale: 1.03; }
.boton:active { scale: 0.98; }
.boton--grande { min-height: 56px; padding: 0 2rem; font-size: 1.0625rem; }

.boton--primario { background: var(--acento); color: var(--sobre-acento); }
.boton--primario:hover { background: oklch(0.6 0.2 262); }

.boton--whatsapp { background: var(--whatsapp); color: var(--sobre-whatsapp); }
.boton--whatsapp:hover { background: var(--whatsapp-vivo); }

.boton--contorno {
  background: oklch(1 0 0 / 0.04);
  border: 2px solid var(--borde-vivo);
  color: var(--blanco);
}
.boton--contorno:hover { border-color: var(--acento); }

.boton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  translate: none;
  scale: 1;
}

/* ---------- Distintivo ---------- */

/* Distintivo: una máquina de bobinas jala la línea roja bajo el texto.
   Reemplaza a una pastilla con un punto rojo que parpadeaba, el aviso de
   estado de cualquier plantilla. La máquina va en trazo fino, como grabado,
   para hablar el mismo idioma que las astas finas de la Bodoni; relleno
   negro, para que al pasar por encima del texto lo tape como un objeto real.
   El azul de la línea es la única excepción a «el acento es precio o compra»: es
   tinta, la deja la aguja. Todo está dibujado por defecto: el movimiento
   (animaciones.js) solo repite el trazo, así que sin script la línea ya
   está completa y la máquina en reposo. */

.distintivo {
  --maquina: 2.6rem;
  /* Proporciones del SVG, calculadas por herramientas/maquina.py:
     la punta está al 97.33 % del ancho y a 2.09 % del alto desde abajo,
     y el alto es 1.2776 veces el ancho. */
  --punta: calc(var(--maquina) * 0.9733);
  position: relative;
  display: inline-block;
  padding: 0 0 0.6rem calc(var(--punta) + 0.55rem);
  color: var(--blanco);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 900px) {
  .distintivo { --maquina: 3rem; font-size: 0.9375rem; }
}

/* El carro mide lo mismo que la línea. La animación lo desplaza el 100 % de
   su propio ancho, así que la máquina recorre exactamente el trazo sin que el
   script mida nada: si la tipografía llega tarde y el texto cambia de ancho,
   el porcentaje se recalcula solo y la aguja sigue sobre el borde de la
   tinta. Medirlo con JS al cargar dejaba la máquina 20 px corrida. */
.distintivo__carro {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--punta));
  height: 0;
  pointer-events: none;
}

.distintivo__maquina {
  position: absolute;
  left: 0;
  /* La punta se apoya en el centro de la línea, que mide 2 px. */
  bottom: calc(1px - var(--maquina) * 1.2776 * 0.0209);
  width: var(--maquina);
  height: auto;
  overflow: visible;
}
.distintivo__maquina .pieza,
.distintivo__maquina .trazo {
  stroke: oklch(0.84 0 0);
  stroke-width: 0.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.distintivo__maquina .pieza { fill: var(--negro); }
.distintivo__maquina .trazo { fill: none; }
.maquina__aguja {
  stroke: var(--acento-texto);
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.distintivo__linea {
  position: absolute;
  left: var(--punta);
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--acento-texto);
  /* Crece desde la derecha: la máquina entra por ese extremo y la tinta
     queda detrás de la aguja mientras avanza hacia la izquierda. */
  transform-origin: right center;
  overflow: hidden;
}
/* Luz sobre tinta fresca: un destello tenue recorre el trazo de vez en
   cuando. Solo transform. */
.distintivo__brillo {
  position: absolute;
  inset: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, oklch(0.84 0.09 255 / 0.9), transparent);
  translate: -110% 0;
}

/* ---------- Hero ----------
   La sección mide varias pantallas. Dentro, el escenario se queda pegado
   arriba mientras se pasa por encima, y el video avanza con el scroll: bajar
   es recorrer los productos. El video no vive en una caja: ocupa la pantalla
   entera y el contenido va encima. */

.hero {
  position: relative;
  /* Altura por defecto, para cuando no hay recorrido por scroll. */
  height: 100svh;
  min-height: 560px;
}

/* El script en el titular pide más aire arriba que una sans. */
.hero h1 {
  margin-block: 0.12em 0.08em;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
}

.hero[data-modo='scroll'] {
  height: 200vh;
}

/* Con kits el hero tiene tres pantallas y necesita más recorrido. */
.hero[data-kits='si'][data-modo='scroll'] { height: 270vh; }

/* En celular el recorrido tiene que ser largo por una razón contraria a la
   que parece: un deslizón de pulgar recorre mucho más que un giro de rueda.
   Con 160svh el video entero se consumía en medio deslizón y el efecto no se
   alcanzaba a leer. 230svh deja algo más de una pantalla de recorrido, que
   son dos deslizones tranquilos, y el catálogo sigue a un gesto de distancia. */
@media (max-width: 899px) {
  .hero[data-modo='scroll'],
  .hero[data-modo='cuadros'] { height: 230svh; }
  .hero[data-kits='si'][data-modo='scroll'],
  .hero[data-kits='si'][data-modo='cuadros'] { height: 310svh; }
}

.hero__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* En celular el hero se dibuja en un lienzo con cuadros sueltos (js/hero.js).
   Lleva la clase .hero__video para heredar posición y máscara; cuando ya
   dibujó, el video, que solo mostraba el póster, se oculta. */
.hero__lienzo { display: block; }
.hero[data-lienzo='listo'] video.hero__video { visibility: hidden; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El sujeto se corre a la derecha: en escritorio el texto vive a la
     izquierda y un producto justo detrás compite con el titular. */
  object-position: 66% center;
  /* El video ya viene con el negro a fondo, así que se funde con la página
     sin borde. La máscara de abajo disuelve el corte con la sección
     siguiente. */
  mask-image: linear-gradient(#000 72%, transparent 100%);
  will-change: opacity;
}

/* Velo: oscurece el lado del texto para que se lea sobre cualquier
   fotograma, y apaga el borde inferior contra la página. */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      oklch(0.1149 0 0 / 0.96) 0%,
      oklch(0.1149 0 0 / 0.92) 38%,
      oklch(0.1149 0 0 / 0.55) 60%,
      oklch(0.1149 0 0 / 0.15) 82%,
      transparent 100%),
    linear-gradient(to bottom,
      oklch(0.1149 0 0 / 0.55) 0%,
      transparent 22%,
      transparent 68%,
      oklch(0.1149 0 0) 100%);
}
@media (max-width: 899px) {
  /* En vertical el producto queda detrás del texto, así que el velo tiene
     que ser plano y no direccional. */
  .hero__velo {
    background:
      linear-gradient(to bottom,
        oklch(0.1149 0 0 / 0.72) 0%,
        oklch(0.1149 0 0 / 0.55) 40%,
        oklch(0.1149 0 0 / 0.88) 78%,
        oklch(0.1149 0 0) 100%);
  }
}

/* El ancho máximo va en un hijo, no en el mismo elemento que .contenedor:
   ahí chocaba con su margin-inline auto y el bloque se centraba en vez de
   alinearse a la izquierda.

   Los dos bloques comparten la misma celda de la rejilla, así que uno entra
   exactamente donde estaba el otro, sin mover nada de sitio. */
.hero__marco {
  position: relative;
  display: grid;
  align-items: center;
}

.hero__contenido {
  grid-area: 1 / 1;
  display: grid;
  gap: 1.35rem;
  align-content: center;
  justify-items: start;
  max-width: 44rem;
  will-change: opacity, transform;
}

/* El segundo arranca apagado. Sin JavaScript nunca se enciende, y el primero
   se queda puesto: el hero sigue siendo correcto. */
.hero__contenido--dos,
.hero__contenido--kits {
  opacity: 0;
  pointer-events: none;
}

/* Tercera pantalla: kits 1-2-3, como en el boceto del cliente. Números
   grandes en la letra de los precios, que es la que golpea, y el nombre en
   una etiqueta blanca. Cada columna entera es el enlace a su ficha. */
/* Simétrica sobre un eje: título, kits y pista centrados. */
.hero__contenido--kits {
  max-width: 54rem;
  width: 100%;
  justify-self: center;
  justify-items: center;
  text-align: center;
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
}
.hero__contenido--kits[hidden] { display: none; }
.kits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 2vw, 1.5rem);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kit {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.5rem;
  color: var(--blanco);
  text-align: center;
  text-decoration: none;
}
.kit__imagen { display: block; width: 100%; max-width: 13rem; aspect-ratio: 1; }
.kit__foto { width: 100%; height: 100%; object-fit: contain; }
.kit__numero {
  margin-top: -0.35em;
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  transition: color var(--micro) var(--salida), scale var(--micro) var(--salida);
}
.kit:hover .kit__numero,
.kit:focus-visible .kit__numero { color: var(--acento-texto); scale: 1.04; }
.kit__nombre {
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--negro);
  font-size: clamp(0.72rem, 2.7vw, 0.95rem);
  font-weight: 800;
  line-height: 1.15;
}
.kit__precio {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  font-weight: 800;
  color: var(--acento-texto);
}
.kit__precio s { color: var(--gris); font-size: 0.78em; font-weight: 600; }
.kits__pista { margin: 0; color: var(--gris); font-size: 0.875rem; }

/* Combo: las fotos de lo que trae un kit, en abanico, la del medio adelante.
   Cada foto se ubica por su centro (--x, --y) dentro de la caja, con un
   ancho que la deja siempre adentro: en la tarjeta y en la ficha la caja
   recorta lo que se sale. Estático: se pinta una vez. */
.combo { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.combo img {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--ancho, 70%);
  height: var(--ancho, 70%);
  object-fit: contain;
  translate: -50% -50%;
  filter: drop-shadow(0 10px 16px oklch(0 0 0 / 0.6));
}
.combo[data-cantidad='2'] img { --ancho: 56%; }
.combo[data-cantidad='2'] img:nth-child(1) { --x: 32%; --y: 52%; rotate: -8deg; }
.combo[data-cantidad='2'] img:nth-child(2) { --x: 68%; --y: 48%; rotate: 8deg; }
.combo[data-cantidad='3'] img { --ancho: 50%; }
.combo[data-cantidad='3'] img:nth-child(1) { --x: 27%; --y: 55%; rotate: -11deg; scale: 0.9; }
.combo[data-cantidad='3'] img:nth-child(2) { --x: 50%; --y: 46%; z-index: 2; }
.combo[data-cantidad='3'] img:nth-child(3) { --x: 73%; --y: 55%; rotate: 11deg; scale: 0.9; z-index: 1; }
.combo[data-cantidad='4'] img { --ancho: 46%; }
.combo[data-cantidad='4'] img:nth-child(1) { --x: 28%; --y: 36%; rotate: -10deg; scale: 0.88; }
.combo[data-cantidad='4'] img:nth-child(2) { --x: 72%; --y: 36%; rotate: 10deg; scale: 0.88; }
.combo[data-cantidad='4'] img:nth-child(3) { --x: 38%; --y: 64%; rotate: -5deg; z-index: 2; }
.combo[data-cantidad='4'] img:nth-child(4) { --x: 62%; --y: 64%; rotate: 5deg; z-index: 3; }

.hero__remate {
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  margin-block: 0.1em 0.05em;
}

.hero__bajada {
  color: var(--blanco);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  text-shadow: 0 1px 14px oklch(0 0 0 / 0.8);
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Botón redondo solo con icono, para Instagram: la tercera salida del hero
   no compite con las dos acciones de compra, que siguen siendo las grandes. */
.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--borde-vivo);
  border-radius: 999px;
  background: oklch(1 0 0 / 0.04);
  color: var(--blanco);
  transition: border-color var(--micro) var(--salida), background var(--micro) var(--salida), scale var(--micro) var(--salida);
}
.boton-icono:hover { border-color: var(--acento-texto); background: oklch(1 0 0 / 0.08); scale: 1.05; }
.boton-icono { position: relative; }
/* Sello de cuenta oficial sobre el botón de Instagram. */
.sello-oficial {
  position: absolute;
  top: -5px;
  right: -6px;
  color: var(--acento);
  filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.55));
}

.hero__pista {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  color: var(--gris);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 400ms var(--salida);
}
.hero__pista svg { animation: respirar 2.6s ease-in-out infinite; }
@keyframes respirar {
  0%, 100% { opacity: 0.5; translate: 0 0; }
  50% { opacity: 1; translate: 0 4px; }
}

/* Una vez que el visitante empezó a bajar, la pista ya cumplió. */
.hero[data-avance='andando'] .hero__pista {
  opacity: 0;
  pointer-events: none;
}

/* Sin recorrido por scroll no hay nada que insinuar. */
.hero:not([data-modo='scroll']):not([data-modo='cuadros']) .hero__pista { display: none; }

/* ---------- Garantías ---------- */

.garantias {
  border-block: 1px solid var(--borde);
  padding-block: clamp(0.9rem, 2.5vw, 1.25rem);
}

.garantias__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem clamp(1.25rem, 4vw, 2.75rem);
  /* margin-block y no margin: la clase .contenedor centra con
     margin-inline: auto, y un margin: 0 aquí lo anulaba. El resultado era
     la lista pegada al borde izquierdo y despegada del derecho. */
  margin-block: 0;
  padding: 0;
  list-style: none;
  color: var(--blanco);
  font-size: 0.9375rem;
  font-weight: 600;
}

.garantias__lista li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.garantia-icono {
  flex: 0 0 auto;
  color: var(--acento-texto);
}

/* Sin separadores entre condiciones: cada una ya empieza con su icono, y un
   punto de color entre ellas era adorno, que es justo lo que el acento no hace. */

/* Por debajo de 720 px no caben en una fila sin encogerse hasta no leerse.
   Dos columnas, alineadas a la izquierda, sin separadores. */
@media (max-width: 720px) {
  .garantias__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    font-size: 0.875rem;
  }
  .garantias__lista li {
    white-space: normal;
    align-items: flex-start;
    line-height: 1.3;
  }
  .garantia-icono { width: 18px; height: 18px; margin-top: 0.05em; }
}

@media (max-width: 380px) {
  .garantias__lista { grid-template-columns: 1fr; }
}

/* ---------- Marcas ---------- */

/* Cinta de tipografía (js/cinta.js). Reemplaza a la franja de marcas en
   letra chica que desfilaba sin parar. */
.cinta {
  position: relative;
  display: grid;
  gap: clamp(0.15rem, 0.8vw, 0.6rem);
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
/* Los bordes se funden con un degradado fijo encima, no con una máscara: una
   máscara sobre algo que se mueve se recompone en cada fotograma, que es lo
   que trababa la cuadrícula de fondo en Android. */
.cinta::before,
.cinta::after {
  content: '';
  position: absolute;
  inset-block: 0;
  z-index: 1;
  width: clamp(2.5rem, 10vw, 8rem);
  pointer-events: none;
}
.cinta::before { left: 0; background: linear-gradient(90deg, var(--negro), transparent); }
.cinta::after { right: 0; background: linear-gradient(270deg, var(--negro), transparent); }

.cinta__fila {
  display: flex;
  width: max-content;
  will-change: transform;
}
.cinta__grupo {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0;
  padding: 0 0.45em 0 0;
  list-style: none;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.75rem, 10vw, 6rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cinta__fila--marcas .cinta__grupo { color: var(--blanco); font-weight: 600; }
/* El oficio va en contorno: la misma letra, un tono más atrás. */
.cinta__fila--oficio .cinta__grupo {
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.56 0 0);
  font-weight: 500;
}

/* ---------- Catálogo ---------- */

/* Fondo claro: pedido del cliente, que sentía el catálogo muy oscuro porque
   las fotos también tienen fondo negro. La sección va en blanco neutro (sin
   tinte cálido) y las tarjetas se quedan negras, como vitrinas sobre una
   mesa clara. Se activa con data-fondo-catalogo="claro" en <html>. */
[data-fondo-catalogo='claro'] .catalogo {
  background: oklch(0.975 0 0);
  color: var(--negro);
}
[data-fondo-catalogo='claro'] .catalogo h2 { color: var(--negro); }
/* Las tarjetas siguen siendo negras: su texto no puede heredar el negro de
   la sección, o el nombre y la cantidad quedan negro sobre negro. */
[data-fondo-catalogo='claro'] .tarjeta { color: var(--blanco); }
[data-fondo-catalogo='claro'] .catalogo__cabeza p,
[data-fondo-catalogo='claro'] .catalogo__vacio { color: oklch(0.4 0 0); }
[data-fondo-catalogo='claro'] .filtro {
  background: oklch(1 0 0);
  border-color: oklch(0.84 0 0);
  color: oklch(0.32 0 0);
}
[data-fondo-catalogo='claro'] .filtro:hover { color: var(--negro); border-color: oklch(0.6 0 0); }
[data-fondo-catalogo='claro'] .filtro[aria-pressed='true'] {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}


.catalogo { padding-block: var(--hueco-seccion); }

.catalogo__cabeza {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.catalogo__cabeza p { color: var(--gris); }

.catalogo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

/* Interruptor del fondo del catálogo (js/tema.js). Sin script no hace nada,
   así que no se muestra. */
.tema {
  display: none;
  padding: 3px;
  border: 1px solid var(--borde-vivo);
  border-radius: 999px;
}
.js-activo .tema { display: inline-flex; }
.tema button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gris);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--micro) var(--salida), color var(--micro) var(--salida);
}
.tema button[aria-pressed='true'] { background: var(--blanco); color: var(--negro); }
[data-fondo-catalogo='claro'] .tema { border-color: oklch(0.84 0 0); background: oklch(1 0 0); }
[data-fondo-catalogo='claro'] .tema button { color: oklch(0.38 0 0); }
[data-fondo-catalogo='claro'] .tema button[aria-pressed='true'] { background: var(--negro); color: var(--blanco); }

.catalogo__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.filtro {
  min-height: 42px;
  padding: 0 1.05rem;
  background: oklch(1 0 0 / 0.03);
  border: 1px solid var(--borde-vivo);
  border-radius: 999px;
  color: var(--gris);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--micro) var(--salida), border-color var(--micro) var(--salida), background var(--micro) var(--salida);
}
.filtro:hover { color: var(--blanco); }
.filtro[aria-pressed='true'] {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
  font-weight: 600;
}

.catalogo__grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.6vw, 1.15rem);
}
@media (min-width: 640px) {
  .catalogo__grilla {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

.catalogo__vacio {
  padding-block: 3rem;
  color: var(--gris);
  text-align: center;
}

/* Tarjeta de producto */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 220ms var(--salida), border-color var(--micro) var(--salida);
}
.tarjeta:hover { border-color: var(--acento); }

/* display:flex de la regla de arriba pisa el [hidden]{display:none} del
   navegador, porque una regla del autor siempre gana a la del navegador.
   Sin esta línea, filtrar marca las tarjetas pero no las esconde. */
.tarjeta[hidden] { display: none; }

.tarjeta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              oklch(0.55 0.2 262 / 0.16), transparent 68%);
  opacity: 0;
  transition: opacity var(--micro) var(--salida);
}
.tarjeta:hover::after { opacity: 1; }

/* La foto se posiciona en absoluto dentro del marco. Con la imagen en flujo,
   un producto alto como la tinta estira la tarjeta y rompe la rejilla. */
.tarjeta__marco {
  position: relative;
  aspect-ratio: 1;
  background: var(--negro-foto);
  overflow: hidden;
}
/* Las fotos ya vienen cuadradas y con su margen desde
   herramientas/normalizar-productos.sh, así que aquí no se añade otro. */
.tarjeta__marco > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Etiquetas de la foto, apiladas arriba a la izquierda para que «Agotado»,
   «Nuevo» y el descuento no se encimen. */
.tarjeta__insignias {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.tarjeta__etiqueta {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--negro);
  border: 1px solid var(--acento);
  color: var(--acento-texto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(0.7rem, 2vw, 1rem);
  flex: 1;
}

/* Los nombres y los precios van en la sans pesada, no en la didona. La
   didona es la voz de la marca; un precio tiene que golpear, y sus astas
   finas lo dejan sin fuerza. */
.tarjeta__nombre {
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.2;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 0;
}

.tarjeta__presentacion {
  width: 100%;
  min-height: 40px;
  padding: 0 2rem 0 0.7rem;
  background: var(--carbon-alto)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 0.5rem center / 16px;
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio-chico);
  font-size: 0.9375rem;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.tarjeta__unica { color: var(--gris); font-size: 0.9375rem; font-weight: 500; }

.tarjeta__precios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin-top: auto;
}
.tarjeta__precio {
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.2vw, 1.55rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--acento-texto);
  margin: 0;
}

/* Precio anterior: tachado y un tono atrás, para que el que manda siga
   siendo el precio actual. */
.tarjeta__antes,
.ficha__antes,
.destacado__antes {
  color: var(--gris);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
}
.tarjeta__antes { font-size: 0.875rem; }
.tarjeta__antes[hidden], .ficha__antes[hidden], .insignia[hidden] { display: none; }

/* Insignias: «Nuevo» en blanco sólido y el descuento en el acento. Quietas:
   nada de cintas que parpadean ni contadores de urgencia. */
.insignia {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
.insignia--nuevo { background: var(--blanco); color: var(--negro); }
.insignia--oferta { background: var(--acento); color: var(--sobre-acento); }

.tarjeta__pie { display: flex; gap: 0.5rem; }


.tarjeta--agotado .tarjeta__marco > img,
.tarjeta--agotado .tarjeta__marco .combo { opacity: 0.3; }
.tarjeta--agotado .tarjeta__precio { color: var(--gris); }

/* Control de cantidad */

.cantidad {
  display: flex;
  align-items: center;
  border: 1px solid var(--borde-vivo);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cantidad button {
  width: 34px; height: 40px;
  background: transparent;
  border: 0;
  color: var(--gris);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--micro) var(--salida);
}
.cantidad button:hover:not([disabled]) { color: var(--blanco); }
.cantidad button[disabled] { opacity: 0.3; cursor: not-allowed; }
.cantidad output {
  min-width: 22px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.tarjeta__agregar {
  flex: 1;
  min-height: 40px;
  padding: 0 0.75rem;
  background: var(--blanco);
  border: 0;
  border-radius: 999px;
  color: var(--negro);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--micro) var(--salida);
}
.tarjeta__agregar:hover:not([disabled]) { background: var(--acento); color: var(--sobre-acento); }
.tarjeta__agregar[disabled] { background: var(--borde); color: var(--gris); cursor: not-allowed; }

/* Con dos columnas la tarjeta baja de 140 px de contenido. El control de
   cantidad mide 90 px fijos, así que al botón le quedaban 30 y se salía
   del marco. Apilados, los dos quedan a ancho completo y con buen tamaño
   para el pulgar. */
@media (max-width: 560px) {
  .tarjeta__pie { flex-direction: column; align-items: stretch; }
  .tarjeta__pie .cantidad { justify-content: space-between; width: 100%; }
  .tarjeta__pie .cantidad button { flex: 0 0 44px; height: 44px; }
  .tarjeta__agregar { min-height: 44px; }
}

/* ---------- Producto destacado ---------- */

.destacado { padding-block: var(--hueco-seccion); }
.destacado:empty { display: none; }

.destacado__fila {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .destacado__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.destacado__marco {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radio);
  background:
    radial-gradient(circle at 50% 55%, var(--acento-halo), transparent 62%),
    var(--carbon);
  overflow: hidden;
}
.destacado__marco img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px oklch(0 0 0 / 0.8));
}

.destacado__texto { display: grid; gap: 1.1rem; justify-items: start; }
.destacado__nota { color: var(--gris); }

.destacado__atributos {
  display: grid;
  gap: 0;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
  border-top: 1px solid var(--borde);
}
.destacado__atributos li {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--borde);
}
.destacado__atributos strong {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.destacado__atributos span { color: var(--gris); font-size: 0.9375rem; font-weight: 450; }

.destacado__precio {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--fuente-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  line-height: 1;
  color: var(--acento-texto);
}
.destacado__precio small {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gris);
}

/* ---------- Pasos ---------- */

.pasos { padding-block: var(--hueco-seccion); }
.pasos h2 { margin-bottom: 2.25rem; }

.pasos__lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borde);
}
@media (min-width: 820px) {
  .pasos__lista {
    grid-template-columns: repeat(3, 1fr);
    border-top: 0;
  }
}

.paso {
  display: grid;
  gap: 0.4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--borde);
}
@media (min-width: 820px) {
  .paso {
    padding: 1.75rem 1.75rem 1.75rem 0;
    border-bottom: 0;
    border-top: 2px solid var(--borde);
    transition: border-color 420ms var(--salida);
  }
  .paso:hover { border-top-color: var(--acento); }
}

.paso__numero {
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--acento-texto);
  letter-spacing: 0.02em;
}
.paso p { color: var(--gris); }

/* ---------- Escena: el pedido se arma solo (js/escena-pedido.js) ----------
   data-chat: el script montó el chat (también con movimiento reducido, donde
   se ve completo y quieto). data-escena: además la sección se fija y el
   scroll la recorre, como el hero. Sin script no hay chat: solo los pasos. */

.pasos__accion { margin-top: 2rem; }

.pasos[data-chat='si'] .pasos__marco {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .pasos[data-chat='si'] .pasos__marco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: center;
  }
  .pasos[data-chat='si'] .pasos__lista { grid-template-columns: 1fr; border-top: 1px solid var(--borde); }
  .pasos[data-chat='si'] .paso {
    padding: 1.1rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--borde);
  }
}

/* Pasos encendidos, hechos y por venir. Se atenúan los hijos y no el <li>,
   porque el <li> ya usa su opacidad para la entrada escalonada. */
.paso[data-estado] > * { transition: opacity 360ms var(--salida); }
.paso[data-estado='pendiente'] > * { opacity: 0.38; }
.paso[data-estado='hecho'] > * { opacity: 0.62; }

.pasos[data-escena='si'] {
  height: 240vh;
  padding-block: 0;
}
.pasos[data-escena='si'] .pasos__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 4.5rem 1rem;
  overflow: hidden;
}

/* En celular la escena es más corta y los pasos se compactan: número y
   título en una línea, y solo el paso encendido muestra su explicación. */
@media (max-width: 899px) {
  .pasos[data-escena='si'] { height: 230svh; }
  .pasos[data-escena='si'] h2 { margin-bottom: 0.75rem; }
  .pasos[data-escena='si'] .pasos__marco { gap: 1rem; }
  .pasos[data-escena='si'] .paso {
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0;
  }
  .pasos[data-escena='si'] .paso p { grid-column: 2; display: none; }
  .pasos[data-escena='si'] .paso[data-estado='activo'] p { display: block; }
  .pasos[data-escena='si'] .pasos__accion { display: none; }
}

/* El chat. No imita la interfaz de WhatsApp: es una burbuja saliente con el
   verde que la página ya usa. Mientras se escribe es un borrador; al
   enviarse se vuelve sólida y aparecen los dos chulitos. */
.chat {
  width: min(100%, 24rem);
  justify-self: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--carbon);
  overflow: hidden;
}
.chat[hidden] { display: none; }

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--borde);
  background: var(--carbon-alto);
}
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; }
.chat__nombre { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.chat__sub { margin: 0; font-size: 0.8125rem; color: var(--gris); }

.chat__hilo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 15rem;
  padding: 0.9rem;
}

.chat__burbuja {
  max-width: 94%;
  padding: 0.65rem 0.8rem 0.4rem;
  border: 1px dashed oklch(0.761 0.2015 149.74 / 0.4);
  border-radius: var(--radio-chico) var(--radio-chico) 3px var(--radio-chico);
  background: oklch(0.23 0.035 155);
  color: var(--blanco);
  font-size: 0.8125rem;
  line-height: 1.45;
  transition: background 420ms var(--salida), border-color 420ms var(--salida);
}
.chat[data-enviado='si'] .chat__burbuja {
  border-style: solid;
  border-color: transparent;
  background: oklch(0.33 0.075 155);
}

.chat__linea { margin: 0; overflow-wrap: anywhere; }
.chat__linea--vacia { height: 0.55em; }
.chat__linea[data-visible='no'] { display: none; }
.chat__linea[data-visible='si'] { animation: linea-entra 320ms var(--salida) both; }
@keyframes linea-entra { from { opacity: 0; translate: 0 6px; } }

.chat__estado {
  display: flex;
  justify-content: flex-end;
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: oklch(0.82 0 0);
}
.chat__enviado { display: none; align-items: center; gap: 0.3rem; color: var(--whatsapp); }
.chat[data-enviado='si'] .chat__borrador { display: none; }
.chat[data-enviado='si'] .chat__enviado { display: inline-flex; }

@media (max-width: 899px) {
  .chat { width: 100%; }
  .chat__hilo { min-height: 0; padding: 0.7rem; }
  .chat__burbuja { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__linea[data-visible='si'] { animation: none; }
}

/* ---------- Compra sin riesgo ---------- */

.sin-riesgo {
  padding-block: var(--hueco-seccion);
  border-top: 1px solid var(--borde);
}
.sin-riesgo__fila {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .sin-riesgo__fila { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.sin-riesgo__puntos { display: grid; gap: 1.5rem; }
.punto { display: grid; gap: 0.3rem; }
.punto p { color: var(--gris); max-width: 52ch; }

/* ---------- Cierre ---------- */

.cierre { padding-block: 0 var(--hueco-seccion); }

.cierre__caja {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, oklch(0.55 0.2 262 / 0.14), transparent 70%),
    var(--carbon);
}
.cierre__caja p { color: var(--gris); }

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--borde);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.pie__fila {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 760px) {
  .pie__fila { grid-template-columns: auto 1fr auto; }
  .pie__enlaces { justify-self: center; }
  .pie__nota { text-align: right; }
}

.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1.25rem; font-weight: 600; }
.pie__enlaces a {
  text-decoration: none;
  color: var(--gris);
  transition: color var(--micro) var(--salida);
}
.pie__enlaces a:hover { color: var(--blanco); }

.pie__nota { color: var(--gris); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }

/* ---------- Panel del pedido ---------- */

.carrito-fondo {
  position: fixed;
  inset: 0;
  z-index: var(--z-fondo-panel);
  background: oklch(0 0 0 / 0.65);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--panel) var(--salida);
}
.carrito-fondo[data-abierto='si'] { opacity: 1; }

.carrito {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  height: 100dvh;
  background: var(--carbon);
  border-left: 1px solid var(--borde);
  translate: 100% 0;
  transition: translate var(--panel) var(--salida);
}
.carrito[data-abierto='si'] { translate: 0 0; }

.carrito__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--canaleta);
  border-bottom: 1px solid var(--borde);
  flex: 0 0 auto;
}
.carrito__cabeza h2 { font-size: 1.4rem; }

.carrito__cerrar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: oklch(1 0 0 / 0.04);
  border: 2px solid var(--borde-vivo);
  border-radius: 50%;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--micro) var(--salida), border-color var(--micro) var(--salida);
}
.carrito__cerrar:hover { color: var(--blanco); border-color: var(--acento); }

.carrito__cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--canaleta);
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.carrito__items { display: grid; gap: 0.75rem; }

.linea {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--borde);
}
.linea__marco {
  width: 56px; height: 56px;
  background: var(--negro-foto);
  border-radius: var(--radio-chico);
  display: grid;
  place-items: center;
  padding: 4px;
}
.linea__marco img { width: 100%; height: 100%; object-fit: contain; }
.linea__datos { display: grid; gap: 0.15rem; min-width: 0; }
.linea__nombre {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
}
.linea__meta { color: var(--gris); font-size: 0.875rem; font-weight: 500; }
.linea__precio {
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.linea__quitar {
  background: transparent;
  border: 0;
  color: var(--gris);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  justify-self: start;
}
.linea__quitar:hover { color: var(--acento-texto); }

/* Por debajo de 400 px la columna del medio se queda en 138 px y el nombre
   del producto parte en tres líneas. Miniatura más pequeña y huecos más
   cortos le devuelven el aire. */
@media (max-width: 400px) {
  .linea { grid-template-columns: 46px 1fr auto; gap: 0.6rem; }
  .linea__marco { width: 46px; height: 46px; }
  .linea__meta { font-size: 0.8125rem; }
}

.carrito__vacio {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding-block: 3rem;
  color: var(--gris);
}
.carrito__vacio svg { color: var(--borde); }

.carrito__totales {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.carrito__totales div { display: flex; justify-content: space-between; gap: 1rem; }
.carrito__totales .menor { color: var(--gris); font-size: 1rem; font-weight: 500; }
.carrito__totales .total {
  padding-top: 0.6rem;
  border-top: 1px solid var(--borde);
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: 1.35rem;
  align-items: baseline;
}
.carrito__totales .total span:last-child { color: var(--acento-texto); }
.carrito__falta { color: var(--gris); font-size: 0.9375rem; font-weight: 500; }

/* ---------- Formulario del pedido ---------- */

.pedido { display: grid; gap: 0.85rem; }
.pedido[hidden] { display: none; }

.pedido__titulo {
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.campo { display: grid; gap: 0.3rem; }
.campo label { font-size: 0.875rem; color: var(--gris); font-weight: 600; }
.campo input {
  min-height: 46px;
  padding: 0 0.85rem;
  background: var(--negro);
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio-chico);
  transition: border-color var(--micro) var(--salida);
}
.campo input::placeholder { color: oklch(0.52 0 0); }
.campo input:focus { border-color: var(--acento); }
.campo[data-error='si'] input { border-color: var(--acento-texto); }
.campo__error { color: var(--acento-texto); font-size: 0.8125rem; }
.campo__error:empty { display: none; }

.pedido__aviso {
  margin: 0;
  padding: 0 var(--canaleta) 1rem;
  color: var(--gris);
  font-size: 0.875rem;
  flex: 0 0 auto;
}
.pedido__aviso:empty { display: none; }
.pedido__aviso[data-tono='bien'] { color: var(--whatsapp); }
.pedido__aviso[data-tono='aviso'] { color: var(--acento-texto); }

/* ---------- Entrada por scroll ----------
   Solo se oculta cuando el script confirmó que corre. Sin JavaScript,
   o en un rastreador, la página se ve completa. */

.js-activo [data-animar] {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity var(--entrada) var(--salida),
    translate var(--entrada) var(--salida);
}
.js-activo [data-animar].visible {
  opacity: 1;
  translate: 0 0;
}

/* Entrada escalonada de los hijos de una lista. Usa translate y no
   transform: las tarjetas ya usan transform para inclinarse. */
.js-activo [data-entra] {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity 620ms var(--salida) var(--retraso, 0ms),
    translate 620ms var(--salida) var(--retraso, 0ms);
}
.js-activo [data-entra].visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-activo [data-animar],
  .js-activo [data-entra] { opacity: 1; translate: none; }
  .hero h1 .palabra__interior { translate: none; opacity: 1; }
  .avance { display: none; }
  .rejilla-fondo::before, .hero__pista { animation: none; }
  .boton:hover { translate: none; scale: 1; }
}

/* ---------- Ficha de producto ----------
   Entra con desvanecido y una escala mínima, no deslizando: el panel del
   pedido ya usa el deslizamiento y dos capas que entran igual se confunden. */

.ficha {
  position: fixed;
  inset: 0;
  z-index: var(--z-ficha);
  display: grid;
  place-items: start center;
  padding: clamp(0.75rem, 3vw, 2.5rem) var(--canaleta);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: oklch(0 0 0 / 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--panel) var(--salida), visibility var(--panel);
}
.ficha[data-abierto='si'] { opacity: 1; visibility: visible; }

.ficha__caja {
  position: relative;
  width: min(100%, 1060px);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--carbon);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  scale: 0.985;
  transition: scale var(--panel) var(--salida);
}
.ficha[data-abierto='si'] .ficha__caja { scale: 1; }

.ficha__cerrar {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--negro);
  border: 2px solid var(--borde-vivo);
  border-radius: 50%;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--micro) var(--salida), border-color var(--micro) var(--salida);
}
.ficha__cerrar:hover { color: var(--blanco); border-color: var(--acento); }

.ficha__fila {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .ficha__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.ficha__marco {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radio-chico);
  background: var(--negro-foto);
  overflow: hidden;
}
/* Sin halo: tres productos siguen con el recorte del catálogo, que tiene
   fondo negro opaco, y un resplandor detrás les dibujaría un rectángulo.
   Un fondo uniforme funciona para los veinte. El drama va en el hero. */
.ficha__halo { display: none; }
.ficha__marco > img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha__texto { display: grid; gap: 0.9rem; }
.ficha__categoria {
  color: var(--gris);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ficha h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.ficha__descripcion { color: var(--gris); }

.ficha__atributos {
  display: grid;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borde);
}
.ficha__atributos li {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--borde);
}
.ficha__atributos strong { font-size: 0.9375rem; font-weight: 600; }
.ficha__atributos span { color: var(--gris); font-size: 0.9375rem; }

.ficha__compra { display: grid; gap: 0.75rem; margin-top: 0.5rem; }

.ficha__campo { display: grid; gap: 0.3rem; max-width: 320px; }
.ficha__campo span { font-size: 0.875rem; color: var(--gris); font-weight: 600; }
.ficha__presentacion {
  min-height: 46px;
  padding: 0 2rem 0 0.8rem;
  background: var(--carbon-alto)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 0.6rem center / 16px;
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio-chico);
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}
.ficha__unica { color: var(--gris); font-size: 1rem; font-weight: 500; }

.ficha__precios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}
.ficha__antes { font-size: 1.05rem; }
.ficha__categoria .insignia { margin-left: 0.4rem; }
.destacado__antes { font-size: 1rem; }

.ficha__precio {
  margin: 0;
  font-family: var(--fuente-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  line-height: 1;
  color: var(--acento-texto);
}

.ficha__stock { font-size: 0.9375rem; font-weight: 500; color: var(--gris); }
.ficha__stock[data-tono='bien'] { color: var(--whatsapp); }
.ficha__stock[data-tono='aviso'] { color: oklch(0.78 0.16 75); }
.ficha__stock[data-tono='agotado'] { color: var(--acento-texto); }

.ficha__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ficha__acciones .cantidad { min-height: 48px; }
.ficha__acciones .cantidad button { height: 48px; width: 40px; }
.ficha__agregar { flex: 1 1 200px; }
.ficha__whatsapp { justify-self: start; }

/* Confirmación de que el producto entró al pedido.
   Verde y no azul: el azul de la marca es para lo que llama la atención, y
   aquí lo que se dice es que todo salió bien. El fondo tenue la separa de la
   línea de stock, que está justo encima y dice otra cosa. */

.ficha__enpedido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid oklch(0.761 0.2015 149.74 / 0.42);
  border-radius: var(--radio-chico);
  background: oklch(0.761 0.2015 149.74 / 0.1);
  animation: entra-confirmacion 320ms var(--salida);
}
.ficha__enpedido[hidden] { display: none; }

.ficha__enpedido-texto {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--whatsapp);
}

.ficha__verpedido {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 0.95rem;
  border: 1px solid var(--whatsapp);
  border-radius: var(--radio-chico);
  background: none;
  color: var(--whatsapp);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--micro) var(--salida);
}
.ficha__verpedido:hover { background: oklch(0.761 0.2015 149.74 / 0.16); }

/* El acuse en el propio botón: la respuesta bajo el dedo, mientras la vista
   todavía no ha bajado a leer la línea. */
.ficha__agregar[data-acuse='si'] {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--negro);
}

@keyframes entra-confirmacion {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha__enpedido { animation: none; }
}

/* Relacionados */

.ficha__relacionados {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--borde);
}
.ficha__relacionados h3 {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
/* auto-fill y no auto-fit: con solo tres relacionados, auto-fit los estira
   hasta ocupar todo el ancho y compiten con el producto que estás viendo. */
.ficha__tira {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.mini {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  text-decoration: none;
  transition: border-color var(--micro) var(--salida);
}
.mini:hover { border-color: var(--acento); }
.mini__marco {
  display: block;
  aspect-ratio: 1;
  background: var(--negro-foto);
  border-radius: 6px;
  overflow: hidden;
}
.mini__marco img { width: 100%; height: 100%; object-fit: contain; }
.mini__nombre {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.mini__precio { font-size: 0.875rem; color: var(--acento-texto); font-weight: 700; }

/* La foto de la tarjeta es un enlace: no debe traer subrayado ni color. */
.tarjeta__foto { display: block; text-decoration: none; color: inherit; }
.tarjeta__enlace { color: inherit; text-decoration: none; }
.tarjeta__enlace:hover { color: var(--acento-texto); }

@media (prefers-reduced-motion: reduce) {
  .ficha, .ficha__caja { transition: none; }
  .ficha__caja { scale: 1; }
}

/* ---------- Barra de avance de lectura ---------- */

.avance {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--z-fijo) + 1);
  pointer-events: none;
}
.avance::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--avance, 0%);
  background: var(--acento);
  box-shadow: 0 0 14px oklch(0.55 0.2 262 / 0.7);
}

/* ---------- Cabecera que se encoge al bajar ---------- */

.cabecera__fila { transition: min-height 260ms var(--salida); }
.marca img { transition: width 260ms var(--salida), height 260ms var(--salida); }

.cabecera--compacta .cabecera__fila { min-height: 54px; }
.cabecera--compacta .marca img { width: 32px; height: 32px; }
.cabecera--compacta { border-bottom-color: var(--borde-vivo); }

/* ---------- Titular del hero: las palabras suben al cargar ---------- */

.hero h1 .palabra {
  display: inline-block;
  overflow: hidden;
  /* Anton tiene descendentes; sin este respiro el recorte les corta la cola. */
  padding-block: 0.02em 0.1em;
  margin-block: -0.02em -0.1em;
  vertical-align: bottom;
}
.hero h1 .palabra__interior {
  display: inline-block;
  translate: 0 110%;
  opacity: 0;
  transition:
    translate 900ms var(--salida) var(--retraso, 0ms),
    opacity 600ms var(--salida) var(--retraso, 0ms);
}
.hero h1.revelado .palabra__interior { translate: 0 0; opacity: 1; }

/* ---------- La escena del hero se queda atrás al bajar ---------- */

.hero__escena {
  translate: 0 var(--desplazo, 0px);
  opacity: var(--desvanece, 1);
}

/* ---------- Detalles de los filtros ---------- */

.filtro:hover { color: var(--blanco); border-color: var(--borde-vivo); background: oklch(1 0 0 / 0.07); }
.filtro[aria-pressed='true'] {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
  font-weight: 700;
}

/* La foto respira cuando la tarjeta tiene el cursor encima. El movimiento
   es del marco, no de la imagen: una foto que se agranda sola no aporta
   ninguna información. */
.tarjeta__marco::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--acento);
  scale: 0 1;
  transform-origin: left;
  transition: scale 340ms var(--salida);
}
.tarjeta:hover .tarjeta__marco::after { scale: 1 1; }

/* ---------- Testimonios en video (js/testimonios-ui.js) ----------
   Fila de videos verticales. En celular se desliza de lado con imán en cada
   video; en computador es una rejilla. El reproductor de YouTube solo se
   carga al tocar. */

.testimonios { padding-block: var(--hueco-seccion); border-top: 1px solid var(--borde); }
.testimonios[hidden] { display: none; }
.testimonios__bajada { margin: 0.85rem auto 2rem; color: var(--gris); }

.testimonios__fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(68vw, 16rem);
  /* Con uno o dos videos quedan centrados; si no caben, arrancan desde el
     borde para que se puedan deslizar todos («safe»). */
  justify-content: safe center;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.testimonios__fila::-webkit-scrollbar { display: none; }
/* En computador, centrados y con cuatro por fila como máximo: con tres, o
   con cinco, la fila queda balanceada en vez de dejar un hueco al final. */
@media (min-width: 900px) {
  .testimonios__fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
  .testimonio { width: calc((100% - 3 * 0.85rem) / 4); max-width: 17rem; }
}
.testimonios .contenedor > h2,
.testimonios__bajada { text-align: center; }

.testimonio { margin: 0; scroll-snap-align: start; display: grid; gap: 0.7rem; }
.testimonio__marco {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--carbon);
  overflow: hidden;
}
.testimonio__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.testimonio__video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.testimonio__video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonio__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.45);
  transition: scale var(--micro) var(--salida);
}
.testimonio__video:hover .testimonio__play { scale: 1.08; }
.testimonio__video:disabled { cursor: default; }

.testimonio figcaption { display: grid; gap: 0.15rem; }
.testimonio figcaption strong { font-size: 0.9375rem; }
.testimonio figcaption span { color: var(--gris); font-size: 0.875rem; }

/* ---------- Esquina «NUEVO» y etiqueta de oferta ----------
   Pedidas por el cliente casi idénticas a sus referencias. Los colores de la
   etiqueta son los de la referencia (70 % o más rojo, 60 azul, 50 naranja,
   menos verde); sobre naranja y verde la letra va casi negra, porque el
   blanco da 2.3:1 y 2.1:1 y no se alcanza a leer. Sobre rojo y azul, blanca
   (5:1). El texto de apoyo dice «OFERTA», no «oferta limitada»: no hay
   límite de tiempo ni de unidades que lo respalde. */

.cinta-nuevo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 54%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.35));
}
.ficha__marco .cinta-nuevo { width: 42%; border-top-left-radius: var(--radio-chico); }

[data-oferta='rojo'] { --oferta: #E3262B; --sobre-oferta: #FFFFFF; }
[data-oferta='azul'] { --oferta: #2867E4; --sobre-oferta: #FFFFFF; }
[data-oferta='naranja'] { --oferta: #F8910E; --sobre-oferta: #1A1A1A; }
[data-oferta='verde'] { --oferta: #36CB4B; --sobre-oferta: #1A1A1A; }

/* La caja del precio. Sin oferta es solo el precio, como siempre. */
.etiqueta-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
}

/* Con oferta, el contenedor de afuera reserva arriba el espacio del
   colgante: así el colgante nunca cae sobre el texto de encima. */
.tarjeta__precios:has(> [data-oferta]),
.ficha__precios:has(> [data-oferta]),
.kit__precio:has(> [data-oferta]) { padding-top: 1.4rem; }

/* La etiqueta: cuerpo oscuro con el precio anterior tachado arriba y el
   nuevo grande abajo. El costado de color va anclado arriba, abajo y a la
   derecha, así mide siempre lo mismo que la caja; el cuerpo le deja su ancho
   libre, así el precio nunca se mete debajo. */
.etiqueta-precio[data-oferta] {
  --lado: 1.45rem;
  position: relative;
  display: grid;
  justify-items: start;
  row-gap: 0.2rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem calc(var(--lado) + 0.65rem) 0.5rem 0.7rem;
  border-radius: 8px;
  background: oklch(0.24 0 0);
}
.etiqueta-precio[data-oferta] > s {
  order: -1;
  color: oklch(0.78 0 0);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  text-decoration-color: #E3262B;
  text-decoration-thickness: 2px;
}
.etiqueta-precio[data-oferta] > .tarjeta__precio,
.etiqueta-precio[data-oferta] > .ficha__precio,
.etiqueta-precio[data-oferta] > .kit__valor {
  margin: 0;
  color: var(--blanco);
  line-height: 1;
}
.etiqueta-precio[data-oferta]::after {
  content: 'OFERTA';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--lado);
  display: grid;
  place-items: center;
  border-radius: 0 8px 8px 0;
  background: var(--oferta);
  color: var(--sobre-oferta);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

/* El colgante: el porcentaje en una etiqueta inclinada que cuelga de la
   esquina de arriba a la derecha, sostenida desde su ojal. Queda casi toda
   por encima de la caja, sobre el espacio reservado. */
.etiqueta-precio[data-oferta] > .insignia--oferta {
  position: absolute;
  top: 0;
  right: 0.35rem;
  z-index: 1;
  padding: 0.24rem 0.95rem 0.24rem 0.5rem;
  border-radius: 5px;
  background: var(--oferta);
  color: var(--sobre-oferta);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  transform-origin: calc(100% - 0.45rem) 50%;
  translate: 0 -85%;
  rotate: 12deg;
  box-shadow: 0 3px 6px oklch(0 0 0 / 0.45);
}
/* Ojal */
.etiqueta-precio[data-oferta] > .insignia--oferta::before {
  content: '';
  position: absolute;
  right: 0.32rem;
  top: 50%;
  width: 0.3rem;
  height: 0.3rem;
  translate: 0 -50%;
  border-radius: 50%;
  background: oklch(0.24 0 0);
}
/* Cuerdita */
.etiqueta-precio[data-oferta] > .insignia--oferta::after {
  content: '';
  position: absolute;
  left: calc(100% - 0.4rem);
  top: 50%;
  width: 1rem;
  height: 0.6rem;
  border-top: 1.5px solid oklch(0.7 0 0);
  border-radius: 60% 60% 0 0;
  rotate: -22deg;
  transform-origin: left top;
}

/* Más grande en la ficha. */
.ficha__precios:has(> [data-oferta]) { padding-top: 1.75rem; }
.ficha__precios > .etiqueta-precio[data-oferta] { --lado: 1.85rem; padding-block: 0.65rem; border-radius: 10px; }
.ficha__precios > .etiqueta-precio[data-oferta]::after { border-radius: 0 10px 10px 0; font-size: 0.68rem; }
.ficha__precios > .etiqueta-precio[data-oferta] > s { font-size: 1rem; }
.ficha__precios > .etiqueta-precio[data-oferta] > .insignia--oferta { font-size: 1.05rem; }

/* En los kits del hero, centrada y más chica. */
.kit__precio:has(> [data-oferta]) { justify-items: center; }
.kit__precio > .etiqueta-precio[data-oferta] { --lado: 1.2rem; padding-left: 0.55rem; }
.kit__precio > .etiqueta-precio[data-oferta] > .insignia--oferta { font-size: 0.72rem; }

/* ---------- Galería de la ficha de un kit (js/ficha-ui.js) ----------
   Una lámina por foto, que se desliza con el dedo y encaja sola. */

.ficha__marco--galeria { display: block; }
.galeria { position: relative; width: 100%; height: 100%; }
.galeria__pista {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__lamina {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  margin: 0;
  scroll-snap-align: center;
}
.galeria__lamina > img { width: 84%; height: 84%; object-fit: contain; }
/* El combo del kit llena el marco: si queda una banda vacía debajo de las
   fotos, las flechas de la galería parecen flotar bajas en el vacío. */
.galeria__lamina > .combo { width: 100%; height: 100%; }
.galeria__lamina figcaption {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  max-width: calc(100% - 4.5rem);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.72);
  color: var(--blanco);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.galeria__puntos,
.galeria__contador {
  position: absolute;
  left: 50%;
  bottom: 0.45rem;
  translate: -50% 0;
  display: flex;
}
.galeria__contador {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.72);
  color: var(--blanco);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.galeria__punto {
  display: grid;
  place-items: center;
  width: 22px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.galeria__punto::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.38);
  transition: width var(--micro) var(--salida), background var(--micro) var(--salida);
}
.galeria__punto[aria-current='true']::before { width: 16px; background: var(--blanco); }
.galeria__flecha {
  position: absolute;
  /* Centrado con top/bottom + margen automático, no con translate: es la
     forma que ningún navegador puede descentrar. El fondo inferior queda
     8 % más corto para que el centro visual quede en el 46 %: las fotos
     cargan su masa arriba del centro del marco. */
  top: 0;
  bottom: 8%;
  margin-block: auto;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--borde-vivo);
  border-radius: 50%;
  background: oklch(0 0 0 / 0.6);
  color: var(--blanco);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.galeria__flecha--antes { left: 0.6rem; }
.galeria__flecha--despues { right: 0.6rem; }
@media (hover: hover) and (pointer: fine) {
  .galeria__flecha { display: grid; }
}

/* ---------- Transiciones de aplicación (js/transiciones.js) ----------
   Las pinta la tarjeta gráfica a partir de fotos del antes y el después; la
   página no se redibuja mientras duran. Mismo idioma que el resto: salida
   exponencial, sin rebote. */

::view-transition-group(root) {
  animation-duration: 260ms;
  animation-timing-function: var(--salida);
}

/* La foto que viaja entre la tarjeta y la ficha. */
::view-transition-group(foto-producto) {
  animation-duration: 520ms;
  animation-timing-function: var(--salida);
}
::view-transition-old(foto-producto),
::view-transition-new(foto-producto) {
  /* La misma foto en dos tamaños: sin fundido cruzado no se ve doble. */
  animation: none;
  height: 100%;
  object-fit: contain;
}
::view-transition-old(foto-producto) { display: none; }

/* La ficha tiene su propio fundido de entrada. Durante la transición lo hace
   el navegador; si también lo hiciera el CSS, serían dos fundidos. */
html[data-transicion] .ficha,
html[data-transicion] .ficha__caja { transition: none; }

/* Tarjetas que se reacomodan al filtrar. */
html[data-transicion='filtro']::view-transition-group(*) {
  animation-duration: 440ms;
  animation-timing-function: var(--salida);
}

/* La copia de la foto que vuela al carrito. Va por encima de todo y no
   intercepta toques. */
.vuelo {
  position: fixed;
  z-index: var(--z-aviso);
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
}