:root{
  --brand-1:#0e6793;
  --brand-2:#4fa0c7;
  --brand-dark:#0b3b5a;
  --muted:#6c757d;
  --surface:#ffffff;
  --line:#e7eef3;
  --soft:#f7fafc;
}

html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#fff;
  color:#222;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

/* Keep the original navigation, just make it cleaner. */
.navbar{
  border-bottom:1px solid rgba(14,103,147,.08);
}
.navbar-brand img{
  border-radius:12px;
  box-shadow:0 6px 16px rgba(14,103,147,.10);
}
.nav-link{font-weight:500}
.navbar .btn-primary{border-radius:10px;padding:.62rem 1rem}

/* HERO — same original composition, refined rather than redesigned. */
.hero-section{
  position:relative;
  min-height:68vh;
  display:flex;
  align-items:center;
  padding:4.5rem 0;
  overflow:hidden;
  background:linear-gradient(180deg,#fbfdff 0%,#f7fafc 100%);
}
.hero-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(14,103,147,.08), transparent 11%),
    radial-gradient(circle at 85% 70%, rgba(79,160,199,.07), transparent 13%);
}
.hero-content{position:relative;z-index:2}
.hero-section h1{letter-spacing:-.03em;line-height:1.06}
.hero-section .lead{max-width:600px;line-height:1.7}
.logo-art{
  max-width:340px;
  margin:auto;
  padding:1.5rem;
  border-radius:24px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(14,103,147,.08);
  box-shadow:0 18px 45px rgba(10,40,60,.08);
}
.hero-logo{
  width:250px;
  max-width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  margin:auto;
}

/* Original subtle parallax shapes. */
#parallax-shapes{position:absolute;inset:0;pointer-events:none}
.shape{position:absolute;border-radius:50%}
.s1{width:180px;height:180px;right:-40px;top:10%;background:linear-gradient(45deg,var(--brand-1),var(--brand-2));opacity:.08;transform:translateZ(0)}
.s2{width:260px;height:260px;left:-60px;bottom:-40px;background:linear-gradient(45deg,var(--brand-2),var(--brand-dark));opacity:.04}

/* Sections */
.section-title{font-weight:700;margin-bottom:.5rem;letter-spacing:-.015em}
.py-6{padding:4.6rem 0}
.bg-light{background:var(--soft)!important}

/* About — keep the same cards, make them look intentional. */
.about-cards .card{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fbfdfe);
}
.about-cards .card i{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(14,103,147,.08)}
.hover-lift{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.hover-lift:hover{transform:translateY(-5px);border-color:rgba(14,103,147,.16);box-shadow:0 16px 30px rgba(9,33,49,.08)!important}

/* Services — visibly better while preserving original layout/content. */
.service-card{
  height:100%;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;
}
.service-card>i,.service-card>.service-svg-icon{
  width:56px;
  height:56px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(14,103,147,.10),rgba(79,160,199,.16));
  display:inline-block;
}
.service-card h5{font-weight:700;margin-top:.45rem}
.hover-tilt:hover{transform:translateY(-7px);border-color:rgba(14,103,147,.18);box-shadow:0 18px 36px rgba(13,45,60,.09)!important}
.service-svg-icon{color:var(--brand-1)}

/* Portfolio — photographic, local, clickable. */
.portfolio-card{
  height:100%;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  outline:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.portfolio-card:hover,.portfolio-card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(14,103,147,.18);
  box-shadow:0 18px 36px rgba(9,33,49,.11)!important;
}
.portfolio-media{position:relative;overflow:hidden;background:#edf4f8}
.pc-thumb{
  display:block;
  width:100%;
  height:230px;
  object-fit:cover;
  transition:transform .45s ease;
}
.portfolio-card:hover .pc-thumb{transform:scale(1.035)}
.portfolio-card h5{font-weight:700;margin-bottom:.5rem}
.portfolio-card .p-3{padding:1.25rem!important}
.portfolio-view{
  position:absolute;
  right:14px;
  top:14px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--brand-dark);
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 20px rgba(9,33,49,.12);
  opacity:.92;
}
.portfolio-modal-shell{border:0;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px rgba(9,33,49,.22)}
.portfolio-modal-image{height:420px;object-fit:cover;background:#eef6fa}

/* Testimonial — same section/content, cleaner finish. */
.testimonial-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,253,.98));
}
#ts-text,#ts-author{transition:opacity .25s ease}

/* Contact — retain two-card layout. */
#contact .card{
  height:100%;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.form-control{
  border-radius:11px;
  border-color:#dde6ec;
  padding:.8rem .9rem;
}
.form-control:focus{border-color:rgba(14,103,147,.45);box-shadow:0 0 0 .2rem rgba(14,103,147,.08)}
.contact-link{color:inherit;text-decoration:none}
.contact-link:hover,.contact-link:focus{color:var(--brand-1);text-decoration:underline}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* Existing reveal language, made stable. */
.reveal-up,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transform:translateY(24px) scale(.98);transition:all .7s cubic-bezier(.2,.9,.25,1)}
.reveal-left{transform:translateX(-28px)}
.reveal-right{transform:translateX(28px)}
.reveal-scale{transform:scale(.98)}
.revealed{opacity:1;transform:translateX(0) translateY(0) scale(1)}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.22s}
.delay-3{transition-delay:.34s}

.btn{transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background-color:var(--brand-1);border-color:var(--brand-1)}
.btn-primary:hover{background-color:#0b5b82;border-color:#0b5b82}

.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  width:58px;
  height:58px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  z-index:999;
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);color:#fff}
.whatsapp-float:focus-visible{outline:3px solid rgba(37,211,102,.35);outline-offset:4px}
.whatsapp-float.pulse{animation:waPulse .6s ease}
@keyframes waPulse{50%{transform:scale(1.12)}}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(79,160,199,.24);outline-offset:2px}

@media (max-width:991px){
  .navbar-collapse{padding:.75rem 0 1rem}
  .navbar .btn-primary{display:inline-block;margin-top:.5rem}
}

@media (max-width:767px){
  .hero-section{padding:3.25rem 0;min-height:auto}
  .hero-section .display-5{font-size:2.2rem}
  .logo-art{padding:1rem;margin-top:1.7rem;max-width:280px}
  .py-6{padding:3.6rem 0}
  .pc-thumb{height:215px}
  .portfolio-modal-image{height:250px}
  .whatsapp-float{right:18px;bottom:18px;width:54px;height:54px;font-size:29px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-up,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important}
}