/* ==========================================================================
   PATROCINIO — raíles laterales + página de destino (patrocinio.html)
   Archivo NUEVO. No modifica ni depende de ninguna regla de style.css:
   solo consume sus tokens (:root / .dark-theme, style.css:1-28).

   NOMENCLATURA: todo lleva el prefijo .pitch-*. Nunca ad / ads / banner /
   sponsor / promo: las listas cosméticas de los bloqueadores ocultan por
   nombre de clase y un hueco vendido que no se ve es dinero devuelto.

   TRES HUECOS, UNA TARJETA: los dos raíles fijos (>=1100px) y #pitch-flow,
   que va en el flujo del documento y manda por debajo de 1100px. Nunca se
   ven los dos a la vez. El markup se escribe una sola vez, en el <template>
   de index.html, y js/patrocinio.js lo clona en los tres.

   GEOMETRÍA — por qué no puede descentrar el panel:
   position: fixed saca los raíles del flujo. .container conserva
   width: min(100%, var(--page-shell-width)) y margin: 0 auto, y body sigue
   siendo el mismo flex. Los dos raíles se anclan al 50% del viewport con la
   misma fórmula (uno con right, otro con left): simétricos exactos.
   Ancho mínimo necesario = 620 + 2*(196 + 28) = 1068px  ->  se muestran
   desde 1100px, con 16px de margen de seguridad para la barra de scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens propios. Van en :root (no dentro del @media) para que los use
   también patrocinio.html. NO se usa var(--accent-color): no está definida
   en el proyecto (style.css:2425 la usa sin declararla).
   -------------------------------------------------------------------------- */
:root {
    --pitch-yes: #0f7a43;                      /* 5,4:1 sobre blanco */
    --pitch-cta-fg: #ffffff;                   /* 4,97:1 sobre #7158e2 */
    /* 0.05 de alfa daba #f4f2fd sobre blanco: la etiqueta se veía como una
       mancha y no como un rótulo. Con 0.10 se lee que es una etiqueta. */
    --pitch-chip-bg: rgba(113, 88, 226, 0.1);
    --pitch-edge-hover: rgba(113, 88, 226, 0.45);
    --pitch-lift: 0 14px 34px rgba(113, 88, 226, 0.16);
}

