:root { --cream: #f7f0e8; --gold: #b39a6b; --ink: #050505; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; }
body { margin: 0; background: #ece8e1; color: var(--ink); font-family: Lato, Arial, sans-serif; }
main { width: min(100%, 1280px); margin: 0 auto; overflow: hidden; background: var(--cream); }
.hero { position: relative; height: min(70vw, 905px); min-height: 705px; overflow: hidden; isolation: isolate; background: var(--cream); }
.brand { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; padding-top: 30px; text-align: center; }
.brand img { width: 62px; height: 88px; object-fit: contain; margin-bottom: 8px; }.brand p { margin: 0; font-size: clamp(20px, 2.1vw, 31px); font-weight: 300; letter-spacing: .05em; }.brand strong { margin-top: 4px; font-size: clamp(11px, 1.25vw, 17px); letter-spacing: .02em; }
.hero-photo { position: absolute; z-index: 1; top: 130px; right: 0; width: 50%; height: calc(100% - 130px); overflow: visible; }.hero-photo::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(90deg, var(--cream) 0%, transparent 42%), linear-gradient(0deg, var(--cream) 0%, transparent 14%); }.hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
.hero-copy { position: absolute; z-index: 2; top: 34.5%; left: 6%; }.hero-copy h1 { margin: 0; font-size: clamp(45px, 5.65vw, 75px); font-style: italic; font-weight: 300; letter-spacing: -.075em; line-height: 1.075; }.hero-copy p { margin: 25px 0 0; font-size: clamp(17px, 1.7vw, 23px); font-style: italic; font-weight: 300; line-height: 1.52; }
.booking { padding: 28px 7% 52px; text-align: center; }.proof { margin: 0; font-size: clamp(16px, 1.7vw, 22px); font-weight: 900; }.appointment { display: flex; align-items: center; justify-content: center; gap: 30px; width: 100%; min-height: 92px; margin: 18px auto 32px; border-radius: 8px; color: #fff; background: #000; font-size: clamp(17px, 2.1vw, 27px); font-weight: 900; text-decoration: none; }.appointment span { font-size: 1.55em; font-weight: 300; }.reply { margin: 0; font-size: clamp(14px, 1.5vw, 18px); font-weight: 700; }.whatsapp { display: inline-flex; align-items: center; gap: 13px; margin-top: 18px; padding: 12px 24px; border: 2px solid #2e2e2b; border-radius: 5px; color: inherit; font-size: clamp(15px, 1.65vw, 20px); font-weight: 700; text-decoration: none; }.whatsapp svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.benefits { padding: 0 7% 42px; text-align: center; }.benefits h2 { margin: 0 0 35px; color: var(--gold); font-size: clamp(18px, 2vw, 25px); font-style: italic; font-weight: 900; }.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }.benefit-grid article { text-align: center; }.icon { display: block; height: 42px; margin: 0 auto; object-fit: contain; }.icon-eye { width: 62px; }.icon-design { width: 70px; }.icon-results { width: 31px; }.benefit-grid h3 { margin: 15px 0; font-size: clamp(12px, 1.4vw, 17px); font-style: italic; font-weight: 400; line-height: 1.15; }.benefit-grid p { margin: 0; font-size: clamp(13px, 1.35vw, 17px); line-height: 1.3; }
.result { padding: 0 12%; text-align: center; }.result img { display: block; width: 100%; height: auto; }.result p { margin: 27px 0 16px; font-size: clamp(19px, 2vw, 25px); font-style: italic; font-weight: 400; }.divider { display: flex; align-items: center; justify-content: center; gap: 12px; color: #bfad83; }.divider span { width: 31%; height: 1px; background: #bdaa7e; }
footer { padding: 34px 7% 36px; text-align: center; }.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }.contact-grid a { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }.contact-grid b { height: 39px; color: #4d4e4a; font-family: Georgia, serif; font-size: 38px; font-weight: 400; line-height: 1; }.contact-grid strong { margin-top: 8px; font-size: clamp(11px, 1.4vw, 17px); font-style: italic; font-weight: 400; }.contact-grid small { margin-top: 4px; font-size: clamp(8px, .85vw, 10px); } footer > p { margin: 30px 0 0; color: #5d5b57; font-size: clamp(13px, 1.45vw, 17px); font-style: italic; font-weight: 700; line-height: 1.25; }
@media (max-width: 700px) { main { width: 100%; }.hero { height: 790px; min-height: 0; }.brand { padding-top: 25px; }.brand img { width: 52px; height: 72px; margin-bottom: 7px; }.brand p { font-size: 19px; }.brand strong { font-size: 11px; }.hero-photo { top: 176px; left: 50%; right: auto; width: 84%; height: 553px; transform: translateX(-30%); overflow: visible; }.hero-photo::after { background: linear-gradient(90deg, var(--cream) 0%, transparent 28%), linear-gradient(0deg, var(--cream) 0%, transparent 12%); }.hero-photo img { object-fit: contain; object-position: center bottom; }.hero-copy { top: 352px; left: 6.4%; }.hero-copy h1 { font-size: clamp(29px, 8.2vw, 40px); letter-spacing: -.08em; line-height: 1.075; }.hero-copy p { margin-top: 20px; font-size: clamp(11px, 3.1vw, 14px); line-height: 1.55; }.booking { padding: 26px 6.3% 50px; }.appointment { min-height: 98px; gap: 16px; margin: 17px 0 34px; padding: 0 10px; font-size: clamp(15px, 4.4vw, 20px); white-space: nowrap; }.whatsapp { padding: 11px 20px; }.benefits { padding: 0 7% 43px; }.benefits h2 { margin-bottom: 37px; font-size: clamp(17px, 4.5vw, 21px); }.benefit-grid { gap: 15px; }.icon { height: 34px; font-size: 31px; }.benefit-grid h3 { margin: 15px 0 17px; font-size: clamp(10px, 2.8vw, 13px); }.benefit-grid p { font-size: clamp(10px, 2.8vw, 13px); }.result { padding: 0 11%; }.result p { margin: 27px -5px 15px; font-size: clamp(17px, 4.6vw, 21px); }.contact-grid { gap: 9px; }.contact-grid b { font-size: 31px; }.contact-grid strong { font-size: clamp(9px, 2.6vw, 12px); }.contact-grid small { font-size: clamp(6px, 1.75vw, 8px); } footer { padding: 30px 4% 28px; } footer > p { margin-top: 28px; font-size: clamp(12px, 3.2vw, 15px); } }
@media (max-width: 380px) { .hero { height: 760px; }.hero-photo { top: 160px; height: 525px; }.hero-copy { top: 320px; }.hero-copy h1 { font-size: 34px; }.hero-copy p { font-size: 12px; } }