@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/kanit-semibold.woff2') format('woff2'); } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/kanit-bold.woff2') format('woff2'); } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/kanit-extrabold.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/open-sans-variable.woff2') format('woff2'); } :root { --brand: #ff6b00; --brand-hover: #ff7a19; --brand-soft: rgba(255, 107, 0, 0.12); --tertiary: #4a5b7d; --text-primary: #0f131a; --text-secondary: #171c26; --text-tertiary: #4a5b7d; --text-on-brand: #0f131a; --bg-page: #ffffff; --bg-muted: #e9eef7; --bg-card: #fbfcfe; --bg-ink: #0f131a; --text-on-ink: #f7f9fc; --border: rgba(15, 19, 26, 0.12); --border-strong: rgba(15, 19, 26, 0.28); --border-brand: rgba(255, 107, 0, 0.34); /* Naranja de marca oscurecido para texto. El --brand a pelo da 2.86:1 sobre blanco y 2.45:1 sobre --bg-muted: no llega ni al 3:1 del texto grande. Este da 5.35 y 4.60, que es AA de texto normal en los dos fondos que alternan las secciones. */ --brand-heading: #b34b00; --success: #00bd70; --error: #e10a0a; --font-heading: 'Kanit', system-ui, sans-serif; --font-body: 'Open Sans', system-ui, sans-serif; --radius: 12px; --radius-lg: 20px; --shadow: 0 1px 2px rgba(15, 19, 26, 0.06), 0 8px 24px rgba(15, 19, 26, 0.06); --container: 1120px; } @media (prefers-color-scheme: dark) { :root { --brand: #ff7a19; --brand-hover: #ff8c38; --brand-soft: rgba(255, 122, 25, 0.16); --tertiary: #b5c7e3; --text-primary: #f7f9fc; --text-secondary: #e9eef7; --text-tertiary: #b5c7e3; --text-on-brand: #0f131a; --bg-page: #0f131a; --bg-muted: #171c26; --bg-card: #171c26; --bg-ink: #070a0f; --text-on-ink: #f7f9fc; --border: rgba(247, 249, 252, 0.14); --border-strong: rgba(247, 249, 252, 0.3); --border-brand: rgba(255, 122, 25, 0.4); /* En oscuro el naranja de marca ya da 7.13:1 sobre el fondo, así que no hace falta tocarlo: oscurecerlo aquí lo apagaría sin ganar nada. */ --brand-heading: #ff7a19; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3); } } *, *::before, *::after { box-sizing: border-box; } /* ------------------------------------------------- Los dos estados del sitio El atributo data-launch-state del decide que version se ve. Se cambia con `node scripts/set-launch-state.mjs`, no a mano. Va con display:none, que tambien saca el bloque del arbol de accesibilidad: un lector de pantalla no lee la version que no toca. */ [data-launch-state='prelaunch'] .si-lanzado, [data-launch-state='launched'] .si-antes { display: none; } body { margin: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 800; } h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 700; } h3 { font-size: 1.1875rem; font-weight: 700; } p { margin: 0; } a { color: var(--brand); text-underline-offset: 3px; } a:hover { color: var(--brand-hover); } img, svg { max-width: 100%; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .section { padding-block: clamp(56px, 9vw, 104px); } .section--muted { background: var(--bg-muted); } /* El naranja de marca lo lleva el antetítulo (.eyebrow), no el h2: el titular en tinta es el que sostiene la jerarquía. --brand-heading se conserva porque es el único naranja que pasa contraste como texto sobre fondo claro, por si hace falta en otro sitio. */ .section__intro { max-width: 46rem; margin-bottom: 48px; } /* ⚠️ El :not(.eyebrow) es imprescindible. El antetítulo es un

