/*
  Sitio público de VendeTuSticker — página "próximamente".

  Paleta e identidad tomadas de la referencia visual de output/premia-rifas-reference, que ya usa los colores
  públicos oficiales de la marca. Ojo: son los del logotipo y del sitio público, NO los del panel administrativo
  (Admin.Web usa variantes más oscuras de menta y violeta para ser legibles sobre blanco). No mezclar los dos
  juegos: el panel es contenido claro + sidebar oscuro; el sitio público es oscuro y editorial.

  Sin Bootstrap ni jQuery a propósito: es una sola pantalla y arrastrar el framework completo por un formulario
  de cuatro campos solo agregaría peso y estilos que habría que sobrescribir. wwwroot/lib sigue en el proyecto
  pero ninguna vista lo carga.
*/
:root {
    --ink: #111318;
    /* Un escalón más profundo que --ink, para las franjas que tienen que separarse del fondo oscuro sin cambiar
       de familia (la lista de espera y la sección "cómo funciona" de la landing ya lo usaban a mano). */
    --deep: #0c0e13;
    --paper: #f4f3ef;
    --cyan: #62f2df;
    --violet: #8057ff;
    --orange: #ff7043;
    /* Rojo de marca, MEDIDO decodificando `public-payment-error.png` del pack público v2 (seis muestras, todas
       idénticas), no estimado a ojo. Hasta ahora la paleta escrita no tenía ningún rojo mientras el pack gráfico
       sí, así que quien componía una pantalla de fallo se quedaba con naranja —que en este sistema ya significa
       "cierra pronto"— y terminaba peleándole a su propia ilustración. La separación es:
       rosa = no se pudo / naranja = se está acabando el tiempo. */
    --rose: #e45b73;
    --line: #1113181f;
    --font-geist: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-geist);
    margin: 0;
    overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- Navegación */
