.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); }
.site-header::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: linear-gradient(90deg, var(--secondary), var(--accent), #d9f99d, var(--secondary)); background-size: 220% 100%; opacity:.85; animation:fresh-flow 7s linear infinite; }
.navbar{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; min-height:82px; }
.brand{ display:flex; align-items:center; min-width:220px; flex:0 0 auto; }
.brand img{ height:58px; width:auto; max-width:250px; object-fit:contain; }
.nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; min-width:0; }
.nav a{ color:var(--text); padding:10px 12px; border-radius:8px; font-weight:700; transition: background .15s ease, color .15s ease, transform .08s ease; }
.nav a:hover{ background:rgba(49,199,192,.12); color:var(--primary); }
.nav a:active{ transform:translateY(1px); }
.nav-cta{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:8px; font-weight:800; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:8px; border:1px solid transparent; font-weight:800; cursor:pointer; transition:transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space:nowrap; position:relative; overflow:hidden; }
.btn::before{ content:''; position:absolute; top:-40%; bottom:-40%; left:-55%; width:42%; transform:rotate(18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent); transition:left .58s ease; pointer-events:none; }
.btn:hover::before{ left:115%; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.68; cursor:wait; transform:none; }
.btn-primary{ background:linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; box-shadow:0 14px 30px rgba(15,143,139,.2); }
.btn-outline{ background:rgba(255,255,255,.72); border-color:rgba(15,143,139,.24); color:var(--primary); }
.btn-outline:hover{ background:rgba(49,199,192,.1); }
.btn-accent{ background:linear-gradient(135deg, #7bdff2, #b8f7e6); color:#12313a; box-shadow:0 14px 30px rgba(49,199,192,.18); }
.btn-whatsapp{ background:#22c55e; color:#fff; box-shadow:0 14px 30px rgba(34,197,94,.18); }

.hero{ position:relative; padding:54px 0 70px; margin-top:-6px; overflow:hidden; background: radial-gradient(760px 320px at 16% 16%, rgba(49,199,192,.18), transparent 62%), radial-gradient(620px 280px at 86% 14%, rgba(123,223,242,.18), transparent 62%), linear-gradient(180deg, #ffffff 0%, #f3fbfb 100%); }
.hero::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(to right, rgba(15,143,139,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,143,139,.04) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(680px 420px at 42% 18%, black 46%, transparent 76%); pointer-events:none; }
.hero::after{ content:''; position:absolute; inset:-25% -10%; background:linear-gradient(115deg, transparent 18%, rgba(255,255,255,.42) 28%, rgba(184,247,230,.22) 34%, transparent 46%); transform:translateX(-60%); animation:fresh-sweep 11s ease-in-out infinite; pointer-events:none; }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-7); align-items:center; }
.hero-copy p{ max-width:62ch; font-size:18px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--space-5); }
.hero-card{ position:relative; background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:var(--space-6); }
.hero-card::before{ content:''; position:absolute; right:22px; top:18px; width:86px; height:48px; border-top:2px solid rgba(49,199,192,.28); border-radius:50%; transform:rotate(-12deg); pointer-events:none; }
.hero-card::after{ content:''; position:absolute; right:54px; top:36px; width:72px; height:38px; border-top:2px solid rgba(123,223,242,.32); border-radius:50%; transform:rotate(-12deg); pointer-events:none; }

.media{ position:relative; width:100%; aspect-ratio:3 / 2; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:#fff; margin-bottom:12px; box-shadow:0 12px 26px rgba(15,23,42,.07); }
.media::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 18%, rgba(255,255,255,.36) 34%, transparent 50%); transform:translateX(-120%); transition:transform .8s ease; pointer-events:none; }
.media:hover::after,
.media.is-visible::after{ transform:translateX(120%); }
.media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); transition:transform .8s ease, filter .8s ease; }
.media:hover img{ transform:scale(1.045); filter:saturate(1.05) brightness(1.03); }
.hero-media{ aspect-ratio:16 / 10; background:#eaf8fb; }
.manifesto{ margin:8px 0 12px; padding:14px; border-radius:8px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(49,199,192,.1), rgba(123,223,242,.16)); }
.manifesto__text{ margin:0; font-family:var(--font-heading); font-weight:800; line-height:1.18; color:var(--text); font-size:20px; text-align:center; }

.fold{ margin-top:12px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.88); padding:10px 12px; overflow:hidden; }
.fold__summary{ cursor:pointer; font-weight:800; list-style:none; user-select:none; padding:6px 0; }
.fold__summary::-webkit-details-marker{ display:none; }
.fold__summary::after{ content:'v'; float:right; opacity:.7; transition:transform .25s ease; }
.fold[open] .fold__summary::after{ transform:rotate(180deg); }

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-5); }
.badge{ border:1px solid var(--border); background:rgba(255,255,255,.78); padding:8px 10px; border-radius:999px; font-weight:800; color:var(--text); font-size:13px; box-shadow:0 10px 22px rgba(15,23,42,.05); }
.card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:8px; padding:var(--space-6); box-shadow:0 10px 26px rgba(15,23,42,.06); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow:hidden; }
.card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--secondary), var(--accent)); opacity:.9; }
.card:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(15,23,42,.1); border-color:rgba(49,199,192,.32); }
.card::after{ content:''; position:absolute; right:18px; bottom:18px; width:38px; height:38px; background:linear-gradient(135deg, rgba(49,199,192,.22), rgba(123,223,242,.02)); clip-path:polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%); opacity:0; transform:scale(.7) rotate(12deg); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.card:hover::after{ opacity:1; transform:scale(1) rotate(0deg); }
.card h3{ margin-bottom:10px; }
.card p{ margin:0; }
.card-icon{ width:46px; height:46px; border-radius:8px; display:grid; place-items:center; background:rgba(49,199,192,.12); border:1px solid rgba(49,199,192,.22); margin-bottom:12px; color:var(--primary); font-weight:900; font-size:14px; }
.service-card{ min-height:220px; }
.review p{ font-size:16px; color:var(--text); margin-bottom:14px; }

