/* DAM TECHO S.L. — Brand Theme — IT Live */
:root {
  --brand:           #5eb9e9;   /* hemelsblauw uit logo */
  --brand-dark:      #3a9fd4;
  --brand-light:     #e8f6fd;
  --brand-lighter:   #f0faff;
  --accent:          #f59e0b;   /* amber voor contrast */
  --accent-dark:     #d97706;
  --ink:             #323d4a;   /* donker navy uit logo */
  --ink-light:       #4a5568;
  --ink-muted:       rgba(50,61,74,.6);
  --bg:              #f8fafc;
  --card-bg:         #ffffff;
  --border:          #dde5ee;
  --radius:          12px;
  --shadow:          0 1px 4px rgba(50,61,74,.08),0 1px 2px rgba(50,61,74,.04);
  --shadow-lg:       0 10px 28px -4px rgba(94,185,233,.22),0 4px 8px -2px rgba(50,61,74,.08);
  /* Aliassen voor brand-main.css */
  --brand-primary:   #5eb9e9;
  --brand-secondary: #323d4a;
  --brand-accent:    #f59e0b;
  --brand-neutral:   #f8fafc;
  --brand-on-primary:   #ffffff;
  --brand-on-secondary: #ffffff;
  --brand-radius:    12px;
  --brand-shadow:    0 4px 14px rgba(94,185,233,.18);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ── Layout ─────────────────────────────── */
.container { max-width:1680px; margin:0 auto; padding:0 clamp(16px,3vw,48px); width:100%; }
.section    { padding:4rem 0; }
.section-sm { padding:2.5rem 0; }
@media(min-width:1800px){ .container{max-width:1920px} }
@media(max-width:640px){ .section{padding:2.5rem 0} }

/* ── Brand bar ──────────────────────────── */
.brand-bar {
  background: #0f172a;
  position: relative;
  z-index: 101;
}
.brand-bar-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 55%, var(--ink) 100%);
}

/* ═══════════════════════════════════════════
   HEADER — wit, logo in originele SVG kleuren
   ═══════════════════════════════════════════ */