.nav {
    z-index: 50;
    color: #fff;
    /* Degradado y no un color plano porque debajo hay un encabezado oscuro a sangre: así la barra no se recorta
       contra él. El estado con fondo propio (abajo) también es un degradado, de dos paradas iguales, para que la
       transición interpole — de un gradient a un color plano el navegador salta de golpe. */
    background: linear-gradient(#06070acc, #0000);
    border-bottom: 1px solid #0000;
    transition: background .22s, backdrop-filter .22s, border-color .22s;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 82px;
    padding: 0 5vw;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
}

/* object-fit: contain y width auto por regla del pack de marca: el logotipo no se recorta ni se estira.
   La altura parece exagerada porque el PNG del pack v2 tiene ~56% de alto en aire transparente (contenido real
   680x178 dentro de un lienzo de 1400x400): a 40px el lockup visible mediría 18px. A 62px se ve a ~28px, que es
   el tamaño real buscado. Medido, no estimado — si el pack cambia, volver a medir antes de tocar este número. */
.nav-logo { height: 62px; width: auto; object-fit: contain; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-badge {
    font: 700 10px/1 var(--font-mono);
    letter-spacing: 2px;
    color: var(--cyan);
    background: #ffffff0f;
    border: 1px solid #ffffff40;
    border-radius: 999px;
    padding: 9px 14px;
}

/* Única acción del nav mientras el menú no exista. Menta sobre el degradado oscuro de la barra, igual que el CTA
   de la landing: es la misma acción y tiene que verse como la misma. */
.nav-cta {
    background: var(--cyan);
    color: #0d1414;
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s;
}

.nav-cta:hover { transform: translateY(-2px); }

/* Acceso al panel: EXACTAMENTE el mismo tratamiento que .nav-links a —mismo tamano, mismo gris, mismo subrayado
   cian al pasar— y no un estilo propio. La primera version invento uno (14px, otro gris, padding propio) y se veia
   fuera de lugar justamente por eso: no era ninguno de los dos estilos que la barra ya tiene.

   Sigue sin fondo ni borde, que es lo que lo mantiene por debajo de .nav-cta: el boton que queremos que se
   apriete es "Publica tu campana", y dos botones a la par hacen que no se apriete ninguno. */
.nav-signin {
    color: #ffffffc4; font-size: 13.5px; white-space: nowrap;
    padding-bottom: 3px; border-bottom: 1.5px solid transparent;
    transition: color .18s, border-color .18s;
}
.nav-signin:hover { color: #fff; border-bottom-color: var(--cyan); }

@media (width <= 900px) {
    /* En el telefono la barra ya se pelea el ancho entre el logo, el CTA y el boton de menu. El acceso sigue
       disponible en el pie, que por eso lleva su propia columna. */
    .nav-signin { display: none; }
}

/* La barra nace transparente porque toda página empieza con un encabezado oscuro. Apenas se scrollea queda sobre
   papel claro y el texto blanco deja de leerse, así que al primer scroll toma fondo propio. Lo marca site.js; sin
   JavaScript se queda con el degradado, que es exactamente el estado anterior — no empeora nada.

   El menú abierto fuerza el mismo estado: la tarjeta que cuelga necesita una barra sólida arriba, o se ve flotando
   sobre el contenido a medias. */
.nav[data-scrolled],
.nav:has(.nav-links[data-open]) {
    background: linear-gradient(#0a0b10f2, #0a0b10f2);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: #ffffff1a;
}

/* Botón del menú móvil. Solo existe bajo 700px y solo cuando site.js le quitó el atributo hidden — de ahí el
   :not([hidden]): una regla display suelta lo mostraría igual, porque el [hidden] del navegador tiene la misma
   especificidad y pierde por venir antes. */
.nav-toggle { display: none; }

.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    width: 17px; height: 1.8px; border-radius: 2px; background: currentColor;
    transition: transform .2s, background .2s;
}

.nav-toggle__bars { position: relative; display: block; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; display: block; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Abierto, las tres barras se vuelven una X: es la misma cosa en dos estados, y un ícono que no cambia deja sin
   señal de que lo que se ve abajo salió de este botón. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: #0000; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (width <= 700px) {
    /* En un teléfono el badge y el botón juntos empujan el logo: gana la acción, que es la que lleva a algún lado. */
    .nav-badge { display: none; }
    .nav-cta { padding: 10px 14px; font-size: 12px; }

    /* Acá el <img> es el símbolo (ver el <picture> del layout): 626x379 de dibujo en un lienzo de 1024x683.
       A 50px el ticket quedaba tan chico que los tres destellos violetas de su izquierda se leían como una
       mancha; a 58px se reconoce, y sigue ocupando 96px de barra contra los 217px del lockup horizontal. */
    .nav-logo { height: 58px; }

    .nav-toggle:not([hidden]) {
        display: grid; place-items: center;
        width: 42px; height: 42px; padding: 0; flex: none;
        border: 1px solid #ffffff33; border-radius: 13px;
        background: #ffffff0f; color: #fff; cursor: pointer;
        transition: background .18s, border-color .18s;
    }

    /* Abierto se ve encendido: es lo que ata visualmente la tarjeta de abajo con el botón que la abrió. */
    .nav-toggle[aria-expanded="true"] { background: #ffffff1f; border-color: #ffffff5c; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none; }
    .nav-toggle:not([hidden]) { transition: none; }
    .nav-links[data-open] { animation: none; }
    .nav-links a, .nav-links a::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta:hover { transform: none; }
}

/* ---------------------------------------------------------------- Hero */
.hero {
    color: #fff;
    align-items: center;
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

.hero-media {
    background: url(../assets/images/hero-crowd.jpg) 50% / cover;
    animation: 18s ease-out infinite alternate heroZoom;
    position: absolute;
    inset: -5%;
    transform: scale(1.04);
}

@keyframes heroZoom { to { transform: scale(1.12); } }

.hero-overlay {
    background: linear-gradient(90deg, #07080cf5 0%, #07080cc7 48%, #07080c3d 80%), linear-gradient(#0000 55%, #07080cdb);
    position: absolute;
    inset: 0;
}

.hero-noise {
    opacity: .18;
    background-image: radial-gradient(#ffffff38 .5px, #0000 .5px);
    background-size: 5px 5px;
    position: absolute;
    inset: 0;
}

.hero-content {
    z-index: 2;
    width: min(760px, 88vw);
    margin-left: 8vw;
    padding-top: 70px;
    position: relative;
}

.eyebrow, .kicker {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 2px;
}

.eyebrow {
    background: #ffffff0f;
    border: 1px solid #ffffff40;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    display: inline-flex;
}

.live-dot {
    background: var(--cyan);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 12px var(--cyan);
    border-radius: 50%;
}

.hero h1 {
    letter-spacing: -6px;
    margin: 25px 0 22px;
    font-size: clamp(54px, 7vw, 105px);
    font-weight: 790;
    line-height: .88;
}

h1 em, h2 em { color: var(--cyan); font-style: normal; font-weight: 450; }

.hero-content > p { color: #ffffffb8; max-width: 600px; font-size: 17px; line-height: 1.65; }

.hero-actions { gap: 12px; margin: 34px 0; display: flex; }

.button {
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700;
    transition: transform .2s, background .2s;
    display: inline-flex;
}

.button:hover { transform: translateY(-2px); }
.primary { background: var(--cyan); color: #0d1414; box-shadow: 0 12px 35px #62f2df29; }
.ghost { color: #fff; backdrop-filter: blur(10px); background: #ffffff0f; border: 1px solid #ffffff4d; }
.large { min-height: 58px; padding: 0 31px; }

/* El mockup original traía acá una tarjeta de ticket con código y código de barras, más una fila de métricas
   ("+24K participantes"). Ambas cosas se sacaron: esta es una página de "próximamente", y mostrar un ticket
   emitido —inventado o no— promete un producto que todavía no existe. En su lugar, las dos rutas de lectura:
   quien compra y quien crea. */
.hero-paths { display: flex; flex-wrap: wrap; gap: 12px 28px; }

.hero-paths a {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #ffffff40;
    padding-bottom: 6px;
    transition: color .2s, border-color .2s;
}

.hero-paths a span { color: var(--cyan); margin-left: 10px; display: inline-block; transition: transform .2s; }
.hero-paths a:hover { color: var(--cyan); border-color: var(--cyan); }
.hero-paths a:hover span { transform: translateX(4px); }

/* Personaje de marca (símbolo maestro v2: ticket horizontal que guiña). Sin filtros de color ni rotación: el
   pack prohíbe redibujarlo, recortarlo, estirarlo, inclinarlo o recolorearlo — la inclinación ya viene en el
   render. El símbolo también trae ~39% de aire transparente, de ahí el ancho generoso. */
.hero-mascot {
    z-index: 3;
    width: clamp(220px, 26vw, 400px);
    height: auto;
    object-fit: contain;
    position: absolute;
    bottom: 16vh;
    right: 6vw;
    filter: drop-shadow(0 0 60px #62f2df2e);
    animation: mascotFloat 6s ease-in-out infinite alternate;
}

@keyframes mascotFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-14px); }
}

.scroll-cue {
    z-index: 4;
    font: 9px var(--font-mono);
    letter-spacing: 3px;
    writing-mode: vertical-rl;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    display: flex;
    position: absolute;
    bottom: 45px;
    right: 4vw;
    color: #fff;
}

.scroll-cue i { background: linear-gradient(#fff, #0000); width: 1px; height: 45px; }

/* ---------------------------------------------------------------- Cómo funciona */
.steps { background: var(--paper); padding: 130px 8vw 145px; }

.section-heading { max-width: 670px; margin-bottom: 65px; position: relative; }
.kicker { color: #6d6e72; }

.section-heading h2 {
    letter-spacing: -4px;
    margin: 18px 0;
    font-size: clamp(43px, 5.3vw, 77px);
    line-height: .98;
}

.section-heading h2 em { color: var(--violet); }
.section-heading > p { color: #696b70; max-width: 520px; line-height: 1.6; }

.steps .section-heading:after {
    content: "";
    background: var(--cyan);
    width: 90px;
    height: 2px;
    position: absolute;
    bottom: 27px;
    right: -160px;
    transform: rotate(-22deg);
}

.steps-grid {
    background: var(--line);
    border: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    display: grid;
}

.step-card { background: var(--paper); min-height: 330px; padding: 42px 38px 46px; position: relative; }
.step-icon { border-radius: 18px; place-items: center; width: 64px; height: 64px; margin-bottom: 55px; font-size: 24px; display: grid; }
.icon-1 { background: #d8fff7; }
.icon-2 { background: #e7ddff; }
.icon-3 { background: #ffe4da; }
.step-number { font: 700 11px var(--font-mono); color: #aaa; position: absolute; top: 23px; right: 25px; }
.step-card h3 { letter-spacing: -.5px; margin: 0 0 14px; font-size: 23px; }
.step-card p { color: #717278; max-width: 270px; font-size: 14px; line-height: 1.65; }
.step-arrow { z-index: 2; color: #fff; background: #111; border-radius: 50%; place-items: center; width: 36px; height: 36px; display: grid; position: absolute; top: 48%; right: -18px; }
.steps-note { color: #717278; font-size: 13px; line-height: 1.7; max-width: 640px; margin: 34px 0 0; }

/* ---------------------------------------------------------------- Para creadores */
/* Dos columnas (foto + texto) frente a la grilla de tarjetas del bloque de compradores: son dos públicos
   distintos y el cambio de tratamiento visual es lo que hace obvio que la explicación cambió de destinatario. */
.creator-section { background: #ecebe6; grid-template-columns: 1fr 1fr; min-height: 720px; display: grid; }
.creator-image { min-height: 640px; position: relative; overflow: hidden; }
.creator-photo { background: url(../assets/images/creator-vr.jpg) 50% / cover; position: absolute; inset: 0; }
.creator-photo:after { content: ""; background: linear-gradient(#0000 50%, #0c0d107a); position: absolute; inset: 0; }

.creator-badge {
    background: var(--cyan);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 128px;
    height: 128px;
    font-size: 22px;
    display: flex;
    position: absolute;
    top: 9%;
    right: 6%;
    transform: rotate(8deg);
}

.creator-badge span { font: 8px/1.4 var(--font-mono); letter-spacing: 1px; }
.creator-badge b { font-size: 10px; }

.creator-copy { align-self: center; padding: 100px 8vw 90px 7vw; }
.creator-copy h2 { letter-spacing: -4px; margin: 18px 0; font-size: clamp(40px, 4.6vw, 66px); line-height: .98; }
.creator-copy h2 em { color: var(--violet); }
.creator-copy > p { color: #65676b; max-width: 500px; line-height: 1.65; }
.creator-copy ul { margin: 32px 0; padding: 0; list-style: none; }
.creator-copy li { border-top: 1px solid var(--line); gap: 15px; padding: 15px 0; display: flex; }
.creator-copy li > span { background: #d8fff7; border-radius: 50%; place-items: center; width: 27px; height: 27px; font-size: 12px; display: grid; flex: none; }
.creator-copy li b { font-size: 13px; display: block; }
.creator-copy li small { color: #74767b; margin-top: 5px; line-height: 1.4; display: block; }
.creator-note { color: #74767b; font-size: 12px; line-height: 1.6; max-width: 460px; margin: 0 0 26px; }
.dark-button { color: #fff; background: #111; }
.dark-button span { color: var(--cyan); }

/* ---------------------------------------------------------------- Lista de espera */
.waitlist { color: #fff; background: #0c0e13; padding: 130px 8vw 140px; position: relative; overflow: hidden; }

.waitlist-bg {
    background: radial-gradient(circle at 80% 20%, #8057ff21, #0000 28%), radial-gradient(circle at 20% 80%, #62f2df14, #0000 25%);
    position: absolute;
    inset: 0;
}

.waitlist-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.waitlist .kicker { color: var(--cyan); }
.waitlist h2 { letter-spacing: -4px; margin: 18px 0; font-size: clamp(40px, 4.6vw, 66px); line-height: .98; }
.waitlist h2 em { color: #fff; font-weight: 300; }
.waitlist-copy > p { color: #8e919a; max-width: 460px; line-height: 1.65; }

.waitlist-points { margin: 32px 0 0; padding: 0; list-style: none; }
.waitlist-points li { border-top: 1px solid #ffffff17; gap: 15px; padding: 15px 0; display: flex; }
.waitlist-points li > span { background: #62f2df1f; color: var(--cyan); border-radius: 50%; place-items: center; width: 27px; height: 27px; font-size: 12px; display: grid; flex: none; }
.waitlist-points b { font-size: 13px; display: block; }
.waitlist-points small { color: #8e919a; margin-top: 5px; line-height: 1.4; display: block; }

/* Formulario */
.form-card { background: #171a21; border: 1px solid #ffffff17; border-radius: 22px; padding: 38px; }
.form-card h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -1px; }
.form-card > p { color: #8e919a; font-size: 13px; margin: 0 0 26px; line-height: 1.6; }
.field { margin-bottom: 18px; }
.field > label { font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: #9ea1a7; margin-bottom: 8px; display: block; }

.field input[type=text],
.field input[type=email],
.field select {
    background: #0f1116;
    color: #fff;
    border: 1px solid #ffffff26;
    border-radius: 11px;
    outline: none;
    width: 100%;
    padding: 13px 14px;
    transition: border-color .2s;
}

.field input::placeholder { color: #5d616b; }
.field input:focus, .field select:focus { border-color: var(--cyan); }
.field select option { background: #0f1116; }

/* Toggle participante/creador: dos radios reales (accesibles, sin JS obligatorio) con la etiqueta como botón. */
.kind-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.kind-toggle label {
    cursor: pointer;
    border: 1px solid #ffffff26;
    border-radius: 13px;
    padding: 14px;
    text-align: center;
    transition: border-color .2s, background .2s;
}

.kind-toggle label b { display: block; font-size: 14px; }
.kind-toggle label small { color: #8e919a; font-size: 11px; }
.kind-toggle input:checked + label { border-color: var(--cyan); background: #62f2df14; }
.kind-toggle input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Bloque de creador: oculto por defecto y revelado por site.js. Sin JS queda visible (no hay regla que lo tape
   hasta que el script marca [hidden]), que es la degradación correcta: mejor mostrar de más que impedir enviar. */
.creator-fields[hidden] { display: none; }

.consent { display: flex; gap: 10px; align-items: flex-start; color: #8e919a; font-size: 12px; line-height: 1.5; margin: 4px 0 22px; }
.consent input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--cyan); }

.form-card .button { width: 100%; }

/* El tag helper asp-validation-for agrega sus propias clases y deja el span aunque no haya error: :empty evita
   que un span vacío siga aportando margen bajo cada campo. */
.field-error, .field-validation-error { color: #ff9a8f; font-size: 12px; margin-top: 6px; display: block; }
.field-error:empty { display: none; }

.form-errors {
    background: #ff524d1a;
    border: 1px solid #ff524d59;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
    color: #ffb3ad;
    font-size: 13px;
}

.form-errors ul { margin: 0; padding-left: 18px; }

.form-success { text-align: center; padding: 22px 0 6px; }
.form-success .check { background: #62f2df1f; color: var(--cyan); border-radius: 50%; width: 62px; height: 62px; font-size: 27px; display: grid; place-items: center; margin: 0 auto 22px; }
.form-success h3 { margin: 0 0 10px; font-size: 25px; letter-spacing: -1px; }
.form-success p { color: #8e919a; font-size: 13px; line-height: 1.6; margin: 0 0 6px; }
.form-success b { color: #fff; }
/* Separado por una línea: es un ofrecimiento aparte, no parte de la confirmación. */
.form-follow { margin-top: 26px; padding-top: 22px; border-top: 1px solid #ffffff17; }
.form-follow p { margin: 0 0 14px; }

.turnstile-slot { margin: 4px 0 20px; display: flex; justify-content: center; }

/* ---------------------------------------------------------------- Pie */
footer { color: #fff; background: #090b0f; padding: 60px 8vw 25px; }
/* Grilla y no flex con wrap: con cinco bloques (marca + cuatro columnas) el reparto por espacio libre deja
   filas desparejas según cuánto mida cada lista, que es como el pie terminó viéndose desordenado. Con columnas
   declaradas, la marca manda y las cuatro listas quedan alineadas entre sí pase lo que pase con su largo. */
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, max-content);
    justify-content: space-between;
    align-items: start;
    gap: 40px;
    padding-bottom: 45px;
}

.footer-brand { max-width: 260px; }

/* Los tres cortes van juntos y en este orden: en CSS gana la última regla que aplique, así que el orden del
   archivo ES el comportamiento. Antes el corte de dos columnas vivía en la media query de 580 y dejaba un hueco
   entre 580 y 700 donde el pie volvía a cinco columnas apretadas. */
@media (width <= 900px) {
    .footer-main { grid-template-columns: 1fr repeat(2, max-content); gap: 32px; }
}

@media (width <= 700px) {
    /* Dos columnas: cuatro listas apiladas en una sola serían un pie de pantalla y media. La marca ocupa el
       ancho completo arriba, que es donde se espera. */
    .footer-main { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
}
/* Mismo aire transparente que .nav-logo: 66px de caja ≈ 29px de lockup visible. */
.footer-logo { height: 66px; width: auto; object-fit: contain; margin: -8px 0 10px -10px; }
.footer-main p { color: #6f727a; font-size: 12px; line-height: 1.7; margin: 0; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links b { font: 700 9px var(--font-mono); letter-spacing: 2px; color: #6f727a; }
.footer-links a { color: #b8bac0; font-size: 12px; }
.footer-links a:hover { color: var(--cyan); }
.footer-bottom { color: #61646d; border-top: 1px solid #ffffff17; justify-content: space-between; padding-top: 23px; font-size: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.footer-bottom a { color: #8b8e96; }
.footer-bottom a:hover { color: var(--cyan); }

/* ---------------------------------------------------------------- Redes sociales de la marca
   Dos variantes del mismo partial (_SocialLinks.cshtml). El ícono hereda el color por currentColor, así que
   basta con pintar el <a>. Las áreas táctiles son de 36/44 px: el ícono en sí mide 17/20, pero un enlace del
   tamaño exacto del dibujo es imposible de apretar en un teléfono. */
.social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; transition: color .18s, background .18s, border-color .18s, transform .18s; }
.social svg { width: 100%; height: 100%; }

/* Pie: se lee como los demás enlaces de su columna, sin caja. */
.social--footer a { width: 36px; height: 36px; margin: -8px 0 -8px -8px; color: #b8bac0; }
.social--footer svg { width: 17px; height: 17px; }
.social--footer a:hover { color: var(--cyan); }

/* Confirmaciones: botones circulares centrados, mismo lenguaje que .cl-share__btn. */
.social--inline { justify-content: center; }
.social--inline a {
    width: 44px;
    height: 44px;
    color: #ffffffb5;
    background: #ffffff0f;
    border: 1px solid #ffffff2e;
    border-radius: 50%;
}
.social--inline svg { width: 20px; height: 20px; }
.social--inline a:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }

/* Superficies claras (el cierre de la landing de creadores). El acento acá es el violeta y no el menta: sobre
   --paper el menta a 20 px casi no contrasta, y es el mismo criterio que ya sigue .cl-price__card. */
.social--onlight { justify-content: center; }
.social--onlight a {
    width: 44px;
    height: 44px;
    color: #55575c;
    background: #fff;
    border: 1px solid #d9d6cd;
    border-radius: 50%;
}
.social--onlight svg { width: 20px; height: 20px; }
.social--onlight a:hover { color: var(--violet); border-color: var(--violet); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .social--inline a:hover,
    .social--onlight a:hover { transform: none; }
}

/* ---------------------------------------------------------------- Páginas simples (privacidad / error) */
.simple-page { max-width: 760px; margin: 0 auto; padding: 150px 24px 90px; }
.simple-page h1 { letter-spacing: -3px; font-size: clamp(38px, 5vw, 62px); margin: 0 0 24px; line-height: 1; }
.simple-page h2 { letter-spacing: -1px; font-size: 24px; margin: 44px 0 -6px; }
.simple-page p { color: #55575c; line-height: 1.7; }
.simple-page a { color: var(--violet); font-weight: 700; }

/* Las ilustraciones del pack v2 traen su PROPIO fondo oscuro, así que no pueden ir sueltas sobre la superficie
   clara —se verían como un rectángulo negro pegado—: van dentro de un contenedor con border-radius y overflow
   oculto, para que se lean como una tarjeta oscura intencional. Mismo criterio que el Dashboard del panel. */
.simple-page--illustrated { text-align: center; padding-top: 120px; }

.simple-page__art {
    width: min(460px, 100%);
    margin: 0 auto 32px;
    border-radius: 20px;
    overflow: hidden;
    background: #0b0d12;
    box-shadow: 0 24px 60px #11131826;
}

.simple-page__art img { width: 100%; height: auto; object-fit: contain; }

/* ------------------------------------------------- Documentos legales (/terminos, /privacidad)
   El cuerpo lo genera Services/RichText en la Api, que BAJA los títulos dos niveles: el `#` que escribe quien
   redacta el documento llega como <h3>, porque el <h1> de la página es el título del documento. De ahí que se
   estilen h3/h4 y no h1/h2 — si algún día cambia esa regla en RichText, hay que cambiar estos selectores. */
.legal-doc__meta { color: #82858c; font-size: 14px; margin: -12px 0 28px; }

.legal-doc__notice {
    border-left: 3px solid var(--violet);
    background: #8057ff0f;
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    margin: 0 0 28px;
}

/* Naranja y no violeta: acá el aviso significa "lo que estás leyendo puede no ser lo que rige", que es un
   problema y no una nota al pie. */
.legal-doc__notice--warn { border-left-color: var(--orange); background: #ff70430f; }

.legal-doc__body { margin-bottom: 40px; }
.legal-doc__body h3 { letter-spacing: -1px; font-size: 24px; margin: 44px 0 10px; }
.legal-doc__body h4 { font-size: 18px; margin: 32px 0 8px; }
.legal-doc__body p, .legal-doc__body li { color: #55575c; line-height: 1.7; }
.legal-doc__body ul, .legal-doc__body ol { padding-left: 22px; }
.legal-doc__body li { margin-bottom: 8px; }
.legal-doc__body a { color: var(--violet); font-weight: 700; }
.legal-doc__body strong { color: var(--ink); }

.legal-doc__body blockquote {
    margin: 24px 0;
    padding-left: 18px;
    border-left: 3px solid #d8d6d0;
    color: #82858c;
}

/* Las tablas de un documento legal (por ejemplo, qué dato se guarda y para qué) no pueden empujar la página
   fuera de la pantalla en un teléfono: scrollean adentro de su propio contenedor. */
.legal-doc__body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.legal-doc__body th, .legal-doc__body td { border-bottom: 1px solid #e3e1db; padding: 10px 12px; text-align: left; }
.legal-doc__body { overflow-x: auto; }

.legal-doc__history { list-style: none; padding: 0; }
.legal-doc__history li { padding: 10px 0; border-bottom: 1px solid #e3e1db; color: #82858c; font-size: 15px; }
.legal-doc__current { color: var(--violet); font-weight: 700; }

/* ---------------------------------------------------------------- Adaptación */
@media (width <= 980px) {
    .waitlist-inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (width <= 900px) {
    .nav { height: 70px; padding: 0 20px; }
    .hero-content { margin-left: 6vw; }
    .hero h1 { letter-spacing: -4px; }
    /* El texto del hero ya ocupa todo el ancho en tablet/móvil: la mascota quedaría encima de la última línea. */
    .hero-mascot { display: none; }
    .steps, .waitlist { padding: 95px 6vw; }
    .steps-grid { grid-template-columns: 1fr; }
    .step-card { min-height: 270px; }
    .step-arrow { display: none; }
    .steps .section-heading:after { display: none; }
    .creator-section { grid-template-columns: 1fr; }
    .creator-copy { padding: 80px 7vw; }
}

@media (width <= 580px) {
    .hero { min-height: 760px; }
    .hero-content { width: auto; margin: 0 24px; }
    .hero h1 { letter-spacing: -3px; font-size: 52px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-paths { flex-direction: column; gap: 14px; }
    .scroll-cue { display: none; }
    .section-heading h2, .creator-copy h2 { letter-spacing: -2.5px; font-size: 43px; }
    .steps, .waitlist { padding: 80px 20px; }
    .creator-image { min-height: 460px; }
    .creator-badge { width: 100px; height: 100px; }
    .creator-copy { padding: 70px 20px; }
    .form-card { padding: 28px 22px; }
    .kind-toggle { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-media, .hero-mascot { animation: none; }
    .button:hover { transform: none; }
}

/* ---------------------------------------------------------------- Consentimiento de cookies

   Barra inferior fija. Oscura como el nav y el pie, no como una tarjeta clara flotando sobre la portada: es un
   elemento de sistema, no contenido de la página.

   Los dos botones comparten tamaño, tipografía y posición a propósito — solo cambia el color de fondo. Rechazar
   tiene que costar lo mismo que aceptar, y un "Rechazar" en gris apagado al lado de un "Aceptar" en menta es
   justamente el patrón que vuelve inválido el consentimiento por no ser libre. No "mejorar" esto después.
*/
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 34px;
    flex-wrap: wrap;
    padding: 20px 5vw;
    color: #fff;
    background: #0c0e13f2;
    backdrop-filter: blur(12px);
    border-top: 1px solid #ffffff1f;
    box-shadow: 0 -18px 45px #06070a4d;
    animation: cookie-rise .35s ease-out;
}

/* El atributo hidden no basta: display:flex lo pisa. */
.cookie-banner[hidden] { display: none; }

@keyframes cookie-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.cookie-banner__text { flex: 1 1 420px; min-width: 0; }
.cookie-banner__text b { display: block; font: 700 9px var(--font-mono); letter-spacing: 2px; color: var(--cyan); margin-bottom: 8px; }
.cookie-banner__text p { color: #b8bac0; font-size: 13px; line-height: 1.65; margin: 0; max-width: 640px; }
.cookie-banner__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__text a:hover { color: var(--cyan); }

.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }

.cookie-button {
    cursor: pointer;
    border-radius: 999px;
    min-height: 44px;
    min-width: 132px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #ffffff14;
    border: 1px solid #ffffff4d;
    transition: transform .2s, background .2s;
}

.cookie-button:hover { transform: translateY(-2px); background: #ffffff24; }
.cookie-button--accept { color: #0d1414; background: var(--cyan); border-color: var(--cyan); }
.cookie-button--accept:hover { background: #7ff5e5; }

/* Botón que se lee como los demás enlaces del pie: reabre el banner para cambiar la elección. */
.footer-linklike {
    cursor: pointer;
    padding: 0;
    text-align: left;
    color: #b8bac0;
    font-size: 12px;
    background: none;
    border: 0;
}

.footer-linklike:hover { color: var(--cyan); }

@media (width <= 700px) {
    .cookie-banner { padding: 20px; gap: 16px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-button { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner { animation: none; }
    .cookie-button:hover { transform: none; }
}

/* ---------------------------------------------------------------- Contador de la lista de espera

   Prueba social en tres formas: el chip del hero (total, junto al CTA), el bloque o la separación por público
   en la sección de la lista, y la línea de la pantalla de éxito. Ninguna se dibuja si la Api no mandó el dato:
   el umbral se aplica allá, así que acá no hay ni un número escrito.

   Las tres usan tabular-nums porque son cifras que cambian entre visitas y no tienen por qué cambiar de ancho. */

.wl-chip {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 11px 17px 11px 14px; border: 1px solid #ffffff1f; border-radius: 999px;
    background: #ffffff08; color: #ffffffb0; font-size: 13px; line-height: 1.3;
}
.wl-chip b { color: var(--cyan); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-chip__dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan); flex: none;
}

/* Barra izquierda y degradado en vez de una caja cerrada: la sección ya es oscura y un recuadro
   completo competiría con la tarjeta del formulario que tiene al lado. */
.wl-block {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin: 30px 0 0; padding: 22px 26px;
    border: 1px solid #ffffff17; border-left: 3px solid var(--cyan);
    background: linear-gradient(90deg, #62f2df0f, transparent 70%);
}
.wl-block__n {
    font-size: clamp(38px, 5vw, 54px); line-height: 1; letter-spacing: -2.5px; font-weight: 500;
    color: var(--cyan); font-variant-numeric: tabular-nums;
}
.wl-block__kicker {
    display: block; margin-bottom: 7px; font: 700 10px/1 var(--font-mono);
    letter-spacing: 2px; text-transform: uppercase; color: var(--cyan);
}
.wl-block p { margin: 0; color: #ffffffb0; font-size: 14px; line-height: 1.5; }

/* El separador de 1px es el propio fondo de la grilla asomando entre las dos celdas. */
.wl-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin: 30px 0 0; background: #ffffff17; border: 1px solid #ffffff17;
}
.wl-split__side { background: #0c0e13; padding: 24px 26px; }
.wl-split__kicker {
    display: block; margin-bottom: 12px; font: 700 10px/1 var(--font-mono);
    letter-spacing: 2px; text-transform: uppercase;
}
.wl-split__n { font-size: 40px; line-height: 1; letter-spacing: -2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wl-split p { margin: 10px 0 0; color: #ffffffb0; font-size: 13.5px; line-height: 1.5; }
.wl-split__side--buyers .wl-split__kicker, .wl-split__side--buyers .wl-split__n { color: var(--cyan); }
/* Violeta y no menta: es el otro público, y el cambio de color es lo que hace evidente que cambió
   el destinatario — mismo criterio que la sección de creadores. */
.wl-split__side--makers .wl-split__kicker, .wl-split__side--makers .wl-split__n { color: var(--violet); }

.wl-inline {
    display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; justify-content: center;
    margin-top: 4px; padding-top: 18px; border-top: 1px solid #ffffff17;
    color: #ffffffb0; font-size: 13.5px;
}
.wl-inline b { color: var(--cyan); font-size: 26px; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }

@media (width <= 580px) {
    /* .hero-actions pasa a columna con align-items: stretch, y el chip se estiraría a todo el ancho
       como si fuera otro botón. */
    .wl-chip { align-self: flex-start; }
    .wl-split { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Landing de creadores (/creadores)

   Destino de los anuncios de Meta, con su propio layout (_LandingLayout) y sin navegación: cada salida
   alternativa es alguien que pagamos por traer y que no completó el formulario.

   Reusa a propósito el sistema que ya existe —.button, .field, .consent, .form-card, .form-errors, .kicker— en
   vez de definir una segunda identidad: es la misma marca, y una landing que se ve distinta del sitio al que
   lleva se lee como otra empresa. Lo único propio es la composición, porque el trabajo de esta página es otro:
   la portada explica a dos públicos, esta convierte a uno.

   Prefijo cl- (creator landing) para que ninguna regla de acá pueda alcanzar a la portada por accidente. */

/* Barra superior sin menú: solo identidad y la acción. */
.cl-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: var(--ink); color: #fff; padding: 10px 5vw;
}

/* Mismo aire transparente que .nav-logo: la caja parece exagerada porque el PNG del pack v2 tiene ~56% de
   alto vacío. A 62px el lockup visible mide ~28px. Medido, no estimado. */
.cl-nav__logo { height: 62px; width: auto; object-fit: contain; }

/* El logotipo es enlace al inicio desde el 2026-08-18 (ver _LandingLayout). Sin decoración: tiene que seguir
   leyéndose como el logotipo y no como un vínculo de texto — lo único que cambia es que ahora se puede apretar. */
.cl-nav__home { display: inline-flex; text-decoration: none; }

.cl-nav__cta {
    background: var(--cyan); color: #0d1414; border-radius: 999px;
    padding: 12px 20px; font-size: 13px; font-weight: 700; white-space: nowrap;
    transition: transform .2s;
}

.cl-nav__cta:hover { transform: translateY(-2px); }

/* Hero: copy a la izquierda, FORMULARIO a la derecha. Es la decisión que más mueve la conversión de tráfico
   pago — quien hizo clic en el anuncio ya recibió el argumento, y obligarlo a leerlo otra vez antes de poder
   actuar solo agrega oportunidades de abandonar. */
.cl-hero {
    position: relative; overflow: hidden;
    background: var(--ink); color: #fff;
    padding: 60px 5vw 76px;
    display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: start;
}

.cl-hero__glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(58% 60% at 88% 18%, #8057ff3d, #0000 60%),
        radial-gradient(50% 55% at 2% 96%, #62f2df1f, #0000 58%);
}

.cl-hero > *:not(.cl-hero__glow):not(.cl-hero__mascot) { position: relative; z-index: 1; }

/* El personaje de marca sin filtros ni rotación (el pack lo prohíbe): solo se atenúa, porque acá el
   protagonista es el formulario y no la mascota. */
.cl-hero__mascot {
    position: absolute; left: 34%; bottom: -70px; width: min(300px, 30vw);
    height: auto; object-fit: contain; opacity: .22; pointer-events: none;
}

.cl-hero .kicker { color: var(--cyan); }

.cl-hero h1 {
    margin: 16px 0;
    font-size: clamp(34px, 3.9vw, 52px); line-height: .98; letter-spacing: -2.5px;
    font-weight: 600; text-wrap: balance;
}

.cl-hero h1 em { font-weight: 300; }
.cl-hero__lead { margin: 0 0 26px; max-width: 44ch; color: #ffffffbc; font-size: 15.5px; line-height: 1.6; }

.cl-proof { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cl-proof li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #ffffffcc; }

.cl-proof i {
    background: #62f2df1f; color: var(--cyan); border-radius: 50%;
    width: 23px; height: 23px; display: grid; place-items: center;
    font-size: 10px; font-style: normal; flex: none; margin-top: 1px;
}

.cl-proof b { color: #fff; font-weight: 700; }

.cl-hero__note {
    margin: 24px 0 0; max-width: 42ch;
    font: 600 11.5px/1.6 var(--font-mono); letter-spacing: .3px; color: #ffffff8f;
}

/* Reusa .form-card: es la misma tarjeta del formulario de la portada, así que los campos, los errores y el
   botón heredan su estilo sin duplicar una línea. */
.cl-form { scroll-margin-top: 20px; }

.cl-form__proof {
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; justify-content: center;
    margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #ffffff17;
    color: #ffffffb0; font-size: 13px;
}

/* Violeta y no menta: es el conteo de CREADORES, y el sitio ya usa ese color para ese público. */
.cl-form__proof b { color: var(--violet); font-size: 24px; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }

/* Encabezado de sección, más compacto que el .section-heading de la portada: acá cada sección responde una
   objeción y no abre un capítulo. */
.cl-sec { max-width: 60ch; margin: 0 0 34px; }
.cl-sec h2 { margin: 14px 0 10px; font-size: clamp(26px, 2.7vw, 34px); line-height: 1.04; letter-spacing: -1.6px; font-weight: 700; }
.cl-sec p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* Los tres argumentos en TRES COLUMNAS y no en filas a ancho completo: mismo contenido, un tercio de la
   altura. Quien baja hasta acá busca que le respondan una objeción concreta, no leer un folleto. */
.cl-args { background: var(--paper); color: var(--ink); padding: 72px 5vw 78px; }
.cl-args .kicker { color: var(--violet); }
.cl-args .cl-sec p { color: #5f6169; }
.cl-args__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.cl-arg {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #d9d6cd; border-radius: 16px; padding: 26px;
}

.cl-arg__n { font: 700 10px/1 var(--font-mono); letter-spacing: 2px; color: var(--violet); }
.cl-arg h3 { margin: 12px 0 10px; font-size: 19px; line-height: 1.15; letter-spacing: -.6px; font-weight: 700; }
.cl-arg p { margin: 0 0 20px; color: #5f6169; font-size: 13.5px; line-height: 1.55; }

/* Cada tarjeta cierra con una miniatura oscura de lo que describe: el reparto, la pantalla de sorteo y el
   correo con los stickers. Es lo que convierte tres afirmaciones en tres cosas que se pueden ver. */
.cl-art { margin-top: auto; background: var(--deep); color: #fff; border-radius: 10px; padding: 16px; overflow: hidden; }

.cl-flow { display: grid; gap: 12px; }
.cl-flow__row { display: flex; align-items: center; gap: 10px; }
.cl-flow__node { flex: 1; border: 1px solid #ffffff1f; background: #ffffff08; border-radius: 7px; padding: 12px 13px; }
.cl-flow__node span { font: 700 8.5px/1.4 var(--font-mono); letter-spacing: 1.2px; color: #ffffff7a; display: block; }
.cl-flow__node b { display: block; font-size: 13px; margin-top: 3px; }
.cl-flow__node--you { border-color: var(--cyan); background: #62f2df14; }
.cl-flow__node--you b { color: var(--cyan); }
.cl-flow__node--fee { border-color: #8057ff5c; background: #8057ff12; }
.cl-flow__node--fee b { color: var(--violet); }
.cl-flow__arrow { color: #ffffff5c; font-size: 16px; flex: none; }

.cl-draw { text-align: center; padding: 6px 0 2px; }
.cl-draw__label { font: 700 8.5px/1 var(--font-mono); letter-spacing: 2px; color: var(--cyan); }

.cl-draw__code {
    margin: 15px 0 10px; padding: 15px 8px;
    font: 500 21px/1 var(--font-mono); letter-spacing: 1.5px; color: #fff;
    background: #ffffff0d; border: 1px dashed #ffffff2e; border-radius: 7px;
    font-variant-numeric: tabular-nums;
}

.cl-draw__who { font-size: 13px; color: #ffffffc4; }
.cl-draw__seal { margin-top: 13px; font: 600 9px/1.5 var(--font-mono); letter-spacing: 1px; color: var(--cyan); }

.cl-mail { border: 1px solid #ffffff1f; border-radius: 8px; overflow: hidden; }
.cl-mail__bar { background: #ffffff0f; padding: 9px 12px; font: 600 8.5px/1 var(--font-mono); letter-spacing: 1.2px; color: #ffffff85; }
.cl-mail__body { padding: 14px 13px; font-size: 12.5px; line-height: 1.5; color: #ffffffc4; }
.cl-mail__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.cl-mail__file {
    font: 600 9.5px/1 var(--font-mono); color: var(--cyan);
    border: 1px solid #62f2df3d; background: #62f2df12; border-radius: 5px; padding: 7px 8px;
}

/* Cómo funciona */
.cl-steps { background: var(--deep); color: #fff; padding: 72px 5vw 78px; }
.cl-steps .kicker { color: var(--cyan); }
.cl-steps .cl-sec p { color: #9498a1; }

.cl-steps__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: #ffffff17; border: 1px solid #ffffff17; border-radius: 14px; overflow: hidden;
}

.cl-step { background: var(--deep); padding: 26px 24px 30px; }
.cl-step b { display: block; font: 700 10px/1 var(--font-mono); letter-spacing: 2px; color: var(--cyan); margin-bottom: 16px; }
.cl-step h3 { margin: 0 0 9px; font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.cl-step p { margin: 0; font-size: 13px; line-height: 1.55; color: #9498a1; }

/* El precio tranquiliza, no convence: una franja de una línea por punto y no media pantalla. */
.cl-price { background: var(--paper); color: var(--ink); padding: 0 5vw 78px; }

.cl-price__card {
    margin: -34px 0 0; padding: 24px 28px; list-style: none;
    background: #fff; border: 1px solid #d9d6cd; border-left: 3px solid var(--violet); border-radius: 14px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    position: relative; z-index: 1;
}

.cl-price__card li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.45; }
.cl-price__card li > span { color: var(--violet); font-weight: 700; flex: none; }
.cl-price__card b { display: block; }
.cl-price__card small { color: #6f717a; font-size: 12.5px; }

/* Cierre de la landing: va dentro de la franja clara del precio, así que no agrega otra banda que se leería
   como un segundo pie. */
.cl-follow { margin: 54px auto 0; text-align: center; }
.cl-follow p { margin: 0 0 16px; font-size: 13.5px; color: #6f717a; }

/* Barra fija: devuelve la acción a un toque en cuanto el formulario del hero sale de la vista. NO se muestra
   siempre — arriba competiría con el propio formulario, que es el CTA principal — ni sobre el pie, donde
   taparía los enlaces legales; de ahí que se observen los dos extremos y no solo el formulario. */
.cl-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    background: #12141bf2; backdrop-filter: blur(8px); border-top: 1px solid #ffffff1f;
    padding: 12px 5vw; color: #fff;
    transform: translateY(115%); transition: transform .22s ease; pointer-events: none;
}

/* Obligatorio, no defensivo: el display de una hoja de autor gana siempre sobre el [hidden] del navegador, así
   que sin esta regla la barra se vería igual en un cliente sin JavaScript — y ahí nunca se movería de su estado
   inicial. Mismo motivo que .creator-fields[hidden] más arriba. */
.cl-sticky[hidden] { display: none; }
.cl-sticky[data-shown="1"] { transform: none; pointer-events: auto; }
.cl-sticky b { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.cl-sticky small { display: block; color: #9498a1; font-size: 12px; margin-top: 2px; }
.cl-sticky .button { min-height: 44px; padding: 0 20px; font-size: 13.5px; box-shadow: none; }

.cl-foot {
    background: var(--deep); color: #6f727b;
    padding: 26px 5vw; display: flex; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap;
    font-size: 12px;
}

.cl-foot a { color: #9498a1; margin-left: 14px; }
.cl-foot a:hover { color: var(--cyan); }

.cl-foot__linklike {
    background: none; border: 0; padding: 0; margin-left: 14px;
    color: #9498a1; font-size: 12px; cursor: pointer;
}

.cl-foot__linklike:hover { color: var(--cyan); }

/* ------------------------------------------------- Pantalla de salida (/creadores/listo)

   Es el momento de mayor intención de todo el embudo y el que más se desperdicia. Hace tres cosas y ninguna
   más: confirma, dice qué significa estar en la lista, y pide lo único que en este momento sale barato. */
.cl-done { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 72px 5vw 84px; }
.cl-done__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 55% at 50% 0%, #62f2df1f, #0000 62%); }
.cl-done > *:not(.cl-done__glow) { position: relative; z-index: 1; }
.cl-done__top { text-align: center; max-width: 54ch; margin: 0 auto 40px; }

.cl-done__check {
    width: 62px; height: 62px; border-radius: 50%; background: #62f2df1f; color: var(--cyan);
    display: grid; place-items: center; font-size: 27px; margin: 0 auto 22px;
}

.cl-done h1 { margin: 0 0 14px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.02; letter-spacing: -2px; font-weight: 600; }
.cl-done h1 em { font-weight: 300; }
.cl-done__mail { margin: 0; color: #ffffffc4; font-size: 15px; line-height: 1.6; }
.cl-done__mail b { color: #fff; }
.cl-done__spam { margin: 14px 0 0; font: 600 11.5px/1.55 var(--font-mono); letter-spacing: .3px; color: #ffffff85; }

.cl-done__what {
    max-width: 640px; margin: 0 auto 30px; padding-top: 26px; text-align: center;
    border-top: 1px solid #ffffff17;
    font-size: 15.5px; line-height: 1.6; color: #ffffffc4;
}

.cl-done__what b { color: var(--cyan); font-weight: 700; }

.cl-done__proof {
    max-width: 880px; margin: 0 auto 28px; padding: 16px 22px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    border: 1px solid #ffffff17; border-left: 3px solid var(--violet); border-radius: 12px;
    background: linear-gradient(90deg, #8057ff14, #0000 70%);
}

.cl-done__proof b { color: var(--violet); font-size: 26px; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.cl-done__proof span { font-size: 13.5px; color: #ffffffb5; }

.cl-done__share { max-width: 880px; margin: 0 auto; padding-top: 28px; text-align: center; border-top: 1px solid #ffffff17; }
.cl-done__share > p { margin: 0 0 18px; font-size: 14px; color: #ffffffb5; }
.cl-done__share > p b { color: #fff; }
.cl-share { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.cl-share__btn {
    cursor: pointer;
    border: 1px solid #ffffff2e; border-radius: 999px; padding: 12px 22px;
    font-size: 13px; font-weight: 700; color: #fff; background: #ffffff0a;
    transition: transform .2s, border-color .2s;
}

.cl-share__btn:hover { transform: translateY(-2px); border-color: #ffffff5c; }
.cl-share__btn--main { background: var(--cyan); color: #0d1414; border-color: var(--cyan); }
/* Jerarquía menor que el bloque de compartir: es la salida alternativa, no el pedido de la pantalla. */
.cl-done__follow { margin: 26px 0 12px; text-align: center; font-size: 13px; color: #ffffff8a; }

@media (width <= 980px) {
    .cl-hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; }
    /* En una sola columna la mascota quedaría detrás del formulario, justo donde se escribe. */
    .cl-hero__mascot { display: none; }
    .cl-args__grid, .cl-steps__grid, .cl-price__card { grid-template-columns: 1fr; }
    .cl-price__card { margin-top: -20px; }
}

@media (width <= 580px) {
    .cl-nav { padding: 6px 20px; }
    .cl-nav__logo { height: 52px; }
    .cl-nav__cta { padding: 10px 15px; font-size: 12px; }
    .cl-hero { padding: 40px 20px 52px; }
    .cl-hero h1 { letter-spacing: -1.8px; }
    .cl-args, .cl-steps { padding: 56px 20px 60px; }
    .cl-price { padding: 0 20px 60px; }
    .cl-done { padding: 56px 20px 64px; }
    .cl-form { padding: 28px 22px; }
    /* La barra fija en móvil es solo el botón: el texto de apoyo se comería media pantalla. */
    .cl-sticky { padding: 10px 20px; }
    .cl-sticky > div { display: none; }
    .cl-sticky .button { width: 100%; }
    .cl-foot { flex-direction: column; }
    .cl-foot a:first-of-type, .cl-foot__linklike { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-nav__cta:hover, .cl-share__btn:hover { transform: none; }
    .cl-sticky { transition: none; }
}

/* ---------------------------------------------------------------- Pantallas de resultado (404, 500, mantención)

   Reemplazan a `.simple-page--illustrated` para todo lo que sea un estado y no un documento. La diferencia no es
   estética: `.simple-page__art` envuelve la ilustración en una tarjeta redondeada porque esa página se renderiza
   sobre el fondo claro, y las siete ilustraciones del pack traen su PROPIO fondo oscuro (#0b0d12). Sobre una
   sección oscura esa tarjeta sobra — la ilustración va AL RAS y se lee como parte de la página.

   Se recortan al centro con foco al 46% de la altura: el PNG trae ~30% de aire oscuro arriba y abajo del motivo,
   así que a la altura de esta banda un `contain` dejaría la mascota diminuta.

   En un storefront estas pantallas no son un accidente raro: el 404 es un enlace de campaña pegado en una bio de
   Instagram meses atrás, o sea tráfico real con intención de compra. De ahí que ofrezcan una salida y no solo una
   disculpa. */
.result { background: var(--deep); color: #fff; min-height: 100vh; }

.result__art {
    height: 190px;
    background-color: #0b0d12;
    background-position: center 46%;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ffffff0f;
}

.result__body { max-width: 620px; margin: 0 auto; padding: 40px 24px 64px; text-align: center; }
.result__body h1 { margin: 0; font-size: clamp(27px, 4vw, 33px); line-height: 1.03; letter-spacing: -1.7px; }
.result__body > p { max-width: 46ch; margin: 13px auto 0; color: #9ea1a7; font-size: 14px; line-height: 1.7; }
.result__body > p b { color: #fff; }
.result__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.result__acts .button { min-height: 46px; }

/* Salidas concretas en vez de un "volver al inicio" solo: quien llega a un 404 de campaña venía a comprar. */
.result-sugg {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    max-width: 570px; margin: 26px auto 0; text-align: left;
}

.result-sugg > * {
    display: block;
    background: #14171d; border: 1px solid #ffffff17; border-radius: 12px; padding: 13px;
    transition: border-color .18s, transform .18s;
}

.result-sugg > a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.result-sugg i { display: block; margin-bottom: 7px; font: 700 8.5px var(--font-mono); font-style: normal; letter-spacing: 1.2px; color: var(--cyan); }
.result-sugg b { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: -.3px; color: #fff; }
.result-sugg small { color: #8e919a; font-size: 11.5px; line-height: 1.45; }

/* Aviso dentro de una pantalla de resultado. Las tres variantes reusan el código de color que el sitio ya usa
   para los estados de campaña, así que quien llega acá lo lee con el vocabulario que ya aprendió. */
.result-warn {
    display: flex; gap: 11px; align-items: flex-start; text-align: left;
    max-width: 430px; margin: 24px auto 0; padding: 13px 15px;
    border-radius: 12px; font-size: 12.5px; line-height: 1.6;
}

.result-warn > i { flex: none; font-style: normal; }
.result-warn b { display: block; margin-bottom: 3px; color: #fff; }
.result-warn--calm { background: #ffffff0a; border: 1px solid #ffffff1f; color: #9ea1a7; }
.result-warn--wait { background: #8057ff17; border: 1px solid #8057ff3d; color: #c4b0ff; }
.result-warn--bad { background: #e45b7317; border: 1px solid #e45b733d; color: #f0899b; }

/* Datos sueltos (identificador de la solicitud, hora estimada). Tabular para que no bailen entre pantallas. */
.result-recap {
    max-width: 390px; margin: 24px auto 0; padding: 6px 16px; text-align: left; list-style: none;
    background: #ffffff0a; border: 1px solid #ffffff17; border-radius: 14px;
}

.result-recap li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 12.5px; color: #9ea1a7; }
.result-recap li + li { border-top: 1px solid #ffffff12; }
.result-recap em { font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }

@media (width <= 580px) {
    .result__art { height: 150px; }
    .result__body { padding: 30px 20px 48px; }
    .result-sugg { grid-template-columns: 1fr; }
    .result__acts { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .result-sugg > a:hover { transform: none; }
}

/* ---------------------------------------------------------------- Página de campaña (/@creador/campana)

   La pantalla que vende, y la única del sitio con una sola métrica de éxito: todo lo demás —descripción, premio,
   pasos, sorteo— está para despejar dudas antes del botón, no para llenar espacio.

   Se diseña primero a 375px y crece desde ahí, no al revés: casi todo el tráfico llega desde un enlace pegado en
   una bio de Instagram, o sea desde un teléfono. Reusa los tres cortes que el resto de la hoja ya tiene
   (980 / 900 / 580) en vez de inventar otros — dos juegos de breakpoints en la misma hoja es cómo aparecen los
   saltos raros a medio camino.

   Prefijo camp- para que ninguna regla de acá alcance a la portada ni a la landing por accidente. */
.camp-page { background: var(--paper); padding: 110px 5vw 80px; }
.camp-crumbs { font-size: 13px; color: #9a9ca1; margin-bottom: 16px; }
.camp-crumbs a { color: #74767b; }
.camp-crumbs a:hover { color: var(--violet); }

.camp { display: grid; grid-template-columns: minmax(0, 1.55fr) 330px; gap: 26px; align-items: start; }
.camp__main { min-width: 0; }

/* Estado de la campaña. Los cuatro colores son el mismo código que usa el resto del sitio, así que quien llega a
   la vuelta del pago ya aprendió el vocabulario acá: menta = corriendo bien, violeta = en proceso,
   naranja = requiere atención, gris = terminado. */
.chip {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font: 700 10px/1 var(--font-mono); letter-spacing: 1.2px;
    padding: 7px 12px; border-radius: 999px;
}

.chip i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.chip--live { background: #62f2df1f; color: #1d7f72; }
.chip--live i { background: #17a894; box-shadow: 0 0 8px #17a89480; }
.chip--soon { background: #62f2df1f; color: #1d7f72; }
.chip--soon i { background: #17a894; }
.chip--closed { background: #ff70431f; color: #b8431f; }
.chip--closed i { background: var(--orange); }
.chip--drawing { background: #8057ff1f; color: #5a35d1; }
.chip--drawing i { background: var(--violet); box-shadow: 0 0 8px #8057ff80; }
.chip--done { background: #11131812; color: #5c5f66; }
.chip--done i { background: #8b8e96; }

/* Galería: hoy es la foto del premio principal, que es la imagen que de verdad vende. Si no hay ninguna cargada
   cae al placeholder del pack en vez de dejar un hueco. */
.camp-gal { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); position: relative; background: var(--deep); }
.camp-gal__main { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }
.camp-gal .chip { position: absolute; top: 12px; left: 12px; }

.camp-head { margin-top: 26px; }
.camp-creator { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #55575c; }
.camp-creator__ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: #e2e0da; }
.camp-creator a { font-weight: 700; }
.camp-creator a:hover { color: var(--violet); }

/* Marca de creador revisado. No es decorativa: la revisión previa de staff es lo que la sostiene, y si el creador
   deja de estar activo su campaña ni siquiera es alcanzable. */
.camp-verified {
    display: inline-grid; place-items: center; flex: none;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--cyan); color: #0d1414; font-size: 10px; font-weight: 800;
}

.camp-head h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.06; letter-spacing: -1.6px; margin: 0; }
.camp-head > p { margin: 12px 0 0; color: #55575c; font-size: 14.5px; line-height: 1.7; }

.camp-block { margin-top: 30px; }
.camp-block > b { display: block; margin-bottom: 12px; font: 700 9px var(--font-mono); letter-spacing: 2px; color: #9a9ca1; }
.camp-block p { color: #55575c; font-size: 14px; line-height: 1.7; margin: 0; }

/* Premios */
.camp-prizes { display: flex; flex-direction: column; gap: 10px; }
.camp-prize { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 15px; }
.camp-prize__img { width: 68px; height: 68px; border-radius: 11px; object-fit: cover; flex: none; background: #e2e0da; }
.camp-prize__no { width: 68px; height: 68px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #e7ddff; color: var(--violet); font: 700 11px var(--font-mono); }
.camp-prize b { display: block; font-size: 15px; letter-spacing: -.5px; }
.camp-prize p { font-size: 13px; margin-top: 5px; }

/* Packs. Sin selector de cantidad todavía: el checkout no existe, y un carrito que no lleva a ningún lado es peor
   que no tenerlo. Los precios sí se muestran — son el dato por el que se entra a esta página. */
.camp-packs { display: flex; flex-direction: column; gap: 10px; }

.camp-pack {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px;
}

.camp-pack__art { width: 46px; height: 46px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 19px; background: #d8fff7; }
.camp-pack__info { flex: 1; min-width: 0; }
.camp-pack__info b { display: block; font-size: 14px; letter-spacing: -.4px; }
.camp-pack__info small { color: #74767b; font-size: 12px; }
.camp-pack__price { text-align: right; flex: none; }
.camp-pack__price b { display: block; font-size: 16px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.camp-pack__price small { font-size: 11px; color: #9a9ca1; }

/* La promoción se anuncia ANTES de aplicarse. El backend elige solo el mejor bundle y lo repite mientras quepa;
   si eso ocurre en silencio, el total cambia sin explicación. Decirlo antes convierte una sorpresa en un incentivo. */
.camp-promo {
    margin-top: 12px; padding: 13px 15px;
    background: #8057ff0f; border: 1px solid #8057ff2e; border-radius: 11px;
    font-size: 13px; line-height: 1.6; color: #5a35d1;
}

.camp-promo b { font-weight: 700; }
.camp-promo__title { display: block; margin-bottom: 6px; font: 700 10px var(--font-mono); letter-spacing: 1.4px; }
.camp-promo ul { margin: 0; padding: 0; list-style: none; }
.camp-promo li + li { margin-top: 5px; }

/* Tres pasos */
.camp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.camp-step { background: #fff; padding: 17px 18px 19px; }
.camp-step b { font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: #17a894; }
.camp-step h4 { margin: 10px 0 7px; font-size: 15px; letter-spacing: -.5px; }
.camp-step p { font-size: 12.5px; color: #74767b; line-height: 1.6; }

/* Sorteo */
.camp-draw {
    background: var(--deep); color: #fff; border-radius: 16px; padding: 24px 26px;
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}

.camp-draw .kicker { color: var(--cyan); }
.camp-draw h4 { margin: 10px 0 8px; font-size: 20px; letter-spacing: -.9px; }
.camp-draw p { color: #8e919a; font-size: 13px; line-height: 1.65; max-width: 52ch; }
.camp-draw__when { text-align: right; flex: none; }
.camp-draw__when b { display: block; font-size: 15px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.camp-draw__when small { display: block; margin-top: 6px; font: 600 9.5px var(--font-mono); letter-spacing: 1.2px; color: #8e919a; }

/* Ganadores. Solo aparecen con la sesión de sorteo cerrada — nada revela un resultado antes, y esa regla la aplica
   la consulta, no esta hoja. */
.camp-winners { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.camp-winner { background: #fff; display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.camp-winner__who { flex: 1; min-width: 120px; }
.camp-winner__who b { display: block; font-size: 14px; letter-spacing: -.3px; }
.camp-winner__who small { color: #9a9ca1; font-size: 11.5px; }
.camp-winner__code { font: 700 11px var(--font-mono); background: #11131810; padding: 6px 10px; border-radius: 6px; color: #55575c; letter-spacing: .5px; }
.camp-winner__prize { font-size: 13px; color: #55575c; text-align: right; }

/* Columna de compra. En escritorio queda sticky; en iPad pasa a un bloque ancho arriba del detalle (una barra fija
   ahí se come demasiada pantalla) y en teléfono se apila. */
.camp-buy { background: var(--ink); color: #fff; border-radius: 16px; padding: 22px; position: sticky; top: 100px; }
.camp-buy .kicker { color: var(--cyan); }
.camp-buy h4 { margin: 10px 0 8px; font-size: 19px; letter-spacing: -.7px; }
.camp-buy p { color: #8e919a; font-size: 12.5px; line-height: 1.6; margin: 0; }
.camp-buy__from { margin-bottom: 4px; font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: #8e919a; }
.camp-buy__price { font-size: 30px; letter-spacing: -1.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.camp-buy__price small { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0; color: #8e919a; }

.camp-buy__deadline {
    display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 10px 12px;
    background: #ff70431f; border: 1px solid #ff704340; border-radius: 10px;
    font-size: 12px; color: #ffb59c;
}

.camp-buy__deadline b { color: #fff; font-family: var(--font-mono); font-size: 12px; }
.camp-buy__actions { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.camp-buy__actions .button { width: 100%; }

/* Aviso de que la compra todavía no está abierta. Es temporal: se reemplaza por el botón cuando exista el
   checkout. Va con el tono de espera y no con el de error — no se rompió nada. */
.camp-buy__soon {
    margin-top: 18px; padding: 13px 15px; border-radius: 11px;
    background: #8057ff1f; border: 1px solid #8057ff4d;
    color: #c4b0ff; font-size: 12.5px; line-height: 1.6;
}

.camp-buy__soon b { display: block; color: #fff; margin-bottom: 3px; }

/* Con Mercado Pago Connect el dinero entra a la cuenta del creador. Decirlo genera confianza y, sobre todo, evita
   el reclamo de "le pagué a VendeTuSticker". */
.camp-buy__seller {
    display: flex; gap: 9px; align-items: center;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #ffffff1f;
    font-size: 11.5px; color: #8e919a; line-height: 1.5;
}

.camp-buy__seller img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: #2a2d35; }
.camp-buy__seller b { color: #fff; }

.camp-policies { margin-top: 14px; font-size: 12.5px; color: #9a9ca1; }
.camp-policies a { color: var(--violet); font-weight: 700; }

@media (width <= 980px) {
    .camp { grid-template-columns: 1fr; }
    /* Arriba del detalle y sin sticky: en iPad la columna quedaría demasiado angosta y una barra fija se come
       demasiada pantalla vertical. */
    .camp__aside { order: -1; }
    .camp-buy { position: static; }
}

@media (width <= 900px) {
    .camp-page { padding: 90px 6vw 60px; }
    .camp-steps { grid-template-columns: 1fr; }
    .camp-draw { grid-template-columns: 1fr; }
    .camp-draw__when { text-align: left; }
}

@media (width <= 580px) {
    .camp-page { padding: 84px 20px 50px; }
    .camp-winner__prize { text-align: left; width: 100%; }
}

/* ---------------------------------------------------------------- Checkout (/@creador/campana/comprar)

   Dos columnas: los packs y los datos a la izquierda, el resumen sticky a la derecha. En móvil el resumen baja al
   final —después de las casillas— porque ahí el botón tiene que ser lo último que se ve antes de decidir.

   Reusa .field, .consent, .form-errors y .button del sistema que ya existe: es la misma marca, y un checkout que
   se ve distinto del sitio del que viene es exactamente donde la gente abandona. */
.co-page { background: var(--paper); padding: 110px 5vw 80px; }
.co-back { display: inline-block; margin-bottom: 18px; font-size: 13px; color: #74767b; }
.co-back:hover { color: var(--violet); }

.co { display: grid; grid-template-columns: minmax(0, 1.5fr) 340px; gap: 26px; align-items: start; }
.co__main { min-width: 0; }
.co__head { margin-bottom: 24px; }
.co__head h1 { margin: 10px 0 8px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -1.4px; line-height: 1.08; }
.co__head p { margin: 0; color: #55575c; font-size: 14px; }

.co-block { margin-bottom: 28px; }
.co-block > b { display: block; margin-bottom: 12px; font: 700 9px var(--font-mono); letter-spacing: 2px; color: #9a9ca1; }

/* Los campos del checkout van sobre fondo claro, a diferencia de .field del formulario de lista de espera, que
   vive en una tarjeta oscura. Se sobrescribe solo el color, no la estructura. */
.co .field > label { color: #6d6e72; }
.co .field input[type=text], .co .field input[type=email], .co .field input[type=tel] {
    background: #fff; color: var(--ink); border: 1px solid #d9d6cd;
}
.co .field input::placeholder { color: #a8aab0; }
.co .field input:focus { border-color: var(--violet); }
.co .field-hint { display: block; margin-top: 6px; font-size: 12px; color: #82858c; line-height: 1.45; }
.co .consent { color: #55575c; margin: 0 0 14px; }
.co .consent a { color: var(--violet); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.co-packs { display: flex; flex-direction: column; gap: 10px; }

.co-pack {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px;
}

.co-pack__art { width: 42px; height: 42px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 18px; background: #d8fff7; }
.co-pack__info { flex: 1; min-width: 0; }
.co-pack__info b { display: block; font-size: 14px; letter-spacing: -.4px; }
.co-pack__info small { color: #74767b; font-size: 12px; }

.co-pack__qty {
    width: 68px; flex: none; text-align: center;
    padding: 10px 8px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: #fff; color: var(--ink); border: 1px solid #d9d6cd; border-radius: 10px;
}

.co-pack__qty:focus { border-color: var(--violet); outline: none; }

/* Resumen. Oscuro como el bloque de compra de la campaña: es el mismo momento del recorrido y tiene que leerse
   como su continuación. */
.co-summary { background: var(--ink); color: #fff; border-radius: 16px; padding: 22px; position: sticky; top: 100px; }
.co-summary__count { display: flex; align-items: baseline; gap: 9px; }
.co-summary__count b { font-size: 32px; line-height: 1; letter-spacing: -1.8px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.co-summary__count span { font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: #8e919a; }

.co-summary__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 18px 0; padding: 16px 0; border-top: 1px solid #ffffff1f; border-bottom: 1px solid #ffffff1f;
}

.co-summary__total span { font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: #8e919a; }
.co-summary__total b { font-size: 26px; letter-spacing: -1.3px; font-variant-numeric: tabular-nums; }
/* Confirmación del correo, dentro del resumen. Tono de espera (violeta) y no de error: no se rompió nada, falta
   un paso — y ese paso protege justamente la entrega de lo que se está por pagar. */
.co-verify {
    margin-bottom: 16px; padding: 14px 15px; border-radius: 12px;
    background: #8057ff1f; border: 1px solid #8057ff4d; color: #c4b0ff;
    font-size: 12.5px; line-height: 1.6;
}

.co-verify b { display: block; margin-bottom: 5px; color: #fff; font-size: 13.5px; }
.co-verify p { margin: 0; }
.co-verify strong { color: #fff; }
.co-verify small { display: block; margin-top: 10px; color: #ffffff8f; font-size: 11.5px; line-height: 1.5; }

.co-verify__code {
    width: 100%; margin-top: 12px; padding: 12px 14px;
    background: #0f1116; color: #fff; border: 1px solid #ffffff40; border-radius: 10px;
    font: 700 20px var(--font-mono); letter-spacing: 6px; text-align: center;
    font-variant-numeric: tabular-nums;
}

.co-verify__code:focus { border-color: var(--cyan); outline: none; }
.co-verify__code::placeholder { color: #5d616b; letter-spacing: 6px; }

.co-summary .button { width: 100%; }
.co-summary__note { margin: 14px 0 0; font-size: 11.5px; color: #8e919a; line-height: 1.6; }
.co-summary .turnstile-slot { margin: 0 0 16px; }

@media (width <= 980px) {
    .co { grid-template-columns: 1fr; }
    /* El resumen baja al final: en una columna, el botón tiene que ser lo último antes de decidir. */
    .co-summary { position: static; }
}

@media (width <= 580px) {
    .co-page { padding: 84px 20px 50px; }
    .co-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Perfil del creador (/@slug)

   La URL que el creador pega en su bio. Tiene un solo trabajo: que quien llega desde Instagram entienda en tres
   segundos quién es, qué está vendiendo y que esto es serio.

   Cuatro combinaciones que tienen que verse bien: con portada y avatar, con una sola de las dos, y sin ninguna.
   Sin portada no hay nada que solapar, así que el avatar vuelve al flujo en vez de quedar flotando. */
/* La portada del creador. LA PROPORCION TIENE QUE PARECERSE A LA QUE EL PANEL LE PREVISUALIZO al subirla
   (aspect-ratio: 3/1 en Admin.Web), o el recorte se come lo que esa persona creyo que estaba publicando.

   Antes era una banda de alto fijo —clamp(140px, 22vw, 220px)— a ancho completo, o sea 6,5:1 en una pantalla de
   1440px y 11:1 en una de 2560px: MENOS DE LA MITAD de lo previsualizado, y peor cuanto mas grande el monitor.
   Es exactamente la falla que ese 3:1 del panel se puso para evitar.

   Ahora es 3/1 real, con un techo porque a ancho completo un 3:1 literal da 480px de alto en 1440px y 850px en
   2560px, que empuja el nombre del creador fuera de la primera pantalla. Con el tope, el telefono recibe el 3:1
   exacto y el escritorio queda en ~4:1: no es identico al panel, pero deja de ser otra cosa. */
/* width: 100% EXPLICITO y no heredado del bloque, y esto NO es redundante: con aspect-ratio puesto y el ancho
   en auto, el navegador puede derivar el ANCHO a partir de la altura en vez de al reves, y la portada queda mas
   angosta que la ventana con una franja del fondo de la pagina a la derecha. Pasó en producción el 2026-08-18 y
   se veia justo en pantallas anchas. Fijando el ancho, el aspect-ratio solo decide la ALTURA, que es lo que se
   queria.

   Comportamiento resultante por ancho de pantalla: hasta ~1200px manda el 3:1 (el telefono recibe la proporcion
   exacta que el panel le previsualiza al creador); mas ancho, la altura se planta en 400px y la franja se va
   ensanchando, que es lo correcto — un 3:1 literal en un monitor de 2560px daria 850px de alto y empujaria el
   nombre del creador fuera de la primera pantalla. */
.cr-hero {
    position: relative; width: 100%;
    aspect-ratio: 3 / 1; max-height: 400px; min-height: 150px;
    background: var(--deep);
}

/* object-position hacia ARRIBA y no al centro, que es el default. Con el centro, el recorte de una ilustracion
   o de una foto vertical cae en el torso y la cabeza queda afuera — el sintoma con el que se descubrio esto.
   28% deja la parte alta de la imagen, que es donde estan las caras, y sigue mostrando algo de fondo. */
.cr-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }

/* Sin portada propia: trama de puntos en los dos colores de marca más un resplandor, para que el encabezado no
   se lea como una imagen que no cargó. */
.cr-hero--fallback {
    background:
        radial-gradient(60% 120% at 82% 50%, #8057ff2e, #0000 62%),
        radial-gradient(50% 110% at 10% 60%, #62f2df1a, #0000 58%),
        var(--deep);
}

.cr-hero--fallback:after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(#62f2df26 1px, #0000 1px), radial-gradient(#8057ff2e 1px, #0000 1px);
    background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
}

/* La mascota rellena el vacío, pero ATENUADA y no como protagonista: esta es la portada del creador, no la
   nuestra. Una mascota de plataforma a tamaño completo en el perfil de otro se lee como que la página es de
   VendeTuSticker y no suya — el mismo motivo por el que sus redes nunca se mezclan con las de la marca.
   Precedente directo: .cl-hero__mascot de la landing, con la misma opacidad.

   Sin filtros, rotación ni recorte: el pack de marca lo prohíbe, y la inclinación ya viene en el render. El
   símbolo trae ~39% de aire transparente, de ahí el alto generoso. */
.cr-hero__mascot {
    position: absolute; right: 4vw; bottom: -12%; z-index: 1;
    height: 124%; width: auto; object-fit: contain;
    opacity: .22; pointer-events: none;
}

@media (width <= 700px) {
    /* En la banda angosta del teléfono la mascota queda detrás del avatar y del nombre. */
    .cr-hero__mascot { display: none; }
}

/* Degradado hacia el color de la barra: sin él la foto corta en seco contra el bloque de identidad. */
.cr-hero__scrim { position: absolute; inset: 0; background: linear-gradient(#0000 35%, #0a0c11e6); }

.cr-bar { position: relative; background: #0a0c11; color: #fff; padding: 0 5vw 22px; }

@media (width >= 900px) {
    .cr-bar { display: flex; align-items: flex-end; gap: 18px 40px; flex-wrap: wrap; }
    /* flex-basis generoso: con un nombre corto y sin descripcion, el bloque de identidad no debe encogerse
       hasta pegarse a las estadisticas. */
    .cr-bar__in { flex: 1 1 460px; min-width: 0; }
    /* Al costado ya no hace falta la linea superior que las separaba cuando iban apiladas: la separacion la da
       la columna. Se alinean abajo, contra la misma linea de base que el bloque de identidad. */
    .cr-stats { margin-top: 0; padding-top: 0; border-top: 0; flex: 0 1 auto; padding-bottom: 6px; }
}

/* El avatar se posiciona en ABSOLUTO y no con margen negativo dentro del flex: con align-items:flex-end, un
   margin-top negativo sobre un ítem más bajo que la línea no lo mueve —solo cambia cuánto espacio reclama— y
   aplicárselo al contenedor sube también el nombre, que termina montado sobre la portada. */
.cr-bar__in { display: flex; align-items: flex-end; gap: 20px; padding: 16px 0 0 120px; min-height: 56px; flex-wrap: wrap; }
.cr-ava { position: absolute; left: 5vw; top: -46px; z-index: 2; width: 96px; height: 96px; border-radius: 50%; border: 4px solid #0a0c11; object-fit: cover; background: #2a2d35; }

/* Monograma cuando el creador no subió avatar. */
.cr-ava--mono { display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #0d1414; letter-spacing: -1px; background: linear-gradient(140deg, var(--cyan), #35c9b6); border-color: #0a0c11; }

.cr-bar--flat { padding-top: 30px; }
.cr-bar--flat .cr-bar__in { padding-left: 0; }
.cr-bar--flat .cr-ava { position: static; width: 88px; height: 88px; border: 0; }

.cr-bar__id { flex: 1; min-width: 220px; padding-bottom: 4px; }
.cr-bar__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-bar__name h1 { margin: 0; font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -1.4px; }
.cr-bar__handle { margin: 6px 0 0; font: 600 12.5px var(--font-mono); color: #8e919a; }
.cr-bar__tagline { margin: 10px 0 0; color: #ffffffc4; font-size: 14px; line-height: 1.6; max-width: 60ch; }

.cr-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding: 0; list-style: none; }
.cr-tags li { font: 700 9.5px var(--font-mono); letter-spacing: 1.2px; color: #c4b0ff; background: #8057ff1f; border: 1px solid #8057ff3d; border-radius: 999px; padding: 6px 11px; }

.cr-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; padding: 0; list-style: none; }
.cr-social a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: #ffffff0f; border: 1px solid #ffffff26; color: #cfd3da; font-size: 12.5px; font-weight: 600; transition: border-color .18s, color .18s; }
.cr-social a:hover { color: var(--cyan); border-color: var(--cyan); }

/* Los cuatro números del encabezado. "Premios entregados" sale de la constancia real de entrega, así que puede
   dejar mal parado al creador — y por eso vale. */
.cr-stats { display: flex; flex-wrap: wrap; gap: 0 34px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff17; list-style: none; }
.cr-stats li { padding-right: 34px; border-right: 1px solid #ffffff17; }
.cr-stats li:last-child { border-right: 0; padding-right: 0; }
.cr-stats b { display: block; font-size: 19px; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.cr-stats span { font: 600 9px var(--font-mono); letter-spacing: 1.2px; color: #6f727a; }

.cr-body { background: var(--paper); padding: 44px 5vw 70px; }
.cr-section + .cr-section { margin-top: 44px; }
.cr-section__head { margin-bottom: 20px; }
.cr-section__head h2 { margin: 10px 0 0; font-size: clamp(24px, 3vw, 30px); letter-spacing: -1.4px; line-height: 1.05; }
.cr-section__head h2 em { color: var(--violet); font-style: normal; font-weight: 400; }

/* Tarjetas de campaña */
.cr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .18s, border-color .18s; }
.cr-card:hover { transform: translateY(-3px); border-color: #11131833; }
/* width: 100% explicito por la misma razon que .cr-hero: con aspect-ratio y el ancho en auto, el navegador
   puede derivar el ancho de la altura. Hoy no pasa porque no hay max-height, pero agregarle uno mas adelante
   reintroduciria el defecto sin que nada lo advierta. */
.cr-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--deep); }
.cr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-card__media .chip { position: absolute; top: 10px; left: 10px; }
.cr-card__clock { position: absolute; bottom: 10px; right: 10px; background: #000000a6; color: #fff; font: 700 9.5px var(--font-mono); letter-spacing: .8px; padding: 5px 9px; border-radius: 6px; }
.cr-card__body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 15px 16px 17px; }
.cr-card__body h3 { margin: 0; font-size: 16px; letter-spacing: -.5px; line-height: 1.25; }
.cr-card__body p { margin: 0; font-size: 12.5px; color: #74767b; line-height: 1.5; }
.cr-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.cr-card__price small { display: block; margin-bottom: 3px; font: 700 8.5px var(--font-mono); letter-spacing: 1.2px; color: #9a9ca1; }
.cr-card__price b { font-size: 17px; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.cr-card__cta { font: 700 11px var(--font-mono); letter-spacing: .5px; color: var(--violet); white-space: nowrap; }

/* Sobre el creador: texto a la izquierda, ficha de datos a la derecha. */
.cr-about { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; align-items: start; }
/* La descripción llega como HTML ya renderizado por Services/RichText, que BAJA los títulos dos niveles: el `#`
   que escribe el creador llega como <h3>, porque el <h1> de la página es su nombre. De ahí que se estilen h3/h4
   y no h1/h2 — mismo criterio (y misma dependencia) que .legal-doc__body. */
.cr-about__body { font-size: 14.5px; line-height: 1.75; color: #55575c; }
.cr-about__body > :first-child { margin-top: 0; }
.cr-about__body p { margin: 0 0 14px; }
.cr-about__body h3 { margin: 28px 0 10px; font-size: 20px; letter-spacing: -.8px; color: var(--ink); }
.cr-about__body h4 { margin: 22px 0 8px; font-size: 16px; color: var(--ink); }
.cr-about__body strong { color: var(--ink); }
.cr-about__body a { color: var(--violet); font-weight: 700; }
.cr-about__body ul, .cr-about__body ol { margin: 0 0 14px; padding-left: 20px; }
.cr-about__body li { margin-bottom: 6px; }
.cr-about__body blockquote { margin: 18px 0; padding-left: 16px; border-left: 3px solid #d8d6d0; color: #82858c; }
.cr-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.cr-side > b { display: block; margin-bottom: 12px; font: 700 9px var(--font-mono); letter-spacing: 1.6px; color: #9a9ca1; }
.cr-side ul { margin: 0; padding: 0; list-style: none; }
.cr-side li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cr-side li:first-child { border-top: 0; }
.cr-side li span { color: #74767b; }
.cr-side li em { font-style: normal; font-weight: 700; text-align: right; }
.cr-side li em.is-good { color: #17a894; }

/* Estado vacío: un creador sin campañas publicadas todavía. Dice qué pasa, no se disculpa. */
.cr-empty { background: #fff; border: 1px dashed #cfccc4; border-radius: 16px; padding: 40px 24px; text-align: center; }
.cr-empty b { display: block; margin-bottom: 8px; font-size: 16px; letter-spacing: -.4px; }
.cr-empty p { margin: 0 auto; max-width: 46ch; color: #74767b; font-size: 13.5px; line-height: 1.65; }

@media (width <= 980px) {
    .cr-cards { grid-template-columns: repeat(2, 1fr); }
    .cr-about { grid-template-columns: 1fr; }
}

@media (width <= 580px) {
    .cr-bar { padding: 0 20px 20px; }
    .cr-bar__in { padding: 14px 0 0; }
    /* En una columna angosta el avatar solapado deja el nombre contra el borde: vuelve al flujo. */
    .cr-ava { position: static; width: 76px; height: 76px; border: 0; margin-top: -38px; }
    .cr-body { padding: 34px 20px 54px; }
    .cr-cards { grid-template-columns: 1fr; }
    .cr-stats { gap: 0 20px; }
    .cr-stats li { padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- Vitrina de la portada

   La grilla de campañas abiertas. Va sobre --paper y reusa las tarjetas del perfil del creador (.cr-cards /
   .cr-card): es el mismo componente, y tenerlo dos veces es cómo terminan mostrando precios distintos.

   Solo se dibuja cuando hay algo a la venta. Con cero campañas la portada muestra la lista de espera en su
   lugar, así que esta sección nunca aparece vacía. */
.home-campaigns { background: var(--paper); padding: 110px 8vw 120px; }

/* Encabezado más compacto que el .section-heading de "cómo funciona": acá lo que importa son las tarjetas, y un
   título de media pantalla las empujaría fuera de la vista. */
.home-campaigns .section-heading { margin-bottom: 42px; }
.home-campaigns .section-heading h2 { font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -3px; }
.home-campaigns .section-heading > p { margin: 0; color: #696b70; line-height: 1.6; }

@media (width <= 900px) {
    .home-campaigns { padding: 85px 6vw 95px; }
    .home-campaigns .section-heading { margin-bottom: 32px; }
}

@media (width <= 580px) {
    .home-campaigns { padding: 70px 20px 80px; }
    .home-campaigns .section-heading h2 { font-size: 40px; letter-spacing: -2.5px; }
}

/* ---------------------------------------------------------------- Cómo funciona (/como-funciona)

   Una sola página con dos pistas (#compras / #creas). Van LADO A LADO y no apiladas: en paralelo se ve que es la
   misma mecánica contada desde dos lugares, apiladas se leen como dos productos distintos.

   El color separa a los públicos con el mismo código que usa el resto del sitio: menta para quien compra,
   violeta para quien crea. */
.hiw-hero { padding: 120px 8vw 58px; }

.hiw-hero__in { position: relative; z-index: 1; max-width: 680px; }
.hiw-hero .kicker { color: var(--cyan); }
.hiw-hero h1 { margin: 14px 0; font-size: clamp(32px, 4.2vw, 48px); line-height: .98; letter-spacing: -2.2px; }
.hiw-hero h1 em { color: var(--cyan); font-style: normal; font-weight: 400; }
.hiw-hero > .hiw-hero__in > p { margin: 0 0 22px; color: #8e919a; font-size: 14.5px; line-height: 1.7; }

.hiw { background: var(--paper); padding: 56px 8vw 84px; }

/* El separador de 1px es el fondo de la grilla asomando entre las dos celdas, mismo recurso que .wl-split. */
.hiw-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hiw-track { background: #fff; padding: 40px 38px 44px; }
/* La pista del creador va sobre piedra: el cambio de superficie es lo que hace evidente que cambió el público. */
.hiw-track--creator { background: #faf9f6; }
.hiw-track__kicker--buyer { color: #17a894; }
.hiw-track__kicker--creator { color: var(--violet); }
.hiw-track h2 { margin: 12px 0 10px; font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -1px; line-height: 1.15; }
.hiw-track__lead { margin: 0; color: #55575c; font-size: 14.5px; line-height: 1.6; }

.hiw-steps { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.hiw-steps li { display: flex; gap: 14px; }
.hiw-steps b { display: block; font-size: 14.5px; letter-spacing: -.3px; }
.hiw-steps small { display: block; margin-top: 4px; color: #74767b; font-size: 13px; line-height: 1.55; }

.hiw-steps__n {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    font: 700 11px var(--font-mono); font-style: normal; letter-spacing: .5px;
}

.hiw-steps__n--buyer { background: #d8fff7; color: #17a894; }
.hiw-steps__n--creator { background: #e7ddff; color: var(--violet); }

/* Cada pista cierra con la pregunta que a nadie le gusta hacer: al comprador qué se le garantiza, al creador
   cuánto cuesta. Es la que hace irse a quien no la encuentra. */
.hiw-track__foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.hiw-track__foot b { display: block; margin-bottom: 7px; font-size: 13.5px; }
.hiw-track__foot p { margin: 0; color: #74767b; font-size: 13px; line-height: 1.65; }

.hiw-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* Secundario sobre superficie clara: el .ghost del hero es para fondo oscuro y acá quedaría invisible. */
.outline { background: transparent; border: 1px solid #11131826; color: var(--ink); }
.outline:hover { border-color: var(--ink); }

@media (width <= 900px) {
    .hiw-hero { padding: 100px 6vw 48px; }
    .hiw { padding: 44px 6vw 68px; }
    /* En una columna las dos pistas se apilan y ahí el contraste de fondo es lo único que las separa. */
    .hiw-tracks { grid-template-columns: 1fr; }
}

@media (width <= 580px) {
    .hiw-hero { padding: 92px 20px 42px; }
    .hiw-hero h1 { letter-spacing: -1.6px; }
    .hiw { padding: 40px 20px 58px; }
    .hiw-track { padding: 32px 22px 36px; }
    .hiw-cta { flex-direction: column; align-items: stretch; }
}

/* Links del nav. Nace con uno solo ("Cómo funciona") y crece a medida que existan sus destinos; por eso el
   contenedor se estira y empuja las acciones a la derecha en vez de centrar nada. */
.nav-links { display: flex; gap: 22px; margin-left: auto; margin-right: 22px; font-size: 13.5px; }
.nav-links a { color: #ffffffc4; padding-bottom: 3px; border-bottom: 1.5px solid transparent; transition: color .18s, border-color .18s; }
.nav-links a:hover { color: #fff; border-bottom-color: var(--cyan); }

/* Página actual. Reusa el mismo subrayado menta del hover a propósito: es el mismo significado —"esto es lo que
   estás mirando"— y dos señales distintas para lo mismo se leen como dos cosas distintas. */
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--cyan); }

@media (width <= 700px) {
    /* Tarjeta flotante, no una banda a sangre pegada a la barra: todo el sitio está hecho de superficies
       redondeadas y separadas, así que un rectángulo negro de borde a borde se lee como un desplegable del
       navegador y no como parte de la página. Separada de la barra y con sombra propia, además, no necesita
       ninguna línea divisoria para que se entienda que está por encima del contenido.

       Cerrado es display:none, que es también el estado sin JavaScript: el botón nace hidden y si el script no
       corre nunca se revela, así que no queda un menú imposible de abrir. Ahí los enlaces siguen en el pie. */
    .nav-links {
        display: none;
        /* Cuelga ENTERA por debajo de la barra, sin solaparla. La tarjeta es translúcida, así que si su borde
           superior quedara por encima del borde de la barra esos pocos píxeles se verían sobre fondo oscuro y el
           resto sobre papel claro: el resultado es una franja más oscura cruzando el tope de la tarjeta, que se
           lee como una línea que no se sabe de dónde salió. Separada, toda su superficie tiene el mismo fondo. */
        position: absolute; top: calc(100% + 8px); left: 14px; right: 14px;
        flex-direction: column; gap: 2px;
        margin: 0; padding: 8px;
        font-size: 15.5px;

        /* Bastante opaca a propósito: con el desenfoque detrás alcanza para que se vea de vidrio, y así el color
           de la tarjeta no cambia según qué página quede debajo. */
        background: #12141cf2;
        backdrop-filter: blur(20px) saturate(140%);
        border: 1px solid #ffffff1f;
        border-radius: 20px;
        box-shadow: 0 26px 60px #00000080, inset 0 1px 0 #ffffff14;
    }

    .nav-links[data-open] { display: flex; animation: nav-menu-in .2s ease-out; }

    /* Cada fila es un objeto tocable completo —no un texto con una línea debajo—: así el área activa se ve, y
       llega de sobra a los 44px que pide un dedo. El subrayado del escritorio se anula acá. */
    .nav-links a {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 13px 14px;
        border-radius: 13px;
        border-bottom: 0;
        color: #ffffffde;
        transition: background .18s, color .18s;
    }

    /* La flecha es la que dice que la fila lleva a otra parte; en menta, que es el color de acción del sitio. */
    .nav-links a::after {
        content: "→";
        color: var(--cyan);
        opacity: .5;
        transition: transform .18s, opacity .18s;
    }

    /* :active importa más que :hover acá: en un teléfono no hay puntero, y sin respuesta al toque la fila
       parece no haber registrado nada durante lo que tarda en cargar la página. */
    .nav-links a:hover,
    .nav-links a:active {
        background: #ffffff12;
        color: #fff;
        border-bottom-color: #0000;
    }

    .nav-links a:hover::after,
    .nav-links a:active::after { opacity: 1; transform: translateX(3px); }

    /* Página actual: fila encendida y texto en menta. La flecha se cambia por un punto porque una flecha dice
       "ir", y en la página donde ya estás eso se contradice — pero sacarla del todo dejaría la fila desalineada
       respecto de las otras. */
    .nav-links a[aria-current="page"] {
        background: #62f2df14;
        color: var(--cyan);
        box-shadow: inset 0 0 0 1px #62f2df2e;
    }

    .nav-links a[aria-current="page"]::after {
        content: "●";
        font-size: 9px;
        opacity: 1;
        transform: none;
    }
}

@keyframes nav-menu-in {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Contacto (/contacto)

   Una columna angosta sobre fondo oscuro. Reusa .form-card, .field, .form-errors y .button del sistema que ya
   existe: es la misma marca, y un formulario que se ve distinto del sitio del que viene se lee como otra empresa. */
.ct { background: var(--ink); color: #fff; padding: 130px 5vw 110px; }
.ct__in { max-width: 620px; margin: 0 auto; }
.ct__head { margin-bottom: 34px; }
.ct .kicker { color: var(--cyan); }
.ct__head h1 { margin: 16px 0 14px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1; letter-spacing: -2.5px; }
.ct__head h1 em { color: var(--cyan); font-style: normal; font-weight: 400; }
.ct__head p { margin: 0; color: #ffffffb8; font-size: 15px; line-height: 1.65; }

.ct-form textarea {
    width: 100%; padding: 13px 14px; resize: vertical; min-height: 130px;
    background: #0f1116; color: #fff; border: 1px solid #ffffff26; border-radius: 11px; outline: none;
    font-family: inherit; font-size: 15px; line-height: 1.55;
    transition: border-color .2s;
}

.ct-form textarea:focus { border-color: var(--cyan); }
.ct-form textarea::placeholder { color: #5d616b; }
.ct-form__hint { display: block; margin-top: 6px; color: #8e919a; font-size: 12px; line-height: 1.45; }
/* Respiro alrededor del desafio y del boton. El .turnstile-slot compartido trae margin: 4px 0 20px, pensado
   para el login del panel, donde el formulario es corto; en una pantalla larga como esta el widget queda pegado
   al textarea y el boton pegado al widget. Se ajusta SOLO acá y no en la regla compartida, que sirve bien en las
   otras dos superficies. */
.ct-form .turnstile-slot { margin: 24px 0 22px; }
.ct-form .button { margin-top: 2px; }

.ct-form__legal { margin: 18px 0 0; color: #8e919a; font-size: 12px; line-height: 1.6; }
.ct-form__legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ct-form__legal a:hover { color: var(--cyan); }

.ct-done { background: #171a21; border: 1px solid #ffffff17; border-radius: 22px; padding: 44px 38px; text-align: center; }

.ct-done__check {
    width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 27px;
    background: #62f2df1f; color: var(--cyan);
}

.ct-done h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -1px; }
.ct-done p { margin: 0; color: #8e919a; font-size: 14px; line-height: 1.6; }
.ct-done b { color: #fff; }

@media (width <= 580px) {
    .ct { padding: 95px 20px 70px; }
    .ct-done { padding: 34px 22px; }
}

/* ---------------------------------------------------------------- Quiénes somos (/quienes-somos)

   La única página cuyo trabajo entero es dar confianza: contesta "¿a quién le estoy dando mi plata?". Sin fotos de
   equipo, sin tamaño de empresa y sin línea de tiempo (decisión del usuario).

   El encabezado es COMPACTO a propósito, como el resto del sitio: acá lo que convence son las tres garantías y la
   ficha de quién opera la plataforma, así que un hero a pantalla completa solo las empuja fuera de la vista. */
.ab-intro { padding: 120px 8vw 64px; }
.ab-intro__in { max-width: 700px; }
.ab-intro .kicker { color: var(--cyan); }
.ab-intro h1 { margin: 14px 0 18px; font-size: clamp(32px, 4.2vw, 50px); line-height: .98; letter-spacing: -2.4px; }
.ab-intro h1 em { color: var(--cyan); font-style: normal; font-weight: 400; }
.ab-intro p { margin: 0; max-width: 64ch; color: #8e919a; font-size: 15px; line-height: 1.75; }

.ab-why { background: var(--paper); padding: 78px 8vw 86px; }
.ab-why .section-heading { margin-bottom: 22px; }
/* El .section-heading por defecto llega a 77px: es la escala de la PORTADA, donde el titular es lo único en
   pantalla. Acá el h1 de la página mide 50px, así que sin bajarlo el subtítulo aplastaría al título. */
.ab-why .section-heading h2 { margin: 10px 0 0; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -1.6px; line-height: 1.02; }

/* Una sola columna acotada a 66ch: es texto para leer, no una grilla de tarjetas. */
.ab-why__body { max-width: 66ch; }
.ab-why__body p { margin: 0 0 13px; color: #55575c; font-size: 15px; line-height: 1.8; }
.ab-why__body p:last-child { margin-bottom: 0; }
.ab-why__body strong { color: var(--ink); }

/* Las tres garantías. El borde superior de color es lo único que las distingue entre sí: son tres afirmaciones del
   mismo peso, así que numerarlas o jerarquizarlas sugeriría un orden que no existe. */
.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }

.ab-value { border-top: 2px solid var(--ink); padding-top: 14px; }
.ab-value b { display: block; margin-bottom: 7px; font-size: 14px; letter-spacing: -.4px; }
.ab-value p { margin: 0; color: #74767b; font-size: 12.5px; line-height: 1.7; }
.ab-value--cyan { border-top-color: #17a894; }
.ab-value--violet { border-top-color: var(--violet); }
.ab-value--orange { border-top-color: var(--orange); }

/* Fondo distinto del bloque anterior: cambia el tema (por qué existe -> quién la opera) y el corte lo hace evidente. */
.ab-behind { background: #ecebe6; padding: 74px 8vw 84px; }
.ab-behind__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 46px; align-items: start; }
.ab-behind .kicker { color: #6d6e72; }
.ab-behind__body h2 { margin: 12px 0 16px; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.1; letter-spacing: -1.2px; }
.ab-behind__body p { margin: 0 0 13px; color: #55575c; font-size: 14.5px; line-height: 1.75; }
.ab-behind__body strong { color: var(--ink); }
.ab-behind__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* Ficha de datos verificables. Lo que la vuelve útil es que sean comprobables, no que sean muchos. */
.ab-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 26px; }
.ab-card > b { display: block; margin-bottom: 14px; font: 700 10px var(--font-mono); letter-spacing: 2px; color: #6d6e72; }
.ab-card ul { margin: 0; padding: 0; list-style: none; }
.ab-card li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.ab-card li:first-child { border-top: 0; padding-top: 0; }
.ab-card li span { color: #8e919a; flex: none; }
.ab-card li em { font-style: normal; font-weight: 600; text-align: right; word-break: break-word; }
.ab-card > p { margin: 14px 0 0; color: #9a9ca1; font-size: 11.5px; line-height: 1.6; }
.ab-card > p a { color: #74767b; text-decoration: underline; }

@media (width <= 900px) {
    .ab-intro { padding: 100px 6vw 52px; }
    .ab-why { padding: 60px 6vw 68px; }
    .ab-values { grid-template-columns: 1fr; }
    .ab-behind { padding: 58px 6vw 66px; }
    .ab-behind__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (width <= 580px) {
    .ab-intro { padding: 92px 20px 46px; }
    .ab-intro h1 { letter-spacing: -1.6px; }
    .ab-why { padding: 52px 20px 58px; }
    .ab-behind { padding: 50px 20px 58px; }
    .ab-behind__actions { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- Botón flotante de WhatsApp

   Va abajo a la DERECHA y el banner de cookies ocupa el ancho completo abajo, así que mientras el banner esté
   visible este botón queda encima de él. Se resuelve subiéndolo con una variable que site.js pone cuando el
   banner existe, en vez de dejar un margen fijo que sobraría el 99% de las visitas. */
.wa-fab {
    position: fixed;
    right: 18px;
    bottom: calc(18px + var(--fab-lift, 0px));
    z-index: 60;

    display: grid; place-items: center;
    width: 54px; height: 54px;
    border-radius: 50%;

    /* Verde propio de WhatsApp: es una marca reconocible y pintarlo con la paleta del sitio le quita justo lo
       único que hace que se entienda sin leer nada. Es la excepción deliberada a la paleta pública. */
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 30px #25d3664d, 0 2px 10px #0000004d;
    transition: transform .2s, box-shadow .2s, bottom .25s;
}

.wa-fab svg { width: 27px; height: 27px; fill: currentColor; }
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 38px #25d36666, 0 2px 10px #0000004d; }

/* El foco tiene que verse sobre el verde: el outline por defecto del navegador se pierde contra él. */
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (width <= 580px) {
    .wa-fab { right: 14px; bottom: calc(14px + var(--fab-lift, 0px)); width: 50px; height: 50px; }
    .wa-fab svg { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-fab { transition: none; }
    .wa-fab:hover { transform: none; }
}

/* ---------------------------------------------------------------- Listado de campañas (/campanas)

   Encabezado compacto y las tarjetas arriba: acá lo que se viene a ver son las campañas, así que un hero grande
   solo las empuja fuera de la primera pantalla. Reusa .cr-cards/.cr-card del perfil del creador — es la misma
   tarjeta, y tener dos que se ven parecido es cómo terminan divergiendo. */
.cl-intro { padding: 120px 8vw 58px; }
.cl-intro__in { max-width: 640px; }
.cl-intro .kicker { color: var(--cyan); }
.cl-intro h1 { margin: 14px 0 16px; font-size: clamp(32px, 4.2vw, 48px); line-height: .98; letter-spacing: -2.2px; }
.cl-intro h1 em { color: var(--cyan); font-style: normal; font-weight: 400; }
.cl-intro p { margin: 0; max-width: 60ch; color: #8e919a; font-size: 14.5px; line-height: 1.7; }

.cl { background: var(--paper); padding: 40px 8vw 90px; min-height: 40vh; }

/* Dato de la lista, no del título. Con una sola campaña decirlo evita que la página se lea como si algo hubiera
   fallado al cargar. */
.cl__count { margin: 0 0 18px; font: 700 11px var(--font-mono); letter-spacing: 1.6px; color: #74767b; text-transform: uppercase; }

/* Quién vende. Va sobre el título y en mayúsculas chicas para que no compita con él: es contexto, no encabezado. */
.cr-card__by { font: 700 10px var(--font-mono); letter-spacing: 1.4px; color: var(--violet); text-transform: uppercase; }

/* Estado vacío. No es un error ni un "sin resultados" —no hubo búsqueda—: entre dos campañas puede no haber
   ninguna abierta, y en un sitio de eventos acotados eso es normal. */
.cl-empty {
    display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: center;
    max-width: 860px; margin: 20px auto 0;
    background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px;
}

/* Las ilustraciones del pack traen su propio fondo oscuro, así que van montadas en un contenedor redondeado y
   nunca sueltas sobre el papel. */
.cl-empty img { width: 100%; border-radius: 14px; display: block; }
.cl-empty h2 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -1px; line-height: 1.15; }
.cl-empty p { margin: 0; color: #74767b; font-size: 14px; line-height: 1.7; }
.cl-empty__actions { margin: 18px 0 16px; }
.cl-empty__creator { font-size: 13px; }
.cl-empty__creator a { color: var(--violet); font-weight: 600; text-decoration: underline; }

@media (width <= 900px) {
    .cl-intro { padding: 100px 6vw 48px; }
    .cl { padding: 32px 6vw 70px; }
    .cl-empty { grid-template-columns: 1fr; gap: 22px; text-align: center; justify-items: center; }
    .cl-empty img { max-width: 240px; }
}

@media (width <= 580px) {
    .cl-intro { padding: 92px 20px 42px; }
    .cl-intro h1 { letter-spacing: -1.6px; }
    .cl { padding: 26px 20px 58px; }
    .cl-empty { padding: 24px 20px; }
}

/* Enlace de la sección de campañas de la portada hacia el catálogo completo. */
.home-campaigns__all { margin: 26px 0 0; text-align: center; }
.home-campaigns__all a { font-weight: 700; font-size: 14px; color: var(--violet); }
.home-campaigns__all a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Directorio de creadores (/creadores)

   Tarjeta propia y no la de campaña: lo que se compara acá no es un producto sino una persona, así que pesa la
   trayectoria (sorteos cerrados, premios entregados) y no un precio. */
/* El encabezado del directorio. Mismo tratamiento que la portada de respaldo de un perfil sin imagen
   (.cr-hero--fallback) y por el mismo motivo: un negro plano a ancho completo se lee como una imagen que no
   cargo, no como una decision de diseno. Antes esto era background: var(--ink) a secas.

   Diferencia con el perfil: alla la mascota va ATENUADA porque la portada es del creador y no nuestra. Aca la
   pagina SI es nuestra —es el directorio de la plataforma—, asi que puede presentarse, aunque sigue siendo
   decorativa y nunca compite con el titulo. */
/* ── Encabezado oscuro compartido por las paginas secundarias ────────────────────────────────────────────────
   Lo usan /campanas, /creadores, /como-funciona y /quienes-somos. Nacio en el directorio y estuvo unos dias
   SOLO ahi: las otras tres quedaron con un var(--ink) plano, que a ancho completo se lee como una imagen que no
   cargo y no como una decision de diseno. Se extrajo cuando el usuario lo reporto en las tres.

   Se comparte por CLASE y no repitiendo las reglas en .cl-intro/.ab-intro/.hiw-hero: cuatro copias del mismo
   tratamiento divergen en cuanto alguien ajusta una. Cada pagina conserva su propia clase para el espaciado y la
   tipografia; lo unico compartido es el fondo, la trama y la mascota. */
.page-intro {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(60% 120% at 82% 50%, #8057ff2e, #0000 62%),
        radial-gradient(50% 110% at 10% 60%, #62f2df1a, #0000 58%),
        var(--ink);
}

.page-intro:after {
    content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: radial-gradient(#62f2df26 1px, #0000 1px), radial-gradient(#8057ff2e 1px, #0000 1px);
    background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
}

/* Sin filtros, rotacion ni recorte: el pack de marca lo prohibe. El simbolo trae ~39% de aire transparente, de
   ahi el alto generoso. Va CENTRADA y contenida: con height 150% quedaba cortada arriba y abajo por el
   overflow:hidden, que fue el primer sintoma reportado. */
.page-intro__mascot {
    position: absolute; right: 5vw; top: 50%; transform: translateY(-50%); z-index: 0;
    height: 88%; max-height: 300px; width: auto; object-fit: contain;
    opacity: .28; pointer-events: none;
}

/* El contenido por encima de la trama y de la mascota. Se listan los cuatro envoltorios en vez de usar
   .page-intro > div para no pisar la propia mascota, que tambien es hija directa. */
.page-intro__in,
.dr-intro__in, .cl-intro__in, .ab-intro__in, .hiw-hero__in { position: relative; z-index: 1; }

.dr-intro { padding: 120px 8vw 58px; }
.dr-intro__in { max-width: 640px; }
.dr-intro .kicker { color: var(--cyan); }
.dr-intro h1 { margin: 14px 0 16px; font-size: clamp(32px, 4.2vw, 48px); line-height: .98; letter-spacing: -2.2px; }
.dr-intro h1 em { color: var(--cyan); font-style: normal; font-weight: 400; }
.dr-intro p { margin: 0; max-width: 60ch; color: #8e919a; font-size: 14.5px; line-height: 1.7; }

.dr { background: var(--paper); padding: 30px 8vw 90px; min-height: 40vh; }

/* Filtros por rubro. En móvil scrollean en horizontal en vez de apilarse, mismo criterio que las pestañas de
   campaña del panel: apilados empujarían las tarjetas fuera de la primera pantalla. */
.dr-tags { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; scrollbar-width: none; }
.dr-tags::-webkit-scrollbar { display: none; }

.dr-tag {
    flex: none;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid #11131826; background: #fff;
    font-size: 13px; font-weight: 600; color: #55575c; white-space: nowrap;
    transition: border-color .18s, color .18s, background .18s;
}

.dr-tag:hover { border-color: var(--ink); color: var(--ink); }
.dr-tag.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.dr__count { margin: 0 0 18px; font: 700 11px var(--font-mono); letter-spacing: 1.6px; color: #74767b; text-transform: uppercase; }

.dr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.dr-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    transition: transform .18s, border-color .18s;
}

.dr-card:hover { transform: translateY(-3px); border-color: #11131833; }

/* Portada. Sin imagen queda el degradado de marca en vez de un hueco gris: un creador sin portada no tiene por
   qué verse roto. */
/* La portada de la tarjeta. MISMO problema y misma correccion que el hero del perfil: eran 96px fijos, o sea
   entre 3,9:1 y 5,5:1 segun el ancho de la tarjeta (la grilla es de 3 columnas, asi que cada una mide entre
   ~370px y ~525px en escritorio). Con 136px queda entre 2,7:1 y 3,9:1, que rodea el 3:1 que el panel le
   previsualiza al creador al subir la imagen.

   La altura sigue siendo FIJA y no aspect-ratio, a diferencia del perfil, por una razon concreta: el avatar se
   posiciona en absoluto con un top en pixeles, asi que una altura que varie con el ancho lo dejaria flotando.
   Si algun dia se pasa a aspect-ratio, hay que mover el avatar con el. */
.dr-card__cover { height: 136px; background: linear-gradient(115deg, var(--deep), var(--violet)); }

/* object-position hacia ARRIBA, no al centro: con el default, el recorte de un retrato o una ilustracion cae en
   el torso y deja la cabeza afuera — el sintoma que se veia en el directorio. Mismo 28% que .cr-hero__img, para
   que la misma imagen se recorte igual en la tarjeta y en el perfil al que lleva. */
.dr-card__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }

/* Monta sobre la portada, así que lleva fondo y borde propios: sin ellos, un PNG con transparencia se mezclaría
   con la imagen de atrás. */
.dr-card__avatar {
    /* 136 - 34: el mismo solape de 34px que tenia con la portada de 96px. Si cambia la altura de la portada,
       este numero cambia con ella. */
    position: absolute; top: 102px; left: 16px;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--paper); border: 3px solid #fff; overflow: hidden;
    display: grid; place-items: center;
    font: 700 22px var(--font-sans); color: var(--violet);
}

.dr-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.dr-card__body { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 26px 16px 16px; }
.dr-card__body h2 { margin: 0; font-size: 17px; letter-spacing: -.6px; display: flex; align-items: center; gap: 6px; }

/* La marca de revisado significa que pasó la revisión de staff, que es lo que el sitio promete. */
.dr-card__check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #17a894; color: #fff; font-size: 10px; flex: none; }

.dr-card__tagline { margin: 0; color: #74767b; font-size: 13px; line-height: 1.5; }
.dr-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dr-card__tags span { font: 700 9.5px var(--font-mono); letter-spacing: .8px; text-transform: uppercase; color: var(--violet); background: #8057ff14; padding: 4px 7px; border-radius: 5px; }

.dr-card__foot { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.dr-card__open { font-size: 12.5px; font-weight: 700; color: #17a894; }
.dr-card__quiet { font-size: 12.5px; color: #9a9ca1; }
.dr-card__stat { font-size: 11.5px; color: #74767b; }

.dr-empty { max-width: 560px; margin: 30px auto 0; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px 28px; }
.dr-empty h2 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -1px; line-height: 1.15; }
.dr-empty p { margin: 0 0 20px; color: #74767b; font-size: 14px; line-height: 1.7; }

@media (width <= 900px) {
    .dr-intro { padding: 100px 6vw 48px; }
    .dr { padding: 24px 6vw 70px; }
    .dr-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (width <= 580px) {
    .dr-intro { padding: 92px 20px 42px; }
    /* En la banda angosta del telefono la mascota queda detras del titulo, mismo criterio que .cr-hero__mascot. */
    .page-intro__mascot { display: none; }
    .dr-intro h1 { letter-spacing: -1.6px; }
    .dr { padding: 20px 20px 58px; }
    .dr-cards { grid-template-columns: 1fr; }
    .dr-empty { padding: 26px 20px; }
}

/* ---------------------------------------------------------------- Buscador de los listados (.ls)

   Compartido por /campanas y /creadores: es la misma acción, y dos buscadores que se ven distinto se leen como
   dos funciones distintas. Es un <form method="get"> real, sin JavaScript. */
.ls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }

.ls input {
    flex: 1 1 260px; min-width: 0;
    height: 42px; padding: 0 15px;
    border: 1px solid #11131826; border-radius: 999px;
    background: #fff; color: var(--ink);
    font-family: inherit; font-size: 14px;
    transition: border-color .18s;
}

.ls input::placeholder { color: #9a9ca1; }
.ls input:focus { outline: none; border-color: var(--ink); }

/* Safari dibuja su propia X en type="search" y queda encimada con el borde redondeado. */
.ls input::-webkit-search-decoration,
.ls input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ls button {
    flex: none; height: 42px; padding: 0 20px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--ink); color: #fff;
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    transition: opacity .18s;
}

.ls button:hover { opacity: .88; }
.ls__clear { flex: none; font-size: 13px; color: #74767b; text-decoration: underline; }
.ls__clear:hover { color: var(--ink); }

@media (width <= 580px) {
    /* El botón baja a ancho completo en vez de comprimir el campo hasta que no entre lo que se escribe. */
    .ls input { flex: 1 1 100%; }
    .ls button { flex: 1 1 100%; }
}