dentro de .section__intro, así que `.section__intro p` (0,1,1) le ganaba a `.eyebrow` (0,1,0) y le imponía color de párrafo y 1.125rem: los antetítulos salían en gris azulado y a 18px en vez de naranja y en versalita. */ .section__intro p:not(.eyebrow) { margin-top: 16px; color: var(--text-tertiary); font-size: 1.125rem; } .eyebrow { display: inline-block; margin-bottom: 14px; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 20px; background: var(--bg-card); border-radius: var(--radius); font-weight: 600; } .skip-link:focus { left: 16px; } /* ---------------------------------------------------------------- Cabecera */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg-page) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } /* El logo va en linea y con el texto en currentColor, igual que logo.component.ts en la app: asi sigue al tema sea cual sea el mecanismo. Como no habria funcionado —el SVG de assets/brand/ lleva la tinta fija y en oscuro desaparecia—. ⚠️ El color hay que declararlo: .logo es un , y los enlaces van en naranja, con lo que currentColor pintaria tambien el texto del logo de naranja. */ .logo { display: inline-flex; align-items: center; color: var(--text-primary); } .logo:hover { color: var(--text-primary); } .logo__img { height: 30px; width: auto; display: block; } .site-nav { display: flex; align-items: center; gap: 32px; } .site-nav a { color: var(--text-secondary); font-size: 0.9375rem; font-weight: 600; text-decoration: none; } /* Los botones quedan fuera: este selector puntua mas que .button--primary:hover y le pisaba el color, dejando el texto naranja de marca sobre el naranja del propio boton (1.09:1 medido). Los enlaces de texto de la nav si se tinen al pasar el raton. */ .site-nav a:not(.button):hover { color: var(--brand); } /* Selector de idioma. Son enlaces a la misma pagina en el otro idioma, sin JavaScript: asi no parpadea, funciona sin scripts y Google lo sigue como un enlace normal. El idioma activo NO es un enlace —llevar a la pagina en la que ya estas es ruido para un lector de pantalla—, va como con aria-current. */ .lang-switcher { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 0.8125rem; font-weight: 600; } .lang-switcher a, .lang-switcher__current { padding: 6px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .lang-switcher a { color: var(--text-tertiary); } /* --brand-heading, no --brand: el naranja de marca da 2.7:1 sobre --brand-soft y no llega ni al minimo de texto grande. Este es el naranja oscurecido para texto. */ .lang-switcher a:hover { color: var(--brand-heading); background: var(--brand-soft); } .lang-switcher__current { color: var(--text-primary); background: var(--bg-muted); cursor: default; } /* En movil se ocultan los enlaces de seccion pero NO el boton: la accion principal tiene que seguir a un toque desde cualquier punto de la pagina. */ @media (max-width: 860px) { .site-nav a:not(.button) { display: none; } /* El selector se queda: cambiar de idioma es justo lo que necesita quien llega en el idioma que no es, y ahi el movil no es una excepcion. Se reduce el relleno. */ .lang-switcher a, .lang-switcher__current { padding: 6px 8px; } .site-nav .button { padding: 11px 18px; font-size: 0.9375rem; } } @media (max-width: 380px) { .logo__img { height: 26px; } .site-nav .button { padding: 10px 14px; font-size: 0.875rem; } } /* ----------------------------------------------------------------- Botones */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--radius); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .button:active { transform: translateY(1px); } .button--primary { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); } .button--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-on-brand); } .button--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); } .button--ghost:hover { border-color: var(--brand); color: var(--brand); } .button--block { width: 100%; } .button[disabled] { opacity: 0.55; cursor: not-allowed; } /* -------------------------------------------------------------------- Hero */ .hero { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 9vw, 104px); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 80px); align-items: center; } @media (max-width: 940px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } } .badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; margin-bottom: 24px; background: var(--brand-soft); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); } .badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } .hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.25rem); letter-spacing: -0.02em; } .hero__lead { margin-top: 24px; max-width: 34rem; font-size: 1.1875rem; color: var(--text-tertiary); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .hero__note { margin-top: 18px; font-size: 0.9375rem; color: var(--text-tertiary); } /* ------------------------------------------------------- Mockup de la app */ .mockup { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .mockup__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .mockup__body { padding: 22px; display: grid; gap: 14px; } .mockup__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius); } .mockup__who { display: flex; align-items: center; gap: 12px; min-width: 0; } .mockup__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; } .mockup__name { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mockup__meta { font-size: 0.8125rem; color: var(--text-tertiary); } .pill { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; font-family: var(--font-heading); } .pill--ok { background: rgba(0, 189, 112, 0.16); color: #00693f; } .pill--warn { background: rgba(231, 164, 9, 0.18); color: #8a6100; } .pill--bad { background: rgba(225, 10, 10, 0.14); color: #b30808; } @media (prefers-color-scheme: dark) { .pill--ok { color: #4fe0a6; } .pill--warn { color: #f6c95c; } .pill--bad { color: #ff7b7b; } } /* ----------------------------------------------------------- El problema */ .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .problem { padding: 26px; background: var(--bg-page); border: 1px solid var(--border-brand); border-radius: var(--radius-lg); } .problem__quote { font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); } .problem__cost { margin-top: 12px; font-size: 0.9375rem; color: var(--text-tertiary); } /* --------------------------------------------------------- Funcionalidades */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .feature { padding: 30px; background: var(--bg-card); border: 1px solid var(--border-brand); border-radius: var(--radius-lg); } .feature__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); } .feature__icon svg { width: 24px; height: 24px; } .feature p { margin-top: 12px; color: var(--text-tertiary); font-size: 0.9875rem; } /* ------------------------------------------------------------ Cómo funciona */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; counter-reset: step; } .step { counter-increment: step; } .step::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--brand); color: var(--text-on-brand); font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; } .step p { margin-top: 12px; color: var(--text-tertiary); font-size: 0.9875rem; } /* -------------------------------------------------------------- Para quién */ .fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .fit__card { padding: 30px; border: 1px solid var(--border-brand); border-radius: var(--radius-lg); background: var(--bg-page); } .fit__card h3 { margin-bottom: 18px; } .fit__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .fit__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9875rem; color: var(--text-tertiary); } .fit__list li::before { content: ''; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 12px; } .fit__list--yes li::before { background-color: rgba(255, 107, 0, 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a34400' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .fit__list--no li::before { background-color: rgba(74, 91, 125, 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b7d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); } /* El tick va en un naranja mas oscuro que la marca para que se lea sobre su propio tinte; en oscuro hace falta el contrario, uno mas claro que el fondo de la card. */ @media (prefers-color-scheme: dark) { .fit__list--yes li::before { background-color: rgba(255, 122, 25, 0.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9445' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .fit__list--no li::before { background-color: rgba(181, 199, 227, 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5c7e3' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); } } /* ------------------------------------------------------------------ Precio */ .price { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 56rem; } .price__point { padding: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .price__figure { display: block; margin-bottom: 10px; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; color: var(--brand); line-height: 1.1; } .price__point p { margin-top: 8px; color: var(--text-tertiary); font-size: 0.9875rem; } .price__note { max-width: 46rem; margin-top: 32px; font-size: 0.9375rem; color: var(--text-tertiary); } /* -------------------------------------------------------------------- FAQ */ .faq { max-width: 46rem; display: grid; gap: 12px; } .faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-page); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq p { padding: 0 24px 22px; color: var(--text-tertiary); font-size: 0.9875rem; } .faq p + p { padding-top: 0; margin-top: -8px; } /* --------------------------------------------------------------- Formulario */ .signup { background: var(--bg-ink); color: var(--text-on-ink); } .signup h2 { color: var(--text-on-ink); } .signup__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 72px); align-items: start; } @media (max-width: 940px) { .signup__grid { grid-template-columns: minmax(0, 1fr); } } /* Una vez lanzado no hay formulario que poner al lado, asi que la reticula de dos columnas dejaria media seccion vacia. */ [data-launch-state='launched'] .signup__grid { grid-template-columns: minmax(0, 1fr); max-width: 46rem; } .signup__lead { margin-top: 20px; font-size: 1.125rem; color: rgba(247, 249, 252, 0.72); max-width: 32rem; } .signup__perks { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; } .signup__perks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9875rem; color: rgba(247, 249, 252, 0.82); } .signup__perks li::before { content: ''; width: 18px; height: 18px; margin-top: 4px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a19' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .form-card { padding: clamp(24px, 4vw, 36px); background: var(--bg-page); border-radius: var(--radius-lg); color: var(--text-primary); box-shadow: var(--shadow); } .field { display: grid; gap: 7px; margin-bottom: 18px; } .field > label { font-size: 0.875rem; font-weight: 700; font-family: var(--font-heading); } .field input, .field select { width: 100%; padding: 13px 15px; border: 2px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; } .field input:focus, .field select:focus { outline: none; border-color: var(--brand); } .field__hint { font-size: 0.8125rem; color: var(--text-tertiary); } .field--honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 22px; font-size: 0.8125rem; color: var(--text-tertiary); line-height: 1.5; } .consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); } /* Es un , que ya lleva role="status" implicito y mejor soporte en lectores de pantalla que ponerlo a mano. Como es inline por defecto, hay que declarar el block. */ .form-status { display: block; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 600; } .form-status[hidden] { display: none; } .form-status--ok { background: rgba(0, 189, 112, 0.16); color: #00693f; } .form-status--error { background: rgba(225, 10, 10, 0.12); color: #b30808; } @media (prefers-color-scheme: dark) { .form-status--ok { color: #4fe0a6; } .form-status--error { color: #ff7b7b; } } /* ------------------------------------------------------------------ Footer */ .site-footer { padding-block: 56px 40px; border-top: 1px solid var(--border); font-size: 0.9375rem; } .site-footer__top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: start; } .site-footer__blurb { max-width: 24rem; margin-top: 16px; color: var(--text-tertiary); font-size: 0.9375rem; } .footer-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; } .footer-nav a { color: var(--text-tertiary); text-decoration: none; font-weight: 600; } .footer-nav a:hover { color: var(--brand); } .site-footer__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 0.875rem; } /* ------------------------------------------------- Páginas de texto (legal) */ .prose { max-width: 44rem; padding-block: clamp(48px, 7vw, 80px); } .prose h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); } .prose h2 { margin-top: 48px; font-size: 1.5rem; } .prose h3 { margin-top: 32px; } .prose p, .prose ul, .prose ol { margin-top: 16px; color: var(--text-secondary); } .prose ul, .prose ol { padding-left: 22px; } .prose li + li { margin-top: 8px; } .prose__meta { margin-top: 12px; color: var(--text-tertiary); font-size: 0.9375rem; } .notice { margin-top: 32px; padding: 22px 24px; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); background: var(--bg-muted); } .notice p { margin-top: 0; color: var(--text-secondary); } .notice p + p { margin-top: 12px; } .steps-list { margin-top: 24px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 20px; } .steps-list li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; } .steps-list li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; } @media print { .site-header, .site-footer, .skip-link { display: none; } }