/* ==========================================================================
   KORVIAN · CAPA METÁLICA DE LA PORTADA
   Se carga DESPUÉS de home-resend.css y sólo desde index.html. Cuelga entera
   de `body.skin-rs`, igual que aquélla.

   El problema que resuelve: el acabado metálico estaba sólo en las tarjetas
   de servicios y sus iconos. El resto de la portada —cabecera, botones,
   pastillas, escaparate, pasos, cifras, preguntas y pie— seguía siendo
   superficie plana con un borde de 1px. Aquí se lleva el mismo lenguaje a
   todas las superficies del sitio.

   TRES REGLAS QUE VALEN PARA TODO EL FICHERO
   ------------------------------------------
   1. **El bisel va en `box-shadow: inset`, no en pseudo-elementos.** Una
      línea clara arriba y una oscura abajo. Es lo que separa una pieza
      torneada de un rectángulo pintado, y no consume `::before`/`::after`.
   2. **La chapa va en `background-image`, tampoco en pseudo-elementos.** Por
      el mismo motivo, y porque `main.js` reparte `data-spot` entre `.card`,
      `.panel`, `.form-card`, `.cta` y `.code-card`, y su foco que sigue al
      puntero ya ocupa los dos pseudo-elementos de esas cinco.
      ⚠️ En cualquier regla que toque una de esas cinco: `background-color`,
      nunca el atajo `background`. El atajo mete `background-image: none` y
      borra la chapa y el filo de un plumazo.
   3. **El horizonte.** Todos los degradados de chapa llevan un corte seco a
      media altura: encima el reflejo del cielo, debajo el del suelo. Ese
      salto es lo único que el ojo lee como metal; un degradado suave de
      claro a oscuro se queda en plástico.

   POR QUÉ LOS TITULARES NO LLEVAN CROMADO
   ---------------------------------------
   Es deliberado y conviene no «arreglarlo». `background-clip: text` aplica
   el degradado al bloque entero, no línea por línea: en un titular de tres
   líneas el horizonte cae dentro de UNA de ellas y las otras dos salen
   planas. Queda desigual y parece un fallo. Por eso el cromado con horizonte
   se reserva a los textos de una sola línea (las cifras) y a los recuadros.
   Los titulares conservan su degradado suave de home-resend.css.
   ========================================================================== */

