#reviews {
  --patron-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='176' viewBox='0 0 176 176' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M28.0 17.0L30.9 24.0L38.5 24.6L32.8 29.5L34.5 36.9L28.0 33.0L21.5 36.9L23.2 29.5L17.5 24.6L25.1 24.0Z'/%3E%3Cpath d='M104 20h40a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8h-28l-10 9v-9h-2a8 8 0 0 1-8-8V28a8 8 0 0 1 8-8z'/%3E%3Cpath d='M62.0 93.0L65.2 95.9L69.5 95.0L70.8 99.2L75.0 100.5L74.1 104.8L77.0 108.0L74.1 111.2L75.0 115.5L70.8 116.8L69.5 121.0L65.2 120.1L62.0 123.0L58.8 120.1L54.5 121.0L53.2 116.8L49.0 115.5L49.9 111.2L47.0 108.0L49.9 104.8L49.0 100.5L53.2 99.2L54.5 95.0L58.8 95.9Z'/%3E%3Cpath d='M56 108l4.5 4.5 8-8.5'/%3E%3Cpath d='M146.0 111.0L147.9 115.4L152.7 115.8L149.0 119.0L150.1 123.7L146.0 121.2L141.9 123.7L143.0 119.0L139.3 115.8L144.1 115.4Z'/%3E%3Cpath d='M18 142h26a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6H32l-7 6v-6h-7a6 6 0 0 1-6-6v-10a6 6 0 0 1 6-6z'/%3E%3Cpath d='M122.0 153.0L123.4 156.1L126.8 156.5L124.2 158.7L124.9 162.0L122.0 160.3L119.1 162.0L119.8 158.7L117.2 156.5L120.6 156.1Z'/%3E%3Ccircle cx='152' cy='78' r='2'/%3E%3Ccircle cx='20' cy='82' r='1.6'/%3E%3C/svg%3E");
}

/*
 * El iPhone y las pantallas que viven dentro: bloqueo, chat de WhatsApp y el
 * navegador de WhatsApp. Adentro del teléfono la tipografía es la del sistema
 * (spec §4.3): la marca Leadit no se filtra.
 *
 * 1em = 16 px cuando la pantalla mide 393 px de ancho. Todo se mide en em.
 */

#reviews .iphone {
  --ancho: 320px;
  width: var(--ancho);
  max-width: 100%;
  container-type: inline-size;
  flex: none;
  color: #000;
}

#reviews .iphone__marco {
  position: relative;
  padding: 3.6cqw;
  border-radius: 17.5cqw;
  background: linear-gradient(150deg, #48484b 0%, #1d1d1f 38%, #2a2a2d 70%, #3b3b3e 100%);
  box-shadow:
    inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.14),
    inset 0 0 0 1.25cqw #0b0b0c,
    var(--sombra-telefono, 0 40px 90px rgba(5, 10, 54, 0.26), 0 12px 28px rgba(5, 10, 54, 0.14));
}

/* Botones laterales: acción y volumen a la izquierda, encendido a la derecha. */
#reviews .iphone__marco::before,
#reviews .iphone__marco::after {
  content: "";
  position: absolute;
  width: 0.9cqw;
  border-radius: 0.6cqw;
  background: linear-gradient(90deg, #2a2a2c, #55555a);
}
#reviews .iphone__marco::before {
  left: -0.7cqw;
  top: 21%;
  height: 13%;
  box-shadow: 0 -9cqw 0 -0.05cqw #3a3a3d;
}
#reviews .iphone__marco::after {
  right: -0.7cqw;
  top: 26%;
  height: 16%;
  background: linear-gradient(270deg, #2a2a2c, #55555a);
}

#reviews .iphone__pantalla {
  position: relative;
  aspect-ratio: 393 / 852;
  border-radius: 13.9cqw;
  overflow: hidden;
  background: #000;
  font-family: var(--font-sistema);
  font-size: 3.778cqw;
  line-height: 1.3;
  letter-spacing: -0.01em;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}

#reviews .iphone__contenido {
  position: absolute;
  inset: 0;
}

