/* =========================================================
   VALCOM TRAVEL — "DAYLIGHT FOLIO" · layout & motion (light)
   White, crisp, professional. Navy ink + single gold accent.
   ========================================================= */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ol { margin:0; padding:0; list-style:none; }
::selection { background:var(--gold-300); color:var(--navy-900); }
h1,h2,h3,h4 { margin:0; font-weight:600; line-height:1.1; color:var(--ink-900); text-wrap:balance; }
p { margin:0; text-wrap:pretty; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.serif { font-family:var(--font-accent); }

.eyebrow {
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-700);
  display:inline-flex; align-items:center; gap:0.7em;
}
.eyebrow::before { content:""; width:30px; height:2px; transform-origin:left; background:var(--gold-500); transition:transform .7s var(--ease) .1s; }
.reveal .eyebrow::before, .eyebrow.reveal::before { transform:scaleX(0); }
.reveal.in .eyebrow::before, .eyebrow.reveal.in::before, .in .eyebrow::before { transform:scaleX(1); }

/* roman numeral inline marks */
.rn { font-family:var(--font-display); font-style:normal; font-weight:600; color:var(--gold-700); font-size:0.82em; margin-right:0.5em; letter-spacing:0.04em; }

/* =========================================================
   BUTTONS — WhatsApp green / Call navy / outline
   ========================================================= */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-weight:700; letter-spacing:0.01em; padding:0.9em 1.6em; border-radius:999px; font-size:0.95rem;
  isolation:isolate; transition:box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s, transform .2s; }
.btn svg { width:1.15em; height:1.15em; }
.btn:active { transform:scale(.975); }

