/* ==========================================================================
   Korvian Digital — Capa visual "Resend" para la portada
   --------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css y SÓLO desde index.html. Todo cuelga de
   `body.skin-rs`, así que las otras 7 páginas no se enteran de que existe
   este fichero.

   Qué imita, y de dónde salen los números (resend.com, julio de 2026):
     · Fondo negro puro #000 sobre la escala gris de Radix en oscuro:
       --gray-1 #141517 … --gray-11 #a1a4a5 … --gray-12 #f0f0f0.
     · Bordes translúcidos azulados (slate-a6 #d6ebfd30 / slate-a7 #d9edff40).
     · Titulares en serie de alto contraste, 4rem en móvil y 6rem en
       escritorio, interlínea 100%, con relleno degradado de blanco a blanco
       al 50% (su clase `.effect-font-gradient`).
     · Radios grandes: 16px en botones (rounded-2xl) y 24px en tarjetas
       (rounded-3xl).
     · Entrada de todo el bloque subiendo 16px con desvanecido
       (su `@keyframes hero-text-slide-up-fade`).
     · Ritmo vertical de sección: 48px en móvil, 96px de 761px en adelante.
     · En móvil TODO va centrado; el escritorio recupera el eje izquierdo
       sólo en el hero, igual que ellos.

   Dos cosas que NO se copian, a propósito:
     · Sus tipografías (Domaine Display, ABC Favorit) son de pago. En su
       lugar va Instrument Serif, libre (SIL OFL) y alojada aquí mismo,
       para no pedir nada a servidores de terceros —eso obligaría a montar
       banner de cookies—.
     · Su marca, sus textos y su muro de testimonios. Korvian todavía no
       tiene opiniones reales publicables y no se inventan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   R1. Tipografía de titulares — Instrument Serif, servida desde este dominio
   Licencia SIL Open Font License 1.1. `swap` para que el titular se lea
   desde el primer fotograma aunque la fuente aún no haya llegado.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Korvian Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Korvian Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

/* --------------------------------------------------------------------------
   R2. Tokens
   Se reescriben las variables que ya usa styles.css: con esto solo, media
   página se muda a la paleta de Resend sin tocar ni un selector más.
   -------------------------------------------------------------------------- */
body.skin-rs {
  /* Fondos — negro puro, como ellos. El escalón gris se reserva para
     tarjetas y superficies, nunca para el lienzo. */
  --bg: #000;
  --bg-2: #0b0c0d;
  --surface: #141517;   /* gray-1  */
  --surface-2: #191b1e; /* gray-2  */

  /* Bordes translúcidos con una pizca de azul: sobre negro se leen como
     un filo de luz, no como una línea gris. */
  --border: #d6ebfd22;
  --border-strong: #d9edff40;

  /* Texto */
  --text: #f0f0f0;      /* gray-12 */
  --text-soft: #a1a4a5; /* gray-11 */
  --muted: #878d8f;     /* gray-10 */

  /* Tipografías */
  --font-display: "Korvian Display", ui-serif, Georgia, "Times New Roman", serif;

  /* Radios — el salto más visible respecto a lo que había (6/10/14px) */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Acento: Resend no tiene color de marca. Lo único con color es el
     borde arcoíris de la píldora del hero. */
  --rainbow-cyan: #00d1c6;
  --rainbow-amber: #e9ac48;
  --rainbow-purple: #a855f7;

  /* El azul→violeta de Korvian se retira del «chrome» del sitio —barras de
     progreso, subrayados, focos, cursor— y pasa a blanco. Con reescribir
     estas tres variables caen de golpe la docena larga de sitios que usan
     `var(--accent)`; los degradados escritos a pelo se apagan más abajo. */
  --accent: #f0f0f0;
  --accent-soft: #d9edff;
  --accent-dim: rgba(255, 255, 255, 0.14);

  background: #000;
}

/* Lo que NO se toca: el color de dentro de las maquetas del escaparate
   —el medidor de rendimiento, las barras del CRM, los globos del chat, la
   curva de pedidos—. Resend también enseña capturas de producto a todo
   color sobre su página monocroma; el contraste es parte del efecto. */

/* Barra de progreso de lectura, bajo la cabecera */
body.skin-rs .site-header::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #fff);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

/* Filo que gira en la tarjeta destacada */
body.skin-rs .card--feature .edge::before,
body.skin-rs .edge::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.85) 38deg,
    rgba(214, 235, 253, 0.7) 88deg,
    transparent 148deg,
    transparent 360deg
  );
}

