/* ============================================================================ Matchitfy — landing Depende de tokens.css, que se carga antes. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } /* El fondo va TAMBIEN en , no solo en . Mientras el cuerpo esta oculto esperando al diccionario, lo que se ve es el lienzo del documento: sin esta linea seria blanco, y en tema oscuro eso es exactamente el flash que estamos evitando. */ html { -webkit-text-size-adjust: 100%; background: var(--bg); } /* El cuerpo se oculta SOLO mientras se traduce, y solo en espanol: el ingles esta escrito en el HTML y no espera a nadie. La animacion es un seguro, no un efecto. Si i18n.js no carga, si lo bloquea una extension o si revienta a medias, nadie quita la clase y la pagina se queda invisible para siempre. A los 1,5 s se revela sola, en ingles, que es infinitamente mejor que una pagina en blanco. */ .i18n-wait body { visibility: hidden; animation: i18n-failsafe 0s linear 1.5s forwards; } @keyframes i18n-failsafe { to { visibility: visible; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; overflow-x: hidden; /* el body NUNCA scrollea en horizontal */ text-wrap: pretty; } h1, h2, h3, p, ul, figure, figcaption, table { margin: 0; } ul { padding: 0; list-style: none; } a { color: var(--ok); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--ink); } /* Visible SIEMPRE, y con offset para que no se coma el borde del control. */ :focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; border-radius: 2px; } table { border-collapse: collapse; } /* Cualquier cifra. Sin esto las columnas bailan al cambiar de digito, que en una pagina que argumenta precision se nota mas que en ninguna otra. */ .num { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Estructura ─────────────────────────────────────────────────────────── */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); } /* Un `.wrap` que es HIJO DIRECTO de una rejilla necesita `width: 100%`. En flujo normal, `margin: 0 auto` + `max-width` da ancho completo hasta el maximo y centra. En un ITEM DE REJILLA el margen automatico hace otra cosa: encoge el item a su contenido y lo centra dentro de la celda. Medido a 1440px: el `main` del tablero salia de 555px dentro de una columna de 1440, y la rejilla de KPIs caia a dos columnas cuando cabian cuatro. Las paginas de acceso y de alta tienen la misma estructura y el mismo sintoma. */ .app-page > .wrap, .auth-page > .wrap { width: 100%; } .rule { border-top: 1px solid var(--line); } .sect { padding: 64px 0; } .sect-hero { padding: 88px 0 72px; } .sect-last { padding: 64px 0 88px; } .eyebrow { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); } h1 { font-size: clamp(36px, 5vw, 54px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; } h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; font-weight: 600; } h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 600; } .lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; } .body { font-size: 17px; line-height: 1.6; color: var(--ink-2); } .fine { font-size: 13px; color: var(--ink-2); } .mark { color: var(--ink); } /* ── Marca ──────────────────────────────────────────────────────────────── */ /* El wordmark ES la marca. El nombre ya trae el pivote adentro: `it` es la cosa que se concilia, y va en el color que significa "cuadra". Un simbolo aparte solo competiria con el. */ /* 24px y no 18. A 18 el wordmark pesaba menos que los titulares de la pagina y competia de tu a tu con enlaces de 14: la marca quedaba como un elemento mas de la barra en vez de ser su ancla. El `letter-spacing` negativo se abre un poco al crecer, porque el apretado que funciona a 18 se ve forzado a 24. */ /* `clamp` y no un tamano fijo. A 24px fijo el wordmark ensancha tanto la primera fila de la barra que el menu se parte en dos lineas: medido, la barra pasaba de 116px a 216px de alto en un telefono de 390px, media pantalla gastada antes de leer una palabra. El maximo manda donde hay sitio y el minimo protege la barra donde no lo hay. */ /* El lockup: icono + nombre, con las proporciones del manual de marca. Medidas de referencia: icono 36px, separacion 12px, texto 24px peso 600. Aqui van en `em` y no en pixeles, para que las tres cosas escalen juntas cuando el clamp cambia el cuerpo del nombre: 36/24 = 1.5em, 12/24 = 0.5em. Con medidas fijas, el icono se descolgaria del texto en cada corte. */ .brand { display: inline-flex; align-items: center; gap: 0.28em; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); text-decoration: none; } /* El SVG viene recortado al dibujo, asi que esta altura es la altura VISIBLE, no la de un lienzo con aire. 0.74em la iguala a la proporcion del manual: alli el icono mide 36 en una caja con aire y el texto 24, lo que deja la tinta del icono en 0.74 de la tinta del texto. `width: auto` y no una medida: el dibujo no es cuadrado (28.4 x 23.6) y forzarle un ancho igual a la altura lo deformaria. `flex: none` para que la marca NUNCA se comprima. Es un item flexible dentro de una barra que envuelve, y sin esto es lo primero que se aplasta cuando el ancho aprieta: un logo deformado es peor que un logo que empuja. El translateY corrige lo ULTIMO que queda, que es optico y no geometrico: `matchitfy` es casi todo minusculas, asi que su masa visual cae por debajo del centro de la linea. Medido a 26px: el centro de la tinta esta 3.5px por debajo del centro de la caja, o sea 0.135em. Se hace con transform y no con margin para que no mueva la maquetacion. */ .brand-mark { height: 0.74em; width: auto; flex: none; display: block; transform: translateY(0.135em); } /* El bloque responsive de la barra NO va aqui: las reglas de `.topbar` se declaran mas abajo en esta misma hoja y ganarian por orden de cascada, porque una media query no aporta especificidad. Vive junto a ellas. */ .brand em { font-style: normal; color: var(--ok); } .brand:hover { color: var(--ink); } .brand:hover em { color: var(--ok); } /* ── Cabecera y pie ─────────────────────────────────────────────────────── */ .head { display: flex; align-items: center; justify-content: space-between; gap: var(--gut); padding: 22px 0; border-bottom: 1px solid var(--line); } .head-link { font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .head-link:hover { color: var(--ink); border-color: var(--ink); } .foot { border-top: 1px solid var(--line); padding: 28px 0 48px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink-2); } /* ── Rejillas ───────────────────────────────────────────────────────────── */ /* TODAS llevan `min(Npx, 100%)` y no `Npx` a secas. Un track de rejilla cuyo minimo es una medida fija mas ancha que su contenedor no se encoge: desborda, y ese desbordamiento sale por el documento entero y produce scroll horizontal en toda la pagina. `min()` hace que el minimo ceda cuando la pantalla es mas angosta que el track. Medido a 320px de viewport: `.cols-2` con `minmax(320px, 1fr)` daba 344px de scrollWidth. Es la misma falla en las cinco rejillas, asi que se arregla en las cinco y no solo en la que se vio. */ .cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; align-items: center; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; align-items: start; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px; } .stack { display: grid; gap: 52px; } /* ── Tarjetas ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; } .card-sunk { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 5vw, 52px); display: grid; gap: var(--gut); justify-items: start; } .topped { border-top: 2px solid var(--ink); padding-top: 16px; } /* ── La cifra que abre la pagina ────────────────────────────────────────── */ /* Renderizada en el HTML con su valor final. Sin contador animado: si el JS llega tarde, un numero que salta hacia atras contradice la unica cosa que esta pagina argumenta. */ .figure-xl { font-variant-numeric: tabular-nums; font-size: clamp(44px, 7vw, 68px); line-height: 1; letter-spacing: -0.035em; font-weight: 600; color: var(--gap); } .rows { display: grid; gap: 12px; font-variant-numeric: tabular-nums; font-size: 15px; } .row { display: flex; justify-content: space-between; gap: 16px; } .row span:first-child { color: var(--ink-2); } /* ── Cascada bruto a neto ───────────────────────────────────────────────── */ /* Las alturas las escribe el HTML y son PROPORCIONALES a las cifras de abajo. Una barra decorativa en una pagina sobre conciliacion seria una mentira pequena en el peor sitio posible. */ .chart-frame { overflow-x: auto; padding: 28px 24px 20px; } .chart-inner { min-width: 560px; } .chart { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; height: 240px; align-items: end; } .bar-slot { height: 100%; display: flex; flex-direction: column; } .bar-slot.from-top { justify-content: flex-start; } .bar-slot.from-bot { justify-content: flex-end; } .stem { border-right: 1px dashed var(--line); } .bar { border-radius: 3px; min-height: 6px; } .bar-in { background: var(--ok); } .bar-out { background: var(--gap); } .bar-net { background: var(--ok); opacity: 0.75; } .chart-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; font-variant-numeric: tabular-nums; } .chart-legend p:first-child { font-size: 15px; font-weight: 600; } .chart-legend p:last-child { font-size: 13px; color: var(--ink-2); margin-top: 3px; } /* ── Formulario ─────────────────────────────────────────────────────────── */ .form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; } .input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); } .input::placeholder { color: var(--ink-2); } .btn { font: inherit; font-size: 16px; font-weight: 550; padding: 13px 22px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink); color: var(--bg); cursor: pointer; } .btn:hover { background: var(--ok); border-color: var(--ok); color: var(--bg); } /* ── Precios, con conmutador solo de CSS ────────────────────────────────── */ /* Sin JavaScript: dos radios ocultos y `:checked`. Funciona con el JS caido, con el JS bloqueado y antes de que cargue nada. La version anterior tenia la propiedad de facturacion pero NINGUN control en la pagina para cambiarla. */ .price-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; } .toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .toggle label { font-size: 14px; padding: 8px 16px; cursor: pointer; color: var(--ink-2); background: var(--surface); user-select: none; } .toggle label + label { border-left: 1px solid var(--line); } /* Los dos radios son hijos directos de .pricing y van ANTES de todo, para que el combinador `~` alcance tanto al conmutador como a la tabla. */ #bill-m:checked ~ .price-head .toggle label[for="bill-m"], #bill-a:checked ~ .price-head .toggle label[for="bill-a"] { background: var(--ink); color: var(--bg); } /* El foco del teclado tiene que verse aunque el radio este fuera de pantalla, o el conmutador queda inoperable sin raton. */ #bill-m:focus-visible ~ .price-head .toggle label[for="bill-m"], #bill-a:focus-visible ~ .price-head .toggle label[for="bill-a"] { outline: 2px solid var(--ok); outline-offset: -2px; } .amt-a { display: none; } #bill-a:checked ~ * .amt-a { display: inline; } #bill-a:checked ~ * .amt-m { display: none; } #bill-a:checked ~ .price-head .per-a { display: inline; } #bill-a:checked ~ .price-head .per-m { display: none; } .per-a { display: none; } .table-frame { margin-top: 28px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } table.plans { width: 100%; min-width: 460px; font-variant-numeric: tabular-nums; } .plans th, .plans td { padding: 16px 24px; border-bottom: 1px solid var(--line); } .plans tr:last-child th, .plans tr:last-child td { border-bottom: 0; } .plans thead th { text-align: left; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; } .plans thead th.r, .plans td.r { text-align: right; } .plans tbody th { text-align: left; font-weight: 500; font-size: 16px; } .plans td { font-size: 16px; color: var(--ink-2); } .plans td.amt { font-weight: 600; color: var(--ink); } .notes { margin-top: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; } .notes li.lead { color: var(--ink); } /* ── Barra superior ─────────────────────────────────────────────────────── */ /* No es sticky. En una pagina de lectura larga una barra fija se come 60px de alto util en telefono durante todo el recorrido, a cambio de un enlace que nadie busca a media pagina. */ .topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px var(--gut); padding: 18px 0; border-bottom: 1px solid var(--line); } .topbar-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-wrap: wrap; } .topbar-nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; } .topbar-nav a:hover { color: var(--ink); border-bottom-color: var(--line); } /* La pagina actual se marca con `aria-current`, que es el atributo que ya la anuncia al lector de pantalla. Un `class="active"` aparte diria lo mismo dos veces y se desincronizaria. */ .topbar-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ok); } /* `flex-wrap: wrap` no es cosmetico: sin el, el ancho minimo de este bloque es la suma de los tres controles, y ese minimo empuja al contenedor por encima del viewport en pantallas de 320px. Envolviendo, el minimo pasa a ser el control mas ancho. */ .topbar-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } /* Segmento: idioma y tema comparten forma porque son la misma clase de control, una preferencia de dos o tres estados que se ve en su propio boton. */ .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } /* Mas chicos que un boton de accion, a proposito: son PREFERENCIAS, no cosas que alguien viene a hacer. Al tamano de un boton normal competian con el acceso, que si es una accion, y ademas empujaban la barra. 28px de alto se queda por encima del minimo de 24 que pide WCAG 2.2 para un objetivo tactil, asi que achicar aqui no cuesta accesibilidad. */ .seg button { font: inherit; font-size: 12px; font-weight: 550; letter-spacing: 0.02em; padding: 5px 9px; min-height: 28px; cursor: pointer; border: 0; background: var(--surface); color: var(--ink-2); } .seg button + button { border-left: 1px solid var(--line); } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .seg button:focus-visible { outline: 2px solid var(--ok); outline-offset: -2px; } /* El boton de tema dice en que estado esta, no que va a pasar si lo pulsas. "Dark" con la pagina en claro es ambiguo: no se sabe si es el estado o la accion. Aqui la etiqueta es siempre el estado actual. */ /* UN ICONO, NO UNA PALABRA. Es lo que resuelve el problema en vez de compensarlo. Con texto, el boton medía lo que midiera la etiqueta activa: "System" 63px, "Light" 47, "Dark" 44. Cada clic lo encogia o lo ensanchaba y empujaba todo lo que venia despues en la barra. Se intento apilar las etiquetas en una rejilla para que mandara la mas ancha, y funcionaba, pero era compensar un problema que no tiene por que existir: un icono mide 16x16 y no cambia. Ademas se traduce solo, porque no hay nada que traducir. El nombre accesible si va traducido, y describe la accion: "Cambiar a tema oscuro". El icono muestra el DESTINO, no el estado: con la pagina clara se ve una luna, que es a donde vas si pulsas. Es la convencion, y encaja con que el nombre accesible tambien diga la accion. */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; } .theme-btn .ico { display: block; flex: none; } .theme-btn[data-theme-state="dark"] .ico-moon { display: none; } .theme-btn[data-theme-state="light"] .ico-sun { display: none; } /* Sin estado estampado todavia (antes de que corra el JS) se ensena la luna, que es lo correcto para el tema claro por defecto. */ .theme-btn:not([data-theme-state]) .ico-sun { display: none; } .btn-sm { font: inherit; font-size: 14px; font-weight: 550; padding: 7px 15px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--ink); color: var(--bg); text-decoration: none; white-space: nowrap; } .btn-sm:hover { background: var(--ok); border-color: var(--ok); color: var(--bg); } .btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); } /* En pantalla angosta la barra se reordena en DOS filas exactas: marca y controles arriba, menu completo abajo. Sin esto salian cuatro filas y 210px de cabecera en un telefono de 390px, una cuarta parte de la primera pantalla gastada antes de la primera palabra. VA DESPUES de las reglas base de `.topbar`, no antes. Una media query no aporta especificidad: puesta arriba pierde contra `.topbar { gap }` por puro orden de cascada, y el sintoma es desconcertante porque las propiedades que NO chocan (order, display) si se aplican y parece que la query funciona. El nombre del tema se oculta y queda solo el punto, que ya dice el estado por su relleno: lleno oscuro, vacio claro, mitad y mitad sistema. El boton no se queda mudo: su `aria-label` traducido lo sigue anunciando. */ @media (max-width: 860px) { .topbar { padding: 14px 0; gap: 12px; } .topbar-nav { order: 3; width: 100%; margin-left: 0; gap: 12px; } .topbar-ctl { margin-left: auto; } .seg .theme-btn [data-theme-label] { display: none; } .seg .theme-btn { padding: 5px 9px; } /* EL BOTON DE ACCESO SE MUDA AL MENU. Es lo que hace que la primera fila deje de depender del idioma. Con el boton dentro, el ancho de esa fila era marca + segmentos + un rotulo que mide distinto en cada idioma, y por eso saltaba: medido a 414px en la pantalla de acceso, "Sign up" dejaba la suma en 328 y "Crear cuenta" la subia a 360 contra 351 disponibles. Nueve pixeles decidian una fila entera. Fuera el boton, la fila es marca + dos segmentos de ancho FIJO, y ya no hay nada variable que medir. El acceso no se pierde: aparece como ultimo enlace del menu, que se desplaza y por tanto admite cualquier rotulo. */ .topbar-ctl .btn-sm { display: none; } .nav-cta { color: var(--ink); font-weight: 550; } } /* En pantalla ancha el enlace del menu sobra: ahi el boton de los controles se ve entero y repetirlo seria decir dos veces lo mismo. */ @media (min-width: 861px) { .nav-cta { display: none; } } /* UNA SOLA FILA QUE SE DESPLAZA, y el alto deja de depender del idioma. Antes esto se intento por tipografia: apretar la separacion y bajar el cuerpo hasta que el espanol cupiera. No funciona, y el motivo es que la premisa esta mal. Los rotulos miden lo que miden en cada idioma, asi que cualquier medida fija acierta en un ancho y falla en el de al lado. Medido: con 13px y 8px de separacion entraba a 375 y 390, y seguia partiendose a 360 y a 320. Con `nowrap` la fila es una, siempre, en los dos idiomas y a cualquier ancho. El alto de la barra pasa a ser una constante en vez de algo que hay que volver a calcular cada vez que se traduce una palabra o se agrega un enlace. El desbordamiento se resuelve DENTRO del propio menu, que es el patron que pide la casa: el documento nunca scrollea en horizontal, el contenedor ancho si. La barra de scroll se oculta porque anadiria alto y volveria a mover la barra; el degradado del borde derecho es el que avisa de que hay mas. */ @media (max-width: 860px) { .topbar-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; /* Firefox */ -webkit-overflow-scrolling: touch; /* inercia en iOS */ /* El degradado solo aparece cuando hay algo cortado, porque una mascara sobre contenido que ya cabe no se nota. */ mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } .topbar-nav::-webkit-scrollbar { display: none; } .topbar-nav a { white-space: nowrap; } } /* ── Pie completo ───────────────────────────────────────────────────────── */ .foot-full { border-top: 1px solid var(--line); padding: 44px 0 56px; } /* `min(150px, 100%)` y no `150px` a secas. Un track cuyo minimo es una medida fija mas ancha que el contenedor NO se encoge: desborda, y el desbordamiento sale por el documento entero. Con `min()` el minimo cede al ancho disponible cuando la pantalla es mas angosta que el track. Medido: a 390px de viewport la version anterior daba 400px de scrollWidth, diez pixeles de scroll horizontal en toda la pagina, y venia solo de aqui. */ .foot-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } .foot-col h2 { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); font-weight: 550; margin-bottom: 14px; } .foot-col ul { display: grid; gap: 9px; } .foot-col a { font-size: 14px; color: var(--ink-2); text-decoration: none; } .foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--ink-2); } /* ── Cabecera de pagina interior ────────────────────────────────────────── */ .page-head { padding: 64px 0 40px; } .page-head h1 { max-width: 20ch; } .page-head .lede { margin-top: 20px; max-width: 62ch; font-size: 19px; } /* ── Pasos numerados ────────────────────────────────────────────────────── */ .steps { display: grid; gap: 44px; margin-top: 44px; counter-reset: step; } .step { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px; align-items: start; } .step-n { font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; } /* ── Mecanismo con nombre ───────────────────────────────────────────────── */ /* Un mecanismo con nombre propio se puede pedir, comparar y recordar. "Lee el banco y verifica" es una frase; Deposit-Verified es una cosa. */ .mech { border-left: 2px solid var(--ok); padding-left: 18px; margin-top: 22px; } .mech-name { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .mech p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-2); } /* ── Paquetes ───────────────────────────────────────────────────────────── */ /* Columnas explicitas y no `auto-fit`. Con cuatro planes, auto-fit resuelve a tres columnas en pantallas anchas y deja el cuarto solo en una segunda fila, que se lee como si fuera de otra categoria. Los cortes van donde la comparacion sigue siendo posible: uno, dos, o los cuatro de frente. Nunca tres. */ .bundles { display: grid; gap: 22px; margin-top: 32px; grid-template-columns: 1fr; } @media (min-width: 620px) { .bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .bundles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bundle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; } .bundle.pick { border-color: var(--ok); } .bundle-tag { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; color: var(--ok); margin-bottom: 8px; min-height: 16px; } .bundle h3 { font-size: 20px; } .bundle-price { font-variant-numeric: tabular-nums; margin-top: 14px; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .bundle-price small { font-size: 14px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; } .bundle-cap { margin-top: 8px; font-size: 14px; color: var(--ink-2); } .feat { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 11px; font-size: 14px; line-height: 1.5; } /* El estado se dice con simbolo Y color, nunca solo con color. Un pie de tabla que se lee solo en verde no se lee en absoluto para una parte del publico. */ .feat li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; } .feat li::before { content: "+"; color: var(--ok); font-weight: 700; line-height: 1.4; } .feat li.no { color: var(--ink-2); } .feat li.no::before { content: "\2212"; color: var(--ink-2); font-weight: 400; } /* ── Tabla comparativa ──────────────────────────────────────────────────── */ .cmp-frame { margin-top: 32px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } table.cmp { width: 100%; min-width: 620px; font-size: 15px; } .cmp th, .cmp td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; } .cmp thead th { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); font-weight: 550; white-space: nowrap; } .cmp thead th.us { color: var(--ok); } .cmp tbody th { font-weight: 500; color: var(--ink); } .cmp td { color: var(--ink-2); } .cmp td.us { color: var(--ink); background: var(--ok-soft); } /* ── Documento legal ────────────────────────────────────────────────────── */ /* Ancho de lectura, no ancho de pantalla. Un parrafo legal a 1080px se pierde de renglon y nadie lo termina, que es justo lo contrario de lo que un documento legal necesita. */ .doc { padding: 8px 0 72px; max-width: 74ch; } .doc h2 { font-size: 21px; letter-spacing: -0.015em; margin-top: 44px; margin-bottom: 12px; padding-top: 22px; border-top: 1px solid var(--line); } .doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 30px; } .doc h3 { font-size: 17px; margin-top: 26px; margin-bottom: 8px; } .doc p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin-top: 12px; } .doc p strong, .doc li strong { color: var(--ink); font-weight: 600; } .doc ul { margin-top: 12px; display: grid; gap: 9px; } .doc ul li { font-size: 16px; line-height: 1.6; color: var(--ink-2); padding-left: 20px; position: relative; } .doc ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); } .doc .stamp { font-size: 13px; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-top: 24px; line-height: 1.55; } /* ── Cuña al producto hermano ───────────────────────────────────────────── */ /* Bloque hundido y sin borde de tarjeta: se lee como una nota al pie del sitio, no como un anuncio. Si compitiera visualmente con las secciones de producto, estaria robandole atencion a la unica conversion que esta pagina persigue. */ .cross { background: var(--sunk); border-radius: var(--r-lg); padding: 40px clamp(24px, 4vw, 44px); margin-top: 8px; } .cross h2 { font-size: clamp(22px, 2.6vw, 28px); } /* ── Aviso de estado ────────────────────────────────────────────────────── */ /* Pre-lanzamiento. Aparece en las paginas que describen algo que todavia no se puede comprar, y lo dice arriba, no en letra chica al final. */ .flag { border: 1px solid var(--line); border-left: 3px solid var(--gap); background: var(--gap-soft); border-radius: var(--r); padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 74ch; } .flag strong { font-weight: 600; } /* ── Motion ─────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }