/* ============================================================================ CleanDate — landing fintech clara ---------------------------------------------------------------------------- Un solo archivo. Orden fijo de secciones (CLAUDE-FRONTEND.md §1.2-bis): 1. tokens · 2. reset y elementos · 3. utilidades · 4. componentes 5. secciones, en el mismo orden del HTML · 6. movimiento reducido Nada se anade fuera de su seccion. Cada @media vive dentro de su componente. Sin imagenes: todo el color es CSS. Es lo que hace que la pagina pese ~30 KB en vez de 13 MB, que es el problema real de la home actual. ========================================================================== */ /* ═══════════════════════════════════════════════════════ 1. TOKENS ══ */ :root { /* --- Superficies. Blanco de verdad: la peticion es fondo claro --------- */ --paper: #FFFFFF; --paper-soft: #F5F8FC; /* franjas alternas, con matiz azul de marca */ --ink: #091731; /* azul noche: og-image, esquina superior izq. */ --ink-2: #0E2145; /* --- Texto (ratio medido sobre --paper) -------------------------------- */ --text: #091731; /* 18,3:1 AAA */ --text-2: #35435C; /* 9,2:1 AAA */ --text-muted: #5C687A; /* 5,6:1 AA — minimo permitido para cuerpo */ --text-faint: #8992A2; /* 3,3:1 SOLO >=24px o elementos no informativos */ --text-invert: #F2F6FC; /* --- MARCA. Los seis salen muestreados de los archivos reales de CleanDate. Ninguno esta inventado ni «aproximado»: tarjeta-first.png -> cuerpo, arco del logo y swoosh icon-512.png -> anillo menta -> aqua -> azul og-image.jpg -> noche y verde Si se cambia uno, hay que volver al archivo, no al gusto. */ --royal: #1B3FA0; /* CUERPO de la tarjeta First. El azul de la marca */ --royal-deep: #122B6E; /* bloques oscuros: la tarjeta se despega encima */ --azure: #1E88FF; /* anillo del icono, tramo azul */ --sky: #4287F2; /* swoosh del logo sobre la tarjeta */ --aqua: #6AD5CD; /* anillo del icono, tramo aqua */ --mint: #77E2C4; /* anillo del icono, tramo menta */ --card-aqua: #87D4CC; /* arco y «Date» del logo sobre la tarjeta */ --green: #038970; /* og-image, verde de marca */ /* --- Color con funcion ------------------------------------------------ */ --link: #1B3FA0; /* 9,2:1 AAA — el azul rey de la tarjeta */ --ok: #04785F; /* 5,4:1 AA — el verde de marca, oscurecido lo justo para leerse sobre blanco */ --ok-soft: #E4F4EF; --ok-line: #B0DFD1; --flag: #A6402E; /* 6,0:1 AA — estado «reportado» */ --flag-soft: #FAEEEB; /* --- Estructura ------------------------------------------------------- */ --line: #E6E9EF; --line-strong: #D3D9E2; --line-invert: rgba(244,247,251,.30); /* --- Tipografia ------------------------------------------------------- Dos cortes de la misma familia, como hacen las fintech de referencia (Apple con SF Pro Display/Text, Stripe, Wise): un corte ESTRECHO para titulares y el normal para leer. Inter Tight titulares — mas estrecha y con menos aire entre letras. Es lo que corrige el «letra muy ancha»: el peso baja de 800 a 700 y la caja de cada letra es ~5% mas angosta. Inter cuerpo e interfaz — legible a 14px en Android. Se retiro Instrument Serif (la itálica). Ninguna fintech usa cursiva en titulares; el contraste entre voces ahora lo da el PESO, no el estilo. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); --text-lg: clamp(1.0625rem,1.00rem + 0.30vw, 1.1875rem); --text-xl: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.30rem + 0.95vw, 2.125rem); --text-3xl: clamp(1.875rem, 1.50rem + 1.70vw, 2.875rem); --text-4xl: clamp(2.125rem, 1.55rem + 2.60vw, 3.5rem); --text-hero: clamp(2.375rem, 1.55rem + 3.40vw, 4.25rem); /* --- Ritmo ------------------------------------------------------------ */ --wrap: 74rem; --wrap-text: 42rem; --section-y: clamp(4.5rem, 3rem + 6vw, 9rem); --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); /* --- Forma. Pildora en TODO lo pulsable (instruccion del fundador) ----- */ --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; /* --- Elevacion. Reglas finas primero, sombra despues ------------------ */ --shadow-xs: 0 1px 2px rgba(9,23,49,.05); --shadow-sm: 0 2px 8px -3px rgba(9,23,49,.10), 0 0 0 1px var(--line); --shadow-md: 0 18px 40px -24px rgba(9,23,49,.35), 0 0 0 1px var(--line); --shadow-lg: 0 40px 80px -40px rgba(9,23,49,.45); --ease: cubic-bezier(.22,.61,.36,1); } /* ══════════════════════════════════════ 2. RESET Y ELEMENTOS ══ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Peso 700, no 800. A 800 la Inter engorda el asta y el titular se lee «ancho»; a 700 con Inter Tight queda la densidad de un SF Pro Display. */ h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; } h1 { font-size: var(--text-hero); line-height: 1.03; letter-spacing: -0.032em; } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; } p { margin: 0; text-wrap: pretty; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } img, svg { display: block; max-width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(30,136,255,.18); } /* ═══════════════════════════════════════════════════ 3. UTILIDADES ══ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--text{ max-width: var(--wrap-text); } .section { padding-block: var(--section-y); position: relative; } .section--soft { background: var(--paper-soft); } .flow > * + * { margin-top: 1rem; } .flow-lg > * + * { margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); } .center { text-align: center; } .muted { color: var(--text-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 200; background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius-pill); } .skip:focus { top: 1rem; } /* Entradilla de seccion: antetitulo + titular + (a veces) un parrafo guia. Sustituye a los `style=` sueltos: el estandar prohibe estilos en el HTML. */ .lede { max-width: 46ch; } .lede--wide { max-width: 54ch; } .lede h2 { margin-top: .75rem; } .lede > p:last-child { margin-top: 1.25rem; font-size: var(--text-lg); color: var(--text-muted); } .block { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); } .note--after { margin-top: 1.75rem; } .above { position: relative; z-index: 1; } /* Aparicion al entrar en pantalla. Parte VISIBLE: si no hay JS, se ve igual. */ .reveal { opacity: 1; } .js .reveal { opacity: 0; transform: translateY(14px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } /* ═════════════════════════════════════════════════ 4. COMPONENTES ══ */ /* --- El degradado de marca. Es EL elemento firma de esta version -------- */ .mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Nace y muere en blanco: el color emerge del papel, no se pega encima. */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 76%, transparent 99%); mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 76%, transparent 99%); } .mesh__b { position: absolute; border-radius: 50%; will-change: transform; } /* CAPA PINTADA. Es lo que hace que esto se lea como el degradado de la referencia y no como cinco manchas sueltas. La primera version ponia blobs separados sobre blanco, y entre ellos se veia el papel: el ojo lee «manchas», no «degradado». Aqui hay una capa continua —seis radiales que se solapan sobre una base lineal— de modo que NO queda ni un hueco de blanco dentro de la banda. El blanco vuelve solo por arriba y por abajo, y lo pone la mascara. Recorrido: menta -> aqua -> azul cielo -> azul -> azul rey. El mismo del anillo del icono oficial. */ .mesh__paint { position: absolute; inset: -12% -6%; background: radial-gradient(78% 105% at 8% 42%, rgba(119,226,196,.98), rgba(119,226,196,0) 64%), radial-gradient(70% 100% at 30% 82%, rgba(106,213,205,.92), rgba(106,213,205,0) 66%), radial-gradient(64% 92% at 46% 14%, rgba(160,232,225,.85), rgba(160,232,225,0) 68%), radial-gradient(76% 108% at 68% 52%, rgba( 66,135,242,.92), rgba( 66,135,242,0) 64%), radial-gradient(72% 104% at 92% 30%, rgba( 30,136,255,.95), rgba( 30,136,255,0) 64%), radial-gradient(58% 88% at 82% 92%, rgba( 27, 63,160,.70), rgba( 27, 63,160,0) 66%), linear-gradient(96deg, rgba(119,226,196,.55) 0%, rgba(106,213,205,.45) 26%, rgba( 66,135,242,.42) 58%, rgba( 30,136,255,.48) 80%, rgba( 27, 63,160,.38) 100%); animation: respira 30s var(--ease) infinite alternate; } /* Tres acentos que se mueven por encima de la capa pintada. Solo aportan vida: si se quitan, el degradado sigue completo. */ .mesh__b--1 { width: 58vw; height: 46vw; left: -6vw; top: 2%; background: radial-gradient(circle at 50% 50%, rgba(119,226,196,.75), rgba(119,226,196,0) 62%); animation: deriva-a 26s var(--ease) infinite alternate; } .mesh__b--2 { width: 54vw; height: 44vw; right:-4vw; top: -6%; background: radial-gradient(circle at 50% 50%, rgba( 30,136,255,.72), rgba( 30,136,255,0) 62%); animation: deriva-b 30s var(--ease) infinite alternate; } .mesh__b--3 { width: 48vw; height: 40vw; left: 28%; bottom:-12%; background: radial-gradient(circle at 50% 50%, rgba( 66,135,242,.60), rgba( 66,135,242,0) 64%); animation: deriva-c 34s var(--ease) infinite alternate; } /* Solo transform: cero recalculo de layout en un Android de gama media. */ @keyframes deriva-a { to { transform: translate3d(4%, -5%, 0) scale(1.08); } } @keyframes deriva-b { to { transform: translate3d(-5%, 4%, 0) scale(1.10); } } @keyframes deriva-c { to { transform: translate3d(3%, -6%, 0) scale(1.06); } } @keyframes respira { to { transform: scale(1.06) translate3d(-1.5%, 1%, 0); } } .mesh--flat { -webkit-mask-image: none; mask-image: none; } .mesh--soft { opacity: .5; } .section--mesh { overflow: hidden; } /* --- Antetitulo -------------------------------------------------------- Etiqueta en versalitas espaciadas: es la convencion de la categoria (Stripe, Wise, Revolut, las paginas de producto de Apple). Sustituye a la serif italica, que era decorativa y no de este sector. */ .eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); } /* --- Botones. TODOS en pildora, 999px, minimo 44px de alto ------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 46px; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px); } .btn svg { flex: none; transition: transform .18s var(--ease); } .btn:hover svg { transform: translateX(3px); } /* Azul noche, no azul rey. El azul rey saturado en un boton grande es lo que hace que una pagina financiera se lea como plantilla: lo usa todo el mundo. El azul noche deja el azul de marca para lo que SI es de marca —la tarjeta, el degradado, el logo— y el boton pesa por contraste, no por color. */ .btn--primary { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -14px rgba(9,23,49,.75); } .btn--primary:hover { background: var(--ink-2); box-shadow: 0 14px 28px -14px rgba(9,23,49,.85); } .btn--outline { background: rgba(255,255,255,.72); color: var(--text); border-color: var(--line-strong); backdrop-filter: blur(6px); } .btn--outline:hover { border-color: var(--ink); background: #fff; } @supports not (backdrop-filter: blur(6px)) { .btn--outline { background: #fff; } } .btn--ghost { background: transparent; color: var(--text); padding-inline: .5rem; } .btn--ghost:hover { color: var(--link); } .btn--invert { background: #fff; color: var(--ink); } .btn--invert:hover { background: #EEF3FA; } .btn--line-invert { background: transparent; color: #fff; border-color: var(--line-invert); } .btn--line-invert:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); } .btn--lg { min-height: 54px; padding: .875rem 1.875rem; font-size: var(--text-base); } .btn--block { display: flex; width: 100%; } /* --- Sello de estado --------------------------------------------------- */ .stamp { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .625rem; border-radius: var(--radius-pill); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); } .stamp--flag { background: var(--flag-soft); color: var(--flag); border-color: #E9CFC8; } .stamp--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* --- Tarjeta ----------------------------------------------------------- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); } .card--raised { box-shadow: var(--shadow-md); border-color: transparent; } /* --- Rejilla ----------------------------------------------------------- */ .grid { display: grid; gap: clamp(1.25rem, .9rem + 1.4vw, 2rem); } .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } } /* --- Nota legal. Aparece mucho: es un sector que lo exige --------------- */ .note { font-size: var(--text-xs); line-height: 1.6; color: var(--text-faint); max-width: 60ch; } /* ═════════════════════════════════════════════ 5. SECCIONES ══ */ /* ---------------------------------------------------------- CABECERA -- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.78); backdrop-filter: blur(14px) saturate(1.6); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), background-color .25s var(--ease); } .nav.is-stuck { border-bottom-color: var(--line); background: rgba(255,255,255,.92); } @supports not (backdrop-filter: blur(14px)) { .nav { background: #fff; } } @media (prefers-reduced-transparency: reduce) { .nav { background: #fff; backdrop-filter: none; } } .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; } /* LOGO, sin pildora. La pildora existia porque el archivo que habia era claro sobre transparente y sobre papel blanco desaparecia. Con la version en tinta oscura que entrego el fundador («Clean» en azul noche, «Date» en menta) el logo se sostiene solo, y la barra queda limpia. Se sirve a 2x (227x68) y se pinta a 32px de alto; con `width:auto` la proporcion la manda el archivo, no una cifra mia. */ .nav__brand { display: inline-flex; text-decoration: none; } .nav__logo { display: inline-flex; align-items: center; } .nav__logo img { width: auto; height: 32px; } @media (max-width: 420px) { .nav__logo img { height: 27px; } } .nav__links { display: flex; gap: .25rem; } .nav__links a { display: inline-block; padding: .5rem .875rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: var(--radius-pill); transition: color .18s var(--ease), background-color .18s var(--ease); } .nav__links a:hover { color: var(--text); background: var(--paper-soft); } .nav__end { display: flex; align-items: center; gap: .5rem; } .nav__toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); cursor: pointer; } /* El menu movil se abre con una CLASE, no con el atributo `hidden`: `hidden` saca el elemento del arbol de accesibilidad tambien en escritorio, donde el menu si debe existir para un lector de pantalla. */ .nav__links .btn { display: none; } @media (max-width: 980px) { .nav__links { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .5rem); flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .5rem; box-shadow: var(--shadow-md); } .nav__links.is-open { display: flex; } .nav__links a { padding: .875rem 1rem; font-size: var(--text-base); } .nav__toggle { display: inline-flex; } .nav__end .btn { display: none; } .nav__links .btn { display: flex; margin-top: .25rem; } } /* -------------------------------------------------------------- HERO -- */ .hero { position: relative; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); padding-bottom: 0; overflow: hidden; } .hero__lower { position: relative; } .hero__lower .mesh { top: -14%; bottom: 0; } .hero__in { position: relative; z-index: 1; text-align: center; } .hero__eyebrow { margin-bottom: 1.25rem; } .hero__title { max-width: 15ch; margin-inline: auto; } .hero__lead { max-width: 46ch; margin: 1.5rem auto 0; font-size: var(--text-lg); color: var(--text-muted); } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.25rem; } .hero__legal { margin-top: 1rem; font-size: var(--text-xs); color: var(--text-faint); } .hero__stage { position: relative; z-index: 1; margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem); display: flex; align-items: flex-end; justify-content: center; } /* Fila de prueba, sobre el degradado */ .hero__proof { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem); padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4rem) var(--section-y); } .proof__item { text-align: center; min-width: 0; } .proof__n { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.04em; line-height: 1; } .proof__l { display: block; margin-top: .5rem; font-size: var(--text-sm); color: var(--text-muted); } /* --- El objeto del hero: telefono + tarjeta First ----------------------- Las tres piezas se miden en PORCENTAJE del escenario, no en pixeles. Con pixeles fijos, al estrecharse la pantalla el escenario encoge pero el telefono no, y la ficha acababa tapando el marcador de score — que es justo lo que hay que ver. */ .stage { position: relative; width: min(100%, 820px); /* Eje del giro. 1 = el telefono esta de canto y no se ve nada de la pantalla; 0 = de frente, la composicion aprobada tal cual. Lo mueve el scroll desde app.js. Sin JS se queda en 0 y no se pierde nada. */ --gira: 0; perspective: 1100px; perspective-origin: 50% 42%; } .js .stage { --gira: 1; } /* TODO el interior del telefono se mide en `em` y cuelga de este font-size. Con `rem` los textos no encogian con el aparato y en un movil de 375 px se partian en tres lineas: «SCORE / CREDITICIO», «De 318 a / 745»… */ .phone { position: relative; z-index: 2; /* Grosor del aparato. Un telefono real mide unos 7,8 mm de canto sobre 71,5 mm de ancho: casi un 11 %. Aqui va en `em` para que el canto crezca y encoja junto con todo lo demas. */ --grosor: 1.75em; transform-style: preserve-3d; /* El orden importa: primero gira sobre su propio eje vertical y despues se inclina. Al reves el eje del giro seria el de la pantalla, no el del aparato, y el movimiento se lee como un tumbo. */ transform: rotateZ(calc(var(--gira, 0) * -16deg)) rotateY(calc(var(--gira, 0) * 86deg)) translateY(calc(var(--gira, 0) * 16px)) scale(calc(1 - var(--gira, 0) * .06)); will-change: transform; width: clamp(214px, 38%, 300px); font-size: clamp(11.5px, .9vw + 6px, 16px); margin-inline: auto; aspect-ratio: 272 / 552; background: linear-gradient(160deg, #1B2C46, #060E1B); border-radius: 2.5em; padding: .5625em; /* La sombra NO se mueve con el giro. Se probo apagarla —de canto un aparato no proyecta la misma mancha— pero cambiar `box-shadow` en cada fotograma obliga a repintar la capa entera del telefono en cada scroll. El giro y el brillo se componen en la GPU; la sombra no. No compensa. */ box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.16) inset; } /* --- El aparato es una CAJA, no una lamina ----------------------------- De frente da igual, pero de canto se notaba: giraba una hoja de papel. La cara delantera es el propio `.phone`, en z = 0. Detras, a un grosor, va la espalda; y los dos cantos cierran el hueco entre ambas. */ .phone::after { /* espalda */ content: ''; position: absolute; inset: 0; /* Ver el comentario de `.phone__side`: el cuerpo solo existe mientras gira. */ opacity: calc(var(--gira, 0) * 6); border-radius: inherit; background: linear-gradient(200deg, #1A2941, #04090F); transform: translateZ(calc(var(--grosor) * -1)); } /* Cada canto es una lamina del grosor del aparato, puesta DE PIE en el borde: se gira 90 grados —con lo que su ancho pasa a medir en z— y se recoloca para que vaya de la cara de delante a la de detras. Van los CUATRO. Con solo los dos laterales la caja quedaba abierta por arriba y por abajo, y justo ahi se veia el hueco entre la cara y la espalda: parecian dos laminas sueltas, no un aparato. Las puntas son redondas y llegan hasta el extremo. Recortarlos por arriba dejaba el hueco; dejarlos rectos sacaba una esquina cuadrada por fuera de la esquina redondeada del cuerpo. La punta redonda sigue la curva y cierra. */ .phone__side { position: absolute; /* EL CUERPO SOLO SE PINTA MIENTRAS GIRA. De frente, los cantos y la espalda asoman un filo oscuro por fuera de la silueta —la perspectiva los proyecta un poco hacia fuera— y el aparato queda con un reborde sucio que no estaba en el diseno aprobado. Multiplicando por 6, a los 14 grados de giro ya estan opacos del todo, y a 0 no queda ni rastro. */ opacity: calc(var(--gira, 0) * 6); /* Sin redondear las puntas. Con radio, donde se junta una pieza con la siguiente las dos curvas abrian una muesca en V — se veia al ampliar la esquina. Las puntas van rectas y las piezas se solapan un pelo. */ border-radius: 0; /* El filo del frente es lo que brilla en un telefono real: el degradado va de claro en la cara de delante a oscuro en la de detras, no un bandazo claro por el medio. */ background: linear-gradient(90deg, #5A6A90, #1B2740 38%, #070D18); } /* --- Hasta donde llega cada canto ------------------------------------- El cuerpo tiene las esquinas redondeadas con un radio de 2,5em. Si un canto llega al extremo, su esquina —que es recta— se sale por fuera de esa curva; y donde se cruzan el canto lateral y la tapa de arriba, las dos esquinas juntas sacan una PUNTA. Eran los cachitos. Por eso los cuatro se paran a 1,6em de cada extremo: el tramo recto del borde. Lo que queda sin tapar es el arco de la esquina, donde la cara y la espalda ya se estan juntando y no se nota. */ .phone__side--l, .phone__side--r { top: 2.35em; height: calc(100% - 4.7em); width: var(--grosor); } .phone__side--l { left: 0; transform: translate3d(calc(var(--grosor) * -.5), 0, calc(var(--grosor) * -.5)) rotateY(90deg); } .phone__side--r { right: 0; transform: translate3d(calc(var(--grosor) * .5), 0, calc(var(--grosor) * -.5)) rotateY(90deg); } .phone__side--t, .phone__side--b { left: 2.35em; width: calc(100% - 4.7em); height: var(--grosor); /* Mismo sentido de giro en los cuatro (`90deg` en Y, `-90deg` en X): asi el 0 % del degradado —el filo claro— cae siempre en la cara de delante. */ background: linear-gradient(180deg, #5A6A90, #1B2740 38%, #070D18); } .phone__side--t { top: 0; transform: translate3d(0, calc(var(--grosor) * -.5), calc(var(--grosor) * -.5)) rotateX(-90deg); } .phone__side--b { bottom: 0; transform: translate3d(0, calc(var(--grosor) * .5), calc(var(--grosor) * -.5)) rotateX(-90deg); } /* --- Las esquinas ------------------------------------------------------ Los cantos son rectos y el borde del cuerpo es curvo: en cada esquina quedaba un hueco por donde se veia el fondo entre la cara y la espalda. Se tapa con las CUERDAS del arco. El cuerpo deja de ser una caja de cuatro caras y pasa a ser un prisma de doce: cuatro cantos rectos y ocho cuerdas. Dos por esquina, no una. Con una sola, la cuerda de 90 grados se hunde 0,29 × radio por dentro del arco —seguia habiendo hueco en el centro—, y agrandarla para tapar el centro la sacaba por fuera de la silueta: cuando el aparato estaba casi plano, asomaban cuatro tacos oscuros por las esquinas. Partiendo el arco en dos tramos de 45 grados, la cuerda se hunde 0,076 × radio: dos pixeles. No hay hueco y no sobra nada. Los numeros salen del radio de la esquina (2,5em): largo de cada cuerda 2 × 2,5 × sen 22,5° = 1,92em centro del tramo corto 0,1464 × 2,5 = 0,366em desde el borde centro del tramo largo 0,6464 × 2,5 = 1,616em desde el borde `rotateX(-90deg)` las tumba —su alto pasa a medir en z, como las tapas— y `rotateZ(±22,5 / ±67,5deg)` las orienta a lo largo de su cuerda. */ .phone__side--tl1, .phone__side--tl2, .phone__side--tr1, .phone__side--tr2, .phone__side--bl1, .phone__side--bl2, .phone__side--br1, .phone__side--br2 { /* 1,92em es la cuerda exacta; van a 2,05em para que monten sobre la pieza de al lado. Alargar la cuerda saca la punta 0,038 × lo que se alarga: con 0,065em por lado, medio pixel. Es el precio de que no quede ni una junta abierta, y no se ve. */ width: 2.05em; height: var(--grosor); background: linear-gradient(180deg, #5A6A90, #1B2740 38%, #070D18); } .phone__side--tl1, .phone__side--tl2 { left: 0; top: 0; } .phone__side--tr1, .phone__side--tr2 { right: 0; top: 0; } .phone__side--bl1, .phone__side--bl2 { left: 0; bottom: 0; } .phone__side--br1, .phone__side--br2 { right: 0; bottom: 0; } .phone__side--tl1 { transform: translate3d(-.594em, calc(1.616em - var(--grosor) * .5), calc(var(--grosor) * -.5)) rotateZ(-67.5deg) rotateX(-90deg); } .phone__side--tl2 { transform: translate3d(.656em, calc(.366em - var(--grosor) * .5), calc(var(--grosor) * -.5)) rotateZ(-22.5deg) rotateX(-90deg); } .phone__side--tr1 { transform: translate3d(.594em, calc(1.616em - var(--grosor) * .5), calc(var(--grosor) * -.5)) rotateZ(67.5deg) rotateX(-90deg); } .phone__side--tr2 { transform: translate3d(-.656em, calc(.366em - var(--grosor) * .5), calc(var(--grosor) * -.5)) rotateZ(22.5deg) rotateX(-90deg); } .phone__side--bl1 { transform: translate3d(-.594em, calc(var(--grosor) * .5 - 1.616em), calc(var(--grosor) * -.5)) rotateZ(67.5deg) rotateX(-90deg); } .phone__side--bl2 { transform: translate3d(.656em, calc(var(--grosor) * .5 - .366em), calc(var(--grosor) * -.5)) rotateZ(22.5deg) rotateX(-90deg); } .phone__side--br1 { transform: translate3d(.594em, calc(var(--grosor) * .5 - 1.616em), calc(var(--grosor) * -.5)) rotateZ(-67.5deg) rotateX(-90deg); } .phone__side--br2 { transform: translate3d(-.656em, calc(var(--grosor) * .5 - .366em), calc(var(--grosor) * -.5)) rotateZ(-22.5deg) rotateX(-90deg); } /* Reflejo que cruza la pantalla mientras esta girada y se apaga al quedar plana. Es lo que hace que el giro se lea como vidrio y no como cartulina. */ .phone__glare { position: absolute; inset: .5625em; border-radius: 2em; background: linear-gradient(102deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 68%); transform: translateZ(.1875em); opacity: var(--gira, 0); pointer-events: none; } .phone::before { /* isla superior */ content: ''; position: absolute; top: 1.25em; left: 50%; /* Con `preserve-3d` el orden lo manda la posicion en z, no `z-index`. */ transform: translateX(-50%) translateZ(.25em); width: 4.75em; height: 1.25em; border-radius: 999px; background: #060E1B; } .phone__screen { transform: translateZ(.0625em); /* delante del cuerpo, detras de la isla */ height: 100%; border-radius: 2em; overflow: hidden; background: #fff; display: flex; flex-direction: column; padding: 2.125em .875em .875em; gap: .625em; } .phone__top { display: flex; align-items: center; justify-content: space-between; gap: .375em; } .phone__app { font-size: .6875em; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; } .phone__app span { display: block; font-size: .8181em; font-weight: 500; color: var(--text-faint); letter-spacing: 0; } .phone__badge { flex: none; font-size: .5em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); padding: .375em .75em; border-radius: 999px; } .dial { display: flex; align-items: center; gap: .625em; padding: .375em 0; } .dial svg { flex: none; width: 5.375em; height: 5.375em; } .dial__txt { min-width: 0; } .dial__k { font-size: .5em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); line-height: 1.3; } .dial__v { font-size: .8125em; font-weight: 700; letter-spacing: -.02em; margin-top: .1em; line-height: 1.2; } .dial__d { font-size: .5625em; font-weight: 600; color: var(--ok); margin-top: .2em; line-height: 1.2; } .phone__rows { display: grid; gap: .3125em; } .phone__row { display: flex; align-items: center; gap: .4375em; font-size: .5625em; font-weight: 500; color: var(--text-2); line-height: 1.3; background: var(--paper-soft); border-radius: .875em; padding: .777em .888em; } .phone__row i { flex: none; width: 1.333em; height: 1.333em; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .888em; font-weight: 700; } .phone__row--wait i { background: var(--line-strong); color: var(--text-muted); } /* Evolucion del score. Ademas de contar la historia, llena el hueco que dejaba `margin-top:auto` del pie en pantallas altas. */ .spark { display: grid; gap: .35em; padding-top: .25em; } .spark__k { font-size: .5em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .spark svg { width: 100%; height: auto; } .phone__foot { margin-top: auto; border-radius: .75em; padding: .5em .625em; background: linear-gradient(115deg, var(--royal), var(--azure) 70%, var(--aqua)); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: .375em; } .phone__foot b { font-size: .5625em; letter-spacing: -.01em; line-height: 1.25; } .phone__foot span { font-size: .833em; opacity: .78; display: block; font-weight: 500; } .phone__foot em { flex: none; font-style: normal; font-size: .6875em; font-weight: 800; letter-spacing: .02em; } /* Tarjeta First, flotando a la derecha del telefono */ /* --- TARJETA FIRST ------------------------------------------------------ Reproduce `campanas/first-reinsercion/tarjeta-first.png`, no una idea de como podria ser. Lo que cambio respecto de mi primera version, y por que: antes la tarjeta real ---------------------------- --------------------------------------- degradado navy -> verde AZUL REY PLANO #1B3FA0, sin degradado chip dorado no hay chip «First / by CleanDate» el logo CleanDate: marca + «Clean» blanco y «Date» en aqua #87D4CC «TITULAR / CLIENTE CLEANDATE» no existe esa linea «•••• •••• •••• 3365» «•••• 3365» VISA a secas VISA + «Business» debajo El interior va en `em` colgando de este font-size, para que todo escale junto cuando la tarjeta encoge. */ .fcard { position: absolute; z-index: 3; right: 0; bottom: 16%; width: clamp(172px, 34%, 286px); font-size: clamp(7.5px, .48vw + 5.6px, 12px); aspect-ratio: 1.552; /* 700 / 451, la proporcion del arte */ border-radius: 8%/12.4%; /* 28px sobre 700 de ancho */ padding: 1.55em 1.6em; color: #fff; background: var(--royal); /* #1B3FA0 — plano, como el original */ box-shadow: var(--shadow-lg); /* Acompana al giro: mientras el telefono esta de canto la tarjeta todavia no ha llegado, y se coloca en su sitio cuando el aparato queda plano. `--gira` solo existe dentro de `.stage`. La otra tarjeta de la pagina, la de la seccion First, cae fuera: de ahi el valor de reserva del `var()`. Sin el, `transform` entero seria invalido ahi y esa tarjeta perderia su inclinacion. */ transform: translate(calc(var(--gira, 0) * 30px), calc(var(--gira, 0) * 12px)) rotate(calc(-8deg + var(--gira, 0) * 10deg)); opacity: calc(1 - var(--gira, 0) * 1.6); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } /* Los trazos finos de la mitad derecha. En el arte original son curvas claras sobre el azul; aqui van en SVG para que escalen sin peso. */ .fcard__arcs { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.13); stroke-width: 2.5; } .fcard > *:not(.fcard__arcs) { position: relative; z-index: 1; } /* El logo de la tarjeta es el ARCHIVO OFICIAL, version clara: la tarjeta va en azul rey y ahi «Clean» tiene que ir en blanco. Antes iba una marca dibujada por mi con SVG, que no era la de la marca. En `em` como el resto del interior, para que escale con la tarjeta. */ .fcard__brand { display: flex; align-items: center; } /* En PORCENTAJE del ancho de la tarjeta, no en `em`. Las dos tarjetas de la pagina tienen anchos distintos pero comparten font-size, asi que en `em` el logo salia igual de grande en las dos: enorme en la del hero y pequeno en la de la seccion First. En el arte original ocupa ~44% del ancho. */ .fcard__logo { width: 50%; height: auto; } .fcard__bot { display: flex; align-items: flex-end; justify-content: space-between; gap: .75em; } .fcard__num { font-size: 1.15em; font-weight: 600; letter-spacing: .06em; white-space: nowrap; } .fcard__num b { font-weight: 700; letter-spacing: .02em; } .fcard__visa { flex: none; text-align: right; line-height: 1; } .fcard__visa b { display: block; font-size: 1.35em; font-weight: 800; font-style: italic; letter-spacing: -.01em; } .fcard__visa span { display: block; font-size: .62em; font-weight: 500; letter-spacing: .02em; margin-top: .35em; } /* Ficha de expediente flotante, a la izquierda */ .chip-record { position: absolute; z-index: 3; left: 0; top: 15%; transform: translate(calc(var(--gira, 0) * -30px), calc(var(--gira, 0) * 12px)); opacity: calc(1 - var(--gira, 0) * 1.6); width: clamp(150px, 30%, 240px); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius); padding: .875rem; box-shadow: var(--shadow-md); } @supports not (backdrop-filter: blur(10px)) { .chip-record { background: #fff; } } .chip-record__ref { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding-bottom: .5rem; border-bottom: 1px solid var(--line); display: block; } .chip-record__e { margin-top: .625rem; font-size: .875rem; font-weight: 700; letter-spacing: -.02em; } .chip-record__m { font-size: .6875rem; color: var(--text-muted); margin-top: .125rem; } .chip-record__f { margin-top: .75rem; } /* Por debajo de ~560 px ya no cabe la ficha sin tapar el marcador de score. Se retira: el mismo dato vive completo en la seccion «Casos». */ @media (max-width: 560px) { .chip-record { display: none; } .fcard { right: -4%; bottom: 5%; width: clamp(150px, 44%, 200px); } } /* ------------------------------------------------------- DECLARACION -- */ .statement { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: start; } .statement__title { font-size: var(--text-4xl); } /* Segunda voz del titular por PESO y color, no por cursiva. */ .statement__title em { font-style: normal; font-weight: 500; color: var(--text-muted); } .statement__body { font-size: var(--text-lg); color: var(--text-muted); } .statement__body + .statement__body { margin-top: 1rem; } @media (max-width: 900px) { .statement { grid-template-columns: 1fr; } } .features { margin-top: clamp(3rem,2rem + 3vw,5rem); } .feature__t { font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em; } .feature__t::before { content: ''; display: block; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mint), var(--azure)); margin-bottom: .875rem; } .feature__d { margin-top: .5rem; font-size: var(--text-sm); color: var(--text-muted); } /* ----------------------------------------------------------- LIMITES -- */ .limits { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,.7rem + 1.2vw,1.5rem); } @media (max-width: 820px) { .limits { grid-template-columns: 1fr; } } .limit { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; background: #fff; } .limit--no { background: var(--paper-soft); } .limit__h { display: flex; align-items: center; gap: .625rem; } .limit__b { margin-top: 1rem; display: grid; gap: .875rem; } .limit__b li { display: grid; grid-template-columns: 20px 1fr; gap: .625rem; font-size: var(--text-sm); } .limit__b b { display: block; color: var(--text); } .limit__b span { color: var(--text-muted); } .limit__ico { margin-top: .25rem; } /* ----------------------------------------------------------- PROCESO -- */ .steps { counter-reset: paso; display: grid; gap: 0; margin-top: clamp(2rem,1.4rem + 2vw,3rem); } .step { counter-increment: paso; display: grid; grid-template-columns: 3.25rem minmax(0,1fr) minmax(0,1.05fr); gap: clamp(1rem,.6rem + 2vw,3rem); padding-block: clamp(1.75rem,1.2rem + 1.6vw,2.75rem); border-top: 1px solid var(--line); align-items: start; } .step:last-child { border-bottom: 1px solid var(--line); } /* El numero se alinea con la PRIMERA LINEA del titular, no con la caja: por eso lleva el mismo line-height que el h3 y no un padding a ojo. */ .step::before { content: '0' counter(paso); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.3; color: var(--line-strong); } .step h3 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.028em; } /* En BLOQUE y con margen propio. Antes vivia dentro del

, que es contexto en linea: se pegaba al titular sin separacion posible. */ .step__price { display: inline-flex; align-items: center; margin-top: .75rem; padding: .3125rem .75rem; border-radius: var(--radius-pill); background: var(--ok-soft); border: 1px solid var(--ok-line); font-size: var(--text-xs); font-weight: 600; color: var(--ok); white-space: nowrap; } .step__d { color: var(--text-muted); font-size: var(--text-sm); } @media (max-width: 820px) { .step { grid-template-columns: 2.5rem minmax(0,1fr); gap: 1rem 1.25rem; } .step__d { grid-column: 2; margin-top: .875rem; } } /* ------------------------------------------------------------- CASOS -- */ .case { position: relative; overflow: hidden; } /* El margen superior se fue con la linea de expediente: ahora los marcadores son el primer elemento de la tarjeta y el aire lo pone el padding. */ .case__scores { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; } .case__n { line-height: 1; } .case__n b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.045em; } .case__n span { display: block; margin-top: .375rem; font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; } .case__n--before b { color: var(--flag); } .case__n--after b { background: linear-gradient(100deg, var(--royal), var(--azure)); -webkit-background-clip: text; background-clip: text; color: transparent; } .case__arrow { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--flag-soft), var(--mint)); } .case p { font-size: var(--text-sm); color: var(--text-muted); } /* -------------------------------------------------------- TARJETA (oscuro) */ /* Azul rey oscurecido, no negro azulado: asi el bloque es de la misma familia que la tarjeta, y la tarjeta —que va en #1B3FA0— se despega encima. */ .dark { position: relative; overflow: hidden; background: var(--royal-deep); color: var(--text-invert); border-radius: clamp(24px, 1rem + 2vw, 40px); } .dark .mesh { opacity: .85; } .dark__in { position: relative; z-index: 1; padding: clamp(2.5rem,1.6rem + 4vw,5.5rem) clamp(1.5rem,1rem + 3vw,4.5rem); } .dark h2 { color: #fff; } .dark p { color: rgba(244,247,251,.76); } .dark .eyebrow { color: rgba(244,247,251,.72); } /* Gana a `.lede > p:last-child`, que si no pintaria gris oscuro sobre navy. */ .dark .lede > p:last-child { color: rgba(244,247,251,.76); } .first { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,1rem + 4vw,4.5rem); align-items: center; } @media (max-width: 900px) { .first { grid-template-columns: 1fr; } } .first__list { margin-top: 1.75rem; display: grid; gap: .875rem; } .first__list li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--text-sm); color: rgba(244,247,251,.86); } .first__list i { flex: none; margin-top: .1875rem; width: 18px; height: 18px; border-radius: 50%; background: rgba(119,226,196,.16); border: 1px solid rgba(119,226,196,.55); color: var(--mint); display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; } .first__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .first__art { display: grid; place-items: center; } /* Sobre el bloque azul oscuro, un filo claro separa la tarjeta del fondo: ambos son azul de marca y sin el se confundirian. */ .first__art .fcard { position: relative; right: auto; bottom: auto; width: min(340px, 82%); transform: rotate(-7deg); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.12); } /* ----------------------------------------------------------- PRECIOS -- */ .plan { display: flex; flex-direction: column; } .plan--feat { box-shadow: var(--shadow-md); border-color: transparent; position: relative; } .plan--feat::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--mint), var(--azure), var(--royal)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .plan__n { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); } .plan__p { margin-top: .625rem; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.04em; line-height: 1; } .plan__u { margin-top: .375rem; font-size: var(--text-xs); color: var(--text-faint); } .plan__l { margin: 1.5rem 0; display: grid; gap: .75rem; } .plan__l li { display: grid; grid-template-columns: 16px 1fr; gap: .625rem; font-size: var(--text-sm); color: var(--text-2); } .plan__l i { margin-top: .3125rem; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } .plan .btn { margin-top: auto; } /* ------------------------------------------------------- TESTIMONIOS -- */ .quote { display: flex; flex-direction: column; } .quote__stars { color: #E8A62B; letter-spacing: .1em; font-size: var(--text-sm); } .quote blockquote { margin: 1rem 0 1.5rem; font-size: var(--text-base); color: var(--text-2); } .quote figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; } .quote__av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm); color: #fff; background: linear-gradient(140deg, var(--royal), var(--azure)); } .quote__who b { display: block; font-size: var(--text-sm); font-weight: 600; } .quote__who span { display: block; font-size: var(--text-xs); color: var(--text-muted); } /* --------------------------------------------------------- IDENTIDAD -- */ .identity { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); } @media (max-width: 820px) { .identity { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .identity { grid-template-columns: 1fr; } } .identity > div { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--line); } .identity dt { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; } .identity dd { margin: .375rem 0 0; font-size: var(--text-sm); font-weight: 600; } /* --------------------------------------------------------------- FAQ -- */ .faq { border-top: 1px solid var(--line); } .faq__i { border-bottom: 1px solid var(--line); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; min-height: 44px; cursor: pointer; font-size: var(--text-base); font-weight: 600; letter-spacing: -.015em; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ''; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform .22s var(--ease); } .faq__i[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); } .faq__a { padding-bottom: 1.5rem; color: var(--text-muted); font-size: var(--text-sm); max-width: 68ch; } .faq__a > * + * { margin-top: .75rem; } /* --------------------------------------------------------------- GUÍAS */ .guias { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, .8rem + 1vw, 1.5rem); } @media (max-width: 900px) { .guias { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .guias { grid-template-columns: 1fr; } } .guia { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + .8vw, 1.5rem); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .guia:hover { border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-md); } .guia__t { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; letter-spacing: -.022em; color: var(--text); text-decoration: none; } .guia__t::after { content: '→'; color: var(--link); transition: transform .18s var(--ease); } .guia:hover .guia__t::after { transform: translateX(3px); } .guia__t:hover { color: var(--link); } .guia__d { margin-top: .5rem; font-size: var(--text-sm); color: var(--text-muted); } /* ----------------------------------------------------------- CTA FINAL */ /* Sobre el degradado el gris de cuerpo pierde contraste: aqui se sube un escalon. Es el unico sitio donde hay texto largo encima del color. */ .section--mesh .final p, .section--mesh .final .eyebrow { color: var(--text-2); } .final { text-align: center; } .final h2 { max-width: 16ch; margin: 1rem auto 0; } .final p { max-width: 44ch; margin: 1.25rem auto 0; font-size: var(--text-lg); } .final__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.25rem; } /* ----------------------------------------------------------------- PIE */ .foot { border-top: 1px solid var(--line); padding-block: clamp(3rem,2rem + 2.4vw,4.5rem) 2rem; } .foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.5rem,1rem + 2vw,3rem); } @media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } } .foot__pitch { margin-top: 1rem; font-size: var(--text-sm); color: var(--text-muted); max-width: 32ch; } .foot__t { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); } .foot__l { margin-top: 1rem; display: grid; gap: .625rem; } .foot__l a { font-size: var(--text-sm); color: var(--text-2); text-decoration: none; } .foot__l a:hover { color: var(--link); text-decoration: underline; } .foot__legal { margin-top: clamp(2.5rem,2rem + 1.6vw,3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); } .foot__copy { margin-top: 1rem; font-size: var(--text-xs); color: var(--text-faint); } /* -------------------------------------------------- CTA INTERCALADO -- Bandas de conversion entre secciones. Van DESPUES del argumento que las justifica, no antes: se pide el paso cuando la persona ya tiene el motivo. Cero urgencia falsa, cero contadores — el sector ya esta lleno de eso y es justo el vocabulario del que hay que separarse. */ .cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 1rem + 1.4vw, 2.5rem); margin-top: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) clamp(1.5rem, 1.1rem + 2vw, 2.75rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); } .section--soft .cta-inline { background: #fff; } .cta-inline__t { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -.028em; line-height: 1.2; } .cta-inline__d { margin-top: .5rem; font-size: var(--text-sm); color: var(--text-muted); max-width: 46ch; } .cta-inline .btn { flex: none; } @media (max-width: 620px) { .cta-inline .btn { display: flex; width: 100%; } } /* ------------------------------------------------------ FLOTANTES ---- Los dos botones son EL MISMO objeto con distinto color: mismo diametro, mismo radio, misma sombra. Antes uno media 56 y el otro 48, con sombras distintas, y se leian como piezas de dos sitios diferentes. */ .fabs { position: fixed; z-index: 90; right: clamp(1rem,.6rem + 1.4vw,1.75rem); bottom: calc(clamp(1rem,.6rem + 1.4vw,1.75rem) + env(safe-area-inset-bottom)); display: grid; gap: .75rem; justify-items: end; transition: transform .45s var(--ease); } .fab { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; transition: transform .18s var(--ease), opacity .25s var(--ease), background-color .18s var(--ease); } .fab--wa { background: #1FAF54; color: #fff; box-shadow: 0 10px 24px -10px rgba(31,175,84,.8), 0 0 0 1px rgba(31,175,84,.25); } .fab--wa:hover { background: #1C9E4C; transform: translateY(-2px); } .fab--top { background: #fff; color: var(--text); box-shadow: 0 10px 24px -12px rgba(9,23,49,.5), 0 0 0 1px var(--line); opacity: 0; transform: translateY(8px); pointer-events: none; } .fab--top.is-on { opacity: 1; transform: none; pointer-events: auto; } .fab--top.is-on:hover { transform: translateY(-2px); } /* El globo va AL LADO del boton, no encima: en pildora de una linea ocupa una franja y no un bloque, que era lo que tapaba media pantalla. */ .fab-row { display: flex; align-items: center; gap: .625rem; } .wa-tip { display: flex; align-items: center; gap: .125rem; padding: .5rem .375rem .5rem 1rem; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(9,23,49,.5); opacity: 0; transform: translateX(10px) scale(.96); pointer-events: none; transform-origin: right center; transition: opacity .3s var(--ease), transform .3s var(--ease); } .wa-tip.is-on { opacity: 1; transform: none; pointer-events: auto; } .wa-tip__link { font-family: var(--font-display); font-size: .875rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); text-decoration: none; white-space: nowrap; } .wa-tip__link:hover { color: var(--link); } .wa-tip__x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text-faint); font-size: 1.0625rem; line-height: 1; } .wa-tip__x:hover { color: var(--text); background: var(--paper-soft); } /* --- Barra de consentimiento ------------------------------------------- Se queda OSCURA aunque la pagina sea clara: es la misma barra que ve la persona en /documentos y en el resto del dominio, y una decision legal no es sitio para que cada pagina invente su propio aspecto. Empieza oculta de verdad (`display: none`) y no solo transparente: si el JS no llega a correr, no hay una barra invisible tapando el pie. */ .cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: none; justify-content: center; padding: 1rem clamp(1.125rem, .8rem + 1.2vw, 1.75rem) calc(1rem + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(9,23,49,.98), rgba(9,23,49,.94)); backdrop-filter: blur(14px); border-top: 1px solid rgba(148,175,214,.16); transform: translateY(100%); transition: transform .45s var(--ease); } .cc.is-on { transform: none; } @supports not (backdrop-filter: blur(14px)) { .cc { background: #091731; } } .cc__in { max-width: 62rem; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 1.375rem; } .cc__txt { flex: 1; min-width: 15rem; font-size: var(--text-xs); line-height: 1.55; color: #9DB1C9; } .cc__txt strong { display: block; margin-bottom: .1875rem; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: -.01em; color: #fff; } .cc__txt a { color: var(--aqua); text-underline-offset: .2em; } .cc__txt a:hover { color: #fff; } .cc__btns { display: flex; gap: .625rem; flex-shrink: 0; } .cc__btn { font: inherit; font-size: var(--text-sm); font-weight: 600; padding: .6875rem 1.5rem; border: 0; border-radius: var(--radius-pill); cursor: pointer; transition: transform .18s var(--ease), filter .18s var(--ease), background .18s var(--ease); } .cc__btn:active { transform: scale(.96); } .cc__btn--si { color: #fff; background: linear-gradient(100deg, var(--royal), var(--azure) 70%, var(--aqua)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(30,136,255,.28); } .cc__btn--si:hover { filter: brightness(1.07); } .cc__btn--no { color: #C7D4E6; background: rgba(148,175,214,.08); box-shadow: inset 0 0 0 1px rgba(148,175,214,.16); } .cc__btn--no:hover { background: rgba(148,175,214,.14); } @media (max-width: 560px) { .cc__btns { width: 100%; } .cc__btn { flex: 1; } } /* Mientras la barra esta puesta, los botones flotantes suben: si no, el de WhatsApp queda encima del boton de Aceptar. */ .cc-visible .fabs { transform: translateY(-6.5rem); } @media (max-width: 560px) { .cc-visible .fabs { transform: translateY(-10.5rem); } } /* ═══════════════════════════════════════ 6. MOVIMIENTO REDUCIDO ══ */ /* ══════════════════════════════════════════════ DOCUMENTO LEGAL ══ Estilos de `terminos.html`. Viven aqui, en la hoja compartida, y no en un