/* La línea que se enciende sobre cada paso del proceso, la del proceso en
   móvil y los puntos del carril deslizante */
body.skin-rs .step::before,
body.skin-rs .step-tabs::after,
body.skin-rs .rail-dots i.is-on {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), #fff);
}

/* La barra de tiempo de la pestaña va justo debajo de su última línea de
   texto: en blanco puro parecía un subrayado. Se queda a media luz. */
body.skin-rs .showcase-tab .t-bar {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.55));
}
body.skin-rs .step:hover .step-num { color: var(--text); }

body.skin-rs ::selection { background: rgba(255, 255, 255, 0.22); color: #fff; }
body.skin-rs :focus-visible { outline-color: #d9edff80; border-radius: 8px; }

/* --------------------------------------------------------------------------
   R3. Titulares
   El relleno degradado (blanco → blanco al 50%, en diagonal) es la firma
   tipográfica de Resend: hace que el titular parezca iluminado desde
   arriba a la izquierda. `padding-bottom` porque al recortar el fondo
   contra el texto, los descendentes de g/j/p se cortarían.
   -------------------------------------------------------------------------- */
body.skin-rs h1,
body.skin-rs .sec-head h2,
body.skin-rs .cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  background: linear-gradient(to bottom right, #fff 30%, rgba(255, 255, 255, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.12em;
  text-wrap: balance;
}

body.skin-rs h1 {
  /* Resend llega a 6rem en escritorio, pero su titular son tres palabras y
     el mío diez. A 5.6rem la columna del hero (unos 530px) sólo admitía 9
     caracteres por línea y salían cuatro líneas, una de ellas suelta.
     A 4.6rem caen en tres bien repartidas. */
  font-size: clamp(3rem, 13.5vw, 4.6rem);
  margin-bottom: 18px;
}

/* El titular de la portada entra como un bloque, no palabra a palabra, y
   por dos motivos:

   1) Es lo que hace Resend: su `animate-hero-text-slide-up-fade` está en el
      div que envuelve píldora, titular, texto y botones, y los sube los
      cuatro a la vez 16px con desvanecido.
   2) Comprobado en Chrome: si cada palabra va en un <span> con animación
      propia, cada una se pinta en su propia capa y el degradado recortado
      contra el texto (`background-clip: text`) deja de dibujarse — el
      titular ocupa su sitio pero no se ve NADA. Por eso el <h1> de
      index.html ya no lleva `data-words`.

   El resto del sitio conserva el troceado palabra a palabra: sus titulares
   no llevan degradado recortado y ahí funciona igual que siempre. */
body.skin-rs .hero [data-stagger] > * {
  animation-name: rs-slide-up-fade;
  animation-duration: 0.8s;
}
@keyframes rs-slide-up-fade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Red de seguridad contra el desborde lateral.
   `.hero-grid` pasa a una sola columna `1fr` en el móvil, y una pista `1fr`
   no puede encogerse por debajo del contenido mínimo de lo que lleva
   dentro: con el titular a 52px, la palabra «inteligencia» medía 372px en
   una pantalla de 342px útiles y empujaba botones y texto 30px fuera de
   pantalla. Se arregla dejando que la pista encoja y, si aun así no cupiera
   en un móvil muy estrecho, partiendo la palabra antes que la maqueta. */
body.skin-rs .hero-grid > * { min-width: 0; }
body.skin-rs h1 { overflow-wrap: break-word; }

body.skin-rs .sec-head h2 {
  font-size: clamp(2.6rem, 8.5vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}

/* Titulares menores: siguen en la sans, pero con el peso y el interletraje
   apretado de su `font-display`. */
body.skin-rs h3,
body.skin-rs h4 {
  color: var(--text);
  letter-spacing: -0.02em;
  font-weight: 500;
}
body.skin-rs h3 { font-size: 1.15rem; }

/* La frase destacada del hero deja de ser violeta: en Resend el único
   degradado tipográfico es de blanco a blanco. */
body.skin-rs .grad-text {
  background: linear-gradient(to bottom right, #fff 20%, rgba(255, 255, 255, 0.45));
  background-size: auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: none;
}

/* Antetítulo: ellos no usan monoespaciada. Etiqueta pequeña y neutra. */
body.skin-rs .eyebrow {
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 12px;
}

body.skin-rs .lead,
body.skin-rs .sec-head p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   R4. Botones
   rounded-2xl (16px), altura 44/48, primario blanco sobre negro. En móvil
   se apilan a ancho completo, como en su hero.
   -------------------------------------------------------------------------- */
body.skin-rs .btn {
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease), transform 0.15s var(--ease);
}
body.skin-rs .btn:active { transform: scale(0.98); }

body.skin-rs .btn--primary {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
}
body.skin-rs .btn--primary:hover { background: #e8e8e8; color: #000; }

body.skin-rs .btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
body.skin-rs .btn--ghost:hover { background: rgba(255, 255, 255, 0.07); }

body.skin-rs .btn--sm { height: 36px; padding: 0 16px; font-size: 0.875rem; border-radius: 12px; }

body.skin-rs .btn-row { gap: 12px; }

body.skin-rs .arrow-link {
  font-size: 0.9375rem;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   R5. Píldora del hero, con el borde arcoíris
   Resend la resuelve con un degradado cian→ámbar→púrpura de 1px alrededor
   de una píldora negra. Aquí va con un pseudo-elemento y `mask-composite`,
   que es lo que permite pintar sólo el filo sin recortar el texto.
   -------------------------------------------------------------------------- */
body.skin-rs .pill {
  position: relative;
  isolation: isolate;
  padding: 7px 15px;
  margin-bottom: 30px;
  border: 0;
  background: #000;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--text);
}
body.skin-rs .pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    100deg,
    var(--rainbow-cyan) 0%,
    var(--rainbow-amber) 38%,
    var(--rainbow-purple) 72%,
    var(--rainbow-cyan) 100%
  );
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
  animation: rs-rainbow 9s linear infinite;
}
@keyframes rs-rainbow {
  to { background-position: 220% 0; }
}
/* Si el navegador no sabe componer máscaras, un borde liso y a otra cosa:
   más vale una píldora sobria que un rectángulo de colores tapando el texto. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  body.skin-rs .pill::before { display: none; }
  body.skin-rs .pill { border: 1px solid var(--border-strong); }
}

body.skin-rs .dot { background: var(--rainbow-cyan); box-shadow: 0 0 8px var(--rainbow-cyan); }

/* --------------------------------------------------------------------------
   R6. Hero
   -------------------------------------------------------------------------- */
body.skin-rs .hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
}

/* Las dos manchas de color del fondo eran azul y violeta: en una paleta sin
   color de marca cantan muchísimo. Pasan a ser luz blanca, que es lo que
   Resend tiene detrás del hero. */
body.skin-rs .ambient::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
}
body.skin-rs .ambient::after {
  background: radial-gradient(circle, rgba(214, 235, 253, 0.09), transparent 70%);
}

/* El haz de luz que tienen detrás del titular (su `bg-light.png`), aquí
   como degradado radial: cuesta cero bytes y no se pixela.
   El centro queda por encima del borde superior y `.hero` recorta con
   `overflow: hidden`, así que lo que se ve es la luz cayendo desde arriba
   —que es justo el efecto—, no un círculo. */
body.skin-rs .hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -180px;
  z-index: 0;
  width: min(1100px, 160vw);
  height: 620px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.028) 42%,
    transparent 72%
  );
}

