/* =====================================================================
   DSYO — Decoración, Servicios y Obras
   Vanilla CSS, sin frameworks ni dependencias externas.
   Paleta "obrador cálido": papel crudo + tinta carbón + terracota + oliva,
   sobre una retícula de líneas finas que evoca un plano de arquitectura.
   Tipografía: Fraunces (display) + Hanken Grotesk (texto), auto-hospedadas.
===================================================================== */
@import url('../fonts/fonts.css');

:root{
  --paper:#F4EEE3;
  --paper-deep:#E8DCC5;
  --paper-rgb:244,238,227;
  --ink:#221C15;
  --ink-soft:#5C5346;
  --clay:#BC4B1C;
  --clay-deep:#8E3712;
  --clay-rgb:188,75,28;
  --olive:#4F5A3C;
  --olive-deep:#3B4530;
  --line: rgba(34,28,21,.15);
  --line-strong: rgba(34,28,21,.28);
  --shadow: 0 18px 40px -22px rgba(34,28,21,.35);
  --radius: 2px;
  --f-display: 'Fraunces', ui-serif, Georgia, serif;
  --f-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --danger:#A3311A;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

/* ---------- Textura de fondo: retícula fina tipo plano técnico ---------- */
.blueprint-bg{
  background-image:
    linear-gradient(rgba(34,28,21,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,28,21,.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* ---------- Layout utils ---------- */
.wrap{ max-width:1200px; margin:0 auto; padding-inline:1.5rem; }
.section{ padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--alt{ background:var(--paper-deep); }
.t-center{ text-align:center; }
.mt-sm{ margin-top:.75rem; } .mt-md{ margin-top:1.5rem; } .mt-lg{ margin-top:2.75rem; }
.mb-sm{ margin-bottom:.75rem; } .mb-md{ margin-bottom:1.5rem; } .mb-lg{ margin-bottom:2.75rem; }
.fs-sm{ font-size:.92rem; }
.measure{ max-width:60ch; } .measure-30{ max-width:30ch; } .measure-36{ max-width:36ch; } .measure-40{ max-width:40ch; } .measure-46{ max-width:46ch; }

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-body); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay);
}
.kicker::before{ content:''; width:1.4rem; height:1.5px; background:var(--clay); }
.sec-title{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-top:.5rem; }
.sec-title--sm{ font-size:clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom:1rem; }
.eyebrow-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.sec-index{ font-family:var(--f-display); font-style:italic; color:var(--ink-soft); opacity:.5; font-size:1.1rem; }
.lead{ font-size:1.1rem; color:var(--ink-soft); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.5rem;
  background:var(--ink); color:var(--paper); font-weight:600; font-size:.95rem;
  border-radius:var(--radius); text-decoration:none; transition:background .2s ease, transform .2s ease;
  white-space:nowrap;
}
.btn svg{ width:1.05rem; height:1.05rem; transition:transform .2s ease; }
.btn:hover{ background:var(--clay-deep); transform:translateY(-1px); }
.btn:hover svg{ transform:translateX(3px); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn--block{ width:100%; justify-content:center; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(var(--paper-rgb),.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{ border-color:var(--line); box-shadow:0 8px 24px -18px rgba(34,28,21,.4); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.05rem; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); flex-shrink:0; }
.brand__mark{ width:2.15rem; height:2.15rem; border-radius:50%; background:var(--clay); color:var(--paper);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.05rem; }
.brand__word{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; letter-spacing:.01em; }
.brand__word em{ font-style:italic; color:var(--clay); }
nav[aria-label="Principal"]{ flex:1; display:flex; justify-content:center; }
.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{ text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink-soft); position:relative; padding-block:.3rem; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-tools{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-backdrop{ position:fixed; inset:0; background:rgba(20,16,11,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:55; }
.nav-backdrop.open{ opacity:1; pointer-events:auto; }

@media (max-width: 860px){
  nav[aria-label="Principal"]{ position:fixed; inset:0 0 0 auto; width:min(78vw, 340px); height:100vh;
    background:var(--paper); flex-direction:column; justify-content:flex-start; padding:6rem 2rem 2rem;
    transform:translateX(100%); transition:transform .3s ease; z-index:56; box-shadow:-18px 0 40px -20px rgba(34,28,21,.4); display:flex; }
  .nav-links.open{ }
  nav[aria-label="Principal"]:has(.nav-links.open){ transform:translateX(0); }
  .nav-links{ flex-direction:column; align-items:flex-start; gap:1.6rem; width:100%; }
  .nav-links a{ font-size:1.05rem; }
  .nav-toggle{ display:flex; }
  .site-header.nav-open{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); overflow:hidden; }
.hero__inner{ position:relative; z-index:2; max-width:44rem; }
.hero h1{ font-size:clamp(2.6rem, 6vw, 4.4rem); }
.hero h1 em{ font-style:italic; color:var(--clay); }
.hero .lead{ font-size:1.2rem; margin-top:1.1rem; max-width:38rem; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.1rem; }
.hero__photo{ margin-top: clamp(2.5rem, 6vw, 4rem); }
.scroll-cue{ display:flex; align-items:center; gap:.6rem; margin-top:3rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.scroll-cue .line{ width:2.2rem; height:1px; background:var(--ink-soft); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; inset:0; background:var(--clay); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ---------- Placeholder de imagen (a sustituir por fotos reales) ---------- */
.ph{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:
    repeating-linear-gradient(135deg, rgba(34,28,21,.06) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, var(--paper-deep), var(--paper));
  border:1px solid var(--line); color:var(--ink-soft); text-align:center; padding:1.5rem;
  aspect-ratio: var(--ph-ratio, 4/3); border-radius:var(--radius); overflow:hidden;
}
.ph::before{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); pointer-events:none; }
.ph svg{ width:2rem; height:2rem; opacity:.55; }
.ph b{ font-family:var(--f-body); font-weight:700; font-size:.82rem; color:var(--ink); }
.ph span{ font-size:.76rem; opacity:.75; max-width:26ch; }
.ph--wide{ --ph-ratio: 16/9; }
.ph--tall{ --ph-ratio: 3/4; }
.ph--sq{ --ph-ratio: 1/1; }

/* ---------- Stats strip ---------- */
.statstrip{ border-block:1px solid var(--line); background:var(--ink); color:var(--paper); }
.statstrip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding-block:2.6rem; }
.stat{ text-align:center; border-right:1px solid rgba(244,238,227,.15); }
.stat:last-child{ border-right:0; }
.stat .num{ font-family:var(--f-display); font-size:clamp(2rem, 3.4vw, 2.8rem); color:var(--clay); }
.stat .num b{ font-weight:700; }
.stat .lbl{ font-size:.82rem; color:rgba(244,238,227,.72); margin-top:.3rem; }
@media (max-width: 720px){ .statstrip .wrap{ grid-template-columns:repeat(2,1fr); } .stat{ border-right:0; border-bottom:1px solid rgba(244,238,227,.15); padding-bottom:1.2rem; } }

/* ---------- Servicios ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.2rem; }
.svc{ background:var(--paper); padding:2.1rem 1.8rem; position:relative; transition:background .2s ease; }
.svc:hover{ background:var(--paper-deep); }
.svc__n{ position:absolute; top:1.6rem; right:1.8rem; font-family:var(--f-display); font-style:italic; color:var(--ink-soft); opacity:.35; font-size:1rem; }
.svc__ic{ width:2rem; height:2rem; color:var(--clay); margin-bottom:1.1rem; }
.svc h3{ font-size:1.15rem; margin-bottom:.5rem; }
.svc p{ font-size:.92rem; margin:0; }
@media (max-width: 900px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Proceso ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:2.6rem; counter-reset:step; }
.process__step{ position:relative; padding-top:2.4rem; }
.process__step::before{ counter-increment:step; content: counter(step, decimal-leading-zero); position:absolute; top:0; left:0; font-family:var(--f-display); font-size:1.6rem; font-style:italic; color:var(--clay); }
.process__step::after{ content:''; position:absolute; top:.75rem; left:2.6rem; right:0; height:1px; background:var(--line-strong); }
.process__step:last-child::after{ display:none; }
.process__step h3{ font-size:1.05rem; margin-bottom:.4rem; }
.process__step p{ font-size:.9rem; margin:0; }
@media (max-width: 900px){ .process{ grid-template-columns:repeat(2,1fr); } .process__step::after{ display:none; } }
@media (max-width: 560px){ .process{ grid-template-columns:1fr; } }

/* ---------- Split (about) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items:center; }
.split--rev{ direction:rtl; } .split--rev > *{ direction:ltr; }
.frame{ position:relative; }
.frame__tag{ position:absolute; bottom:1rem; left:1rem; background:var(--ink); color:var(--paper); padding:.5rem .9rem;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; z-index:2; }
.feature-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:1.1rem; }
.feature-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.feature-list li::before{ content:''; width:.5rem; height:.5rem; margin-top:.5rem; background:var(--clay); border-radius:50%; flex-shrink:0; }
.feature-list b{ color:var(--ink); }
.feature-list .desc{ font-size:.9rem; color:var(--ink-soft); }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split--rev{ direction:ltr; } }

/* ---------- Proyectos: filtros + grid ---------- */
.proj-filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.8rem; }
.proj-filters button{
  padding:.55rem 1.1rem; border:1px solid var(--line-strong); border-radius:999px; font-size:.85rem; font-weight:600;
  color:var(--ink-soft); transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.proj-filters button:hover{ border-color:var(--ink); color:var(--ink); }
.proj-filters button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2rem; }
.proj-card{ display:block; }
.proj-card__body{ padding-top:.9rem; }
.proj-card__cat{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); }
.proj-card h3{ font-size:1.05rem; margin-top:.3rem; }
.proj-card[hidden]{ display:none; }
@media (max-width: 900px){ .proj-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .proj-grid{ grid-template-columns:1fr; } }

/* ---------- Testimonios ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:2.2rem; }
.testi{ background:var(--paper); border:1px solid var(--line); padding:1.9rem; border-radius:var(--radius); }
.testi q{ font-family:var(--f-display); font-size:1.15rem; font-style:italic; quotes:none; display:block; margin-bottom:1.1rem; }
.testi__title{ font-size:1.05rem; margin-bottom:.5rem; }
.testi__who{ font-size:.85rem; font-weight:700; color:var(--ink); }
.testi__meta{ font-size:.8rem; color:var(--ink-soft); }
.testi__stars{ display:flex; gap:.15rem; color:var(--clay); margin-bottom:.9rem; }
.testi__stars svg{ width:1rem; height:1rem; }
@media (max-width: 900px){ .testi-grid{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; background:var(--olive); color:var(--paper); border-radius:var(--radius);
  padding: clamp(2.5rem, 6vw, 4rem); overflow:hidden; text-align:center;
}
.cta-band::before{ content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(244,238,227,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244,238,227,.06) 1px, transparent 1px);
  background-size:34px 34px; }
.cta-band > *{ position:relative; z-index:1; }
.cta-band .kicker{ color:var(--paper); }
.cta-band .kicker::before{ background:var(--paper); }
.cta-band h2{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); }
.cta-band .lead{ color:rgba(244,238,227,.85); margin-inline:auto; }
.cta-band .btn{ background:var(--paper); color:var(--ink); margin-top:.4rem; }
.cta-band .btn:hover{ background:var(--clay); color:var(--paper); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(244,238,227,.82); padding-block:3.5rem 1.8rem; margin-top:4rem; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(244,238,227,.14); }
.site-footer .brand{ color:var(--paper); }
.site-footer p{ color:rgba(244,238,227,.65); }
.foot-top h4{ font-family:var(--f-body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,238,227,.55); margin-bottom:1rem; }
.foot-top ul{ display:flex; flex-direction:column; gap:.65rem; }
.foot-top a{ text-decoration:none; font-size:.92rem; color:rgba(244,238,227,.82); }
.foot-top a:hover{ color:var(--clay); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; font-size:.82rem; color:rgba(244,238,227,.55); }
.seal{ display:inline-flex; align-items:center; gap:.4rem; }
.seal svg{ width:1rem; height:1rem; }
@media (max-width: 860px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .foot-top{ grid-template-columns:1fr; } }

/* ---------- Página interior (hero corto de sección) ---------- */
.page-hero{ padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; }
.crumbs{ font-size:.82rem; color:var(--ink-soft); }
.crumbs a{ text-decoration:none; font-weight:600; }
.crumbs a:hover{ color:var(--clay); }
.legal{ max-width:70ch; }
.legal h2{ font-size:1.25rem; margin-top:2.2rem; margin-bottom:.6rem; }
.legal ul{ margin:1rem 0; padding-left:0; }
.legal li{ margin-bottom:.5rem; padding-left:1.2rem; position:relative; color:var(--ink-soft); }
.legal li::before{ content:'—'; position:absolute; left:0; color:var(--clay); }
.legal code{ background:var(--paper-deep); padding:.1rem .4rem; border-radius:2px; font-size:.9em; }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
.loc-card{ border:1px solid var(--line); padding:1.8rem; border-radius:var(--radius); margin-bottom:1.5rem; }
.loc-card h3{ display:flex; align-items:center; gap:.6rem; font-size:1.1rem; margin-bottom:1rem; }
.loc-card h3 svg{ width:1.2rem; height:1.2rem; color:var(--clay); }
.loc-card .row{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; font-size:.92rem; }
.loc-card .row svg{ width:1.1rem; height:1.1rem; color:var(--ink-soft); flex-shrink:0; }
.loc-card .row a{ text-decoration:none; }
.loc-card .row a:hover{ color:var(--clay); }
.map-embed{ margin-top:1rem; border-radius:var(--radius); overflow:hidden; background:var(--paper-deep); min-height:220px; }
.map-blocked{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; padding:2.2rem 1rem; text-align:center; color:var(--ink-soft); }
.map-blocked svg{ color:var(--ink-soft); }
.map-blocked button{ padding:.55rem 1.1rem; border:1px solid var(--line-strong); border-radius:999px; font-size:.85rem; font-weight:600; }
.map-blocked button:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- Formulario ---------- */
.field{ margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink); }
.field input, .field select, .field textarea{
  padding:.75rem .9rem; border:1px solid var(--line-strong); background:var(--paper); border-radius:var(--radius);
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--clay); }
.field textarea{ min-height:9rem; resize:vertical; }
.consent{ display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--ink-soft); }
.consent input{ margin-top:.2rem; }
.consent a{ text-decoration:underline; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-note{ margin-top:.9rem; font-size:.88rem; min-height:1.2em; }
.form-note.ok{ color:var(--olive-deep); font-weight:600; }
.form-note.err{ color:var(--danger); font-weight:600; }

/* ---------- Cookies: banner + modal ---------- */
.cookie-banner{
  position:fixed; left:1.2rem; right:1.2rem; bottom:-140%; z-index:90; max-width:56rem; margin-inline:auto;
  background:var(--ink); color:rgba(244,238,227,.9); padding:1.4rem 1.6rem; border-radius:6px;
  box-shadow:0 -12px 40px -12px rgba(0,0,0,.4); display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  transition:bottom .4s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.show{ bottom:1.2rem; }
.cookie-banner p{ margin:0; flex:1; min-width:220px; font-size:.88rem; color:rgba(244,238,227,.75); }
.cookie-banner b{ color:var(--paper); }
.cookie-banner .actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cookie-banner .btn--ghost{ color:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(244,238,227,.35); }
.cookie-banner .btn--ghost:hover{ background:rgba(244,238,227,.12); color:var(--paper); box-shadow:inset 0 0 0 1.5px rgba(244,238,227,.6); }

.modal{ position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.modal.show{ display:flex; }
.modal__bg{ position:absolute; inset:0; background:rgba(20,16,11,.55); }
.modal__card{ position:relative; background:var(--paper); max-width:34rem; width:100%; padding:2.2rem; border-radius:8px; box-shadow:var(--shadow); max-height:86vh; overflow-y:auto; }
.modal__close{ position:absolute; top:1rem; right:1rem; font-size:1.1rem; width:2rem; height:2rem; border-radius:50%; }
.modal__close:hover{ background:var(--paper-deep); }
.modal h3{ font-size:1.3rem; margin-bottom:.6rem; }
.ck-cat{ border-top:1px solid var(--line); padding-block:1.1rem; }
.ck-cat__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ck-cat h4{ font-size:.98rem; }
.ck-cat p{ font-size:.86rem; margin-top:.4rem; margin-bottom:0; }
.ck-badge{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--olive-deep); background:rgba(79,90,60,.14); padding:.25rem .6rem; border-radius:999px; }
.switch{ position:relative; width:2.6rem; height:1.5rem; flex-shrink:0; }
.switch input{ opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background:var(--line-strong); border-radius:999px; transition:background .2s ease; pointer-events:none; }
.switch .track::before{ content:''; position:absolute; top:2px; left:2px; width:calc(1.5rem - 4px); height:calc(1.5rem - 4px); background:#fff; border-radius:50%; transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track{ background:var(--clay); }
.switch input:checked + .track::before{ transform:translateX(1.1rem); }
.modal__actions{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

@media (max-width: 700px){
  .contact-grid{ grid-template-columns:1fr; }
  .cookie-banner{ flex-direction:column; align-items:stretch; }
}