/* =========================================================================== Kaphiy — sitio oficial (kaphiy.app) CSS único del sitio. Sin build step, sin preprocesador. Orden del archivo: 1. Tokens 6. Sección: Qué es Kaphiy 2. Reset y base 7. Sección: Features 3. Utilidades 8. Sección: Free vs. Premium 4. Header / nav 9. Sección: FAQ 5. Sección: Hero 10. Sección: Descarga 11. Footer 12. Breakpoints (≤1200, ≤1000, ≤760, ≤600, ≤560, ≤420) 13. prefers-reduced-motion Breakpoints: el layout base está escrito para desktop y se reduce en los media queries del bloque 12. Los tres anchos de referencia validados son 375px (mobile), 768px (tablet) y 1440px (desktop). =========================================================================== */ /* ---------------------------------------------------------------- 1. TOKENS */ :root { /* Paleta de marca — espejo de lib/theme/app_colors.dart de la app */ --creamy-latte: #F3E9D7; --caramel-roast: #B08968; --mocha-bean: #7A553A; --espresso-shot: #3B2A22; --footer-dark: #2E2019; /* Variación tostada del fondo, solo para la sección de planes */ --toasted-latte: #EADFC8; /* Tipografías */ --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-hand: "Caveat", "Segoe Script", cursive; /* Layout */ --container: 1200px; --gutter: 24px; --header-h: 68px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; /* Sombras */ --shadow-soft: 0 4px 16px rgba(59, 42, 34, .10); --shadow-lift: 0 10px 26px rgba(59, 42, 34, .18); --shadow-card: 0 14px 40px rgba(59, 42, 34, .22); /* Curvas */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-pop: cubic-bezier(.34, 1.42, .48, 1); } /* ------------------------------------------------------------ 2. RESET/BASE */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Evita que el header sticky tape el destino de los links ancla */ scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--creamy-latte); color: var(--espresso-shot); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Los mockups de teléfono van inclinados y su caja rotada es más ancha que la declarada; sin esto el viewport podría ganar scroll horizontal en anchos intermedios. `clip` en vez de `hidden`: `hidden` convertiría a en contenedor de scroll y eso rompe el position:sticky del header. La primera línea queda como fallback para navegadores sin soporte de `clip`. */ overflow-x: hidden; overflow-x: clip; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.2; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--mocha-bean); outline-offset: 3px; border-radius: 4px; } /* ----------------------------------------------------------- 3. UTILIDADES */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Sprite SVG: presente en el DOM, nunca visible */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Todos los íconos del sprite son de trazo, salvo los marcados como filled */ svg use { pointer-events: none; } .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* El glifo de "play" del CTA es sólido, no de trazo */ .sprite-filled path { fill: currentColor; stroke: none; } .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; } /* Etiqueta chica en mayúsculas que abre cada sección */ /* El letter-spacing baja de .16em a .12em al subir el cuerpo: en versalitas, el tracking ancho compensa la falta de altura, y a 15px ya sobra —dejarlo en .16em desarmaba la palabra en letras sueltas—. */ .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--caramel-roast); margin-bottom: 14px; } .eyebrow-center { text-align: center; } .section-title { font-size: 36px; text-align: center; margin-bottom: 56px; } /* --- Botones --- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; border: 0; border-radius: var(--radius-sm); padding: 14px 20px; cursor: pointer; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .22s var(--ease-out); } .btn .icon { font-size: 17px; } .btn-dark { background: var(--espresso-shot); color: var(--creamy-latte); } .btn-light { background: var(--creamy-latte); color: var(--espresso-shot); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-soft); } .btn-lg { font-size: 16px; padding: 16px 26px; } .btn-sm { font-size: 13.5px; padding: 10px 15px; border-radius: 10px; } /* --- Badge oficial de Google Play --- Se usa tal cual viene de play.google.com/intl/es/badges/: la marca no admite recolorearlo, recortarlo, cambiarle la tipografía ni ponerle un fondo. Lo único que se le aplica es el tamaño y el mismo hover de los botones, que es del enlace y no del arte. El PNG ya trae el área de resguardo obligatoria alrededor del botón, así que el botón visible es algo más chico que la caja —por eso 220px de caja y no los ~180px que mide el botón—. */ .badge-play { display: inline-block; width: 220px; transition: transform .22s var(--ease-out); } .badge-play img { display: block; width: 100%; height: auto; } @media (hover: hover) and (pointer: fine) { .badge-play:hover { transform: translateY(-2px); } } /* --- Animación de entrada al cargar (solo el hero) --- El estado oculto va condicionado a la clase .js del , igual que el reveal por scroll: sin esa guarda, si el JS no corre la clase .is-loaded nunca se agrega y el hero entero se queda invisible. */ .js .anim-in { opacity: 0; transform: translateY(18px); } .js .is-loaded .anim-in { animation: fade-up .7s var(--ease-out) forwards; animation-delay: var(--anim-delay, 0s); } @keyframes fade-up { to { opacity: 1; transform: translateY(0); } } /* --- Reveal por scroll (IntersectionObserver, ver main.js) --- El estado oculto está condicionado a la clase .js del , que agrega un script inline en el . Si el JS no corre (error, bloqueado, navegador viejo), la clase nunca se agrega y el contenido se muestra normalmente: nunca puede quedar una sección invisible por culpa de la animación. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0s); } .js [data-reveal][data-reveal-from="left"] { transform: translateX(-40px); } .js [data-reveal][data-reveal-from="right"] { transform: translateX(40px); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* --------------------------------------------------------- 4. HEADER / NAV */ .site-header { position: sticky; top: 0; z-index: 100; /* Barra oscura sobre el crema de la página. Semitransparente + blur para que el contenido que pasa por debajo se insinúe sin llegar a leerse. */ background: rgba(59, 42, 34, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); } .site-header.is-stuck { /* Con la barra oscura, el borde que la despega al hacer scroll tiene que ser claro: el caramelo de antes se perdía contra el espresso. */ border-bottom-color: rgba(243, 233, 215, .16); box-shadow: 0 4px 18px rgba(59, 42, 34, .28); } .nav { height: var(--header-h); display: flex; align-items: center; gap: 20px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 500; font-size: 23px; letter-spacing: -.01em; /* Crema tanto en el navbar como en el footer: los dos son oscuros. */ color: var(--creamy-latte); } /* --- Glifo de marca --- El glifo viene en negro puro sobre transparente y se usa como MÁSCARA, no como imagen: el color lo pone background-color, así el mismo archivo sirve sobre el crema, sobre el espresso del navbar y sobre cualquier otro fondo sin duplicarlo. Solo se le fija el alto; el ancho sale de su aspect-ratio. Va incrustado en base64 y no como url() a un archivo, y no es por ahorrar un request: Chrome trata cada archivo local como un origen distinto y bloquea la imagen de un mask-image servido por file://, y una máscara que no carga no deja el elemento sin máscara, lo ESCONDE entero. Con el data URI no hay nada que cargar, así que el glifo se ve igual abriendo el HTML con doble clic que servido por HTTP. El archivo sigue en assets/img/brand/ como fuente: si se cambia, hay que volver a incrustarlo (base64 de ese .webp). */ :root { --glifo-marca: url("data:image/webp;base64,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"); } .brand-mark { display: inline-block; height: 30px; aspect-ratio: 906 / 1143; background-color: var(--espresso-shot); -webkit-mask: var(--glifo-marca) center / contain no-repeat; mask: var(--glifo-marca) center / contain no-repeat; } /* En la barra oscura el glifo se invierte. Es exactamente para lo que sirve usarlo como máscara: el mismo archivo, otro background-color. El del titular del hero se queda en espresso, que va sobre el crema de la sección. */ .site-header .brand-mark { background-color: var(--creamy-latte); } .nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; } .nav-links a { display: inline-block; /* El texto solo mide ~19px de alto: el padding es lo que da un área táctil usable en tablet, donde estos links todavía se muestran. */ padding: 10px 0; color: var(--creamy-latte); opacity: .82; transition: opacity .2s var(--ease-out), color .2s var(--ease-out); } .nav-links a:hover { opacity: 1; } .nav-end { display: flex; align-items: center; gap: 14px; margin-left: auto; } /* Cuando los links de ancla existen, ellos ya empujaron; el bloque final no debe volver a empujar o se separa demasiado. */ .nav-links + .nav-end { margin-left: 24px; } /* --- Selector de idioma --- */ .lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; /* .39 y no menos: el contorno de un componente de UI necesita 3:1, y a .34 el crema sobre el espresso de la barra se quedaba en 2.66:1. */ border: 1px solid rgba(243, 233, 215, .39); border-radius: 999px; } .lang-pill { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; padding: 5px 10px; border-radius: 999px; color: var(--creamy-latte); user-select: none; } /* El idioma activo se invierte: crema sólido con el texto en espresso. Sobre la barra oscura es lo que más se despega, y deja los otros dos como secundarios sin necesidad de otro color. */ .lang-pill.is-active { background: var(--creamy-latte); color: var(--espresso-shot); } /* El idioma que SÍ tiene página es un . Sin esto no se distinguiría en nada de la pastilla inactiva de al lado, que es un muerto: el cursor lo delata al pasar por encima, pero el fondo lo dice antes. */ a.lang-pill:hover, a.lang-pill:focus-visible { background: rgba(243, 233, 215, .18); } .site-footer a.lang-pill:hover, .site-footer a.lang-pill:focus-visible { background: rgba(59, 42, 34, .12); } /* PT: presente pero todavía sin página detrás */ .lang-pill.is-disabled { /* .58 y no menos: por debajo de eso el crema sobre el espresso de la barra baja de 4.5:1 y deja de ser legible, aunque el elemento esté inactivo. */ opacity: .58; cursor: not-allowed; } /* ------------------------------------------------------------- 5. HERO */ /* Hero editorial: fondo plano de marca, el titular manda y el teléfono entra como acento a un costado. Reemplaza al concepto anterior —foto de fondo con vignette de rectángulo redondeado— que se descartó entero: con esto ya no hay máscara, ni velo, ni --fundido. */ .hero { position: relative; /* El teléfono se sale del contenedor y sangra hacia el borde: sin esto, el documento gana scroll horizontal en los anchos intermedios. `clip` y no `hidden`: hidden convertiría al hero en contenedor de scroll, que es el mismo mecanismo que ya rompió el position:sticky del header cuando se usó en . */ overflow: clip; padding: 88px 0 104px; } /* El contenedor es el bloque de referencia del teléfono, que va posicionado. container-type lo hace además contenedor de consulta, que es lo que permite dimensionar el titular contra el ancho REAL del contenido y no contra el viewport (ver .hero-title). */ .hero-inner { position: relative; display: flex; align-items: center; container-type: inline-size; /* El bloque de texto es más bajo que el teléfono, así que sin un alto mínimo el acento se saldría del hero por arriba y por abajo. Va en unidades de contenedor para que acompañe al ancho del teléfono, que se calcula igual. */ min-height: clamp(420px, 62cqi, 720px); } .hero-copy { position: relative; z-index: 1; /* Deja libre la banda derecha donde flota el teléfono. En el tramo apilado se libera (ver ≤1000px). */ max-width: 38%; } .hero-title { /* clamp contra el CONTENEDOR y no contra el viewport, por el mismo motivo que el mockup de las filas de funciones: .container está topado en 1200px, así que de 1248px de viewport para arriba el texto ya no tiene más lugar y con vw seguiría creciendo igual. La primera declaración es el equivalente en vw para navegadores sin unidades de contenedor; la segunda la pisa donde hay soporte. Las dos coinciden en el tope. */ font-size: clamp(34px, 5vw, 62px); font-size: clamp(34px, 5.4cqi, 62px); line-height: 1.08; letter-spacing: -.02em; /* Reparte las líneas en vez de dejar una huérfana corta al final. Sin
fijo: el punto de corte cambia con el ancho. */ text-wrap: balance; margin: 8px 0 22px; } /* El glifo va en línea, dimensionado en em para que acompañe al titular en cada ancho. Un inline-block vacío apoya su borde inferior en la línea base, que es donde tiene que quedar, así que no hace falta tocar vertical-align. */ .hero-mark { height: .78em; margin-right: .2em; } .hero-sub { font-size: clamp(16.5px, 1.75cqi, 20px); line-height: 1.6; color: rgba(59, 42, 34, .82); max-width: 54ch; } .hero-actions { margin-top: 36px; } .hero-note { margin-top: 12px; font-size: 13.5px; color: rgba(59, 42, 34, .6); } /* --- Marco de teléfono (componente compartido) --- Lo usan el acento del hero y las 5 filas de funciones. Las tres medidas que cambian con el tamaño del marco son variables para que la proporción del redondeo se mantenga: un radio fijo se ve desproporcionado al achicarlo. El radio de la pantalla es propio y no un calc() sobre los otros dos porque el interior de un teléfono real no es concéntrico con el exterior. */ .phone-frame { --frame-pad: 12px; --frame-radius: 42px; --screen-radius: 32px; padding: var(--frame-pad); background: var(--espresso-shot); border-radius: var(--frame-radius); box-shadow: var(--shadow-card); } .phone-screen { position: relative; height: 100%; border-radius: var(--screen-radius); overflow: hidden; background: var(--caramel-roast); } /* object-position: top — las capturas son de 1080x2280 y entran en un marco más corto: lo que importa de cada pantalla está arriba (título, foto, datos principales), así que el recorte se come el final del scroll y no el encabezado. */ .phone-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* --- El acento del hero: el abanico de polaroids alrededor del teléfono --- Vuelve la distribución original: 2 polaroids a la izquierda y 3 a la derecha, radiando desde el centro, detrás del teléfono. El sistema es el de aquella versión: cada polaroid se ancla en el centro del contenedor y de ahí se desplaza con --tx/--ty y gira con --rot. Lo que cambia respecto del original es la UNIDAD: allá los desplazamientos iban en px con topes contra vw, y había que recalcular las cinco en cada breakpoint —de ahí salieron los cortes de 1315px y 560px—. Acá van en cqi, o sea porcentaje del ancho del cluster, así que el abanico entero escala como una unidad y el único ajuste por tramo es el ancho del cluster. El abanico ocupa 1.286 veces el ancho del cluster (se sale por los dos lados, que es lo que le da el aire) y 0.93 de alto; de ahí el aspect-ratio, y por eso el cluster se corre a la izquierda del borde: lo que tiene que entrar en el viewport no es la caja sino las piezas, y de eso se encarga la suite. Ojo con los porcentajes acá adentro, que ya causaron dos regresiones: un border-radius en % resuelve el radio horizontal contra el ancho y el vertical contra el alto POR SEPARADO, así que en una caja alta la esquina sale elíptica; y un padding en % se mide contra el bloque contenedor, no contra el propio elemento. Por eso los redondeos van en cqi y el papel de la polaroid vive en .polaroid-inner, para que su padding se mida contra la polaroid. */ .hero-cluster { position: absolute; top: 50%; z-index: 0; --ancho: clamp(300px, 52%, 640px); width: var(--ancho); aspect-ratio: 1 / 0.93; right: 3%; transform: translateY(-50%); container-type: inline-size; } /* El teléfono, derecho y flotando, en el centro del abanico. Va corrido a la izquierda del centro geométrico porque el abanico no es simétrico: hay tres polaroids de un lado y dos del otro. */ .hero-phone { position: absolute; left: 50%; top: 50%; z-index: 2; width: 41.7cqi; margin-left: -7.9cqi; transform: translate(-50%, -50%); } .hero-phone .phone-frame { --frame-pad: 1.7cqi; --frame-radius: 5.8cqi; --screen-radius: 4.5cqi; aspect-ratio: 1080 / 2280; animation: phone-float 5s ease-in-out infinite; } @keyframes phone-float { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(10px); } } /* --- Las polaroids --- Las cinco en una sola capa, siempre por detrás del teléfono. Los modificadores --left/--right quedan como referencia de qué lado del abanico está cada una. */ .polaroid { position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--w); container-type: inline-size; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); } /* La entrada arranca en el centro exacto del teléfono, a escala chica, y sale hacia su posición final. El fotograma del 100% repite el transform final, así que la animación NO le borra la posición al terminar —que es justo el problema que tiene .anim-in y por el que el teléfono se descolgaba—. */ .js .polaroid { opacity: 0; } .js .is-loaded .polaroid { animation: polaroid-emerge .95s var(--ease-pop) forwards; animation-delay: var(--delay, 0s); } @keyframes polaroid-emerge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.34) rotate(0deg); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); } } /* Marco del papel: parejo arriba y a los costados, más ancho abajo para alojar la leyenda manuscrita (proporción 8/8/22/8 de una polaroid real). Va en un hijo para que el padding se mida contra el ancho de la polaroid. */ .polaroid-inner { padding: 5.4cqi 5.4cqi 0; background: var(--creamy-latte); border-radius: 2.7cqi; box-shadow: var(--shadow-lift); animation: polaroid-float var(--float-dur, 6s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); } @keyframes polaroid-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } } .polaroid-photo { display: block; width: 100%; /* height: auto es obligatorio, no cosmético: los atributos width/height del entran como presentational hints, así que sin esto el height del atributo gana sobre el aspect-ratio y la foto sale a tamaño natural. */ height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.4cqi; background: var(--caramel-roast); } .polaroid-caption { display: block; min-height: 14.7cqi; font-family: var(--font-hand); font-weight: 600; font-size: 11.3cqi; line-height: 1.25; padding: 2cqi 1.4cqi 0.7cqi; text-align: center; text-wrap: balance; color: var(--espresso-shot); } /* Disposición del abanico, en % del ancho del cluster. Las distancias y los ángulos NO son progresivos a propósito: una serie regular se lee como una grilla y no como fotos tiradas sobre la mesa. */ /* Las dos de la izquierda van más lejos del centro que las de la derecha (-44.5 y -45.5 contra +25 a +34): el teléfono no está centrado en el abanico sino corrido a la izquierda, así que de ese lado hay menos aire entre su marco y las polaroids. Con los valores del abanico original se le metían 38 y 50px por debajo. */ .p1 { --w: 20.8cqi; --tx: -44.5cqi; --ty: -15.3cqi; --rot: -18deg; --delay: .72s; --float-dur: 6.1s; --float-delay: .3s; } .p2 { --w: 23.3cqi; --tx: -45.5cqi; --ty: 22.2cqi; --rot: 10deg; --delay: .96s; --float-dur: 6.6s; --float-delay: 1.1s; } .p3 { --w: 19.0cqi; --tx: 25.4cqi; --ty: -31.9cqi; --rot: -14deg; --delay: .60s; --float-dur: 5.4s; --float-delay: 0s; } .p4 { --w: 23.6cqi; --tx: 33.8cqi; --ty: 0cqi; --rot: 20deg; --delay: .84s; --float-dur: 4.8s; --float-delay: .7s; } .p5 { --w: 19.2cqi; --tx: 26.8cqi; --ty: 33.3cqi; --rot: -8deg; --delay: 1.08s; --float-dur: 5.8s; --float-delay: 1.5s; } /* --------------------------------------------------- 6. QUÉ ES KAPHIY */ .what { padding: 40px 0 96px; } .what-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* `start` y no el `stretch` por defecto: si las tarjetas se estiraran, abrir una haría crecer a las otras dos junto con la fila. */ align-items: start; gap: 28px; max-width: 980px; margin-inline: auto; } /* Cada pilar es una tarjeta que se expande sobre sí misma. Reemplaza al tooltip flotante anterior, que podía superponerse con el eyebrow de la sección cuando se abría hacia arriba. */ .pillar { display: block; } .pillar-card { /* --mocha-bean es el tono con el que venía pintada la tarjeta Premium, y es bastante más oscuro que el caramelo que había acá: el texto oscuro que funcionaba sobre caramelo (--footer-dark, 4.96:1) se cae a 2.38:1 sobre mocha, y ningún oscuro de la paleta lo arregla —el espresso da todavía menos, 2.07:1—. Así que la tarjeta se invierte entera y pasa a texto crema, que da 5.47:1. */ background: var(--mocha-bean); border: 1px solid rgba(59, 42, 34, .18); border-radius: var(--radius-md); box-shadow: 0 16px 34px rgba(59, 42, 34, .22); padding: 34px 28px; text-align: center; color: var(--creamy-latte); transition: box-shadow .2s var(--ease-out); } .pillar-card.is-open, .pillar-card:focus-within { box-shadow: 0 24px 48px rgba(59, 42, 34, .34); } /* El disparador es un