body.skin-rs .hero .lead { max-width: 46ch; }
body.skin-rs .hero-meta { border-top-color: var(--border); font-size: 0.875rem; }

/* Tarjeta de código: 24px de radio y cabecera de 64px, como sus paneles */
body.skin-rs .code-card {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}
body.skin-rs .code-bar { padding: 0 18px; height: 52px; border-bottom-color: var(--border); }
body.skin-rs .code-bar i { background: rgba(255, 255, 255, 0.13); }
body.skin-rs .code-body { padding: 20px 18px 24px; }
body.skin-rs .tok-key { color: #c4b5fd; }
body.skin-rs .tok-str { color: #86efac; }
body.skin-rs .tok-num { color: #fcd34d; }
body.skin-rs .tok-com { color: #5f676a; }

/* --------------------------------------------------------------------------
   R6b. El campo de puntos, en la paleta de Resend
   main.js lee estas tres variables del propio canvas (con la paleta de
   marca como respaldo), así que aquí se cambia el color sin tocar el JS
   ni afectar a las otras siete páginas, que siguen en azul→violeta.

   Resend es prácticamente monocromo: el color sólo asoma en el filo de la
   píldora. Así que el campo va de blanco con una pizca de cian a blanco con
   una pizca de ámbar — sus `--rainbow-cyan` y `--rainbow-amber` diluidos.
   -------------------------------------------------------------------------- */
body.skin-rs .fx-field {
  --fx-c1: 148, 210, 214;
  --fx-c2: 240, 240, 240;
  --fx-c3: 233, 172, 72;
}

/* La pista del hero pierde el violeta y la monoespaciada */
body.skin-rs .fx-hint {
  font-family: inherit;
  font-size: 0.75rem;
  background: rgba(20, 21, 23, 0.72);
  border-color: var(--border);
}
body.skin-rs .fx-hint i {
  background: var(--rainbow-cyan);
  /* El anillo que late está dentro de unos @keyframes con el violeta
     escrito dentro, así que no basta con cambiar el `box-shadow`: hay que
     sustituir la animación entera. */
  animation-name: rs-hint-pulse;
}
@keyframes rs-hint-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(0, 209, 198, 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(0, 209, 198, 0); }
}

/* --------------------------------------------------------------------------
   R7. Tira de capacidades
   El equivalente a su fila de logotipos de clientes: una línea sobria bajo
   el hero que sirve de respiro antes del primer bloque grande.
   -------------------------------------------------------------------------- */
body.skin-rs .strip {
  border-block-color: var(--border);
  padding: 22px 0;
  background: transparent;
}
body.skin-rs .strip-label { font-family: inherit; font-size: 0.8125rem; }
body.skin-rs .marquee-track b { font-size: 0.9375rem; color: var(--text-soft); }
body.skin-rs .marquee-track b::after { background: rgba(255, 255, 255, 0.2); }

/* --------------------------------------------------------------------------
   R8. Ritmo de sección
   py-12 / sm:py-24 en su Tailwind = 48px y 96px.
   -------------------------------------------------------------------------- */
body.skin-rs .section { padding: 96px 0; }
body.skin-rs .section--tight { padding: 72px 0; }

/* Las bandas alternas desaparecen: en Resend el fondo es negro de arriba
   abajo y lo que separa las secciones es el aire, no un cambio de color. */
body.skin-rs .section--alt {
  background: transparent;
  border-block: 0;
}

body.skin-rs .sec-head { margin-bottom: 48px; }

/* --------------------------------------------------------------------------
   R9. Tarjetas
   rounded-3xl, fondo gray-1 y filo translúcido. El brillo superior es su
   detalle recurrente: una línea de 1px que se apaga hacia los lados.
   -------------------------------------------------------------------------- */
body.skin-rs .card {
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  border-color: var(--border);
  background: var(--surface);
  overflow: hidden;
}
/* `background-color`, nunca el atajo `background`: el atajo pone
   `background-image: none` y se llevaría por delante la raya metálica. */
body.skin-rs .card:hover { border-color: var(--border-strong); background-color: var(--surface-2); }

/* --------------------------------------------------------------------------
   R9b. EL FILO METÁLICO
   Es lo que hace que sus cajones parezcan chapa pulida y no rectángulos.
   Sacado tal cual de resend.com; allí son <div> sueltos con el degradado
   en un atributo `style`, aquí van en pseudo-elementos.

   Tres piezas:
     a) Una raya de 1px que **cabalga sobre el borde**, no debajo: se apaga
        a transparente en los dos extremos, así que parece luz resbalando
        por un canto biselado. Su degradado exacto:
        `rgba(143,143,143,.67)` en el centro, transparente a los lados.
     b) Debajo, la misma raya desenfocada: es el halo que da el brillo.
        Sin esto la raya se ve plana y no «brilla».
     c) En los paneles grandes, dos rayas en esquinas opuestas —arriba a la
        derecha y abajo a la izquierda— con los extremos teñidos de cian y
        rosa transparentes. Ese detalle imita la aberración cromática de un
        canto metálico y es la firma de su panel de código.
   -------------------------------------------------------------------------- */

/* --- a) y b): la raya que barre el filo de cada cajón -------------------
   OJO: NO se puede usar `.card::before` ni `.card::after`. `main.js` le
   pone `data-spot` a `.card`, `.panel`, `.form-card`, `.cta` y `.code-card`,
   y el foco que sigue al puntero ya ocupa esos dos pseudo-elementos: uno
   para la luz interior y otro para el filo del borde recortado con máscara.
   Pisarlos rompe un efecto que ya estaba aprobado.

   Así que la raya va como **capas de fondo del propio cajón**: una fina de
   1px y, debajo, una elíptica que hace de halo. Las dos se desplazan a la
   vez, que es lo que da el reflejo que recorre el canto. */
body.skin-rs .card,
body.skin-rs .code-card {
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-image:
    /* halo */
    radial-gradient(closest-side, rgba(226, 240, 246, 0.5), transparent),
    /* raya */
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(232, 232, 232, 0.25) 26%,
      rgba(255, 255, 255, 0.98) 50%,
      rgba(180, 180, 180, 0.7) 70%,
      transparent 100%
    );
  /* La raya mide poco más de la mitad del cajón y recorre su ancho: de ahí
     la sensación de reflejo que pasa, en vez de un borde iluminado fijo. */
  background-size: 62% 14px, 62% 1px;
  background-position: -180% -6px, -180% 0;
  animation: rs-filo 9s ease-in-out infinite;
}
body.skin-rs .card:hover,
body.skin-rs .card.is-open { background-color: var(--surface-2); }

/* ⚠️ LOS PORCENTAJES DE `background-position` NO SON UNA TRASLACIÓN.
   Éste fue un error de bulto y estuvo en producción varios días: la raya
   parecía quedarse clavada dentro del cajón en vez de recorrerlo, y de lejos
   daba la sensación de que la tarjeta tenía una raya pegada «como si fuera a
   relucir, pero sin relucir».

   `background-position: P%` NO desplaza la imagen un P% del contenedor.
   Alinea proporcionalmente: `pos = (anchoCaja - anchoImagen) * P / 100`.
   Con `background-size: 62%`, la imagen mide 0,62·W, así que el recorrido
   útil es sólo 0,38·W. Los valores que había, -75% y 175%, dejaban la raya
   de -94px a 111px y de 220px a 425px en una tarjeta de 331px: **dentro de
   la caja en los dos extremos**. Nunca salía.

   Para que salga de verdad, con `background-size: S`:
     · por la derecha    P >= 100 / (1 - S)      → con 62%: 263%
     · por la izquierda  P <= -S / (1 - S) * 100 → con 62%: -163%
   De ahí -180% y 280%, con margen. Si algún día se cambia el 62%, hay que
   recalcular los dos extremos o el fallo vuelve. */
@keyframes rs-filo {
  0%        { background-position: -180% -6px, -180% 0; }
  55%, 100% { background-position: 280% -6px, 280% 0; }
}

/* Escalonado: si las seis tarjetas brillan a la vez parece un parpadeo de
   la pantalla; escalonadas, parece luz recorriendo la página. */
body.skin-rs .grid > .card:nth-child(2) { animation-delay: 1.1s; }
body.skin-rs .grid > .card:nth-child(3) { animation-delay: 2.2s; }
body.skin-rs .grid > .card:nth-child(4) { animation-delay: 3.3s; }
body.skin-rs .grid > .card:nth-child(5) { animation-delay: 4.4s; }

/* --- El foco que sigue al puntero, en metálico -------------------------
   Ya existía y funciona también arrastrando el dedo, pero era violeta.
   En blanco es exactamente el brillo de chapa que se busca. */
body.skin-rs [data-spot]::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.10), transparent 62%);
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  body.skin-rs [data-spot]::after {
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, 0.7), transparent 60%);
  }
}

