/* Base theme: turquoise night + lime accent */
:root{
  --brand-yellow: #f6c35d;
  --brand-yellow-strong: #ffb943;
  --brand-blue: #0b3a75;
  --brand-blue-dark: #06244c;
  --brand-green: #7ac943;
  --brand-cream: #fff6e2;
  --bg: #fde4b3;
  --bg-2: #fef3d7;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --primary: #0f4085;
  --primary-600: #072f68;
  --accent: #7ac943;
  --accent-soft: #c5f0a8;
  --text: #05203b;
  --muted: #53616f;
  --shadow: 0 20px 50px rgba(11,21,60,.15);
  --radius: 20px;
  --radius-sm: 14px;
  --container: 1180px;
}

*{ box-sizing: border-box }
html,body{ height:100%; width:100%; max-width:100%; overflow-x:hidden }
html{ scroll-behavior: smooth; scroll-padding-top: 72px }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at -8% -20%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(900px 600px at 110% -10%, rgba(255,214,160,.55), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 75%, #fffaf1 100%);
  position: relative;
}
/* Site-wide light background variant matching the photo */
body.light-site{
  --bg: #fde3af;
  --bg-2: #fff5dc;
  --text: #051b34;
  --muted: #5c6671;
  background:
    radial-gradient(1100px 700px at -8% -20%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(900px 600px at 110% -10%, rgba(255,214,160,.55), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 75%, #fffaf1 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.45) 1.2px, transparent 1.2px),
    radial-gradient(rgba(246,195,93,.35) 1.5px, transparent 1.5px);
  background-size: 180px 180px, 260px 260px;
  opacity:.25;
  pointer-events:none;
  z-index:-1;
  mix-blend-mode: soft-light;
}
body.light-site::after{ opacity:.32 }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration: none }
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; background: var(--surface); color: var(--text); padding:10px 12px; border-radius: 10px; outline: 2px solid var(--accent); z-index:100 }