/* .dark-theme vive en <html>, igual que en el resto del proyecto. */
.dark-theme {
    --pitch-yes: #33d467;                      /* 8,5:1 sobre #1e1e1e */
    --pitch-cta-fg: #17102e;                   /* 5,1:1 sobre #9b77fa */
    --pitch-chip-bg: rgba(155, 119, 250, 0.18);
    --pitch-edge-hover: rgba(155, 119, 250, 0.5);
    --pitch-lift: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   1. RAÍLES LATERALES
   ========================================================================== */

/* Estado por defecto: NO existen (móvil, tablet estrecha, ventanas bajas). */
.pitch-rail {
    display: none;
}

@media (min-width: 1100px) and (min-height: 640px) {

    .pitch-rail {
        --pitch-gap: 28px;
        --pitch-edge: 16px;
        --pitch-width: clamp(
            196px,
            calc((100vw - var(--page-shell-width)) / 2 - var(--pitch-gap) - var(--pitch-edge)),
            268px
        );

        display: block;
        position: fixed;
        top: 50%;
        width: var(--pitch-width);
        max-height: calc(100vh - 32px);
        transform: translateY(-50%);
        z-index: 5;   /* bajo .copy-toast (1000) y .cookie-banner (9999) */
    }

    .pitch-rail--left  { right: calc(50% + var(--page-shell-width) / 2 + var(--pitch-gap)); }
    .pitch-rail--right { left:  calc(50% + var(--page-shell-width) / 2 + var(--pitch-gap)); }

    /* El rótulo, con el cuerpo de .victory-kicker (0.68rem y 0.06em de
       espaciado), caía en DOS líneas en todos los raíles, incluidos los de
       268px: dos líneas en mayúsculas dentro de una etiqueta se leen como
       una mancha. Con este cuerpo entra en una sola línea de 1280px para
       arriba. Por debajo (raíl de 196px) no cabe ni así, y ahí sigue en dos
       líneas a propósito: antes que encoger el rótulo hasta lo ilegible. */
    .pitch-rail .pitch-kicker {
        gap: 6px;
        padding: 4px 9px;
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }
}

/* Pantallas grandes: más aire entre el panel y el raíl. */
@media (min-width: 1320px) {
    .pitch-rail { --pitch-gap: 40px; }
}

/* Raíles estrechos (de 1100 a 1243px el clamp aún no llega a 268px: a 1100
   la tarjeta mide 196px). Todo baja medio punto y los laterales se estrechan
   3px. Lo importante es el correo del pie: con el cuerpo de siempre medía
   139px en 137 disponibles y se partía en "juanma.caaz@gmail.co / m", que es
   justo el dato que no puede quedar ilegible. Medido en las capturas. */
@media (min-width: 1100px) and (max-width: 1243px) {
    .pitch-rail .pitch-card { padding: 18px 14px 14px; }
    .pitch-rail .pitch-title { font-size: 0.94rem; }
    .pitch-rail .pitch-claim { font-size: 0.78rem; }
    .pitch-rail .pitch-facts li { font-size: 0.73rem; }
    .pitch-rail .pitch-cta { padding: 10px 8px; font-size: 0.78rem; }
    .pitch-rail .pitch-foot { font-size: 0.63rem; }
}

/* Portátiles bajos (1366x768): se cae el dato menos importante antes que
   comprimir la tarjeta. El selector lleva .pitch-rail delante a propósito:
   así gana en especificidad a `.pitch-facts li`, que va DESPUÉS en el
   archivo, y la regla se aplica de verdad. */
@media (min-width: 1100px) and (max-height: 760px) {
    .pitch-rail .pitch-fact--optional { display: none; }
}

/* --------------------------------------------------------------------------
   EL HUECO EN FLUJO (<1100px). Va entre </main> y <footer>, dentro de
   .container: en un móvil no hay laterales donde poner nada fijo, y una
   tarjeta flotante taparía el teclado y el tablero. Al ir en el flujo no
   empuja el juego fuera de pantalla al cargar (queda por debajo) y un
   lector de pantalla la encuentra cuando el juego ya ha terminado.

   El interruptor es el MISMO que el de los raíles, invertido: en cuanto
   los raíles aparecen, esto desaparece. Nunca se ven los dos.
   -------------------------------------------------------------------------- */

.pitch-flow {
    display: block;
    margin: 4px 0 26px;
}

@media (min-width: 1100px) and (min-height: 640px) {
    .pitch-flow { display: none; }
}

@media print {
    .pitch-rail,
    .pitch-flow { display: none !important; }
}

/* --------------------------------------------------------------------------
   La tarjeta — mismo lenguaje que .game-card y el hover de .stat
   -------------------------------------------------------------------------- */

.pitch-card {
    position: relative;                 /* ancla de la franja ::before */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 17px 16px;
    overflow: hidden;
    background: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    opacity: 0.95;                      /* discreto mientras se juega */
    animation: pitchRailIn 0.5s ease-out 0.5s backwards;
    transition: opacity 0.3s ease, transform 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Franja superior 50/50 morado-verde: el mismo corte que el SVG del logo. */
.pitch-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--primary-color) 0 50%,
        var(--secondary-color) 50% 100%);
}

.pitch-card:hover,
.pitch-card:focus-within {
    opacity: 1;
    transform: translateY(-3px);
    border-color: var(--pitch-edge-hover);
    box-shadow: var(--pitch-lift);
}

@keyframes pitchRailIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 0.95; transform: translateY(0); }
}

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