/* --- c) Los paneles grandes: rayas en esquinas opuestas -----------------
   Aquí sí hay pseudo-elemento libre: `.demo`, `.promise`, `.nudge` y
   `.reason-stage` no están en la lista de `data-spot` de main.js.
   (`.code-card` sí lo está, por eso ese lleva la raya como fondo, arriba.) */
body.skin-rs .demo::after,
body.skin-rs .promise::after,
body.skin-rs .nudge::after,
body.skin-rs .reason-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33%,
      rgba(143, 143, 143, 0.67) 64%, rgba(236, 72, 153, 0) 99%),
    linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33%,
      rgba(143, 143, 143, 0.67) 64%, rgba(236, 72, 153, 0) 99%);
  background-size: min(300px, 80%) 1px, min(300px, 80%) 1px;
  /* Separadas del vértice para que el radio de 24px no se coma el extremo
     brillante de la raya. */
  background-position: right 10px top, left 10px bottom;
}
/* Sin esto el `::after` se ancla al ancestro posicionado más cercano y la
   raya aparece en otro sitio. `.demo` no traía `position` de serie. */
body.skin-rs .demo,
body.skin-rs .promise,
body.skin-rs .nudge,
body.skin-rs .reason-stage { position: relative; }

/* --------------------------------------------------------------------------
   R9c. Movimiento reducido: el filo se queda quieto, encendido en el centro.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.skin-rs .card,
  body.skin-rs .code-card {
    animation: none;
    /* 50%, no 19%: por lo mismo de arriba, el punto medio del recorrido es
       el 50% del hueco, y 19% dejaba la raya descentrada hacia la izquierda. */
    background-position: 50% -6px, 50% 0;
  }
  /* La pastilla del icono conserva el cromado —es color, no movimiento— pero
     la banda de luz se queda parada fuera de cuadro. */
  body.skin-rs .card-icon::before { animation: none; transform: translateX(-115%); }
  body.skin-rs .card:hover .card-icon { transform: none; }
}

