:root{
--brand:#1f95ff;           /* accent azul moderno */
--ink:#0b1020;             /* texto principal */
--muted:#6b7280;           /* texto secundario */
--bg:#ffffff;              /* fondo */
--bg-dark:#1c2226v;
--section:#eeeeee;         /* fondo suave */
--radius: 22px;
--anchor-offset: 0px;
}
html,body{ font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); scroll-behavior:smooth; }
p{font-size: 1.05rem}
p.subtitle{font-size: 1.2rem}

/* NAVBAR */
.navbar{position:relative;z-index:1030;padding-block:.9rem;transition:padding .28s ease,background .28s ease,box-shadow .28s ease,transform .28s ease;background:#fff;box-shadow:none}
.navbar.stuck{position:fixed;top:0;left:0;right:0;padding-block:.4rem;background:#fff;box-shadow:0 8px 30px #0000000f}
.navbar-brand{font-weight:700}
.nav-link{font-weight:600;color:#1f2937}
.nav-link:hover{color:var(--brand)}
.nav-link.active{color:var(--brand)!important}
span.u-visually-hidden{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
ul.navbar-nav{text-transform:uppercase}
ul.navbar-nav .nav-item a.nav-link{font-weight:500}
ul.navbar-nav .nav-item a.nav-link span{font-weight:700}
.navbar-toggler-icon {width: 1.3em;height: 1.3em}
.navbar-toggler{border:none}
.navbar-toggler:focus{box-shadow:none}

/* Logo grande/chico */
.brand-logo{width:70px;height:auto;transition:width .28s ease,transform .28s ease,opacity .28s ease}
.navbar.stuck .brand-logo{width:42px}

/* HERO */
.hero{ position:relative; min-height: 85vh; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; background:url('../images/top-bg.jpg') center/cover no-repeat; filter:brightness(.7); }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.20)); }
.hero .content{ position:relative; z-index:2; }
.hero h1{ font-weight:800; font-size: clamp(2.2rem, 3.2vw + 1rem, 4.2rem); line-height:1.05; color:#fff; }
.hero p.lead{ color:#ecf2ff; font-size: clamp(1.05rem, .5vw + 1rem, 2rem) }
.btn-brand{ background:var(--brand); border:none; color:#fff; font-weight:500; border-radius:30px;font-size: 1.15rem;}
.btn-brand:hover{background:#000; color:#FFF}

/* --- HERO tilt/parallax --- */
.hero {
  perspective: 1000px; /* necesaria para el efecto 3D */
  --tiltX: 0;     /* grados en Y */
  --tiltY: 0;     /* grados en X */
  --pz: 0;        /* parallax Z (si querés usar) */
  --px: 0%;       /* parallax X para bg */
  --py: 0%;       /* parallax Y para bg */
}

.hero .content {
  will-change: transform;
  transform: rotateX(calc(var(--tiltY) * 1deg)) rotateY(calc(var(--tiltX) * 1deg)) translateZ(0);
  transition: transform .18s ease;
}

.hero:hover .content {
  transition: transform .06s ease; /* más reactivo en hover */
}

.hero-bg {
  will-change: transform;
  transform: translate(var(--px), var(--py)) scale(1.06);
  transition: transform .2s ease, filter .2s ease;
}

/* un toque de “profundidad” al overlay cuando hay hover */
.hero:hover .hero-overlay {
  background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.20));
}

.tilt-card {
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

.tilt-content {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  box-shadow: 0 12px 30px rgba(17, 23, 41, .08);
}

.tilt-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform 0.25s ease;
}

/* Brillo diagonal como en el ejemplo */
.tilt-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.tilt-card:hover .tilt-content::before {
  opacity: 1;
}

/* SECTION BASICS */
section{ padding: 64px 0;  scroll-margin-top: 64px; }
.section-title{ font-weight:500; font-size: 2.2rem }
.section-sub{ color:var(--muted) }
.bg-soft{ background:var(--section) }
.bg-dark{background:var(--bg-dark) }
.bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark p{color:#FFF}

/* IMAGE ROUNDED */
.rounded-xl{ border-radius: var(--radius); }
.img-frame{ border-radius: var(--radius); overflow:hidden; border:1px solid #e8eef6; box-shadow:0 12px 30px rgba(17,23,41,.08) }

/* CARDS / ICONS */
.icon-chip{ width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#FFF; font-size:1.35rem }
.service-card{ border-radius: var(--radius); padding: 24px; transition: .25s ease; height:100% }
.service-card:hover{ transform: translateY(-4px); box-shadow:0 10px 30px rgba(17,23,41,.08);background: rgba(255, 255, 255, 0.1); }
.service-card i{line-height:0}
.service-card  h3{font-size: 1.25rem;}
.service-card p{font-size: 1rem;}

/* QUOTE STRIP */
.quote{font-size: 1.6rem; font-weight: 600}
.quote strong{ color:#fff;background:  var(--brand);
display: inline;
padding: 1px 5px;}

/* CLIENT LOGOS */
.logo-grid img{ filter: grayscale(1); opacity:.9; transition:.2s }
.logo-grid img:hover{ filter:none; opacity:1; transform: translateY(-4px); }

/* FOOTER */
footer{ border-top:1px solid #e8eef6; background:#f4f5f6; padding: 28px 0 }
footer i{ font-size: 1.5rem }


/* REVEAL on scroll */
.reveal{ opacity:0; transform: translateY(50px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none }
.reveal-left{ transform: translateX(-24px); }
.reveal-right{ transform: translateX(24px); }
.is-visible.reveal-left, .is-visible.reveal-right{ transform:none }

@media (prefers-reduced-motion: reduce){
.navbar, .brand-logo, .reveal, .reveal-left, .reveal-right,.hero, .hero .content, .hero-bg { transition:none; transform:none; opacity:1; }
}

/* SMALL UTILITIES */
.divider{ width:56px; height:4px; border-radius:999px; background:var(--brand) }

@media (max-width:767px) {
.section-title {font-size:1.8rem}
.service-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.form-control-lg {font-size:1.1rem}
.tilt-card { transform: none !important; }
.nav-item {text-align: center}
}

@media (max-width:479px) {
.hero{min-height: 55vh}
}