/* WhatsApp = green */
.btn-wa { background:var(--whatsapp); color:#fff; box-shadow:0 12px 26px -14px rgba(37,211,102,.7); }
.btn-wa:hover { background:#1ebe5b; box-shadow:0 18px 34px -14px rgba(37,211,102,.85); }
.wa-ico { position:relative; display:inline-flex; }
.wa-ico .wa-dot { display:none; }

/* Call = navy */
.btn-call { background:var(--navy-900); color:#fff; box-shadow:0 12px 26px -16px rgba(11,27,45,.8); }
.btn-call:hover { background:#13314e; box-shadow:0 18px 34px -16px rgba(11,27,45,.9); }

/* outline (navy) — light surfaces */
.btn-ghost { border:1.5px solid var(--line-2); color:var(--ink-900); background:#fff; }
.btn-ghost:hover { border-color:var(--gold-500); color:var(--gold-700); }

/* outline (white) — over hero photo */
.btn-line { border:1.5px solid rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(2px); }
.btn-line:hover { border-color:#fff; background:rgba(255,255,255,.16); }

.btn-sm { padding:0.6em 1.1em; font-size:0.85rem; }
.hide-sm { }

/* =========================================================
   HEADER
   ========================================================= */
.hdr { position:fixed; inset:0 0 auto 0; z-index:60; transition:background .35s var(--ease), box-shadow .35s, border-color .35s; border-bottom:1px solid transparent; }
.hdr.scrolled { background:rgba(255,255,255,0.92); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 8px 30px -22px rgba(16,26,38,.5); border-bottom-color:var(--line); }
.hdr-in { display:flex; align-items:center; gap:1.3rem; height:74px; }
.brand { display:flex; align-items:center; gap:0.65rem; margin-right:auto; }
.brand img { width:42px; height:42px; transition:transform .8s var(--ease); }
.brand:hover img { transform:rotate(-6deg); }
.brand-name { font-family:var(--font-display); font-weight:700; letter-spacing:0.16em; font-size:1.04rem; line-height:1; color:var(--navy-900); }
.brand-name small { display:block; color:var(--gold-700); font-family:var(--font-body); font-weight:600; letter-spacing:0.4em; font-size:0.52rem; margin-top:4px; }
/* header text is light while transparent over the hero photo, flips dark on scroll */
.hdr:not(.scrolled) .brand-name { color:#fff; }
.hdr:not(.scrolled) .brand-name small { color:var(--gold-300); }
.hdr:not(.scrolled) .nav a { color:rgba(255,255,255,.82); }
.hdr:not(.scrolled) .nav a:hover, .hdr:not(.scrolled) .nav a.active { color:#fff; }
.hdr:not(.scrolled) .brand img { filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.nav { display:flex; align-items:center; gap:1.6rem; }
.nav a { position:relative; font-size:0.85rem; font-weight:600; letter-spacing:0.01em; color:var(--ink-700); padding:6px 0; transition:color .25s; }
.nav a:hover, .nav a.active { color:var(--gold-700); }
.nav-underline { position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--gold-500); }
.hdr-actions { display:flex; align-items:center; gap:0.6rem; }
.lang { display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.6); }
.hdr:not(.scrolled) .lang { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.lang button { position:relative; padding:0.34em 0.7em; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; color:var(--ink-500); transition:color .25s; }
.hdr:not(.scrolled) .lang button { color:rgba(255,255,255,.8); }
.lang button.on { color:var(--navy-900); }
.lang button span { position:relative; z-index:1; }
.lang-pill { position:absolute; inset:0; background:var(--gold-400); z-index:0; }
.burger { display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:11px; align-items:center; justify-content:center; }
.hdr:not(.scrolled) .burger { border-color:rgba(255,255,255,.5); }
.burger span, .burger span::before, .burger span::after { content:""; display:block; width:18px; height:2px; background:var(--ink-900); position:relative; transition:.3s; }
.hdr:not(.scrolled) .burger span, .hdr:not(.scrolled) .burger span::before, .hdr:not(.scrolled) .burger span::after { background:#fff; }
.burger span::before { position:absolute; top:-6px; } .burger span::after { position:absolute; top:6px; }

.drawer { position:fixed; inset:0; z-index:80; display:none; }
.drawer.open { display:block; }
.drawer-bg { position:absolute; inset:0; background:rgba(16,26,38,.4); backdrop-filter:blur(4px); }
.drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(82vw,340px); background:#fff; border-left:1px solid var(--line); padding:5rem 1.8rem 2rem; display:flex; flex-direction:column; gap:0.2rem; box-shadow:-20px 0 60px -30px rgba(16,26,38,.4); }
.drawer-panel a { padding:0.85rem 0; font-family:var(--font-accent); font-size:1.5rem; color:var(--ink-900); border-bottom:1px solid var(--line); }
.drawer-panel a .rn { font-size:0.7em; }
.drawer-panel a:hover { color:var(--gold-700); }
.drawer-panel .lang { margin-top:1.4rem; align-self:flex-start; }
.drawer-close { position:absolute; top:1.3rem; right:1.4rem; font-size:1.9rem; color:var(--ink-700); width:40px; height:40px; }

/* =========================================================
   HERO — full-bleed photo, light scrim, trust badge, dual CTA
   ========================================================= */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.hero-bg::after { content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,16,26,.62) 0%, rgba(8,16,26,.30) 38%, rgba(8,16,26,.20) 64%, rgba(8,16,26,.70) 100%),
    linear-gradient(92deg, rgba(8,16,26,.55) 0%, rgba(8,16,26,.10) 58%, transparent 100%); }
.hero-in { position:relative; z-index:3; padding-top:104px; padding-bottom:9vh; max-width:min(740px, 82%); }
.folio-mark { font-family:var(--font-body); font-weight:700; font-size:0.64rem; letter-spacing:0.36em; color:var(--gold-300); text-transform:uppercase; margin-bottom:1rem; }
.hero-eyebrow { margin-bottom:1.1rem; color:var(--gold-300); }
.hero-eyebrow::before { background:var(--gold-300); }

/* trust badge — book now, pay on arrival */
.trust-badge { display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.3rem;
  padding:.62em 1.05em; border-radius:999px; background:rgba(255,255,255,.95);
  border:1.5px solid var(--gold-500); box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
  font-weight:700; font-size:.86rem; letter-spacing:.01em; color:var(--navy-900); }
.trust-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 3px var(--gold-100); flex:none; }
.trust-badge b { color:var(--gold-700); }

.hero-title { display:flex; flex-direction:column; text-shadow:0 4px 30px rgba(0,0,0,.45); }
.hero-title .l1 { font-family:var(--font-display); font-weight:700; font-size:var(--fs-hero); letter-spacing:0.03em; line-height:1.0; color:#fff; }
.hero-title .l2 { font-family:var(--font-accent); font-style:normal; font-weight:700; line-height:0.98;
  font-size:clamp(2.9rem, 7.8vw, 6.4rem); color:var(--gold-400); margin-top:0.08rem; text-shadow:0 3px 26px rgba(0,0,0,.55); }
.hero-keyline { display:none; }
.hero-lead { font-family:var(--font-body); font-size:clamp(1.05rem,1.7vw,1.32rem); font-style:normal; font-weight:400; color:#F7F1E6; max-width:42ch; margin-top:1.2rem; line-height:1.55; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.hero-cta-eye { margin-top:1.6rem; color:var(--gold-300); }
.hero-cta-eye::before { background:var(--gold-300); }
.hero-cta { display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:.8rem; align-items:center; }
.hero-cta .btn-line { margin-left:.2rem; }
.scrollcue { position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:3; }
.scrollcue .mouse { width:22px; height:34px; border:1.5px solid rgba(255,255,255,.7); border-radius:12px; position:relative; }
.scrollcue .mouse::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:2px; background:#fff; transform:translateX(-50%); animation:wheel 1.7s var(--ease) infinite; }
@keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1;transform:translate(-50%,9px)} 100%{opacity:0;transform:translate(-50%,12px)} }

/* =========================================================
   INTRO — foreword + thin rule labels (light)
   ========================================================= */
.intro { background:var(--paper); border-bottom:1px solid var(--line); }
.intro-in { padding:clamp(3.2rem,6.5vw,5.4rem) 0; text-align:center; max-width:960px; margin-inline:auto; }
.foreword { font-family:var(--font-accent); font-weight:500; font-size:clamp(1.55rem,3vw,2.5rem); line-height:1.32; color:var(--ink-900); }
.foreword em { font-style:italic; color:var(--gold-700); }
.rule-labels { display:flex; align-items:center; gap:1.3rem; margin-top:2.2rem; }
.rule-labels .hair { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2)); transform:scaleX(0); transition:transform .9s var(--ease) .15s; }
.rule-labels .hair:last-child { background:linear-gradient(90deg,var(--line-2),transparent); transform-origin:right; }
.rule-labels.in .hair { transform:scaleX(1); }
.mlabels { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.3rem; }
.mlabel { font-size:0.7rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-700); white-space:nowrap; }

/* =========================================================
   CHAPTERS (service sections) — light, crisp cards
   ========================================================= */
.chapter { position:relative; padding-block:clamp(3.6rem,7vw,6rem); }
.chapter:nth-of-type(even) { background:var(--paper-2); }
.chapter-head { max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
.chapter-head-txt h2 { font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600; letter-spacing:0.05em; line-height:1.06; margin-top:0.7rem; color:var(--navy-900); }
.chapter-head-txt p { margin-top:0.8rem; font-size:var(--fs-lead); color:var(--ink-700); max-width:54ch; }

/* lead plate */
.plate { display:grid; grid-template-columns:1.12fr 0.88fr; gap:clamp(1.4rem,3.2vw,3rem); align-items:center; margin-bottom:clamp(2rem,4vw,3rem); }
.plate.flip .plate-media { order:2; }
.plate-media { position:relative; aspect-ratio:16/11; overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.plate-media img { width:100%; height:108%; object-fit:cover; transition:transform 1s var(--ease); }
.plate:hover .plate-media img { transform:scale(1.04); }
.plate-media .frame-num { position:absolute; top:0.85rem; left:0.95rem; z-index:3; font-family:var(--font-display); font-size:0.74rem; letter-spacing:0.2em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.plate-media .gild, .plate-media .tick { display:none; }
.plate-body h3 { font-family:var(--font-display); font-size:clamp(1.45rem,2.5vw,2rem); font-weight:600; letter-spacing:0.01em; color:var(--navy-900); line-height:1.14; }
.plate-body p { font-family:var(--font-accent); font-style:italic; font-size:clamp(1.12rem,1.6vw,1.36rem); color:var(--ink-700); line-height:1.5; margin-top:0.7rem; }
.plate-body .btn { margin-top:1.4rem; }

/* supporting column cards */
.col-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2vw,1.6rem); }
.col-card { position:relative; display:flex; flex-direction:column; background:var(--card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); transition:box-shadow .45s var(--ease), transform .45s var(--ease); }
.col-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-6px); }
.col-media { position:relative; aspect-ratio:3/2; overflow:hidden; }
.col-media img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.col-card:hover .col-media img { transform:scale(1.06); }
.col-media .frame-num { position:absolute; top:0.6rem; left:0.7rem; font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.16em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.col-body { padding:1.05rem 1.15rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.col-body h4 { font-family:var(--font-body); font-size:1.12rem; font-weight:600; letter-spacing:-0.012em; color:var(--navy-900); line-height:1.25; }
.col-body p { font-size:0.92rem; color:var(--ink-500); line-height:1.55; margin-top:0.4rem; flex:1; }
.card-cta { margin-top:0.9rem; display:inline-flex; align-items:center; gap:0.5em; font-weight:700; font-size:0.84rem; color:var(--whatsapp-deep); transition:gap .3s, color .3s; }
.card-cta svg:first-child { width:1.05em; height:1.05em; color:var(--whatsapp); }
.card-cta svg:last-child { width:1em; height:1em; }
.card-cta:hover { gap:0.78em; color:#0e7a52; }

/* contact link per card / plate → jumps to the contact block (replaces per-card WhatsApp) */
.card-link { margin-top:.95rem; align-self:flex-start; }
.plate-link { margin-top:1.4rem; align-self:flex-start; }
.link-cta { position:relative; display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.92rem; letter-spacing:.01em; color:var(--gold-700); transition:gap .3s, color .3s; }
.link-cta svg { width:1.05em; height:1.05em; transition:transform .3s; }
.link-cta::after { content:""; position:absolute; left:0; right:1.7em; bottom:-3px; height:1.5px; background:var(--gold-500); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.link-cta:hover { color:var(--gold-800); gap:.72em; }
.link-cta:hover::after { transform:scaleX(1); }
.link-cta:hover svg { transform:translateX(3px); }

/* =========================================================
   WHY — light feature band
   ========================================================= */
.why { background:var(--paper-2); color:var(--ink-700); border-block:1px solid var(--line); }
.why-grid { display:grid; grid-template-columns:1fr 0.92fr; gap:clamp(1.8rem,5vw,4.5rem); align-items:center; padding-block:var(--section-y); }
.why-text .eyebrow { color:var(--gold-700); }
.why-text .eyebrow::before { background:var(--gold-500); }
.why-text h2 { font-family:var(--font-display); font-size:var(--fs-h2); margin-top:0.8rem; letter-spacing:0.015em; color:var(--navy-900); }
.why-list { margin-top:2rem; display:flex; flex-direction:column; }
.why-list li { display:flex; gap:1.2rem; padding:1.2rem 0; border-top:1px solid var(--line-2); }
.why-list li:last-child { border-bottom:1px solid var(--line-2); }
.why-num { font-family:var(--font-accent); font-style:italic; font-weight:600; font-size:1.5rem; color:var(--gold-600); min-width:1.6ch; line-height:1; }
.why-list h4 { font-family:var(--font-body); font-size:1.05rem; font-weight:600; letter-spacing:-0.005em; color:var(--navy-900); }
.why-list p { font-size:0.95rem; color:var(--ink-500); margin-top:0.3rem; max-width:46ch; }
.why-media { position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-hover); }
.why-media img { width:100%; height:100%; object-fit:cover; }
.why-media figcaption { position:absolute; bottom:1rem; left:1.1rem; font-family:var(--font-body); font-weight:600; font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7); }

/* =========================================================
   CONTACT — clean light invitation card
   ========================================================= */
.contact { position:relative; background:var(--paper-2); border-top:1px solid var(--line); }
.contact-bg, .contact-bloom { display:none; }
.contact-in { position:relative; z-index:2; padding-block:clamp(4rem,8vw,7rem); }
.invite { position:relative; text-align:center; max-width:720px; margin-inline:auto; padding:clamp(2.4rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem);
  border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-card); }
.invite .tick { display:none; }
.invite .folio-mark { display:block; color:var(--gold-700); margin-bottom:1rem; }
.invite .eyebrow { color:var(--gold-700); }
.invite h2 { font-family:var(--font-display); font-size:var(--fs-h2); letter-spacing:0.015em; margin-top:0.9rem; color:var(--navy-900); }
.invite .lead { font-family:var(--font-accent); font-style:italic; font-size:var(--fs-lead); color:var(--ink-700); max-width:46ch; margin:0.9rem auto 0; }
.contact-actions { display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; margin-top:1.8rem; }
.contact-meta { margin-top:1.9rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.7rem 1.7rem; justify-content:center; color:var(--ink-500); font-size:.92rem; }
.contact-meta a, .contact-meta span { display:inline-flex; align-items:center; gap:.5em; color:var(--ink-700); transition:color .25s; }
.contact-meta a:hover { color:var(--gold-700); }
.contact-meta svg { width:1.08em; height:1.08em; color:var(--gold-600); }

/* =========================================================
   FOOTER — light
   ========================================================= */
.foot { position:relative; background:var(--navy-900); color:rgba(255,255,255,.72); padding-block:clamp(3rem,5vw,4.6rem) 2rem; }
.foot::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold-500),transparent); }
.foot-top { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }
.foot-word { display:inline-block; font-family:var(--font-display); font-weight:700; letter-spacing:0.16em; font-size:1.32rem; line-height:1; color:#fff; }
.foot-word small { display:block; color:var(--gold-400); font-family:var(--font-body); font-weight:600; letter-spacing:0.42em; font-size:0.56rem; margin-top:5px; }
.foot-tagline { margin-top:1rem; font-family:var(--font-accent); font-style:italic; font-size:1.18rem; color:var(--gold-200); max-width:34ch; }
.foot-contact { margin-top:1.5rem; display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; }
.foot-contact a, .foot-contact span { display:inline-flex; align-items:center; gap:.65em; color:rgba(255,255,255,.78); transition:color .25s; }
.foot-contact a:hover { color:var(--gold-300); }
.foot-contact svg { width:1.05em; height:1.05em; color:var(--gold-400); flex:none; }
.foot-toc { display:flex; flex-direction:column; gap:.75rem; font-size:.92rem; justify-self:end; }
.foot-toc a { color:rgba(255,255,255,.72); transition:color .25s, padding-left .25s; }
.foot-toc a:hover { color:var(--gold-300); padding-left:3px; }
.foot-legal { margin-top:clamp(2.2rem,4vw,3.2rem); padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; justify-content:space-between; color:rgba(255,255,255,.46); font-size:.78rem; }
.foot-legal a { color:rgba(255,255,255,.6); transition:color .25s; } .foot-legal a:hover { color:var(--gold-300); }
.foot-made a { color:var(--gold-400); font-weight:600; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}.reveal[data-d="3"]{transition-delay:.21s}
.col-card.reveal { transform:translateY(18px); }
.col-card.reveal.in { transform:none; }
.col-card:nth-child(2).reveal{transition-delay:.05s}.col-card:nth-child(3).reveal{transition-delay:.1s}.col-card:nth-child(4).reveal{transition-delay:.15s}

/* =========================================================
   POLISH — focus rings, floating action buttons
   ========================================================= */
:where(a, button, .btn, input):focus-visible { outline:2px solid var(--gold-600); outline-offset:3px; border-radius:8px; }

/* subtle paper grain — breaks the flat-white sterility (fixed, never blocks clicks) */
body::after { content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px; }

/* anchored section headings clear the fixed header on jump */
.chapter, .why, .intro, #contact { scroll-margin-top:88px; }

/* dual floating action buttons (Call + WhatsApp) */
.fab-stack { position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:clamp(1rem,3vw,1.6rem); z-index:75; display:flex; flex-direction:column; gap:.7rem;
  transform:translateY(140%) scale(.9); opacity:0; pointer-events:none; transition:transform .55s var(--ease), opacity .5s var(--ease); }
.fab-stack.show { transform:none; opacity:1; pointer-events:auto; }
.fab { display:inline-flex; align-items:center; height:54px; width:54px; border-radius:999px; overflow:hidden; color:#fff;
  box-shadow:0 14px 30px -12px rgba(16,26,38,.5); transition:width .4s var(--ease); }
.fab-wa { background:var(--whatsapp); }
.fab-call { background:var(--navy-900); }
.fab-glyph { position:relative; flex:none; width:54px; height:54px; display:grid; place-items:center; }
.fab-glyph svg { width:24px; height:24px; }
.fab-wa.fab .fab-glyph::after { content:""; position:absolute; top:11px; right:13px; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--whatsapp); }
.fab-label { white-space:nowrap; font-weight:700; font-size:.88rem; max-width:0; opacity:0; overflow:hidden; transition:max-width .4s var(--ease), opacity .3s; }
.fab:hover { width:auto; padding-right:1.2rem; }
.fab:hover .fab-label { max-width:220px; opacity:1; }
.fab-wa.show-pulse { animation:fabpulse 2.8s ease-in-out infinite; }
@keyframes fabpulse { 0%,100%{ box-shadow:0 14px 30px -12px rgba(16,26,38,.5), 0 0 0 0 rgba(37,211,102,.5) } 50%{ box-shadow:0 14px 30px -12px rgba(16,26,38,.5), 0 0 0 13px rgba(37,211,102,0) } }
@media (prefers-reduced-motion:reduce){ .fab-wa.show-pulse{ animation:none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .nav { display:none; }
  .burger { display:flex; }
  .lang.hide-sm, .hdr-actions .lang { display:none; }
  .plate { grid-template-columns:1fr; }
  .plate.flip .plate-media { order:0; }
  .why-grid { grid-template-columns:1fr; }
  .why-media { order:-1; aspect-ratio:4/3; max-height:46vh; }
  .foot-top { grid-template-columns:1fr; gap:2rem; }
  .foot-toc { justify-self:start; flex-flow:row wrap; gap:.7rem 1.3rem; }
}
@media (max-width:560px){
  .hdr-in { height:62px; gap:0.6rem; }
  .brand img { width:36px; height:36px; }
  .brand-name small { letter-spacing:0.3em; }
  .hero-in { max-width:100%; }
  .hero-cta { flex-direction:column; align-items:stretch; gap:.6rem; }
  .hero-cta .btn { width:100%; }
  .col-grid { grid-template-columns:1fr; }
  .chapter-head { grid-template-columns:1fr; gap:0.4rem; }
  .roman { font-size:3rem; }
  .hide-sm { display:none !important; }
}