.container{ width: min(var(--container), 92%); margin-inline: auto }
.cards-section{ background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.95)); border-radius: 40px 40px 0 0; margin-top: 40px }
.section{ padding: 72px 0 }
.section.alt{ background: #fff }
.service-section{ padding: 96px 0 }
.service-panel{
  background: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  border-radius: 36px;
  padding: clamp(32px, 5vw, 60px);
  border:1px solid rgba(6,36,76,.08);
  box-shadow: 0 26px 60px rgba(6,36,76,.16);
  position:relative;
  overflow:hidden;
}
.service-panel::before,
.service-panel::after{
  content:"";
  position:absolute;
  border-radius: 50%;
  pointer-events:none;
}
.service-panel::before{
  width: 420px;
  height: 420px;
  inset: -40% auto auto -10%;
  background: radial-gradient(circle, rgba(255,214,147,.45), transparent 65%);
}
.service-panel::after{
  width: 360px;
  height: 360px;
  inset: auto -12% -38% auto;
  background: radial-gradient(circle, rgba(143,210,255,.35), transparent 60%);
}
@media (max-width: 800px){ .grid-2{ grid-template-columns: 1fr } }

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(8,31,39,.08);
  box-shadow: 0 10px 30px rgba(6,36,76,.08);
}
.header-inner{ display:flex; align-items:center; justify-content: space-between; gap:20px; padding: 18px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; color: var(--brand-blue-dark) }
.brand-logo{ width: 56px; height:56px; object-fit: contain; border-radius:50%; box-shadow: 0 10px 20px rgba(0,0,0,.12) }
.brand-name{ letter-spacing:.2px; font-size:18px }
.site-nav{ display:flex; align-items:center; gap:6px; background: rgba(11,58,117,.05); border-radius: 999px; padding: 4px }
.site-nav a{ padding:10px 18px; border-radius: 999px; transition: background .18s ease, color .18s ease; font-weight:600; color: var(--brand-blue-dark); font-size:15px }
.site-nav .btn{ color:#fff; }
.site-nav .btn:hover{ color: var(--brand-blue-dark); }
.site-nav a:hover, .site-nav a.active{ background: #fff; color: var(--brand-blue); box-shadow: 0 6px 16px rgba(6,36,76,.08) }

.nav-toggle{ display:none; background:none; border:0; width:42px; height:42px; padding:0; position:relative }
.nav-toggle span{ position:absolute; left:10px; right:10px; height:2px; background: var(--text); border-radius:2px; transition: transform .2s ease, opacity .2s ease }
.nav-toggle span:nth-child(1){ top:12px }
.nav-toggle span:nth-child(2){ top:20px }
.nav-toggle span:nth-child(3){ top:28px }

@media (max-width: 860px){
  .nav-toggle{ display:block }
  .site-nav{
    position: fixed;
    top: calc(70px + env(safe-area-inset-top, 0px));
    left: 16px; right: 16px;
    background: #fff;
    border:1px solid rgba(8,31,39,.08);
    border-radius: 18px;
    padding: 14px;
    flex-direction: column; align-items: stretch; gap:6px;
    box-shadow: 0 20px 40px rgba(6,36,76,.18);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .site-nav.open{ max-height: 70vh; overflow: auto }
  .site-nav a{ border-radius: 12px }
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; padding: 13px 24px; border-radius: 14px; font-weight:600; border:1px solid transparent; transition: transform .15s ease, background .15s ease, border .15s ease, box-shadow .15s ease; font-size:15px }
.btn:hover{ transform: translateY(-1px) }
.btn-primary{ background: linear-gradient(120deg, var(--primary), var(--primary-600)); color:#fff; border-color: rgba(7,47,104,.5); box-shadow: 0 15px 30px rgba(7,47,104,.25) }
.btn-primary:hover{ filter: brightness(1.05); box-shadow: 0 18px 34px rgba(7,47,104,.35) }
.btn-ghost{ background: rgba(11,58,117,.08); color: var(--primary); border-color: transparent }
.btn-ghost:hover{ background: rgba(11,58,117,.12) }
.btn-pill{ border-radius: 999px; background: #fff; box-shadow: 0 10px 20px rgba(6,36,76,.08); color: var(--primary); border:1px solid rgba(6,36,76,.08) }
.pill{ display:inline-flex; align-items:center; padding: 10px 20px; border-radius: 999px; background: #fff; color: var(--muted); font-weight:600; box-shadow: inset 0 0 0 1px rgba(5,32,59,.08) }
button:focus-visible, .btn:focus-visible, a:focus-visible, .logo-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px }

/* Hero slider banner */
.hero-slider{
  position:relative;
  width:100%;
  max-width: min(1120px, 96vw);
  margin: 16px auto 30px;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  color:#fff;
  padding: 0;
  overflow:hidden;
  isolation:isolate;
  --slider-height: clamp(220px, 32vw, 340px);
  height: var(--slider-height);
}
.hero-slider::before,
.hero-slider::after{
  content:"";
  opacity:0;
}
.hero-slider .slider-track{ height: 100% }
.hero-slider .slide{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
  padding: clamp(2px, 2vw, 10px);
}
.hero-slider .slide img{
  width:100%;
  height:100%;
  border-radius: 18px;
  object-fit: fill;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
@media (max-width: 900px){
  .hero-slider{
    max-width: min(760px, 96vw);
    padding: 0;
    --slider-height: clamp(180px, 42vw, 260px);
  }
}
@media (max-width: 520px){
  .hero-slider{
    max-width: 96%;
    padding: 0;
    --slider-height: clamp(160px, 58vw, 210px);
  }
}

/* Hero section */
.hero-v2{ padding-bottom: 60px }
.hero-grid{ display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap:48px; align-items:center }
.hero-copy h1{ font-size: clamp(38px, 4.2vw, 60px); margin: 0 0 18px; line-height:1.05; color: var(--text); font-weight:800 }
.hero-copy h1 span{ color: var(--primary) }
.hero-eyebrow{ font-weight:600; letter-spacing:.3px; text-transform: uppercase; font-size:13px; margin-bottom:12px; color: var(--primary-600) }
.hero-description{ color: var(--muted); font-size:18px; line-height:1.6; margin:0 }
.hero-cta{ margin-top: 24px; display:flex; gap:12px; flex-wrap:wrap }
.hero-badges{ display:flex; gap:12px; margin-top: 32px; flex-wrap:wrap }
.hero-badge{ background:#fff; border-radius: 18px; padding: 14px 18px; min-width: 150px; box-shadow: 0 12px 30px rgba(6,36,76,.12); border:1px solid rgba(6,36,76,.08) }
.hero-badge span{ font-weight:700; font-size:20px; display:block; color: var(--primary-600) }
.hero-badge p{ margin:4px 0 0; color: var(--muted); font-size:14px }
.hero-media{ align-self:flex-start }
.hero-photo{ border-radius: 36px; overflow:hidden; position:relative; box-shadow: 0 26px 60px rgba(3,14,30,.25); background:#fff; padding:6px }
.hero-photo img{ width:100%; display:block; height:100%; object-fit:cover; border-radius: 30px }
.hero-chip{ position:absolute; bottom:20px; left:20px; background: rgba(11,58,117,.92); color:#fff; padding:8px 16px; border-radius: 999px; font-weight:600; box-shadow: 0 10px 22px rgba(0,0,0,.35) }
@media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr } }
@media (max-width: 520px){
  .hero-cta{ flex-direction:column }
  .hero-badges{ flex-direction:column }
}

/* Cards/Features */
.card{ background: linear-gradient(180deg, rgba(15,42,49,.85), rgba(11,32,37,.85)); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); backdrop-filter: blur(6px); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease }
.card h3{ margin:6px 0 8px }
.card p{ color: var(--muted) }
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); border-color: rgba(201,255,106,.22) }
.light-site .card{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); border:1px solid rgba(8,31,39,.10); box-shadow: 0 10px 24px rgba(17,61,97,.08) }
.light-site .card:hover{ box-shadow: 0 16px 36px rgba(17,61,97,.15); border-color: rgba(143,210,255,.35) }
.focus-grid{ margin-top:32px; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px }
.focus-card{ background:#fff; border-radius: 24px; padding: 24px; box-shadow: 0 18px 36px rgba(6,36,76,.12); border:1px solid rgba(6,36,76,.08); transition: transform .2s ease, box-shadow .2s ease }
.focus-card h3{ margin:0 0 8px }
.focus-card p{ margin:0; color: var(--muted) }
.focus-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 52px rgba(6,36,76,.2) }
.feature{ background: linear-gradient(180deg, var(--surface), transparent); border:1px solid rgba(255,255,255,.06); padding: 18px; border-radius: var(--radius-sm) }
.light-site .feature{ background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)); border-color: rgba(8,31,39,.10) }
.feature .icon{ font-size: 28px; display:inline-block; margin-bottom: 6px }
/* Lists */
.values-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 16px; list-style: none; padding:0; margin:10px 0 0 }
.values-list li{ background: var(--surface); border:1px solid rgba(255,255,255,.06); padding:10px 12px; border-radius: 10px; font-weight:600; letter-spacing:.2px }
.light-site .values-list li{ background: #fff; border-color: rgba(8,31,39,.10); color:#0e2431 }
@media (max-width: 520px){ .values-list{ grid-template-columns: 1fr } }

/* Contact */
.contact{ text-align:center }
/* Contact actions layout */
.contact .actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px }
.contact .actions .btn{ min-width: 210px; justify-content:center }

