/* ═══════════════════════════════════════════════════
   BLINQ — Rescate de tu web actual (/rescate-web)
   Estilos propios de la página. Los componentes base (secciones, columnas,
   filas, proceso, FAQ) vienen de ui.css.

   El visual del hero es un OBJETO DE DEMO: un sitio viejo en WordPress con
   errores. Sus colores feos son a propósito y van fijos (no son tokens),
   igual que la pantalla de cliente en .chat-demo. Todo lo demás usa tokens.
   Escala con unidades de contenedor (cqw) para verse igual en 390 y 1280.
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   HERO · escenario
   ───────────────────────────────────── */
.rx { container-type: inline-size; }

.rx-stage {
    position: relative;
    padding: 5cqw 5cqw 21cqw;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--bg-2);
    font-size: clamp(7.5px, 2.3cqw, 13px);
    line-height: 1.3;
}

/* Ventana del navegador (objeto físico: lleva sombra de medio) */
.rx-win {
    overflow: hidden;
    border-radius: 1.6cqw;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), var(--shadow-media);
    transform: rotate(-1.2deg);
}

.rx-chrome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.4cqw 2cqw;
    align-items: center;
    padding: 1.8cqw 2.2cqw;
    background: #DEE1E6;
    color: #3C4043;
    font-family: Arial, Helvetica, sans-serif;
}

.rx-dots { display: flex; gap: 1cqw; }
.rx-dots i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #BDC1C6; }