.pitch-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pitch-chip-bg);
    color: var(--primary-color);
    font-size: 0.68rem;                 /* igual que .victory-kicker */
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* En un raíl de 196-268px el rótulo cae siempre en dos líneas: con el radio
   de píldora (999px) las dos líneas se leían como una mancha. Rectángulo
   redondeado, que aguanta igual de bien una línea que dos. Solo en la
   tarjeta: los rótulos de patrocinio.html son de una línea y siguen igual. */
.pitch-card .pitch-kicker { border-radius: 10px; }

.pitch-kicker i { font-size: 0.7rem; }

.pitch-dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary-color);
    animation: pitchBreath 3.2s ease-in-out infinite;
}

.pitch-dot--static {
    background: var(--primary-color);
    animation: none;
}

@keyframes pitchBreath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.pitch-title {
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pitch-claim {
    margin: 0;
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Los datos de la oferta. Antes eran cuatro píldoras de dos líneas
   (dato arriba, etiqueta abajo) y en un raíl de 200px salían ocho líneas
   sueltas. Ahora cada dato es UNA frase que se lee de corrido, con el
   número en negrita para que siga saltando a la vista.
   -------------------------------------------------------------------------- */

.pitch-facts {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pitch-facts li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    color: var(--text-light);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
}

.pitch-facts i {
    margin-top: 0.22em;
    color: var(--pitch-yes);
    font-size: 0.72rem;
}

.pitch-facts strong {
    color: var(--text-color);
    font-weight: 800;
    font-variant-numeric: tabular-nums;   /* igual que .daily-solvers-line strong */
    font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   Llamada a la acción y pie
   -------------------------------------------------------------------------- */

.pitch-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 11px 13px;
    border-radius: var(--button-radius);
    background: var(--primary-color);
    color: var(--pitch-cta-fg);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: filter 0.25s ease;
}

/* Ya no se estira el enlace sobre toda la tarjeta: el correo del pie
   también es un enlace y un ::after por encima lo dejaría sin pulsar. */

/* En la variante "hueco vendido" la tarjeta entera es un <a>: ahí el CTA
   es solo texto. */
.pitch-cta--inline {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--primary-color);
    justify-content: flex-start;
}

.pitch-card:hover .pitch-cta { filter: brightness(1.06); }

.pitch-cta i { font-size: 0.74rem; transition: transform 0.25s ease; }
.pitch-card:hover .pitch-cta i { transform: translateX(3px); }

/* El proyecto no define hoy ningún :focus-visible: aquí sí, y bien visible.
   .pitch-card--taken es el nombre del hueco VENDIDO (el bloque comentado del
   <template> de index.html). Nunca .pitch-card--sponsored: una clase con
   "sponsor" dentro es justo lo que buscan las listas cosméticas de los
   bloqueadores, y esa tarjeta es la que se cobra. */
.pitch-cta:focus-visible,
.pitch-mail:focus-visible,
.pitch-card--taken:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.pitch-foot {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
}

.pitch-foot i { margin-top: 0.2em; color: var(--primary-color); font-size: 0.72rem; }

.pitch-foot-text { min-width: 0; }

/* La dirección, entera y pulsable. word-break porque en un raíl de 196px
   no cabe en una línea y sin esto se saldría de la tarjeta. */
.pitch-mail {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.pitch-mail:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   La misma tarjeta, dentro del flujo. Solo cambia la escala: aquí hay
   580px de ancho en vez de 200px, así que el texto crece y los datos se
   reparten en dos columnas en cuanto caben.
   -------------------------------------------------------------------------- */

.pitch-flow .pitch-card {
    gap: 14px;
    padding: 22px 20px 18px;
    /* En el flujo la tarjeta no compite con la partida: no hace falta
       atenuarla ni hacerla entrar con retardo. */
    opacity: 1;
    animation: none;
}

.pitch-flow .pitch-card:hover { transform: none; }

.pitch-flow .pitch-title { font-size: 1.22rem; }
.pitch-flow .pitch-claim { font-size: 0.9rem; }
.pitch-flow .pitch-facts { gap: 9px; }
.pitch-flow .pitch-facts li { font-size: 0.84rem; }
.pitch-flow .pitch-facts i { font-size: 0.78rem; }
.pitch-flow .pitch-cta { margin-top: 4px; padding: 13px 18px; font-size: 0.9rem; }
.pitch-flow .pitch-foot { font-size: 0.78rem; padding-top: 12px; }

/* Ancho de tablet: dos columnas de datos y el botón a su medida.
   560px de ventana = ~520px de tarjeta = dos columnas de 250px. */
@media (min-width: 560px) {
    .pitch-flow .pitch-card { padding: 26px 24px 20px; }
    .pitch-flow .pitch-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 22px;
    }
    .pitch-flow .pitch-cta {
        align-self: flex-start;
        padding: 13px 26px;
    }
}

/* ==========================================================================
   2. PÁGINA DE DESTINO — static/patrocinio.html
   Mismo prefijo .pitch-* por el mismo motivo (bloqueadores).
   ========================================================================== */

/* .container topa en --page-shell-width (620px) y dejaría muerto el
   max-width de 820px de la columna. Se amplía SOLO en patrocinio.html:
   el atributo data-pitch-page no existe en index.html. */
html[data-pitch-page] .container {
    width: min(100%, 860px);
}

/* El pie no tiene color de enlace en style.css: los <a> salen con el azul
   por defecto del navegador (#0000EE), que sobre el fondo #121212 del tema
   oscuro da 1,5:1 y no se lee. Se corrige SOLO en esta página
   (html[data-pitch-page]) para no pisarle la regla a quien arregle el mismo
   fallo en index.html, privacy.html y terms.html, donde también pasa. */
html[data-pitch-page] .footer-links a {
    color: var(--primary-color);
}

.pitch-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 4px 20px;
    color: var(--text-color);
}

