/* ── ANIMATIONS ─────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE HERO ──────────────────────────────── */
.page-hero{background:var(--negro);color:var(--blanco);padding:170px 7% 100px;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 80% 40%,rgba(37,141,214,.07) 0%,transparent 70%);pointer-events:none;}
.ph-label{font-size:.57rem;letter-spacing:5px;color:var(--azul);font-weight:700;text-transform:uppercase;margin-bottom:18px;display:block;opacity:0;animation:fadeUp .7s ease .15s forwards;position:relative;z-index:1;}
.page-hero h1{font-family:var(--font-title);font-size:clamp(3rem,8vw,9rem);font-weight:800;line-height:.88;letter-spacing:-3px;opacity:0;animation:fadeUp .9s var(--ease) .3s forwards;position:relative;z-index:1;}
.page-hero h1 em{font-style:normal;color:var(--azul);}
.page-hero p{max-width:600px;font-size:.9rem;font-weight:300;line-height:2;opacity:0;animation:fadeUp .8s ease .5s forwards;color:rgba(255,255,255,.5);margin-top:24px;position:relative;z-index:1;}

/* ── SERVICE NAV — FIX OVERLAP + BIGGER FONT ── */
.svc-nav{
  background:var(--negro);
  padding:0 7%;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  position:sticky;
  top:78px;
  z-index:1000;
}
.svc-nav::-webkit-scrollbar{display:none;}
.svc-nav a{
  padding:20px 22px;
  font-size:.72rem;
  letter-spacing:2.5px;
  font-weight:700;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:.3s;
  flex-shrink:0;
}
.svc-nav a:hover{color:var(--azul);border-bottom-color:var(--azul);}
.svc-nav a.active{color:var(--blanco);border-bottom-color:var(--azul);}

/* ── SERVICE GRID ───────────────────────────── */
.svc-grid{
  display:flex;
  flex-direction:column;
  gap:3px;
  background:#d0d0d0;
}

/* ── SERVICE CARD — REDESIGNED ──────────────── */
.svc-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--blanco);
  overflow:hidden;
  transition:.5s var(--ease);
  min-height:520px;
}
.svc-card:nth-child(even){
  grid-template-columns:1fr 1fr;
}
.svc-card:nth-child(even) .svc-img-wrap{order:2;}
.svc-card:nth-child(even) .svc-body{order:1;}

/* ── IMAGE AREA — IMPACTFUL ─────────────────── */
.svc-img-wrap{
  position:relative;
  overflow:hidden;
  min-height:520px;
  background:var(--negro);
}

/* Overlay gradiente que aparece en hover */
.svc-img-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(37,141,214,.5) 0%,
    rgba(8,8,8,.15) 100%
  );
  opacity:0;
  transition:.6s var(--ease);
  z-index:1;
}
.svc-card:hover .svc-img-wrap::after{
  opacity:1;
}

/* Imagen principal */
.svc-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(.15) brightness(.9) contrast(1.05);
  transform:scale(1.06);
  transition:.8s var(--ease);
  will-change:transform,filter;
}
.svc-card:hover .svc-img{
  transform:scale(1.13);
  filter:grayscale(0) brightness(1) contrast(1);
}

/* Número flotante en la esquina de la foto */
.svc-num-overlay{
  position:absolute;
  bottom:24px;
  left:28px;
  font-family:var(--font-title);
  font-size:7rem;
  font-weight:800;
  color:rgba(255,255,255,.1);
  line-height:1;
  z-index:2;
  pointer-events:none;
  transition:.5s var(--ease);
  user-select:none;
}
.svc-card:hover .svc-num-overlay{
  color:rgba(255,255,255,.2);
  transform:scale(1.04) translateY(-4px);
}

/* ── CARD BODY ──────────────────────────────── */
.svc-body{
  padding:60px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.svc-body::before{
  content:'';
  position:absolute;
  left:0;top:12%;bottom:12%;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(37,141,214,.3),transparent);
  transition:.5s var(--ease);
}
.svc-card:hover .svc-body::before{
  background:linear-gradient(to bottom,transparent,rgba(37,141,214,.7),transparent);
}

.svc-num{
  font-size:.6rem;
  letter-spacing:4px;
  color:var(--azul);
  font-weight:700;
  display:block;
  margin-bottom:20px;
}
.svc-title{
  font-family:var(--font-title);
  font-size:clamp(1.9rem,2.8vw,3rem);
  font-weight:800;
  line-height:1.05;
  margin-bottom:22px;
  letter-spacing:-.5px;
}
.svc-desc{
  font-size:.9rem;
  font-weight:300;
  line-height:2;
  opacity:.6;
  margin-bottom:32px;
}
.svc-bullets{list-style:none;margin-bottom:36px;flex:1;}
.svc-bullets li{
  font-size:.84rem;
  font-weight:300;
  line-height:1.7;
  padding:7px 0;
  border-bottom:1px solid var(--borde);
  display:flex;
  align-items:center;
  gap:12px;
}
.svc-bullets li::before{
  content:'';
  width:5px;
  height:5px;
  background:var(--azul);
  border-radius:50%;
  flex-shrink:0;
}
.svc-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding-top:28px;
  border-top:1px solid var(--borde);
}
.svc-socios{font-size:.78rem;font-weight:300;opacity:.6;}
.svc-socios-lbl{
  display:block;
  font-size:.54rem;
  letter-spacing:3px;
  color:var(--azul);
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:5px;
}
.svc-cta{
  padding:14px 28px;
  background:var(--azul);
  color:#fff;
  text-decoration:none;
  font-size:.6rem;
  letter-spacing:4px;
  font-weight:700;
  text-transform:uppercase;
  transition:.3s;
  white-space:nowrap;
}
.svc-cta:hover{background:var(--negro);}

/* ── TESTIMONIALS ───────────────────────────── */
.testi-strip{background:var(--gris);padding:80px 7%;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--borde);margin-top:40px;}
.testi{background:var(--blanco);padding:44px 38px;transition:.4s;position:relative;}
.testi::before{content:'\201C';font-family:var(--font-title);font-size:4rem;color:var(--azul);opacity:.08;position:absolute;top:12px;left:28px;line-height:1;}
.testi:hover{background:var(--negro);color:var(--blanco);}
.testi:hover cite{color:var(--azul);}
.testi p{font-size:.85rem;line-height:2;font-weight:300;font-style:italic;position:relative;z-index:1;}
.testi cite{display:block;margin-top:18px;font-size:.54rem;letter-spacing:4px;font-weight:700;color:var(--azul);font-style:normal;text-transform:uppercase;}

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:960px){
  .svc-nav{top:66px;}
  .svc-nav a{font-size:.62rem;padding:16px 18px;}
  .svc-card,.svc-card:nth-child(even){grid-template-columns:1fr;}
  .svc-card:nth-child(even) .svc-img-wrap{order:0;}
  .svc-card:nth-child(even) .svc-body{order:0;}
  .svc-img-wrap{min-height:300px;}
  .svc-body{padding:44px 32px;}
  .testi-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:540px){
  .svc-nav a{font-size:.58rem;padding:14px 14px;}
  .testi-grid{grid-template-columns:1fr;}
}
