/* Tikitago · Estilos compartidos de páginas legales (Términos, Privacidad, Reembolsos) */ /* ── Paleta ──────────────────────────────────────────────────────────────── Corregida tras revisar las páginas en pantalla. Tres problemas de fondo: 1) Las superficies eran MÁS OSCURAS que el fondo. El degradado de las cajas bajaba a #0f0f1a mientras el fondo de la página está en #15152a arriba: las tarjetas se leían como agujeros negros recortados sobre la página. En una interfaz oscura la jerarquía va al revés: lo que está "encima" recibe más luz, no menos. Ahora las superficies suben a #191926/#141420. 2) Los colores se heredaban del . Estas páginas cargan Bootstrap desde un CDN, que en modo claro define su propio color de texto y de titulares. Si el CDN llega tarde, o gana la cascada, los titulares se apagan. Ahora cada bloque declara su color, sin depender de la herencia. 3) El texto de cuerpo estaba en #9a9ab8 a 14.5px: justo en el límite. Sube a #b4b4cc y 15px — sobre el fondo nuevo da 8.9:1, muy por encima del 4.5:1 que exige la norma AA. El oro y el violeta son los mismos de la aplicación (cd-aurora.css), para que las páginas legales no parezcan de otro sitio. */ :root{ --bg:#0b0b12; --bg2:#101019; --sf:#191926; --sf2:#141420; /* superficies: por ENCIMA del fondo */ --sf-hi:#20202f; /* superficie destacada */ --b:rgba(255,255,255,.09); --b2:rgba(255,255,255,.16); --coin:#f5c842; --coin2:#ffe9a8; --coin-soft:rgba(245,200,66,.13); --viol:#9d6bff; --tx:#f2f2f8; --tx2:#b4b4cc; --tx3:#7e7e9c; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; /* El halo superior baja de #15152a a #14142a con menos alcance: antes competía con las tarjetas y hacía que la mitad superior pareciera más clara que ellas. */ background:radial-gradient(1000px 460px at 50% -10%,#16162c 0%,var(--bg) 58%); background-color:var(--bg); color:var(--tx); font-family:'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.65; } /* Barra superior */ .lg-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:13px 22px;background:rgba(9,9,15,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--b);} .lg-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;text-decoration:none;color:var(--tx);} .lg-mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--coin),var(--coin2)); display:flex;align-items:center;justify-content:center;color:#3a2606;font-weight:800;font-size:16px;} .lg-logo em{font-style:normal;color:var(--coin2);} .lg-back{font-size:13px;color:var(--tx2);text-decoration:none;display:inline-flex;align-items:center;gap:6px; padding:7px 13px;border:1px solid var(--b2);border-radius:9px;transition:.15s;} .lg-back:hover{color:var(--coin2);border-color:var(--coin-soft);} /* Hero */ .lg-hero{max-width:1080px;margin:0 auto;padding:40px 22px 12px;} .lg-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;color:#3a2a05; background:linear-gradient(135deg,var(--coin),var(--coin2));padding:4px 12px;border-radius:999px;text-transform:uppercase;} /* Color declarado, no heredado: Bootstrap (CDN) define lo suyo para h1..h6 y basta con que gane la cascada para que el titular se apague. */ .lg-hero h1{font-size:34px;font-weight:800;margin:16px 0 6px;letter-spacing:-.5px; color:var(--tx);-webkit-text-fill-color:var(--tx);} .lg-updated{color:var(--tx3);font-size:13px;margin:0;} /* Layout TOC + contenido */ .lg-wrap{max-width:1080px;margin:0 auto;padding:18px 22px 60px;display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start;} .lg-toc{position:sticky;top:74px;border:1px solid var(--b);border-radius:14px; background:linear-gradient(180deg,var(--sf),var(--sf2));padding:16px;color:var(--tx2);} .lg-toc h2{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--coin2);margin:0 0 10px;} .lg-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;} .lg-toc li{counter-increment:toc;margin:2px 0;} .lg-toc a{display:flex;gap:8px;font-size:13px;color:var(--tx2);text-decoration:none;padding:7px 8px;border-radius:8px;transition:.13s;} .lg-toc a::before{content:counter(toc);color:var(--coin);font-weight:700;min-width:16px;} .lg-toc a:hover,.lg-toc a.active{background:var(--coin-soft);color:var(--tx);} .lg-toc a:hover::before,.lg-toc a.active::before{color:var(--coin2);} /* Acordeón (Bootstrap dark override) */ .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--b);--bs-accordion-border-radius:13px; --bs-accordion-color:var(--tx);--bs-accordion-active-bg:var(--coin-soft);--bs-accordion-active-color:var(--coin2); --bs-accordion-btn-color:var(--tx);--bs-accordion-btn-bg:linear-gradient(180deg,var(--sf),var(--sf2)); --bs-body-color:var(--tx);--bs-heading-color:var(--tx);--bs-emphasis-color:var(--tx); --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(245,166,35,.25);} .accordion-item{background:linear-gradient(180deg,var(--sf),var(--sf2));border:1px solid var(--b)!important; border-radius:13px!important;margin-bottom:12px;overflow:hidden;} .accordion-button{font-weight:700;font-size:16px;background:transparent!important;color:var(--tx)!important;padding:17px 18px;} .accordion-button:not(.collapsed){color:var(--coin2)!important;box-shadow:none;} .accordion-button::after{filter:invert(82%) sepia(38%) saturate(700%) hue-rotate(350deg) brightness(104%);} .accordion-button .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px; background:var(--coin-soft);color:var(--coin2);font-size:13px;font-weight:800;margin-right:11px;flex:0 0 auto;} .accordion-body{color:var(--tx2);font-size:15px;padding:4px 20px 22px;} .accordion-body h3{color:var(--tx);font-size:15px;margin:18px 0 7px;} .accordion-body p{margin:0 0 11px;} .accordion-body ul{margin:0 0 12px;padding-left:20px;} .accordion-body li{margin:4px 0;} .accordion-body strong{color:var(--tx);} .lg-note{border-left:3px solid var(--coin);background:var(--coin-soft);border-radius:0 10px 10px 0;padding:11px 14px;margin:14px 0;font-size:13.5px;color:var(--tx);} /* Footer legal (compartido con el SPA) */ .cd-footer{border-top:1px solid var(--b);background:var(--bg2);margin-top:30px;} .cdf-inner{max-width:1080px;margin:0 auto;padding:34px 22px 18px;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;} .cdf-brand{max-width:340px;} .cdf-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;} .cdf-mark{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--coin),var(--coin2));display:flex;align-items:center;justify-content:center;color:#3a2606;font-weight:800;} .cdf-gold{color:var(--coin2);} .cdf-tag{color:var(--tx3);font-size:13px;margin:9px 0 14px;} .cdf-social{display:flex;gap:9px;} .cdf-soc{width:36px;height:36px;border-radius:10px;border:1px solid var(--b2);background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:default;transition:.15s;position:relative;} .cdf-soc svg{width:18px;height:18px;} .cdf-soc:hover{color:var(--coin2);border-color:var(--coin-soft);transform:translateY(-2px);} .cdf-soc::after{content:'Próximamente';position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#000;color:var(--coin2);font-size:10px;padding:3px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;border:1px solid var(--coin-soft);} .cdf-soc:hover::after{opacity:1;} .cdf-links{display:flex;flex-direction:column;gap:8px;} .cdf-links-title{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--coin2);font-weight:700;margin-bottom:3px;} .cdf-links a{color:var(--tx2);text-decoration:none;font-size:14px;transition:.13s;} .cdf-links a:hover{color:var(--coin2);} .cdf-bottom{max-width:1080px;margin:0 auto;padding:14px 22px 26px;border-top:1px solid var(--b);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:12px;color:var(--tx3);} @media(max-width:860px){ .lg-wrap{grid-template-columns:1fr;} .lg-toc{display:none;} .lg-hero h1{font-size:27px;} } /* ══ BLINDAJE FRENTE A BOOTSTRAP ═══════════════════════════════════════════ Estas páginas cargan Bootstrap 5.3 desde un CDN. Bootstrap arranca en modo CLARO por defecto: define --bs-body-color:#212529 y sus propios tokens de titular y de énfasis. Basta con que gane la cascada —o con que el CDN llegue después— para que los titulares y el texto se apaguen sobre el fondo oscuro, que es exactamente lo que se veía. La solución de raíz es declararle a Bootstrap que este documento es oscuro (data-bs-theme="dark" en el , ya añadido) y, además, fijar aquí sus variables por si esa marca faltara en alguna página. Cinturón y tirantes: una página legal no puede quedarse ilegible porque un CDN vaya lento. */ :root{ --bs-body-bg:var(--bg); --bs-body-color:var(--tx); --bs-heading-color:var(--tx); --bs-emphasis-color:var(--tx); --bs-secondary-color:var(--tx2); --bs-border-color:var(--b); --bs-link-color:var(--coin2); --bs-link-hover-color:var(--coin); } body,.lg-wrap,.lg-hero{color:var(--tx)} .lg-hero h1,.lg-wrap h2,.lg-wrap h3,.lg-wrap h4{color:var(--tx)} /* ══ LEGIBILIDAD DEL CUERPO ════════════════════════════════════════════════ Enlaces y textos destacados dentro del contenido: el subrayado a media altura y el oro claro los hacen distinguibles sin gritar. */ .accordion-body a,.lg-wrap p a{color:var(--coin2);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(255,233,168,.45);transition:.15s} .accordion-body a:hover,.lg-wrap p a:hover{color:var(--coin);text-decoration-color:var(--coin)} /* Bloques de datos dentro del contenido (correo, dirección, horario…). Antes eran listas sueltas; enmarcarlos con una superficie ligeramente más clara los separa del texto corrido sin añadir otra caja negra. */ .lg-datos{ margin:12px 0 4px;padding:13px 16px;border-radius:11px; background:var(--sf-hi);border:1px solid var(--b); font-size:14px;line-height:1.9;color:var(--tx2); } .lg-datos strong{color:var(--tx);font-weight:700} .lg-datos div+div{border-top:1px solid rgba(255,255,255,.05);padding-top:7px;margin-top:5px}