body.skin-rs {
  /* Bisel: la pareja de líneas que da grosor. */
  --met-alto: rgba(255, 255, 255, 0.20);
  --met-bajo: rgba(0, 0, 0, 0.55);

  /* Chapa de piezas ALTAS: pestañas del escaparate y motivo seleccionado.
     🔴 AQUÍ NO VA NINGÚN HORIZONTE. NI ARRIBA. Y no se vuelve a poner.
     Hubo dos intentos antes: el corte a media altura partía la pieza entre
     el título y el párrafo, y subirlo al 15,5% —que parecía la solución—
     tampoco valió. En una pestaña de 80px, el 15,5% son 12px: el corte cae
     justo por debajo del canto redondeado y se lee como UNA RAYA CRUZANDO
     LA CAJA ENTERA, no como un bisel. Y como no se mueve, parece una
     animación de cromado congelada: «como si fuera a relucir, pero sin
     relucir». Es exactamente lo que el cliente señaló el 05/08/2026 en las
     pestañas del escaparate y en el motivo seleccionado.
     La regla, ya sin excepciones: en una pieza con más de una línea de
     texto, cuerpo LISO. El grosor lo dan el bisel del `box-shadow` y el
     reflejo que RECORRE la pieza (M5), que es movimiento de verdad.
     El corte seco sólo sobrevive donde no hay caja que partir:
     `--met-chapa-clara` (botón, texto de una línea) y las cifras. */
  --met-chapa: linear-gradient(180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.075) 26%,
    rgba(255, 255, 255, 0.03) 58%,
    rgba(255, 255, 255, 0.012) 80%,
    rgba(0, 0, 0, 0.10) 100%);

  /* Chapa de piezas BAJAS: botones, pastillas, chips y pasos.
     ⚠️ SIN CORTE DURO, y esto es importante. En el móvil estas piezas pasan a
     ancho completo (un botón mide 342×48 en vez de 150×40), y ahí cualquier
     corte —aunque esté por encima del texto— se convierte en una raya que
     cruza la pantalla entera y parece el cajón partido. Lo que en escritorio
     se disimulaba, en móvil canta.
     Así que aquí el cuerpo es un degradado LISO y el papel del canto lo hace
     el bisel del `box-shadow`. El reflejo lo pone la banda que recorre
     (M2b), que además es lo que hace que la pieza «reluzca» de verdad. */
  --met-chapa-baja: linear-gradient(180deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 38%,
    rgba(255, 255, 255, 0.015) 70%,
    rgba(0, 0, 0, 0.10) 100%);

  /* Chapa base opaca. Las piezas metálicas NO pueden ser semitransparentes:
     el campo de puntos del hero se veía a través de los botones y de la
     pastilla, y el metal salía moteado y sucio. Una pieza de metal tapa. */
  --met-cuerpo: #141518;
  --met-cuerpo-alto: #1c1e22;

  /* Chapa clara del botón principal. También sin corte: el que tenía a media
     altura le pasaba por encima al texto y en móvil, a 342px de ancho,
     partía el botón en dos de lado a lado.
     Ojo al detalle que hace que RELUZCA: el cuerpo NO es blanco puro, es
     plata (#eff3f5 → #c6ced4). Sobre blanco puro no se puede dibujar un
     reflejo, porque no hay nada más claro que el fondo; sobre plata, la
     banda blanca que lo recorre sí se ve pasar. El texto es negro y sobre
     plata claro se lee igual de bien. */
  --met-chapa-clara: linear-gradient(180deg,
    #ffffff 0%,
    #eff3f5 34%,
    #dbe2e7 62%,
    #c6ced4 100%);

  /* La banda de luz que cruza. Se reutiliza en botones, chips y pestañas. */
  --met-brillo: linear-gradient(102deg,
    transparent 36%,
    rgba(255, 255, 255, 0.28) 46%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.28) 54%,
    transparent 64%);
}

/* --------------------------------------------------------------------------
   M1. Cabecera y pie
   Las dos piezas que enmarcan la página. Un filo de luz en el canto que da
   al contenido, para que se lean como chasis y no como zonas de fondo.
   `.site-header` tiene los dos pseudo-elementos pillados (el fondo
   desenfocado y la barra de progreso de lectura), así que todo va en
   `box-shadow`.
   -------------------------------------------------------------------------- */
body.skin-rs .site-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09);
}
body.skin-rs .site-header.is-scrolled {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.55);
}

body.skin-rs .site-footer {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* Raya de luz centrada sobre el canto superior del pie: el mismo recurso que
   remata los paneles grandes. */
body.skin-rs .site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 232, 232, 0.20) 30%,
    rgba(143, 143, 143, 0.67) 50%,
    rgba(232, 232, 232, 0.20) 70%,
    transparent 100%);
}

/* --------------------------------------------------------------------------
   M2. Botones
   El principal era blanco liso; ahora es una pieza de cromo claro con el
   horizonte a media altura. El texto sigue en negro y el contraste sube,
   porque la mitad superior es blanco puro.
   `.btn--primary::after` ya lo ocupa el destello del hover que traía el
   sitio: se conserva y se le añade el bisel debajo.
   -------------------------------------------------------------------------- */
body.skin-rs .btn--primary,
body.skin-rs .btn--primary:hover {
  background-color: #fafafa;
  background-image: var(--met-chapa-clara);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #07090a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.5);
}
body.skin-rs .btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 8px 26px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(226, 240, 246, 0.30);
}

body.skin-rs .btn--ghost {
  background-color: var(--met-cuerpo);
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 var(--met-bajo);
}
body.skin-rs .btn--ghost:hover {
  background-color: var(--met-cuerpo-alto);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 var(--met-bajo),
    0 0 22px rgba(226, 240, 246, 0.14);
}