.site-header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--border), 0 2px 10px rgba(50,61,74,.07);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 1.5rem;
}
/* Logo: groter, originele SVG kleuren */
.brand-logo {
  height: 64px;
  max-height: 64px;
  width: auto;
  display: block;
}
/* Nav links: donker op witte header */
.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .875rem;
  padding: 7px 13px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav-links a:hover {
  color: var(--brand-dark);
  background: var(--brand-light);
}
/* Language switcher in nav */
.nav-lang { display:flex; gap:2px; align-items:center; margin-left:8px; padding-left:8px; border-left:1px solid var(--border); }
.nav-lang a { font-size:.75rem; font-weight:700; padding:4px 8px; border-radius:6px; text-decoration:none; color:var(--ink-muted); transition:all .2s; }
.nav-lang a:hover { color:var(--brand); background:var(--brand-light); }
.nav-lang a.lang-active { background:var(--brand); color:#fff; }
@media(max-width:1024px){
  .nav-lang { justify-content:center; padding:12px 0 4px; margin:0; border-left:none; border-top:1px solid rgba(255,255,255,.1); gap:8px; }
  .nav-lang a { color:rgba(255,255,255,.7); font-size:.85rem; padding:8px 16px; }
  .nav-lang a:hover { background:rgba(255,255,255,.1); color:#fff; }
  .nav-lang a.lang-active { background:var(--brand); color:#fff; }
}
/* CTA knoppen in header */
.nav-links .btn-nav {
  background: var(--brand);
  color: #ffffff;
  font-weight: 800;
  padding: 8px 16px;
}
.nav-links .btn-nav:hover {
  background: var(--brand-dark);
  color: #ffffff;
}

/* ── Hamburger toggle — donker, zichtbaar op witte header ── */
.nav-toggle {
  display: none;
  background: var(--ink);
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  transition: background .2s;
}
.nav-toggle:hover { background: var(--brand-dark); }

/* ── Mobiel dropdown menu ── */
@media(max-width:1024px){
  .nav-toggle { display:block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ink);     /* donker sidebar-stijl menu */
    flex-direction: column;
    padding: 8px 0 16px;
    gap: 0;
    border-top: 3px solid var(--brand);
    box-shadow: 0 12px 32px rgba(50,61,74,.25);
    z-index: 99;
  }
  .nav-links.open { display:flex; }
  .nav-links a {
    color: rgba(255,255,255,.85);
    padding: 13px 24px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav-links a:hover {
    color: #ffffff;
    background: rgba(255,255,255,.08);
  }
  .nav-links .btn-nav {
    margin: 12px 16px 0;
    border-radius: 8px;
    text-align: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: .95rem;
  }
  .site-header { position:relative; }

  /* Logo ook groter op mobiel */
  .brand-logo { height: 52px; max-height: 52px; }
}

/* ═══════════════════════════════════════════
   HERO — donker, witte tekst (goed contrast)
   ═══════════════════════════════════════════ */
.hero {
  background: var(--ink);
  padding: clamp(4rem,8vw,8rem) 0 clamp(3rem,6vw,6rem);
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height:420px;
}
/* Carousel slides */
.hero-slides {
  position:absolute; inset:0; z-index:0;
}
.hero-slide {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.8s ease;
  will-change:opacity,transform;
}
.hero-slide.active {
  opacity:1;
}
/* Ken Burns zoom+pan effect */
@keyframes kenburns-1 {
  0%   { transform:scale(1)   translate(0,0); }
  100% { transform:scale(1.15) translate(-2%,-1%); }
}
@keyframes kenburns-2 {
  0%   { transform:scale(1.05) translate(1%,0); }
  100% { transform:scale(1.18) translate(-1%,2%); }
}
@keyframes kenburns-3 {
  0%   { transform:scale(1.1) translate(-1%,1%); }
  100% { transform:scale(1)   translate(1%,-1%); }
}
@keyframes kenburns-4 {
  0%   { transform:scale(1)   translate(2%,1%); }
  100% { transform:scale(1.12) translate(0,-2%); }
}
.hero-slide:nth-child(1) { animation:kenburns-1 18s ease-in-out infinite alternate; }
.hero-slide:nth-child(2) { animation:kenburns-2 20s ease-in-out infinite alternate; }
.hero-slide:nth-child(3) { animation:kenburns-3 22s ease-in-out infinite alternate; }
.hero-slide:nth-child(4) { animation:kenburns-4 16s ease-in-out infinite alternate; }
/* Dark overlay for text readability */
.hero::before {
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    180deg,
    rgba(30,45,61,.5) 0%,
    rgba(30,45,61,.3) 40%,
    rgba(30,45,61,.5) 100%
  );
  pointer-events:none;
}
.hero .container { position:relative; z-index:2; }
/* Carousel dots */
.hero-dots {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; gap:10px;
}
.hero-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.4); border:none; cursor:pointer;
  transition:all .3s;
}
.hero-dot.active {
  background:#fff; transform:scale(1.3);
  box-shadow:0 0 8px rgba(94,185,233,.6);
}
.hero-badge {
  display: inline-block;
  background: rgba(94,185,233,.15);
  border: 1px solid rgba(94,185,233,.35);
  color: #94d8f5;
  padding: 5px 16px;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 1.4rem;
}
.hero-title {
  font-size: clamp(2rem,5vw,3.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 1.2rem;
  color: #ffffff;
}
.hero-title span { color: var(--brand); }
.hero-sub {
  font-size: clamp(1rem,1.5vw,1.15rem);
  color: rgba(255,255,255,.82);
  max-width: 640px;
  margin: 0 auto 2.2rem;
  line-height: 1.65;
}
.hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .3px;
  border: none;
  cursor: pointer;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 4px 18px rgba(245,158,11,.35);
}
.btn:hover {
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(245,158,11,.45);
  filter: brightness(1.1);
}
/* Outline op donkere achtergrond: gradient border effect */
.btn-outline {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 18px rgba(99,102,241,.3);
}
.btn-outline:hover {
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(99,102,241,.4);
  filter: brightness(1.1);
}
/* Outline op lichte achtergrond: donkere rand */
.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--border);
  box-shadow: none;
}
.btn-outline-dark:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: var(--brand-light);
}
.btn-accent { background:var(--accent); color:#ffffff; box-shadow:0 4px 12px rgba(245,158,11,.3); }
.btn-accent:hover { background:var(--accent-dark); color:#ffffff; }
.btn-ink   { background:var(--ink); color:#ffffff; }
.btn-ink:hover { background:#1e2d3d; }

/* ═══════════════════════════════════════════
   CARDS — witte kaartjes, donkere tekst
   ═══════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .15s;
}
.card:hover { box-shadow: var(--shadow-lg); }
a.card { text-decoration:none; color:inherit; display:block; }
a.card:hover { transform: translateY(-3px); }
.card-brand { border-top: 3px solid var(--brand); }
.card-accent { border-top: 3px solid var(--accent); }

/* ── Grids ──────────────────────────────── */
.grid-2    { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
@media(min-width:1200px){ .grid-3{grid-template-columns:repeat(3,1fr);gap:28px} }
@media(max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:700px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .grid-auto{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════
   USP SECTIE — lichtblauw bg, donkere tekst
   ═══════════════════════════════════════════ */
.usp-section {
  background: var(--brand-lighter);
  border-top: 1px solid rgba(94,185,233,.25);
  border-bottom: 1px solid rgba(94,185,233,.25);
}
.usp-icon  { font-size:2.4rem; margin-bottom:.75rem; }
.usp-card  { text-align:center; background:#fff; border:none; border-top:3px solid var(--brand); }
.usp-title { font-weight:800; color:var(--ink); font-size:1rem; margin-bottom:.4rem; }
.usp-text  { color:var(--ink-muted); font-size:.9rem; margin:0; }

/* ── Service cards ──────────────────────── */
.service-card { border-left:3px solid var(--brand); }
.service-card .svc-icon { font-size:1.8rem; margin-bottom:.5rem; display:block; }
.service-card .svc-icon img { width:52px; height:52px; object-fit:contain; display:block; }
.service-card strong { color:var(--ink); font-size:.95rem; display:block; margin-bottom:.4rem; }
.service-card p { color:var(--ink-muted); font-size:.875rem; margin:0 0 .75rem; }
.service-link { color:var(--brand); font-weight:700; font-size:.85rem; text-decoration:none; }
.service-link:hover { color:var(--brand-dark); }

/* ═══════════════════════════════════════════
   CTA BANNER — donker bg, witte tekst
   ═══════════════════════════════════════════ */
.cta-banner {
  background: linear-gradient(135deg, var(--ink) 0%, #1a2d42 100%);
  border-radius: var(--radius);
  padding: clamp(2.5rem,4vw,4rem) clamp(1.5rem,3vw,3rem);
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(94,185,233,.18), transparent 55%);
  pointer-events: none;
}
.cta-banner .container { position:relative; z-index:1; }
.cta-title { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; margin-bottom:.75rem; color:#ffffff; }
.cta-sub   { color:rgba(255,255,255,.8); margin-bottom:1.8rem; font-size:1rem; }

/* ── Section headers ────────────────────── */
.section-label {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand-dark);
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
/* Section-label op donkere achtergrond */
.section-label-light {
  background: rgba(94,185,233,.15);
  color: #94d8f5;
}
.section-title {
  font-size: clamp(1.6rem,3vw,2.3rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.022em;
  margin-bottom: .5rem;
  line-height: 1.15;
}
.section-sub { color:var(--ink-muted); font-size:1rem; max-width:700px; }

/* ── Contact form ───────────────────────── */
.form-field {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: calc(var(--radius) * .7);
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
  color: var(--ink);
  margin-bottom: 1rem;
  transition: border .2s, box-shadow .2s;
}
.form-field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(94,185,233,.18);
}
.form-label {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 4px;
  color: var(--ink);
}

/* ═══════════════════════════════════════════
   FOOTER — donker navy, lichte tekst
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   REVOLUTIONARY FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
  position:relative;
  color: rgba(255,255,255,.75);
  margin-top: 0;
  overflow:hidden;
}
/* Background image layer */
.footer-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center top;
  filter:brightness(.28) saturate(.6);
  z-index:0;
}
/* CTA strip at top */
.footer-cta-strip {
  position:relative; z-index:1;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding:1.5rem 0;
}
.footer-cta-strip .container {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.footer-cta-text { color:#fff; font-weight:800; font-size:1.05rem; }
.footer-cta-text span { opacity:.85; font-weight:400; font-size:.9rem; display:block; margin-top:.1rem; }
.footer-cta-btns { display:flex; gap:.75rem; flex-wrap:wrap; }
.footer-cta-btns a {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.18); color:#fff;
  border:1.5px solid rgba(255,255,255,.4); border-radius:10px;
  padding:.6rem 1.2rem; font-weight:700; font-size:.875rem;
  text-decoration:none; transition:all .2s;
}
.footer-cta-btns a:hover { background:rgba(255,255,255,.3); border-color:#fff; }
.footer-cta-btns a.footer-whatsapp {
  background:#25d366; border-color:#25d366;
}
.footer-cta-btns a.footer-whatsapp:hover { background:#1ebe5d; }

/* Main footer body */
.footer-body {
  position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(20,30,42,.97) 0%, rgba(14,22,32,.99) 100%);
  padding:3.5rem 0 2rem;
}
/* Footer logo: wit via filter op donkere footer */
.footer-logo {
  height: 48px;
  max-height: 48px;
  width: auto;
  margin-bottom: .75rem;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.footer-company { font-weight:900; color:#ffffff; font-size:1.1rem; margin-bottom:.3rem; }
.footer-tagline { font-size:.82rem; color:rgba(255,255,255,.65); margin-bottom:1rem; }
.footer-langs { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.footer-lang {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.72); font-size:.7rem; font-weight:700;
  padding:3px 9px; border-radius:6px; letter-spacing:.3px;
}
.footer-trust {
  display:flex; flex-direction:column; gap:.5rem; margin-top:1rem;
}
.footer-trust-item {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:rgba(255,255,255,.72);
}
.footer-trust-item svg { color:var(--brand); flex-shrink:0; }

/* Footer column headings */
.footer-col-title {
  font-weight:800; color:#fff; margin-bottom:.9rem;
  font-size:.8rem; text-transform:uppercase; letter-spacing:.6px;
  padding-bottom:.5rem; border-bottom:1px solid rgba(94,185,233,.2);
}
.footer-links { display:flex; flex-direction:column; gap:.35rem; }
.footer-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .84rem;
  transition: color .2s, padding-left .2s;
  display:flex; align-items:center; gap:.4rem;
  padding:.15rem 0;
}
.footer-links a::before { content:'›'; color:var(--brand); font-weight:700; font-size:1rem; line-height:1; }
.footer-links a:hover { color: var(--brand); padding-left:.3rem; }

/* Footer stats row */
.footer-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:.75rem; margin-bottom:2.5rem;
  padding:1.25rem 1.5rem;
  background:rgba(94,185,233,.06);
  border:1px solid rgba(94,185,233,.12);
  border-radius:14px;
}
.footer-stat { text-align:center; }
.footer-stat-num { font-size:1.6rem; font-weight:900; color:var(--brand); line-height:1; }
.footer-stat-label { font-size:.7rem; color:rgba(255,255,255,.65); margin-top:.2rem; text-transform:uppercase; letter-spacing:.4px; }

/* Footer bottom bar */
.footer-bottom {
  position:relative; z-index:1;
  background:rgba(0,0,0,.4);
  border-top: 1px solid rgba(255,255,255,.06);
  padding:.9rem 0;
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-bottom a { color:var(--brand); text-decoration:none; }
.footer-bottom a:hover { color:var(--brand-dark); }

/* Service icons grid in footer */
.footer-services-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem;
}
.footer-service-item {
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:8px; padding:.45rem .7rem;
  color:rgba(255,255,255,.6); font-size:.78rem; font-weight:600;
  text-decoration:none; transition:all .2s;
}
.footer-service-item:hover { background:rgba(94,185,233,.1); border-color:rgba(94,185,233,.25); color:#fff; }
.footer-service-icon { font-size:.95rem; flex-shrink:0; }

/* Contact items in footer */
.footer-contact-list { display:flex; flex-direction:column; gap:.6rem; }
.footer-contact-item {
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.82rem; color:rgba(255,255,255,.55);
}
.footer-contact-item svg { color:var(--brand); flex-shrink:0; margin-top:2px; }
.footer-contact-item a { color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s; }
.footer-contact-item a:hover { color:var(--brand); }

@media(max-width:700px){
  .footer-stats { grid-template-columns:repeat(2,1fr); }
  .footer-bottom .container { flex-direction:column; text-align:center; }
  .footer-cta-strip .container { flex-direction:column; text-align:center; }
  .footer-services-grid { grid-template-columns:1fr; }
}
@media(max-width:500px){
  .footer-cta-btns { flex-direction:column; width:100%; }
  .footer-cta-btns a { justify-content:center; }
}

/* ── Typography ─────────────────────────── */
h1,h2,h3 { color:var(--ink); line-height:1.2; }
p { line-height:1.65; }
a { color:var(--brand); }
.muted { color:var(--ink-muted); }
.h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:900; line-height:1.08; letter-spacing:-.025em; }
.text-brand  { color:var(--brand); }
.text-accent { color:var(--accent); }
.text-white  { color:#ffffff !important; }

/* ── Badges ─────────────────────────────── */
.badge        { display:inline-block; background:var(--brand-light); color:var(--brand-dark); padding:3px 10px; border-radius:9999px; font-size:.72rem; font-weight:700; }
.badge-accent { background:#fff3cd; color:#92400e; }
.badge-dark   { background:var(--ink); color:#ffffff; }

/* ── Photo blocks ───────────────────────── */
.photo-block {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brand-light) 0%, #dbeafe 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--brand);
  overflow: hidden;
}
.photo-block img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }

/* ── Page subhero with photo ────────────── */
.page-hero {
  background: var(--ink);
  padding: clamp(3rem,5vw,5rem) 0;
  color: #ffffff;
  width: 100%;
  position:relative;
  overflow:hidden;
  min-height:260px;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  animation:kenburns-1 20s ease-in-out infinite alternate;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    135deg,
    rgba(30,45,61,.55) 0%,
    rgba(30,45,61,.35) 50%,
    rgba(30,45,61,.5) 100%
  );
  pointer-events:none;
}
.page-hero .container { position:relative; z-index:2; }
.page-hero .section-label { background:rgba(94,185,233,.15); color:#94d8f5; }
.page-hero h1 { color:#ffffff; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.page-hero p  { color:rgba(255,255,255,.8); max-width:720px; }

/* ═══════════════════════════════════════════
   TABLET RESPONSIVE (701-1024px)
   ═══════════════════════════════════════════ */
@media(min-width:701px) and (max-width:1024px){
  .hero-title { font-size:2.2rem; }
  .hero { padding:3.5rem 0 3rem; }
  .nav-links a { font-size:.8rem; padding:6px 10px; }
  .card { padding:20px; }
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE (≤700px)
   ═══════════════════════════════════════════ */
@media(max-width:700px){
  .hero { padding:2.5rem 0 2rem; }
  .hero-title { font-size:1.75rem; }
  .hero-sub { font-size:.95rem; }
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-ctas .btn { justify-content:center; }
  .section-title { font-size:1.4rem; }
  .cta-title { font-size:1.3rem; }
  .card { padding:16px; }
  .page-hero h1 { font-size:1.5rem !important; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

/* ── Utils ──────────────────────────────── */
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }
.mt-1{margin-top:.5rem}  .mt-2{margin-top:1rem}   .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem}
.text-center{text-align:center}
.gap-sm{gap:.5rem} .gap-md{gap:1rem}

/* ═══════════════════════════════════════════
   CHATBOX WIDGET
   ═══════════════════════════════════════════ */
.dt-chat { position:fixed; bottom:24px; right:24px; z-index:9999; font-family:inherit; }

/* FAB button */
.dt-chat-fab {
  width:60px; height:60px; border-radius:50%; border:2px solid var(--brand); cursor:pointer;
  background:#fff;
  color:var(--brand); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(94,185,233,.35), 0 2px 8px rgba(0,0,0,.1);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  position:relative;
}
.dt-chat-fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(94,185,233,.55); }
.dt-chat-fab::after {
  content:''; position:absolute; top:-2px; right:-2px; width:14px; height:14px;
  background:var(--accent); border-radius:50%; border:2px solid #fff;
  animation:dt-pulse 2s infinite;
}
.dt-chat-icon-close { display:none; }
.dt-fab-open .dt-chat-icon-open { display:none; }
.dt-fab-open .dt-chat-icon-close { display:block; }
.dt-fab-open::after { display:none; }

@keyframes dt-pulse {
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.4); opacity:.5; }
}

/* Panel */
.dt-chat-panel {
  position:absolute; bottom:72px; right:0;
  width:380px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px);
  background:#fff; border-radius:16px;
  box-shadow:0 12px 48px rgba(50,61,74,.2), 0 4px 12px rgba(0,0,0,.08);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(20px) scale(.95);
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.dt-chat-panel.dt-open {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}

/* Header */
.dt-chat-header {
  background:linear-gradient(135deg, var(--ink) 0%, #1e2d3d 100%);
  color:#fff; padding:14px 16px 10px; flex-shrink:0;
}
.dt-chat-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dt-chat-header-left { display:flex; align-items:center; gap:10px; }
.dt-chat-close {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8); width:32px; height:32px; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s; flex-shrink:0;
}
.dt-chat-close:hover { background:rgba(255,255,255,.22); color:#fff; }
.dt-chat-avatar {
  width:38px; height:38px; border-radius:50%;
  background:rgba(94,185,233,.2); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.dt-chat-header strong { font-size:.9rem; }
.dt-chat-status { color:rgba(255,255,255,.6); font-size:.72rem; }

/* Mode buttons */
.dt-chat-modes { display:flex; gap:6px; }
.dt-mode-btn {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8); padding:5px 12px; border-radius:8px;
  font-size:.75rem; font-weight:700; cursor:pointer; transition:all .2s;
  font-family:inherit;
}
.dt-mode-btn:hover { background:rgba(255,255,255,.18); }
.dt-mode-active { background:var(--brand) !important; border-color:var(--brand); color:#fff; }

/* Messages area */
.dt-chat-msgs {
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.dt-msg { display:flex; }
.dt-msg-user { justify-content:flex-end; }
.dt-msg-bubble {
  max-width:82%; padding:10px 14px; border-radius:14px;
  font-size:.875rem; line-height:1.55; word-break:break-word;
}
.dt-msg-assistant .dt-msg-bubble {
  background:var(--brand-light); color:var(--ink); border-bottom-left-radius:4px;
}
.dt-msg-user .dt-msg-bubble {
  background:var(--brand); color:#fff; border-bottom-right-radius:4px;
}

/* Typing dots */
.dt-dots { display:flex; gap:4px; padding:4px 0; }
.dt-dots span {
  width:7px; height:7px; border-radius:50%; background:var(--brand);
  animation:dt-bounce .6s infinite alternate;
}
.dt-dots span:nth-child(2){ animation-delay:.15s; }
.dt-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes dt-bounce { to{ opacity:.3; transform:translateY(-4px); } }

/* Quick replies */
.dt-chat-quick {
  padding:8px 16px; display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--border);
}
.dt-quick-btn {
  background:var(--brand-light); color:var(--brand-dark); border:1px solid rgba(94,185,233,.3);
  padding:5px 12px; border-radius:9999px; font-size:.75rem; font-weight:700;
  cursor:pointer; transition:all .2s; font-family:inherit;
}
.dt-quick-btn:hover { background:var(--brand); color:#fff; }

/* Input form */
.dt-chat-form {
  display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border);
  background:#fafbfc; flex-shrink:0;
}
.dt-chat-form input {
  flex:1; border:1.5px solid var(--border); border-radius:10px;
  padding:9px 14px; font-size:.875rem; font-family:inherit; color:var(--ink);
  background:#fff; outline:none; transition:border .2s;
}
.dt-chat-form input:focus { border-color:var(--brand); }
.dt-chat-send {
  width:38px; height:38px; border-radius:10px; border:none;
  background:var(--brand); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.dt-chat-send:hover { background:var(--brand-dark); }

/* Mobile chat — fullscreen overlay with safe areas */
@media(max-width:600px){
  .dt-chat { bottom:12px; right:12px; }
  .dt-chat-fab { width:52px; height:52px; }
  .dt-chat-panel {
    position:fixed; top:0; bottom:0; right:0; left:0;
    width:100%; max-width:100%; height:100dvh; max-height:100dvh;
    border-radius:0;
  }
  .dt-chat-panel.dt-open { transform:translateY(0) scale(1); }
  .dt-chat-close { width:36px; height:36px; border-radius:10px; }
  .dt-chat-header { padding:max(env(safe-area-inset-top,8px),14px) 16px 10px; }
  .dt-chat-form { padding:10px 12px max(env(safe-area-inset-bottom,8px),10px); }
  .dt-chat-form input { font-size:16px; /* prevent iOS zoom */ }
  .dt-msg-bubble { max-width:88%; font-size:.9rem; }
  .dt-mode-btn { padding:6px 14px; font-size:.78rem; }
  .dt-quick-btn { padding:6px 14px; font-size:.78rem; }
}

/* ═══════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════ */
.dt-btt {
  position:fixed; bottom:156px; right:28px; z-index:9997;
  width:42px; height:42px; border-radius:50%; border:none;
  background:var(--ink); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(50,61,74,.2);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .3s, transform .3s, background .2s;
}
.dt-btt-show { opacity:1; transform:translateY(0); pointer-events:auto; }
.dt-btt:hover { background:var(--brand); }
@media(max-width:500px){ .dt-btt { bottom:76px; right:16px; } }

/* ═══════════════════════════════════════════
   SCROLL ANIMATIONS (CSS classes for JS)
   ═══════════════════════════════════════════ */
.dt-reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.dt-reveal.dt-visible { opacity:1; transform:translateY(0); }

/* Hover glow on service cards */
.service-card:hover { border-left-color:var(--accent); }
.card:hover .service-link { color:var(--accent); }

/* ═══════════════════════════════════════════
   WIZARD / MULTI-STEP FORM
   ═══════════════════════════════════════════ */
.wz-wrap { max-width:780px; margin:0 auto; }
/* Progress bar */
.wz-progress {
  display:flex; gap:0; margin-bottom:2.5rem; position:relative;
}
.wz-progress::before {
  content:''; position:absolute; top:18px; left:0; right:0; height:2px;
  background:var(--border); z-index:0;
}
.wz-step-dot {
  display:flex; flex-direction:column; align-items:center; flex:1; gap:.4rem;
  position:relative; z-index:1; cursor:default;
}
.wz-dot {
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:2px solid var(--border); color:var(--ink-muted);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  font-size:.85rem; transition:all .3s;
}
.wz-step-dot.active .wz-dot {
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 0 0 4px rgba(94,185,233,.2);
}
.wz-step-dot.done .wz-dot {
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.wz-dot-label { font-size:.7rem; font-weight:700; color:var(--ink-muted); text-align:center; white-space:nowrap; }
.wz-step-dot.active .wz-dot-label { color:var(--brand-dark); }

/* Steps */
.wz-step { display:none; }
.wz-step.active { display:block; animation:wz-in .3s ease; }
@keyframes wz-in { from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }
.wz-step-title { font-size:1.2rem; font-weight:900; color:var(--ink); margin-bottom:1.5rem; }

/* Service selector cards */
.wz-services {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px;
  margin-bottom:1.5rem;
}
.wz-svc {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; padding:1.1rem .75rem; border-radius:12px;
  border:2px solid var(--border); background:#fff; cursor:pointer;
  transition:all .2s; text-align:center; font-family:inherit;
}
.wz-svc:hover { border-color:var(--brand); background:var(--brand-light); }
.wz-svc.selected { border-color:var(--brand); background:var(--brand-light); box-shadow:0 0 0 3px rgba(94,185,233,.2); }
.wz-svc-icon { font-size:2rem; line-height:1; }
.wz-svc-name { font-size:.8rem; font-weight:700; color:var(--ink); line-height:1.2; }

/* Wizard form fields */
.wz-field-group { margin-bottom:1.25rem; }
.wz-label { display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.wz-input, .wz-select, .wz-textarea {
  width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:.9rem; font-family:inherit; color:var(--ink); background:#fff;
  outline:none; transition:border .2s;
}
.wz-input:focus, .wz-select:focus, .wz-textarea:focus { border-color:var(--brand); }
.wz-textarea { resize:vertical; min-height:90px; }

/* Option chips (radio/checkbox styled) */
.wz-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.wz-chip {
  display:flex; align-items:center; gap:.4rem;
  border:1.5px solid var(--border); border-radius:9999px;
  padding:.4rem 1rem; font-size:.8rem; font-weight:700; color:var(--ink-muted);
  background:#fff; cursor:pointer; transition:all .2s; font-family:inherit;
}
.wz-chip.selected { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-light); }
.wz-chip input { display:none; }

/* Wizard nav buttons */
.wz-nav { display:flex; align-items:center; justify-content:space-between; margin-top:2rem; gap:.75rem; }
.wz-btn-back {
  background:none; border:1.5px solid var(--border); color:var(--ink-muted);
  padding:.6rem 1.2rem; border-radius:10px; font-weight:700; font-size:.875rem;
  cursor:pointer; transition:all .2s; font-family:inherit;
  display:flex; align-items:center; gap:.4rem;
}
.wz-btn-back:hover { border-color:var(--ink-muted); color:var(--ink); }
.wz-btn-next {
  background:linear-gradient(90deg,var(--brand),var(--brand-dark)); color:#fff;
  border:none; padding:.7rem 1.6rem; border-radius:10px; font-weight:800; font-size:.9rem;
  cursor:pointer; transition:opacity .2s; font-family:inherit;
  display:flex; align-items:center; gap:.5rem; margin-left:auto;
}
.wz-btn-next:hover { opacity:.88; }
.wz-btn-next:disabled { opacity:.5; cursor:not-allowed; }

/* Success screen */
.wz-success {
  text-align:center; padding:3rem 1.5rem; display:none;
}
.wz-success.show { display:block; animation:wz-in .4s ease; }
.wz-success-check {
  width:72px; height:72px; border-radius:50%; background:#d1fae5;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
}

@media(max-width:500px){
  .wz-services { grid-template-columns:repeat(2,1fr); }
  .wz-progress::before { display:none; }
  .wz-dot-label { display:none; }
}

/* Animate brand-bar */
.brand-bar {
  background-size:200% 100%;
  animation:dt-gradient 4s linear infinite;
}
@keyframes dt-gradient {
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

/* ── Project Gallery ────────────────────── */
.project-gallery {
  margin:2.5rem 0;
}
.project-gallery h2 {
  margin-bottom:1.25rem;
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.gallery-grid.gallery-hero {
  grid-template-columns:1fr;
  max-width:800px;
}
.gallery-item {
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
  transition:transform .2s,box-shadow .2s;
  position:relative;
}
.gallery-item:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.gallery-item img {
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  aspect-ratio:16/10;
  transition:transform .35s ease;
}
.gallery-item:hover img {
  transform:scale(1.04);
}
.gallery-item figcaption {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:2rem 1rem .75rem;
  background:linear-gradient(to top, rgba(20,30,45,.82) 0%, rgba(20,30,45,.45) 60%, transparent 100%);
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.gallery-item:hover figcaption {
  opacity:1;
  transform:translateY(0);
}
/* Tag chip inside figcaption */
.gallery-item figcaption .fig-tag {
  display:inline-block;
  background:var(--brand);
  color:#fff;
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:.15rem .45rem;
  border-radius:4px;
  margin-bottom:.25rem;
  vertical-align:middle;
}
@media(max-width:640px){
  .gallery-grid { grid-template-columns:1fr; gap:12px; }
}

/* ═══════════════════════════════════════════
   BLOG LAYOUT WITH SIDEBAR
   ═══════════════════════════════════════════ */
.blog-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2.5rem;
  align-items:start;
}
.blog-article { min-width:0; }
.blog-sidebar { position:sticky; top:90px; display:flex; flex-direction:column; gap:1.25rem; }

.sidebar-cta {
  background:linear-gradient(135deg,var(--ink) 0%,#1e2d3d 100%);
  border-radius:14px; padding:1.5rem; text-align:center;
}
.sidebar-cta-icon { font-size:2.5rem; margin-bottom:.5rem; }
.sidebar-cta-btn {
  display:inline-block; background:var(--brand); color:#fff;
  padding:.6rem 1.25rem; border-radius:10px; font-weight:800;
  font-size:.875rem; text-decoration:none; transition:background .2s;
}
.sidebar-cta-btn:hover { background:var(--brand-dark); }

.sidebar-box {
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.25rem;
}
.sidebar-box-title {
  font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-muted); margin-bottom:.9rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}

.sidebar-posts { display:flex; flex-direction:column; gap:.75rem; }
.sidebar-post {
  display:flex; gap:.75rem; align-items:flex-start; text-decoration:none;
  transition:opacity .2s;
}
.sidebar-post:hover { opacity:.8; }
.sidebar-post img { width:64px; height:48px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.sidebar-post-cat { font-size:.65rem; font-weight:700; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.3px; display:block; }
.sidebar-post-title { font-size:.8rem; font-weight:700; color:var(--ink); line-height:1.3; margin-top:.1rem; }

.sidebar-svc-link {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem;
  border-radius:8px; font-size:.82rem; font-weight:600; color:var(--ink);
  text-decoration:none; transition:background .2s;
}
.sidebar-svc-link:hover { background:var(--brand-light); color:var(--brand-dark); }

@media(max-width:1100px){
  .blog-layout { grid-template-columns:1fr; }
  .blog-sidebar { position:static; }
}

/* ═══════════════════════════════════════════
   LOCALIZACIONES
   ═══════════════════════════════════════════ */
.loc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.loc-card {
  display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; border:1.5px solid var(--border); border-radius:14px;
  padding:1.25rem; text-decoration:none; color:var(--ink);
  transition:all .2s; border-left:4px solid var(--brand);
}
.loc-card:hover { border-color:var(--brand-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.loc-card-city { font-weight:900; font-size:1rem; margin-bottom:.2rem; }
.loc-card-region { font-size:.75rem; color:var(--ink-muted); margin-bottom:.6rem; }
.loc-card-dist { font-size:.72rem; color:var(--brand-dark); font-weight:700; }


/* Mobile fallback for touch devices (defensive) */
@media (hover:none) and (pointer:coarse){
  .nav-toggle { display:block; }
  .nav-links {
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--ink);
    flex-direction:column;
    padding:8px 0 16px;
    gap:0;
    border-top:3px solid var(--brand);
    box-shadow:0 12px 32px rgba(50,61,74,.25);
    z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-links a {
    color:rgba(255,255,255,.85);
    padding:13px 24px;
    border-radius:0;
    font-size:1rem;
    font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-links .btn-nav {
    margin:12px 16px 0;
    border-radius:8px;
    text-align:center;
    justify-content:center;
    padding:12px 16px;
    font-size:.95rem;
  }

  .blog-layout { grid-template-columns:1fr; }
  .blog-sidebar { position:static; }
}