/* ===== Variables ===== */
:root{
  --page-bg:#181515;
  --text:#fff;
  --fuchsia:#ff2bbf;
  --fuchsia-soft:rgba(255,43,191,.22);
  --fuchsia-border:rgba(255,43,191,.42);

  --box-radius:1rem;
  --box-padding:1.25rem 1.35rem;

  --grid-gap:2.2rem;
  --grid-padding:2.4rem;
  --grid-max:88%;

  --glass-bg:rgba(18,18,18,0.68);
  --glass-border:rgba(255,255,255,0.22);
  --glass-shadow:0 16px 36px rgba(0,0,0,0.42);
  --card-blur:1.4px;

  /* ===== Bloque reveal ===== */
  --reveal-height: 180vh;                         /* tramo con efecto */
  --strip-height: clamp(480px, 65vh, 1000px);     /* franja más alta */
  --strip-gap-top: calc((100vh - var(--strip-height))/2); /* centrado fallback */
  --reveal-bg: url('/assets/images/services-hero@2x.jpg');
  --feature-max-w: min(1100px, 92%);

  /* ===== Dorado Velvet ===== */
  --gold:#d7b46a;
  --gold-strong:#f5d79a;
  --gold-soft:rgba(245,215,154,.18);
  --gold-glow:0 0 28px rgba(245,215,154,.22);
}

/* ===== Utilidad full-bleed ===== */
.full-bleed{ width:100vw; margin-left:50%; transform:translateX(-50%); }

/* ===== Base ===== */
html{ box-sizing:border-box } *,*::before,*::after{ box-sizing:inherit }
body{ background:var(--page-bg); color:var(--text); margin-top:9.6rem; margin-bottom:1rem; font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.title{ color:var(--text); }
section.container.mt-5{ max-width:100% !important; width:100% !important; padding-inline:0 !important; }

/* Velvet Cap / Intro */
.velvet-cap{ position:relative;width:100%;height:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);margin:1.2rem 0 .8rem;overflow:hidden; }
.velvet-cap .sparkle{ position:absolute;top:-6px;left:-10%;width:140px;height:16px;border-radius:999px;background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0));filter:blur(3px);animation:cap-spark 6.5s linear infinite; }
@keyframes cap-spark{ 0%{transform:translateX(0);opacity:.35}50%{opacity:.55}100%{transform:translateX(120vw);opacity:.35} }
.section-intro{ display:flex;justify-content:center;position:relative;z-index:2 }
.div-intro{ width:min(1200px,92%); text-align:center }
.div-intro h1{ font-size:clamp(3rem,5vw,5.2rem); line-height:1.02; margin:0 0 .8rem 0; font-family:'Manrope',sans-serif }
.div-intro .intro-desc{ font-size:clamp(1.06rem,1.3vw,1.22rem); margin:0 0 1.35rem 0; line-height:1.75; opacity:.95 }
.div-intro .slogan{ font-weight:700; font-family:'Fraunces',serif; font-size:clamp(2.2rem,3.8vw,4.2rem); line-height:1.05; letter-spacing:.2px; color:var(--fuchsia); text-shadow:0 0 10px rgba(255,43,191,.18); margin:.25rem 0 0 0 }
.lux-divider{ position:relative;width:min(780px,88%);margin:1.5rem auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent) }
.lux-divider .diamond{ position:absolute;left:50%;top:50%;translate:-50% -50%;width:10px;height:10px;rotate:45deg;border:1px solid var(--fuchsia-border);background:radial-gradient(circle,var(--fuchsia-soft) 0%,rgba(0,0,0,0) 60%);box-shadow:0 0 12px var(--fuchsia-soft);border-radius:2px }

/* ===== Grids servicios ===== */
.services-grid{
  position:relative;z-index:5;margin:2.2rem auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--grid-gap);width:100%;max-width:var(--grid-max);padding:var(--grid-padding);border-radius:.9rem;box-shadow:0 0 .4rem rgba(0,0,0,.5)
}
.services-grid--one{ background:url('/assets/images/pibaservices2.png') center/cover no-repeat; }
.services-grid--two{ background:url('/assets/images/pibaextrahome10.png') center/cover no-repeat; }
.svc-card{
  position:relative;z-index:6;min-height:170px;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--box-padding);
  border-radius:var(--box-radius);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));transition:border-color .24s,transform .24s,box-shadow .28s
}
.svc-card:hover{ transform:translateY(-2px);border-color:var(--fuchsia-border);box-shadow:0 12px 34px rgba(0,0,0,.46),0 0 28px rgba(255,43,191,.12) }
.svc-card .title{ font-family:'Fraunces',serif;font-size:clamp(1.1rem,1.25vw,1.35rem);font-weight:700;margin:0 0 .7rem 0 }
.svc-card .description{ font-family:'Manrope',sans-serif;font-size:clamp(.98rem,1.05vw,1.05rem);line-height:1.68;margin:0 }