.pitch-lang { display: none; }

/* El idioma se decide antes del primer pintado: patrocinio.html carga este
   CSS y luego js/patrocinio.js en el <head>, que escribe data-pitch-lang en
   <html>. Sin JS se ve el español, que es el idioma por defecto del sitio. */
html:not([data-pitch-lang]) .pitch-lang[data-lang-panel="es"] { display: block; }
html[data-pitch-lang="es"] .pitch-lang[data-lang-panel="es"],
html[data-pitch-lang="en"] .pitch-lang[data-lang-panel="en"],
html[data-pitch-lang="fr"] .pitch-lang[data-lang-panel="fr"] { display: block; }

.pitch-page h1 {
    margin: 14px 0 10px;
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

.pitch-page h2 {
    margin: 34px 0 12px;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.pitch-page h3 { margin: 0 0 6px; font-size: 1rem; }
.pitch-page p { margin-bottom: 1em; line-height: 1.65; }
.pitch-page ul,
.pitch-page ol { margin: 0 0 1em 1.3em; }
.pitch-page li { margin-bottom: 0.5em; line-height: 1.6; }
.pitch-page a { color: var(--primary-color); }

.pitch-lead { color: var(--text-light); font-size: 1.02rem; }

/* MEDIDA DE LECTURA. La columna mide 820px y el texto corrido llegaba a
   110-120 caracteres por línea (a 834px de ventana, además, pegado a los
   bordes). Se capa el texto en ~66 caracteres y se dejan a ancho completo
   las piezas que sí lo necesitan (rejilla, tarjeta del correo). */
.pitch-lang > p,
.pitch-lang > ul:not(.pitch-resumen),
.pitch-lang > ol,
.pitch-lang > dl {
    /* Montserrat tiene la cifra "0" muy ancha, así que 1ch vale ~11px:
       54ch salen ~595px, es decir 72-75 caracteres por línea, que es la
       medida cómoda. Medido en las capturas, no calculado a ojo. */
    max-width: 54ch;
}

/* Volver atrás: discreto arriba, sin peso visual; el de abajo cierra la
   página. Ambos con el mismo lenguaje minimalista. */
.pitch-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-light) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.pitch-back i { font-size: 0.74rem; transition: transform 0.25s ease; }

.pitch-back:hover {
    color: var(--primary-color) !important;
    border-color: var(--pitch-edge-hover);
}

.pitch-back:hover i { transform: translateX(-3px); }

.pitch-back:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* display:flex (no inline-flex) para que ocupe su propia línea: el kicker
   que va justo después es inline-flex y si no se le sentaría al lado. */
.pitch-back--top,
.pitch-back--bottom {
    display: flex;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
}

.pitch-back--top { margin-bottom: 20px; }
.pitch-back--bottom { margin-top: 34px; }

/* Resumen de la oferta, justo bajo el titular. Es la misma lista de datos
   que muestra el anuncio en el juego (.pitch-facts), dentro de una tarjeta.
   .pitch-page ul (0,1,1) le ganaría el margin-left de 1.3em y dejaría la
   tarjeta indentada respecto al texto: por eso va con .pitch-page delante. */
.pitch-page .pitch-resumen {
    /* Misma medida de lectura que el resto de la columna: a 820px el dato
       quedaba a la izquierda y el resto de la frase a 600px de distancia. */
    max-width: 560px;
    margin: 0 0 24px;
    padding: 16px 18px;
    gap: 11px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.pitch-page .pitch-resumen li {
    margin: 0;
    grid-template-columns: 17px minmax(0, 1fr);
    font-size: 0.92rem;
    line-height: 1.5;
}

.pitch-page .pitch-resumen i { font-size: 0.84rem; margin-top: 0.28em; }

/* Tarjeta del correo: el corazón de la página */
.pitch-mail-card {
    margin: 26px 0;
    padding: 26px 22px;
    text-align: center;
    background: var(--card-background);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.pitch-mail-card .pitch-kicker { align-self: center; }

.pitch-mail-address {
    display: inline-block;
    margin: 10px 0 18px;
    color: var(--text-color) !important;
    font-size: 1.35rem;
    font-weight: 800;
    word-break: break-word;
    text-decoration: none;
}

.pitch-mail-address:hover { text-decoration: underline; }

.pitch-mail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.pitch-button {
    display: inline-flex;
    align-items: center;
    /* style.css:652 da `flex: 1` a TODO <button>. "Copiar correo" (un
       <button>) crecía hasta 419px mientras el botón principal, que es un
       <a>, se quedaba en 335px: la acción secundaria pesaba más que la
       principal. Los dos vuelven a medir lo que mide su texto. */
    flex: 0 0 auto;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid var(--primary-color);
    border-radius: var(--button-radius);
    background: var(--primary-color);
    color: var(--pitch-cta-fg) !important;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.pitch-button--ghost {
    background: transparent;
    color: var(--primary-color) !important;
}

.pitch-button:hover { filter: brightness(1.06); transform: translateY(-2px); }

.pitch-button:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.pitch-note { margin-top: 14px; color: var(--text-light); font-size: 0.8rem; }

.pitch-faq dt { margin-top: 14px; font-weight: 700; }
.pitch-faq dd { margin: 4px 0 0; color: var(--text-light); line-height: 1.6; }

@media (max-width: 700px) {
    .pitch-page h1 { font-size: 1.6rem; }
    .pitch-page h2 { font-size: 1.12rem; margin-top: 28px; }
    .pitch-mail-card { padding: 22px 16px; }
    .pitch-mail-address { font-size: 1.02rem; }
    .pitch-mail-actions { flex-direction: column; }
    .pitch-button { justify-content: center; }
    .pitch-page .pitch-resumen li { font-size: 0.86rem; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pitch-card,
    .pitch-cta,
    .pitch-cta i,
    .pitch-back,
    .pitch-back i,
    .pitch-button {
        animation: none !important;
        transition: none !important;
    }
    .pitch-card { opacity: 1; }
    .pitch-card:hover { transform: none; }
    .pitch-card:hover .pitch-cta i { transform: none; }
    .pitch-back:hover i { transform: none; }
    .pitch-button:hover { transform: none; }
    .pitch-dot { animation: none; }
}