/* --------------------------------------------------------------------------
   R9d. LOS ICONOS, EN CROMADO
   La otra mitad de lo que hace que sus cajones parezcan hardware: la pastilla
   del icono no es un cuadradito con borde, es una pieza de metal.

   Se monta con cuatro capas y ninguna imagen:
     1. Un `conic-gradient` con vueltas de claro a oscuro. Ese es TODO el
        truco del cromado: el metal pulido no tiene un degradado lineal, tiene
        el reflejo del entorno dando la vuelta a la pieza. Las paradas van en
        gris oscuro (#26 … #7e) para que sobre negro parezca acero y no una
        mancha plateada.
     2. Encima, el reflejo del cielo: claro arriba, negro abajo. En `overlay`,
        que oscurece y aclara a la vez y deja el cónico asomando.
     3. Dos `inset` de 1px: blanco arriba y negro abajo. Es el bisel. Sin esto
        la pastilla se ve pintada, no torneada.
     4. Una banda de luz que la cruza en diagonal (`::before`), en
        `plus-lighter`, así que **también enciende el dibujo del icono** al
        pasar por encima: es el reflejo recorriendo la pieza.

   `isolation: isolate` es obligatorio: sin él, el `plus-lighter` de la banda
   se mezcla con el fondo de la tarjeta y suelta un fogonazo en todo el cajón.
   -------------------------------------------------------------------------- */
