/* Landing de LYT Estudio — tokens y componentes base. Fuente de verdad: design_handoff_landing_lyt/README.md El layout (grids, gaps, paddings) vive en clases utilitarias de Tailwind directamente en los templates. Este archivo cubre lo que Tailwind por defecto no resuelve con precisión: la paleta exacta, el degradado de marca, las sombras largas y los estados de los botones. */ :root{ /* Color */ --ink:#0F1115; /* titulares, fondo del CTA final */ --strong:#1C2026; /* texto de UI dentro de cards */ --body:#4A515C; /* cuerpo */ --soft:#767E8A; /* meta, rótulos, notas */ --hairline:#E4E6EA; /* todos los bordes */ --surface:#F5F6F8; /* fondo de sección Cobros, barras, chips */ --violet:#6a11cb; /* rótulos de sección, números 01–03 */ --blue:#2575fc; /* enlaces, foco, paso 03 */ --indigo:#4147d5; /* paso 02 */ --on-dark-body:#b9c0cc; --on-dark-soft:#8f9bb3; --pay-green:#0F7B4B; --pay-green-bg:#E8F6EF; --pay-amber:#8A5B00; --pay-amber-bg:#FDF3E2; --pay-red:#A02929; --pay-red-bg:#FBECEC; --gradiente: linear-gradient(135deg,var(--violet),var(--blue)); --gradiente-hover: linear-gradient(135deg,#5a0eae,#1e63d8); /* Sombras largas y suaves (offset negativo de spread) */ --sombra-captura-hero: 0 40px 90px -30px rgba(15,17,21,.30), 0 8px 24px rgba(15,17,21,.06); --sombra-captura-fila: 0 30px 70px -30px rgba(15,17,21,.24); --sombra-card-feature: 0 10px 30px -18px rgba(15,17,21,.18); --sombra-card-precio-destacada: 0 30px 70px -34px rgba(37,117,252,.55); --sombra-marco-video: 0 40px 90px -34px rgba(15,17,21,.34); --sombra-play: 0 18px 44px -12px rgba(15,17,21,.5); --sombra-boton-primario: 0 12px 32px rgba(37,117,252,.28); --sombra-boton-primario-sm: 0 8px 24px rgba(37,117,252,.26); --sombra-boton-primario-oscuro: 0 18px 50px -12px rgba(37,117,252,.6); } /* Este stylesheet solo se carga en la landing, así que puede tocar directo */ html{ scroll-behavior:smooth; scroll-padding-top:80px; /* alto de la navbar sticky, para que el ancla no quede tapada */ } /* Badge flotante de reCAPTCHA v3 (formulario "Agenda una demo") — escondido a pedido; el aviso de reCAPTCHA que Google exige a cambio queda como texto fijo debajo del botón del formulario (ver modal_demo.html). */ .grecaptcha-badge{ visibility:hidden; } .landing{ background:#fff; color:var(--body); font-family:'Manrope',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; } .landing h1, .landing h2, .landing h3{ text-wrap:pretty; } .landing .font-mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; } /* ───────────────── Botones (los 6 estados de #1c) ───────────────── */ .landing .btn{ border-radius:10px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:normal; transition:box-shadow .15s ease, transform .15s ease, background-color .15s ease; } .landing .btn-primario{ padding:16px 26px; background:var(--gradiente); color:#fff; font-size:16px; box-shadow:var(--sombra-boton-primario); } .landing .btn-primario:hover, .landing .btn-primario:active{ background:var(--gradiente-hover); box-shadow:var(--sombra-boton-primario-sm); transform:translateY(1px); } .landing .btn-primario-sm{ padding:12px 20px; background:var(--gradiente); color:#fff; font-size:15px; box-shadow:var(--sombra-boton-primario-sm); } .landing .btn-primario-sm:hover, .landing .btn-primario-sm:active{ background:var(--gradiente-hover); transform:translateY(1px); } .landing .btn-primario-oscuro{ padding:18px 32px; background:var(--gradiente); color:#fff; font-size:17px; box-shadow:var(--sombra-boton-primario-oscuro); } .landing .btn-primario-oscuro:hover, .landing .btn-primario-oscuro:active{ background:var(--gradiente-hover); transform:translateY(1px); } .landing .btn-secundario{ padding:16px 24px; background:#fff; border:1px solid var(--hairline); color:var(--strong); font-size:16px; } .landing .btn-secundario:hover{ border-color:#c7cbd3; } .landing .btn-terciario{ padding:16px 24px; color:var(--blue); font-size:16px; background:none; } .landing .btn-terciario:hover{ color:var(--violet); } .landing .btn-deshabilitado, .landing .btn-deshabilitado:hover{ padding:16px 26px; background:var(--hairline); color:var(--soft); font-size:16px; box-shadow:none; transform:none; cursor:not-allowed; } /* Pie de card de precio: el botón ocupa el ancho de la card */ .landing .btn-card{ width:100%; padding:14px; font-size:15px; } /* ───────────────── Navbar ───────────────── */ .landing .navbar{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); border-bottom:1px solid transparent; transition:backdrop-filter .2s ease, border-color .2s ease, box-shadow .2s ease; } .landing .navbar.is-scrolled{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--hairline); } .landing .nav-link{ color:var(--body); font-size:15px; font-weight:500; padding-bottom:2px; border-bottom:2px solid transparent; } .landing .nav-link:hover{ color:var(--ink); } .landing .nav-link.is-active{ color:var(--ink); border-bottom-color:var(--violet); } .landing .lang-chip{ padding:4px 8px; border-radius:6px; font-size:12px; font-weight:500; color:var(--soft); } .landing .lang-chip.is-active{ background:var(--surface); color:var(--ink); } /* ───────────────── Marca (icono + wordmark) ───────────────── */ .landing .marca-wordmark{ font-weight:800; color:var(--ink); letter-spacing:-.02em; } .landing .marca-wordmark span{ color:var(--soft); font-weight:600; } /* ───────────────── Capturas de producto ───────────────── */ .landing .marco-captura{ border:1px solid var(--hairline); border-radius:14px; overflow:hidden; background:#fff; } /* ───────────────── Chips / badges ───────────────── */ .landing .chip{ border:1px solid var(--hairline); border-radius:6px; padding:6px 10px; font-size:11px; color:var(--body); } .landing .badge-gradiente{ background:var(--gradiente); color:#fff; border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600; letter-spacing:.06em; white-space:nowrap; } .landing .badge-pagado{ background:var(--pay-green-bg); color:var(--pay-green); } .landing .badge-por-vencer{ background:var(--pay-amber-bg); color:var(--pay-amber); } .landing .badge-vencido{ background:var(--pay-red-bg); color:var(--pay-red); } .landing .badge-estado{ border-radius:6px; padding:3px 8px; font-size:11px; font-weight:600; } /* ───────────────── Cards ───────────────── */ .landing .card-feature{ background:#fff; border:1px solid var(--hairline); border-radius:14px; box-shadow:var(--sombra-card-feature); } .landing .card-precio{ background:#fff; border:1px solid var(--hairline); border-radius:14px; } /* Card destacada: el "borde" es en realidad un wrapper en degradado con 2px de padding y un interior blanco con radio menor — no hay CSS de borde multicolor real, es la técnica estándar para bordes en degradado. */ .landing .card-precio-destacada{ border-radius:14px; padding:2px; background:var(--gradiente); box-shadow:var(--sombra-card-precio-destacada); } .landing .card-precio-destacada > .card-precio-destacada__interior{ height:100%; box-sizing:border-box; background:#fff; border-radius:12px; } /* ───────────────── Video ───────────────── */ .landing .marco-video{ position:relative; border:1px solid var(--hairline); border-radius:14px; overflow:hidden; background:var(--ink); box-shadow:var(--sombra-marco-video); aspect-ratio:16/9; } .landing .marco-video__miniatura{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; opacity:.55; } .landing .marco-video__play{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:var(--sombra-play); } .landing .marco-video__play-triangulo{ width:0; height:0; border-left:15px solid var(--ink); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; } @media (min-width:1024px){ .landing .marco-video__play{ width:84px; height:84px; } .landing .marco-video__play-triangulo{ border-left-width:22px; border-top-width:13px; border-bottom-width:13px; margin-left:7px; } } .landing .marco-video__chip{ background:rgba(15,17,21,.78); color:#fff; border-radius:6px; padding:6px 11px; font-size:12px; } .landing .capitulo{ border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; transition:border-color .15s ease; } .landing .capitulo:hover{ border-color:var(--blue); } /* ───────────────── Campos de formulario ───────────────── */ .landing .campo{ border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; font-size:15px; color:var(--strong); background:#fff; width:100%; } .landing .campo:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,117,252,.14); } /* ───────────────── Precios móvil: Academia/Empresa expandibles ───────────────── */ .landing .plan-toggle__chevron{ transition:transform .15s ease; } .landing .plan-toggle[aria-expanded="true"] .plan-toggle__chevron{ transform:rotate(180deg); } /* ───────────────── Pasos "Cómo empieza" ───────────────── */ .landing .paso{ border-top:2px solid var(--violet); padding-top:24px; } .landing .paso--02{ border-top-color:var(--indigo); } .landing .paso--03{ border-top-color:var(--blue); }