.rx-tab {
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    padding: 0.9cqw 2.4cqw;
    border-radius: 1.4cqw 1.4cqw 0 0;
    background: #FFFFFF;
    font-size: 0.86em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rx-url {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.6cqw;
    padding: 1cqw 2cqw;
    border-radius: 99px;   /* barra de URL del navegador: objeto de demo, no un botón */
    background: #FFFFFF;
    font-size: 0.95em;
}

.rx-insecure {
    display: inline-flex;
    align-items: center;
    gap: 0.8cqw;
    padding-right: 1.6cqw;
    border-right: 1px solid #DADCE0;
    color: #C5221F;
    font-weight: 700;
    white-space: nowrap;
}

.rx-insecure svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rx-host { color: #202124; }
.rx-host s { color: #C5221F; text-decoration-thickness: 1px; }

/* El sitio viejo */
.rx-site {
    position: relative;
    background: #F4EFDF;
    color: #333333;
    font-family: Verdana, Geneva, sans-serif;
}

.rx-warn {
    margin: 0;
    padding: 1.4cqw 2.4cqw;
    border-left: 1.1cqw solid #DBA617;
    background: #FFFFFF;
    color: #3C434A;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.86em;
}

.rx-warn b { color: #8A2424; }
.rx-warn u { color: #2271B1; }

.rx-head {
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 2.2cqw 2.4cqw;
    background: #1E4F9C;
    color: #FFF34F;
}

.rx-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 6.4cqw;
    height: 6.4cqw;
    border: 0.5cqw solid #FFFFFF;
    border-radius: 50%;
    color: #FFFFFF;
    font: 700 1.5em Georgia, 'Times New Roman', serif;
}

.rx-brand {
    display: grid;
    font: 700 1.45em 'Times New Roman', Times, serif;
    letter-spacing: 0.04em;
    text-shadow: 0.3cqw 0.3cqw 0 #000000;
}

.rx-brand small {
    color: #FFFFFF;
    font: italic 400 0.5em 'Comic Sans MS', 'Comic Sans', cursive;
    letter-spacing: 0;
    text-shadow: none;
}

.rx-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.4cqw;
    padding: 1.1cqw 2.4cqw;
    background: #333333;
    color: #FFFFFF;
    font: 700 0.74em Arial, Helvetica, sans-serif;
}

.rx-menu span:nth-child(3) { color: #FF9900; text-decoration: underline; }

.rx-slider {
    position: relative;
    display: grid;
    place-items: center;
    height: 19cqw;
    margin: 2cqw 2.4cqw 0;
    border: 1px dashed #A7A08C;
    background: #E3DDC9;
    color: #6B6658;
}

.rx-broken {
    display: inline-flex;
    align-items: center;
    gap: 1.2cqw;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.95em;
}

.rx-broken svg { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.rx-arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 4.6cqw;
    height: 7cqw;
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    font: 700 1.4em Arial, sans-serif;
    transform: translateY(-50%);
}

.rx-arrow--l { left: 0; }
.rx-arrow--r { right: -2.2cqw; }   /* se sale del slider: tema roto */

.rx-sdots { position: absolute; bottom: 1.4cqw; display: flex; gap: 1cqw; }
.rx-sdots i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #FFFFFF; opacity: 0.6; }
.rx-sdots i:first-child { opacity: 1; }

.rx-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2cqw;
    padding: 2cqw 2.4cqw 2.4cqw;
}

.rx-db {
    margin: 0;
    padding: 1.6cqw 2cqw;
    border: 1px solid #CCD0D4;
    background: #FFFFFF;
    color: #444444;
    font: 1em 'Times New Roman', Times, serif;
}

.rx-db b { display: block; color: #111111; font-size: 1.15em; }

.rx-load {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1cqw;
    color: #777777;
    font: 0.82em Tahoma, Verdana, sans-serif;
}

.rx-spin {
    width: 5cqw;
    height: 5cqw;
    border: 0.8cqw solid #CFC8B2;
    border-top-color: #1E4F9C;
    border-radius: 50%;
}

.rx-foot {
    margin: 0;
    padding: 1.2cqw 2.4cqw;
    background: #222222;
    color: #9A9A9A;
    font: 0.7em Arial, Helvetica, sans-serif;
}

/* Tarjetas flotantes (como .ai-card en asistentes de IA) */
.rx-score,
.rx-after {
    position: absolute;
    z-index: 2;
    border-radius: 2cqw;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(16, 14, 24, 0.06), 0 26px 48px -24px rgba(14, 11, 23, 0.55);
    font-family: var(--font-body);
}

.rx-score {
    left: 4cqw;
    bottom: 4.5cqw;
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 2cqw 2.8cqw 2cqw 2cqw;
}

/* Medidor: el arco es un dato de la demo (23 de 100) */
.rx-gauge {
    --v: 23;
    display: grid;
    place-items: center;
    flex: none;
    width: 10cqw;
    height: 10cqw;
    border-radius: 50%;
    background: conic-gradient(#E5484D calc(var(--v) * 1%), #FCE3E4 0);
}

.rx-gauge b {
    display: grid;
    place-items: center;
    width: 7.6cqw;
    height: 7.6cqw;
    border-radius: 50%;
    background: #FFF5F5;
    color: #C5221F;
    font: 700 1.25em var(--font-body);
    letter-spacing: -0.02em;
}

.rx-score__t { display: grid; gap: 0.4cqw; }
.rx-score__t b { font-weight: 600; }
.rx-score__t span { color: #6B6878; font-size: 0.88em; }
.rx-score__t em { color: #C5221F; font-style: normal; font-weight: 600; font-size: 0.88em; }

.rx-after {
    right: 3cqw;
    bottom: 3cqw;
    width: 44cqw;
    padding: 2.4cqw 2.8cqw 2.6cqw;
    box-shadow: 0 0 0 1px rgba(157, 0, 255, 0.35), 0 26px 48px -24px rgba(14, 11, 23, 0.55);
}

.rx-after__k {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    margin-bottom: 1.6cqw;
    font: 500 0.82em var(--font-mono);
    letter-spacing: 0.02em;
    color: #7A00C7;
}

.rx-after__k::before {
    content: "";
    width: 1.4cqw;
    height: 1.4cqw;
    border-radius: 2px;
    background: #9D00FF;
}

.rx-after ul { display: grid; gap: 1.2cqw; margin: 0; padding: 0; list-style: none; }

.rx-after li {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    font-weight: 500;
}

.rx-after li svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: #15803D;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Movimiento: solo el spinner eterno (es el chiste) y la tarjeta «después»
   que aparece una vez. Sin movimiento si el sistema lo pide. */
@media (prefers-reduced-motion: no-preference) {
    .rx-spin { animation: rx-spin 1.1s linear infinite; }
    .js .rx-after { animation: rx-in 0.5s ease 0.6s both; }
}

@keyframes rx-spin { to { transform: rotate(360deg); } }
@keyframes rx-in { from { opacity: 0; transform: translateY(8px); } }


/* ─────────────────────────────────────
   02 · Dónde vive tu web (infraestructura)
   ───────────────────────────────────── */
.rx-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px clamp(32px, 5vw, 72px);
    align-items: start;
    margin-top: clamp(48px, 5vw, 72px);
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

.rx-home__main { display: grid; gap: 14px; justify-items: start; }
.rx-home .checks { gap: 14px; }


/* ─────────────────────────────────────
   03 · Antes y después
   ───────────────────────────────────── */
.rx-vs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    overflow: hidden;
}

.rx-vs__col { padding: clamp(22px, 2.6vw, 32px); }
.rx-vs__col + .rx-vs__col { border-left: 1px solid var(--line); }

.rx-vs__k {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font: 500 0.8125rem var(--font-mono);
    letter-spacing: 0.02em;
    color: var(--text-3);
}

.rx-vs__col--after .rx-vs__k { color: var(--link); }

.rx-vs ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.rx-vs li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    line-height: 1.55;
    color: var(--text-2);
}

.rx-vs li:first-child { border-top: 0; padding-top: 0; }
.rx-vs li b { display: block; color: var(--text); font-weight: 600; }
.rx-vs li .i { margin-top: 0.22em; }
.rx-vs__col--before .i { color: var(--text-3); }
.rx-vs__col--after .i { color: var(--link); }

/* Ejemplo rotulado: dos barras de rendimiento (datos de ejemplo) */
.rx-demo {
    display: grid;
    gap: 14px;
    margin-top: 24px;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-lg);
}

.rx-demo__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    font-size: 0.9375rem;
    color: var(--text);
    font-weight: 600;
}

.rx-demo__tag {
    padding: 2px 8px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    font: 500 0.75rem var(--font-mono);
    color: var(--text-3);
}

.rx-bar {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem;
    gap: 12px;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-2);
}

.rx-bar__track { height: 10px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.rx-bar__fill { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--text-3); }
.rx-bar--after .rx-bar__fill { background: var(--brand); }
.rx-bar__n { font: 500 0.875rem var(--font-mono); color: var(--text); text-align: right; }

.rx-demo .caption { margin: 0; }


/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (max-width: 999px) {
    .page-hero__grid--visual:has(.rx) { grid-template-columns: minmax(0, 1fr); }
    .page-hero__visual.rx { max-width: 620px; width: 100%; }
}

@media (max-width: 767px) {
    .rx-home { grid-template-columns: minmax(0, 1fr); }
    .rx-vs { grid-template-columns: minmax(0, 1fr); }
    .rx-vs__col + .rx-vs__col { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 599px) {
    .rx-stage { padding: 4cqw 3cqw 24cqw; }
    .rx-after { width: 50cqw; }
    .rx-score { left: 2.5cqw; }
}