.form{ display:grid; gap:12px; }
.field label{ display:block; font-weight:800; margin-bottom:6px; color:var(--text); }
.field input,.field textarea,.field select{ width:100%; padding:12px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.96); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:rgba(49,199,192,.45); box-shadow:0 0 0 4px rgba(49,199,192,.12); }
.field textarea{ min-height:110px; resize:vertical; }
.form-alert{ margin:0 0 10px; padding:12px 14px; border-radius:8px; color:#991b1b; background:#fef2f2; border:1px solid #fecaca; font-weight:800; }
.form-note{ font-size:13px; color:var(--text-soft); margin:0; }

.boost{ position:relative; padding:34px 0; margin-top:-18px; background:linear-gradient(180deg, #fff, var(--bg-soft)); border-bottom:1px solid var(--border); }
.boost-grid{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.boost-item{ padding:22px 16px; border-radius:8px; background:rgba(255,255,255,.94); border:1px solid var(--border); text-align:center; box-shadow:0 16px 36px rgba(15,143,139,.1); }
.boost-number{ display:block; font-family:var(--font-heading); font-weight:800; font-size:32px; color:var(--primary); }
.boost-label{ margin:6px 0 0; font-size:14px; font-weight:700; color:var(--text-soft); }

.trust-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(90deg, #fff, var(--bg-soft), #fff); }
.trust-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding:18px 0; }
.trust-item{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,.9); box-shadow:0 12px 28px rgba(15,23,42,.05); }
.trust-ic{ width:40px; height:40px; border-radius:8px; display:grid; place-items:center; background:rgba(49,199,192,.12); border:1px solid rgba(49,199,192,.22); color:var(--primary); font-weight:900; font-size:13px; flex:0 0 auto; }
.trust-item strong{ display:block; margin:0 0 2px; }
.trust-item p{ margin:0; font-size:13px; line-height:1.35; }

.site-footer{ position:relative; border-top:1px solid var(--border); background:#fff; padding:calc(var(--space-6) + 4px) 0; }
.site-footer::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:3px; background:linear-gradient(90deg, var(--secondary), var(--accent)); opacity:.65; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-6); align-items:start; }
.footer-title{ font-family:var(--font-heading); color:var(--text); margin:0 0 10px; font-weight:800; }
.footer-links a{ display:block; padding:4px 0; color:var(--text-soft); }
.footer-links a:hover{ color:var(--primary); }
.footer-bottom{ margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border); text-align:center; }
.footer-legal{ margin:0; font-size:13px; color:var(--text); line-height:1.45; }
.footer-copy{ margin:8px 0 0; font-size:13px; }
.footer-copy a{ text-decoration:underline; text-underline-offset:3px; }
.footer-contacts a{ display:flex; align-items:center; gap:8px; }
.footer-contacts .icon{ min-width:28px; color:var(--primary); font-weight:900; font-size:12px; }

@media (max-width:980px){
  .nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; }
  .nav{ display:none; }
  .nav[data-open="true"]{ display:grid; position:absolute; left:0; right:0; top:100%; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:12px var(--space-5); gap:6px; box-shadow:0 16px 40px rgba(15,23,42,.1); }
  .nav[data-open="true"] a{ padding:12px 10px; }
  .brand{ min-width:auto; }
  .brand img{ height:52px; max-width:210px; }
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-6); }
  .hero{ padding:42px 0 56px; }
  .boost-grid{ grid-template-columns:repeat(2, 1fr); }
  .trust-grid,.footer-grid{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .boost-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .hero-actions{ width:100%; }
}

.hero-logo{
  width: min(280px, 70vw);
  height: auto;
  margin: 0 0 18px;
  filter: drop-shadow(0 14px 24px rgba(8,55,94,.12));
}

.before-after-section{
  background: linear-gradient(180deg, #f3fbfb, #fff);
}

.before-after{
  --split: 50%;
  position: relative;
  width: min(980px, 100%);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 46px rgba(15,23,42,.14);
  background: #eaf8fb;
}

.before-after__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.before-after__after{
  position: absolute;
  inset: 0;
  width: var(--split);
  overflow: hidden;
}

.before-after__after .before-after__img{
  width: calc(100% / (var(--split-num, .5)));
  max-width: none;
}

.before-after__handle{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 3px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15,143,139,.35), 0 0 18px rgba(15,143,139,.35);
  pointer-events: none;
}

.before-after__handle::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--secondary);
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
}

.before-after__label{
  position: absolute;
  top: 16px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}

.before-after__label--before{ left: 16px; }
.before-after__label--after{ right: 16px; }

.before-after__range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

@media (max-width: 640px){
  .before-after{ aspect-ratio: 4 / 3; }
  .before-after__label{ top: 10px; font-size: 12px; }
}

@keyframes fresh-flow{
  to{ background-position: 220% 0; }
}

@keyframes fresh-sweep{
  0%, 58%{ transform:translateX(-65%); opacity:0; }
  70%{ opacity:.85; }
  100%{ transform:translateX(65%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .site-header::after,
  .hero::after{ animation:none; }
  .btn::before,
  .media::after,
  .card::after{ display:none; }
  .media img{ transform:none; transition:none; }
}