#reviews .iphone__estado {
  position: absolute;
  inset: 0 0 auto;
  height: 3.3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25em 2.05em 0 2.4em;
  z-index: 20;
  pointer-events: none;
  transition: color var(--dur-med) ease;
}

#reviews .iphone__pantalla[data-barra="oscura"] .iphone__estado,
#reviews .iphone__pantalla[data-barra="oscura"] .iphone__inicio {
  color: #000;
}
#reviews .iphone__pantalla[data-barra="clara"] .iphone__estado,
#reviews .iphone__pantalla[data-barra="clara"] .iphone__inicio {
  color: #fff;
}

#reviews .iphone__hora {
  font-size: 1.0625em;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#reviews .iphone__iconos {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
#reviews .iphone__iconos svg {
  fill: currentColor;
  height: 0.75em;
  width: auto;
}
#reviews .iphone__bateria {
  height: 0.8em !important;
}

#reviews .iphone__isla {
  position: absolute;
  top: 0.69em;
  left: 50%;
  width: 7.875em;
  height: 2.3125em;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  z-index: 21;
}

#reviews .iphone__inicio {
  position: absolute;
  left: 50%;
  bottom: 0.5em;
  width: 8.375em;
  height: 0.3125em;
  transform: translateX(-50%);
  border-radius: 999px;
  background: currentColor;
  z-index: 21;
  pointer-events: none;
}

/* --- Capas de la historia -------------------------------------------------
   Una pantalla, varias capas. `data-capa` en la pantalla decide cuál se ve;
   el cambio es un crossfade (y un poco de escala, según el tema). */

#reviews .capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(var(--capa-escala, 1));
  transition:
    opacity var(--capa-duracion, 260ms) var(--ease-out),
    transform var(--capa-duracion, 260ms) var(--ease-out),
    visibility 0s linear var(--capa-duracion, 260ms);
}

#reviews .iphone__pantalla[data-capa="bloqueo"] .capa--bloqueo,
#reviews .iphone__pantalla[data-capa="chat"] .capa--chat,
#reviews .iphone__pantalla[data-capa="navegador"] .capa--chat,
#reviews .iphone__pantalla[data-capa="navegador"] .capa--navegador,
#reviews .iphone__pantalla[data-capa="formulario"] .capa--formulario,
#reviews .iphone__pantalla[data-capa="pdp"] .capa--pdp {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* --- Pantalla de bloqueo -------------------------------------------------- */

#reviews .capa--bloqueo {
  color: #fff;
  background:
    radial-gradient(120% 70% at 20% 10%, #6b5a52 0%, transparent 60%),
    radial-gradient(90% 60% at 90% 90%, #2e3440 0%, transparent 70%),
    linear-gradient(180deg, #3d3a3f 0%, #1f2128 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4.2em;
}

#reviews .bloqueo__fecha {
  position: relative;
  height: 1.3em;
  width: 100%;
  text-align: center;
  font-size: 1.1875em;
  font-weight: 600;
  opacity: 0.92;
}
#reviews .bloqueo__fecha span {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
#reviews .bloqueo__fecha span + span {
  opacity: 0;
}
#reviews [data-sub="espera"] .bloqueo__fecha span:first-child {
  opacity: 0;
}
#reviews [data-sub="espera"] .bloqueo__fecha span + span {
  opacity: 1;
}

#reviews .bloqueo__reloj {
  font-size: 5.8em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Bajo el reloj y no al fondo: en móvil la tarjeta del paso tapa la parte de
   abajo del teléfono. */
#reviews .bloqueo__pila {
  width: 100%;
  padding: 0 0.6em;
  margin-top: 2.4em;
  display: grid;
  gap: 0.5em;
}

#reviews .notificacion {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: 0.15em 0.65em;
  align-items: start;
  padding: 0.8em 0.9em;
  border-radius: 1.5em;
  background: rgba(245, 245, 245, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: #000;
  transform: translateY(0.75em) scale(0.98);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}
#reviews [data-capa="bloqueo"]:not([data-sub="vacio"]) .notificacion {
  transform: none;
  opacity: 1;
  transition-delay: 180ms;
}
#reviews .notificacion__icono {
  grid-row: span 2;
  width: 2.4em;
  height: 2.4em;
  border-radius: 0.6em;
  background: #fff;
  display: grid;
  place-items: center;
  color: #111;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