/* --------------------------------------------------------------------------
   M2b. EL REFLEJO QUE RECORRE LOS BOTONES
   Los dos botones traían su destello atado al `:hover`. En el móvil **no hay
   `:hover`**, así que allí no relucían nunca: eran dos rectángulos quietos.
   Por eso el barrido va en animación continua, no en transición.

   Cruza en ~1,3s y luego descansa el resto del ciclo (de ahí el tramo largo
   plano de los keyframes): un reflejo que va y viene sin parar marea y
   parece un banner. Los dos botones van desfasados para que la luz recorra
   la pareja, no destelle a la vez.
   -------------------------------------------------------------------------- */
@keyframes met-reflejo {
  0%, 4%    { transform: translateX(-130%); }
  22%, 100% { transform: translateX(130%); }
}

/* ⚠️ El reflejo pasa POR DEBAJO de las letras, no por encima.
   Con la banda por delante, al cruzar el botón principal blanqueaba el texto
   negro y «Cuéntanos tu proyecto» quedaba ilegible durante el barrido — un
   problema de contraste real, no un matiz estético.
   `isolation: isolate` crea el contexto de apilamiento y el `z-index: -1` de
   la banda la deja entre la chapa y el texto: reluce el metal, no la letra. */
body.skin-rs .btn--primary,
body.skin-rs .btn--ghost { isolation: isolate; }

/* `.btn` ya trae `position: relative` y `overflow: hidden`, así que la banda
   se recorta sola contra el radio del botón. */
body.skin-rs .btn--ghost::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--met-brillo);
  transform: translateX(-130%);
  transition: none;
  animation: met-reflejo 6s ease-in-out infinite 1.2s;
}

/* El destello del principal ya existía en `styles.css` atado al hover: se le
   quita la transición y pasa al mismo ciclo. La banda es blanco puro y el
   cuerpo es plata, así que aquí sí se ve el reflejo pasar. */
body.skin-rs .btn--primary::after {
  z-index: -1;
  background: linear-gradient(102deg,
    transparent 34%,
    rgba(255, 255, 255, 0.55) 44%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(255, 255, 255, 0.55) 56%,
    transparent 66%);
  transform: translateX(-130%);
  transition: none;
  animation: met-reflejo 6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   M3. Pastillas y chips
   `.pill::before` es el punto que late: no se toca. Chapa y bisel al margen.
   -------------------------------------------------------------------------- */
body.skin-rs .pill {
  background-color: var(--met-cuerpo);
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

body.skin-rs .chip {
  position: relative;
  overflow: hidden;
  background-color: var(--met-cuerpo);
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease-out);
}
body.skin-rs .chip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--met-brillo);
  transform: translateX(-115%);
  transition: transform 0.6s var(--ease-out);
}
body.skin-rs .chip:hover,
body.skin-rs .chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.45);
}
body.skin-rs .chip:hover::before,
body.skin-rs .chip:focus-visible::before { transform: translateX(115%); }

/* Los iconos de garantía del hero, en plata en vez de gris plano. */
body.skin-rs .hero-meta svg {
  color: #e6edf0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.28));
}
/* La regla que separa el hero de sus garantías: filo, no línea muerta. */
body.skin-rs .hero-meta {
  border-top: 0;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 60%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}

/* --------------------------------------------------------------------------
   M4. Ventanas: la tarjeta de código y las cuatro maquetas
   Las barras de título pasan a ser chasis: claras arriba, con su corte y su
   sombra proyectada sobre el contenido que llevan debajo.
   ⚠️ `.code-card` está en la lista de `data-spot`: aquí sólo `box-shadow`,
   porque su chapa y su filo ya se los pone home-resend.css.
   -------------------------------------------------------------------------- */
body.skin-rs .code-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 30px 70px rgba(0, 0, 0, 0.65);
}

