@font-face { font-family: Manrope; src: url('./manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { color-scheme: light; --background: #fffaf3; --orange: #df4b22; --orange-dark: #b63b18; --yellow: #f8b917; --text: #3c302b; --muted: #77675e; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--background); }
body { position: relative; isolation: isolate; min-height: 100svh; display: flex; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); color: var(--text); background: var(--background); font-family: Manrope, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.ambient { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.wash { position: absolute; display: block; width: 620px; height: 620px; border-radius: 50%; }
.wash-orange { top: -270px; left: calc(50% - 560px); background: radial-gradient(circle, #fcb58d45, #fcb58d0d 48%, transparent 70%); animation: orange-drift 19s ease-in-out infinite alternate; }
.wash-yellow { bottom: -210px; right: calc(50% - 540px); background: radial-gradient(circle, #ffd36c55, #ffd36c10 48%, transparent 70%); animation: yellow-drift 23s ease-in-out infinite alternate; }
.background-curves { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1; }
.curve-orange { stroke: #ed7c4930; transform-origin: 20% 50%; animation: curve-drift 18s ease-in-out infinite alternate; }
.curve-yellow { stroke: #dba21939; transform-origin: 90% 70%; animation: curve-drift 22s ease-in-out infinite alternate-reverse; }
.curve-trace { stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 95; pointer-events: none; animation: curve-flow 24s linear infinite; }
.trace-orange { stroke: #e7865280; }
.trace-yellow { stroke: #e5b84490; animation-duration: 29s; animation-direction: reverse; }
.ambient-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; animation: dot-float 12s ease-in-out infinite; }
.dot-one { top: 32%; left: calc(50% - 290px); background: #f1a16b75; }
.dot-two { top: 68%; right: calc(50% - 310px); width: 9px; height: 9px; background: #e9b63c70; animation-delay: -4s; }
.dot-three { top: 15%; right: calc(50% - 200px); width: 4px; height: 4px; background: #e67c4c80; animation-delay: -8s; }
.ambient-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; animation: ambient-twinkle 9s ease-in-out infinite; }
.ambient-spark::before, .ambient-spark::after { content: ''; position: absolute; inset: 0; margin: auto; border-radius: 3px; background: #dba52b; }
.ambient-spark::before { width: 2px; height: 10px; }
.ambient-spark::after { width: 10px; height: 2px; }
.spark-one { top: 28%; left: max(13px, calc(50% - 280px)); }
.spark-two { top: 55%; right: max(10px, calc(50% - 285px)); animation-delay: -3s; }
.spark-three { top: 82%; left: max(11px, calc(50% - 235px)); animation-delay: -6s; }
.wrap { width: 100%; max-width: 410px; position: relative; text-align: center; }
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.location-label { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; color: #8a7567; }
.location-label svg { width: 12px; height: 12px; color: var(--orange); }
.brand-detail { display: flex; gap: 5px; align-items: center; }
.brand-detail i { width: 5px; height: 5px; border-radius: 50%; background: #f3d1b9; }
.brand-detail i:nth-child(2) { background: #ed9262; }
.brand-detail i:nth-child(3) { background: var(--yellow); }
.brand-mark { position: relative; display: grid; place-items: center; margin: 19px 0 11px; min-height: 168px; }
.logo-float { position: relative; display: block; width: 100%; align-self: start; z-index: 1; }
.logo-image { display: block; aspect-ratio: 2192 / 1045; }
.logo-float img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-float::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 41%, #fff6d980 49%, #fffbe070 51%, transparent 59%); background-size: 280% 100%; background-position: 150% 0; mask: url('./logo-retina-1536.webp') center / 100% 100% no-repeat; -webkit-mask: url('./logo-retina-1536.webp') center / 100% 100% no-repeat; opacity: 0; }
.logo-reveal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.logo-trace { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.logo-trace-orange { stroke: #ec6b37; stroke-width: 8; }
.logo-trace-yellow { stroke: #e6ab13; stroke-width: 6; }
.logo-shield-light { opacity: 0; transform-box: fill-box; transform-origin: center; }
.logo-pending .logo-image { animation: logo-load-fallback .2s 4.5s both; }
.logo-entering .logo-image { animation: logo-image-handoff 2.65s linear both; }
.logo-entering .logo-reveal { animation: logo-overlay-handoff 2.65s linear both; }
.logo-entering .logo-emblem-fill { animation: logo-emblem-reveal 1.1s .45s cubic-bezier(.22, .61, .36, 1) both; }
.logo-entering .logo-wordmark-fill { animation: logo-wordmark-reveal 1s 1.15s cubic-bezier(.22, .61, .36, 1) both; }
.logo-entering .logo-trace-orange { opacity: 1; animation: logo-draw 1.1s .05s cubic-bezier(.25, .46, .45, .94) both, logo-trace-fade .35s 1.15s forwards; }
.logo-entering .logo-trace-yellow { opacity: 1; animation: logo-draw .65s .9s cubic-bezier(.25, .46, .45, .94) both, logo-trace-fade .3s 1.6s forwards; }
.logo-entering .logo-shield-light { animation: logo-shield-bloom 1.25s 1.05s ease-out both; }
.logo-entering .logo-float::after { animation: logo-final-sheen .7s 1.9s ease-in-out both; }
.logo-aura { position: absolute; width: min(310px, 100%); height: 160px; border-radius: 50%; background: radial-gradient(ellipse, #ffce8050, transparent 68%); animation: aura-breathe 9s ease-in-out infinite; }
.brand-curl { position: absolute; left: -5px; bottom: 0; width: 38px; height: 38px; stroke: #e9a065; stroke-width: 1.5; stroke-linecap: round; transform: rotate(-12deg); pointer-events: none; }
.brand-curl path { stroke-dasharray: 100; animation: curl-trace 12s ease-in-out infinite; }
.brand-spark { position: absolute; right: 2px; top: 20px; color: #d8a323; font-size: 23px; font-weight: 400; pointer-events: none; animation: spark-breathe 8s ease-in-out infinite; }
.specialty { color: var(--orange-dark); font-size: 10px; font-weight: 800; letter-spacing: 2.2px; }
.intro h1 { margin-top: 5px; font-size: clamp(28px, 8vw, 36px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.3; animation: name-light 11s ease-in-out infinite; }
.intro-copy { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.intro-accent { display: block; margin: 17px auto 21px; width: 31px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.actions { display: flex; flex-direction: column; gap: 11px; }
.button { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 15px 17px; border-radius: 19px; color: inherit; text-decoration: none; text-align: left; -webkit-tap-highlight-color: transparent; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button::before { content: ''; position: absolute; z-index: -1; right: -45px; top: -63px; width: 160px; height: 160px; border: 1px solid #e69a4330; border-radius: 50%; pointer-events: none; animation: button-wave 9s ease-in-out infinite; }
.button::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffc95e28 50%, transparent 65%); pointer-events: none; transform: translateX(-125%); animation: shine 9s ease-in-out infinite; }
.button-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; }
.button-icon svg { width: 23px; height: 23px; }
.button-copy { position: relative; flex: 1; min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.4; }
.button-copy small { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.button-copy em { display: block; font-style: normal; margin-top: 2px; }
.arrow { flex: none; width: 18px; height: 18px; transition: transform .2s ease; color: #aa7d60; }
.button-whatsapp { color: #fff; min-height: 80px; background: linear-gradient(110deg, #c43e17, #d54a1f); border: 1px solid #c94118; box-shadow: 0 8px 23px #cc632b20, inset 0 1px 0 #ffffff25; animation: appointment-light 8s ease-in-out infinite; }
.button-whatsapp .button-icon { background: #ffffff17; border: 1px solid #ffffff26; }
.button-whatsapp .button-copy { font-size: 15px; }
.button-whatsapp small { color: #fff3e7; }
.button-whatsapp .arrow { color: #fff6e9; }
.button-whatsapp::before { border-color: #ffcc7040; box-shadow: 0 0 0 13px #ffc25c0a; animation-duration: 7s; }
.button-whatsapp::after { background: linear-gradient(110deg, transparent 36%, #fff9d340 50%, transparent 64%); animation-duration: 8s; }
.button-location, .button-review { background: #ffffffbf; border: 1px solid #efdfd0; box-shadow: 0 3px 12px #9d653504, inset 0 1px 0 #ffffff; animation: card-light 12s ease-in-out infinite; }
.button-location { min-height: 91px; animation-delay: -4s; }
.button-location .button-icon { background: #fff0e5; color: var(--orange-dark); }
.button-location::before { animation-delay: -3s; }
.button-location::after { animation-delay: -3s; }
.button-review .button-icon { background: #fff6df; }
.google-icon svg { width: 21px; height: 21px; }
.button-review::before { animation-delay: -5s; }
.button-review::after { animation-delay: -6s; }
.button-review { min-height: 98px; animation-delay: -8s; }
.review-stars { display: flex; width: max-content; gap: 4px; margin-top: 6px; pointer-events: none; }
.review-stars svg { width: 15px; height: 15px; color: #d2b995; animation: star-ignite 5.8s ease-in-out infinite; }
.review-stars svg:nth-child(2) { animation-delay: .25s; }
.review-stars svg:nth-child(3) { animation-delay: .5s; }
.review-stars svg:nth-child(4) { animation-delay: .75s; }
.review-stars svg:nth-child(5) { animation-delay: 1s; }
.socials { display: flex; justify-content: center; gap: 40px; margin-top: 24px; }
.social { display: flex; flex-direction: column; align-items: center; gap: 7px; border-radius: 10px; color: #79695f; font-size: 10px; font-weight: 600; text-decoration: none; }
.social-icon { position: relative; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 15px; color: #b54e27; background: #fff5eb; border: 1px solid #f0d8c5; transition: transform .2s ease, background .2s ease; }
.social-icon::before { content: ''; position: absolute; inset: -3px; border-radius: 18px; border: 1px solid #df8b4f; opacity: 0; pointer-events: none; animation: social-light 12s ease-in-out infinite; }
.social:nth-child(2) .social-icon::before { animation-delay: -4s; }
.social:nth-child(3) .social-icon::before { animation-delay: -8s; }
.social svg { width: 20px; height: 20px; }
.social-icon svg { animation: icon-light 9s ease-in-out infinite; }
.social:nth-child(2) .social-icon svg { animation-delay: -3s; }
.social:nth-child(3) .social-icon svg { animation-delay: -6s; }
footer { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; color: #897568; font-size: 9px; }
footer a { color: #745749; font-weight: 800; text-decoration: none; border-radius: 2px; }
.footer-line { width: 13px; height: 1px; background: #e49762; margin-right: 3px; }
.button:focus-visible, .social:focus-visible, footer a:focus-visible { outline: 3px solid var(--orange-dark); outline-offset: 4px; }
.button:active { transform: scale(.985); }
@media (hover: hover) { .button:hover { transform: translateY(-2px); border-color: #df9c6a; box-shadow: 0 8px 24px #a6633512; } .button-whatsapp:hover { box-shadow: 0 9px 26px #ce572430; border-color: #b73913; } .button:hover .arrow { transform: translate(2px, -1px); } .social:hover .social-icon { transform: translateY(-2px); background: #ffebd6; } footer a:hover { text-decoration: underline; } }
@media (min-width: 700px) { body { align-items: center; padding-top: 38px; padding-bottom: 38px; } .brand-mark { margin-top: 23px; } }
@media (max-width: 359px) { body { padding-left: 18px; padding-right: 18px; padding-top: 21px; } .brand-mark { min-height: 142px; margin-top: 15px; margin-bottom: 8px; } .brand-spark { right: -3px; top: 10px; } .brand-curl { left: -8px; width: 30px; } .button { padding: 14px 12px; gap: 10px; border-radius: 17px; } .button-copy { font-size: 13px; } .button-whatsapp .button-copy { font-size: 14px; } .button-copy small { font-size: 9px; } .button-icon { width: 37px; height: 37px; border-radius: 12px; } .socials { gap: 32px; } .location-label { font-size: 8px; letter-spacing: 1.1px; } }
@keyframes aura-breathe { 0%, 100% { opacity: .5; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes curl-trace { 0%, 100% { stroke-dashoffset: 0; opacity: .6; } 50% { stroke-dashoffset: 18; opacity: .9; } }
@keyframes spark-breathe { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: .85; transform: translateY(4px); } }
@keyframes orange-drift { from { transform: translate(-20px, 0) scale(.95); } to { transform: translate(65px, 40px) scale(1.1); } }
@keyframes yellow-drift { from { transform: translate(0, 15px); } to { transform: translate(-70px, -40px) scale(1.08); } }
@keyframes curve-drift { from { transform: translateY(-10px) rotate(-2deg); } to { transform: translateY(20px) rotate(3deg); } }
@keyframes curve-flow { to { stroke-dashoffset: -100; } }
@keyframes ambient-twinkle { 0%, 100% { opacity: .12; transform: translateY(4px) scale(.85); } 50% { opacity: .58; transform: translateY(-6px) scale(1.08); } }
@keyframes logo-load-fallback { from { opacity: 0; } to { opacity: 1; } }
@keyframes logo-image-handoff { 0%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes logo-overlay-handoff { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes logo-emblem-reveal { from { opacity: 0; clip-path: circle(1% at 19.7% 28.3%); } 35% { opacity: 1; } to { opacity: 1; clip-path: circle(50% at 19.7% 28.3%); } }
@keyframes logo-wordmark-reveal { from { opacity: 0; clip-path: inset(0 63.5% 0 36.5%); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 36.5%); } }
@keyframes logo-draw { from { stroke-dashoffset: var(--trace-length); } to { stroke-dashoffset: 0; } }
@keyframes logo-trace-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes logo-shield-bloom { 0% { opacity: 0; transform: scale(.75); } 45% { opacity: .42; } 75% { opacity: .28; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes logo-final-sheen { 0% { background-position: 150% 0; opacity: 0; } 20%, 75% { opacity: .45; } 100% { background-position: -50% 0; opacity: 0; } }
@keyframes name-light { 0%, 100% { text-shadow: 0 0 14px #e6a85600; } 50% { text-shadow: 0 0 14px #e6a85625; } }
@keyframes appointment-light { 0%, 100% { box-shadow: 0 8px 23px #cc632b20, inset 0 1px 0 #ffffff25; } 50% { box-shadow: 0 8px 27px #dc75283a, 0 0 0 3px #f6bc460b, inset 0 1px 0 #ffffff40; } }
@keyframes card-light { 0%, 65%, 100% { border-color: #efdfd0; box-shadow: 0 3px 12px #9d653504, inset 0 1px 0 #ffffff; } 82% { border-color: #e5b678; box-shadow: 0 4px 17px #efb35418, inset 0 1px 0 #ffffff; } }
@keyframes dot-float { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-20px); opacity: .9; } }
@keyframes button-wave { 0%, 100% { transform: translate(0, 0) scale(.92); opacity: .45; } 50% { transform: translate(-10px, 7px) scale(1.16); opacity: .8; } }
@keyframes shine { 0%, 70% { transform: translateX(-125%); } 92%, 100% { transform: translateX(125%); } }
@keyframes star-ignite { 0%, 12%, 100% { color: #d2b995; filter: drop-shadow(0 0 0 #eaae2700); transform: scale(1); } 26%, 66% { color: #e4a716; filter: drop-shadow(0 0 4px #efbe5480); transform: scale(1.08); } 82% { color: #c9aa81; filter: drop-shadow(0 0 0 #eaae2700); transform: scale(1); } }
@keyframes icon-light { 0%, 100% { filter: drop-shadow(0 0 0 #efa82b00); } 50% { filter: drop-shadow(0 0 4px #efa82b60); } }
@keyframes social-light { 0%, 60%, 100% { opacity: 0; } 75%, 86% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .button::after, .logo-float::after { opacity: 0; } .button::after { transform: translateX(-125%); } .logo-aura { opacity: .65; } .review-stars svg { color: #c89820; filter: none; } .ambient-spark { opacity: .25; } .logo-image { opacity: 1 !important; } .logo-reveal { opacity: 0 !important; } }