:root {
    --gold: #b58b42;
    --gold-light: #d7bb7b;
    --turquoise: #4d9691;
    --turquoise-dark: #2f706c;
    --lilac: #b49ac2;
    --lilac-dark: #796287;
    --cream: #fbf8f3;
    --sand: #f0e8df;
    --ink: #282521;
    --muted: #706a63;
    --white: #ffffff;
    --line: rgba(40, 37, 33, .13);
    --shadow: 0 24px 70px rgba(56, 45, 32, .14);
    --radius-lg: 30px;
    --radius-md: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.narrow { max-width: 850px; }
.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;
}
.skip-link {
    position: fixed; left: 16px; top: -100px; z-index: 999;
    background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 16px; }

.site-header {
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid transparent;
    background: rgba(251, 248, 243, .92);
    backdrop-filter: blur(16px);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 10px 30px rgba(45, 39, 31, .07); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-symbol {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 50%; color: var(--white);
    background: linear-gradient(145deg, var(--gold), var(--gold-light));
    font-family: Georgia, serif; font-size: 25px;
    box-shadow: 0 8px 20px rgba(181,139,66,.24);
}
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font: 24px Georgia, serif; letter-spacing: .01em; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 23px; font-size: 14px; font-weight: 700; }
.site-nav > a:not(.button) { position: relative; padding-block: 10px; }
.site-nav > a:not(.button)::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px;
    background: var(--turquoise); transition: right .2s ease;
}
.site-nav > a:hover::after, .site-nav > a.active::after { right: 0; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 9px; }
.menu-toggle > span:not(.sr-only) { display: block; height: 2px; background: var(--ink); margin: 6px 0; transition: .2s ease; }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px; border: 1px solid transparent;
    border-radius: 999px; font-weight: 800; line-height: 1.2;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--turquoise); color: var(--white); box-shadow: 0 12px 30px rgba(77,150,145,.24); }
.button-primary:hover { background: var(--turquoise-dark); }
.button-secondary { background: var(--white); border-color: var(--line); }
.button-secondary:hover { box-shadow: 0 12px 30px rgba(45,39,31,.1); }
.button-light { background: var(--white); color: var(--turquoise-dark); }
.button-outline-light { color: var(--white); border-color: rgba(255,255,255,.55); }
.button-large { min-height: 54px; padding-inline: 28px; }

.hero { position: relative; overflow: hidden; padding: 82px 0 88px; }
.hero::before {
    content: ""; position: absolute; width: 480px; height: 480px; left: -220px; top: -190px;
    border-radius: 50%; background: rgba(180,154,194,.15); filter: blur(8px);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; }
.eyebrow { display: inline-block; color: #876426; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-light { color: rgba(255,255,255,.82); }
.hero h1, .page-hero h1, .section-heading h2, .inspiration-copy h2, .cta-section h2 {
    font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.025em;
}
.hero h1 { max-width: 720px; margin: 15px 0 22px; font-size: clamp(44px, 6vw, 76px); line-height: 1.03; }
.hero-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 11px 22px; margin-top: 25px; color: var(--muted); font-size: 13px; font-weight: 700; }