#reviews .notificacion__icono svg {
  width: 1.35em;
  height: 1.35em;
}
#reviews .notificacion__titulo {
  font-weight: 600;
  font-size: 0.95em;
}
#reviews .notificacion__hora {
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.5);
}
#reviews .notificacion__cuerpo {
  grid-column: 2 / 4;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.82);
}

/* La línea de tiempo del paso 2, como un widget de la pantalla de bloqueo. */
#reviews .linea {
  padding: 0.9em 1em 1em;
  border-radius: 1.5em;
  background: rgba(245, 245, 245, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: #000;
  opacity: 0;
  transform: translateY(0.75em);
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}
#reviews [data-sub="espera"] .linea {
  opacity: 1;
  transform: none;
}
#reviews .linea__titulo {
  font-size: 0.8em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.75em;
}
#reviews .linea__pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
#reviews .linea__pasos::before,
#reviews .linea__pasos::after {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 12.5%;
  right: 12.5%;
  height: 0.14em;
  border-radius: 1em;
  background: rgba(0, 0, 0, 0.12);
}
#reviews .linea__pasos::after {
  background: #111;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-in-out) 200ms;
}
#reviews [data-sub="espera"] .linea__pasos::after {
  transform: scaleX(1);
}
#reviews .linea__paso {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3em;
  font-size: 0.72em;
  line-height: 1.2;
}
#reviews .linea__punto {
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 0.16em rgba(0, 0, 0, 0.15);
  display: grid;
  place-items: center;
  color: #fff;
  transition:
    background-color var(--dur-med) ease,
    box-shadow var(--dur-med) ease;
  transition-delay: calc(200ms + var(--i) * 260ms);
}
#reviews .linea__punto svg {
  width: 1.05em;
  height: 1.05em;
  opacity: 0;
  transition: opacity var(--dur-fast) ease calc(200ms + var(--i) * 260ms);
}
#reviews [data-sub="espera"] .linea__punto {
  background: #111;
  box-shadow: none;
}
#reviews [data-sub="espera"] .linea__punto svg {
  opacity: 1;
}
#reviews .linea__fecha {
  color: rgba(0, 0, 0, 0.5);
}
#reviews .linea__paso:last-child .linea__nombre {
  font-weight: 700;
}
#reviews .linea__pie {
  margin-top: 0.8em;
  padding-top: 0.7em;
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
  font-size: 0.78em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.45em;
}
#reviews .linea__pie svg {
  width: 1.2em;
  height: 1.2em;
}

/* --- WhatsApp (iOS) ---------------------------------------------------------
   Los colores de WhatsApp existen solo aquí adentro. [CONFIRMAR] muestrearlos
   contra una captura real antes de publicar (spec §8.1). */

#reviews .wa {
  --wa-fondo: #efe7de;
  --wa-barra: rgba(246, 246, 246, 0.94);
  --wa-borde: rgba(0, 0, 0, 0.12);
  --wa-texto: #111b21;
  --wa-texto-2: #667781;
  --wa-entrante: #ffffff;
  --wa-saliente: #d9fdd3;
  --wa-enlace: #1a9e55;
  --wa-chip: rgba(255, 255, 255, 0.92);
  --wa-patron: 0.07;
  --wa-icono: #111b21;
  --wa-campo: #ffffff;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-fondo);
  color: var(--wa-texto);
}

#reviews .iphone[data-modo="oscuro"] .wa {
  --wa-fondo: #0b141a;
  --wa-barra: rgba(22, 27, 31, 0.94);
  --wa-borde: rgba(255, 255, 255, 0.1);
  --wa-texto: #e9edef;
  --wa-texto-2: #8696a0;
  --wa-entrante: #1f2c34;
  --wa-saliente: #005c4b;
  --wa-enlace: #21c063;
  --wa-chip: #182229;
  --wa-patron: 0.05;
  --wa-icono: #e9edef;
  --wa-campo: #1f2c34;
}

/* El fondo: un beige cálido con un patrón propio (estrellas, burbujas y el
   sello), no el wallpaper de WhatsApp. */
