/* | Señales Telegram de la landing (revisión UX de 8 sep 2026, §2) |------------------------------------------------------------------------------ | Tres piezas que el sistema de la landing no tenía: el badge "para Telegram", | el azul #2AABEE como acento sobre el fondo negro y el ejemplo de conversación | que sustituye a la captura genérica del hero. | | Va en CSS a mano y no en utilidades de Tailwind a propósito: landing.css es un | build de Tailwind y no hay Node en el servidor, así que cualquier clase nueva | que no esté ya compilada no existiría en producción. Lo cargan las vistas que | pintan el header/el pie de la landing (landing/index.blade.php). */ :root { --tg-blue: #2AABEE; --tg-blue-hover: #1F97D6; --tg-blue-soft: #7FD0F7; /* | Negros del boceto. La landing venía en azul marino (#0b1628 de fondo y | #0e1a2e en las secciones alternas), que sobre el azul Telegram tiraba todo | al mismo tono y apagaba el acento. Estos son neutros y mantienen el mismo | juego de tonalidades por sección: base, secciones alternas un punto por | encima y pie un punto por debajo. */ --tg-bg: #0f1318; /* fondo base: hero, producto, FAQ */ --tg-bg-alt: #141a21; /* secciones alternas: cómo funciona, monetización, CTA final */ --tg-bg-deep: #070a0d; /* pie */ --tg-line: #1e252d; /* separadores y reglas */ --tg-line-soft: #232a32; /* bordes de tarjeta */ --tg-line-strong: #2b333c; /* bordes de campo y de botón secundario */ } /* ---------------------------------------------------------------- superficies */ .tg-surface { background-color: var(--tg-bg); } .tg-surface--alt { background-color: var(--tg-bg-alt); } .tg-surface--header { background-color: rgba(15, 19, 24, .95); border-bottom: 1px solid var(--tg-line); } .tg-surface--menu { background-color: #0b0e12; border-color: var(--tg-line); } .tg-footer { background-color: var(--tg-bg-deep); border-color: var(--tg-line); } /* | Las tarjetas van con un velo blanco en vez de un color fijo: así quedan | siempre un punto por encima de su fondo, valga el de la sección base o el de | las alternas, sin necesidad de una variante por sección. */ .tg-card { background-color: rgba(255, 255, 255, .03); border: 1px solid var(--tg-line-soft); } .tg-card--hover:hover { border-color: rgba(42, 171, 238, .3); } /* Pastillas de icono y de numeración: acento Telegram en vez del azul marino. */ .tg-chip { background-color: rgba(42, 171, 238, .14); color: var(--tg-blue-soft); } .group:hover .tg-chip { background-color: rgba(42, 171, 238, .22); } /* Reglas y separadores. */ .tg-rule { border-color: var(--tg-line); } .tg-divider { background-color: var(--tg-line); } .tg-divider-strong { background-color: var(--tg-line-strong); } /* Selector de idioma del header. */ .tg-field { background-color: var(--tg-bg-alt); border: 1px solid var(--tg-line-strong); } .tg-field:hover { border-color: #3b444e; } .tg-menu { background-color: var(--tg-bg-alt); border: 1px solid var(--tg-line-strong); } .tg-menu-item:hover, .tg-menu-item.is-active { background-color: #1b222a; } /* Botón secundario (el que acompaña al azul): contorno gris, nunca relleno. */ .tg-btn-ghost { border-color: var(--tg-line-strong); } .tg-btn-ghost:hover { border-color: #4d5763; } /* La palabra "Telegram" del H1 y cualquier acento de apoyo. */ .tg-accent { color: var(--tg-blue); } /* | Badge "para Telegram": un sin enlace junto al logo. Es el único | elemento nuevo de la revisión. Nunca "de Telegram" (no es producto oficial). */ .tg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background-color: rgba(42, 171, 238, .18); color: var(--tg-blue-soft); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; } .tg-badge svg { width: 12px; height: 12px; flex: 0 0 auto; fill: currentColor; } .tg-badge--sm { padding: 3px 8px; font-size: 11px; } /* | Un solo botón azul por pantalla: el relleno #2AABEE se reserva para la acción | principal. El !important es para ganarle a las utilidades bg-sky-* que llevan | los mismos botones (Tailwind y esta hoja tienen la misma especificidad y el | orden de carga no debería decidir el color de la llamada a la acción). */ .tg-btn { background-color: var(--tg-blue) !important; color: #fff !important; box-shadow: 0 6px 24px rgba(42, 171, 238, .35); } .tg-btn:hover { background-color: var(--tg-blue-hover) !important; } /* El CTA del hero es el más grande de la página. */ .tg-btn--hero { height: auto !important; padding: 15px 26px !important; font-size: 16px !important; font-weight: 700 !important; } @media (min-width: 1024px) { .tg-btn--hero { padding: 16px 26px !important; font-size: 17px !important; } } /* | Métricas del hero. "#1" se queda solo (antes era "#1 Plataforma"), así que se | pinta al tamaño de las otras dos cifras. Y las etiquetas pasan de versalitas | espaciadas a texto normal porque el copy nuevo es mucho más largo ("accesos | gestionados automáticamente") y en mayúsculas con tracking se partía en tres | líneas. */ .tg-stat-value { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: #fff; } .tg-stat-sub { font-size: 12px; letter-spacing: .01em; } /* | El badge del header desaparece por debajo de 640px: ahí la barra ya lleva | logo, selector de idioma y hamburguesa, y no cabe sin romper el logotipo. */ .tg-badge--header { display: none; } @media (min-width: 640px) { .tg-badge--header { display: inline-flex; } } /* En el pie el logo es un bloque centrado en móvil, así que el badge va debajo. */ .tg-badge--footer { margin-top: 10px; } /* | Banner de cookies. La vista es la del paquete (resources/views/vendor/ | cookie-consent) y la comparte todo el panel, así que su azul marino no se | toca ahí: se reescriben aquí sus variables, y esta hoja solo la carga la | landing. El selector lleva "body" delante para ganarle al