/* ============================================================ Clean — landing (cleanapp.com.ar) Esta hoja reemplaza el bundle de 2 MB que servía la landing antes. Aquel archivo traía React 18 UMD + un runtime que hacía document.documentElement.replaceWith(): el no existía hasta que corría JS, así que los crawlers veían una página vacía. Acá el HTML es real y el CSS es el que manda; landing.js solo agrega animaciones sobre contenido que ya está pintado. ============================================================ */ /* ── Fuentes ──────────────────────────────────────────────── Geist y Geist Mono son variables: un único woff2 cubre 300–600. Solo se sirve el subset latin (U+0000–00FF) porque ya cubre á é í ó ú ñ ¿ ¡; latin-ext, cirílico y vietnamita eran 60 KB que nunca se usaban en una landing en español. */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('geist-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; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('geist-mono-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; } /* ── Tokens ─────────────────────────────────────────────── */ :root { --ink: #191615; --ink-70: #3d3936; --muted: #6b6764; --muted-2: #8a8582; --muted-3: #96918d; --muted-4: #c9c5c2; --orange: #ee6820; --orange-dark: #c4530f; --orange-soft: #fceee5; --orange-softer: #fbe3d3; --cream: #fdf1e9; --blue: #4285f4; --blue-soft: #e8f0fe; --green: #34a853; --surface: #f7f7f8; --surface-2: #f4f3f2; --surface-3: #fbfafa; --line: #f1efed; --line-2: #eae7e4; --line-3: #e4e1de; --line-4: #efedeb; --ease: cubic-bezier(0.22, 1, 0.36, 1); --nav-h: 60px; } /* ── Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* El crema del arranque del hero, y no blanco. Instalada en la pantalla de inicio, iOS pinta la franja del reloj con el fondo del DOCUMENTO, no con el de la sección que se ve arriba de todo. Con el body en blanco quedaba una banda blanca contra el crema del hero y se veía un corte justo debajo del notch. El resto de la página lo tapa igual, así que esto solo se ve en esa franja. */ background: var(--cream); color: var(--ink); font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; /* Ojo: NO poner `overflow-x: hidden` acá. Por spec, si un eje deja de ser `visible` el otro pasa a `auto`, el body se vuelve contenedor de scroll y el navegador deja de resolver los saltos a `#anclas` (los links de la nav dejan de funcionar). El desborde horizontal de las manchas decorativas ya lo recorta `.shell` con `overflow-x: clip`, que recorta sin scrollear. */ } a { color: var(--ink); text-decoration: none; } img { max-width: 100%; } h1, h2, h3 { font-weight: 500; margin: 0; } p { margin: 0; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } .mono { font-family: 'Geist Mono', ui-monospace, monospace; } .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; } /* Ancla visible por debajo de la navbar fija */ [id] { scroll-margin-top: 100px; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } .shell { width: 100%; overflow-x: clip; background: #fff; } .wrap { width: 100%; max-width: 1120px; margin-inline: auto; } .section { position: relative; padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 40px) 0; display: flex; flex-direction: column; align-items: center; } /* ── Botones ──────────────────────────────────────────────── El "relleno que sube" se hace con background-size en vez de un pseudo-elemento: una sola propiedad animada y sin capa extra. */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; background-repeat: no-repeat; background-position: bottom center; background-size: 100% 0%; transition: background-size 0.42s var(--ease), color 0.28s ease, border-color 0.28s ease; } .btn:focus-visible { background-size: 100% 100%; } @media (hover: hover) and (pointer: fine) { .btn:hover { background-size: 100% 100%; } } .btn--dark { height: 52px; padding: 0 26px; background-color: var(--ink); background-image: linear-gradient(var(--orange), var(--orange)); color: #fff; } .btn--dark:focus-visible { color: #fff; } @media (hover: hover) and (pointer: fine) { .btn--dark:hover { color: #fff; } } .btn--ghost { height: 52px; padding: 0 22px; background-color: #fff; background-image: linear-gradient(var(--ink), var(--ink)); border: 1px solid var(--line-3); color: var(--ink); } .btn--ghost:focus-visible { color: #fff; border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { .btn--ghost:hover { color: #fff; border-color: var(--ink); } } .btn--light { height: 42px; padding: 0 clamp(16px, 3vw, 24px); background-color: #fff; background-image: linear-gradient(var(--orange), var(--orange)); color: var(--ink); font-size: 15px; } .btn--light:focus-visible { color: #fff; } @media (hover: hover) and (pointer: fine) { .btn--light:hover { color: #fff; } } /* ── Píldora de sección ─────────────────────────────────── */ .eyebrow { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .section-title { position: relative; margin-top: 20px; font-size: clamp(27px, 5.2vw, 36px); letter-spacing: -0.04em; line-height: 1.14; text-align: center; max-width: 620px; text-wrap: balance; } /* ── Manchas de color de fondo ──────────────────────────── */ .blob { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; } /* ── Navbar ─────────────────────────────────────────────── */ .navbar { position: fixed; inset: 0 0 auto; z-index: 90; padding: 14px clamp(12px, 4vw, 26px) 0; display: flex; justify-content: center; pointer-events: none; } .navbar__inner { width: 100%; max-width: 1120px; position: relative; pointer-events: auto; } .nav { position: relative; width: 100%; height: var(--nav-h); border-radius: 999px; background: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 0 clamp(16px, 3vw, 26px); box-shadow: 0 12px 30px rgba(25, 22, 21, 0.14); transition: box-shadow 0.35s ease; } .nav.is-scrolled { box-shadow: 0 18px 44px rgba(25, 22, 21, 0.26); } .nav__brand { display: flex; align-items: center; flex: none; } .nav__brand img { height: 23px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); flex: 1 1 auto; justify-content: center; } .nav__links a { color: rgba(255, 255, 255, 0.72); font-size: 15px; letter-spacing: -0.01em; transition: color 0.2s ease; } .nav__links a:focus-visible { color: #fff; } @media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: #fff; } } .nav__actions { display: flex; align-items: center; gap: 8px; flex: none; } .burger { display: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .burger span { width: 15px; height: 1.6px; border-radius: 2px; background: #fff; display: block; transition: transform 0.3s var(--ease), opacity 0.2s ease; } .burger[aria-expanded='true'] span:first-child { transform: translateY(2.8px) rotate(45deg); } .burger[aria-expanded='true'] span:last-child { transform: translateY(-2.8px) rotate(-45deg); } .nav__menu { position: absolute; top: 70px; left: 0; right: 0; background: #fff; border: 1px solid var(--line-4); border-radius: 22px; box-shadow: 0 24px 50px -18px rgba(25, 22, 21, 0.28); padding: 10px 16px; display: none; flex-direction: column; z-index: 70; } .nav__menu.is-open { display: flex; } .nav__menu a { font-size: 16px; color: var(--ink); padding: 10px 4px; border-bottom: 1px solid var(--line); } .nav__menu a:last-child { border-bottom: 0; } @media (max-width: 859px) { .nav__links { display: none; } .burger { display: flex; } } /* ── Hero ───────────────────────────────────────────────── */ .hero-shell { position: relative; } .hero-shell__bg { position: absolute; inset: 0 0 auto; height: min(1100px, 150vh); background: linear-gradient(180deg, var(--cream) 0%, #fff9f5 34%, #fff 78%); pointer-events: none; } .hero-shell__orb { position: absolute; top: -14%; left: 50%; width: min(920px, 150vw); aspect-ratio: 1; transform: translate(-50%, 0); border-radius: 50%; background: radial-gradient( circle, rgba(238, 104, 32, 0.16) 0%, rgba(238, 104, 32, 0.05) 45%, rgba(238, 104, 32, 0) 70% ); pointer-events: none; will-change: transform; animation: clean-orb 17s ease-in-out infinite; } .hero { position: relative; padding: clamp(122px, calc(74px + 8vw), 166px) clamp(20px, 5vw, 40px) 0; display: flex; flex-direction: column; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--muted); font-size: clamp(10px, 2.6vw, 11px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; box-shadow: 0 1px 2px rgba(25, 22, 21, 0.04); } .hero__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; animation: clean-pulse 2.4s ease-in-out infinite; } .hero h1 { max-width: 900px; margin-top: clamp(20px, 4vw, 28px); text-align: center; font-size: clamp(33px, 7vw, 56px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; } .grad { background: linear-gradient( 96deg, #fbb667 0%, var(--orange) 30%, #ff5c1ceb, #f2924f 84%, #fbb667 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lead { max-width: 640px; margin-top: clamp(16px, 3vw, 22px); text-align: center; font-size: clamp(16px, 3.6vw, 19px); line-height: 1.55; color: var(--muted); letter-spacing: -0.01em; text-wrap: pretty; } .hero__cta { width: 100%; max-width: 420px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(24px, 4vw, 34px); } .hero__cta .btn { flex: 1 1 180px; } .hero__note { margin-top: 14px; font-size: clamp(12px, 2.8vw, 13px); color: var(--muted-3); letter-spacing: -0.01em; text-align: center; } /* ── Mockups del hero ───────────────────────────────────── */ .mockups { position: relative; width: 100%; max-width: 1060px; margin: clamp(36px, 6vw, 64px) auto 0; padding-bottom: clamp(0px, 2vw, 20px); } .browser__dot { width: 9px; height: 9px; border-radius: 50%; background: #e6e3e0; flex: none; } .phone { position: absolute; container-type: inline-size; top: 11%; right: -2%; width: 23%; z-index: 2; } .phone__body { position: relative; width: 100%; aspect-ratio: 148/302; filter: drop-shadow(0 30px 56px rgba(25, 22, 21, 0.3)); } /* Los cuatro números salen de medir el recorte transparente de marco-celular.webp pixel por pixel: la ventana empieza en 2,45% arriba, 2,37% abajo, 5,17% a la izquierda y 4,67% a la derecha. La pantalla va un pelo MÁS GRANDE que esa ventana (~0,15% por lado) para que el bisel siempre la pise. Antes estaba más chica arriba y abajo, y por esa rendija —marco transparente, pantalla que todavía no empieza— se veía el fondo de la página como una línea blanca sobre la portada. No se notaba mientras arriba había una franja blanca de barra de estado; al llevar la foto hasta el borde, quedó a la vista. */ .phone__screen { position: absolute; top: 2.3%; left: 5%; right: 4.5%; bottom: 2.2%; border-radius: 12.8%/5.95%; overflow: hidden; background: #fff; display: flex; flex-direction: column; } .phone__status { flex: none; height: 6.6%; padding: 0 7.5%; display: flex; align-items: center; justify-content: space-between; background: #fff; color: #111; font-size: 4cqw; line-height: 1; } .phone__status svg { display: block; width: auto; } /* ── Barra de inicio ──────────────────────────────────────── La pastilla de abajo del iPhone. Va acá y no en el mockup porque es cromo del teléfono, igual que la barra de estado: aparece sea cual sea la pantalla que se esté mostrando. Las medidas salen de un iPhone real (393 x 852 pt, barra de 139 x 5 pt a 8 pt del borde) pasadas a `cqw`, que en estos teléfonos es el ancho del MARCO. Como la pantalla ocupa el 90,5% del marco y su alto es 1,948 veces ese ancho, quedan 32cqw de ancho, 1,15 de alto y 1,85 de separación. En `cqw` el grosor acompaña al teléfono cuando se achica, que es lo que un `px` fijo no hace. */ .phone__home { position: absolute; left: 50%; bottom: 1.85cqw; transform: translateX(-50%); width: 32cqw; height: 1.15cqw; border-radius: 999px; background: rgba(20, 18, 16, 0.85); z-index: 2; } /* ── Pantalla a sangre ────────────────────────────────────── Por defecto la barra de estado es una franja blanca en flujo, arriba de la captura. Eso está bien para una pantalla de fondo claro, pero sobre la portada del negocio dejaba una banda blanca entre la barra y la foto. Con este modificador la barra sale del flujo y se dibuja ENCIMA, como en un teléfono de verdad: la foto llega hasta el borde y la hora, la señal y la batería se leen sobre ella. Va como modificador y no en `.phone__status` a secas porque el mockup del flujo de reserva sí tiene fondo blanco arriba, y ahí la franja es lo correcto. */ .phone__screen--sangre .phone__status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: none; color: #fff; } /* Los íconos traen el color como atributo de presentación; una propiedad CSS le gana sin tener que tocar el markup de cada SVG. */ .phone__screen--sangre .phone__status [fill='#111'] { fill: #fff; } .phone__screen--sangre .phone__status [stroke='#111'] { stroke: #fff; } .phone__status .time { font-weight: 600; letter-spacing: -0.02em; } .phone__status .icons { display: flex; align-items: center; gap: 0.42em; } .phone__shot { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top center; display: block; } .phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .phone--cal { display: none; } .floatcard { position: absolute; z-index: 3; width: 238px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 20px 44px -14px rgba(25, 22, 21, 0.24); display: flex; align-items: center; gap: 11px; } .floatcard__title { font-size: 12.5px; font-weight: 500; letter-spacing: -0.02em; } .floatcard__sub { font-size: 11px; color: var(--muted-2); margin-top: 2px; } .floatcard--a { top: 20%; left: 3%; animation: clean-bob 6.5s ease-in-out infinite; } .floatcard--b { /* La base del laptop se come el 10,7% de abajo del mockup; con menos de eso la tarjeta quedaba montada sobre la juntura pantalla/base. */ bottom: 17%; left: 19%; animation: clean-bob 7.5s ease-in-out infinite 1.2s; } .floatcard__check { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; flex: none; } .floatcard__check .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange); animation: clean-ring 2.6s ease-out infinite; } /* Debajo de 900px se muestra el panel de escritorio y se ocultan los dos teléfonos y las tarjetas flotantes. El panel se dibuja a 1440px, así que a 375px de viewport entero entraría escalado 0,26: el texto de 10px de la agenda quedaría en 2,6px, ilegible. Por eso acá NO se encoge para entrar: se lo deja más ancho que la pantalla y sangra por la derecha, que es lo que lo mantiene legible. El recorte lo hace el `overflow-x: clip` de .shell, que recorta sin scrollear. El ancho va en `vw` y no en `%` a propósito: el porcentaje se mide contra .mockups, que ya está limitado, y da un escalado distinto en cada tamaño. */ @media (max-width: 899px) { /* Las tarjetas flotantes sí se van: sobre un laptop de 227px de alto tapan media agenda. El teléfono se queda, arriba a la derecha. */ .floatcard { display: none; } .mockups { margin-top: clamp(28px, 5vw, 48px); } /* Alto del teléfono ≈ alto del laptop. El marco tiene aspecto 148/302, así que el ancho sale del alto: 31% de .mockups da ~104px a 375px de viewport, o sea 212px de alto contra los 227 del laptop. Ojo que el % es sobre .mockups, que es más angosto que .macbook (el laptop se pasa al 112%): de ahí que el `right` negativo sea chico. */ .phone { top: -6%; right: -4%; left: auto; bottom: auto; width: 31%; z-index: 3; } /* Los overrides del laptop para mobile NO van acá: las reglas base de .macbook están más abajo en el archivo y una media query no suma especificidad, así que ganarían ellas. Están al final, después. */ } /* El ajuste para pantallas angostas está al final, junto al resto de los overrides del laptop, por el mismo tema de orden en la cascada. */ /* ── Prueba social ──────────────────────────────────────── */ .proof { position: relative; padding: clamp(48px, 7vw, 70px) clamp(20px, 5vw, 40px) 0; display: flex; flex-direction: column; align-items: center; gap: 22px; } .proof__label { font-size: 11.5px; color: var(--muted-3); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; text-align: center; } .proof__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(22px, 5vw, 56px); align-items: center; opacity: 0.55; } .proof__logos span { font-size: clamp(16px, 3.6vw, 20px); } /* ── Bloques de funciones ───────────────────────────────── */ .features { position: relative; width: 100%; max-width: 1120px; display: flex; flex-direction: column; gap: clamp(16px, 3vw, 24px); margin-top: clamp(36px, 6vw, 56px); } .feature { display: flex; flex-wrap: wrap; border-radius: clamp(26px, 4vw, 40px); overflow: hidden; } .feature--a { background: linear-gradient(130deg, var(--cream) 0%, var(--surface) 62%); } .feature--b { flex-direction: row-reverse; background: linear-gradient(230deg, #eff3fb 0%, var(--surface) 58%); } .feature__copy { flex: 1 1 340px; min-width: 0; padding: clamp(34px, 6vw, 64px) clamp(24px, 5vw, 56px); display: flex; flex-direction: column; justify-content: center; } .feature__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--orange-softer); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex: none; } .feature__copy h3 { font-size: clamp(22px, 4.4vw, 28px); letter-spacing: -0.035em; } .feature__copy p { margin-top: 12px; font-size: clamp(15.5px, 3.4vw, 17px); line-height: 1.55; color: var(--muted); letter-spacing: -0.01em; max-width: 400px; text-wrap: pretty; } .feature__art { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; } .feature--a .feature__art { padding: clamp(0px, 3vw, 56px) clamp(18px, 4vw, 0px) 0; } .feature--b .feature__art { padding: clamp(0px, 3vw, 56px) clamp(18px, 4vw, 0px) 0 clamp(18px, 4vw, 56px); } /* Tarjeta "Turnos de esta noche" */ .tonight { width: 100%; max-width: 420px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 24px 60px -24px rgba(25, 22, 21, 0.22); padding: 22px; margin-bottom: -28px; } .tonight__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .tonight__head strong { font-size: 15px; font-weight: 500; letter-spacing: -0.03em; } .tonight__head span { font-size: 11px; color: var(--muted-3); } .tonight__rows { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; } .trow { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 16px; background: var(--line); transition: background 0.5s ease, transform 0.5s var(--ease); } .trow__dot { width: 30px; height: 30px; border-radius: 50%; background: #dcd8d4; flex: none; transition: background 0.5s ease; } .trow__body { flex: 1; min-width: 0; } .trow__title { font-size: 13.5px; font-weight: 500; letter-spacing: -0.02em; } .trow__sub { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; } .trow__tag { font-size: 11px; color: var(--orange-dark); opacity: 0; transition: opacity 0.5s ease; } .trow.is-on { background: var(--orange-soft); transform: translateX(4px); } .trow.is-on .trow__dot { background: var(--orange); } .trow.is-on .trow__tag { opacity: 1; } /* Mini sitio del tenant */ .minisite { width: 100%; max-width: 460px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px -24px rgba(25, 22, 21, 0.22); overflow: hidden; margin-bottom: -28px; } .minisite__bar { height: 34px; background: var(--surface-3); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 13px; gap: 6px; } .minisite__bar .browser__dot { width: 8px; height: 8px; } .minisite__url { margin-left: 10px; font-size: 10.5px; color: var(--muted-3); } .minisite__body { padding: 26px 24px 30px; background: linear-gradient(180deg, var(--cream) 0%, #fff 60%); } .minisite__brand { display: flex; align-items: center; gap: 10px; } .minisite__brand i { width: 32px; height: 32px; border-radius: 11px; background: var(--orange); flex: none; } .minisite__brand b { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; } .minisite__h { font-size: clamp(21px, 4.4vw, 26px); font-weight: 500; letter-spacing: -0.04em; margin-top: 22px; line-height: 1.12; } .minisite__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .minisite__btns span { height: 38px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; display: flex; align-items: center; } .minisite__btns span + span { padding: 0 18px; background: none; border: 1px solid var(--line-3); color: var(--muted); } .minisite__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; } .minisite__grid div { border-radius: 14px; background: var(--surface-2); padding: 11px; } .minisite__grid b { font-size: 12px; font-weight: 500; } .minisite__grid i { display: block; font-style: normal; font-size: 11px; color: var(--muted-2); margin-top: 3px; } .minisite__grid u { display: block; text-decoration: none; font-size: 12px; margin-top: 6px; } /* ── Bloque oscuro: Google Calendar ─────────────────────── */ .gcal { position: relative; border-radius: clamp(26px, 4vw, 40px); background: var(--ink); overflow: hidden; display: flex; flex-wrap: wrap; box-shadow: 0 40px 90px -40px rgba(25, 22, 21, 0.55); } .gcal__copy { position: relative; flex: 1 1 380px; min-width: 0; padding: clamp(34px, 6vw, 64px) clamp(24px, 5vw, 56px); display: flex; flex-direction: column; justify-content: center; } .gcal__logos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .gcal__logos i { width: 48px; height: 48px; border-radius: 15px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .gcal__plus { color: rgba(255, 255, 255, 0.36); font-size: 22px; font-weight: 300; } .tag-hot { height: 28px; padding: 0 13px; border-radius: 999px; background: rgba(238, 104, 32, 0.18); color: #ff9455; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; } .gcal__copy h3 { margin-top: 24px; font-size: clamp(27px, 5.6vw, 40px); line-height: 1.08; letter-spacing: -0.04em; color: #fff; max-width: 460px; text-wrap: balance; } .gcal__copy > p { margin-top: 16px; font-size: clamp(15.5px, 3.4vw, 17.5px); line-height: 1.55; color: rgba(255, 255, 255, 0.62); letter-spacing: -0.01em; max-width: 420px; text-wrap: pretty; } .gcal__list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 13px; } .gcal__list li { display: flex; gap: 11px; align-items: flex-start; font-size: clamp(14.5px, 3.2vw, 15.5px); line-height: 1.45; color: rgba(255, 255, 255, 0.88); letter-spacing: -0.01em; } .gcal__list svg { margin-top: 3px; flex: none; } .gcal__live { display: flex; align-items: center; gap: 9px; margin-top: 30px; } .gcal__live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: block; flex: none; } .gcal__live i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--green); animation: clean-ring 2.4s ease-out infinite; } .gcal__live span { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } /* ── "Tu web propia": el mismo teléfono del hero, cortado al medio ── Es el mockup real del sitio de un negocio, no una versión simplificada. El envoltorio se lleva la mitad del alto en el layout y el teléfono entero se dibuja encima: lo que sobra lo recorta el `overflow: hidden` de la caja, así muere contra su borde en vez de con un corte recto. */ .webfono { position: relative; align-self: flex-end; width: min(320px, 80vw); /* Cuánto teléfono se ve antes de que lo corte el borde de la caja. 148/302 sería el teléfono entero; 148/210 son unos dos tercios, que alcanzan para la portada, el nombre del negocio, las reseñas y el primer turno libre. */ aspect-ratio: 148/210; container-type: inline-size; } .webfono__cuerpo { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 148/302; filter: drop-shadow(0 30px 56px rgba(25, 22, 21, 0.26)); } /* En el bloque de historias esto no es un estado en vivo como el "sincronizado hace 2 segundos" de Calendar, sino una promesa. Por eso va con la misma pastilla que el "$0 de comisión" de las señas, en su versión sobre fondo oscuro: sin pulso, sin mono y en redonda. */ .gcal--fono .gcal__live { position: relative; display: inline-block; align-self: flex-start; margin-top: 28px; padding: 10px 15px 10px 31px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px; color: rgba(255, 255, 255, 0.88); letter-spacing: -0.01em; } .gcal--fono .gcal__live i { position: absolute; left: 15px; top: 50%; margin-top: -3.5px; } .gcal--fono .gcal__live i::after { content: none; } .gcal--fono .gcal__live span { font-size: inherit; color: inherit; letter-spacing: inherit; } .gcal__art { position: relative; flex: 1 1 340px; min-width: 0; padding: clamp(0px, 3vw, 56px) clamp(24px, 5vw, 56px) clamp(34px, 6vw, 56px); display: flex; align-items: center; } .gcal__rail { position: relative; height: 2px; background: rgba(255, 255, 255, 0.12); margin-bottom: 20px; overflow: hidden; } .gcal__rail span { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px 3px rgba(238, 104, 32, 0.7); animation: clean-travel 2.8s linear infinite; } .gcalcard { border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.6); } .gcalcard__head { padding: 15px 17px; border-bottom: 1px solid #eceff4; display: flex; align-items: center; gap: 10px; } .gcalcard__head img { width: 22px; height: 22px; display: block; flex: none; } .gcalcard__head b { font-size: 14px; font-weight: 500; letter-spacing: -0.03em; display: block; } .gcalcard__head small { font-size: 11px; color: var(--muted-2); margin-top: 1px; display: block; } .gcalcard__tag { height: 24px; padding: 0 11px; border-radius: 999px; background: var(--blue-soft); color: #1a73e8; font-size: 10.5px; font-weight: 500; display: flex; align-items: center; flex: none; } .gcalcard__grid { display: grid; grid-template-columns: 42px minmax(0, 1fr); font-size: 11px; } .gcalcard__h { padding: 12px 8px; color: var(--muted-3); border-right: 1px solid #f1f3f6; } .gcalcard__slot { padding: 7px 10px; border-bottom: 1px solid #f6f7f9; } .gcalcard__slot:last-child { border-bottom: 0; } .gev { border-radius: 9px; background: var(--orange-soft); border-left: 3px solid var(--orange); padding: 8px 10px; font-size: 11.5px; transition: opacity 0.45s ease, transform 0.55s var(--ease), box-shadow 0.45s ease; } .gev b { font-weight: 500; } .gev div { color: var(--muted-2); margin-top: 2px; } .gev--tall { padding-bottom: 22px; } .gev--blue { background: var(--blue-soft); border-left-color: var(--blue); color: #1a56c4; } .gev--blue div { color: #5b7fc7; } .gev.is-out { opacity: 0; transform: translateX(-14px) scale(0.96); box-shadow: none; } .gev.is-in { opacity: 1; transform: translateX(0) scale(1); box-shadow: 0 0 0 2px rgba(238, 104, 32, 0.35); } /* ══════════════════════════════════════════════════════════ BLOQUES NUEVOS DE #funciones Historias, señas, clientes y estadísticas reusan las tres cajas que ya existían (.feature--a, .feature--b y la oscura de .gcal). Lo único propio es el contenido del arte. ══════════════════════════════════════════════════════════ */ /* ── Par de logos sobre fondo claro ───────────────────────── El equivalente de .gcal__logos para las cajas crema/azul: ahí el tile es blanco a secas, acá necesita borde porque el fondo también es claro. */ .feature__logos { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .feature__logos i { width: 48px; height: 48px; border-radius: 15px; background: #fff; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex: none; } .feature__logos img { display: block; } /* El logo de Mercado Pago es un lockup horizontal y no se recorta: la caja se ensancha, no el logo se achica. Va con la misma especificidad que `.feature__logos i`, si no el ancho de 48px le gana y lo aplasta. */ .feature__logos .ancho { width: auto; padding: 0 12px; } .feature__logos .ancho img { flex: none; } .feature__plus { color: var(--muted-4); font-size: 22px; font-weight: 300; } /* ── Lista de checks dentro de una caja clara ─────────────── */ .feature__list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; } .feature__list li { position: relative; padding-left: 26px; font-size: clamp(14.5px, 3.2vw, 15px); line-height: 1.45; color: var(--ink-70); letter-spacing: -0.01em; } .feature__list svg { position: absolute; left: 0; top: 3px; } .feature__list b { font-weight: 500; } /* Pastilla suelta al pie de la columna de texto ("$0 de comisión") */ .feature__sello { position: relative; display: inline-block; align-self: flex-start; margin-top: 26px; padding: 10px 15px 10px 31px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-70); letter-spacing: -0.01em; } .feature__sello i { position: absolute; left: 15px; top: 50%; margin-top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .feature__sello b { font-weight: 500; } /* ── La tarjeta blanca que hace de captura ────────────────── Misma receta que .tonight: se apoya contra el borde de abajo de la caja y se recorta ahí, así se lee como pantalla que sigue más allá del bloque. */ .acard { /* Se apoya abajo: si la columna de texto es más alta, la tarjeta igual tiene que morir contra el borde de la caja y no quedar flotando. */ align-self: flex-end; width: 100%; max-width: 440px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 24px 60px -24px rgba(25, 22, 21, 0.22); padding: 20px 20px 0; margin-bottom: -28px; } /* Cuando la última línea de la tarjeta dice algo (y no es una lista que se puede cortar), el recorte de abajo tiene que comerse relleno, no texto. */ .acard--entera { padding-bottom: 30px; } .repaso__cab { display: flex; align-items: center; gap: 10px; } .repaso__volver { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex: none; } .repaso__cab b { font-size: 15px; font-weight: 500; letter-spacing: -0.025em; } .repaso__quien { display: flex; align-items: center; gap: 11px; margin-top: 18px; } .repaso__av { width: 42px; height: 42px; border-radius: 50%; background: var(--orange-softer); color: var(--orange-dark); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; flex: none; } .repaso__quien > span { min-width: 0; } .repaso__quien b { display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -0.025em; } .repaso__quien small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-2); letter-spacing: -0.01em; } .repaso__cuando { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 11px 13px; border-radius: 13px; background: var(--cream); font-size: 14px; letter-spacing: -0.02em; } .repaso__cuando svg { flex: none; } .acard__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .acard__cab b { font-size: 15px; font-weight: 500; letter-spacing: -0.025em; } .acard__cab span { font-size: 11.5px; color: var(--muted-3); } /* ── Historias: el teléfono ───────────────────────────────── Mismo marco que los mockups del hero (marco-celular.webp) y las mismas medidas de pantalla, para que sea el mismo objeto. El contenido de la story se dimensiona en cqw contra el ancho de la pantalla: así el dibujo escala igual que el canvas real, que está calculado sobre una referencia de 243 px de ancho. */ .gcal--fono .gcal__art { padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 56px) clamp(32px, 5vw, 56px); align-items: flex-end; justify-content: center; } .fono { position: relative; width: min(300px, 76vw); filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.55)); } .fono__cuerpo { position: relative; width: 100%; aspect-ratio: 148/302; } .fono__pantalla { position: absolute; top: 2.55%; left: 5.1%; right: 4.7%; bottom: 2.5%; border-radius: 12.8%/5.95%; overflow: hidden; background: var(--ink); container-type: inline-size; } .fono__marco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* La imagen que arma Clean */ .sty__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sty__velo { position: absolute; inset: 0; /* Los cuatro stops son los del canvas de StoryModal.tsx, no una aproximación: es lo que hace legible el texto blanco sobre una foto cualquiera, y si se cambia acá deja de ser la misma imagen. */ background: linear-gradient( 180deg, rgba(20, 18, 16, 0.72) 0%, rgba(20, 18, 16, 0.28) 34%, rgba(20, 18, 16, 0.55) 64%, rgba(20, 18, 16, 0.9) 100% ); } .sty__cuerpo { position: absolute; left: 7.4cqw; right: 7.4cqw; top: 17%; font-weight: 600; letter-spacing: -0.02em; } .sty__titulo { font-size: 12.35cqw; line-height: 0.94; color: #fff; } .sty__titulo span { color: var(--orange); display: block; } .sty__raya { width: 18.1cqw; height: 1.25cqw; border-radius: 999px; background: var(--orange); margin-top: 3.7cqw; } .sty__dia { display: inline-flex; align-items: baseline; gap: 3.3cqw; margin-top: 7cqw; padding: 2.47cqw 4.53cqw; border-radius: 4.1cqw; background: rgba(20, 18, 16, 0.72); } .sty__dia i { font-style: normal; font-size: 3.9cqw; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } .sty__dia b { font-size: 4.5cqw; font-weight: 600; color: #fff; } .sty__horas { display: grid; /* De cinco horarios para arriba el generador pasa a dos columnas parejas, y cada pastilla ocupa media columna entera aunque el texto sea corto. Por eso NO llevan justify-items: start. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.47cqw; margin-top: 4.94cqw; } .sty__horas span { padding: 1.85cqw 3.29cqw; border-radius: 3.29cqw; background: var(--orange); color: #fff; font-size: 4.32cqw; line-height: 1; white-space: nowrap; } .sty__horas span em { font-style: normal; font-size: 2.88cqw; opacity: 0.65; margin-left: 1.2cqw; } .sty__pie { position: absolute; left: 7.4cqw; right: 7.4cqw; bottom: 12%; display: flex; align-items: center; gap: 4.12cqw; padding: 4.53cqw 4.94cqw; border-radius: 5.76cqw; background: rgba(255, 255, 255, 0.94); } .sty__marca { width: 12.3cqw; height: 12.3cqw; border-radius: 4.1cqw; background: #1c1b19; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 4.12cqw; font-weight: 600; flex: none; } .sty__quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.7cqw; line-height: 1.2; } .sty__quien b { font-size: 4.5cqw; font-weight: 600; color: #1a1917; letter-spacing: -0.02em; } .sty__quien span { font-size: 3.5cqw; color: #8d8a86; } .sty__pie img { width: 15.64cqw; height: auto; opacity: 0.7; flex: none; } /* El sticker de link de Instagram. No es parte de la imagen que genera Clean —el generador lo dice explícito: el link no va adentro del PNG porque escrito no se toca— sino lo que el negocio le pega encima al subir la historia. Está acá justamente para mostrar cómo queda ya publicada. Es el PNG del sticker real y no un dibujo en CSS: la tipografía de Instagram es propia, así que a mano nunca iba a ser el mismo glifo. Va centrado en el hueco entre los horarios (terminan en 54,2%) y el pie del negocio (arranca en 78,1%), y derecho: el sticker no se inclina solo, y torcido se lee como un error de maquetado. */ .sty__sticker { position: absolute; left: 50%; bottom: 30.5%; transform: translateX(-50%); width: 41cqw; height: auto; display: block; filter: drop-shadow(0 1.2cqw 2.6cqw rgba(0, 0, 0, 0.28)); } /* La interfaz de Instagram encima, para que se lea como historia y no como una postal suelta. */ /* La hora y los íconos, a los costados de la isla. Medí la isla en el .webp del marco: va del 1,44% al 5,89% del alto de la pantalla, centrada en 3,67%. Esta caja mide 7,34% con el contenido centrado, así que cae justo a esa altura. Ojo que acá `cqw` es el ancho de la PANTALLA (lo declara .fono__pantalla), no el del marco como en .phone__status. */ .sty__estado { position: absolute; top: 0; left: 0; right: 0; height: 7.34%; padding: 0 7.5%; display: flex; align-items: center; justify-content: space-between; font-size: 4.42cqw; line-height: 1; color: #fff; z-index: 2; } .sty__estado b { font-weight: 600; letter-spacing: -0.02em; } .sty__estado span { display: flex; align-items: center; gap: 0.42em; } .sty__estado svg { display: block; width: auto; } .sty__estado [fill='#111'] { fill: #fff; } .sty__estado [stroke='#111'] { stroke: #fff; } /* Las barritas arrancan debajo de la isla (que termina en 5,89%), no pegadas a ella. */ .sty__ig-barras { position: absolute; top: 7.6%; left: 5.2cqw; right: 5.2cqw; display: flex; gap: 1.1cqw; } .sty__ig-barras i { flex: 1; height: 0.75cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.35); } .sty__ig-barras i:first-child { background: #fff; } .sty__ig-cuenta { position: absolute; top: 10.3%; left: 5.2cqw; right: 5.2cqw; display: flex; align-items: center; gap: 2.6cqw; font-size: 3.9cqw; color: #fff; } .sty__ig-cuenta i { width: 8.1cqw; height: 8.1cqw; border-radius: 50%; background: var(--orange); border: 0.55cqw solid rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 3.1cqw; font-weight: 500; flex: none; } .sty__ig-cuenta em { font-style: normal; color: rgba(255, 255, 255, 0.6); } .sty__home { position: absolute; left: 50%; bottom: 2cqw; transform: translateX(-50%); width: 35.4cqw; height: 1.27cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.85); z-index: 2; } .sty__ig-abajo { position: absolute; left: 5.2cqw; right: 5.2cqw; /* Deja aire con la barra de inicio, que llega hasta 3,27cqw. */ bottom: 6.4cqw; display: flex; align-items: center; gap: 3.7cqw; } .sty__ig-abajo span { flex: 1; height: 11cqw; border-radius: 999px; border: 0.37cqw solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; padding: 0 4.8cqw; font-size: 3.9cqw; color: rgba(255, 255, 255, 0.8); } .sty__ig-abajo svg { flex: none; width: 6.2cqw; height: 6.2cqw; } /* ── Señas: lo que ve el cliente al reservar ──────────────── */ .sena__filas { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .sena__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; letter-spacing: -0.01em; } .sena__fila dt { color: var(--muted-2); } .sena__fila dd { margin: 0; color: var(--ink); text-align: right; } .sena__corte { height: 1px; background: var(--line); margin: 16px 0; } .sena__monto { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sena__monto span { font-size: 15px; letter-spacing: -0.02em; } .sena__monto b { font-size: 22px; font-weight: 500; letter-spacing: -0.035em; color: var(--orange-dark); } .sena__resto { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); letter-spacing: -0.01em; } .sena__boton { margin-top: 18px; height: 46px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; } .sena__boton img { display: block; opacity: 0.92; } .sena__hold { margin: 14px 0 20px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; color: var(--muted-2); letter-spacing: -0.01em; } /* ── Clientes ─────────────────────────────────────────────── */ .crm__vuelta { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 14px; background: var(--cream); border: 1px solid var(--orange-softer); } .crm__vuelta > i { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .crm__vuelta div { flex: 1; min-width: 0; } .crm__vuelta b { display: block; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; } .crm__vuelta small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-2); letter-spacing: -0.01em; } .crm__vuelta em { font-style: normal; height: 27px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; display: flex; align-items: center; flex: none; } .crm__segmentos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .crm__segmentos span { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-70); font-size: 12.5px; letter-spacing: -0.01em; } .crm__segmentos span b { font-weight: 500; color: var(--muted-3); } .crm__segmentos span:first-child { background: var(--ink); border-color: var(--ink); color: #fff; } .crm__segmentos span:first-child b { color: rgba(255, 255, 255, 0.5); } .crm__ficha { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .crm__quien { display: flex; align-items: center; gap: 11px; } .crm__av { width: 40px; height: 40px; border-radius: 50%; background: var(--orange-softer); color: var(--orange-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; flex: none; } .crm__quien div { flex: 1; min-width: 0; } .crm__quien b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; } .crm__quien small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-2); letter-spacing: -0.01em; } .crm__tag { height: 25px; padding: 0 11px; border-radius: 999px; background: var(--cream); color: var(--orange-dark); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; flex: none; } .crm__datos { display: flex; flex-direction: column; gap: 9px; } .crm__datos div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-70); letter-spacing: -0.01em; } .crm__datos svg { flex: none; } .crm__datos span { color: var(--muted-3); width: 130px; flex: none; } .crm__nota { border-radius: 12px; background: var(--surface); padding: 11px 13px; display: flex; gap: 9px; align-items: flex-start; } .crm__nota svg { flex: none; margin-top: 2px; } .crm__nota div { flex: 1; min-width: 0; } .crm__nota small { display: block; font-size: 11px; color: var(--muted-3); letter-spacing: 0.08em; text-transform: uppercase; } .crm__nota p { margin-top: 3px; font-size: 13.5px; color: var(--ink-70); letter-spacing: -0.01em; } /* ── Estadísticas ─────────────────────────────────────────── */ .stat__modos { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--surface-2); } .stat__modos span { height: 27px; padding: 0 13px; border-radius: 999px; color: var(--muted-2); font-size: 12.5px; display: flex; align-items: center; } .stat__modos span:first-child { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(25, 22, 21, 0.08); } .stat__metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; } .stat__metrica { border-radius: 14px; border: 1px solid var(--line); padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; } .stat__metrica small { font-size: 11px; color: var(--muted-3); letter-spacing: 0.08em; text-transform: uppercase; } .stat__metrica b { font-size: 22px; font-weight: 500; letter-spacing: -0.035em; } .stat__metrica span { font-size: 11.5px; color: var(--muted-3); } .stat__metrica span.sube { color: var(--green); } .stat__caja { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 15px 16px; display: flex; flex-direction: column; gap: 13px; } .stat__caja > div:first-child { display: flex; align-items: center; justify-content: space-between; } .stat__caja > div:first-child b { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; } .stat__caja > div:first-child span { font-size: 11px; color: var(--muted-3); } .stat__barras { display: flex; flex-direction: column; gap: 10px; } .stat__barra { display: flex; flex-direction: column; gap: 5px; } .stat__barra div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; letter-spacing: -0.01em; color: var(--ink-70); } .stat__barra div span { color: var(--muted-3); } .stat__barra i { height: 7px; border-radius: 999px; background: var(--surface-2); display: block; overflow: hidden; } .stat__barra i b { display: block; height: 100%; border-radius: 999px; background: var(--orange); } /* ── Y además: la grilla del final ────────────────────────── */ .extras { width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 6vw, 56px); } .extra { border-radius: 22px; border: 1px solid var(--line); background: var(--surface-3); padding: clamp(20px, 3vw, 26px); display: flex; flex-direction: column; gap: 12px; } .extra__i { width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; } .extra h3 { font-size: 17px; letter-spacing: -0.025em; } .extra p { font-size: 14.5px; line-height: 1.5; color: var(--muted); letter-spacing: -0.01em; text-wrap: pretty; } @media (max-width: 899px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { /* En la columna angosta el botón le come el ancho al texto y el título sale en cuatro renglones: baja a su propia línea. */ .crm__vuelta { flex-wrap: wrap; row-gap: 10px; } .crm__vuelta div { flex: 1 1 100%; } .crm__vuelta em { margin-left: auto; } /* La captura no achica: en el celular la columna es la misma tarjeta con menos ancho, así que lo que se aprieta es el relleno, no el texto. */ .acard { padding: 16px 16px 0; } .crm__ficha { padding: 14px; } .crm__quien small { font-size: 12px; } .crm__tag { padding: 0 9px; font-size: 10px; } /* Con la etiqueta en columna fija de 130px al valor le quedaban cuatro letras por renglón: acá vuelve a ser texto corrido. */ .crm__datos div { flex-wrap: wrap; row-gap: 2px; } .crm__datos span { width: auto; } .stat__caja, .crm__ficha { padding-left: 13px; padding-right: 13px; } /* El rango de fechas es corto pero mono: sin nowrap se partía en tres renglones y desarmaba la cabecera. */ .acard__cab > .mono { white-space: nowrap; } .stat__modos span { padding: 0 10px; font-size: 12px; } } @media (max-width: 599px) { .extras { grid-template-columns: 1fr; } } /* ── Cómo funciona ──────────────────────────────────────── */ .steps { width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 36px); margin-top: clamp(40px, 6vw, 64px); } .step__n { font-size: clamp(60px, 10vw, 88px); line-height: 0.9; font-weight: 500; letter-spacing: -0.06em; background: linear-gradient(150deg, var(--orange) 0%, #f7a85c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .step__rule { height: 1px; background: linear-gradient( 90deg, var(--orange) 0%, rgba(238, 104, 32, 0) 100% ); margin: clamp(18px, 3vw, 26px) 0 20px; } .step h3 { font-size: clamp(20px, 4.2vw, 23px); letter-spacing: -0.035em; } .step p { margin-top: 10px; font-size: clamp(15px, 3.4vw, 16px); line-height: 1.55; color: var(--muted); letter-spacing: -0.01em; text-wrap: pretty; max-width: 340px; } .how h2 { margin-top: 22px; font-size: clamp(38px, 8.6vw, 76px); line-height: 1.02; letter-spacing: -0.05em; text-align: center; max-width: 960px; text-wrap: balance; } .how h2 span { background: linear-gradient(100deg, var(--orange) 0%, #f59a4b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .how__lead { margin-top: 20px; font-size: clamp(16px, 3.6vw, 19px); color: var(--muted); letter-spacing: -0.01em; text-align: center; max-width: 520px; text-wrap: pretty; } /* ── Precios ────────────────────────────────────────────── */ .pricing__lead { position: relative; margin-top: 12px; font-size: clamp(15px, 3.4vw, 17px); color: var(--muted); letter-spacing: -0.01em; text-align: center; } .plans { position: relative; width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 3vw, 20px); margin-top: clamp(38px, 6vw, 52px); align-items: start; } .plan { padding: clamp(30px, 5vw, 40px) clamp(24px, 4vw, 34px); border-radius: clamp(28px, 4vw, 36px); background: var(--surface); } .plan__name { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; } .plan__for { margin-top: 6px; font-size: 14.5px; color: var(--muted-2); } .plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; } .plan__price b { font-size: clamp(34px, 7vw, 42px); font-weight: 500; letter-spacing: -0.045em; } .plan__price span { font-size: 14px; color: var(--muted-2); } .plan__cta { height: 50px; width: 100%; margin-top: 24px; font-size: 15px; background-color: #fff; background-image: linear-gradient(var(--ink), var(--ink)); border: 1px solid var(--line-3); color: var(--ink); } .plan__cta:focus-visible { color: #fff; border-color: var(--ink); } @media (hover: hover) and (pointer: fine) { .plan__cta:hover { color: #fff; border-color: var(--ink); } } .plan__list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; } .plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-70); } .plan__list svg { margin-top: 3px; flex: none; } /* Lo que todavía no está construido se muestra pero se rotula. */ .soon { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-3); background: #fff; color: var(--muted-3); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; } .plan--hot { position: relative; background: radial-gradient( 130% 100% at 100% 0%, rgba(238, 104, 32, 0.3) 0%, rgba(238, 104, 32, 0) 58% ), var(--ink); color: #fff; box-shadow: 0 30px 70px -30px rgba(25, 22, 21, 0.45); margin-top: clamp(14px, 2vw, 0px); } .plan--hot .plan__for, .plan--hot .plan__price span { color: rgba(255, 255, 255, 0.55); } .plan--hot .plan__list li { color: rgba(255, 255, 255, 0.86); } .plan--hot .plan__cta { background-color: var(--orange); background-image: linear-gradient(var(--orange-dark), var(--orange-dark)); border: 0; color: #fff; } .plan--hot .plan__cta:focus-visible { color: #fff; } @media (hover: hover) and (pointer: fine) { .plan--hot .plan__cta:hover { color: #fff; } } .plan--hot .soon { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.62); } .plan__badge { position: absolute; top: -14px; left: clamp(24px, 4vw, 34px); height: 28px; padding: 0 14px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; } /* ── Testimonios ────────────────────────────────────────── */ .testis { position: relative; padding: clamp(80px, 11vw, 130px) 0 0; display: flex; flex-direction: column; align-items: center; } .testis h2 { margin: 20px clamp(20px, 5vw, 40px) 0; } .marquee { width: 100%; overflow: hidden; margin-top: clamp(30px, 5vw, 48px); -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 8%, #000 92%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, #000 8%, #000 92%, transparent 100% ); } .marquee__track { display: flex; gap: 16px; width: max-content; animation: clean-marquee 46s linear infinite; } @media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__track { animation-play-state: paused; } } .testi { width: clamp(272px, 80vw, 340px); padding: 24px 26px; border-radius: clamp(26px, 4vw, 32px); background: var(--surface); } .testi p { font-size: clamp(14.5px, 3.4vw, 15.5px); line-height: 1.6; color: var(--ink-70); letter-spacing: -0.01em; text-wrap: pretty; } .testi__who { display: flex; align-items: center; gap: 11px; margin-top: 20px; } .testi__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: block; } .testi__who b { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; display: block; } .testi__who small { font-size: 12.5px; color: var(--muted-2); } /* ── Métricas ───────────────────────────────────────────── */ .metrics { position: relative; padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 40px) 0; display: flex; justify-content: center; } .metrics__inner { width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(28px, 4vw, 0px); border-radius: clamp(28px, 4vw, 40px); background: linear-gradient( 120deg, var(--cream) 0%, #f8f7f7 52%, #eff3fb 100% ); padding: clamp(38px, 6vw, 56px) clamp(20px, 4vw, 0px); } .metric { text-align: center; } .metric b { font-size: clamp(40px, 8vw, 52px); font-weight: 500; letter-spacing: -0.05em; color: var(--orange); display: block; } .metric span { font-size: clamp(14px, 3.2vw, 15px); color: var(--muted); margin-top: 6px; letter-spacing: -0.01em; display: block; } /* ── FAQ ────────────────────────────────────────────────── */ .faqs { position: relative; width: 100%; max-width: 800px; margin-top: clamp(30px, 5vw, 48px); display: flex; flex-direction: column; gap: 10px; } .faq { border-radius: clamp(20px, 3vw, 24px); background: var(--surface); overflow: hidden; } .faq__q { width: 100%; padding: 20px clamp(20px, 4vw, 26px); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; text-align: left; } .faq__q span { font-size: clamp(15.5px, 3.6vw, 17px); font-weight: 500; letter-spacing: -0.025em; } .faq__sign { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; color: var(--orange); transition: transform 0.3s var(--ease); } .faq__q[aria-expanded='true'] .faq__sign { transform: rotate(135deg); } .faq__a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.42s var(--ease), opacity 0.3s ease; } .faq__a p { padding: 0 clamp(20px, 4vw, 26px) 22px; font-size: clamp(14.5px, 3.4vw, 15.5px); line-height: 1.6; color: var(--muted); letter-spacing: -0.01em; max-width: 640px; text-wrap: pretty; } .faq__q[aria-expanded='true'] + .faq__a { max-height: 360px; opacity: 1; } /* ── CTA final ──────────────────────────────────────────── */ .finale { position: relative; padding: clamp(80px, 11vw, 130px) clamp(20px, 5vw, 40px) 0; display: flex; justify-content: center; } .finale__card { position: relative; width: 100%; max-width: 1120px; border-radius: clamp(28px, 4vw, 40px); overflow: hidden; background: linear-gradient(160deg, var(--cream) 0%, #fff8f3 45%, #fff 100%); padding: clamp(52px, 9vw, 88px) clamp(24px, 5vw, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; } .finale__orb { position: absolute; top: -30%; left: 50%; width: min(520px, 120vw); aspect-ratio: 1; transform: translate(-50%, 0); border-radius: 50%; background: radial-gradient( circle, rgba(238, 104, 32, 0.14) 0%, rgba(238, 104, 32, 0) 70% ); will-change: transform; animation: clean-orb 30s ease-in-out infinite 2s; pointer-events: none; } .finale h2 { position: relative; font-size: clamp(30px, 6.4vw, 44px); letter-spacing: -0.045em; line-height: 1.1; max-width: 720px; text-wrap: balance; } .finale__lead { position: relative; margin-top: 16px; font-size: clamp(15.5px, 3.6vw, 18px); color: var(--muted); letter-spacing: -0.01em; max-width: 520px; text-wrap: pretty; } .finale__chip { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid #efeae6; } .finale__chip img { width: 20px; height: 20px; display: block; flex: none; } .finale__chip span { font-size: clamp(12.5px, 3vw, 13.5px); color: var(--muted); letter-spacing: -0.01em; text-align: left; } .finale .btn { position: relative; width: 100%; max-width: 280px; height: 54px; margin-top: 28px; } /* ── Footer ─────────────────────────────────────────────── */ .footer { position: relative; padding: clamp(64px, 9vw, 100px) clamp(20px, 5vw, 40px) 48px; display: flex; justify-content: center; } /* El ancho lo fija el contenedor, no cada hijo: si `__inner` y `__legal` llevan su propio max-width, uno queda centrado y el otro pegado a la izquierda y el pie se ve desalineado con el resto de la página. */ .footer__wrap { width: 100%; max-width: 1120px; } .footer__inner { width: 100%; border-top: 1px solid var(--line-4); padding-top: 36px; display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; align-items: flex-start; } .footer__brand { display: flex; flex-direction: column; gap: 10px; flex: 1 1 260px; } .footer__brand img { height: 24px; width: auto; align-self: flex-start; display: block; } .footer__brand span { font-size: 13.5px; color: var(--muted-3); } .footer__brand .mono { color: var(--muted-4); } .footer__cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 8vw, 72px); } .footer__col { display: flex; flex-direction: column; gap: 10px; } .footer__col b { font-size: 11px; color: var(--muted-3); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; } .footer__col a { font-size: 14px; color: var(--ink-70); transition: color 0.2s ease; } .footer__col a:focus-visible { color: var(--orange); } @media (hover: hover) and (pointer: fine) { .footer__col a:hover { color: var(--orange); } } .footer__legal { width: 100%; margin: 28px 0 0; font-size: 12px; color: var(--muted-4); } /* ── Reveals ──────────────────────────────────────────────── El estado inicial lo pone landing.js y no el CSS: si el JS no corre (o falla), el contenido queda visible en vez de invisible. */ [data-r] { will-change: opacity, transform; } .js [data-r] { opacity: 0; transition: opacity 0.68s var(--ease), transform 0.8s var(--ease); } .js [data-r='up'] { transform: translateY(28px); } .js [data-r='scale'] { transform: translateY(24px) scale(0.975); } .js [data-r].is-in { opacity: 1; transform: none; } .js [data-lift].is-in { transition: opacity 0.68s var(--ease), transform 0.4s var(--ease); } @media (hover: hover) { .js [data-lift].is-in:hover { transform: translateY(-6px); } } /* ── Keyframes ──────────────────────────────────────────── */ @keyframes clean-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes clean-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.35; } } @keyframes clean-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1.2deg); } } @keyframes clean-drift-a { 0%, 100% { transform: translate(0, 0) scale(1, 1); } 25% { transform: translate(150px, -90px) scale(1.2, 0.86); } 50% { transform: translate(60px, 90px) scale(0.86, 1.2); } 75% { transform: translate(-120px, 30px) scale(1.14, 0.94); } } @keyframes clean-drift-b { 0%, 100% { transform: translate(0, 0) scale(1, 1); } 30% { transform: translate(-140px, 70px) scale(0.88, 1.18); } 60% { transform: translate(-60px, -80px) scale(1.2, 0.88); } 85% { transform: translate(90px, 50px) scale(1.02, 1.06); } } @keyframes clean-orb { 0%, 100% { transform: translate(-50%, 0) scale(1, 1); } 20% { transform: translate(-26%, 7%) scale(1.2, 0.84); } 40% { transform: translate(-38%, 18%) scale(0.86, 1.2); } 60% { transform: translate(-72%, 12%) scale(1.16, 0.9); } 80% { transform: translate(-64%, -4%) scale(0.92, 1.14); } } @keyframes clean-travel { 0% { left: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes clean-ring { 0% { transform: scale(0.8); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } } /* ── Accesibilidad: movimiento reducido ───────────────────── Se apagan las animaciones decorativas y los reveals quedan siempre visibles (landing.js tampoco los engancha). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } .js [data-r] { opacity: 1; transform: none; } } /* ── La salida hacia el alta ────────────────────────────────────────────── `landing.js` pone esta clase al tocar un CTA y navega 190 ms después: el fundido tapa el corte a blanco que hace el navegador al cambiar de documento. Para quien pidió menos movimiento, no hay fundido — solo la espera, que es imperceptible. */ html.clean-saliendo body { opacity: 0; transition: opacity 190ms ease-out; } @media (prefers-reduced-motion: reduce) { html.clean-saliendo body { transition: none; opacity: 1; } } /* ── El marco de MacBook ──────────────────────────────────── Mismo patrón que el teléfono: el marco es una imagen con el hueco de la pantalla transparente y va ENCIMA del contenido. Los cuatro porcentajes de .macbook__pantalla no son a ojo: salen de medir el alfa del PNG original (3967x2400). El hueco arranca en x=382 y=71 y mide 3203x2072, que da 16:10 con el notch adentro. Si algún día se cambia el marco, hay que volver a medirlo: con estos números puestos a mano, un marco distinto descalza el contenido sin que nada falle. El asset va en AVIF y no en PNG porque el PNG del laptop pesa 232 KB y el AVIF 20 KB con el mismo alfa — menos que el marco del teléfono. Sin AVIF (Safari anterior a 16.4) no se dibuja el marco y queda el navegador flotando, que se degrada razonable. */ .macbook { position: relative; width: 100%; aspect-ratio: 3967/2400; } .macbook__pantalla { position: absolute; left: 9.629%; top: 2.958%; width: 80.741%; height: 86.333%; overflow: hidden; background: #16181c; display: flex; flex-direction: column; } .macbook__marco { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* El panel va a sangre en la pantalla, sin chasis de navegador: el marco del laptop ya dice "esto es una pantalla", y una barra de URL adentro sería chrome sobre chrome. El notch cae sobre los 40px de padding superior del panel, que están vacíos. */ .macbook .shot--panel { flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: auto; } /* ══ Mockups del producto ═══════════════════════════════════ Las pantallas de Clean dibujadas en HTML, no capturadas. Antes acá iban tres .webp (panel-agenda, app-reserva, app-calendario) que mostraban el diseño v1: Poppins, sidebar de 7 tabs y el flujo de reserva en un solo acordeón. Quedaron desactualizadas sin que nadie se enterara, porque una imagen no se rompe cuando el producto cambia: simplemente miente. Los valores salen de styles/tokens.css, components/sitio/*.scss y components/admin/*.scss. Si cambia una pantalla, se edita acá. Cómo escalan: cada mockup se dibuja a su tamaño real (1440px el panel, 452px el celular) y se encoge con `scale` sobre un contenedor de consulta. Así los números de arriba son los mismos que los del código y no hay que recalcular nada al reacomodar. ═══════════════════════════════════════════════════════════ */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2-variations'); } .shot { container-type: inline-size; position: relative; overflow: hidden; background: #f7f6f4; } .shot__inner { position: absolute; top: 0; left: 0; transform-origin: top left; } .shot--panel { aspect-ratio: 1440/900; } .shot--panel .shot__inner { width: 1440px; scale: calc(100cqw / 1440px); } .shot--tel { flex: 1 1 auto; min-height: 0; } .shot--tel .shot__inner { width: 452px; scale: calc(100cqw / 452px); } .mk { font-family: 'Manrope', 'Geist', system-ui, sans-serif; line-height: normal; color: #1a1917; --ac: #ee6820; --ac-rgb: 238, 104, 32; --ac-ink: #b54f18; --ac-on: #fff; } .mk .mk-i { display: block; flex: none; } /* ── Panel ── */ /* El alto sale de la pantalla del laptop: 3203x2072 da 1,5459, y 1440/1,5459 son 931,4. Se usa 932 y no 931 porque con 931 falta un tercio de pixel y asoma una línea del fondo oscuro abajo; con 932 sobra y recorta, que no se nota. Si se cambia el marco, este número se recalcula con el de la pantalla. */ .mk-panel { width: 1440px; height: 932px; display: flex; background: #f1f0ee; overflow: hidden; } .mk-aside { width: 286px; flex: none; padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 28px; background: #f1f0ee; overflow: hidden; } .mk-marca { display: flex; align-items: center; gap: 14px; padding: 0 8px; min-height: 46px; } .mk-marca__logo { width: 46px; height: 46px; flex: none; border-radius: 15px; background: var(--ac); color: var(--ac-on); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; } .mk-marca__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mk-marca__nombre { font-size: 15px; font-weight: 800; } .mk-marca__rotulo { font-size: 12px; font-weight: 600; color: #8d8a86; } .mk-riel { width: 32px; height: 32px; flex: none; margin-left: auto; border-radius: 999px; background: #e8e7e4; color: #57544f; display: flex; align-items: center; justify-content: center; } .mk-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; } .mk-buscarNav { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 10px; padding: 11px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #e8e7e4, 0 1px 2px rgba(17,17,17,0.03); color: #b0ada9; font-size: 14px; font-weight: 600; } .mk-raiz { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 12px 14px; border-radius: 16px; color: #a8a5a1; font-size: 16px; font-weight: 600; } .mk-raizIcono { position: relative; display: flex; flex: none; } .mk-raizTxt { flex: 1; min-width: 0; } .mk-chevron { color: #a8a5a1; } .mk-chevron--abierto { transform: rotate(180deg); } .mk-globo { position: absolute; top: -7px; right: -9px; display: inline-flex; align-items: center; justify-content: center; min-width: 11px; height: 15px; padding: 0 3px; border-radius: 999px; border: 2px solid #f1f0ee; font-size: 10px; font-weight: 800; line-height: 1; } .mk-globo--neutro { background: #1a1917; color: #fff; } .mk-globo--alerta { background: #fbdcc0; color: #8a5a34; } .mk-hijas { padding: 6px 0 10px 26px; display: flex; flex-direction: column; } .mk-hija { position: relative; min-height: 41px; margin-left: 18px; width: calc(100% - 18px); padding: 10px 14px; border-radius: 14px; color: #a8a5a1; font-size: 15px; font-weight: 600; } .mk-hija::before { content: ''; position: absolute; left: -18px; top: -2px; bottom: -2px; width: 1px; background: #dcdad6; } .mk-hija:first-child::before { top: 0; } .mk-hija:last-child::before { bottom: auto; height: calc(50% + 2px); } .mk-hija::after { content: ''; position: absolute; left: -18px; top: 50%; width: 14px; height: 1px; background: #dcdad6; } .mk-hija--activa { background: #e8e7e4; color: #1a1917; } .mk-pie { position: relative; padding-top: 26px; } .mk-impulsado { position: absolute; top: 0; left: 10px; right: 10px; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px 20px; border-radius: 16px 16px 8px 8px; background: #e8e7e4; } .mk-impulsado span { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #57544f; } .mk-impulsado b { font-size: 12px; font-weight: 800; letter-spacing: -0.03em; color: #57544f; opacity: 0.85; } .mk-sitio { position: relative; z-index: 1; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .mk-sitio__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .mk-sitio__titulo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; } .mk-sitio__titulo .mk-i { color: var(--ac-ink); } .mk-sitio__estado { padding: 2px 8px; border-radius: 999px; background: #d8efdf; color: #3f6b4f; font-size: 11px; font-weight: 800; } .mk-sitio__url { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .mk-sitio__host { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: #8d8a86; } .mk-sitio__acciones { display: flex; align-items: stretch; gap: 8px; } .mk-sitio__visitar { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--ac); color: var(--ac-on); font-size: 14px; font-weight: 700; } .mk-sitio__ajustes { display: flex; align-items: center; padding: 4px 10px; border-radius: 16px; color: #a8a5a1; font-size: 11px; font-weight: 700; } .mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 40px 44px 0; background: #f7f6f4; border-radius: 36px 0 0 36px; box-shadow: -1px 0 0 #e6e4e0; overflow: hidden; } .mk-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 36px; } .mk-header__txt { flex: 1; min-width: 0; } .mk-h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; } .mk-h1 span { color: #b0ada9; } .mk-header__bajada { margin: 10px 0 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: #8d8a86; } .mk-header__acc { display: flex; align-items: center; gap: 12px; flex: none; } .mk-nuevo { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 16px; background: var(--ac); color: var(--ac-on); font-size: 14px; font-weight: 700; } .mk-buscar { display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 16px; background: #fff; color: #8d8a86; box-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 12px 24px -18px rgba(17,17,17,0.4); } .mk-campana { width: 44px; height: 44px; border-radius: 16px; background: var(--ac); color: var(--ac-on); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px var(--ac); } .mk-usuario { display: flex; align-items: center; gap: 10px; height: 44px; padding: 6px 10px 6px 6px; border-radius: 18px; background: #fff; } .mk-usuario__av { width: 32px; height: 32px; border-radius: 12px; background: #e3e2e0; color: #57544f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .mk-usuario__txt { display: flex; flex-direction: column; } .mk-usuario__nom { font-size: 13px; font-weight: 700; } .mk-usuario__rol { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a8a5a1; } .mk-agenda { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; } .mk-agenda__barra { background: #fff; border-bottom: 1px solid #eceae7; } .mk-meses { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; } .mk-mes { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 13px; background: #f4f3f1; font-size: 13.5px; font-weight: 800; } .mk-rango { font-size: 13px; color: #8d8a86; } .mk-chipSemana { padding: 6px 11px; border-radius: 9px; background: #d8efdf; color: #3f6b4f; font-size: 11px; font-weight: 800; } .mk-diaActual { margin-left: auto; font-size: 13.5px; font-weight: 800; } .mk-semana { display: flex; align-items: center; gap: 4px; padding: 0 16px 12px; } .mk-flecha { width: 32px; height: 32px; flex: none; border-radius: 8px; color: #a8a5a1; display: flex; align-items: center; justify-content: center; } .mk-sdias { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .mk-sdia { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; } .mk-slabel { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #a8a5a1; } .mk-snum { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; } .mk-sdia--elegido .mk-snum { background: var(--ac); color: var(--ac-on); } .mk-sdia--elegido .mk-slabel { color: var(--ac-ink); } .mk-sdia--hoy .mk-snum { color: var(--ac-ink); box-shadow: inset 0 0 0 1.5px rgba(var(--ac-rgb), 0.45); } .mk-sdia--cerrado .mk-snum { color: #dcdad6; text-decoration: line-through; text-decoration-thickness: 1px; } .mk-sdia--cerrado .mk-slabel { color: #dcdad6; } .mk-scroll { flex: 1; min-height: 0; overflow: hidden; background: #f7f6f4; display: flex; flex-direction: column; } .mk-cabecera { display: flex; flex: none; background: #fff; border-bottom: 1px solid #eceae7; box-shadow: 0 1px 2px rgba(17,17,17,0.04); } .mk-esquina { width: 64px; flex: none; background: #fff; border-right: 1px solid #eceae7; } .mk-prof { flex: 1; min-width: 164px; display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-left: 1px solid #eceae7; } .mk-prof__avatar { width: 34px; height: 34px; flex: none; border-radius: 999px; background: #fdede4; color: var(--ac-ink); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; } .mk-prof__txt { min-width: 0; display: flex; flex-direction: column; } .mk-prof__nombre { font-size: 13px; font-weight: 700; } .mk-prof__horario { margin-top: 1px; font-size: 11px; font-weight: 600; color: #8d8a86; } /* La agenda arranca a las 08:00; el mockup la muestra corrida una hora, como la ve alguien que ya scrolleó hasta el primer turno. */ .mk-desplazado { margin-top: -120px; } .mk-cuerpo { display: flex; height: 840px; } .mk-eje { width: 64px; flex: none; position: relative; background: #fff; border-right: 1px solid #eceae7; } .mk-tick { position: absolute; width: 100%; padding-right: 8px; text-align: right; line-height: 1; } .mk-tick--hora { font-size: 11px; font-weight: 800; color: #57544f; } .mk-tick--cuarto { font-size: 9px; font-weight: 600; color: #a8a5a1; } .mk-columnas { position: relative; flex: 1; min-width: 0; display: flex; } .mk-col { flex: 1; min-width: 164px; position: relative; border-left: 1px solid #eceae7; } .mk-linea { position: absolute; left: 0; right: 0; border-bottom: 1px solid #eceae7; } .mk-linea--hora { border-bottom-color: #dcdad6; } .mk-ahora { position: absolute; left: 0; right: 0; top: 640px; z-index: 20; border-bottom: 2px solid #b4342a; } .mk-ahora i { position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 999px; background: #b4342a; } .mk-turno { position: absolute; left: 4px; right: 4px; z-index: 10; padding: 4px 6px; border-radius: 8px; border-left: 3px solid var(--svc); background-color: var(--svc-fondo); color: var(--svc-texto); box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; } .mk-turno__linea { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; } .mk-turno__horas { font-size: 10px; font-weight: 800; line-height: 1.15; white-space: nowrap; } .mk-turno__estados { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .mk-turno__texto { display: block; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--svc-nombre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-turno__servicio { display: block; font-size: 10px; font-weight: 500; line-height: 1.2; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-turno--completa .mk-turno__texto { margin-top: 2px; font-size: 11px; font-weight: 800; } .mk-fab { position: absolute; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 999px; background: var(--ac); color: var(--ac-on); font-size: 15px; font-weight: 700; box-shadow: 0 12px 28px -10px rgba(20,18,16,0.5); } /* ── Celular: chasis común ── */ /* El alto sale de la pantalla del teléfono, igual que en .mk-panel: con los recortes actuales el área visible mide 973px en las coordenadas del mockup (se dibuja a 452px de ancho y se escala). Se usan 975 para que sobre y no falte; los 2px de más se los come el padding del CTA. Los 900px de antes estaban calibrados para cuando la barra de estado era una franja en flujo y se comía 6,6% del alto. Al pasarla a superpuesta, la captura creció y quedaban 73px de fondo abajo, con el botón "Reservar turno" flotando por encima del borde. Si cambian los insets de .phone__screen o el marco, este número se recalcula. */ .mk-tel { width: 452px; min-height: 975px; display: flex; flex-direction: column; background: #f7f6f4; overflow: hidden; } .mk-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; } .mk-volver { width: 38px; height: 38px; flex: none; border: 1px solid #e8e7e4; border-radius: 13px; background: #fff; display: flex; align-items: center; justify-content: center; } .mk-cabTxt { flex: 1; min-width: 0; } .mk-cabTitulo { font-size: 17px; font-weight: 800; letter-spacing: -0.028em; } .mk-cabBajada { margin: 3px 0 0; font-size: 11.5px; font-weight: 700; color: #a8a5a1; } .mk-contador { display: flex; align-items: baseline; gap: 1px; flex: none; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid #e8e7e4; font-size: 10.5px; font-weight: 800; color: #b0ada9; } .mk-contador b { font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: var(--ac-ink); } .mk-progreso { display: flex; gap: 6px; padding: 14px 16px 0; } .mk-paso { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .mk-tramo { width: 100%; height: 3.5px; border-radius: 999px; background: #eceae7; } .mk-paso--actual .mk-tramo { background: var(--ac); } .mk-pasoNombre { display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: #b0ada9; } .mk-paso--actual .mk-pasoNombre { font-weight: 800; color: var(--ac-ink); } .mk-cuerpoTel { flex: 1; padding: 18px 16px 24px; } .mk-lista { background: #fff; border-radius: 24px; padding: 6px; box-shadow: 0 1px 2px rgba(17,17,17,0.045), 0 20px 40px -32px rgba(17,17,17,0.4); } .mk-fila { display: flex; align-items: center; gap: 13px; padding: 16px 14px; border-radius: 18px; } .mk-fila--linea { border-bottom: 1px solid #f1f0ee; border-radius: 18px 18px 6px 6px; } .mk-fila--elegida { background: rgba(var(--ac-rgb), 0.09); box-shadow: inset 0 0 0 1.5px rgba(var(--ac-rgb), 0.38); } .mk-marcaRadio { width: 23px; height: 23px; flex: none; border-radius: 999px; border: 1.5px solid #dcdad6; color: #fff; display: flex; align-items: center; justify-content: center; } .mk-marcaRadio--on { background: var(--ac); border-color: var(--ac); } .mk-filaCuerpo { flex: 1; min-width: 0; } .mk-filaLinea { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .mk-filaTitulo { font-size: 14.5px; font-weight: 700; letter-spacing: -0.018em; } .mk-fila--elegida .mk-filaTitulo { font-weight: 800; } .mk-badge { padding: 2px 7px; border-radius: 7px; background: rgba(var(--ac-rgb), 0.12); color: var(--ac-ink); font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .mk-filaMeta { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: #a8a5a1; } .mk-filaPrecio { flex: none; font-size: 15px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; } .mk-fila--elegida .mk-filaPrecio { color: var(--ac-ink); } .mk-barra { margin-top: auto; padding: 24px 16px 20px; background: #f7f6f4; } .mk-resumen { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; padding: 0 6px; } .mk-resumenElegido { font-size: 12px; font-weight: 700; color: #a8a5a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-resumenPrecio { font-size: 14.5px; font-weight: 800; letter-spacing: -0.025em; } .mk-siguiente { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px; border-radius: 19px; background: var(--ac); color: var(--ac-on); font-size: 15.5px; font-weight: 800; letter-spacing: -0.015em; box-shadow: 0 14px 28px -16px rgba(var(--ac-rgb), 0.8); } /* ── Celular: sitio del negocio ── */ .mk-hero { position: relative; height: 420px; flex: none; display: flex; flex-direction: column; background: var(--ac); overflow: hidden; } .mk-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; } /* El desenfoque de la mitad de abajo: lo que hace legible el nombre del negocio sobre cualquier foto. Va como una SEGUNDA copia de la foto con `filter`, no como `backdrop-filter` sobre una caja vacía como en la app. El motivo es el escalado: el mockup se dibuja a 452px y se encoge a ~220px, y `backdrop-filter` se resuelve en espacio de pantalla —o sea, después del `scale`—, así que los 9px del diseño se veían como el doble. `filter` se aplica en el sistema de coordenadas del elemento, antes del transform, y encoge junto con él. El scale(1.08) esconde el borde blando que deja el blur fuera del recorte. */ .mk-hero__foto--blur { filter: blur(9px); transform: scale(1.08); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.5) 71%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.5) 71%, rgba(0,0,0,1) 100%); } .mk-hero__velo { position: absolute; inset: 0; background: linear-gradient(178deg, rgba(20,18,16,0.30) 0%, rgba(20,18,16,0.02) 30%, rgba(20,18,16,0.42) 70%, rgba(20,18,16,0.72) 100%); } /* El padding de arriba deja lugar a la barra de estado, que ahora se dibuja encima de la foto. La cuenta: la barra mide 6,6% del alto de la pantalla, la pantalla tiene relación 0,4657 y el mockup se dibuja a 452px de ancho, así que 0,066 x (452 / 0,4657) = 64px, más 14 de aire. */ .mk-hero__barra { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 78px 16px 0; } /* En el sitio real este chip es blanco al 14% con `backdrop-filter: blur`, y es el desenfoque el que lo hace legible. Acá el blur no sirve —se resuelve en espacio de pantalla, o sea después del scale del mockup, y saldría al doble—, así que el contraste lo tiene que dar el relleno: sobre una portada clara, el 14% blanco desaparecía. */ .mk-chipEstado { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(20,18,16,0.34); border: 1px solid rgba(255,255,255,0.26); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff; } .mk-chipEstado i { width: 6px; height: 6px; border-radius: 999px; background: #8ad3a5; } .mk-botonClaro { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,0.94); font-size: 12px; font-weight: 800; letter-spacing: -0.01em; } .mk-hero__pie { position: relative; z-index: 1; margin-top: auto; padding: 0 20px 40px; } .mk-hero__logo { width: 58px; height: 58px; border-radius: 18px; background: #fff; color: var(--ac-ink); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; letter-spacing: -0.04em; box-shadow: 0 12px 26px -14px rgba(0,0,0,0.8); } .mk-hero__nombre { margin: 14px 0 0; font-size: 31px; font-weight: 800; line-height: 1.03; letter-spacing: -0.042em; color: #fff; } .mk-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.72); } .mk-hero__resena { display: flex; align-items: center; gap: 4px; } .mk-hero__resena .mk-i { color: var(--ac); } .mk-hero__resena b { font-weight: 700; color: #fff; } .mk-hero__punto { width: 3px; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.4); } .mk-hero__fuente { font-weight: 800; color: rgba(255,255,255,0.92); } .mk-urgencia { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin: -18px 16px 0; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(17,17,17,0.05), 0 22px 40px -30px rgba(17,17,17,0.5); } .mk-urgencia__icono { width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(var(--ac-rgb), 0.12); color: var(--ac-ink); display: flex; align-items: center; justify-content: center; } .mk-urgencia__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mk-urgencia__titulo { font-size: 13.5px; font-weight: 800; letter-spacing: -0.015em; } .mk-urgencia__pie { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #a8a5a1; } .mk-urgencia__btn { flex: none; display: flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 13px; background: var(--ac); color: var(--ac-on); font-size: 12.5px; font-weight: 800; } .mk-rapidas { display: flex; gap: 8px; padding: 14px 16px 0; } .mk-rapida { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 40px; padding: 0 14px; border: 1px solid #eceae7; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; } .mk-rapida .mk-i { color: var(--ac-ink); } .mk-seccion { padding: 26px 16px 0; } .mk-rotulo { display: block; margin-bottom: 11px; padding: 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #a8a5a1; } .mk-listaSitio { background: #fff; border-radius: 24px; padding: 5px; box-shadow: 0 1px 2px rgba(17,17,17,0.045), 0 20px 40px -32px rgba(17,17,17,0.4); } .mk-filaSitio { display: flex; align-items: center; gap: 12px; padding: 15px 13px; border-radius: 19px; } .mk-filaSitio .mk-filaTitulo { letter-spacing: -0.015em; } .mk-filaSitio .mk-filaMeta { font-size: 12px; letter-spacing: 0; } .mk-filaSitio .mk-filaPrecio { letter-spacing: -0.025em; } .mk-filaFlecha { flex: none; color: #cdcac5; } /* El padding de abajo replica el del sitio real, que es `calc(20px + env(safe-area-inset-bottom))`. En un iPhone con barra de inicio ese env vale 34pt, y el mockup se dibuja a 452px para una pantalla de 393pt (x1,15), así que son 39px de mockup: 20 + 39 = 59. Sin eso el botón terminaba pegado al bisel, porque acá no hay `env` que valga: el "teléfono" es una imagen. */ .mk-ctaFijo { margin-top: auto; padding: 24px 16px 59px; background: #f7f6f4; } .mk-ctaFijo__btn { display: flex; align-items: center; justify-content: center; padding: 18px; border-radius: 19px; background: var(--ac); color: var(--ac-on); font-size: 15.5px; font-weight: 800; letter-spacing: -0.015em; box-shadow: 0 14px 28px -16px rgba(var(--ac-rgb), 0.8); } /* Abajo de 900px se van los teléfonos y las tarjetas flotantes, pero el laptop se queda entero: es el mockup que pidió el diseño y recortarlo se veía peor que tenerlo chico. Se probó sangrarlo por la derecha para ganar escala y quedaba mal: a 375px entraba el 57% del panel, y ese 57% es casi todo sidebar con la agenda cortada al medio y un tajo recto sin esquina ni sombra. A esta escala el texto de la agenda no se lee — es un device shot, se lee la forma, no el contenido. Para leer el producto están las capturas de las secciones de abajo. */ @media (max-width: 899px) { .macbook { /* el laptop puede pasarse del ancho de la sección: gana 12% de escala y el recorte queda simétrico, que lee como encuadre y no como error */ width: 112%; margin-left: -6%; } }