/* ==========================================================================
IMPULSA YOGIQ · hoja de estilo única
Tokens de marca tomados del reskin YOGIQ.
========================================================================== */
/* Tokens tomados de la landing en producción (yogiq.app), no del PDF antiguo.
Titulares en Archivo · cuerpo y cifras en DM Sans · Syne SOLO para el logo. */
:root{
--black:#0A0A0B;
--graphite:#17171C;
--graphite-mid:#212128;
--graphite-soft:#35353F;
--white:#F8F8F4;
--grey-1:#E0E0D8;
--grey-2:#ACACB6;
--grey-3:#505050;
--green:#B8F442;
--green-soft:#C8F96A;
--green-glow:rgba(184,244,66,.15);
--gold:#F0B840;
--gold-soft:#F5CC70;
--gold-glow:rgba(240,184,64,.15);
/* alias internos de este proyecto */
--bg:var(--black);
--surface:var(--graphite);
--card:var(--graphite-mid);
--line:var(--graphite-soft);
--text:var(--white);
--muted:var(--grey-2);
--raised:#2A2A33; /* superficie elevada: lo que debe destacar */
--green-dim:#7FA82E;
--gold-dim:#A87F2C;
--danger:#E8674F;
--radius:14px;
--maxw:1080px;
--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--display:"Archivo",var(--sans);
--logo:"Syne",var(--sans);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:var(--sans);font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 .5em}
/* Cifras SIEMPRE en DM Sans con numeración tabular. Nunca en la display. */
.fig{font-family:var(--sans);font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
/* Bandas de fondo. Las secciones alternan para que la página respire
en vez de ser un bloque negro de cinco pantallas. */
.band-graphite{background:var(--graphite)}
.band-mid{background:var(--graphite-mid)}
.band-gold{background:linear-gradient(180deg,var(--gold-glow),transparent 70%),var(--graphite)}
.band-green{background:linear-gradient(180deg,var(--green-glow),transparent 70%),var(--graphite)}
.band-graphite,.band-mid,.band-gold,.band-green{border-block:1px solid var(--line)}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.center{text-align:center}
.mono-num{font-variant-numeric:tabular-nums}
/* --- layout --------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* Columna de lectura estrecha SIN mover el eje: el contenedor sigue siendo el
mismo, solo se limita el ancho de los hijos. Si se estrecha el .wrap, el
bloque se centra y la página cambia de eje al navegar. */
.wrap.narrow > *{max-width:760px}
section{padding:clamp(48px,8vw,88px) 0}
section.tight{padding:clamp(32px,5vw,52px) 0}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* Barra del entorno de pruebas. Existe para que nunca confundas una web con
la otra: la de pruebas se reconoce de un vistazo y no la indexa nadie. */
.envbar{background:var(--gold);color:var(--black);text-align:center;font-size:.78rem;
font-weight:600;letter-spacing:.04em;padding:6px 20px}
/* --- header --------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{font-family:var(--logo);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.brand em{font-style:normal;color:var(--green)}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{font-size:.9rem;color:var(--muted)}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.lang{display:flex;gap:6px;font-size:.78rem;color:var(--muted)}
.lang a[aria-current]{color:var(--green)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
@media(max-width:900px){
.burger{display:block}
.nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);
flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 16px;margin:0}
.nav.open{display:flex}
.nav a{padding:10px 0;font-size:1rem;width:100%}
}
/* --- botones -------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 24px;border-radius:999px;border:1px solid transparent;
font-weight:600;font-size:.95rem;cursor:pointer;transition:.15s ease;
}
.btn-primary{background:var(--green);color:#0A0A0B}
.btn-primary:hover{background:#C9FF5B}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--text)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-gold{background:var(--gold);color:#0A0A0B}
.btn-gold:hover{background:#FFD067}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
/* --- tarjetas ------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.stat{background:linear-gradient(180deg,var(--raised),var(--card));border:1px solid var(--line);
border-radius:var(--radius);padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.stat .k{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1;color:var(--green)}
.stat .k.gold{color:var(--gold)}
.stat .l{font-size:.78rem;color:var(--grey-1);opacity:.72;text-transform:uppercase;letter-spacing:.07em;margin-top:8px}
.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:12px;font-weight:600}
/* --- hero ----------------------------------------------------------------- */
.hero{padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero::after{
content:"";position:absolute;inset:auto 50% -55% auto;transform:translateX(50%);
width:min(900px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(184,244,66,.10),transparent 62%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero .lead{margin-bottom:32px}
/* --- ventana activa ------------------------------------------------------- */
.window-bar{border:1px solid var(--gold-dim);background:linear-gradient(180deg,rgba(240,184,64,.10),rgba(240,184,64,.03));border-radius:var(--radius);padding:22px 24px}
.window-bar .eyebrow{color:var(--gold)}
.window-grid{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.window-grid .x{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;font-size:2.2rem;line-height:1;color:var(--gold)}
.countdown{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;font-size:1.6rem;color:var(--text);font-variant-numeric:tabular-nums}
.window-off{border:1px dashed var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--muted)}
/* --- artefactos ----------------------------------------------------------- */
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:560px}
.artgrid.full{gap:0;border-radius:var(--radius);overflow:hidden}
.art{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer}
.artgrid.full .art{border-radius:0;border:0}
.art img{width:100%;height:100%;object-fit:cover;transition:.25s}
.art.locked img{filter:grayscale(1) brightness(.32) contrast(.9)}
/* Los bloqueados no llevan precio: no están a la venta, se desbloquean. */
.art.nocost::after{content:none}
.art:hover img{transform:scale(1.04)}
.art .n{position:absolute;top:8px;left:8px;z-index:1;font-weight:600;font-size:.78rem;
color:var(--green);background:rgba(10,10,11,.72);border-radius:6px;padding:2px 7px;line-height:1.3}
.art.locked .n{color:var(--muted)}
.artgrid.lg{max-width:720px}
/* --- calculadora ---------------------------------------------------------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.amount-input{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.amount-input span{font-family:var(--sans);font-weight:600;font-size:1.8rem;color:var(--muted)}
.amount-input input{flex:1;min-width:0;background:none;border:0;outline:0;font-family:var(--sans);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:2.2rem;width:100%}
.amount-input input:focus{color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:.85rem;cursor:pointer;color:var(--muted)}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#0A0A0B;font-weight:600}
.result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.result .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.result .row:last-of-type{border-bottom:0}
.result .row .lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.result .row .val{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:1.7rem;line-height:1}
.result .val.green{color:var(--green)}
.result .val.gold{color:var(--gold)}
.next-step{margin-top:18px;padding:14px 16px;border-radius:10px;background:rgba(184,244,66,.08);border:1px solid rgba(184,244,66,.25);font-size:.9rem}
/* --- progreso ------------------------------------------------------------- */
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .4s ease}
/* --- tablas / listas ------------------------------------------------------ */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
.table td{padding:14px 12px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table .pos{font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);width:48px}
.table tr.me{background:rgba(184,244,66,.07)}
.table tr.me .pos{color:var(--green)}
.amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.plus{color:var(--green)}
.minus{color:var(--danger)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.b-pend{background:rgba(240,184,64,.15);color:var(--gold)}
.b-ok{background:rgba(184,244,66,.15);color:var(--green)}
.b-no{background:rgba(232,103,79,.15);color:var(--danger)}
.b-founder{background:rgba(240,184,64,.16);color:var(--gold);margin-left:8px;font-size:.66rem}
/* Los 31 primeros: una lista, no una tabla. Es un muro de agradecimiento. */
.founders{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px 22px;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));font-size:.9rem}
.founders li{display:flex;gap:10px;align-items:baseline;color:var(--grey-1)}
.founders .n{font-variant-numeric:tabular-nums;font-size:.72rem;color:var(--gold-dim);min-width:18px}
/* La pieza viva ahora mismo, y las que aún no han salido. */
.art.live{outline:2px solid var(--green);outline-offset:-2px;z-index:2}
.tag-live{position:absolute;top:8px;right:8px;z-index:1;background:var(--green);color:var(--black);
font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.art.soon img{filter:grayscale(1) brightness(.3)}
/* --- recompensas ---------------------------------------------------------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.reward{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s}
.reward:hover{border-color:var(--green-dim)}
/* Sin fotos reales, ninguna imagen: un hueco gris ensucia más de lo que aporta. */
.reward.flat{border-left:2px solid var(--green-dim)}
.reward .body{padding:20px;display:flex;flex-direction:column;flex:1}
.reward .cost{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--green);font-size:1.25rem}
.reward .value{font-size:.82rem;color:var(--muted);text-decoration:line-through}
.reward .foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.seats{font-size:.78rem;color:var(--gold)}
/* --- lista "qué incluye" -------------------------------------------------- */
.includes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.includes li{position:relative;padding-left:24px;color:var(--muted)}
.includes li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green)}
/* Enlaces dentro de texto: que se vean enlaces. */
.inline-link{color:var(--green);border-bottom:1px solid rgba(184,244,66,.35);white-space:nowrap}
.inline-link:hover{border-bottom-color:var(--green)}
/* Lo que le falta al mecenas es el mensaje principal de la tarjeta, no letra pequeña. */
.need{font-size:.82rem;font-weight:600;color:var(--gold);white-space:nowrap}
/* --- pasos ---------------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:16px}
.step{counter-increment:s;display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.step::before{content:counter(s);font-weight:600;font-variant-numeric:tabular-nums;font-size:1.3rem;color:var(--green);
flex:0 0 42px;height:42px;border-radius:50%;border:1px solid var(--green-dim);display:grid;place-items:center}
.step h3{margin-bottom:.25em}
.step p:last-child{margin-bottom:0}
/* hueco para las capturas reales de Artizen (Fase 4) */
/* Captura de pantalla dentro de un paso.
Borde y fondo claro porque las capturas de Artizen SON claras: sin ellos,
una imagen blanca sobre una tarjeta oscura se ve como un agujero de luz con
los bordes cortados a cuchillo. */
/* Sin límite de ancho: estas capturas llevan texto anotado encima, y a 560 px
las anotaciones no se leían. Ocupan el paso entero. */
.shot{margin:14px 0 0}
.shot img{width:100%;height:auto;display:block;border-radius:8px;
border:1px solid var(--line);background:#fff}
/* --- Aclaración dentro de un paso --------------------------------------- */
/* Dos niveles a propósito. La normal es un detalle útil; la marcada con `ojo`
es algo que, si se pasa por alto, obliga a repetir el paso o deja la
aportación sin poder reconocerse. Si todo se destacara, no se destacaría
nada: por eso solo dos de los cinco pasos la llevan. */
.aviso{margin-top:12px;font-size:.92rem;color:var(--grey-1);
border-left:2px solid var(--line);padding-left:12px}
.aviso.ojo{border-left-color:var(--gold);background:rgba(240,184,64,.07);
padding:10px 12px;border-radius:0 6px 6px 0}
.aviso.ojo b{color:var(--gold)}
/* --- formularios ---------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{
width:100%;padding:13px 15px;background:var(--surface);border:1px solid var(--line);
border-radius:10px;outline:0
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.notice{padding:14px 16px;border-radius:10px;font-size:.9rem;border:1px solid var(--line);background:var(--surface)}
.notice.warn{border-color:var(--gold-dim);background:rgba(240,184,64,.07)}
/* --- pie ------------------------------------------------------------------ */
.site-foot{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:.85rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.site-foot a:hover{color:var(--green)}
.disclaimer{max-width:70ch;font-size:.78rem;line-height:1.6;margin-top:18px;color:#6E6E68}
/* --- utilidades ----------------------------------------------------------- */
.sep{height:1px;background:var(--line);border:0;margin:0}
.stack-sm>*+*{margin-top:10px}
.hide{display:none!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ==========================================================================
ZONA DEL MECENAS
El problema que resuelve: con sesión iniciada, el menú de la web y el de
"mi cuenta" eran el mismo, así que pulsar "Registrar aportación" parecía
sacarte de tu panel. Ahora hay dos niveles: arriba la web, debajo TU barra,
que va contigo a todas las páginas y lleva tu saldo siempre a la vista.
========================================================================== */
/* Botón de cuenta en la cabecera: con sesión, destaca sobre el resto. */
.btn-account{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:999px;font-size:.85rem;font-weight:600;
border:1px solid var(--green);color:var(--green);background:rgba(184,244,66,.08);
transition:.15s ease;white-space:nowrap;
}
.btn-account:hover{background:var(--green);color:var(--black)}
.btn-account.on{background:var(--green);color:var(--black)}
.btn-account .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* El aviso que viaja entre páginas, justo debajo de las barras y no flotando
sobre la cabecera, que es donde estaba y parecía un error de maquetación. */
main > .wrap > .notice,
body > .wrap > .notice{margin:18px auto 0}
/* --- contraste: lo que tiene que destacar, destaca ----------------------- */
.notice{background:var(--raised);border-color:var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.field input,.field select,.field textarea{background:var(--black)}
.table th{color:var(--grey-1);opacity:.8}
.site-foot{background:var(--graphite);}
/* ==========================================================================
PANEL DEL MECENAS · inicio
Dos estados en la misma página: arranque (qué hacer) y actividad (qué llevas).
El titular es pequeño a propósito: en un panel, el sitio se lo gana lo que
se puede pulsar, no el título.
========================================================================== */
.panel-top{padding-top:clamp(26px,4vw,40px)}
.hola{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);
font-weight:600;margin:0 0 6px}
.panel-h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.35em}
/* --- arranque: los tres pasos ------------------------------------------- */
.pasos{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;max-width:720px}
.paso{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:20px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.paso .num{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--raised);border:1px solid var(--line);color:var(--green);
font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums}
.paso h3{margin:0 0 .25em;font-size:1.05rem}
.paso p{margin:0 0 14px}
.paso p:last-child{margin-bottom:0}
/* La pieza viva de la ronda, para que se vea qué está en juego ahora. */
.ronda{display:flex;gap:22px;align-items:center;margin-top:26px;max-width:720px;
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}
.ronda img{width:110px;height:110px;object-fit:cover;border-radius:10px;flex:none}
.ronda h3{margin:0 0 .2em}
/* --- actividad: lo siguiente que desbloquea ----------------------------- */
.pend-line{display:flex;align-items:center;gap:9px;margin:0;color:var(--gold);font-size:.9rem}
.pend-line .dotp{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;
box-shadow:0 0 0 4px rgba(240,184,64,.18)}
.nextup{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:24px;
background:linear-gradient(180deg,rgba(240,184,64,.08),transparent),var(--card);
border:1px solid var(--gold-dim);border-radius:var(--radius);padding:22px 24px}
.nextup-txt{flex:1 1 300px;min-width:0}
.nextup-txt .eyebrow{color:var(--gold);margin-bottom:8px}
.nextup-txt .big{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.15;
letter-spacing:-.02em;margin:0 0 8px}
.nextup-act{flex:1 1 220px;display:flex;flex-direction:column;gap:14px}
.nextup-act .btn{width:100%}
/* --- invitación --------------------------------------------------------- */
.refbox{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.refbox > div:first-child{flex:1 1 280px;min-width:0}
.refbox-copy{flex:1 1 300px;display:flex;gap:10px;align-items:center;min-width:0}
.refbox-copy code{flex:1 1 auto;min-width:0;background:var(--black);border:1px solid var(--line);
border-radius:10px;padding:11px 14px;font-size:.82rem;overflow-wrap:anywhere}
@media(max-width:620px){
/* Los contadores se quedan en dos columnas: en una sola, cuatro cifras son
cuatro pantallazos de scroll antes de llegar a lo accionable. */
.grid.g4{grid-template-columns:repeat(2,1fr)}
.stat{padding:16px}
.stat .k{font-size:1.5rem}
.paso{padding:16px 18px;gap:13px}
.paso .btn{width:100%}
.ronda{gap:16px;padding:16px}
.ronda img{width:78px;height:78px}
.nextup,.refbox{padding:18px}
/* El botón de copiar, a lo ancho y debajo: al lado de una URL larga acaba
apretado contra el borde y es el más difícil de acertar con el pulgar. */
.refbox-copy{flex-direction:column;align-items:stretch}
.refbox-copy .btn{width:100%}
}
/* ==========================================================================
PANEL v1.1 · aprovechar el ancho, salir del negro plano y hacer de la
invitación algo que se pueda usar sin pensar qué escribir.
========================================================================== */
/* Clases propias (.pasos/.paso) y no .steps/.step: esas ya existían para
«Cómo apoyar», donde el número lo pinta un contador de CSS en ::before.
Compartirlas hacía que cada tarjeta enseñara DOS números, el del contador
y el nuestro. Los pasos ya NO son una lista numerada: el navegador pintaba su propia
viñeta además del círculo, y apagarla no era fiable en todos. Con
contenedores normales el número solo puede salir una vez, el que ponemos. */
.paso .num{
display:inline-grid;place-content:center;
width:32px;height:32px;min-width:32px;min-height:32px;
padding:0;line-height:1;border-radius:50%;
}
/* La zona del panel deja de ser negro sobre negro: tiene su propio suelo,
algo más claro, para que las tarjetas se apoyen en algo y no floten. */
.panel-top{
background:
radial-gradient(900px 320px at 12% -10%,rgba(184,244,66,.07),transparent 70%),
linear-gradient(180deg,#16161C,#0E0E12);
border-bottom:1px solid var(--line);
padding-bottom:clamp(34px,5vw,52px);
}
/* En pantalla ancha los tres pasos van en fila: es una secuencia y se lee como
tal, y de paso se deja de desperdiciar media pantalla a la derecha. */
@media(min-width:900px){
.pasos{grid-template-columns:repeat(3,1fr);max-width:none;gap:18px}
.paso{flex-direction:column;gap:12px}
.paso > div{display:flex;flex-direction:column;flex:1}
.paso p{flex:1}
.paso .btn{align-self:flex-start}
.ronda{max-width:none}
}
/* --- invitación: el bloque con más peso de la página -------------------- */
.band-invite{
background:
radial-gradient(700px 300px at 85% 0%,rgba(240,184,64,.10),transparent 70%),
var(--graphite);
border-block:1px solid var(--line);
}
.invite-head{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px}
.invite-head > div:first-child{flex:1 1 320px;min-width:0}
.invite-head h2{margin:0 0 .3em;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.invite-link{flex:1 1 340px;display:flex;gap:10px;align-items:center;min-width:0}
.invite-link code{flex:1 1 auto;min-width:0;background:var(--black);border:1px solid var(--line);
border-radius:10px;padding:12px 14px;font-size:.82rem;overflow-wrap:anywhere}
.invite-lbl{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
font-weight:600;margin:0 0 14px}
.invite-msgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.invite-msgs{grid-template-columns:1fr}}
.msg{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);
padding:18px 20px;display:flex;flex-direction:column;gap:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.msg p{margin:0;flex:1;font-size:.9rem;line-height:1.55;color:var(--grey-1)}
.msg-act{display:flex;gap:8px;flex-wrap:wrap}
.invite-nets{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px}
.invite-nets .net{font-size:.85rem;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px}
.invite-nets .net:hover{color:var(--green);border-bottom-color:var(--green)}
@media(max-width:620px){
.invite-link{flex-direction:column;align-items:stretch}
.invite-link .btn{width:100%}
.msg-act .btn{flex:1 1 auto}
}
/* ==========================================================================
Zona del mecenas: que se distinga de la web, no que se le parezca.
La cabecera y la barra personal tenían tonos casi iguales y se leían como
un solo menú de doce enlaces. Ahora la barra tiene su propio color, su
línea verde arriba y el botón de cuenta va en verde sólido siempre.
========================================================================== */
/* Con sesión, el botón de cuenta es el único elemento sólido de la cabecera. */
.btn-account{background:var(--green);color:var(--black);border-color:var(--green);font-weight:700}
.btn-account:hover{background:#C9FF5B;color:var(--black)}
.btn-account.on{box-shadow:0 0 0 3px rgba(184,244,66,.25)}
.btn-account .dot{background:var(--black);opacity:.55}
/* --- documentos legales --------------------------------------------------- */
.legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.legal-nav a{font-size:.85rem;color:var(--muted);border:1px solid var(--line);
border-radius:999px;padding:8px 15px;transition:.15s ease}
.legal-nav a:hover{color:var(--text);border-color:var(--muted)}
.legal-nav a[aria-current]{background:var(--green);border-color:var(--green);color:var(--black);font-weight:600}
.doc h2{font-size:1.15rem;margin:32px 0 .5em;padding-top:20px;border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:24px}
.doc h3{font-size:1rem;margin:22px 0 .4em;color:var(--grey-1)}
.doc p,.doc li{color:var(--muted)}
.doc ul{margin:0 0 1em;padding-left:20px}
.doc li{margin-bottom:6px}
.doc .dl{display:grid;grid-template-columns:190px 1fr;gap:6px 18px;margin:0 0 1em}
.doc .dl dt{color:var(--grey-1);font-size:.9rem}
.doc .dl dd{margin:0;color:var(--muted)}
@media(max-width:600px){.doc .dl{grid-template-columns:1fr;gap:2px 0}
.doc .dl dd{margin-bottom:10px}}
.doc .fecha{font-size:.8rem;color:var(--grey-3);margin-top:34px;border-top:1px solid var(--line);padding-top:16px}
/* La frase que más protege: separada, visible, no enterrada en el párrafo. */
.clave{border-left:3px solid var(--green);background:rgba(184,244,66,.06);
border-radius:0 10px 10px 0;padding:16px 20px;margin:0 0 1.4em}
.clave p{margin:0;color:var(--grey-1)}
/* --- pie: el legal, separado de la navegación --------------------------- */
.foot-legal{border-top:1px solid var(--line);margin-top:28px;padding-top:22px}
.foot-legal .frases{display:grid;gap:10px;max-width:70ch;margin:0 0 18px}
/* Estas dos frases son las que impiden que la web se lea como un producto
financiero, así que tienen que poder leerse. En `--grey-3` (#505050) sobre
el grafito daban 2,2 de contraste: por debajo del mínimo para texto pequeño,
y medido, no opinado. El aviso legal que no se lee no protege a nadie. */
.foot-legal .frases p{margin:0;font-size:.8rem;line-height:1.6;color:var(--grey-2)}
.foot-legal .enlaces{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem}
/* Casilla de aceptación: una sola, obligatoria, y con el texto legible.
Nada de letra de 10px: si no se puede leer, el consentimiento no vale. */
.check{display:flex;gap:12px;align-items:flex-start;margin:6px 0 10px;cursor:pointer}
.check input{margin:2px 0 0;width:19px;height:19px;flex:none;accent-color:var(--green)}
.check span{font-size:.86rem;line-height:1.55;color:var(--grey-1)}
/* ==========================================================================
NAVEGACIÓN DEL PANEL
En PC, barra lateral fija: separa las dos navegaciones por eje y no por
color, que es lo único que impide leerlas como un menú partido. En móvil,
barra inferior fija, al alcance del pulgar.
Va en posición fija y el hueco lo abre un padding en el : así ninguna
página tiene que cambiar su marcado para hacerle sitio.
========================================================================== */
.panelnav{
position:fixed;z-index:60;
display:flex;flex-direction:column;
background:linear-gradient(180deg,#1B2216,#141811);
border-right:1px solid rgba(184,244,66,.18);
}
.panelnav .pn-list{list-style:none;margin:0;padding:0}
.panelnav a{display:flex;align-items:center;gap:11px;color:#C3D0B2;transition:.15s ease}
.panelnav svg{width:19px;height:19px;flex:none}
.panel-strip{display:none}
/* --- PC ------------------------------------------------------------------ */
@media(min-width:900px){
body.panel{padding-left:238px}
.panelnav{top:0;left:0;bottom:0;width:238px;padding:22px 16px 18px;overflow-y:auto}
.pn-saldo{background:rgba(184,244,66,.09);border:1px solid rgba(184,244,66,.28);
border-radius:12px;padding:16px 18px;margin-bottom:20px}
.pn-saldo .n{font-size:1.9rem;line-height:1;color:var(--green)}
.pn-saldo .l{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#93A583;margin-top:6px}
.panelnav .pn-list li{margin-bottom:2px}
.panelnav .pn-list a{padding:11px 14px;border-radius:10px;font-size:.92rem}
.panelnav .sm{display:none}
.panelnav .pn-list a:hover{background:rgba(255,255,255,.06);color:#fff}
.panelnav .pn-list a.on{background:var(--green);color:var(--black);font-weight:600}
.pn-salir{margin-top:auto;padding:11px 14px;font-size:.85rem;
border-top:1px solid rgba(184,244,66,.15);padding-top:16px}
.pn-salir:hover{color:var(--danger)}
}
/* --- Móvil --------------------------------------------------------------- */
@media(max-width:899px){
body.panel{padding-bottom:74px}
/* El saldo no cabe abajo sin apretar los destinos, así que sube a una tira
bajo la cabecera. Sigue estando a la vista sin abrir nada. */
.panel-strip{display:block;background:#181C16;border-bottom:1px solid rgba(184,244,66,.18)}
.panel-strip .wrap{display:flex;align-items:center;justify-content:space-between;
padding-block:9px;font-size:.85rem;color:#A8B79A}
.panel-strip .fig{color:var(--green);font-size:1.05rem;margin-right:5px}
.panel-strip .l{text-transform:uppercase;letter-spacing:.07em;font-size:.68rem}
.panel-strip a{color:#A8B79A;font-size:.8rem}
.panelnav{left:0;right:0;bottom:0;top:auto;border-right:0;
border-top:1px solid rgba(184,244,66,.25);
padding:6px 6px calc(6px + env(safe-area-inset-bottom));
box-shadow:0 -8px 22px -16px #000}
.pn-saldo,.pn-salir,.panelnav .solo-pc,.panelnav .lg{display:none}
/* Cinco destinos, en el orden de la barra y no en el del menú de PC. */
.panelnav .pn-list{display:flex;width:100%;align-items:flex-end}
.panelnav .pn-list li{flex:1;order:var(--orden,9)}
.panelnav .pn-list a{flex-direction:column;gap:4px;justify-content:center;
padding:8px 2px;border-radius:10px;font-size:.66rem;text-align:center;line-height:1.15}
.panelnav .pn-list a.on{color:var(--green);background:rgba(184,244,66,.12)}
.panelnav svg{width:22px;height:22px}
/* La acción principal sale del carril: círculo elevado en el centro.
Es el patrón de las apps que viven de que pulses ese botón —lo hacen
Instagram, YouTube y X— y resuelve dos cosas de golpe: no necesita
etiqueta larga que parta en dos líneas, y deja de competir de tú a tú
con «Mis datos». */
.panelnav .fab a{
position:relative;top:-16px;
width:56px;height:56px;margin:0 auto;padding:0;
border-radius:50%;background:var(--green);color:var(--black);
box-shadow:0 6px 18px -6px rgba(184,244,66,.55), 0 0 0 5px #141811;
gap:0;
}
.panelnav .fab a svg{width:26px;height:26px;stroke-width:2.4}
.panelnav .fab .sm{
position:absolute;top:58px;left:50%;transform:translateX(-50%);
color:#C3D0B2;font-size:.66rem;white-space:nowrap
}
.panelnav .fab a.on{background:var(--green);color:var(--black)}
}
/* ==========================================================================
CONTRASTE EN LO QUE HAY QUE LEER
El problema real no era el fondo oscuro: era que un aviso importante —«te
hemos enviado el enlace»— tenía el mismo gris que una tarjeta cualquiera.
Si nada destaca, nada se lee. Estos son los tres estados que sí tienen que
frenar el ojo.
========================================================================== */
.notice{
border-left:3px solid var(--green);
border-radius:0 12px 12px 0;
background:linear-gradient(90deg,rgba(184,244,66,.12),rgba(184,244,66,.04));
border-top-color:rgba(184,244,66,.22);
border-right-color:rgba(184,244,66,.22);
border-bottom-color:rgba(184,244,66,.22);
color:#E8F5D4;padding:16px 20px;font-size:.95rem;line-height:1.55;
box-shadow:none;
}
.notice.warn{
border-left-color:var(--gold);
background:linear-gradient(90deg,rgba(240,184,64,.14),rgba(240,184,64,.04));
border-top-color:rgba(240,184,64,.25);
border-right-color:rgba(240,184,64,.25);
border-bottom-color:rgba(240,184,64,.25);
color:#FBEBC8;
}
.notice strong{color:#fff}
/* La tarjeta de un formulario es donde se actúa: se levanta del fondo. */
form.card{background:linear-gradient(180deg,var(--raised),var(--card));
box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -30px #000}
/* Y la entradilla de una página deja de ser gris apagado: es lo primero que
se lee y hasta ahora competía en tono con el texto de relleno. */
.lead{color:var(--grey-1);opacity:.9}
/* --- Qué es un artefacto -------------------------------------------------- */
.artexp{display:grid;gap:30px;align-items:start}
@media(min-width:940px){.artexp:not(.compacto){grid-template-columns:1.15fr .85fr}}
.artexp h2{margin:0 0 .4em}
.artexp-3{display:grid;gap:18px;margin-top:22px}
@media(min-width:640px){.artexp-3{grid-template-columns:repeat(3,1fr)}}
.artexp-3 h3{font-size:.95rem;margin:0 0 .3em;color:var(--green)}
.artexp-3 p{margin:0}
/* El vídeo no se carga hasta que se pulsa: hasta entonces esto es solo un
botón, sin una sola petición a Vimeo. */
.artexp-video{position:relative}
.vfacade,.artexp-video iframe{
width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);display:block
}
.vfacade{
background:linear-gradient(145deg,var(--raised),var(--black));
color:var(--text);cursor:pointer;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;transition:.15s ease
}
.vfacade:hover{border-color:var(--green)}
.vfacade .play{width:58px;height:58px;border-radius:50%;background:var(--green);color:var(--black);
display:grid;place-items:center}
.vfacade .play svg{width:26px;height:26px;margin-left:3px}
.vfacade .vt{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.vfacade .vl{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* --- Selector de cantidad ------------------------------------------------- */
.stepper{display:flex;align-items:stretch;gap:0;max-width:190px;
border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--black)}
.stepper button{
width:52px;flex:none;background:var(--raised);border:0;color:var(--text);
font-size:1.35rem;line-height:1;cursor:pointer;transition:.12s ease
}
.stepper button:hover{background:var(--green);color:var(--black)}
.stepper button:active{transform:scale(.94)}
.stepper input{
flex:1;min-width:0;border:0;background:transparent;text-align:center;
font-weight:600;font-size:1.15rem;font-variant-numeric:tabular-nums;padding:13px 0;
-moz-appearance:textfield
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus:not(:focus-visible){outline:none}
/* --- Cuenta atrás: que se note que corre --------------------------------- */
.countdown i{font-style:normal;font-size:.52em;font-weight:600;color:var(--muted);margin-left:1px}
.countdown b{font-weight:inherit}
.countdown .seg{
display:inline-block;min-width:1.9em;color:var(--gold);
animation:pulso 1s ease-in-out infinite
}
@keyframes pulso{0%,100%{opacity:1}55%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.countdown .seg{animation:none}}
/* ---------------------------------------------------------------------------
Aviso flotante
Va fijo al viewport y no al documento: el error de un formulario devuelve a
un ancla que puede estar muy abajo, y un mensaje que hay que ir a buscar
arriba es un mensaje que nadie lee.
--------------------------------------------------------------------------- */
.flash{
position:fixed; z-index:120;
top:calc(env(safe-area-inset-top,0px) + 14px);
left:50%; transform:translateX(-50%);
width:min(620px, calc(100vw - 28px));
display:flex; align-items:flex-start; gap:12px;
padding:14px 14px 14px 16px;
border-radius:12px; font-size:.92rem; line-height:1.5;
border:1px solid var(--green); background:#12210B; color:var(--ink);
box-shadow:0 14px 40px rgba(0,0,0,.55);
animation:flash-in .22s ease-out both;
}
.flash.warn{ border-color:var(--gold); background:#241B06; }
.flash span{ flex:1 }
.flash-x{
flex:0 0 auto; width:30px; height:30px; margin:-4px -4px 0 0;
border:0; border-radius:8px; background:transparent; cursor:pointer;
color:var(--muted); font-size:1.3rem; line-height:1;
}
.flash-x:hover{ color:var(--ink); background:rgba(255,255,255,.07) }
.flash.va{ animation:flash-out .3s ease-in both }
@keyframes flash-in { from{opacity:0; transform:translate(-50%,-12px)} to{opacity:1; transform:translate(-50%,0)} }
@keyframes flash-out{ from{opacity:1; transform:translate(-50%,0)} to{opacity:0; transform:translate(-50%,-12px)} }
@media (prefers-reduced-motion: reduce){
.flash, .flash.va{ animation:none }
}
/* En móvil, por debajo de la tira del panel para no taparle el saldo. */
@media (max-width:860px){
body.panel .flash{ top:calc(env(safe-area-inset-top,0px) + 58px) }
}
/* ---------------------------------------------------------------------------
404
--------------------------------------------------------------------------- */
.e404{
max-width:640px; margin:0 auto;
text-align:center; padding:40px 0 20px;
}
.e404 > *{ margin-left:auto; margin-right:auto }
.e404-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
width:132px; margin:0 auto;
}
.e404-grid span{
aspect-ratio:1; border-radius:6px;
background:var(--raised); border:1px solid var(--line);
}
.e404-grid span.off{
background:transparent; border-style:dashed; border-color:var(--gold-dim);
}
/* Puntos en potencia. Dorado, no verde: el verde es saldo que se puede gastar
hoy y esto no lo es. Que se distingan de un vistazo evita el peor malentendido
posible —creer que tienes para canjear algo que todavía no tienes—. */
.potbox{ border-color:var(--gold-dim); background:rgba(240,184,64,.05); margin:0 0 30px }
.potbox-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.potbox-n{ font-size:2.2rem; line-height:1.1; color:var(--gold) }
.potlist{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line) }
.potlist li{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; font-size:.86rem }
.potlist b{ color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap }
/* Fila de la calculadora para lo que quedaría en potencia. */
/* `hidden` tiene que ganar SIEMPRE.
El atributo solo trae `display:none` del navegador, y cualquier regla nuestra
con `display:flex` lo pisa sin avisar. Pasó de verdad: la fila de puntos por
desbloquear de la calculadora llevaba `hidden` puesto y se veía igual, con un
guion permanente, porque `.result .row` es flex. */
[hidden]{ display:none !important }
.calc .row.potrow .lbl{ color:var(--gold-dim) }
/* El aviso de puntos retenidos en el panel. Se ve en los dos estados de la
cuenta, porque quien más lo necesita —el que ha invitado y no ha aportado—
está en el de arranque. */
.potnote{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
margin:18px 0 4px; padding:14px 16px; border-radius:12px;
border:1px solid var(--gold-dim); background:rgba(240,184,64,.06);
font-size:.9rem;
}
.potnote b{ color:var(--gold) }
.potnote span{ flex:1; min-width:200px; color:var(--muted) }
/* Nota bajo la fila de invitados. Verde cuando la aportación lo desbloquea
todo, dorada cuando queda algo bloqueado. El caso verde es el que más se ve,
y por eso existe: un aviso que solo aparece cuando algo va mal deja al
visitante sin saber si lo tiene resuelto o si la web está rota. */
.refnote{ margin:-6px 0 2px; padding:10px 12px; border-radius:9px; font-size:.82rem; line-height:1.45 }
.refnote.ok { background:rgba(184,244,66,.07); border:1px solid rgba(184,244,66,.28); color:var(--ink) }
.refnote.warn{ background:rgba(240,184,64,.07); border:1px solid var(--gold-dim); color:var(--ink) }
/* ---------------------------------------------------------------------------
Panel de la calculadora, en dos bloques.
La jerarquía está puesta a propósito y es lo que arregla el problema de
fondo: arriba, grande y verde, lo que depende SOLO de ti; abajo, separado por
una línea y con otro color, lo que depende de que otras personas aporten.
Antes ambas cosas se sumaban en un único número gigante y nadie podía
distinguir a ojo qué parte era suya y qué parte era una promesa ajena.
--------------------------------------------------------------------------- */
.res-head{
font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
color:var(--muted); font-weight:600;
}
.res-big{
font-size:clamp(2.9rem,8vw,4rem); line-height:1;
color:var(--green); margin:6px 0 0;
}
.res-unit{
font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
color:var(--muted);
}
.res-detail{ margin:14px 0 0; font-size:.88rem; line-height:1.55; color:var(--muted) }
.res-piece{
display:flex; align-items:center; gap:9px;
margin:14px 0 0; font-size:.9rem; color:var(--ink);
}
.res-piece > span{
flex:0 0 auto; width:21px; height:21px; border-radius:50%;
display:grid; place-items:center; font-size:.72rem;
background:rgba(184,244,66,.14); color:var(--green);
}
/* El bloque condicional: separado por una línea, y su cifra en dorado y a menor
tamaño que la de arriba. El color hace el trabajo que no puede hacer un
texto: distinguir de un vistazo lo seguro de lo que aún no ha pasado. */
.res-invite{ margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--line) }
.res-inv-n{ display:flex; align-items:baseline; gap:9px; margin:8px 0 12px }
.res-inv-n .fig{ font-size:1.9rem; line-height:1; color:var(--gold) }
.res-grand{
display:flex; justify-content:space-between; align-items:baseline; gap:16px;
margin:14px 0 0; padding:13px 0 0; border-top:1px solid var(--line);
font-size:.85rem; color:var(--muted);
}
.res-grand b{ font-size:1.35rem; color:var(--ink) }
/* ===========================================================================
Foco de teclado y tablas estrechas.
=========================================================================== */
/**
* FOCO VISIBLE.
*
* La web pública no tenía ninguna regla de foco, y encima quitaba el contorno
* del navegador en tres sitios (`outline:0` en los campos y en la calculadora,
* `outline:none` en el selector de invitados). El resultado: navegar con el
* teclado era ir a ciegas. El panel de administración sí lo tenía, así que el
* backoffice estaba mejor que la cara pública.
*
* Se usa `:focus-visible` y no `:focus` a propósito: el navegador solo lo
* enciende cuando el foco viene del teclado, así que quien usa el ratón no ve
* un contorno cada vez que pulsa un botón.
*
* Va al final del archivo y con selectores tan concretos como los que quitaban
* el contorno: si no, pierde por especificidad y no se ve nada.
*/
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.amount-input input:focus-visible,
.stepper input:focus-visible,
.stepper button:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
.net:focus-visible,
a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* La caja entera se ilumina, no solo el número de dentro: el campo de la
calculadora ES la caja, el solo ocupa un trozo. */
.amount-input:focus-within{border-color:var(--green)}
/**
* TABLAS EN MÓVIL.
*
* Cuatro columnas no caben en 360 px. Sin esto la tabla empuja el ancho de la
* página entera y se desplaza TODA la pantalla en horizontal —cabecera, texto,
* botones—, que es la peor forma de resolverlo: se pierde el sitio.
*
* Con el marco a `overflow-x:auto` y un ancho mínimo en la tabla, lo que se
* desliza es solo la tabla y el resto de la página se queda quieto.
*/
.card.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card.tabla .table{min-width:420px}
.card.tabla::-webkit-scrollbar{height:8px}
.card.tabla::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
/* --- Portadas de las recompensas ---------------------------------------- */
/* Las portadas de Hotmart vienen en proporciones distintas. Sin una caja fija
cada tarjeta mediría distinto y la rejilla del catálogo saldría escalonada,
que es de las cosas que se notan sin saber por qué. `object-fit:cover`
recorta lo que sobre en vez de deformar la imagen. */
.reward .tapa{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--graphite, #141416)}
.reward .tapa img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s ease}
.reward:hover .tapa img{transform:scale(1.04)}
/* En la ficha no se recorta: ahí hay sitio y la imagen es del producto, así
que se enseña entera y a su proporción.
`max-width`, NO `width`: con width:100% una portada de 295 px se estiraba a
500 y salía borrosa. Así una imagen pequeña se ve pequeña y nítida, y una
grande ocupa todo el ancho disponible. Se nota mientras el catálogo tenga
mezcladas las portadas buenas y las provisionales. */
img.portada{max-width:100%;height:auto;border-radius:4px;margin:22px 0 4px}
@media (prefers-reduced-motion: reduce){
.reward .tapa img{transition:none}
.reward:hover .tapa img{transform:none}
}
/* --- Recompensa destacada ------------------------------------------------
El foco de la campaña. Se distingue por el BORDE y por una cinta sobre la
portada, no por un color de fondo distinto: en una rejilla de tarjetas
oscuras, cambiar el fondo de una sola la saca del conjunto y parece un
error de maquetación. El borde dorado dice «mira esta» sin romper la
rejilla.
El dorado y no el verde: el verde ya significa puntos en toda la web
—el coste, el saldo, el botón de canjear—. Usarlo también para «destacada»
le quitaría significado al único color que aquí lo tiene. */
.reward.destacada{border-color:var(--gold);box-shadow:0 0 0 1px rgba(240,184,64,.25)}
.reward.destacada:hover{border-color:var(--gold-soft)}
.reward.flat.destacada{border-left:2px solid var(--gold)}
.reward .tapa{position:relative}
.cinta{position:absolute;top:10px;left:10px;z-index:1;background:var(--gold);color:var(--black);
padding:4px 11px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;line-height:1.3}
.b-dest{background:rgba(240,184,64,.16);color:var(--gold)}
/* --- El aviso de ventana -------------------------------------------------
Sin ventana abierta es la única acción de la pantalla, así que va como un
bloque con su propio peso. Con ventana abierta baja a letra pequeña: el
botón que manda es «Apoyar ahora», y competir con él sería cambiar una
aportación de hoy por un correo de la semana que viene. */
.avisar{margin-top:18px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);
background:var(--card);max-width:75ch}
.avisar strong{display:block;font-family:var(--sans);font-size:1.05rem;margin-bottom:8px}
.avisar p{margin:0 0 14px;font-size:.92rem;color:var(--grey-1)}
.avisar p:last-child{margin-bottom:0}
.avisar p.ok{color:var(--green);margin-bottom:0}
.avisar.menor{margin-top:12px;padding:12px 16px;background:none;border-style:dashed}
.avisar.menor p{font-size:.84rem;color:var(--muted);margin-bottom:10px}
/* ==========================================================================
LA CARTA A PROFESORES · profesores.php
==========================================================================
Tres decisiones, y las tres salen de mirar pro.yogiq.app con el inspector
en vez de a ojo:
1 · COLUMNA CENTRADA. El resto de la web usa `.wrap.narrow`, que limita el
ancho de los hijos SIN moverlos: así el texto siempre empieza en el
mismo eje que el logotipo, y navegar entre páginas no descoloca nada.
En una carta de trece bloques eso se lee como un error: en un portátil
ancho, todo el contenido se apelotona a la izquierda y sobran cuatro
dedos de negro a la derecha. Aquí la columna se centra. Es la excepción,
y es a propósito.
2 · DOS BANDAS BLANCAS, NO MÁS. pro.yogiq.app tiene exactamente dos
(#F8F8F4) en toda la página, y las dos caen en el mismo sitio: donde
hay que COMPARAR Y DECIDIR —la demo de la matriz y la tabla de
precios—. El resto es negro y grafito. Copiamos la regla, no el
adorno: blanco = aquí se hacen cuentas. Tres bandas blancas serían un
tema claro a medias, que es lo que el manual de marca prohíbe.
3 · ACENTO DORADO. El manual es explícito: verde = practicante, dorado =
profesor. Esta es la única página de la web que le habla al profesor,
y es la puerta a pro.yogiq.app, que va en dorado. El BOTÓN sigue
verde: en toda la web el verde es «esta es la acción», y cambiarlo
solo aquí costaría más de lo que suma.
Sobre blanco, ni el verde (#B8F442) ni el dorado (#F0B840) valen como
texto: 1,3 y 1,9 de contraste. Por eso las bandas claras tienen sus
propias versiones oscuras de los dos, y no se usa la variable de marca. */
.wrap.lectura{max-width:860px}
/* Un trozo del titular en oro, como hace pro.yogiq.app. `em` y no `span`
porque es énfasis de verdad, y sin cursiva porque la display no la tiene. */
.oro{color:var(--gold);font-style:normal}
/* Cifra que manda dentro de una frase o una tabla. */
.dato{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.suma{color:var(--green);font-weight:600;font-variant-numeric:tabular-nums}
/* --- La calculadora de la carta -----------------------------------------
Es el gancho de los diez segundos: sustituye tres párrafos por algo que se
toca. Se pinta entera desde el servidor y el deslizador solo recalcula, así
que sin JavaScript sigue diciendo algo cierto en vez de quedarse en blanco. */
.calcprofe{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:24px;margin-top:20px}
.calcprofe-l{display:block;font-size:.82rem;color:var(--muted);margin-bottom:10px}
.calcprofe-top{display:flex;align-items:center;gap:18px}
.calcprofe-top input[type=range]{flex:1;accent-color:var(--gold);height:26px}
.calcprofe-top output{font-size:2rem;font-weight:600;letter-spacing:-.03em;min-width:2.2ch;text-align:right}
/* La columna del medio lleva texto y las otras dos, cifras cortas: a tres
partes iguales, «Licencia YOGIQ Avanza · 12 meses» partía en dos líneas. */
.calcprofe-res{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:18px;margin-top:22px;
padding-top:20px;border-top:1px solid var(--line)}
.calcprofe-res .k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-3)}
.calcprofe-res .v{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;margin-top:6px;line-height:1.25}
/* La licencia alcanzada es texto, no una cifra: no cabe a 1,5rem en tres
columnas estrechas y partía por la mitad la palabra «meses». */
.calcprofe-res .v.oro{font-size:1.05rem;font-weight:700}
@media(max-width:620px){
.calcprofe{padding:18px}
.calcprofe-res{grid-template-columns:1fr;gap:14px}
.calcprofe-top output{font-size:1.6rem}
}
/* --- Hoy → con la licencia ----------------------------------------------
Tres párrafos seguidos no se comparan: se leen o no se leen. En dos
columnas el ojo empareja solo, y la columna de la izquierda —lo que ya le
pasa— hace el trabajo de convencer sin adjetivos. */
.antes-despues{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:22px;
background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.antes-despues > div{background:var(--bg);padding:16px 18px;font-size:.92rem}
.ad-cab{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey-3);
background:var(--card) !important;font-weight:600}
.ad-cab-con{color:var(--gold)}
.ad-hoy{color:var(--grey-2)}
.ad-con{color:var(--grey-1)}
@media(max-width:620px){
/* En una columna, la cabecera «Hoy» y la de «Con la licencia» dejarían de
mandar sobre nada. Se quitan y cada pareja queda como un bloque con la
línea dorada delante de lo que cambia. */
.antes-despues{grid-template-columns:1fr}
.ad-cab{display:none}
.ad-con{border-left:2px solid var(--gold)}
}
.band-light{
background:var(--white);color:#33333A;
border-block:1px solid #E6E6DE;
}
.band-light h1,.band-light h2,.band-light h3,.band-light strong{color:#131317}
.band-light .eyebrow{color:#7A5406}
.band-light .muted,.band-light .tiny,.band-light .small.muted{color:#63635C}
.band-light .lead{color:#3C3C43}
.band-light .card{background:#FFF;border-color:#E3E3DB;box-shadow:0 1px 2px rgba(10,10,11,.05)}
.band-light .card.tabla::-webkit-scrollbar-thumb{background:#DDDDD4}
.band-light .table th{color:#6B6B63;border-bottom-color:#E3E3DB}
.band-light .table td{border-bottom-color:#EDEDE5}
.band-light .aviso{border-left-color:#D6D6CB;color:#43434A}
.band-light .clave{background:rgba(240,184,64,.14);border-left-color:#C08A1A}
.band-light .clave p{color:#2C2C32}
.band-light .dato{color:#7A5406}
.band-light .suma{color:#4A7008}
.band-light .btn-ghost{border-color:#C9C9BE;color:#1B1B1F}
.band-light .btn-ghost:hover{border-color:#7A5406;color:#7A5406}
.band-light .inline-link{color:#7A5406;text-decoration:underline}
.band-light .step{background:#FFF;border-color:#E3E3DB}
.band-light .step::before{color:#7A5406;border-color:#D8C089}
.band-light .oro{color:#7A5406}
.band-light .antes-despues{background:#E3E3DB;border-color:#E3E3DB}
.band-light .antes-despues > div{background:#FFF}
.band-light .ad-cab{background:#F2F2EA !important;color:#6B6B63}
.band-light .ad-hoy{color:#63635C}
.band-light .ad-con{color:#33333A}
.band-light .calcprofe{background:#FFF;border-color:#E3E3DB}
/* El halo verde del hero es del practicante. En la carta del profesor, oro. */
.hero.profe::after{background:radial-gradient(circle,rgba(240,184,64,.12),transparent 62%)}
.hero.profe .eyebrow{color:var(--gold)}
/* Los pasos de esta página numeran en dorado por lo mismo. */
.profe-pasos .step::before{color:var(--gold);border-color:var(--gold-dim)}
/* --- «Cómo va»: la línea de tiempo ---------------------------------------
Una lista ordenada de verdad (), que es lo que es: entradas con fecha en
orden. La regla vertical hace el trabajo de decir «esto sigue» sin escribirlo,
y el punto dorado marca cada hito sobre ella.
Sin numeración a la vista: los hitos no son pasos y numerarlos invitaría a
leerlos como un tutorial. */
.hitos{list-style:none;margin:0;padding:0 0 0 26px;border-left:1px solid var(--line)}
.hito{position:relative;padding:0 0 30px}
.hito:last-child{padding-bottom:0}
.hito::before{
content:"";position:absolute;left:-31px;top:6px;width:9px;height:9px;border-radius:50%;
background:var(--gold);box-shadow:0 0 0 4px var(--bg);
}
.hito-f{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.hito-t{font-size:1.1rem;margin:.35em 0 .3em}
.hito-p{margin:0;color:var(--muted);font-size:.94rem;max-width:68ch}
.hito-mas{margin:.5em 0 0;font-size:.88rem}
@media(max-width:600px){
.hitos{padding-left:20px}
.hito::before{left:-25px}
}
/* Sobre banda clara el punto necesita otro halo: con el del fondo oscuro se
recorta como un agujero. */
.band-mid .hito::before{box-shadow:0 0 0 4px var(--graphite-mid)}
.band-light .hitos{border-left-color:#E3E3DB}
.band-light .hito::before{background:#B08217;box-shadow:0 0 0 4px var(--white)}
.band-light .hito-f{color:#7A5406}
.band-light .hito-p{color:#5F5F58}
/* --- La evolución de «Cómo va» -------------------------------------------
Barras finas (12 px, por debajo del tope de 24) que arrancan todas del mismo
borde izquierdo: ese borde ES el cero. Extremo derecho redondeado y borde
izquierdo recto, que es lo que distingue «esto crece hacia allá» de «esto es
una píldora».
Un solo tono para todas: el largo ya ordena, y teñir cada barra según su
valor repetiría en color lo que ya dice el tamaño.
Las cifras van en color de TEXTO, no en el de la barra. El dorado identifica
la barra; si además pintara los números, dejaría de identificar nada. */
/* UNA SOLA REJILLA PARA TODA LA TABLA, no una por fila. Con una rejilla por
fila, la columna `auto` de la cifra se mide fila a fila: «8.000 $» ocupa menos
que «42.000 $ +10.000», así que cada barra tenía una pista de largo distinto y
dejaban de ser comparables entre sí. Que es lo único que una gráfica de barras
tiene que hacer. `display:contents` en la fila la borra como caja y deja que
sus tres hijos entren en la rejilla de arriba. */
.evol{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin:26px 0 0}
.evol-fila{display:contents}
/* `--grey-3` daba 2,2 de contraste sobre el grafito: es el mismo fallo que
tenían las frases legales del pie. La fecha y el incremento son datos, no
adorno, y hay que poder leerlos. */
.evol-f{font-size:.75rem;color:var(--grey-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.evol-pista{height:12px;background:var(--graphite-soft);border-radius:2px;overflow:hidden}
.evol-pista i{display:block;height:100%;background:var(--gold-dim);border-radius:0 4px 4px 0}
.evol-v{font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.evol-sube{color:var(--grey-2);font-size:.8rem;margin-left:6px}
/* La última barra es el presente, y eso no es un valor más alto: es otra cosa.
Se marca con el tono pleno y con la cifra en blanco, no con otro color. */
.evol-hoy .evol-pista i{background:var(--gold)}
.evol-hoy .evol-f{color:var(--gold)}
.evol-hoy .evol-v{font-weight:600;color:var(--text)}
@media(max-width:560px){
/* En móvil, la fecha encima y la barra a todo lo ancho: a 88 px de etiqueta
más la cifra, a la barra le quedaban cuarenta píxeles y dejaba de comparar
nada, que es su único trabajo. */
.evol{grid-template-columns:1fr auto;gap:6px 12px}
.evol-f{grid-column:1/-1;margin-top:8px}
.evol-fila:first-child .evol-f{margin-top:0}
}
.band-light .evol-pista{background:#E3E3DB}
.band-light .evol-pista i{background:#C9A24A}
.band-light .evol-hoy .evol-pista i{background:#B08217}
.band-light .evol-f{color:#63635C}
.band-light .evol-hoy .evol-f{color:#7A5406}
.band-light .evol-sube{color:#63635C}
.evol-t{font-size:1.15rem;margin:0 0 .2em}