body.skin-rs .card-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.10);
  color: #eef3f5;
  background-image:
    linear-gradient(163deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0.55) 100%),
    conic-gradient(from 208deg at 34% 24%,
      #3a3f42 0deg, #7e878c 52deg, #2b2f31 104deg, #656d71 152deg,
      #26292b 206deg, #767f84 262deg, #33383a 312deg, #3a3f42 360deg);
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease-out);
}

/* La banda de luz. Sobresale por los cuatro lados (`inset: -50%`) porque va
   inclinada: si midiera justo la pastilla, entraría y saldría en pico. */
body.skin-rs .card-icon::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(102deg,
    transparent 36%,
    rgba(255, 255, 255, 0.30) 46%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.30) 54%,
    transparent 64%);
  mix-blend-mode: plus-lighter;
  transform: translateX(-115%);
  animation: rs-cromo 9s ease-in-out infinite;
}

/* El punto de luz fijo de la esquina: lo que convence al ojo de que la
   superficie es curva y no plana. */
body.skin-rs .card-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 45% at 26% 8%,
    rgba(255, 255, 255, 0.34), transparent 70%);
}

/* El icono, grabado en la chapa: sombra negra de 1px debajo (el hueco) y un
   halo blanco muy tenue (la luz que rebota en el filo del grabado). */
body.skin-rs .card-icon svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.22));
}

@keyframes rs-cromo {
  0%, 6%     { transform: translateX(-115%); }
  30%, 100%  { transform: translateX(115%); }
}

/* Con el puntero encima la pieza se levanta y se pule: más contraste en el
   bisel y el halo blanco alrededor. Mismo gesto que ya hacía la tarjeta. */
body.skin-rs .card:hover .card-icon {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(226, 240, 246, 0.18);
}

/* El mismo escalonado que el filo de los cajones, para que sea una sola luz
   recorriendo la página y no seis destellos sueltos.
   OJO: el retardo va en el `::before`, que es quien lleva la animación. En
   `.card-icon` a secas no hace nada y los tres iconos brillan a la vez —
   se veía en las capturas, no en el código. */
body.skin-rs .grid > .card:nth-child(2) .card-icon::before { animation-delay: 1.1s; }
body.skin-rs .grid > .card:nth-child(3) .card-icon::before { animation-delay: 2.2s; }
body.skin-rs .grid > .card:nth-child(4) .card-icon::before { animation-delay: 3.3s; }
body.skin-rs .grid > .card:nth-child(5) .card-icon::before { animation-delay: 4.4s; }
body.skin-rs .card p { font-size: 0.9375rem; line-height: 1.7; }
body.skin-rs .card-list { font-size: 0.9rem; }

body.skin-rs .card--feature { background: var(--surface-2); border-color: var(--border-strong); }

body.skin-rs .tag {
  font-family: inherit;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 4px 11px;
  border-color: var(--border-strong);
}