/* Split feature section */
.split-section{ padding: 90px 0 }
.split-grid{ display:grid; grid-template-columns: minmax(0,520px) minmax(0,420px); gap:60px; align-items:center }
.split-copy h2{ font-size: clamp(34px, 3vw, 46px); margin: 12px 0 18px }
.split-copy h2 span{ color: var(--brand-green) }
.split-copy p{ color: var(--muted); font-size:18px; line-height:1.6 }
.split-actions{ display:flex; gap:12px; align-items:center; margin-top: 24px; flex-wrap:wrap }
.split-media{ position:relative; display:grid; gap:20px }
.media-card{ border-radius: 28px; padding: 18px; background: #fff; box-shadow: 0 30px 60px rgba(6,36,76,.18); position:relative }
.media-card img{ width:100%; border-radius: 22px; object-fit:cover; height:100% }
.media-card.primary{ transform: translateY(10px); background: linear-gradient(145deg, #fefefe, #f2f7ff) }
.media-card.secondary{ max-width: 240px; justify-self:end; transform: translateY(-30px); background: linear-gradient(145deg, #fff2cc, #ffe2a2) }
.media-stamp{ position:absolute; top:18px; left:18px; background: #0b3a75; color:#fff; width:48px; height:48px; border-radius: 14px; display:grid; place-items:center; font-weight:700; font-size:18px; box-shadow: 0 10px 20px rgba(7,47,104,.35) }
@media (max-width: 960px){
  .split-grid{ grid-template-columns: 1fr }
  .media-card.secondary{ justify-self:start; max-width: 200px; transform: translateY(-10px) }
}

/* Email popover menu */
.menu-wrapper{ position: relative; display:inline-block }
.menu-popover{ position:absolute; top: calc(100% + 10px); left:0; min-width: 260px; padding:8px; border-radius: 12px; background: var(--surface); border:1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px rgba(0,0,0,.35); display:none; z-index: 55 }
.menu-popover.open{ display:block }
.menu-popover::before{ content:""; position:absolute; top:-8px; left:18px; border-width: 8px; border-style: solid; border-color: transparent transparent rgba(255,255,255,.08) transparent }
.menu-list{ list-style:none; padding:0; margin:0 }
.menu-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color: var(--text); transition: background .15s ease, transform .12s ease, color .15s ease }
.menu-popover button.menu-item{ background: transparent; border: 0; box-shadow: none; appearance: none; -webkit-appearance: none; color: inherit; font: inherit; padding:10px 12px; margin:0; width:100%; text-align: left; cursor: pointer; border-radius:10px }
.menu-item:hover{ background: var(--surface-2); transform: translateX(2px) }
.menu-popover button.menu-item:hover{ background: var(--surface-2) }
.menu-item:focus-visible{ background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: 2px }
.menu-item:active{ transform: translateX(1px) }
.menu-item svg{ width:18px; height:18px; opacity:.9; fill: currentColor; transition: transform .15s ease, opacity .15s ease }
.menu-item:hover svg{ transform: translateX(2px); opacity:1 }
@media (max-width:560px){ .menu-popover{ left:50%; transform: translateX(-50%); min-width: 240px } .menu-popover::before{ left:50%; transform: translateX(-50%) } }
/* light-site adjustments for menus */
.light-site .menu-popover, .light-site .wa-quick{ background: #ffffff; border-color: rgba(8,31,39,.10); box-shadow: 0 18px 40px rgba(17,61,97,.12) }
.light-site .menu-popover::before{ border-color: transparent transparent rgba(8,31,39,.10) transparent }
.light-site .menu-item{ color:#0e2431 }
.light-site .menu-item:hover, .light-site .menu-popover button.menu-item:hover{ background: #f2f7ff }

/* Welcome photo figure (hero) */
.welcome-figure{ position: relative; width: min(520px, 85vw); aspect-ratio: 4/3; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(143,210,255,.18) }
.welcome-figure img{ width:100%; height:100%; object-fit: cover; object-position: center; transform: scale(1.02); animation: welcome-float 10s ease-in-out infinite; filter: saturate(1.02) contrast(1.02) }
.welcome-figure::before{ content:""; position:absolute; inset:-1px; border-radius: 26px; background: radial-gradient(420px 260px at 20% 10%, rgba(143,210,255,.16), transparent 60%), radial-gradient(420px 260px at 80% 90%, rgba(43,108,176,.18), transparent 60%); pointer-events:none }
.welcome-figure::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 80% -10%, rgba(0,0,0,.08), transparent 50%); mix-blend-mode: multiply; pointer-events:none }
.welcome-pill{ position:absolute; top:12px; left:12px; padding:6px 10px; font-weight:700; border-radius: 999px; background: rgba(8,31,39,.7); color:#eaf6ff; border:1px solid rgba(143,210,255,.35); box-shadow: 0 6px 18px rgba(0,0,0,.35); letter-spacing:.2px }
@keyframes welcome-float{ 0%,100%{ transform: scale(1.02) translateY(0) } 50%{ transform: scale(1.025) translateY(-8px) } }

/* Map */
.map-card{ background: linear-gradient(180deg, rgba(15,42,49,.85), rgba(11,32,37,.85)); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding:12px; box-shadow: var(--shadow); overflow:hidden; backdrop-filter: blur(6px) }
.light-site .map-card{ background: #ffffff; border-color: rgba(8,31,39,.10); box-shadow: 0 10px 24px rgba(17,61,97,.10) }
.hn-map{ width: 100%; height: auto; display:block; border-radius: 10px }
.leaflet-map{ width: 100%; height: 420px; border-radius: 10px }
.leaflet-container{ background: #0a1812 }
.light-site .leaflet-container{ background: #eaf4ff }
.leaflet-tile{ filter: none }
.leaflet-control-zoom a{ background: var(--surface); color: var(--text); border:1px solid rgba(255,255,255,.08) }
.light-site .leaflet-control-zoom a{ background: #fff; color:#0e2431; border-color: rgba(8,31,39,.12) }
.leaflet-marker-icon{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)) }
.office-card .muted{ color: var(--muted) }
.pin{ transition: transform .15s ease }
.pin:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 20px }
.pin:hover{ transform: translateY(-2px) }
.zone{ opacity:.9 }
.zone.dim{ opacity:.25 }
.office-card.active{ border-color: rgba(142,240,194,.35) }

/* Map legend (static key) */
.map-legend{
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);
  line-height: 1.2;
}
.map-legend .legend-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; white-space:nowrap }
.map-legend .legend-row svg{ display:block; flex:0 0 auto }
.map-legend .legend-row span{ font-weight:600 }
.light-site .map-legend{ background: #fff; color:#0e2431; border-color: rgba(8,31,39,.08) }

/* Vendor pin helper class (for small adjustments) */
.vendor-pin{ width:20px; height:20px; display:inline-block }
.vendor-pin svg{ width:18px; height:18px; display:block }

/* Footer */
.site-footer{ border-top: 0; background: var(--brand-blue-dark); color:#fff; margin-top: 60px }
.footer-inner{ display:flex; align-items:center; justify-content: space-between; padding: 32px 0; gap:14px; flex-wrap:wrap }
.footer-nav{ display:flex; gap:14px; flex-wrap:wrap }
.footer-nav a{ color: rgba(255,255,255,.8); font-weight:500 }

/* Logos grid */
.logos-actions{ display:flex; align-items:center; justify-content: space-between; gap:12px; margin: 10px 0 16px }
.search{ width: min(420px, 100%); position: relative }
.search input{ width:100%; padding: 12px 14px 12px 40px; border-radius: 12px; border:1px solid rgba(255,255,255,.12); background: var(--surface); color: var(--text) }
.light-site .search input{ background:#fff; color:#0e2431; border-color: rgba(8,31,39,.14) }
.search input::placeholder{ color: #97a69f }
.search .icon{ position:absolute; left:12px; top:50%; transform: translateY(-50%); opacity:.7 }
.logos-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: stretch }
@media (max-width: 1200px){ .logos-grid{ grid-template-columns: repeat(5, 1fr) } }
@media (max-width: 980px){ .logos-grid{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 760px){ .logos-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 520px){ .logos-grid{ grid-template-columns: repeat(2, 1fr) } }
.logos-grid.compact{ gap:12px }
.logo-card{ display:flex; flex-direction: column; align-items:center; justify-content:center; padding: 14px; background: linear-gradient(180deg, rgba(15,42,49,.85), rgba(11,32,37,.85)); border:1px solid rgba(255,255,255,.07); border-radius: 14px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border .2s ease; backdrop-filter: blur(4px) }
.logo-card:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 36px rgba(0,0,0,.35); border-color: rgba(201,255,106,.25) }
.logo-card img{ width: 100%; height: 86px; object-fit: contain; filter: saturate(1.02) contrast(1.02); background: #f3f8ff; border:1px solid rgba(8,31,39,.10); border-radius:10px; padding:8px; mix-blend-mode: normal }
.logo-caption{ margin-top:8px; color: var(--muted); font-size: 12px; text-align:center }
.light-site .logo-card{ background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)); border-color: rgba(8,31,39,.10) }
.light-site .logo-card:hover{ border-color: rgba(143,210,255,.35); box-shadow: 0 14px 32px rgba(17,61,97,.15) }
.no-results{ color: var(--muted); text-align:center; margin-top: 8px }

/* Extra small screens tuning */
@media (max-width:420px){
  .logos-grid{ grid-template-columns: repeat(2, 1fr); gap:12px }
  .logo-card{ padding:10px; border-radius:12px }
  .logo-card img{ height:72px; padding:6px }
  .logo-caption{ font-size:11px }
}
@media (max-width:340px){
  .logos-grid{ grid-template-columns: 1fr 1fr; gap:10px }
  .logo-card img{ height:64px }
  .logo-caption{ font-size:10px }
}
/* Preloader mobile adjustments */
@media (max-width:420px){
  .preloader .box{ padding:12px 14px }
  .preloader img{ width:60px; height:60px }
  .preloader .txt{ font-size:14px }
}

/* Product modal */
.modal{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(4,16,20,.45); backdrop-filter: blur(6px); z-index: 80; padding: 20px }
.modal.open{ display:flex }
.modal-card{ width: min(920px, 96vw); background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)); border:1px solid rgba(8,31,39,.10); border-radius: 16px; box-shadow: 0 22px 60px rgba(0,0,0,.35); color:#0e2431; overflow:hidden }
body:not(.light-site) .modal-card{ background: linear-gradient(180deg, rgba(15,42,49,.92), rgba(11,32,37,.88)); border-color: rgba(255,255,255,.08); color: var(--text) }
.modal-head{ display:flex; align-items:center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(8,31,39,.10) }
.modal-body{ display:grid; grid-template-columns: 360px 1fr; gap: 16px; padding: 16px }
.modal-img{ background:#f3f8ff; border:1px solid rgba(8,31,39,.10); border-radius: 12px; padding: 10px; display:flex; align-items:center; justify-content:center }
.modal-img img{ width:100%; height: 320px; object-fit: contain }
.modal-title{ margin:0; font-size: 22px }
.modal-meta{ color:#546b79; margin: 6px 0 12px }
.modal-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px }
.modal-close{ background: transparent; border:0; width:36px; height:36px; border-radius: 10px; display:grid; place-items:center; cursor:pointer }
.modal-close:hover{ background: rgba(2,49,86,.06) }
@media (max-width: 760px){ .modal-body{ grid-template-columns: 1fr } .modal-img img{ height: 220px } }

/* Reveal animations */
.reveal-up{ opacity:0; transform: translateY(16px); transition: transform .6s ease, opacity .6s ease }
.reveal-up.is-visible{ opacity:1; transform: translateY(0) }
/* extra reveal variants */
.reveal-left{ opacity:0; transform: translateX(-16px); transition: transform .6s ease, opacity .6s ease }
.reveal-left.is-visible{ opacity:1; transform: translateX(0) }
.reveal-right{ opacity:0; transform: translateX(16px); transition: transform .6s ease, opacity .6s ease }
.reveal-right.is-visible{ opacity:1; transform: translateX(0) }
.reveal-zoom{ opacity:0; transform: scale(.96); transition: transform .5s ease, opacity .5s ease }
.reveal-zoom.is-visible{ opacity:1; transform: scale(1) }
.reveal-fade{ opacity:0; transition: opacity .6s ease }
.reveal-fade.is-visible{ opacity:1 }
.delay-1{ transition-delay: .1s }
.delay-2{ transition-delay: .2s }
.delay-3{ transition-delay: .3s }

/* Utilities */
.hidden{ display:none !important }
/* Toast */
.toast{ position:fixed; left:50%; bottom:80px; transform: translateX(-50%); background: var(--surface); color: var(--text); border:1px solid rgba(255,255,255,.08); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); opacity:0; transition: opacity .2s ease, transform .2s ease; z-index:60 }
.toast.show{ opacity:1; transform: translate(-50%, -6px) }

/* Page transitions */
@keyframes page-enter { from{ opacity:0 } to{ opacity:1 } }
body{ animation: page-enter .25s ease; }
.page-exit{ opacity:.0; transition: opacity .12s ease; }

/* Preloader overlay */
.preloader{ position: fixed; inset:0; display:grid; place-items:center; z-index: 1000; background: rgba(245,251,255,.96); backdrop-filter: blur(4px); color:#0e2431; transition: opacity .3s ease }
body:not(.light-site) .preloader{ background: rgba(7,24,28,.94); color: var(--text) }
.preloader.hide{ opacity:0; pointer-events:none }
.preloader .box{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 18px; background:#fff; border:1px solid rgba(8,31,39,.10); border-radius: 14px; box-shadow: 0 16px 40px rgba(17,61,97,.15); perspective: 900px }
body:not(.light-site) .preloader .box{ background: var(--surface); border-color: rgba(255,255,255,.08); box-shadow: 0 16px 40px rgba(0,0,0,.35) }
.preloader img{ width:72px; height:72px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.15)); transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform; animation: logo-spin-3d 1.6s linear infinite }
.preloader .txt{ font-weight:600; color:#3f5561 }
body:not(.light-site) .preloader .txt{ color: var(--muted) }

@keyframes logo-spin-3d{ to{ transform: rotateY(360deg) } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important }
}

/* Back to top */
.back-to-top{ position:fixed; right:16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width:44px; height:44px; border-radius: 50%; display:grid; place-items:center; background: linear-gradient(180deg, var(--primary), var(--primary-600)); color:#fff; border:1px solid rgba(0,0,0,.2); box-shadow: 0 10px 24px rgba(18,184,134,.28); cursor:pointer; opacity:0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, filter .15s ease, box-shadow .15s ease; z-index:40 }
.back-to-top:hover{ filter: brightness(1.05); box-shadow: 0 14px 32px rgba(18,184,134,.36) }
.back-to-top.show{ opacity:1; transform: translateY(0) }

/* Slider / Carrusel */
.slider{ position:relative; width:100%; overflow:hidden; isolation:isolate }
.slider-track{ display:flex; width:100%; transition: transform .7s cubic-bezier(.35,.6,.3,1); will-change: transform }
.slide{ flex: 0 0 100%; }

/* Slider controls */
.slider-controls{ position:absolute; top:50%; left:24px; right:24px; transform: translateY(-50%); display:flex; align-items:center; justify-content:space-between; pointer-events:none; z-index:5 }
.slider-controls button{ pointer-events:auto; width:52px; height:52px; border-radius: 50%; border:1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.15); color:#fff; font-size:22px; cursor:pointer; display:grid; place-items:center; box-shadow: 0 12px 30px rgba(0,0,0,.35); backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease }
.slider-controls button:hover{ background: rgba(255,255,255,.25); transform: translateY(-2px) }

.slider-dots{ position:absolute; left:50%; bottom:26px; transform: translateX(-50%); display:flex; gap:12px; z-index:6 }
.slider-dots button{ width:34px; height:6px; border-radius: 999px; background: rgba(255,255,255,.35); border:0; cursor:pointer; padding:0; display:block; transition: transform .25s ease, background .25s ease, opacity .25s ease }
.slider-dots button[aria-selected="true"]{ background: #fff; transform: scaleX(1.1); opacity:1 }
.slider-dots button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* News / Blog cards */
.news-section{ padding-top: 40px }
.section-heading{ display:flex; align-items:center; justify-content: space-between; gap:12px }
.link-arrow{ color: var(--primary); font-weight:600; display:inline-flex; align-items:center; gap:6px }
.link-arrow::after{ content:"→"; font-size:18px }
.news-grid{ display:flex; flex-direction:column; gap:18px; margin-top:24px }
.news-card{ background:#fff; border-radius: 28px; padding: 24px; box-shadow: 0 24px 50px rgba(6,36,76,.12); border:1px solid rgba(6,36,76,.08); position:relative; overflow:hidden }
.news-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,.7), transparent 60%); pointer-events:none }
.news-card-link{ display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap:24px; color: inherit }
.news-card--no-image .news-card-link{ grid-template-columns: 1fr }
.news-copy h3{ margin:0 0 8px; font-size:22px; color: var(--text) }
.news-copy p{ margin:0 0 12px; color: var(--muted); font-size:15px; line-height:1.5 }
.news-date{ font-weight:600; color: var(--primary); font-size:13px; letter-spacing:.3px }
.news-thumb{ margin:0; border-radius: 24px; overflow:hidden; background: #f0f4ff; position:relative }
.news-thumb img{ width:100%; height:100%; object-fit:cover }
.news-thumb--placeholder{ display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #f7c45d, #ffd995) }
.news-thumb-badge{ font-size:28px; font-weight:800; color:#0b3a75 }
.news-card:hover{ transform: translateY(-4px); box-shadow: 0 30px 60px rgba(6,36,76,.18) }
.news-slider{ margin-top:24px }
.news-slider .slider-track{ display:flex; width:100%; flex-direction: row; flex-wrap: nowrap; align-items: stretch }
.news-slider .slide{ padding: 4px 0; display:flex; min-width:100% }
.news-slider .slide .news-card{ width:100% }
.news-slider .slider-controls button{
  background: rgba(11,58,117,.12);
  color: var(--primary);
  border-color: rgba(6,36,76,.12);
  box-shadow: 0 12px 30px rgba(6,36,76,.18);
}
.news-slider .slider-controls button:hover{ background: rgba(11,58,117,.2) }
.news-slider .slider-dots button{ background: rgba(11,58,117,.22) }
.news-slider .slider-dots button[aria-selected="true"]{ background: var(--primary) }
@media (max-width: 720px){
  .news-card-link{ grid-template-columns: 1fr }
  .news-thumb{ order:-1; height:220px }
}

/* Modal news overrides */
#newsModal .modal-card{ max-width: 840px }
#newsModal img{ width:100%; height:auto; border-radius:12px; object-fit:cover }
.news-modal-text{ font-size:15px; line-height:1.55; color: var(--muted) }
body:not(.light-site) .news-modal-text{ color:#c0d1ca }

/* (botón pausa removido) */

@media (max-width: 860px){
  .header-inner{ padding:14px 0 }
  .brand-logo{ width:50px; height:50px }
  .site-nav a{ padding:12px 14px; font-size:15px }
  .slider-controls{ left:12px; right:12px }
  .slider-controls button{ width:44px; height:44px; font-size:18px }
}
@media (max-width: 640px){
  .hero-slider{ border-radius: 32px; padding-bottom: 64px }
  .slider-controls button{ width:40px; height:40px }
}
@media (max-width: 480px){
  .hero-slider{ border-radius: 24px; padding-bottom: 70px }
  .slider-controls{ display:none }
  .slider-dots{ bottom:18px }
}
/* WhatsApp floating button */
.whatsapp-float{ position:fixed; left:16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px; border-radius: 50%; display:grid; place-items:center; background:#25D366; color:#fff; border:1px solid rgba(0,0,0,.18); box-shadow: 0 10px 24px rgba(0,0,0,.35); z-index:45; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease }
.whatsapp-float:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 32px rgba(0,0,0,.45) }
.whatsapp-float svg{ width:28px; height:28px; fill:#fff }
@media (max-width:520px){ .whatsapp-float{ left:12px; bottom:12px; width:52px; height:52px } }

/* WhatsApp quick-pick (from floating button) */
.wa-quick{ position: fixed; left:16px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); min-width: 300px; padding:8px; border-radius: 12px; background: var(--surface); border:1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px rgba(0,0,0,.35); display:none; z-index:70 }
.wa-quick.open{ display:block }
.wa-quick .menu-item{ width:100% }
@media (max-width:520px){ .wa-quick{ left:12px; right:12px; min-width:auto; bottom:74px } }