/* ===== REVEAL WINDOW (foto fija + franja centrada) ===== */
.reveal-window{
  position:relative;
  height:var(--reveal-height);
  background-image: var(--reveal-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: clip;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.window-sticky{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.shade{ background: var(--page-bg); flex:0 0 auto; will-change: height; }
.shade--top{ height: var(--strip-gap-top); transition: height .04s linear; }
.strip{ flex: 0 0 auto; height: var(--strip-height); display:flex; align-items:center; justify-content:center; background: transparent; }
.shade--bottom{ flex: 1 1 auto; }

/* Contenido franja */
.strip-content{
  width: var(--feature-max-w);
  margin: 0 auto;
  display: grid; place-items: center; text-align: center;
  background: rgba(15,15,15,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .9rem;
  padding: clamp(1rem, 2.6vw, 1.6rem);
  backdrop-filter: blur(.6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.feature-title{
  font-family:'Fraunces',serif; font-weight:700; letter-spacing:.3px;
  font-size: clamp(1.7rem, 3.1vw, 2.4rem); line-height:1.14;
  margin: 0 0 .95rem; color: var(--text);
  text-shadow: 0 0 14px rgba(255,43,191,.18);
}
.velvet-lines{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem 1.4rem; max-width:980px; width:100%; }
.velvet-lines .line{ position:relative; padding-left:1.6rem; text-align:left; }
.velvet-lines .node{
  position:absolute; left:0; top:.15rem; width:1rem; height:1rem; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,.35) 60%, transparent 61%),
    linear-gradient(135deg, var(--fuchsia), rgba(255,43,191,.35));
  box-shadow:0 0 12px rgba(255,43,191,.35); outline:1px solid rgba(255,255,255,.25);
}
.velvet-lines .line::before{
  content:""; position:absolute; left:.46rem; top:1.3rem; bottom:-.6rem; width:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
}
.line-inner{ background:rgba(15,15,15,.55); border:1px solid rgba(255,255,255,.14); border-radius:.9rem; padding:1rem .95rem; transition:.25s; }
.line-inner i{ margin-right:.55rem; opacity:.9 }
.line-inner h4{ margin:.1rem 0 .3rem; font-family:'Fraunces',serif; font-size:1.08rem; font-weight:700; }
.line-inner p{ margin:0; font-family:'Manrope',sans-serif; font-weight:600; line-height:1.62; opacity:.95 }
.velvet-lines .line:hover .line-inner{ transform:translateY(-2px); border-color:var(--fuchsia-border); box-shadow:0 12px 34px rgba(0,0,0,.46), 0 0 26px rgba(255,43,191,.12); }

/* ===== MÉTRICAS DORADAS ===== */
.metrics{
  position:relative;
  width:100%;
  background: radial-gradient(1200px 380px at 50% -20%, rgba(245,215,154,.08), rgba(0,0,0,0)),
              var(--page-bg);
  padding: clamp(2.2rem, 6vw, 4rem) 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.metrics-inner{
  width: min(1100px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr; /* 3 cards con separadores */
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.metric-card{
  text-align:center;
  padding: clamp(.6rem, 1.8vw, 1rem);
  border-radius: .9rem;
  background: rgba(15,15,15,.42);
  border: 1px solid rgba(245,215,154,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), var(--gold-glow);
  backdrop-filter: blur(.6px);
}
.metric-number{
  font-family:'Fraunces',serif;
  font-weight:700;
  line-height:1;
  font-size: clamp(2.4rem, 6.2vw, 4.2rem);
  letter-spacing: .5px;
  background: linear-gradient(180deg, var(--gold-strong), var(--gold) 60%, #b49655 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px var(--gold-soft);
}
.metric-label{
  margin-top: .6rem;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  letter-spacing: .4px;
  font-size: clamp(.86rem, 1.2vw, 1rem);
  color: var(--gold-strong);
  opacity: .96;
}
.metric-sep{
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, rgba(245,215,154,.0), rgba(245,215,154,.45), rgba(245,215,154,.0));
  opacity: .8;
}

/* ===== Responsive ===== */
@media (min-width:1201px){
  .services-grid{ display:grid !important; max-width:82% !important; }
  .services-col{ display:none !important; }
}

@media (max-width:1200px){
  .services-grid{ display:none !important; }

  .services-col{ position:relative; z-index:5; display:flex !important; justify-content:center !important; width:100%; }
  .svc-card--mobile{ width:92%; margin:0 auto 1.8rem; padding:1.05rem 1.1rem; backdrop-filter:blur(var(--card-blur)); -webkit-backdrop-filter:blur(var(--card-blur)); }
  .svc-card--mobile .title{ font-family:'Fraunces',serif; font-size:1.22rem; margin:0 0 .6rem; }
  .svc-card--mobile .description{ font-family:'Manrope',sans-serif; font-size:1rem; line-height:1.72; font-weight:600; }

  /* móvil: reveal sin efecto, y métricas a 1 columna */
  .reveal-window{ height:auto; background-attachment: scroll; background-position:center; }
  .window-sticky{ position:relative; height:auto; }
  .shade{ display:none; }
  .strip{ height:auto; padding:1.2rem 0; }
  .strip-content{ width:92%; }
  .velvet-lines{ grid-template-columns:1fr; gap:.9rem; }

  .metrics-inner{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .metric-sep{ display:none; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .line-inner,.svc-card{ transition:none !important; }
}

/* Anti-ocultación */
.services-grid,.services-col,.svc-card{ visibility:visible !important; opacity:1 !important; }
.svc-card *, .services-col *{ visibility:visible !important; opacity:1 !important; }