/* Corte al 22%: estas barras miden 41px y llevan el nombre del fichero
   centrado. A media altura la raya le pasaba por encima al texto. */
body.skin-rs .code-bar,
body.skin-rs .demo-bar {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 18%,
    rgba(0, 0, 0, 0.20) 22%,
    rgba(255, 255, 255, 0.03) 26%,
    rgba(0, 0, 0, 0.14) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Los tres puntos de la ventana: pequeñas piezas torneadas. */
body.skin-rs .code-bar i,
body.skin-rs .demo-bar .dot,
body.skin-rs .d-flag {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.05) 52%, rgba(0, 0, 0, 0.35));
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   M5. Escaparate
   Las cuatro pestañas eran rectángulos con borde. Ahora son teclas: chapa y
   bisel en reposo, y la seleccionada pasa a cromo claro y se hunde un pelo,
   como una tecla pulsada.
   -------------------------------------------------------------------------- */
body.skin-rs .showcase-tab {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.03);
  background-image: var(--met-chapa);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
/* El reflejo RECORRE la pestaña, no se queda quieto. Antes iba atado al
   `:hover`, y en el móvil —que es donde el cliente mira la página y donde las
   cuatro pestañas se apilan a ancho completo— no hay `:hover`: no se disparaba
   nunca. Con el cuerpo ya liso, sin este barrido la pieza no reluce en
   absoluto. Mismo ciclo y mismo motivo que los botones (M2b).
   `z-index: -1` + `isolation: isolate`: la banda pasa POR DEBAJO del texto,
   entre la chapa y las letras. Por delante, al cruzar, blanqueaba el título
   de la pestaña seleccionada. */
body.skin-rs .showcase-tab { isolation: isolate; }
body.skin-rs .showcase-tab::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--met-brillo);
  transform: translateX(-130%);
  animation: met-reflejo 9s ease-in-out infinite;
}
/* Escalonado, para que la luz recorra el grupo en vez de destellar a la vez. */
body.skin-rs .showcase-tab:nth-child(2)::before { animation-delay: 2.2s; }
body.skin-rs .showcase-tab:nth-child(3)::before { animation-delay: 4.4s; }
body.skin-rs .showcase-tab:nth-child(4)::before { animation-delay: 6.6s; }

body.skin-rs .showcase-tab[aria-selected="true"] {
  background-color: rgba(255, 255, 255, 0.10);
  /* Mismo criterio que `--met-chapa`: cuerpo liso, sin corte. La seleccionada
     es la más clara de las cuatro, así que es donde más cantaba la raya. */
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.12) 26%,
    rgba(255, 255, 255, 0.06) 58%,
    rgba(255, 255, 255, 0.045) 80%,
    rgba(255, 255, 255, 0.085) 100%);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 24px rgba(226, 240, 246, 0.14);
}