#reviews .wa__fondo {
  position: absolute;
  inset: 0;
  opacity: var(--wa-patron);
  background-image: var(--patron-chat);
  background-size: 11em 11em;
  pointer-events: none;
}
#reviews .iphone[data-modo="oscuro"] .wa__fondo {
  filter: invert(1);
}

#reviews .wa__cabecera {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 3.4em 0.9em 0.55em 0.55em;
  background: var(--wa-barra);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--wa-borde);
}
#reviews .wa__atras {
  display: flex;
  align-items: center;
  color: var(--wa-icono);
}
#reviews .wa__atras svg {
  width: 1.7em;
  height: 1.7em;
}
#reviews .wa__avatar {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  flex: none;
}
#reviews .wa__quien {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
#reviews .wa__nombre {
  font-weight: 600;
  font-size: 1em;
}
#reviews .wa__sub {
  position: relative;
  height: 1.15em;
  font-size: 0.78em;
  color: var(--wa-texto-2);
}
#reviews .wa__sub span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transition: opacity var(--dur-fast) ease;
}
#reviews .wa__sub span + span {
  opacity: 0;
}
#reviews [data-sub="escribiendo"] .wa__sub span:first-child {
  opacity: 0;
}
#reviews [data-sub="escribiendo"] .wa__sub span + span {
  opacity: 1;
}
#reviews .wa__acciones {
  display: flex;
  gap: 1.1em;
  color: var(--wa-icono);
}
#reviews .wa__acciones svg {
  width: 1.45em;
  height: 1.45em;
}

/* Con pocos mensajes el hilo empieza arriba, bajo la fecha: así el mensaje se
   ve aunque el teléfono esté cortado por abajo. El "escribiendo" y la burbuja
   ocupan la misma celda. */
#reviews .wa__hilo {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  row-gap: 0.6em;
  padding: 0.8em 0.75em 0.9em;
  overflow: hidden;
}
#reviews .wa__hilo > .wa__burbuja {
  grid-row: 2;
  grid-column: 1;
}

#reviews .wa__dia {
  justify-self: center;
  padding: 0.3em 0.75em;
  border-radius: 0.6em;
  background: var(--wa-chip);
  font-size: 0.78em;
  font-weight: 500;
  color: var(--wa-texto-2);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.08);
}

#reviews .wa__burbuja {
  position: relative;
  justify-self: start;
  max-width: 86%;
  background: var(--wa-entrante);
  border-radius: 0.2em 1.1em 1.1em 1.1em;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
/* La cola, arriba a la izquierda. */
#reviews .wa__burbuja::before {
  content: "";
  position: absolute;
  left: -0.45em;
  top: 0;
  width: 0.6em;
  height: 0.8em;
  background: var(--wa-entrante);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#reviews .wa__escribiendo {
  display: flex;
  align-self: start;
  justify-self: start;
  gap: 0.28em;
  padding: 0.85em 1em;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity var(--dur-fast) ease,
    transform var(--dur-med) var(--ease-out);
}
#reviews .wa__escribiendo i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--wa-texto-2);
  opacity: 0.55;
}
#reviews [data-sub="escribiendo"] .wa__escribiendo {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  #reviews [data-sub="escribiendo"] .wa__escribiendo i {
    animation: wa-punto 1s var(--ease-in-out) infinite;
  }
  #reviews [data-sub="escribiendo"] .wa__escribiendo i:nth-child(2) {
    animation-delay: 0.15s;
  }
  #reviews [data-sub="escribiendo"] .wa__escribiendo i:nth-child(3) {
    animation-delay: 0.3s;
  }
}
@keyframes wa-punto {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 0.9;
    transform: translateY(-0.18em);
  }
}

#reviews .wa__mensaje {
  width: 82%;
  padding: 0;
  opacity: 0;
  transform: translateY(0.75em);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
#reviews .wa__mensaje[data-visible],
#reviews [data-sub="mensaje"] .wa__mensaje,
#reviews [data-sub="presion"] .wa__mensaje,
#reviews [data-capa="navegador"] .wa__mensaje {
  opacity: 1;
  transform: none;
}
/* El hero llega con el mensaje ya pintado (sin JS se ve igual). Con JS, se
   esconde hasta que arranca la secuencia; si el script no llega, aparece solo
   a los 3 s. */
