:root { --ivory:#fffdf8; --cream:#f7f1e5; --gold:#b9841b; --bronze:#4b2d12; --ink:#2e221b; --line:#ddcba8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ivory); font-family:Manrope,Arial,sans-serif; }
.shell { max-width:1240px; margin:0 auto; padding:0 28px; }
header { position:sticky; top:0; z-index:5; background:rgba(255,253,248,.94); backdrop-filter:blur(16px); border-bottom:1px solid rgba(221,203,168,.75); }
.nav { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:13px; min-width:220px; text-decoration:none; color:var(--bronze); }
.brand img { width:54px; height:54px; object-fit:contain; border-radius:50%; }
.brand-name { display:block; font:600 31px/.78 "Cormorant Garamond",serif; letter-spacing:-.6px; }
.brand-small { display:block; margin-top:8px; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#88672d; }
nav { display:flex; gap:26px; align-items:center; }
nav a { color:#664b36; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:1.15px; text-transform:uppercase; }
.whatsapp { display:inline-flex; align-items:center; justify-content:center; min-height:43px; padding:0 18px; border:1px solid var(--gold); border-radius:7px; color:var(--bronze); background:#fffdf9; font:700 11px Manrope,sans-serif; letter-spacing:.5px; text-decoration:none; text-transform:uppercase; white-space:nowrap; }
.whatsapp:hover { background:#f9edcf; }
.intro { padding:62px 0 38px; display:flex; gap:30px; align-items:end; justify-content:space-between; }
.eyebrow { margin:0 0 10px; color:#9c742b; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
h1,h2,h3 { margin:0; color:var(--bronze); font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:-.6px; }
h1 { font-size:56px; line-height:.98; }
h2 { font-size:43px; line-height:1; }
.intro > p { max-width:390px; margin:0; color:#685d54; font-size:14px; line-height:1.65; }
.catalog { padding:32px 0 76px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.section-heading > p { max-width:390px; margin:0; color:#685d54; font-size:14px; line-height:1.65; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; max-width:910px; }
.guides-catalog { padding-top:44px; }
.guides-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; gap:20px; }
.guides-grid .product-image { height:390px; padding:12px; }
.guides-grid .card-copy { padding:18px 19px 19px; }
.guides-grid .card-copy h3 { font-size:29px; }
.guides-grid .card-copy > p { margin:11px 0 17px; font-size:9px; }
.product-card { overflow:hidden; border:1px solid rgba(221,203,168,.9); border-radius:12px; background:#fffefa; box-shadow:0 12px 30px rgba(76,48,19,.06); transition:transform .25s ease,box-shadow .25s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 16px 35px rgba(76,48,19,.12); }
.product-image { display:block; height:500px; padding:14px; background:var(--cream); }
.product-image img { display:block; width:100%; height:100%; object-fit:contain; border-radius:8px; }
.card-copy { padding:21px 23px 22px; }
.badge { display:inline-block; margin-bottom:11px; padding:6px 10px; border-radius:99px; background:#f6e8c6; color:#7a5617; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.card-copy h3 { font-size:34px; line-height:.98; }
.card-copy > p { margin:13px 0 21px; color:#8c6c42; font-size:10px; font-weight:700; letter-spacing:1.25px; text-transform:uppercase; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:17px; border-top:1px solid var(--line); }
.card-bottom strong { font:600 25px/1 "Cormorant Garamond",serif; color:var(--bronze); }
.card-bottom a { color:#805912; font-size:12px; font-weight:700; text-decoration:none; }
.card-bottom span { margin-left:5px; font-size:16px; }
.foundation { max-width:860px; margin:0 0 74px; padding:36px 39px; border-left:3px solid var(--gold); border-radius:0 12px 12px 0; background:#f8f1e3; }
.foundation h2 { margin-bottom:14px; font-size:39px; }
.foundation > p:last-child { max-width:700px; margin:0; color:#5f5348; font-size:14px; line-height:1.75; }
.crumb { padding:18px 0; border-bottom:1px solid var(--line); color:#866b4d; font-size:12px; }
.crumb a { color:inherit; text-decoration:none; }
.crumb span { color:var(--gold); padding:0 9px; }
.detail { padding:36px 0 74px; }
.product { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr); gap:48px; align-items:start; }
.gallery { display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:start; }
.gallery-thumbs { display:grid; gap:10px; }
.gallery-thumb { position:relative; padding:0; border:1px solid transparent; background:#f5eee2; cursor:pointer; overflow:hidden; border-radius:8px; aspect-ratio:9/16; transition:border-color .2s ease,box-shadow .2s ease; }
.gallery-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-thumb:hover,.gallery-thumb.is-active { border-color:var(--gold); box-shadow:0 0 0 2px rgba(185,132,27,.14); }
.gallery-video::after { content:'▶'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:18px; text-shadow:0 1px 4px rgba(0,0,0,.65); background:rgba(34,25,18,.32); }
.gallery-main { height:clamp(500px,56vw,660px); overflow:hidden; border-radius:12px; background:#f5eee2; box-shadow:0 10px 24px rgba(76,48,19,.08); }
.gallery-main button { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.gallery-main img,.gallery-main video { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-main video { background:#241b15; }
.gallery-main [hidden] { display:none !important; }
.details { padding:8px 0; }
.details h2 { font-size:46px; line-height:.98; }
.subtitle { margin:15px 0 22px; color:#8c6c42; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.price { margin:0 0 22px; font:600 31px/1 "Cormorant Garamond",serif; color:#4a2d11; }
.lead { margin:0 0 23px; font-size:14px; line-height:1.75; color:#52463b; }
.specs { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:25px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.spec { padding:15px 0; border-bottom:1px solid rgba(221,203,168,.55); }
.spec:nth-last-child(-n+2) { border-bottom:0; }
.spec:nth-child(odd) { padding-right:18px; }
.spec-label { display:block; margin-bottom:5px; color:#917445; font-size:10px; font-weight:700; letter-spacing:1.15px; text-transform:uppercase; }
.spec-value { font-size:12px; line-height:1.45; color:#3f3329; }
.primary { display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; border-radius:8px; background:linear-gradient(120deg,#9e6d14,#c79b36); color:#fff; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; box-shadow:0 8px 18px rgba(143,95,14,.18); }
.notice { margin-top:18px; padding:18px 19px; background:#f8f1e3; border-left:3px solid var(--gold); border-radius:0 8px 8px 0; }
.notice strong { display:block; margin-bottom:7px; color:#60421d; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.notice p { margin:0; color:#5f5348; font-size:12px; line-height:1.7; }
.story { margin-top:65px; padding:44px 0 0; border-top:1px solid var(--line); }
.story-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; }
.story h2 { font-size:39px; }
.story p { margin:0 0 13px; color:#594e44; font-size:14px; line-height:1.8; }
footer { background:#3d2616; color:#f7eedf; }
.footer { display:flex; justify-content:space-between; gap:24px; padding:32px 0; align-items:center; font-size:12px; line-height:1.6; }
.footer strong { display:block; color:#f6cf78; font-family:"Cormorant Garamond",serif; font-size:21px; font-weight:600; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 18px; max-width:430px; }
.footer-links a { color:#f7eedf; text-decoration:none; }
.footer-links a:hover { color:#f6cf78; }
dialog { max-width:min(900px,92vw); padding:0; border:0; border-radius:12px; background:transparent; box-shadow:0 20px 80px rgba(0,0,0,.45); }
dialog::backdrop { background:rgba(35,23,13,.72); backdrop-filter:blur(4px); }
dialog img { display:block; max-width:90vw; max-height:85vh; object-fit:contain; background:#fff; }
dialog button { position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(50,33,20,.88); color:#fff; font-size:22px; cursor:pointer; }
@media (max-width:1040px) and (min-width:761px) { .guides-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:910px; } .guides-grid .product-image { height:460px; } }
@media (max-width:760px) { .shell { padding:0 18px; } .nav { min-height:74px; } .brand { min-width:0; } .brand img { width:46px; height:46px; } .brand-name { font-size:26px; } .brand-small,nav { display:none; } .whatsapp { padding:0 11px; font-size:9px; } .intro,.section-heading { padding-top:40px; display:block; } .intro { padding-bottom:25px; } h1 { font-size:44px; } .intro > p,.section-heading > p { margin-top:16px; } .catalog { padding-top:25px; } .product-grid,.product,.story-grid { grid-template-columns:1fr; gap:22px; } .product-image { height:min(82vh,600px); } .foundation { margin-bottom:48px; padding:28px 24px; } .foundation h2 { font-size:35px; } .detail { padding-top:25px; } .gallery { grid-template-columns:1fr; gap:11px; } .gallery-main { height:min(74vh,640px); } .gallery-thumbs { grid-template-columns:repeat(5,minmax(68px,1fr)); overflow-x:auto; } .gallery-thumb { min-width:68px; } .details h2 { font-size:40px; } .details { padding:0; } .story { margin-top:45px; padding-top:33px; } .footer { display:block; } .footer-links { justify-content:flex-start; margin-top:14px; } }