/* --------------------------------------------------------------------------
   R10. Escaparate
   Los cuatro paneles pasan a ser "ventanas" de 24px con la misma cabecera
   de 64px que usan ellos en el bloque de código.
   -------------------------------------------------------------------------- */
body.skin-rs .showcase-tab {
  border-radius: var(--radius);
  border-color: var(--border);
}
body.skin-rs .showcase-tab[aria-selected="true"] {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
body.skin-rs .demo,
body.skin-rs .showcase-stage {
  border-radius: var(--radius-lg);
  border-color: var(--border);
}
body.skin-rs .demo { background: var(--surface); overflow: hidden; }
body.skin-rs .demo-bar { border-bottom-color: var(--border); }
body.skin-rs .d-flag,
body.skin-rs .d-url,
body.skin-rs .d-title { font-family: inherit; }
body.skin-rs .showcase-note { font-family: inherit; color: var(--muted); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   R11. Proceso, motivos, cifras, tecnologías y FAQ
   -------------------------------------------------------------------------- */
body.skin-rs .steps { border-top-color: var(--border); }
body.skin-rs .step { border-bottom-color: var(--border); }
body.skin-rs .step-num { font-family: inherit; letter-spacing: 0.02em; }

body.skin-rs .reason-stage,
body.skin-rs .promise,
body.skin-rs .nudge {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  background: var(--surface);
}
body.skin-rs .reason { border-radius: var(--radius); }
body.skin-rs .reason[aria-selected="true"] {
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 0 #fff;
}

/* Las cuatro escenas que se dibujan solas: son iconografía del sitio, no
   maqueta de producto, así que van en blanco como los suyos. */
body.skin-rs .scene .draw,
body.skin-rs .scene .needle,
body.skin-rs .scene .tick,
body.skin-rs .scene .shackle { stroke: #e6ecee; }
body.skin-rs .scene .hub { fill: #e6ecee; }
body.skin-rs .scene svg { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.28)); }
body.skin-rs .stage-glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 66%);
}

body.skin-rs .stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: -0.02em;
}

body.skin-rs .chip {
  border-radius: 999px;
  border-color: var(--border);
  background: var(--surface);
  font-size: 0.875rem;
}
body.skin-rs .chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
body.skin-rs .tech-note { color: var(--muted); }

body.skin-rs .faq { border-top-color: var(--border); }
body.skin-rs .faq details { border-bottom-color: var(--border); }
/* `.faq summary` es un flex con `space-between` y TRES piezas: el número
   (`::before`, un contador), el texto y la flecha (`::after`). Con tres
   elementos, `space-between` centra el del medio en el hueco sobrante: por
   eso las preguntas de una línea salían centradas y las de dos, alineadas
   a la izquierda. Se alinean todas a la izquierda y la flecha se va al
   extremo con `margin-left: auto`. */
body.skin-rs .faq summary {
  padding: 22px 0;
  font-size: 1.0625rem;
  font-weight: 450;
  justify-content: flex-start;
  gap: 14px;
}
body.skin-rs .faq summary::after { margin-left: auto; }
body.skin-rs .faq .faq-body p { font-size: 0.9375rem; line-height: 1.75; }

/* --------------------------------------------------------------------------
   R12. Cierre
   Su última sección: dos frases enormes en serie, con el texto hueco
   —contorno claro y relleno transparente— sobre negro. Es el remate que
   más se les reconoce, así que va calcado en técnica.
   -------------------------------------------------------------------------- */
body.skin-rs .cta {
  border: 0;
  background: transparent;
  padding: clamp(56px, 7vw, 88px) 0;
}
body.skin-rs .cta h2 {
  /* El tope en vw es el que manda en el móvil: son dos frases cortas y
     tienen que caber en una línea cada una, como las suyas. */
  font-size: clamp(2.4rem, 9.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  /* Texto hueco: el trazo dibuja la letra y el relleno se va. Las dos
     sombras de 1px le dan el relieve que tienen ellos. */
  background: none;
  -webkit-text-fill-color: transparent;
  /* Resend usa 0.4px porque Domaine Display tiene el asta gruesa. Instrument
     Serif es bastante más fina y con ese grosor el titular no se leía:
     comprobado en captura a 390px. Sube a 0.9px y a más opacidad. */
  -webkit-text-stroke: 0.9px rgba(255, 255, 255, 0.88);
  color: transparent;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.22), 1px 1px rgba(0, 0, 0, 0.1);
  padding-bottom: 0.1em;
}
/* Sin `-webkit-text-stroke` no habría letra que ver: se vuelve al relleno. */
@supports not (-webkit-text-stroke: 1px #000) {
  body.skin-rs .cta h2 {
    -webkit-text-fill-color: currentColor;
    color: var(--text);
    text-shadow: none;
  }
}
body.skin-rs .cta .grad-text {
  -webkit-text-fill-color: transparent;
  background: none;
  color: transparent;
}
body.skin-rs .cta p { color: var(--text-soft); max-width: 46ch; }
body.skin-rs .cta .btn-row { margin-top: 34px; }

