/* ============================================================ CuidaPeques — Landing de conversión Objetivo único: descargas de la app. ============================================================ */ :root { /* Paleta de marca */ --purple-deep: #40248F; --purple: #7B4FE3; --purple-tint: #F0EBFD; --pink: #F45C87; --pink-tint: #FEEBF1; --teal: #4DC8C1; --teal-tint: #E5F8F6; --blue: #5B9FF5; --blue-tint: #E9F2FE; --yellow: #F8D978; --yellow-tint: #FEF7E4; --bg: #FCFCFE; --bg-soft: #F7F6FE; --white: #FFFFFF; --ink: #1F2740; --text: #4A5570; --mute: #8A93AC; --line: #ECEDF7; --grad: linear-gradient(135deg, #8E63EE 0%, #7B4FE3 40%, #F45C87 100%); --grad-soft: linear-gradient(135deg, #F3EEFE 0%, #FDEEF3 100%); --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-xl: 34px; --sh-sm: 0 1px 3px rgba(31, 39, 64, .05); --sh-md: 0 6px 20px rgba(64, 36, 143, .07); --sh-lg: 0 18px 44px rgba(64, 36, 143, .12); --sh-cta: 0 8px 22px rgba(123, 79, 227, .32); --maxw: 1160px; --pad: 20px; } * { box-sizing: border-box; } /* `overflow-x` va en , no en : si se pone en el body, este pasa a ser el contenedor de scroll y el evento `scroll` deja de llegar a window. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.65; padding-bottom: 78px; /* barra fija móvil */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-weight: 800; line-height: 1.16; margin: 0 0 .5em; color: var(--ink); letter-spacing: -0.02em; } h1 { font-size: clamp(2.05rem, 6.6vw, 3.45rem); } h2 { font-size: clamp(1.6rem, 5vw, 2.5rem); } h3 { font-size: 1.06rem; } p { margin: 0 0 1rem; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .section { position: relative; padding: 62px 0; } .section--soft { background: var(--bg-soft); } .section--white { background: var(--white); } .center { text-align: center; } .lead { font-size: 1.02rem; color: var(--text); max-width: 60ch; } .center .lead { margin-left: auto; margin-right: auto; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pink { color: var(--pink); } /* ---------------------------- Píldoras ---------------------------- */ .pill { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--purple); background: var(--purple-tint); border-radius: 999px; padding: 7px 15px; margin-bottom: 16px; line-height: 1.4; } .pill--grad { background: var(--grad-soft); color: var(--purple-deep); border: 1px solid rgba(123, 79, 227, .12); } /* ---------------------------- Header ---------------------------- */ .header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 64px; } .header__logo img { height: 40px; width: auto; } .header__nav { display: none; gap: 26px; } .header__nav a { font-size: .93rem; font-weight: 600; color: var(--text); transition: color .18s ease; } .header__nav a:hover { color: var(--purple); } .header .header__cta { display: none; } /* ---------------------------- Botones ---------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font); font-weight: 800; font-size: 1rem; border: none; border-radius: 999px; padding: 15px 28px; cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .btn:active { transform: translateY(1px) scale(.99); } .btn--grad { background: var(--grad); color: #fff; box-shadow: var(--sh-cta); } .btn--grad:hover { box-shadow: 0 12px 28px rgba(123, 79, 227, .42); } .btn--ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--sh-sm); } .btn--sm { padding: 10px 20px; font-size: .9rem; } .btn--block { width: 100%; } .trustline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .86rem; color: var(--mute); font-weight: 600; } .trustline span { display: inline-flex; align-items: center; gap: 6px; } .trustline svg { width: 15px; height: 15px; color: var(--teal); flex: none; } /* ---------------------------- Badges tienda ---------------------------- */ .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .badges--center { justify-content: center; } .badge { border-radius: 11px; overflow: hidden; line-height: 0; box-shadow: 0 3px 12px rgba(20, 20, 40, .16); transition: transform .18s ease, box-shadow .18s ease; } .badge:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 20, 40, .24); } .badge svg { height: 48px; width: auto; display: block; } .badge--secondary { opacity: .78; } .badge--secondary:hover { opacity: 1; } /* ---------------------------- Hero ---------------------------- */ .hero { position: relative; overflow: hidden; padding: 40px 0 56px; background: radial-gradient(90% 70% at 85% 5%, #F3EDFE 0%, rgba(243,237,254,0) 60%), radial-gradient(70% 60% at 5% 25%, #FDEEF3 0%, rgba(253,238,243,0) 55%), var(--bg); } .hero h1 { margin-bottom: 16px; } .hero__sub { font-size: 1.05rem; max-width: 33rem; } .blob { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; } /* Escenario del móvil del hero */ .stage { position: relative; width: fit-content; margin: 40px auto 0; } .stage__glow { position: absolute; inset: -6% -14%; background: radial-gradient(60% 60% at 55% 45%, rgba(139, 99, 238, .28) 0%, rgba(139, 99, 238, 0) 70%); border-radius: 50%; } .deco { position: absolute; pointer-events: none; z-index: 3; } .float { animation: float 6s ease-in-out infinite; } .float--slow { animation-duration: 8.5s; } .float--rev { animation-direction: reverse; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(5deg); } } /* ---------------------------- Maqueta de móvil ---------------------------- */ /* Todo el interior se dimensiona en `em`, así el móvil escala con --w */ .pm { --w: 232px; width: var(--w); font-size: calc(var(--w) / 27.5); aspect-ratio: 232 / 486; background: #2D1B69; border-radius: 3.4em; padding: .62em; position: relative; box-shadow: 0 22px 48px rgba(45, 27, 105, .3); flex: none; } .pm__notch { position: absolute; top: .58em; left: 50%; transform: translateX(-50%); width: 8.6em; height: 1.75em; background: #2D1B69; border-radius: 0 0 1.1em 1.1em; z-index: 4; } .pm__screen { height: 100%; background: #F5F7FF; border-radius: 2.9em; overflow: hidden; display: flex; flex-direction: column; position: relative; line-height: 1.35; } .pm__top { display: flex; align-items: center; justify-content: space-between; padding: 2.3em 1.4em .5em; flex: none; } .pm__title { font-weight: 800; color: var(--purple); font-size: 1.5em; letter-spacing: -.01em; } .pm__back { color: #2D3748; font-size: 1.4em; line-height: 1; font-weight: 700; } .pm__av { width: 2.9em; height: 2.9em; border-radius: 50%; border: .18em solid #C6A9F7; overflow: hidden; flex: none; } .pm__av img { width: 100%; height: 100%; object-fit: cover; } .pm__body { flex: 1; overflow: hidden; padding: 0 1.4em; } .pm__hi { font-weight: 800; color: var(--ink); font-size: 1.45em; margin-bottom: .1em; } .pm__q { color: #7A85A0; font-size: 1.08em; margin-bottom: 1em; } .pm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85em; } .pm__tile { border-radius: 1.5em; padding: 1em .8em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .45em; } .pm__tile b { font-size: 1.05em; font-weight: 800; color: #2D3748; } .pm__ico { font-size: 1.7em; line-height: 1; } .pm__card { background: #fff; border-radius: 1.5em; padding: 1em 1.1em; box-shadow: 0 .3em 1.2em rgba(64, 36, 143, .07); } .pm__label { font-size: .95em; color: #8A93AC; font-weight: 700; } .pm__temp { font-size: 2.1em; font-weight: 800; color: var(--pink); line-height: 1.1; } .pm__meta { font-size: .92em; color: #8A93AC; } .pm__btn { border-radius: 999px; padding: .85em; text-align: center; font-weight: 800; color: #fff; font-size: 1.05em; background: linear-gradient(135deg, #FF8FAB, #F45C87); box-shadow: 0 .4em 1em rgba(244, 92, 135, .35); } .pm__btn--orange { background: linear-gradient(135deg, #FFA95C, #F97316); box-shadow: 0 .4em 1em rgba(249, 115, 22, .32); } .pm__toggle { display: flex; background: #fff; border-radius: 999px; padding: .25em; width: 9em; margin: 0 auto 1em; box-shadow: 0 .2em .8em rgba(64, 36, 143, .08); } .pm__toggle span { flex: 1; text-align: center; font-size: .95em; font-weight: 800; padding: .35em; border-radius: 999px; color: #8A93AC; } .pm__toggle span.on { background: var(--purple); color: #fff; } .pm__nav { flex: none; display: flex; align-items: center; justify-content: space-around; background: #fff; padding: .55em .4em .8em; border-top: .08em solid #EDF0FA; position: relative; } .pm__nav i { font-style: normal; font-size: 1.3em; line-height: 1; } .pm__nav div { display: flex; flex-direction: column; align-items: center; gap: .1em; font-size: .82em; color: #A0AEC0; font-weight: 700; } .pm__nav div.on { color: var(--purple); } .pm__fab { width: 3.1em; height: 3.1em; border-radius: 50%; background: linear-gradient(135deg, #FF9FBB, #F97A9E); color: #fff; display: grid; place-items: center; font-size: 1.15em; font-weight: 700; box-shadow: 0 .35em .9em rgba(244, 92, 135, .4); margin-top: -1.5em; } /* Chips de ingredientes */ .pm__chips { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: .8em; } .pm__chip { background: #FDEEDF; color: #C2410C; border-radius: 999px; padding: .35em .8em; font-size: .92em; font-weight: 700; display: inline-flex; align-items: center; gap: .35em; } .pm__input { background: #fff; border-radius: 1.1em; padding: .7em .9em; color: #A9B1C6; font-size: .95em; margin-bottom: .8em; box-shadow: 0 .2em .7em rgba(64, 36, 143, .05); } .pm__recipe { background: #fff; border-radius: 1.2em; padding: .75em .85em; display: flex; gap: .7em; align-items: center; border-left: .28em solid #F97316; margin-bottom: .6em; box-shadow: 0 .2em .8em rgba(64, 36, 143, .06); } .pm__recipe b { display: block; font-size: 1em; color: #2D3748; font-weight: 800; line-height: 1.25; } .pm__recipe small { font-size: .85em; color: #8A93AC; } /* Síntomas */ .pm__symptoms { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-bottom: .9em; } .pm__sym { background: #fff; border-radius: 1.3em; padding: .7em .4em; text-align: center; box-shadow: 0 .2em .8em rgba(64, 36, 143, .06); display: flex; flex-direction: column; align-items: center; gap: .35em; position: relative; border: .16em solid transparent; } .pm__sym.on { border-color: var(--purple); background: #F4F0FE; } .pm__sym span { font-size: .95em; font-weight: 800; color: #2D3748; } .pm__face { width: 3.4em; height: 3.4em; border-radius: 50%; overflow: hidden; border: .16em solid #DCC9FA; position: relative; } .pm__face img { width: 100%; height: 100%; object-fit: cover; } .pm__face i { position: absolute; right: -.15em; bottom: -.15em; font-size: 1.35em; font-style: normal; line-height: 1; } .pm__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5em; } .pm__count { display: flex; align-items: center; gap: .6em; font-weight: 800; color: #2D3748; } .pm__count b { width: 1.9em; height: 1.9em; border-radius: 50%; border: .14em solid #E2E8F0; display: grid; place-items: center; font-size: .95em; color: var(--purple); } .pm__pills { display: flex; gap: .4em; } .pm__pills span { flex: 1; text-align: center; font-size: .85em; font-weight: 700; padding: .4em; border-radius: 999px; background: #fff; color: #8A93AC; border: .1em solid #E8EAF4; } .pm__pills span.on { background: var(--purple); color: #fff; border-color: var(--purple); } .pm__area { background: #fff; border-radius: 1em; height: 3.4em; margin-top: .4em; border: .1em solid #E8EAF4; } /* Historial */ .pm__tabs { display: flex; gap: 1em; border-bottom: .1em solid #E8EAF4; margin-bottom: .9em; } .pm__tabs span { font-size: .95em; font-weight: 700; color: #A0AEC0; padding-bottom: .5em; } .pm__tabs span.on { color: var(--purple); border-bottom: .18em solid var(--purple); } .pm__item { background: #fff; border-radius: 1.2em; padding: .7em .8em; margin-bottom: .55em; display: flex; align-items: center; gap: .7em; box-shadow: 0 .2em .8em rgba(64, 36, 143, .06); } .pm__item .pm__ico { font-size: 1.35em; } .pm__item b { display: block; font-size: 1.02em; color: #2D3748; font-weight: 800; } .pm__item small { font-size: .85em; color: #8A93AC; } .pm__chev { margin-left: auto; color: #C3CAD9; font-weight: 800; } /* ---------------------------- Mascota e imagen ---------------------------- */ .mascot { position: absolute; z-index: 4; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 12px 22px rgba(64, 36, 143, .18)); } .mascot--hero { width: 104px; right: -22px; bottom: -18px; } .mascot--nevera { width: 92px; left: -26px; bottom: -12px; } .photo { width: 100%; max-width: 420px; height: auto; margin: 0 auto; filter: drop-shadow(0 16px 34px rgba(64, 36, 143, .14)); } @media (min-width: 980px) { .mascot--hero { width: 152px; right: -54px; bottom: -30px; } .mascot--nevera { width: 124px; left: -56px; bottom: -18px; } .photo { max-width: 100%; } } /* ---------------------------- Tarjetas ---------------------------- */ .grid { display: grid; gap: 14px; grid-template-columns: 1fr; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .qcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 9px; text-align: center; box-shadow: var(--sh-sm); display: flex; flex-direction: column; align-items: center; gap: 8px; } .qcard b { font-size: .78rem; font-weight: 700; color: var(--ink); line-height: 1.32; } .qcard .ico-round { width: 38px; height: 38px; font-size: 1.05rem; } .ico-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; flex: none; } .feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 18px; text-align: center; box-shadow: var(--sh-sm); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; align-items: center; } .feature:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } .feature .ico-round { width: 54px; height: 54px; font-size: 1.5rem; margin-bottom: 13px; } .feature h3 { margin-bottom: 5px; } .feature p { margin: 0; font-size: .88rem; color: var(--mute); line-height: 1.5; } .i-pink { background: var(--pink-tint); } .i-purple { background: var(--purple-tint); } .i-teal { background: var(--teal-tint); } .i-blue { background: var(--blue-tint); } .i-yellow { background: var(--yellow-tint); } /* ---------------------------- Cómo funciona ---------------------------- */ .steps { display: grid; gap: 34px; grid-template-columns: 1fr; } .step { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .step__txt { max-width: 26ch; } .step__n { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem; margin: 0 auto 8px; box-shadow: var(--sh-cta); } .step h3 { margin-bottom: 4px; } .step p { margin: 0; font-size: .9rem; color: var(--mute); } /* ---------------------------- Split ---------------------------- */ .split { display: grid; gap: 34px; align-items: center; grid-template-columns: 1fr; } .split__media { display: flex; justify-content: center; position: relative; } .checks { list-style: none; padding: 0; margin: 18px 0 0; } .checks li { display: flex; align-items: center; gap: 11px; padding: 8px 0; font-weight: 600; color: var(--ink); font-size: .96rem; } .checks .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-tint); color: #1E7D77; display: grid; place-items: center; font-size: .72rem; font-weight: 800; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .chip { font-weight: 700; font-size: .86rem; padding: 8px 15px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--line); color: var(--ink); } .chip--pink { background: var(--pink-tint); border-color: #FBD9E4; color: #B32B55; } .chip--teal { background: var(--teal-tint); border-color: #C4EEEB; color: #1E7D77; } .chip--blue { background: var(--blue-tint); border-color: #CFE3FC; color: #2A6BC0; } .chip--yellow { background: var(--yellow-tint); border-color: #F7E9BE; color: #8A6D14; } .note { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--mute); line-height: 1.5; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; margin-top: 20px; } .note svg { width: 17px; height: 17px; flex: none; color: var(--purple); margin-top: 2px; } /* ---------------------------- FAQ ---------------------------- */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; box-shadow: var(--sh-sm); } .faq summary { cursor: pointer; list-style: none; position: relative; padding: 17px 50px 17px 19px; font-weight: 700; color: var(--ink); font-size: .98rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--purple); border-bottom: 2.5px solid var(--purple); transform: translateY(-70%) rotate(45deg); transition: transform .22s ease; } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq__a { padding: 0 19px 18px; font-size: .93rem; color: var(--text); } .faq__a p:last-child { margin-bottom: 0; } .faq__a a { color: var(--purple); font-weight: 700; text-decoration: underline; } /* ---------------------------- CTA final ---------------------------- */ .final { padding: 30px 0 70px; } .final__band { background: var(--grad); border-radius: var(--r-xl); padding: 40px 26px; color: #fff; text-align: center; position: relative; overflow: hidden; box-shadow: 0 22px 50px rgba(64, 36, 143, .28); } .final__band h2 { color: #fff; } .final__band p { color: rgba(255, 255, 255, .92); } .final__band .pink { color: #FFD3E0; } .final__art { position: absolute; right: 8px; bottom: -10px; width: 108px; height: auto; opacity: .95; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(20, 10, 50, .28)); } .final__inner { position: relative; z-index: 1; } /* ---------------------------- Footer ---------------------------- */ .footer { background: var(--white); border-top: 1px solid var(--line); padding: 40px 0 28px; } .footer__grid { display: grid; gap: 28px; grid-template-columns: 1fr; } .footer__brand img { height: 54px; width: auto; margin-bottom: 10px; } .footer__brand p { font-size: .86rem; color: var(--mute); margin: 0; } .footer h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); margin-bottom: 12px; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .footer li a, .footer li span { font-size: .88rem; color: var(--mute); } .footer li a:hover { color: var(--purple); } .social { display: flex; gap: 10px; margin-top: 14px; } .social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-tint); color: var(--purple); transition: background .18s ease, color .18s ease; } .social a:hover { background: var(--purple); color: #fff; } .social svg { width: 16px; height: 16px; } .footer__bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; text-align: center; font-size: .78rem; color: var(--mute); line-height: 1.6; } .footer__bottom .disclaimer { max-width: 62ch; margin: 0 auto 8px; } /* ---------------------------- Aviso de cookies ---------------------------- */ .cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(64, 36, 143, .14); padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .3s ease; } .cookiebar.is-visible { transform: translateY(0); } .cookiebar__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .cookiebar__text { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text); } .cookiebar__text a { color: var(--purple); font-weight: 700; text-decoration: underline; } .cookiebar__actions { display: flex; gap: 10px; } /* Ambas opciones con el mismo peso visual: exigido por la guía de la AEPD */ .cookiebar__actions .btn { flex: 1; } .linklike { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: .88rem; color: var(--mute); text-align: left; } .linklike:hover { color: var(--purple); } /* Cuando el aviso está visible se sube la barra de descarga para no solaparse */ body.has-cookiebar .stickybar { display: none; } @media (min-width: 700px) { .cookiebar__inner { flex-direction: row; align-items: center; gap: 24px; } .cookiebar__text { flex: 1; } .cookiebar__actions { flex: none; } .cookiebar__actions .btn { flex: none; min-width: 120px; } } /* ---------------------------- Barra fija móvil ---------------------------- */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 22px rgba(64, 36, 143, .09); transform: translateY(115%); transition: transform .28s ease; } .stickybar.is-visible { transform: translateY(0); } /* ---------------------------- Reveal ---------------------------- El contenido es visible por defecto: solo se oculta cuando hay JS, así nunca queda una sección en blanco si el script falla. Movimientos cortos y suaves: la landing debe leerse, no lucirse. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal.is-in { will-change: auto; } /* Variantes de dirección */ .js .reveal--left { transform: translateX(-22px); } .js .reveal--right { transform: translateX(22px); } .js .reveal--zoom { transform: scale(.965); } /* Escalonado: cada hijo directo entra un poco después que el anterior */ .js .reveal-group > * { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--d, 0ms); } .js .reveal-group.is-in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; transition: none; } .float { animation: none; } } /* ============================ Tablet ============================ */ @media (min-width: 640px) { :root { --pad: 28px; } .grid--q5 { grid-template-columns: repeat(3, 1fr); } .grid--f5 { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .final__band { padding: 52px 44px; } } /* ============================ Desktop ============================ */ @media (min-width: 980px) { body { padding-bottom: 0; } .section { padding: 86px 0; } .header__inner { height: 76px; } .header__logo img { height: 46px; } .header__nav { display: flex; } .header .header__cta { display: inline-flex; } .hero { padding: 60px 0 90px; } .hero .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; } .hero__copy { text-align: left; } .stage { margin: 0 auto; } .pm { --w: 258px; } .grid--q5 { grid-template-columns: repeat(5, 1fr); } .grid--f5 { grid-template-columns: repeat(5, 1fr); } .split { grid-template-columns: 1fr 1fr; gap: 60px; } .split--reverse .split__media { order: 2; } /* La fila de 5 preguntas necesita más ancho que la foto */ .split--wide { grid-template-columns: 1.42fr .58fr; gap: 44px; } .steps { gap: 30px; } /* Se reserva el hueco de la derecha para la mascota */ .final__band { text-align: left; padding: 56px 190px 56px 58px; } .final__band h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); } .final__flex { display: grid; grid-template-columns: 1.18fr .82fr; gap: 34px; align-items: center; } .final__art { right: 26px; bottom: -16px; width: 148px; } .stickybar { display: none; } }