/* ============ TOKENS ============
   Matched to the live brand at cazaredraculaland.ro (colors + fonts pulled
   from its shipped CSS). The real site is dark-only — no light variant
   exists in the brand — so this prototype commits to that same single
   dark world deliberately, rather than forcing a light mode that would
   contradict the actual identity. */
:root{
  color-scheme: dark;
  --ink:        #030202;   /* page ground, matches body background */
  --ink-2:      #0C0A09;   /* card / panel surface */
  --ink-3:      #020101;   /* deepest — footer, hero base */
  --wine:       #A82323;   /* bright red — hover, links, data marks */
  --wine-deep:  #610F11;   /* base red — button fills */
  --wine-mid:   #8A1517;   /* red border / mid step */
  --wine-bright: #E04848;  /* red for small text on dark ground — WCAG AA contrast */
  --brass:      #947A47;   /* gold accent, low-key */
  --brass-bright: #D4AF37; /* gold highlight, sparing use */
  --stone:      #BDAE9E;   /* light stone — third decorative neutral */
  --fog:        #8F8579;   /* muted stone neutral — lightened from #7A7167, WCAG AA contrast fix */
  --line:       rgba(148,122,71,0.14);

  --text-primary:   #DED9D2;
  --text-secondary: #A89A8A;
  --text-muted:     #8F8579; /* lightened from #7A7167 — WCAG AA contrast fix */
  --title-ink:      #D1C9BE;
  --surface:        var(--ink);
  --surface-raised: var(--ink-2);
  --surface-sunken: #080706;
  --accent:         var(--wine);
  --accent-ink:     #FBF8F1;

  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-critical: #d03b3b;

  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.6rem;
  --fs-3xl: clamp(2.6rem, 6vw, 4.5rem);

  --radius: 4px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 28px -12px rgba(0,0,0,0.6);
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
p{ margin:0; }
button{ font-family: inherit; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wine-bright); display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background: var(--accent); display:inline-block; }
.tabular{ font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-body); font-weight:700; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em; cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--wine-deep); color: #fff; border-color: var(--wine-mid); }
.btn-primary:hover{ background: var(--wine); border-color: var(--wine); }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--text-primary); }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass-bright); }
.btn-sm{ padding: 9px 15px; font-size: 0.68rem; border-radius:4px; }
.btn-block{ width:100%; }

/* ============ HEADER ============ */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.util-bar{
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.util-bar .wrap{ display:flex; align-items:center; justify-content:space-between; height:34px; }
.lang-switch{ display:flex; gap:2px; }
.lang-switch button{
  background:none; border:none; color: var(--text-muted); cursor:pointer;
  padding: 4px 7px; font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing:.03em;
  border-radius: var(--radius);
}
.lang-switch button[aria-pressed="true"]{ color: var(--accent-ink); background: var(--accent); }
.util-links{ display:flex; gap:18px; }
.util-links a{ text-decoration:none; color: var(--text-secondary); }
.util-links a:hover{ color: var(--accent); }

.main-bar{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark-img{ width:40px; height:40px; object-fit:contain; flex:none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.brand-word{ font-family: var(--font-display); font-size: 1.05rem; font-weight:700; line-height:1.1; letter-spacing:0.04em; color:var(--title-ink); }
.brand-word b{ display:block; font-size: 0.6rem; font-family: var(--font-body); font-weight:500; letter-spacing:.14em; color: var(--text-muted); text-transform:uppercase; margin-top:3px; }

nav.main-nav{ display:flex; gap: 4px; }
nav.main-nav a{ text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  background:none; border:none; padding: 10px 13px; cursor:pointer;
  font-family: var(--font-body); font-size: 0.72rem; font-weight:700; color: var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em; border-bottom: 2px solid transparent;
}
nav.main-nav a small{ font-size: 0.58rem; font-weight:400; letter-spacing:.03em; color: var(--text-muted); text-transform:uppercase; text-align:center; }
nav.main-nav a:hover{ color: var(--text-primary); }
nav.main-nav a[aria-current="true"]{ color: var(--brass-bright); border-bottom-color: var(--wine); }
nav.main-nav a[aria-current="true"] small{ color: var(--brass); }
.header-cta{ display:flex; align-items:center; gap:8px; }
.meta-icon{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.meta-icon:hover{ border-color:var(--brass); color:var(--brass-bright); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); width:38px;height:38px; cursor:pointer; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:""; display:block; width:16px; height:1px; background:var(--text-primary); margin:4px auto; }

@media (max-width: 980px){
  nav.main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--line); flex-direction:column; padding: 8px 20px 16px; }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ text-decoration:none; flex-direction:row; align-items:baseline; gap:8px; text-align:left; border-bottom:none; padding:10px 0; }
  .nav-toggle{ display:block; }
  .util-links{ display:none; }
}