body.skin-rs .demo,
body.skin-rs .showcase-stage {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 70px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   M6. Proceso
   -------------------------------------------------------------------------- */
/* ⚠️ `.step-num` («PASO 01») NO es una pastilla: es `display: block`, sin
   fondo, sin borde y sin padding — una simple etiqueta de texto sobre el
   título. Al darle chapa y fondo opaco se convertía en una BARRA GRIS a todo
   el ancho de la columna, con su canto de luz y todo. Parecía un elemento
   roto. Antes no cantaba sólo porque el fondo era casi transparente.
   Aquí únicamente se le sube el color a plata; el metal se lo queda la
   versión de móvil, que ésa sí es una pastilla de verdad. */
body.skin-rs .step-num {
  color: #aab3b8;
}

/* La pastilla «PASO 01» del carrusel de móvil: aquí sí hay pieza (tiene
   borde, fondo y padding propios), así que aquí sí va la chapa. */
@media (max-width: 760px) {
  body.skin-rs .steps.is-tabbed .step-num {
    background-color: var(--met-cuerpo);
    background-image: var(--met-chapa-baja);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
      inset 0 1px 0 var(--met-alto),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  }
}
/* El separador entre pasos, convertido en filo. Simétrico, por lo mismo que
   las preguntas: en una fila ancha, un filo que se apaga por un solo lado
   parece una raya cortada a medias. */
body.skin-rs .step {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 22%,
    rgba(255, 255, 255, 0.16) 78%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* --------------------------------------------------------------------------
   M7. Motivos
   El seleccionado ya llevaba una barra blanca a la izquierda; se le añade la
   chapa para que se lea como pieza levantada y no como fila resaltada.
   -------------------------------------------------------------------------- */
body.skin-rs .reason[aria-selected="true"] {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: var(--met-chapa);
  box-shadow:
    inset 2px 0 0 0 #fff,
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   M8. Cifras
   Aquí SÍ va el cromado completo con horizonte: son cuatro textos de una
   sola línea, que es justo el caso en que `background-clip: text` se
   comporta (ver la nota de la cabecera del fichero).
   Ojo: `.stat b` lleva `data-count` —el número sube al entrar en pantalla—
   pero eso reescribe el texto, no la caja, así que el recorte aguanta.
   -------------------------------------------------------------------------- */
body.skin-rs .stat b {
  background-image: linear-gradient(180deg,
    #ffffff 0%,
    #eef4f7 12%,
    #929ca2 36%,
    #4e565b 52%,
    #b9c3c9 55%,
    #ffffff 72%,
    #99a3a9 88%,
    #e7eef1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* El separador vertical entre cifras, SÓLO EN ESCRITORIO.
   ⚠️ En móvil las cuatro cifras pasan a una rejilla 2×2 y `styles.css` las
   separa con `border-right` + `border-bottom` y excepciones por `nth-child`.
   Este separador genérico en `.stat + .stat` metía además una raya vertical
   a la izquierda de la 2ª, 3ª y 4ª — o sea, uno cortando «100 %» por donde
   no hay columna que separar. Aquí abajo mandan los bordes de `styles.css`,
   que esa rejilla ya la tienen resuelta. */
@media (min-width: 761px) {
  body.skin-rs .stat + .stat {
    border-left-color: transparent;
    background-image: linear-gradient(180deg,
      transparent, rgba(255, 255, 255, 0.22) 45%, transparent);
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: 0 0;
  }
}

/* --------------------------------------------------------------------------
   M9. Preguntas
   `.faq summary` tiene los dos pseudo-elementos ocupados (el número y la
   flecha), así que el filo va como capa de fondo, igual que en las tarjetas.
   -------------------------------------------------------------------------- */
/* El desvanecido va a los DOS extremos, no sólo a la derecha. Con el
   degradado apagándose por un lado, en una fila ancha como éstas la raya
   parece cortada a media pantalla y se lee como un fallo de renderizado, no
   como un filo. Simétrica se entiende a la primera. */
body.skin-rs .faq details {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 22%,
    rgba(255, 255, 255, 0.16) 78%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}
body.skin-rs .faq details[open] {
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.34) 22%,
      rgba(255, 255, 255, 0.34) 78%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
  background-size: 100% 1px, 100% 100%;
  background-position: 0 100%, 0 0;
}

/* --------------------------------------------------------------------------
   M10. Cierre y redes
   -------------------------------------------------------------------------- */
/* ⚠️ `.cta` está en la lista de `data-spot`: `background-color`, no `background`. */
body.skin-rs .cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 30px 70px rgba(0, 0, 0, 0.55);
}

body.skin-rs .social-link {
  background-color: var(--met-cuerpo);
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
body.skin-rs .social-link:hover {
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 20px rgba(226, 240, 246, 0.14);
}

/* --------------------------------------------------------------------------
   M11. Movimiento reducido
   El metal es color y se queda; lo que se apaga son los barridos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.skin-rs .btn--ghost::before,
  body.skin-rs .btn--primary::after,
  body.skin-rs .chip::before,
  body.skin-rs .showcase-tab::before {
    display: none;
    animation: none;
  }
  body.skin-rs .chip:hover { transform: none; }
}