#reviews .js [data-chat-auto]:not([data-arrancado]) .wa__mensaje {
  opacity: 0;
  animation: wa-revelar 0s 3s forwards;
}
@keyframes wa-revelar {
  to {
    opacity: 1;
    transform: none;
  }
}

/* La foto completa, como la principal del producto en Shopify: cuadrada y
   sin recortar, sobre el mismo fondo de la foto. */
#reviews .wa__foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0.2em 1.1em 0 0;
  background: #f9f8f4;
}
#reviews .wa__texto {
  padding: 0.5em 0.65em 0;
  font-size: 0.97em;
  line-height: 1.32;
  white-space: pre-line;
}
#reviews .wa__texto strong {
  font-weight: 700;
}
#reviews .wa__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.3em 0.65em 0.45em;
  font-size: 0.85em;
  color: var(--wa-texto-2);
}
#reviews .wa__hora {
  flex: none;
  font-size: 0.82em;
}
#reviews .wa__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.75em 0.5em 0.8em;
  border-top: 0.5px solid var(--wa-borde);
  color: var(--wa-enlace);
  font-weight: 500;
  font-size: 0.97em;
  border-radius: 0 0 1.1em 1.1em;
  transition:
    background-color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
#reviews .wa__boton svg {
  width: 1.1em;
  height: 1.1em;
}
#reviews [data-sub="presion"] .wa__boton {
  background: rgba(26, 158, 85, 0.12);
  transform: scale(0.985);
}

#reviews .wa__redactar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.45em 0.8em 2.2em;
  background: var(--wa-barra);
  border-top: 0.5px solid var(--wa-borde);
  color: var(--wa-icono);
}
#reviews .wa__redactar svg {
  width: 1.5em;
  height: 1.5em;
  flex: none;
}
#reviews .wa__campo {
  flex: 1;
  height: 2.1em;
  border-radius: 1.1em;
  background: var(--wa-campo);
  border: 0.5px solid var(--wa-borde);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.55em;
}
#reviews .wa__campo svg {
  width: 1.25em;
  height: 1.25em;
  opacity: 0.8;
}

/* --- El navegador de WhatsApp: una hoja que sube ------------------------- */

#reviews .capa--navegador {
  transform: translateY(100%);
  opacity: 1;
  transition:
    transform 420ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)),
    visibility 0s linear 420ms;
  z-index: 5;
}
#reviews .iphone__pantalla[data-capa="navegador"] .capa--navegador {
  transform: none;
}
#reviews .iphone__pantalla[data-capa="navegador"] .capa--chat {
  filter: brightness(0.7);
}

#reviews .navegador {
  position: absolute;
  inset: 3.1em 0 0;
  display: flex;
  flex-direction: column;
  border-radius: 0.85em 0.85em 0 0;
  overflow: hidden;
  background: var(--lr-bg, #fff);
  box-shadow: 0 -0.3em 1.5em rgba(0, 0, 0, 0.18);
}
#reviews .navegador__barra {
  flex: none;
  display: grid;
  grid-template-columns: 2em 1fr 2em;
  align-items: center;
  padding: 0.55em 0.75em;
  background: var(--nav-barra, #f7f7f7);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
  color: var(--nav-texto, #111);
}
#reviews .iphone[data-modo="oscuro"] .navegador__barra {
  --nav-barra: #1c1c1e;
  --nav-texto: #f2f2f2;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
#reviews .navegador__barra svg {
  width: 1.2em;
  height: 1.2em;
}
#reviews .navegador__dominio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  font-size: 0.82em;
  font-weight: 600;
}
#reviews .navegador__dominio svg {
  width: 0.95em;
  height: 0.95em;
  opacity: 0.6;
}
#reviews .navegador__cuerpo {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* Sin movimiento: la hoja ya está arriba y las capas no se deslizan. */
@media (prefers-reduced-motion: reduce) {
  #reviews .capa,
  #reviews .capa--navegador,
  #reviews .notificacion,
  #reviews .linea,
  #reviews .wa__mensaje,
  #reviews .wa__escribiendo {
    transition: none !important;
  }
}