/* ============================================================================ marca.css — el sistema visual del Club, en un solo sitio. Antes de esto cada página repetía su propio :root y se iban separando solas: `login.html` no tenía las variables de animación, su `--bg-card` no coincidía con el de la app, `privacidad.html` tenía otro gris, y `.btn` significaba una cosa en `index.html` y otra en `admin.html`. Eso es lo que hacía que cada cosa nueva se viera agregada después. Los colores y las tipografías salen de la guía de marca de Sol (`brand/soldea-colores-por-categoria.html`, `brand/soldea-sistema-colores.html`). REGLA DE ORO de esa guía, y es literal: **púrpura = cuesta, lima = gratis, rojo = ahora o nunca, lavanda = aprende, negro = personal**. Antes de pintar algo de un color, la pregunta es qué le está diciendo a la persona. Quien agregue una regla acá que solo use una página, la puso en el sitio equivocado: esto es lo COMPARTIDO. `verificar-marca.js` vigila que las páginas no vuelvan a declarar tokens propios. ============================================================================ */ :root{ /* --- las cinco categorías de la guía + la base --- */ --purpura:#6B5CE7; /* cuesta */ --lima:#C8E64A; /* gratis */ --rojo:#E8412E; /* ahora o nunca — pill o subrayado, NUNCA de fondo */ --lavanda:#EDE9FF; /* aprende */ --negro:#1A1A1A; /* personal, contraste */ --crudo:#FAFAF7; /* base */ /* --- derivados, para texto legible sobre fondos claros --- */ --purpura-texto:#5847C7; --rojo-texto:#B8331F; --rojo-soft:#FDE2DD; --linea:#E9E7E0; --gris:#6E6B60; /* --- superficies --- */ --bg-outer:#EFEDE6; --bg-app:var(--crudo); --bg-card:#fff; --bg-inset:#EFEDE6; --text-1:var(--negro); --text-soft:#444; /* --- movimiento --- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --duration-snap: 150ms; --duration-fast: 160ms; --duration-base: 200ms; --duration-deliberate: 260ms; --duration-slow: 300ms; /* --- radio: siete tokens donde había doce valores sueltos. Se definieron en los valores que ya dominaban y solo se plegaron los sueltos (10, 11 y 13 → 12), así que en pantalla no cambia casi nada. Los micro-radios de 3 y 5px NO tienen token: son funcionales (la rayita del nav, las barras de progreso) y redondearlos sí se vería. --- */ --r-xs:8px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:18px; --r-2xl:20px; --r-pill:999px; /* --- sombra: tres, con nombre --- */ --sombra-app:0 0 60px rgba(0,0,0,.08); --sombra-app-ancha:0 0 80px rgba(0,0,0,.07); --sombra-card:0 18px 50px rgba(0,0,0,.14); --sombra-dialogo:0 20px 60px rgba(0,0,0,.22); --sombra-flotante:0 12px 30px rgba(0,0,0,.28); /* --- tipografía --- */ --fuente:'Plus Jakarta Sans',system-ui,sans-serif; --fuente-titulo:'Outfit',system-ui,sans-serif; --fuente-enfasis:'Instrument Serif',Georgia,serif; } /* ---------------------------------------------------------------- base ---- */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--purpura);outline-offset:2px} /* ------------------------------------------------------------ titulares --- El patrón de la casa: mayúsculas en Outfit con UNA palabra en itálica serif. "QUÉ postear HOY". El es lo que hace que se vea de Sol. */ .wordmark{font-family:var(--fuente-titulo);font-weight:900;text-transform:uppercase;letter-spacing:-.5px;line-height:1;} .wordmark em,.titulo-seccion em,h1 em,h2 em{font-family:var(--fuente-enfasis);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;} /* --------------------------------------------------------------- botón ---- UN solo botón. `.btn` es el de bloque, ancho completo, que es el que usa la app y el que usan las puertas de entrada. `.btn.compacto` es la variante en línea del panel, que va en filas junto a otros. Antes eran dos `.btn` distintos declarados en dos archivos, que es exactamente el desparejo que este archivo existe para cerrar. */ .btn{font-family:inherit;font-weight:700;font-size:14px;padding:13px;border-radius:var(--r-sm);border:none;cursor:pointer;text-align:center;width:100%;min-height:44px;transition:transform var(--duration-fast) var(--ease-out);} .btn:active{transform:scale(.97);} .btn:disabled{opacity:.45;cursor:not-allowed;} .btn.primary{background:var(--purpura);color:var(--crudo);} .btn.ghost{background:var(--bg-card);border:1.5px solid var(--linea);color:var(--text-1);} /* lima = gratis, por la regla de oro. Se usa en lo que ya viene incluido con la membresía y no cuesta nada aparte — pintar eso de morado le estaría diciendo a la persona que tiene precio. El par lima+negro ya existía en la app (el botón "Copiar" del taller y `.muro-ok`). */ .btn.lima{background:var(--lima);color:var(--negro);font-weight:800;} .btn.peligro{border-color:var(--rojo-texto);color:var(--rojo-texto);} .btn.peligro-solido{background:var(--rojo-texto);color:#fff;border-color:var(--rojo-texto);} .btn.compacto{width:auto;font-size:13.5px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;} /* un con .btn necesita display propio o se ve como texto suelto: el es inline y no respeta ni el ancho ni el padding vertical. Estaba resuelto con un style="" a mano en la pestaña Canal; acá vale para todos. */ a.btn{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;} /* botón secundario de texto. Se define entero, sin heredar de ningún `button{}` de página — eso era lo que ataba `login.html` a su hoja propia. */ .link{width:100%;background:none;border:none;color:var(--gris);font-family:inherit;font-weight:600;font-size:13px;margin-top:12px;padding:6px;cursor:pointer;position:relative;} /* La convención de la casa para cualquier botón chico: el área táctil se agranda con un pseudo-elemento en vez de con padding, así el texto no se mueve. Se repetía a mano en nueve sitios de index.html. */ .link::before,.hitbox::before{content:"";position:absolute;left:-4px;right:-4px;top:-6px;bottom:-6px} .hitbox{position:relative} /* ------------------------------------------------------------- mensajes ---- */ .msg{font-size:13px;margin-bottom:14px;padding:10px 12px;border-radius:var(--r-sm)} .error{background:var(--rojo-soft);color:var(--rojo-texto)} .ok{background:var(--lavanda);color:var(--purpura-texto)} /* ------------------------------------------------- ventanas emergentes ---- UNA piel para las cuatro que había. El comportamiento sigue siendo distinto en cada una (el muro bloquea, el del panel se cierra con "Volver", el del canal con la ×, el de admin se hace pantalla completa en móvil) y eso vive en cada página. Lo que se comparte es cómo se ven. Mapa de capas, de abajo hacia arriba: 880 #canal-overlay invitación al grupo 890 #panel-password cambiar la contraseña 900 #muro-overlay el muro de pago — nada de la app puede taparlo 99998 .cfm-toast el "deshacer" 99999 .cfm-overlay confirmar.js, que tiene que poder salir sobre todo */ .overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(250,250,247,.45);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);} /* la tarjeta recibe el foco al abrirse (lo pide el lector de pantalla) pero no dibuja anillo: no es un control, es el contenedor. Los controles de adentro sí lo dibujan al tabular. */ .card-modal[tabindex]:focus{outline:none;} .card-modal{background:var(--bg-card);border:1.5px solid var(--linea);color:var(--text-1);border-radius:var(--r-xl);padding:26px 22px;width:100%;max-width:420px;max-height:100%;overflow-y:auto;box-shadow:var(--sombra-card);} .card-modal h2{font-family:var(--fuente-titulo);font-weight:800;font-size:22px;line-height:1.1;text-transform:uppercase;letter-spacing:-.4px;margin-bottom:10px;} .card-modal p{font-size:13.5px;line-height:1.5;color:var(--text-soft);margin-bottom:14px;} .card-modal input{width:100%;border:1.5px solid var(--linea);border-radius:var(--r-sm);padding:12px 14px;font-family:inherit;font-size:16px;background:var(--bg-card);color:var(--text-1);margin-bottom:12px;} .card-modal input:focus{border-color:var(--purpura);} /* ------------------------------------------- las dos puertas de entrada ---- `login.html` y `activar.html` son la misma pantalla con otro guion, y sus hojas eran copias que ya se habían separado (login no tenía las variables de animación). Lo común vive acá, bajo `body.auth`; lo propio de cada una (el bloque "¿Acabas de comprar?", la pista de la contraseña) se queda en su archivo. OJO: `.caja` significa tres cosas distintas en el proyecto — acá la tarjeta de entrada, en admin una caja blanca con borde, en privacidad el contenedor de la página. Por eso todo esto va scopeado a `body.auth`. */ body.auth{font-family:var(--fuente);background:var(--bg-outer);color:var(--text-1);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} body.auth .caja{background:var(--crudo);border-radius:var(--r-2xl);padding:32px 26px;max-width:380px;width:100%;box-shadow:var(--sombra-app)} body.auth .sub{color:var(--gris);font-size:14px;margin-bottom:24px;line-height:1.4} body.auth label{display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin-bottom:6px} /* fondo crudo, no blanco, a propósito: en estas dos páginas la tarjeta ES la superficie y un campo blanco encima se despega. En la app los campos sí son blancos porque ahí la tarjeta es blanca. */ body.auth input{width:100%;border:1.5px solid var(--linea);border-radius:var(--r-sm);padding:13px 15px;font-family:inherit;font-size:16px;margin-bottom:14px;background:var(--crudo);color:var(--text-1)} body.auth input:focus{border-color:var(--purpura)} body.auth .campo-pw{position:relative} body.auth .campo-pw input{padding-right:52px} body.auth .ojo{position:absolute;right:6px;top:3px;width:44px;height:44px;background:none;border:none;color:var(--gris);font-size:17px;cursor:pointer;padding:0} /* la mini-pantalla que entra: una sola animación para las dos páginas */ .entra-paso{animation:entrar-paso var(--duration-base) var(--ease-out)} @keyframes entrar-paso{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion: reduce){ .btn{transition:none} .entra-paso{animation:none} }