/* --------------------------------------------------------------------------
   R13. Pie
   -------------------------------------------------------------------------- */
body.skin-rs .site-footer { border-top-color: var(--border); padding-top: 80px; }
body.skin-rs .footer-col h4 { font-size: 0.875rem; font-weight: 500; }
body.skin-rs .footer-col a,
body.skin-rs .footer-brand p { font-size: 0.9rem; }
body.skin-rs .social-link { border-radius: 999px; border-color: var(--border); background: var(--surface); }
body.skin-rs .footer-bottom { border-top-color: var(--border); }

/* Cabecera: en Resend el cristal es negro, no gris azulado */
body.skin-rs .site-header::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.4));
}
body.skin-rs .site-header.is-scrolled::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.6));
}
body.skin-rs .site-header:has(.nav-toggle[aria-expanded="true"])::before { background: #000; }
body.skin-rs .nav-menu { background: #000; border-bottom-color: var(--border); }
body.skin-rs .nav-toggle { border-radius: 10px; border-color: var(--border); }

/* --------------------------------------------------------------------------
   R14. MÓVIL (≤760px)
   Aquí es donde se juega el parecido, que es lo que se pidió mirar.
   Resend en el teléfono: titular gigantesco centrado, todo el texto
   centrado, botones apilados a ancho completo y 48px entre secciones.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.skin-rs .section { padding: 48px 0; }
  body.skin-rs .section--tight { padding: 40px 0; }
  body.skin-rs .sec-head { margin-bottom: 32px; }

  /* Hero centrado, como el suyo */
  body.skin-rs .hero { padding: 40px 0 48px; text-align: center; }
  body.skin-rs .hero h1 {
    /* Resend clava 4rem (64px) en el móvil, pero su titular es «Email for
       developers»: la palabra más larga son 10 letras. Aquí la más larga es
       «inteligencia», y a 64px no cabe ni de lejos en 342px útiles. El tope
       en vw es el que decide: 11.5vw deja la palabra en ~317px sobre una
       pantalla de 390 y sigue cabiendo en una de 320. */
    font-size: min(4rem, 11.5vw);
    margin-bottom: 20px;
  }
  body.skin-rs .hero .lead { margin-inline: auto; margin-bottom: 32px; }
  body.skin-rs .hero .pill { margin-bottom: 26px; }

  /* Botones apilados a ancho completo: `flex-col` en su hero */
  body.skin-rs .hero .btn-row { flex-direction: column; align-items: stretch; }
  body.skin-rs .hero .btn-row .btn { width: 100%; height: 48px; }

  body.skin-rs .hero-meta { justify-content: center; text-align: left; }
  body.skin-rs .hero-meta span { justify-content: flex-start; }

  /* El `text-align: center` del hero llega hasta el <pre> de la tarjeta de
     código y lo dejaría con cada línea centrada, ilegible. La tarjeta se
     queda alineada a la izquierda. */
  body.skin-rs .hero-visual { text-align: left; }

  body.skin-rs .cta .btn-row { flex-direction: column; align-items: stretch; }
  body.skin-rs .cta .btn-row .btn { width: 100%; height: 48px; }

  /* Las tarjetas del carril mantienen el radio grande */
  body.skin-rs [data-rail] > .card { border-radius: var(--radius-lg); }

  /* El número del paso activo era una pastilla azul→violeta con halo.
     Blanco sobre negro, que es como marca Resend lo seleccionado. */
  body.skin-rs .step-tab[aria-selected="true"] b {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
  }
  /* La pastilla «PASO 01» llevaba borde y fondo violetas escritos a pelo */
  body.skin-rs .steps.is-tabbed .step-num {
    font-family: inherit;
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
  }

  /* El haz de luz se sube y se estrecha para que caiga sobre el titular */
  body.skin-rs .hero::before { top: -240px; height: 560px; }
}

/* --------------------------------------------------------------------------
   R15. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.skin-rs .pill::before { animation: none; }
}