/* ============ VIEWS ============ */
.view{ display:none; }
.view.active{ display:block; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:94vh; display:flex; align-items:flex-end;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  color: var(--text-primary);
  padding-top: 64px;
}
.hero-content{ position:relative; padding: 60px 0 70px; text-align:center; margin:0 auto; }
.hero-content .eyebrow{ color:var(--brass-bright); justify-content:center; }
.hero-content .eyebrow::before{ background:var(--brass-bright); }
.hero-lead-line{ display:block; font-size: 1.7rem; margin-top:18px; color:var(--title-ink); text-transform:uppercase; letter-spacing:0.12em; font-weight:400; }
.hero-main-line{
  display:block; font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 5.2rem); font-weight:700;
  color: var(--wine); letter-spacing:0.05em; line-height:1; margin:14px 0;
  text-shadow: 0 0 40px rgba(168,35,35,0.55);
}
.hero p.lead{ font-family: var(--font-body); font-size: var(--fs-md); color:var(--text-secondary); max-width:560px; margin:0 auto; line-height:1.6; }

/* search bar — light card, matches the live site's search-container */
.search-widget{
  position:relative; z-index:5; margin: 40px auto 0; max-width:1040px;
  background: #EDEAE4; border-radius: 6px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7); padding: 10px;
  display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; align-items:stretch; text-align:left;
}
.search-widget .field{ padding: 5px 20px; border-right:1px solid #ccc5ba; justify-content:center; }
.search-widget .field:nth-last-child(2){ border-right:none; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size: 0.65rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:6px; }
.field label svg{ color: var(--wine); flex:none; }
/* the hero search bar sits on a light parchment card — its label needs dark ink, not the site's light-on-dark default */
.search-widget .field label{ color:#1e1b18; }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size: var(--fs-base); padding: 10px 12px;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text-primary);
}
.search-widget .field input{ border:none; background:transparent; font-size:0.85rem; color:#332f2b; font-weight:600; padding:2px 0; }
.search-widget .field input:focus{ outline:none; }
.search-widget > .btn{ margin:6px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); }
@media (max-width: 900px){ .search-widget{ grid-template-columns: 1fr 1fr; } .search-widget .btn{ grid-column: 1/-1; } .search-widget .field{ border-right:none; border-bottom:1px solid #ccc5ba; } }

/* trust badges row under the search bar */
.hero-benefits-row{ display:flex; justify-content:space-between; gap:20px; margin-top:38px; flex-wrap:wrap; text-align:left; }
.h-b-item{ display:flex; align-items:flex-start; gap:12px; max-width:230px; }
.h-b-item img{ width:38px; height:auto; flex:none; }
.h-b-item strong{ display:block; font-size:0.74rem; color:var(--stone); font-weight:700; }
.h-b-item span{ font-size:0.68rem; color:var(--text-muted); display:block; margin-top:3px; line-height:1.3; }
@media (max-width:900px){ .hero-benefits-row{ justify-content:center; } }

/* ============ 3-panel grid (Noutati / Harta / Alatura-te) ============ */
.panels-grid{ display:grid; grid-template-columns: 1fr 1.3fr 1fr; gap:22px; padding: 50px 0; }
@media (max-width: 1080px){ .panels-grid{ grid-template-columns: 1fr; } }
.card-panel{ background: var(--surface-raised); border:0.35px solid #7CB8AE; border-radius: var(--radius); padding:24px; display:flex; flex-direction:column; min-height:460px; }
.card-panel-header{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; }
.card-panel-header h3{ font-family:var(--font-display); font-size:0.95rem; color:var(--stone); text-transform:uppercase; letter-spacing:.04em; }
.card-panel-header a{ font-size:0.68rem; color:var(--text-muted); text-decoration:none; white-space:nowrap; }
.card-panel-header a:hover{ color:var(--brass-bright); }

.news-row{ display:flex; gap:14px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.news-row:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.news-img{ width:72px; height:64px; border-radius:3px; flex:none; background: linear-gradient(135deg, var(--wine-deep), var(--ink-3)); overflow:hidden; position:relative; }
.news-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-img.tone-wine{ background: linear-gradient(135deg, var(--wine), var(--ink-3)); }
.news-img.tone-brass{ background: linear-gradient(135deg, var(--brass), var(--ink-3)); }
.news-info h4{ font-size:0.84rem; font-weight:600; color:var(--text-primary); margin:5px 0 4px; }
.news-info p{ font-size:0.72rem; color:var(--text-muted); line-height:1.4; }
.tag-pill{ font-size:0.58rem; font-weight:700; padding:2px 6px; border-radius:2px; text-transform:uppercase; letter-spacing:.03em; color:#fff; display:inline-block; }
.tag-pill.tag-red{ background:var(--wine-deep); }
.tag-pill.tag-gold{ background:#6E5931; } /* darkened from var(--brass) — WCAG AA contrast fix for white text */
.tag-pill.tag-blue{ background:#235175; }
.news-info .date{ font-size:0.62rem; color:var(--fog); display:block; margin-top:6px; }

.map-wrapper{ flex:1; display:flex; flex-direction:column; }
.map-mock{
  position:relative; flex:1; min-height:230px; border-radius:4px; overflow:hidden;
  background: repeating-linear-gradient(0deg, #0a0908 0 38px, #0d0c0a 38px 39px), repeating-linear-gradient(90deg, #0a0908 0 38px, #0d0c0a 38px 39px);
  border:0.35px solid #7CB8AE;
}
.map-grid{ position:absolute; inset:0; background: radial-gradient(circle at 48% 40%, rgba(168,35,35,0.14), transparent 60%); pointer-events:none; }
.map-terrain{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-terrain .forest{ fill:#3a3226; opacity:.5; }
.map-terrain .river{ fill:none; stroke:#3a4a52; stroke-width:2.5; opacity:.55; stroke-linecap:round; }
.map-terrain .road-main{ fill:none; stroke:#5a4b35; stroke-width:2.5; opacity:.6; stroke-linecap:round; }
.map-terrain .road-minor{ fill:none; stroke:#5a4b35; stroke-width:1.3; opacity:.4; stroke-linecap:round; stroke-dasharray:1 4; }
.map-terrain .block{ fill:#5a4b35; opacity:.45; }
.map-compass{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:rgba(3,2,2,0.6); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:9px; font-weight:700;
}
.map-scale{
  position:absolute; top:12px; left:8px; display:flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:9px; color:var(--text-muted);
}
.map-scale::before{ content:""; width:24px; height:0; border-top:1px solid var(--text-muted); }
.map-pins-layer{ position:absolute; inset:0; }
.pin{ position:absolute; transform:translate(-50%,-100%); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)); cursor:pointer; transition:transform .15s ease; }
.pin:hover{ transform:translate(-50%,-100%) scale(1.12); z-index:6; }
.pin img{ width:28px; height:auto; display:block; }
.pin-main img{ width:38px; }
.pin-pending img{ filter: drop-shadow(0 0 6px rgba(250,178,25,0.9)); animation: pin-pulse 1.6s ease-in-out infinite; }
@keyframes pin-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.pin-tip{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--ink-3); color:#F2ECDD; font-family:var(--font-body); font-size:11px; font-weight:600; padding:5px 9px; border-radius:3px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease; border:1px solid var(--line);
}
.pin:hover .pin-tip{ opacity:1; }
.pin-tip em{ color:var(--status-warning); font-style:normal; }
.map-note{ position:absolute; bottom:8px; left:8px; right:8px; font-size:0.6rem; color:var(--text-muted); background:rgba(3,2,2,0.7); padding:6px 8px; border-radius:3px; pointer-events:none; }
.map-mock-sm{ min-height:150px; cursor:crosshair; }

/* Real Leaflet map (replaces the old SVG mock) */
#homeMap.map-mock{ background:#0a0908; z-index:0; }
.leaflet-control-attribution{ background:rgba(3,2,2,0.65) !important; color:var(--text-muted) !important; font-size:9px !important; }
.leaflet-control-attribution a{ color:var(--text-muted) !important; }
.leaflet-control-zoom a{ background:var(--ink-3) !important; color:#F2ECDD !important; border-color:var(--line) !important; }
.leaflet-control-zoom a:hover{ background:var(--ink-2) !important; }
.leaflet-popup-content-wrapper{ background:var(--ink-3); color:#F2ECDD; font-family:var(--font-body); font-size:12px; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.leaflet-popup-tip{ background:var(--ink-3); }
.leaflet-popup-content{ margin:9px 12px; }
.dl-map-pin{ filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
.map-note-static{ font-size:0.62rem; color:var(--text-muted); margin-top:8px; }

.harta-legenda{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.leg-item{ display:flex; align-items:center; gap:6px; font-size:0.66rem; color:var(--text-secondary); background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:20px; padding:5px 10px 5px 5px; cursor:default; font-family:var(--font-body); line-height:1; }
.leg-item:hover{ border-color:var(--brass); background:rgba(255,255,255,0.06); }
.leg-item[aria-pressed="false"]{ opacity:.4; }
.leg-item img{ width:16px; height:16px; object-fit:contain; display:block; flex:none; }

.panel-accent-bg{ background-size:cover; background-position:center; padding:0; overflow:hidden; }
.panel-border{
  height:100%; border:1px solid rgba(212,175,55,0.16); margin:8px; padding:26px 20px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center;
  box-shadow: inset 0 0 24px rgba(97,15,17,0.25);
}
.comm-sub{ font-size:0.64rem; color:var(--stone); letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px; display:block; }
.panel-border h3{ font-family:var(--font-display); font-size:1.15rem; color:var(--title-ink); text-transform:uppercase; letter-spacing:.03em; }
.panel-border p{ font-size:0.78rem; color:var(--text-secondary); margin-top:12px; line-height:1.5; }
.btn-accent-red{
  background:var(--wine-deep); color:#fff; border:1px solid var(--wine-mid); border-radius:10px;
  font-family:var(--font-body); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em;
  padding:13px 22px; margin-top:20px; text-decoration:none; display:inline-block;
}
.btn-accent-red:hover{ background:var(--wine); }

/* ============ SECTIONS ============ */
.section{ padding: 72px 0; border-top: 1px solid var(--line); }
.section:first-of-type{ border-top:none; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section-head h2{ font-size: var(--fs-xl); margin-top:10px; }
.section-head .lede{ color: var(--text-secondary); max-width: 520px; margin-top:8px; font-size: var(--fs-sm); }
.section-sunken{ background: var(--surface-sunken); }

.scroller{ display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.scroller::-webkit-scrollbar{ height:6px; }
.scroller::-webkit-scrollbar-thumb{ background: var(--line); border-radius:3px; }
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid{ grid-template-columns: 1fr; } }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 1080px){ .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-4{ grid-template-columns: 1fr; } }

/* card visual placeholder */
.art{
  aspect-ratio: 4/3; border-radius: var(--radius); position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--wine-deep), var(--ink-3));
}
.art::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 75% 20%, rgba(212,175,55,0.22), transparent 55%); }
.art.tone-wine{ background: linear-gradient(135deg, var(--wine), var(--ink-3)); }
.art.tone-brass{ background: linear-gradient(135deg, var(--brass), var(--ink-3)); }
.art-badge{ position:absolute; bottom:10px; left:10px; font-family: var(--font-mono); font-size: var(--fs-xs); color:#EFE9DA; background: rgba(15,18,19,0.55); padding:4px 8px; border-radius:2px; letter-spacing:.03em; }
.art-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.img-credit{ font-size:0.7rem; color:var(--text-muted); margin-top:6px; text-align:right; }
.img-credit a{ color:var(--text-muted); }

.card{
  background: var(--surface-raised); border:1px solid rgba(212,175,55,0.4); border-radius: var(--radius);
  overflow:hidden; flex: 0 0 300px; scroll-snap-align:start;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.1), 0 8px 20px -8px rgba(97,15,17,0.55);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover{
  border-color: rgba(212,175,55,0.7);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.2), 0 10px 26px -8px rgba(97,15,17,0.75);
}
.grid .card{ flex-basis:auto; }
.card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.card-title{ font-family: var(--font-display); font-size: var(--fs-md); font-weight:700; }
.card-meta{ font-size: var(--fs-xs); color: var(--text-muted); display:flex; justify-content:space-between; gap:8px; }
.card-desc{ font-size: var(--fs-sm); color: var(--text-secondary); }
.price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-top:4px; padding-top:10px; border-top:1px dashed var(--line); }
.price{ font-family: var(--font-mono); font-weight:600; font-size: var(--fs-md); }
.price small{ font-family: var(--font-body); font-weight:400; font-size: var(--fs-xs); color: var(--text-muted); }

.tag{ display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--fog); background: color-mix(in srgb, var(--fog) 16%, transparent); padding:2px 7px; border-radius:2px; }
.tag.dist{ color: #A88C56; background: color-mix(in srgb, var(--brass) 16%, transparent); } /* lightened from var(--brass) — WCAG AA contrast fix */
.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; }

/* transport strip */
.transport-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.transport-strip .t-item{ background: var(--surface-raised); padding:22px 20px; display:flex; flex-direction:column; gap:8px; }
.t-icon{ width:30px;height:30px; border:1px solid var(--accent); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--accent); font-family:var(--font-mono); font-size:13px; }
.t-item h3{ font-family:var(--font-body); font-size:var(--fs-sm); font-weight:700; }
.t-item p{ font-size:var(--fs-xs); color:var(--text-secondary); }
@media (max-width:900px){ .transport-strip{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .transport-strip{ grid-template-columns:1fr; } }

/* ============ FOOTER ============ */
.site-footer{ background: var(--ink-3); color:var(--text-secondary); margin-top: 0; }

.footer-benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:44px 4%; background: linear-gradient(to bottom, #0a0a0a, #1a0000); border-top:1px solid #4a0000; }
.f-benefit-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 16px; background:rgba(255,255,255,0.03); border:1px solid rgba(139,0,0,0.2); border-radius:10px; transition: background .2s ease, border-color .2s ease; }
.f-benefit-card:hover{ background:rgba(139,0,0,0.1); border-color:rgba(139,0,0,0.6); }
.f-benefit-card img{ width:36px; height:auto; margin-bottom:14px; filter: drop-shadow(0 0 5px rgba(255,0,0,0.5)); }
.f-benefit-card h3{ font-family:var(--font-display); font-size:0.78rem; color:var(--text-primary); letter-spacing:.03em; text-transform:uppercase; margin-bottom:5px; }
.f-benefit-card p{ font-size:0.72rem; color:var(--text-muted); }
@media (max-width:900px){ .footer-benefits-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .footer-benefits-grid{ grid-template-columns:1fr; } }

.footer-top{ padding:56px 4%; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-container{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.3fr; gap:28px; max-width:1180px; margin:0 auto; }
.footer-col h3{ font-family:var(--font-display); color:var(--title-ink); font-size:1rem; letter-spacing:.06em; }
.footer-col .footer-sub{ display:block; font-size:0.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
.footer-col p{ font-size:0.78rem; color:var(--text-muted); margin-top:12px; line-height:1.5; }
.footer-col h4{ color:var(--brass-bright); font-size:0.7rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col a{ display:block; color:var(--text-secondary); margin-bottom:9px; text-decoration:none; font-size:0.8rem; }
.footer-col a:hover{ color:var(--text-primary); }
.footer-social{ display:flex; gap:8px; margin-top:16px; }
.footer-social a{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--text-secondary); }
.footer-social a:hover{ border-color:var(--brass); color:var(--brass-bright); }
@media (max-width:992px){ .footer-container{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .footer-container{ grid-template-columns:repeat(2,1fr); } }

.footer-newsletter-row{ border-top:1px solid rgba(255,255,255,0.06); padding:32px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; max-width:1000px; margin:0 auto; }
.newsletter-txt h5{ font-family:var(--font-display); font-size:0.85rem; color:var(--brass); letter-spacing:.03em; }
.newsletter-txt p{ font-size:0.72rem; color:var(--text-muted); margin-top:4px; }
.newsletter-form{ display:flex; gap:8px; width:320px; max-width:100%; }
.newsletter-form input{ flex:1; background:var(--ink-2); border:1px solid var(--line); padding:11px 14px; border-radius:4px; color:var(--text-primary); font-size:0.8rem; font-family:var(--font-body); outline:none; }
.newsletter-form button{ background:var(--wine-deep); border:1px solid var(--wine-mid); color:#fff; padding:0 16px; border-radius:4px; cursor:pointer; }
.newsletter-form button:hover{ background:var(--wine); }
.footer-copyright{ text-align:center; font-size:0.68rem; color:var(--fog); padding:24px 0; }
.footer-credit{ display:block; margin-top:6px; } /* opacity:.75 removed — WCAG AA contrast fix */
.footer-credit a{ color:var(--brass-bright); text-decoration:none; }
.footer-credit a:hover{ color:var(--brass-bright); text-decoration:underline; }

/* ============ CAZARE (listing) ============ */
.filter-bar{
  display:flex; gap:14px; flex-wrap:wrap; align-items:end; background: var(--surface-raised);
  border:1px solid var(--line); border-radius: var(--radius); padding:18px; margin-bottom:28px;
}
.filter-bar .field{ min-width:150px; }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 18px 0 28px; }
.chip{ font-size: var(--fs-xs); border:1px solid var(--line); padding:6px 12px; border-radius:20px; cursor:pointer; background:var(--surface-raised); color:var(--text-secondary); }
.chip[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }
.result-count{ font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:16px; }
.avail{ color: var(--status-good); }
.avail::before{ content:"●"; margin-right:5px; font-size:9px; }
.limited{ color: var(--status-warning); }
.limited::before{ content:"●"; margin-right:5px; font-size:9px; }

/* ============ BLOG ============ */
.blog-feature{ display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; margin-bottom:48px; }
.blog-feature .art{ aspect-ratio:16/10; }
.blog-cat{ font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
.blog-cat.cat-santier{ color:var(--brass); }
.blog-cat.cat-experiente{ color:var(--stone); }
.blog-cat.cat-atractii{ color:var(--wine); }
.blog-feature h2{ font-size:var(--fs-2xl); margin-top:12px; }
.blog-feature .card-desc{ font-size:var(--fs-md); margin-top:14px; }
.blog-date{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width:840px){ .blog-feature{ grid-template-columns:1fr; } }

/* ============ CONTACT ============ */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form .full{ grid-column:1/-1; }
.info-card{ background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.info-card h3{ font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:8px; }
.info-card p{ font-size:var(--fs-md); font-family:var(--font-display); }
@media (max-width:840px){ .contact-layout{ grid-template-columns:1fr; } .contact-form{ grid-template-columns:1fr; } }

/* ============ PARTNER PORTAL ============ */
.auth-shell{ max-width:420px; margin: 40px auto; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow-card); }
.auth-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.auth-tabs button{ background:none; border:none; padding:10px 4px; margin-right:18px; font-weight:600; font-size:var(--fs-sm); color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; }
.auth-tabs button[aria-selected="true"]{ color:var(--accent); border-color:var(--accent); }
.auth-pane{ display:none; flex-direction:column; gap:14px; }
.auth-pane.active{ display:flex; }
.auth-foot{ text-align:center; margin-top:18px; font-size:var(--fs-xs); color:var(--text-muted); }
.auth-foot a{ color:var(--accent); text-decoration:none; }

.dash-shell{ display:none; }
.dash-shell.active{ display:grid; }
.dash-shell{ grid-template-columns: 220px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:560px; }
.dash-side{ background: var(--surface-sunken); border-right:1px solid var(--line); padding:24px 0; }
.dash-side .who{ padding: 0 20px 18px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.dash-side .who b{ display:block; font-family:var(--font-display); font-size:var(--fs-md); }
.dash-side .who span{ font-size:var(--fs-xs); color:var(--text-muted); }
.dash-nav button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; padding:11px 20px; font-size:var(--fs-sm); color:var(--text-secondary); cursor:pointer; border-left:2px solid transparent; }
.dash-nav button:hover{ color:var(--text-primary); }
.dash-nav button[aria-current="true"]{ color:var(--accent); border-left-color:var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dash-main{ padding: 28px 32px; }
.dash-pane{ display:none; }
.dash-pane.active{ display:block; }
.dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.dash-head h3{ font-size:var(--fs-lg); }

/* stat tiles */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media (max-width:900px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.stat-tile{ background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.stat-tile .label{ font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-tile .value{ font-family:var(--font-mono); font-size:1.7rem; font-weight:600; margin-top:6px; font-variant-numeric: tabular-nums; }
.stat-tile .delta{ font-size:var(--fs-xs); margin-top:4px; font-family:var(--font-mono); }
.delta.up{ color:var(--status-good); } .delta.down{ color:var(--status-critical); } .delta.flat{ color:var(--text-muted); }
.spark{ margin-top:10px; display:block; overflow:visible; }

/* status chips */
.status-chip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:600; padding:4px 9px; border-radius:20px; }
.status-chip::before{ content:""; width:6px;height:6px;border-radius:50%; }
.status-chip.new{ color:var(--status-warning); background: color-mix(in srgb, var(--status-warning) 16%, transparent); }
.status-chip.new::before{ background:var(--status-warning); }
.status-chip.confirmed{ color:var(--status-good); background: color-mix(in srgb, var(--status-good) 16%, transparent); }
.status-chip.confirmed::before{ background:var(--status-good); }
.status-chip.cancelled{ color:var(--status-critical); background: color-mix(in srgb, var(--status-critical) 16%, transparent); }
.status-chip.cancelled::before{ background:var(--status-critical); }

/* tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.data-table{ width:100%; border-collapse:collapse; min-width:640px; }
table.data-table th{ text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; padding:12px 16px; background:var(--surface-sunken); border-bottom:1px solid var(--line); white-space:nowrap; }
table.data-table td{ padding:13px 16px; border-bottom:1px solid var(--line); font-size:var(--fs-sm); vertical-align:middle; }
table.data-table tbody tr:hover{ background: var(--surface-sunken); }
table.data-table td.num{ font-family:var(--font-mono); font-variant-numeric: tabular-nums; }
table.data-table tr:last-child td{ border-bottom:none; }
.btn-row-delete{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--text-muted); font-size:11px; cursor:pointer; line-height:1;
}
.btn-row-delete:hover{ border-color:var(--status-critical); color:var(--status-critical); }

/* chart */
.chart-card{ background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:28px; }
.chart-card h4{ font-family:var(--font-body); font-size:var(--fs-sm); font-weight:700; margin-bottom:4px; }
.chart-card .sub{ font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:18px; }
.bars{ display:flex; align-items:flex-end; gap:14px; height:160px; position:relative; }
.bars::before{ content:""; position:absolute; left:0; right:0; bottom:0; border-top:1px solid var(--line); }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; position:relative; }
.bar{ width:100%; max-width:34px; background: var(--accent); border-radius:3px 3px 0 0; position:relative; cursor:pointer; }
.bar:hover{ filter:brightness(1.1); }
.bar .tip{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--ink-3); color:#F2ECDD; font-family:var(--font-mono); font-size:11px; padding:4px 7px; border-radius:3px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.bar:hover .tip{ opacity:1; }
.bar-col .x-label{ font-size:10px; color:var(--text-muted); font-family:var(--font-mono); }

.two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
@media (max-width:980px){ .two-col{ grid-template-columns:1fr; } }
.mini-cal{ background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.mini-cal .grid7{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:12px; }
.mini-cal .grid7 span{ text-align:center; font-size:11px; padding:7px 0; border-radius:3px; font-family:var(--font-mono); color:var(--text-secondary); }
.mini-cal .grid7 span.dow{ color:var(--text-muted); font-size:10px; }
.mini-cal .grid7 span.booked{ background: color-mix(in srgb, var(--status-critical) 18%, transparent); color:var(--status-critical); }
.mini-cal .grid7 span.free{ background: color-mix(in srgb, var(--status-good) 12%, transparent); color:var(--status-good); }
.mini-cal .grid7 span.today{ box-shadow: inset 0 0 0 1px var(--accent); }

.prop-list .prop-row{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.prop-list .prop-row:last-child{ border-bottom:none; }
.prop-thumb{ width:56px; height:56px; border-radius:var(--radius); flex:none; background: linear-gradient(135deg, var(--wine-deep), var(--ink-3)); }
.prop-row .meta{ flex:1; min-width:0; }
.prop-row .meta b{ display:block; font-family:var(--font-display); font-size:var(--fs-sm); }
.prop-row .meta span{ font-size:var(--fs-xs); color:var(--text-muted); }

.add-prop-form{ background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.add-prop-form .full{ grid-column:1/-1; }
@media (max-width:700px){ .add-prop-form{ grid-template-columns:1fr; } }

.add-prop-success{
  display:none; align-items:center; gap:10px; flex-wrap:wrap;
  background: color-mix(in srgb, var(--status-good) 12%, var(--surface-raised)); border:1px solid var(--status-good);
  color:var(--text-primary); border-radius:var(--radius); padding:14px 18px; font-size:var(--fs-sm); margin-bottom:16px;
}
.add-prop-success svg{ color:var(--status-good); flex:none; }
.add-prop-success button{
  margin-left:auto; background:none; border:none; color:var(--brass-bright); font-weight:700; font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
}

/* ============ AI blog generator ============ */
.ai-generator{
  background: var(--surface-raised); border:2px solid var(--brass-bright);
  border-radius: var(--radius); padding:22px; position:relative; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.25), 0 0 24px 4px rgba(97,15,17,0.55);
}
.ai-generator::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 100% 0%, rgba(212,175,55,0.10), transparent 55%);
}
.ai-generator-head{
  display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:0.95rem;
  color:var(--brass-bright); text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px;
}
.ai-generator-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ai-generator-form .full{ grid-column:1/-1; }
@media (max-width:700px){ .ai-generator-form{ grid-template-columns:1fr; } }

.ai-generator-loading{
  display:none; align-items:center; gap:10px; margin-top:18px; padding:14px 16px;
  background:var(--surface-sunken); border:1px dashed var(--line); border-radius:var(--radius);
  font-size:var(--fs-sm); color:var(--text-secondary);
}
.ai-generator-loading.active{ display:flex; }
.ai-spinner{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid var(--line); border-top-color:var(--brass-bright);
  animation: ai-spin .8s linear infinite;
}
@keyframes ai-spin{ to{ transform:rotate(360deg); } }

.ai-generator-result{ display:none; flex-direction:column; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.ai-generator-result.active{ display:flex; }
.ai-generator-result textarea{ font-family:var(--font-body); resize:vertical; }
.ai-generator-actions{ display:flex; gap:10px; justify-content:flex-end; }
.ai-generator-note{ margin-top:16px; margin-bottom:0; position:relative; }

.callout{ font-size:var(--fs-xs); color:var(--text-muted); background:var(--surface-sunken); border:1px dashed var(--line); padding:12px 16px; border-radius:var(--radius); margin-bottom:20px; }
.callout b{ color:var(--text-secondary); }

/* subpage hero */
.page-head{ padding: 52px 0 44px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size: var(--fs-2xl); margin-top:12px; }
.page-head p{ color:var(--text-secondary); max-width:600px; margin-top:12px; }

/* ============ legal pages (Terms / Privacy) ============ */
.legal-doc{ max-width:760px; }
.legal-doc .callout{ margin-bottom:40px; }
.legal-doc section{ padding:0 0 32px; border:none; }
.legal-doc h2{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--title-ink); margin-bottom:12px; }
.legal-doc p{ color:var(--text-secondary); line-height:1.7; margin-bottom:12px; }
.legal-doc ul{ margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.legal-doc li{ position:relative; padding-left:18px; color:var(--text-secondary); line-height:1.6; }
.legal-doc li::before{ content:"—"; position:absolute; left:0; color:var(--brass); }
.legal-doc a{ color:var(--brass-bright); text-decoration:none; }
.legal-doc a:hover{ text-decoration:underline; }