/* ========================================================= Rent a Sportsbook One system: light page, dark rounded panels, one accent. Rhythm: dark hero → light → dark → light → dark → light → dark → light footer ========================================================= */ /* ---------- La tipografia, servida desde aqui ---------- * * Antes venia de Google Fonts, y eso costaba dos conexiones nuevas * -fonts.googleapis.com para la hoja de estilo y fonts.gstatic.com para el * archivo- con su DNS y su saludo TLS cada una, ademas de una hoja de estilo * de terceros que bloquea el pintado. Servida desde el propio dominio no hay * conexion nueva que abrir y se cachea un ano. * * ES LA VARIABLE, NO CINCO PESOS SUELTOS. Un archivo de 43,8 KB cubre de 400 * a 800 en continuo. Y no es solo por peso: el sitio usa font-weight 650 en * .flip-list strong, y con pesos estaticos eso se redondeaba al 600 o al 700 * mas cercano. Ahora se dibuja el 650 de verdad. * * swap: mientras la fuente baja, el texto se ve con la del sistema en vez de * quedarse invisible. Con 43,8 KB el cambio dura un parpadeo. * * Solo el subconjunto latino. Los de cirilico, griego y vietnamita que * tambien sirve Google no los necesita un sitio en ingles. * * Inter Tight es SIL OFL: alojarla uno mismo es parte de la licencia. */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #f4f5f2; --surface: #ffffff; --ink: #0d1116; --ink-2: #545b64; --ink-3: #636a74; /* 5.06:1 sobre --bg. El anterior, #8a9098, daba 2.94 */ --line: #e2e4df; --dark: #0c1015; --dark-2: #0a1430; --glass: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); --glass-line: rgba(255, 255, 255, .12); --dark-line: rgba(255, 255, 255, .09); --on-dark: #f3f5f7; --on-dark-2: #bbc2cb; /* sube con la bajada de --photo-opacity: sobre el cristal de .flip-list en panel, #b9c0c9 se quedaba en 4.48:1, a dos centesimas del minimo */ --accent: #2ee57f; --accent-ink: #087a3c; /* 4.97:1 sobre --bg. El anterior, #0b8a45, daba 4.05 */ --accent-soft: rgba(46, 229, 127, .12); --radius-lg: 32px; --radius: 18px; --radius-sm: 12px; --gutter: 12px; --shadow: 0 1px 2px rgba(13, 17, 22, .04), 0 12px 32px -12px rgba(13, 17, 22, .12); --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } [id] { scroll-margin-top: 24px; } svg { flex-shrink: 0; } .wrap { width: min(1200px, 100% - 64px); margin-inline: auto; } .section { padding-block: 128px; } /* ---------- Dark panels ---------- */ .panel { margin: var(--gutter); border-radius: var(--radius-lg); background: linear-gradient(135deg, #0d2a6b 0%, #081634 38%, #04070f 75%, #020305 100%); color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate; } .panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 85% 0%, rgba(46, 229, 127, .10), transparent 70%); } .panel-glow::before { background: radial-gradient(50% 60% at 100% 100%, rgba(46, 229, 127, .14), transparent 70%), radial-gradient(40% 50% at 0% 0%, rgba(46, 229, 127, .06), transparent 70%); } /* Sport photos (blue duotone, img/*.webp): screened over the gradient, faded toward the copy */ .panel-photo::after { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--photo) var(--photo-pos, center) / cover no-repeat; /* .45 y no .55: el modo screen ACLARA el panel, y al 55% habia zonas que subian a rgb(81,90,102), donde el texto secundario se quedaba en 3.01:1. La foto sigue leyendose como ambiente, que es todo su trabajo. */ opacity: var(--photo-opacity, .45); mix-blend-mode: screen; -webkit-mask-image: var(--photo-mask); mask-image: var(--photo-mask); pointer-events: none; } /* ---------- Fondos de panel ---------- * * Antes cada clase ataba una MASCARA a una IMAGEN concreta (.photo-nfl era a la * vez "degradado lateral" y "bg-005"). Con eso solo habia cuatro combinaciones * posibles, y por eso la misma foto salia en cuatro paginas: bg-005 estaba en * la portada, productos, precios y preguntas. * * Ahora son dos cosas separadas: * * .mask-side la mascara para paneles con la copia a la izquierda * .mask-center la mascara para paneles centrados * .photo-01..10 una clase por archivo, sin mascara * * Un panel lleva una de cada: class="panel panel-photo mask-side photo-04". * Asi las 10 imagenes se reparten entre los 12 paneles del sitio sin que * ninguna pagina repita, que es lo que hacia que todo se pareciera. */ /* La imagen queda a la derecha y la copia limpia a la izquierda */ .mask-side { --photo-mask: linear-gradient(to left, #000 15%, rgba(0, 0, 0, .35) 55%, transparent 85%); } /* * Centrado: se difumina arriba y abajo. Ojo con la opacidad: esta mascara deja * la foto a plena fuerza JUSTO EN EL CENTRO, que es donde va el titular. Con * la unica imagen que se usaba antes (bg-007, un pabellon oscuro) colaba a * .45; al repartir las diez, las saturadas se comian el texto. A .26 la foto * sigue leyendose como ambiente y el titular manda, que es el orden correcto. * * Si alguna imagen concreta sigue pesando demasiado, no subas ni bajes esto: * ajusta su --photo-opacity en la clase .photo-NN, que es por imagen. */ .mask-center { --photo-mask: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%); --photo-opacity: .26; } .photo-01 { --photo: url('img/bg-001.webp'); } .photo-02 { --photo: url('img/bg-002.webp'); --photo-pos: 30% center; } .photo-03 { --photo: url('img/bg-003.webp'); } .photo-04 { --photo: url('img/bg-004.webp'); } .photo-05 { --photo: url('img/bg-005.webp'); --photo-pos: center 70%; } .photo-06 { --photo: url('img/bg-006.webp'); } .photo-07 { --photo: url('img/bg-007.webp'); } .photo-08 { --photo: url('img/bg-008.webp'); --photo-pos: 70% center; } .photo-09 { --photo: url('img/bg-009.webp'); } .photo-10 { --photo: url('img/bg-010.webp'); } /* Las mismas fotos, a 1080 px, para pantallas pequenas. * * Las de arriba son de 1920 y en un movil de 390 px de ancho no aportan un * solo pixel visible: son 764 KB para pintar algo que se ve a 1170 px como * mucho. Estas diez suman 318 KB. * * El corte esta en 900 px y no en 1080 a proposito: a partir de ahi el panel * ya ocupa el ancho completo del .wrap y la foto se estira de verdad. * * Si se anade una imagen, tiene que entrar en los DOS sitios. */ @media (max-width: 900px) { .photo-01 { --photo: url('img/m/bg-001.webp'); } .photo-02 { --photo: url('img/m/bg-002.webp'); } .photo-03 { --photo: url('img/m/bg-003.webp'); } .photo-04 { --photo: url('img/m/bg-004.webp'); } .photo-05 { --photo: url('img/m/bg-005.webp'); } .photo-06 { --photo: url('img/m/bg-006.webp'); } .photo-07 { --photo: url('img/m/bg-007.webp'); } .photo-08 { --photo: url('img/m/bg-008.webp'); } .photo-09 { --photo: url('img/m/bg-009.webp'); } .photo-10 { --photo: url('img/m/bg-010.webp'); } } /* ---------- Type ---------- */ h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -.045em; } h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; } h1, h2 { text-wrap: balance; } h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; } .muted { color: var(--on-dark-2); } .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 18px; } .panel .eyebrow { color: var(--accent); } .lead p, .lead-text { font-size: 17px; color: var(--ink-2); } .lead p + p { margin-top: 16px; } .lead strong { color: var(--ink); font-weight: 600; } .lead-text { margin-top: 22px; max-width: 520px; } .panel .lead-text { color: var(--on-dark-2); } /* .lead-text ya tenia su version para fondo oscuro; .lead p NO, y hasta ahora * no se habia notado porque .lead solo se usaba en secciones claras. Al meter * un .section-head.split dentro de un .panel en /contact, esa columna salia en * gris oscuro sobre fondo oscuro: ilegible. Se arregla en el componente y no * en la pagina, que es donde estaba el agujero. */ .panel .lead p { color: var(--on-dark-2); } .panel .lead strong { color: var(--on-dark); } .small-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .panel .small-label { color: var(--on-dark-2); } .text-link { color: var(--accent-ink); font-weight: 600; border-bottom: 1px solid currentColor; } .panel .text-link { color: var(--accent); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); display: inline-block; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: background .2s, transform .2s, border-color .2s; white-space: nowrap; } .btn svg { width: 18px; transition: transform .2s; } .btn:hover svg { transform: translateX(3px); } .btn-sm { height: 42px; padding: 0 18px; font-size: 14px; } .btn-block { width: 100%; } .btn-accent { background: var(--accent); color: #062914; } .btn-accent:hover { background: #4cf094; } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #262d36; } /* btn-ghost nacio para los paneles oscuros: texto y borde blancos. Al partir * el sitio en varias paginas se empezo a usar tambien sobre fondo claro, donde * era literalmente invisible: blanco sobre blanco. Ahora el estilo por defecto * es el de fondo claro y la version blanca se acota a .panel, igual que ya se * hace con .small-label unas lineas mas abajo. */ .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink-3); background: var(--surface); } .panel .btn-ghost { border-color: rgba(255, 255, 255, .22); color: var(--on-dark); } .panel .btn-ghost:hover { border-color: rgba(255, 255, 255, .5); background: transparent; } /* ---------- Header ---------- */ .site-header { width: min(1200px, 100% - 64px); margin-inline: auto; height: 88px; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid var(--dark-line); position: relative; } /* ---------- Accesibilidad ---------- */ /* Fuera de pantalla hasta que recibe el foco. Con display:none no entraria en * el orden de tabulacion y seria decorativo. */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--accent); color: #062914; font-size: 15px; font-weight: 600; transition: top .15s; } .skip-link:focus { top: 0; } /* El anillo de foco del navegador es oscuro, asi que sobre los paneles casi no * se ve. Este va en el verde de marca, que contrasta con los dos fondos del * sitio, y con separacion para que no se coma el borde del elemento. * * :focus-visible y no :focus: el anillo sale al navegar con teclado pero no al * hacer clic con el raton, que es lo que espera la gente. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* La marca. * * TODO cuelga de un unico font-size, y ese font-size es fluido. El simbolo se * dimensiona por ANCHO en em y la altura va en auto: un alto fijo en px no * escala con nada -ni con el contenedor ni con el viewport- y ademas arrastra * al ancho detras, que es como la marca acaba diminuta en escritorio. El ancho * es la dimension que manda; la altura es consecuencia. * * El tracking es el mismo -.035em de los h1: es lo que hace que el logotipo * parezca cortado de la misma tela que los titulares y no pegado encima. */ .brand { display: inline-flex; align-items: center; gap: .5em; color: var(--ink); font-size: clamp(21px, 1.7vw, 26px); } /* El monograma ya no se recolorea desde aqui: trae sus propios degradados y * la misma pastilla azul funciona sobre los dos fondos del sitio. Se probo a * 64, 32 y 16 px sobre claro y sobre oscuro antes de quitar las variables. */ .brand-mark { width: 1.1em; height: auto; flex: 0 0 auto; } .brand-word { font-size: 1em; font-weight: 500; letter-spacing: -.035em; line-height: 1; } .brand-word b { font-weight: 700; } /* Las dos barras cortas heredan este color por currentColor, asi que la * cabecera -que siempre vive dentro de un .panel- no necesita otro archivo. */ .panel .brand { color: var(--on-dark); } .main-nav { display: flex; gap: 32px; margin-left: auto; font-size: 15px; font-weight: 500; color: var(--on-dark-2); } .main-nav a:hover { color: var(--on-dark); } .menu-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--on-dark); cursor: pointer; padding: 8px; } /* El boton lleva los dos iconos y el CSS ensena el que toca. La navegacion va * ANTES que el boton en el marcado, asi que el hermano general (~) la alcanza. */ .menu-toggle .lucide-x { display: none; } .main-nav.open ~ .menu-toggle .lucide-menu { display: none; } .main-nav.open ~ .menu-toggle .lucide-x { display: block; } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 1fr 440px; gap: 72px; align-items: center; padding-block: 80px 96px; } .tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--dark-line); background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 500; color: var(--on-dark-2); margin-bottom: 28px; } .hero-lede { margin-top: 26px; max-width: 540px; font-size: 18px; color: var(--on-dark-2); } .hero-lede strong { color: var(--on-dark); font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } /* ---------- Section heads ---------- */ .section-head { margin-bottom: 64px; } .section-head.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; } .section-head.center { text-align: center; max-width: 720px; margin-inline: auto; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card-dark { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .icon-tile { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); } .icon-tile svg { width: 22px; } /* ---------- 01 Products ---------- */ .product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .product { grid-column: span 2; } .product-lg { grid-column: span 3; } .product-lg h3 { font-size: 28px; } .product { padding: 32px; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; } .product:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(13, 17, 22, .04), 0 24px 48px -16px rgba(13, 17, 22, .18); } .product h3 { font-size: 24px; margin-top: 28px; } .product p { color: var(--ink-2); margin-top: 12px; flex: 1; } .included { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 24px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 600; } .included svg { width: 15px; } /* ---------- 02 How it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; } .steps li { padding: 32px; position: relative; } .step-num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #062914; font-weight: 700; font-size: 18px; } .steps h3 { font-size: 22px; margin-top: 28px; } .steps p { color: var(--on-dark-2); margin-top: 10px; } /* connector arrows between steps */ .steps li:not(:last-child)::after { content: ''; position: absolute; top: 53px; right: -20px; width: 20px; height: 2px; background: var(--accent); opacity: .5; } /* Key facts (inside How it works) */ .facts { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); } .fact { padding: 28px 32px; display: grid; gap: 4px; } .fact + .fact { border-left: 1px solid var(--glass-line); } .fact strong { font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; } .fact:first-child strong { color: var(--accent); } .fact span { font-size: 14px; color: var(--on-dark-2); } .center-cta { display: flex; justify-content: center; margin-top: 56px; } /* ---------- 03 Pricing ---------- */ .pricing { display: grid; grid-template-columns: 1fr 440px; gap: 80px; align-items: center; } /* La tarjeta se compacto: eran 658 px al lado de una columna de texto de 315, * o sea 170 px de aire muerto arriba y otros 170 abajo. Lo que sobraba estaba * DENTRO de la tarjeta, no en la rejilla, asi que se recorta ahi: * - el $9 y su leyenda comparten linea base en vez de apilarse (-55 px) * - el numero baja de 88 a 64 px, que sigue siendo el elemento mas grande * - menos aire entre los checks y menos relleno de caja * Misma informacion, ni una linea menos. */ .price-card { padding: 30px 32px; position: relative; } .price-card::before { content: ''; position: absolute; inset: -1px -1px auto; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: var(--accent); } .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; } .price small { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); } .checks { margin: 24px 0 20px; display: grid; gap: 10px; } .checks li { display: flex; gap: 12px; font-size: 15px; } .checks + .checks-extra { margin-top: -4px; padding-top: 16px; border-top: 1px solid var(--line); } .checks-extra li { color: var(--ink-2); font-size: 14px; } .checks svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); } /* ---------- 04 Switch ---------- */ .switch { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .switch .btn { margin-top: 36px; } .migration { padding: 32px; } .migration ol { margin-top: 20px; display: grid; gap: 4px; position: relative; } .migration ol::before { content: ''; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: var(--dark-line); } .migration li { display: flex; align-items: center; gap: 16px; padding: 12px 0; position: relative; } .migration li svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); color: var(--accent); } .migration li.done svg { background: var(--accent); border-color: var(--accent); color: #062914; } .migration strong { display: block; font-weight: 600; } .migration small { display: block; font-size: 14px; color: var(--on-dark-2); } /* ---------- 05 FAQ ---------- */ .faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; } .faq > div:first-child { position: sticky; top: 40px; } .faq-list { display: grid; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .2s; } .faq details[open] { box-shadow: var(--shadow); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary svg { width: 20px; color: var(--ink-3); transition: transform .2s, color .2s; } .faq details[open] summary svg { transform: rotate(45deg); color: var(--accent-ink); } .faq details p { padding: 0 24px 24px; color: var(--ink-2); } /* ---------- 06 Contact ---------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } /* ---------- Footer ---------- */ .site-footer { padding-block: 56px 40px; } .footer-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--line); } .footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; color: var(--ink-2); } .footer-links a:hover { color: var(--ink); } /* La fila de contacto del pie. Sale en todas las paginas (consistencia NAP: * ver el comentario de inc/footer.php). */ .footer-reach { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 22px; font-size: 14px; color: var(--ink-2); } .footer-reach a { display: inline-flex; align-items: center; gap: 8px; } .footer-reach a:hover { color: var(--ink); } .footer-reach svg { width: 15px; color: var(--accent-ink); } .footer-bottom { display: flex; justify-content: space-between; gap: 32px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); } .footer-bottom p { max-width: 720px; } .footer-bottom span { white-space: nowrap; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1080px) { .hero, .switch, .contact { grid-template-columns: 1fr; gap: 56px; } .pricing { grid-template-columns: 1fr; gap: 48px; } .price-card { max-width: 520px; } .faq { grid-template-columns: 1fr; gap: 40px; } .faq > div:first-child { position: static; } } @media (max-width: 860px) { :root { --gutter: 8px; --radius-lg: 24px; } .wrap, .site-header { width: calc(100% - 40px); } .section { padding-block: 88px; } .section-head { margin-bottom: 44px; } .section-head.split { grid-template-columns: 1fr; gap: 20px; } .site-header { height: 72px; } .header-cta { display: none; } .menu-toggle { display: block; } .main-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; z-index: 20; flex-direction: column; gap: 4px; padding: 12px; background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: var(--radius); font-size: 17px; } .main-nav a { padding: 12px 14px; border-radius: 10px; } /* ---------- Objetivos tactiles ---------- * * Apple pide 44x44 y Google 48x48 para cualquier cosa que se toque con el * dedo. Medido, aqui habia enlaces de 24 px de alto: los del pie y los de * la fila de contacto. Con el dedo eso se falla, y fallar en el pie * significa que el visitante acaba pulsando el enlace de al lado. * * Se resuelve con min-height y centrado, no con margin: asi la caja crece * hacia dentro y no separa visualmente los enlaces mas de lo que ya estan. * El gap vertical baja para compensar el alto nuevo y que el pie no crezca. * * Los enlaces DENTRO de un parrafo (.text-link) se quedan como estan: no se * les puede dar 44 px de alto sin romper el interlineado del texto, y el * propio criterio 2.5.8 de WCAG exime a los enlaces en linea. */ /* El relleno lateral va acompanado de una bajada del gap: la zona tocable * crece 18 px pero el hueco que se VE entre enlaces sigue siendo el mismo. * Hacia falta por "FAQ", que mide 26 px de ancho y se quedaba corto aunque * el alto ya fuera de 44. */ .footer-links { gap: 0 6px; margin-inline: -9px; } .footer-links a, .footer-reach a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 9px; } .footer-reach { gap: 0 10px; margin-inline: -9px; } .brand { min-height: 44px; } /* El boton del menu medía 40x40 abierto. Es EL control de la navegacion entera en movil: es el ultimo sitio donde conviene apurar. */ .menu-toggle { display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0; } .main-nav a:hover { background: rgba(255, 255, 255, .05); } .main-nav.open { display: flex; } .hero { padding-block: 48px 56px; gap: 40px; } .facts { grid-template-columns: 1fr 1fr; margin-top: 14px; } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--glass-line); } .hero-actions { display: none; } .product-grid, .steps { grid-template-columns: 1fr; gap: 14px; } .product, .product-lg { grid-column: auto; } .steps li:not(:last-child)::after { top: auto; bottom: -14px; right: auto; left: 53px; width: 2px; height: 14px; } } @media (max-width: 560px) { .wrap, .site-header { width: calc(100% - 32px); } .panel .wrap { width: calc(100% - 32px); } h1 { font-size: 42px; } h2 { font-size: 32px; } .hero-lede, .lead p, .lead-text { font-size: 16px; } .hero-actions .btn { width: 100%; } .product, .steps li, .migration, .price-card { padding: 24px; } .price { font-size: 72px; } .footer-bottom { flex-direction: column; gap: 12px; } .fact { padding: 20px; } .fact strong { font-size: 28px; } .fact span { font-size: 13px; } } /* ---------- /products ---------- * * EL PROBLEMA QUE ESTO RESUELVE * La primera version repetia el mismo bloque -copia a la izquierda, tarjeta de * caracteristicas a la derecha- seis veces seguidas. Con texto largo era una * pared; con texto corto dejaba medio ancho vacio al lado de una tarjeta alta. * En los dos casos el ojo no se movia: misma forma, mismo peso, misma * alineacion en cada scroll. * * Aqui hay CINCO formas distintas y cada una aparece una o dos veces. El * contraste no lo da el color: lo dan el tamano de letra, la densidad y de que * lado cae el peso. */ /* 1. Declaracion grande: tipografia enorme a la izquierda, apoyo a la derecha */ /* align-items:start y no end. Con `end` las dos columnas alinean por la base, * que queda bien cuando miden parecido; pero si la derecha es mas alta -tres * parrafos y unos botones- el titular se descuelga al fondo y deja un hueco * enorme sobre el. Alinear arriba es predecible con cualquier contenido. */ .claim { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .claim { grid-template-columns: 1fr; gap: 24px; } } .claim h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.035em; } /* Con margen entre parrafos: sin el, dos parrafos seguidos se leian como uno * solo y el corte de idea se perdia. */ .claim .claim-side p { font-size: 17px; line-height: 1.6; color: var(--ink-2); } .claim .claim-side p + p { margin-top: 14px; } .panel .claim h2 { color: var(--on-dark); } .panel .claim .claim-side p { color: var(--on-dark-2); } /* 2. Franja de cifras: el ancla visual que corta el scroll */ .statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; } @media (max-width: 800px) { .statband { grid-template-columns: repeat(2, 1fr); } } .statband div { padding: 26px 22px; border-left: 1px solid var(--dark-line); } .statband div:first-child { border-left: 0; padding-left: 0; } .statband b { display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.03em; color: var(--on-dark); line-height: 1; } .statband span { display: block; margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--on-dark-2); } /* 4. Split invertido: la pieza a la izquierda y la copia a la derecha */ .flip { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .flip { grid-template-columns: 1fr; gap: 28px; } } .flip .flip-copy h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.025em; margin-bottom: 14px; } .flip .flip-copy p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 12px; } .panel .flip .flip-copy h2 { color: var(--on-dark); } .panel .flip .flip-copy p { color: var(--on-dark-2); } /* ---- .flip-list: EL componente de lista de la pagina ---- * * Antes convivian dos lenguajes de tarjeta: este -contenedor con borde, filas * separadas por lineas, check verde- y una rejilla de celdas sueltas con * icono y parrafo. Cada uno se veia bien por separado, pero juntos en la misma * pagina se leian como dos sistemas de diseno distintos. * * Se queda este, y se usa en los tres sitios donde hay que listar * caracteristicas. La variedad la dan .claim, .statband, .flip y .trio, que * son LAYOUTS; el componente que lista es siempre el mismo. Eso es la * consistencia: el ojo aprende una forma y la reconoce despues. * * .cols-2 y .cols-3 solo cambian en cuantas columnas se reparten las filas. */ .flip-list { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .panel .flip-list { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(14px); } .flip-list ul { display: grid; } .flip-list li { display: flex; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); } .panel .flip-list li { border-top-color: var(--dark-line); color: var(--on-dark-2); } .flip-list svg { width: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--accent-ink); } .panel .flip-list svg { color: var(--accent); } .flip-list strong { color: var(--ink); font-weight: 650; } .panel .flip-list strong { color: var(--on-dark); } .flip-list li:first-child { border-top: 0; padding-top: 0; } /* Con varias columnas hay que quitar el separador a la PRIMERA DE CADA * columna, no solo a la primera de la lista: si no, la segunda columna * arranca con una linea colgando en el aire. */ .flip-list.cols-2 ul { grid-template-columns: 1fr 1fr; column-gap: 44px; } .flip-list.cols-3 ul { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .flip-list.cols-2 li:nth-child(-n+2), .flip-list.cols-3 li:nth-child(-n+3) { border-top: 0; padding-top: 0; } @media (max-width: 900px) { .flip-list.cols-2 ul, .flip-list.cols-3 ul { grid-template-columns: 1fr; column-gap: 0; } .flip-list.cols-2 li:nth-child(-n+2), .flip-list.cols-3 li:nth-child(-n+3) { border-top: 1px solid var(--line); padding-top: 14px; } .panel .flip-list.cols-2 li:nth-child(-n+2), .panel .flip-list.cols-3 li:nth-child(-n+3) { border-top-color: var(--dark-line); } /* Y esta reposicion tiene que igualar en especificidad a la de arriba: `.flip-list li:first-child` es (0,1,1) y pierde contra `.flip-list.cols-2 li:nth-child(-n+2)`, que es (0,3,1). Con la clase repetida empatan y gana esta por ir despues. */ .flip-list.cols-2 li:first-child, .flip-list.cols-3 li:first-child { border-top: 0; padding-top: 0; } } /* 5. Trio de productos: tres tarjetas de igual peso, cortan el ritmo de splits */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: 48px; } @media (max-width: 900px) { .trio { grid-template-columns: 1fr; } } .trio article { display: grid; align-content: start; gap: 12px; padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .trio .icon-tile { width: 42px; height: 42px; } .trio h3 { font-size: 19px; letter-spacing: -.015em; } .trio p { font-size: 15px; line-height: 1.6; color: var(--ink-2); } .trio .mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .trio .mini span { padding: 5px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); } /* Los hijos de una rejilla llevan min-width:auto por defecto, asi que una * palabra que no cabe ENSANCHA su columna en vez de partirse, y la pagina * entera se desborda. A 390 px pasaba en el titular de .claim: 8 px de scroll * horizontal en toda la pagina por una sola linea de texto. * * min-width:0 le devuelve al navegador el permiso para encoger la columna. * El overflow-wrap es el seguro para un nombre propio o una URL larga. */ .claim > *, .flip > *, .trio > *, .flip-list ul > * { min-width: 0; } .claim h2, .flip .flip-copy h2 { overflow-wrap: break-word; } /* .center-cta no envolvia: dos botones uno al lado del otro no caben en 390 px * y desbordaban la pagina entera. Envolver es lo que se espera de una fila de * botones en movil. */ .center-cta { flex-wrap: wrap; } /* ---------- /how-it-works ---------- * * Dos formas propias de esta pagina. Las listas siguen siendo .flip-list y las * aperturas .claim: ese es el lenguaje comun del sitio y no se toca. Lo que * cambia de una pagina a otra son los LAYOUTS. * * Y no se repiten los tres pasos numerados de la portada. La portada los * resume; aqui se cuenta lo que pasa DENTRO de ellos, que es otra cosa. */ /* Linea de tiempo: que ocurre y cuando, con la hora como ancla visual */ .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; } @media (max-width: 900px) { .timeline { grid-template-columns: 1fr; } } .timeline > div { position: relative; padding: 30px 26px 30px 0; } .timeline > div + div { padding-left: 26px; border-left: 1px solid var(--line); } .panel .timeline > div + div { border-left-color: var(--dark-line); } @media (max-width: 900px) { .timeline > div { padding: 24px 0 24px 26px; border-left: 1px solid var(--line); } .timeline > div + div { padding-left: 26px; } } .timeline .when { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .panel .timeline .when { background: rgba(46, 229, 127, .16); color: var(--accent); } .timeline h3 { margin-top: 14px; font-size: 18px; letter-spacing: -.015em; } .panel .timeline h3 { color: var(--on-dark); } .timeline p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } .panel .timeline p { color: var(--on-dark-2); } /* Reparto de tareas: lo nuestro contra lo tuyo, lado a lado */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 48px; } @media (max-width: 800px) { .duo { grid-template-columns: 1fr; } } .duo > div { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .duo > div.mine { background: var(--accent-soft); border-color: var(--accent); } .duo h3 { font-size: 17px; letter-spacing: -.015em; } .duo .who { display: block; margin-top: 3px; margin-bottom: 18px; font-size: 13px; color: var(--ink-3); } .duo ul { display: grid; gap: 12px; } .duo li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .duo li svg { width: 16px; flex: 0 0 auto; margin-top: 3px; } .duo .theirs li svg { color: var(--ink-3); } .duo .mine li svg { color: var(--accent-ink); } /* ---------- /pricing ---------- * * Una pagina de precios con un solo precio no necesita tablas. Lo que necesita * es explicar que significa ese precio, que entra y que no. Asi que aqui hay * UNA cifra grande y el resto es texto. * * La comparacion alquilar/construir reutiliza .duo, el mismo componente que el * reparto de tareas en /how-it-works: es semanticamente lo mismo -dos columnas * enfrentadas- y usar el mismo componente para la misma idea es consistencia, * no pereza. */ /* La cifra, como declaracion y no como tabla */ /* align-items: baseline alineaba la PRIMERA linea de la leyenda con la linea * base del numero, asi que las otras dos caian por debajo: el texto colgaba * unos 50 px bajo el $9 a todos los anchos y parecia despegado del bloque. * Con flex-end la leyenda se apoya en la base del numero, que es como se monta * un precio con su unidad. */ .bigprice { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 8px; } .bigprice b { font-size: clamp(64px, 11vw, 132px); font-weight: 800; letter-spacing: -.05em; line-height: .85; color: var(--on-dark); } .bigprice span { font-size: 17px; line-height: 1.45; color: var(--on-dark-2); max-width: 310px; padding-bottom: 6px; } /* Add-ons: una fila por cosa, y NINGUN precio. * Los add-ons de esta plataforma no se cobran todos igual -unos por jugador, * otros como porcentaje del beneficio semanal-, asi que poner cifras sueltas * aqui confunde mas de lo que aclara. Se dice que existe y que se pregunta. */ .addon-list { margin-top: 48px; border-top: 1px solid var(--line); } .addon-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); } @media (max-width: 860px) { .addon-row { grid-template-columns: 1fr; gap: 8px; align-items: start; } } .addon-row h3 { font-size: 17px; letter-spacing: -.015em; } .addon-row p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .addon-row .ask { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: border-color .2s, color .2s; } .addon-row .ask:hover { border-color: var(--accent); color: var(--ink); } .addon-row .ask svg { width: 14px; } /* ---------- /contact ---------- * * Tres formas propias. Ninguna de las otras paginas las usa, y esta pagina no * usa ninguna de las suyas: nada de .timeline, .duo, .statband, .trio ni * .addon-list. Lo comun sigue siendo .claim y .flip-list. */ /* Tiempos de respuesta, dentro del hero. Deliberadamente pequenos: son un dato * util, no un titular. Separados por una linea en vez de por puntos verdes, * que a tres repeticiones cansan. */ .hours { display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 30px; } .hours div { padding-right: 26px; font-size: 14px; line-height: 1.45; } .hours div + div { padding-left: 26px; border-left: 1px solid var(--dark-line); } .hours b { display: block; font-weight: 650; color: var(--on-dark); } .hours span { color: var(--on-dark-2); } @media (max-width: 560px) { .hours { display: grid; grid-template-columns: 1fr; gap: 12px; } .hours div, .hours div + div { padding: 0; border-left: 0; } } /* Los cuatro canales. Cuatro columnas densas justo debajo del hero: quien * llega a /contact buscando un telefono lo quiere en el primer vistazo. * * El dato -numero, usuario, correo- va en negrita y en grande porque es lo que * la persona viene a copiar; el nombre del canal va encima y pequeno. Al reves * obliga a leer la tarjeta entera para encontrar el dato. */ .reach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1060px) { .reach { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .reach { grid-template-columns: 1fr; } } /* El