:root { --bg:#0e0d0c; --fg:#f2ede6; --muted:#a39d94; --accent:#c9a46a; --card:#181614; }
* { box-sizing:border-box; margin:0 }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--fg); font:16px/1.6 Inter,system-ui,sans-serif }
a { color:inherit }
img { max-width:100%; display:block }
h1,h2,h3 { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; line-height:1.1 }
h2 { font-size:clamp(2rem,5vw,3.2rem); margin-bottom:1rem }
.wrap { max-width:1150px; margin:auto; padding-inline:20px }
section { padding-block:96px }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:600 }
.lead { color:var(--muted); max-width:60ch }
.btn { display:inline-block; padding:14px 28px; border:1px solid var(--accent); color:var(--fg); text-decoration:none; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; transition:background .2s }
.btn:hover, .btn.solid { background:var(--accent); color:var(--bg) }
/* media from CDN: gradient shows through if the file is missing */
.media { position:relative; overflow:hidden; background:linear-gradient(135deg,#2a241d,#14110f 60%,#3a2f22) }
.media img, .media video { width:100%; height:100%; object-fit:cover }

header { position:fixed; inset:0 0 auto; z-index:10; padding-block:calc(18px + env(safe-area-inset-top, 0px)) 18px; transition:background .3s, padding .3s, box-shadow .3s }
header.scrolled { background:#0e0d0ce0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding-block:calc(10px + env(safe-area-inset-top, 0px)) 10px; box-shadow:0 1px 0 #ffffff14 }
header .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px }
.logo { font-family:"Cormorant Garamond",serif; font-size:1.6rem; text-decoration:none; letter-spacing:.04em }
nav { display:flex; align-items:center; gap:28px; font-size:.85rem }
nav a { text-decoration:none; color:#f2ede6cc; text-shadow:0 1px 6px #0009 } nav a:hover { color:var(--fg) }
nav .btn { padding:10px 20px; text-shadow:none }
@media (max-width:700px) { nav a:not(.cta) { display:none } }

.hero { position:relative; height:100svh; min-height:560px; display:grid; align-items:end }
.hero .media { position:absolute; inset:0 }
.hero .media::after { content:""; position:absolute; inset:0; pointer-events:none; background:
    linear-gradient(#0e0d0ca6, transparent 22%),
    linear-gradient(90deg, #0e0d0cd9 0%, #0e0d0c8c 45%, #0e0d0c26 75%),
    linear-gradient(transparent 55%, var(--bg)) }
.hero h1, .hero .lead, .hero .eyebrow { text-shadow:0 2px 18px #0008 }
.hero .lead { color:#e6e0d6 }
.hero .wrap { position:relative; padding-bottom:12vh; width:100% }
.hero h1 { font-size:clamp(2.8rem,8vw,6rem); margin-block:12px 20px; max-width:14ch }
.hero h1 em { color:var(--accent) }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px }

.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:48px }
.service { background:var(--card) }
.service .media { aspect-ratio:4/5 }
.service div:last-child { padding:22px }
.service h3 { font-size:1.8rem; margin-bottom:6px }
.service p { color:var(--muted); font-size:.92rem }

.portfolio { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:48px }
.portfolio figure { aspect-ratio:3/2 }
.portfolio figcaption { position:absolute; left:16px; bottom:12px; font-size:.85rem; text-shadow:0 1px 8px #000 }

.steps { counter-reset:s; padding:0; display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:48px }
.steps li { list-style:none; border-top:1px solid #ffffff22; padding-top:20px }
.steps li::before { counter-increment:s; content:"0" counter(s); font-family:"Cormorant Garamond",serif; font-size:2.4rem; color:var(--accent); display:block }
.steps p { color:var(--muted); font-size:.92rem }

.about { display:grid; gap:48px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:center }
.about .media { aspect-ratio:4/5 }
.stats { display:flex; gap:40px; flex-wrap:wrap; margin-top:32px }
.stats b { display:block; font-family:"Cormorant Garamond",serif; font-size:2.6rem; font-weight:500; color:var(--accent) }
.stats span { color:var(--muted); font-size:.85rem }

#contacto { background:var(--card); text-align:center }
#contacto .lead { margin:0 auto 32px }
.contact-list { display:flex; gap:12px 32px; justify-content:center; flex-wrap:wrap; margin-top:40px; color:var(--muted) }
footer { padding-block:32px; color:var(--muted); font-size:.8rem; text-align:center }
.sound { position:absolute; right:10px; bottom:10px; z-index:2; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; opacity:0; filter:drop-shadow(0 1px 3px #000c); transition:opacity .25s, background .25s }
.sound svg { width:18px; height:18px }
.media:hover .sound, .sound:focus-visible, .sound[aria-pressed="true"] { opacity:.8 }
.sound:hover { opacity:1; background:#0006 }
@media (hover:none) { .sound { opacity:.5 } }
.hero .sound { right:20px; bottom:28px; opacity:.6; width:44px; height:44px }
.hero .sound svg { width:20px; height:20px }
/* nudge: after 2s muted, pulse the hero sound button to invite unmuting */
/* 3 pulses in one 5.4s run: two strong, a faint third, then back to normal */
.hero .sound.nudge { animation:ring 5.4s ease-out forwards }
.hero .sound.nudge svg { animation:beat 5.4s ease-in-out forwards }
@keyframes ring {
  0%   { box-shadow:0 0 0 0 #c9a46ab3; opacity:1; background:#0e0d0c99 }
  23%  { box-shadow:0 0 0 16px #c9a46a00 } 30% { box-shadow:0 0 0 0 #c9a46a00 }
  33%  { box-shadow:0 0 0 0 #c9a46ab3 }
  56%  { box-shadow:0 0 0 16px #c9a46a00 } 63% { box-shadow:0 0 0 0 #c9a46a00 }
  66%  { box-shadow:0 0 0 0 #c9a46a4d }
  88%  { box-shadow:0 0 0 12px #c9a46a00; opacity:1; background:#0e0d0c99 }
  100% { box-shadow:0 0 0 0 #c9a46a00; opacity:.6; background:transparent }
}
@keyframes beat {
  0%,13%,33%,46%,66%,78%,100% { transform:scale(1) }
  5%,38% { transform:scale(1.2) } 71% { transform:scale(1.08) }
}
@media (prefers-reduced-motion:reduce) { .hero .sound.nudge, .hero .sound.nudge svg { animation:none } }
.price { color:var(--accent); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin-bottom:10px }
.service ul { padding-left:18px; margin-top:12px; color:var(--muted); font-size:.9rem } .service li + li { margin-top:4px }
.also { margin-top:20px; padding:22px 24px; border:1px solid #ffffff1a; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between }
.also p { color:var(--muted); max-width:70ch } .also b { color:var(--fg); font-weight:500 }
.note { color:var(--muted); font-size:.8rem; letter-spacing:.04em; margin-top:18px }
.quotes { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:48px }
.quotes blockquote { background:var(--card); padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:20px }
.quotes blockquote p { font-family:"Cormorant Garamond",Georgia,serif; font-size:1.35rem; line-height:1.35 }
.quotes cite { font-style:normal; color:var(--muted); font-size:.85rem } .quotes cite b { color:var(--fg); font-weight:500; display:block }
.faq { max-width:780px; margin-top:40px }
.faq details { border-top:1px solid #ffffff1a; padding-block:18px } .faq details:last-child { border-bottom:1px solid #ffffff1a }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; font-weight:500 }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; color:var(--accent); font-size:1.3rem; line-height:1 } .faq details[open] summary::after { content:"−" }
.faq details p { color:var(--muted); margin-top:10px; max-width:65ch }
.quote-form { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); max-width:780px; margin:0 auto; text-align:left }
.quote-form label { display:grid; gap:6px; font-size:.8rem; color:var(--muted); letter-spacing:.04em }
.quote-form input, .quote-form select, .quote-form textarea { font:inherit; color:var(--fg); background:var(--bg); border:1px solid #ffffff26; padding:12px 14px; border-radius:0; color-scheme:dark; width:100% }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline:1px solid var(--accent); border-color:var(--accent) }
.quote-form .full { grid-column:1/-1 }
.quote-form button { font:inherit; cursor:pointer; justify-self:center; margin-top:8px; background:transparent; color:var(--fg) }
.quote-form small { color:#a39d9499; font-size:.75rem }
.quick-quote { max-width:780px; margin:36px auto 0 }
.quick-quote summary { cursor:pointer; list-style:none; display:inline-block; color:var(--muted); font-size:.9rem; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#a39d9466 }
.quick-quote summary::-webkit-details-marker { display:none }
.quick-quote summary:hover, .quick-quote[open] summary { color:var(--fg) }
.quick-quote form { margin-top:24px }