.hero-art { position: relative; min-height: 540px; display: grid; place-items: center; }
.art-orbit { position: absolute; border-radius: 50%; }
.orbit-one { width: 460px; height: 460px; background: rgba(77,150,145,.12); }
.orbit-two { width: 350px; height: 350px; border: 1px solid rgba(181,139,66,.38); }
.memory-frame {
    position: relative; z-index: 2; width: min(410px, 80%); aspect-ratio: .88;
    padding: 18px; background: #27231f; box-shadow: var(--shadow); transform: rotate(2deg);
}
.memory-grid {
    height: 100%; padding: 10px; background: #e9dfd5;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: 9px;
}
.memory-photo { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 10px; color: white; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.photo-one { background: linear-gradient(145deg, #8d6f61, #d1ae94); }
.photo-two { background: linear-gradient(145deg, #5d8884, #b6d1cb); }
.photo-three { background: linear-gradient(145deg, #92798f, #d5b8cc); }
.photo-four { background: linear-gradient(145deg, #af873d, #dec584); }
.memory-message { grid-column: 1/-1; display: grid; padding: 15px 10px; text-align: center; background: white; }
.memory-message strong { font: 18px Georgia, serif; }
.memory-message small { color: var(--muted); }
.art-badge {
    position: absolute; right: 0; bottom: 58px; z-index: 3; width: 112px; height: 112px;
    border-radius: 50%; display: grid; place-content: center; text-align: center;
    color: var(--white); background: linear-gradient(145deg, var(--lilac-dark), var(--lilac));
    box-shadow: 0 16px 35px rgba(121,98,135,.3);
}
.art-badge strong { font: 27px Georgia, serif; }
.art-badge span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

.value-band { background: #284f4c; color: var(--white); }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-grid article { min-height: 115px; padding: 24px; display: grid; align-content: center; border-right: 1px solid rgba(255,255,255,.14); }
.value-grid article:last-child { border-right: 0; }
.value-grid strong { font: 19px Georgia, serif; }
.value-grid span { color: rgba(255,255,255,.68); font-size: 13px; }

.section { padding: 96px 0; }
.section-soft { background: var(--sand); }
.section-heading { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.section-heading h2, .inspiration-copy h2 { margin: 10px 0 15px; font-size: clamp(35px, 4vw, 54px); line-height: 1.08; }
.section-heading p, .inspiration-copy p { color: var(--muted); font-size: 17px; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(45,39,31,.06); }
.product-visual { position: relative; height: 260px; display: grid; place-items: center; overflow: hidden; }
.product-number { position: absolute; top: 20px; left: 20px; z-index: 2; color: rgba(255,255,255,.86); font-weight: 900; font-size: 12px; letter-spacing: .14em; }
.product-frames { background: linear-gradient(145deg, var(--turquoise-dark), var(--lilac)); }
.product-boxes { background: linear-gradient(145deg, #806026, var(--gold-light)); }
.product-special { background: linear-gradient(145deg, var(--lilac-dark), var(--turquoise)); }
.mini-frame { width: 145px; height: 155px; padding: 12px; border: 10px solid #25211e; background: #eee5dd; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; transform: rotate(-4deg); box-shadow: 0 20px 35px rgba(0,0,0,.23); }
.mini-frame i:nth-child(1) { background:#bd8f7c; }.mini-frame i:nth-child(2) { background:#82aaa4; }.mini-frame i:nth-child(3) { background:#c4a5bc; }.mini-frame i:nth-child(4) { background:#d2b46b; }
.gift-box { width: 150px; height: 110px; position: relative; border-radius: 6px; background: #f4eee7; box-shadow: 0 20px 35px rgba(67,45,16,.25); }
.gift-box::before { content:""; position:absolute; left:50%; top:-15px; bottom:0; width:18px; transform:translateX(-50%); background:#7e6288; }
.gift-box::after { content:""; position:absolute; left:-8px; right:-8px; top:-14px; height:24px; background:#f9f5ef; border-radius:5px; box-shadow:0 6px 10px rgba(0,0,0,.12); }
.gift-box i::before, .gift-box i::after { content:""; position:absolute; top:-42px; width:43px; height:33px; border:10px solid #7e6288; border-radius:50% 50% 0 50%; }
.gift-box i::before { left:38px; transform:rotate(12deg); }.gift-box i::after { right:38px; transform:scaleX(-1) rotate(12deg); }
.special-piece { position:relative; width:155px; height:145px; border:8px solid rgba(255,255,255,.9); border-radius:4px; transform:rotate(3deg); }
.special-piece i:first-child { position:absolute; width:30px; height:105px; left:55px; bottom:-34px; background:#d7bb7b; border-radius:15px 15px 4px 4px; }
.special-piece i:last-child { position:absolute; width:76px; height:76px; left:31px; top:25px; border:7px solid rgba(255,255,255,.85); border-radius:50%; }
.product-content { padding: 26px; }
.product-content > span, .contact-label, .process-label { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.product-content h3 { margin: 5px 0 9px; font: 27px Georgia, serif; }
.product-content p { min-height: 78px; margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.product-content a, .text-link { color: var(--turquoise-dark); font-weight: 900; }
.product-content a b, .text-link b { display: inline-block; transition: transform .2s ease; }
.product-content a:hover b, .text-link:hover b { transform: translateX(5px); }

.inspiration-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 68px; align-items: center; }
.inspiration-copy h2 { text-align: left; }
.inspiration-mosaic { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 210px 210px; gap: 16px; }
.mosaic-card { border-radius: var(--radius-md); padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); box-shadow: 0 16px 40px rgba(45,39,31,.1); }
.mosaic-card span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.mosaic-card strong { max-width: 320px; font: 24px Georgia, serif; line-height: 1.2; }
.mosaic-large { grid-row: 1 / 3; background: linear-gradient(145deg, #356f6b, #79aaa6); }
.mosaic-gold { background: linear-gradient(145deg, #8f692c, #d0ad66); }
.mosaic-lilac { background: linear-gradient(145deg, #705a7d, #bea8c8); }

.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step-grid article { padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
.step-grid b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(77,150,145,.13); color: var(--turquoise-dark); font-size: 12px; }
.step-grid h3 { margin: 17px 0 7px; font: 22px Georgia, serif; }
.step-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.section-action { display: flex; justify-content: center; margin-top: 32px; }

.cta-section { padding: 72px 0; color: var(--white); background: linear-gradient(120deg, #2e6c68, #579994 58%, #826e8e); }
.cta-layout { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.cta-section h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; }
.cta-section p { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); }
.cta-actions { display: grid; gap: 12px; flex-shrink: 0; }

.page-hero { padding: 96px 0 72px; text-align: center; background: radial-gradient(circle at top, rgba(180,154,194,.18), transparent 55%), linear-gradient(135deg, #efe5db, #faf7f2); }
.page-hero h1 { margin: 12px auto 17px; font-size: clamp(43px, 6vw, 72px); line-height: 1.04; }
.page-hero p { margin: 0 auto; color: var(--muted); font-size: 18px; max-width: 760px; }

.process-list { max-width: 930px; }
.process-list article { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.process-list article:last-child { border-bottom: 0; }
.process-number { color: var(--gold); font: 40px Georgia, serif; }
.process-list h2 { margin: 4px 0 8px; font: 31px Georgia, serif; }
.process-list p { margin: 0 0 10px; color: var(--muted); }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contact-card { min-height: 380px; padding: 31px; display: flex; flex-direction: column; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(45,39,31,.06); }
.contact-featured { color: var(--white); border-color: transparent; background: linear-gradient(145deg, var(--turquoise-dark), var(--turquoise)); }
.contact-featured .contact-label, .contact-featured p { color: rgba(255,255,255,.74); }
.contact-icon { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: auto; border-radius: 50%; color: var(--turquoise-dark); background: var(--sand); font-weight: 900; }
.contact-featured .contact-icon { background: rgba(255,255,255,.15); color: var(--white); }
.contact-card h2 { margin: 8px 0; font: 31px Georgia, serif; }
.contact-card p { min-height: 78px; margin: 0 0 22px; color: var(--muted); }
.contact-note { margin-top: 28px; padding: 25px 30px; display: flex; gap: 24px; align-items: center; border-radius: var(--radius-md); background: var(--sand); }
.contact-note strong { flex-shrink: 0; font: 22px Georgia, serif; }
.contact-note p { margin: 0; color: var(--muted); }

.site-footer { padding: 58px 0 22px; color: #eee7df; background: #24211e; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 54px; }
.brand-footer { margin-bottom: 12px; }
.brand-footer .brand-copy small { color: #aaa197; }
.footer-grid section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-grid section > p { max-width: 470px; margin: 0; color: #b9b0a7; }
.footer-grid h2 { margin: 0 0 6px; color: white; font: 20px Georgia, serif; }
.footer-grid section > a:not(.brand) { color: #b9b0a7; }
.footer-grid section > a:hover { color: white; }
.footer-bottom { margin-top: 38px; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #8f877f; font-size: 12px; }

.whatsapp-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    min-height: 48px; padding: 8px 17px 8px 8px; display: flex; align-items: center; gap: 9px;
    border-radius: 999px; color: var(--white); background: #25b95d;
    box-shadow: 0 16px 35px rgba(26,112,58,.27); font-size: 13px;
}
.whatsapp-float span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.17); font-size: 11px; }

@media (max-width: 960px) {
    .menu-toggle { display: block; }
    .site-nav {
        position: fixed; inset: 82px 0 auto 0; max-height: calc(100vh - 82px); overflow: auto;
        padding: 25px 20px 32px; display: none; flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 20px 35px rgba(45,39,31,.1);
    }
    .site-nav.open { display: flex; }
    .site-nav > a:not(.button) { padding: 13px 8px; }
    .site-nav > a:not(.button)::after { display: none; }
    .nav-cta { margin-top: 10px; }
    .hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .hero-copy { display: grid; justify-items: center; }
    .hero-actions, .hero-trust { justify-content: center; }
    .hero-art { min-height: 470px; }
    .value-grid { grid-template-columns: 1fr 1fr; }
    .value-grid article:nth-child(2) { border-right: 0; }
    .product-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
    .product-card { display: grid; grid-template-columns: .8fr 1.2fr; }
    .product-visual { height: auto; min-height: 270px; }
    .inspiration-layout { grid-template-columns: 1fr; }
    .inspiration-copy { text-align: center; max-width: 760px; margin: auto; }
    .inspiration-copy h2 { text-align: center; }
    .step-grid { grid-template-columns: 1fr 1fr; }
    .cta-layout { display: grid; text-align: center; justify-items: center; }
    .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; }
    .contact-grid { grid-template-columns: 1fr; max-width: 720px; }
    .contact-card { min-height: 300px; }
}

@media (max-width: 650px) {
    .container { width: min(100% - 28px, 1180px); }
    .header-inner { min-height: 72px; }
    .site-nav { top: 72px; max-height: calc(100vh - 72px); }
    .brand-symbol { width: 41px; height: 41px; }
    .brand-copy strong { font-size: 21px; }
    .hero { padding: 52px 0 62px; }
    .hero h1 { font-size: 43px; }
    .hero-lead { font-size: 17px; }
    .hero-actions { width: 100%; }
    .hero-actions .button { width: 100%; }
    .hero-art { min-height: 390px; }
    .orbit-one { width: 330px; height: 330px; }
    .orbit-two { width: 275px; height: 275px; }
    .memory-frame { width: 270px; padding: 12px; }
    .memory-grid { padding: 7px; gap: 6px; }
    .memory-message { padding: 10px 5px; }
    .memory-message strong { font-size: 14px; }
    .art-badge { width: 84px; height: 84px; right: 2px; bottom: 42px; }
    .art-badge strong { font-size: 21px; }
    .art-badge span { font-size: 8px; }
    .value-grid { grid-template-columns: 1fr; }
    .value-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); min-height: 92px; }
    .section { padding: 70px 0; }
    .section-heading h2, .inspiration-copy h2 { font-size: 37px; }
    .product-card { display: block; }
    .product-visual { min-height: 245px; }
    .product-content p { min-height: auto; }
    .inspiration-mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
    .mosaic-card, .mosaic-large { min-height: 190px; grid-row: auto; }
    .step-grid { grid-template-columns: 1fr; }
    .cta-actions { width: 100%; }
    .cta-actions .button { width: 100%; }
    .page-hero { padding: 70px 0 52px; }
    .page-hero h1 { font-size: 43px; }
    .process-list article { grid-template-columns: 57px 1fr; gap: 14px; padding: 29px 0; }
    .process-number { font-size: 31px; }
    .process-list h2 { font-size: 25px; }
    .contact-note { display: block; }
    .contact-note strong { display: block; margin-bottom: 8px; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom { display: grid; gap: 5px; }
    .whatsapp-float { width: 50px; height: 50px; padding: 8px; border-radius: 50%; }
    .whatsapp-float strong { display: none; }
    .whatsapp-float span { width: 34px; height: 34px; }
}
