/* ============================================================
   SERVICIO v3 — cinco identidades visuales
   Cada familia de servicios tiene su color, su hero y una
   seccion estructural propia. Todo sale de los tokens de
   styles.css: ninguna familia inventa color de marca.

   fam-ads     Captacion pagada   naranja / ambar   subasta
   fam-org     Organico           cian / verde      linea de tiempo
   fam-conv    Conversion y datos violeta / magenta embudo con fugas
   fam-marca   Marca y estrategia amarillo / blanco editorial
   fam-sector  Por sector         rosa / violeta    recorrido
   ============================================================ */

/* ---------- TOKENS POR FAMILIA ---------- */
.fam-ads{--f1:#F54900; --f2:#FAFA00; --f-soft:rgba(245,73,0,.16); --f-ink:#FFD9C2}
.fam-org{--f1:#00E3FF; --f2:#008500; --f-soft:rgba(0,227,255,.14); --f-ink:#BFF4FF}
.fam-conv{--f1:#9B30FF; --f2:#E0348E; --f-soft:rgba(155,48,255,.16); --f-ink:#E5D2FF}
.fam-marca{--f1:#FAFA00; --f2:#FFFFFF; --f-soft:rgba(250,250,0,.12); --f-ink:#FFFCC7}
.fam-sector{--f1:#FCA8FF; --f2:#713DFF; --f-soft:rgba(252,168,255,.14); --f-ink:#FFE3FF}

/* ============================================================
   HERO — una variante por familia
   ============================================================ */
.sv-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(140px,17vw,190px) 0 clamp(64px,9vw,104px);
}
.sv-hero-inner{max-width:1240px; margin-inline:auto; padding-inline:24px; position:relative; z-index:2}
.sv-crumbs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:28px;
}
.sv-crumbs a{color:rgba(255,255,255,.82); text-decoration:none}
.sv-crumbs a:hover{color:#fff}
.sv-h1{
  font-family:var(--font-display); font-weight:800;
  letter-spacing:-.025em; color:#fff; margin:0 0 30px;
}
.sv-hero-lead{font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.65; color:rgba(255,255,255,.9)}
.sv-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}
.sv-scroll{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  color:#fff; text-decoration:none; transition:background var(--t-fast);
}
.sv-scroll:hover{background:rgba(255,255,255,.26)}

/* ADS: degradado calido a plomo, centrado, con anillos de subasta */
.fam-ads .sv-hero{text-align:center}
.fam-ads .sv-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(125% 85% at 50% 0%, #F54900 0%, #A62F00 30%, #3A1200 60%, var(--bg) 86%);
}
.fam-ads .sv-h1{font-size:clamp(2.3rem,6.2vw,4.4rem); line-height:1.03}
.fam-ads .sv-hero-lead{max-width:34ch; margin:0 auto 36px}
.fam-ads .sv-hero-cta{justify-content:center}
.fam-ads .sv-scroll{margin:0 auto}

/* ORG: fondo profundo con malla, alineado a la izquierda, aire */
.fam-org .sv-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(160deg,#04252B 0%,#06171B 45%,var(--bg) 100%);
}
.fam-org .sv-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(0,227,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,227,255,.09) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 20%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 30% 20%,#000,transparent 75%);
}
.fam-org .sv-h1{font-size:clamp(2.2rem,5.6vw,4rem); line-height:1.06; max-width:17ch}
.fam-org .sv-hero-lead{max-width:52ch; margin:0 0 34px}

/* CONV: diagonal violeta, hero en dos columnas */
.fam-conv .sv-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(115deg,#2E1A6B 0%,#1A0E3D 42%,var(--bg) 78%);
}
.fam-conv .sv-hero::after{
  content:""; position:absolute; z-index:-1; right:-8%; top:-18%;
  width:min(720px,68vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(224,52,142,.28) 0%,transparent 66%);
}
.fam-conv .sv-h1{font-size:clamp(2.15rem,5.4vw,3.9rem); line-height:1.06; max-width:16ch}
.fam-conv .sv-hero-lead{max-width:50ch; margin:0 0 34px}

/* MARCA: editorial, casi sin color, tipografia enorme */
.fam-marca .sv-hero{padding-top:clamp(150px,18vw,210px); border-bottom:1px solid rgba(255,255,255,.1)}
.fam-marca .sv-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg,#191908 0%,#111105 38%,var(--bg) 100%);
}
.fam-marca .sv-h1{
  font-size:clamp(2.5rem,7vw,5.2rem); line-height:.98; max-width:14ch;
  letter-spacing:-.035em;
}
.fam-marca .sv-hero-lead{
  max-width:46ch; margin:0 0 36px; font-size:clamp(1.02rem,1.8vw,1.24rem);
  border-left:2px solid var(--yellow); padding-left:20px;
}

/* SECTOR: rosa a violeta, mas calido y humano */
.fam-sector .sv-hero{text-align:center}
.fam-sector .sv-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(120% 80% at 50% 0%, #6D2A72 0%, #3A1740 34%, #1A0D1D 64%, var(--bg) 88%);
}
.fam-sector .sv-h1{font-size:clamp(2.2rem,5.8vw,4.1rem); line-height:1.05}
.fam-sector .sv-hero-lead{max-width:36ch; margin:0 auto 36px}
.fam-sector .sv-hero-cta{justify-content:center}
.fam-sector .sv-scroll{margin:0 auto}

/* ============================================================
   BLOQUES ALTERNOS
   ============================================================ */
.sv-split{padding:clamp(52px,7vw,96px) 0}
.sv-split-card{
  max-width:1300px; margin-inline:auto;
  background:var(--bg-card); border:var(--border-normal);
  border-radius:var(--radius-lg); padding:clamp(28px,4.2vw,60px);
  display:grid; gap:clamp(26px,4vw,60px); grid-template-columns:1fr 1fr; align-items:center;
}
.sv-split-card--rev .sv-split-visual{order:2}
.sv-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--f-ink,var(--text-muted)); margin:0 0 18px;
}
.sv-eyebrow::before{
  content:""; width:15px; height:15px; border-radius:50%;
  border:1.5px solid currentColor; flex:0 0 auto;
}
.sv-h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.1;
  letter-spacing:-.018em; color:#fff; margin:0 0 22px;
}
.sv-lead{font-size:16.5px; line-height:1.6; color:#fff; font-weight:600; margin:0 0 18px}
.sv-split-body p{font-size:15.5px; line-height:1.72; color:var(--text-muted); margin:0 0 16px}
.sv-split-body p strong{color:#fff; font-weight:600}

/* ORG: sin tarjeta, linea de tiempo a la izquierda */
.fam-org .sv-split-card{
  background:none; border:0; padding:clamp(22px,3vw,40px) 0;
  border-left:1px solid rgba(255,255,255,.12); padding-left:clamp(24px,4vw,56px);
  position:relative; border-radius:0;
}
.fam-org .sv-split-card::before{
  content:""; position:absolute; left:-6px; top:clamp(28px,4vw,48px);
  width:11px; height:11px; border-radius:50%;
  background:var(--f1); box-shadow:0 0 0 5px rgba(0,227,255,.14);
}
/* MARCA: fondo casi plano, foco en el texto */
.fam-marca .sv-split-card{
  background:linear-gradient(180deg,rgba(250,250,0,.035),transparent);
  border-color:rgba(250,250,0,.16);
}

/* ---------- VISUALES ---------- */
.sv-rings{aspect-ratio:1; display:grid; place-items:center; position:relative}
.sv-rings span{position:absolute; border-radius:50%; border:2px solid var(--f1); opacity:.5}
.sv-rings span:nth-child(1){width:92%; height:92%; opacity:.2}
.sv-rings span:nth-child(2){width:76%; height:76%; opacity:.32}
.sv-rings span:nth-child(3){width:60%; height:60%; opacity:.58}
.sv-rings-core{
  width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--f-soft) 0%, transparent 70%);
  box-shadow:0 0 90px var(--f-soft);
}
.sv-stairs{display:flex; align-items:flex-end; gap:10px; height:min(320px,42vw); padding:10px 0}
.sv-stairs i{flex:1; border-radius:6px; display:block;
  background:linear-gradient(180deg,var(--f2) 0%,var(--f1) 100%)}
.sv-bars{display:grid; gap:12px; align-content:center; min-height:220px}
.sv-bars i{height:20px; border-radius:5px; display:block;
  background:linear-gradient(90deg,var(--f2) 0%,var(--f1) 100%)}

/* ---------- CASO ---------- */
.sv-case-card{
  background:var(--bg-section); border:1px solid var(--f-soft);
  border-radius:var(--radius); padding:clamp(26px,3.4vw,38px);
}
.sv-case-client{font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; margin:0 0 14px}
.sv-case-note{font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0 0 28px}
.sv-metrics{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.sv-metric-num{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,4.4vw,2.9rem); line-height:1; margin-bottom:10px;
  background:linear-gradient(120deg,var(--f2),var(--f1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sv-metric-lbl{font-size:13.5px; line-height:1.5; color:var(--text)}
.sv-metric-sub{display:block; margin-top:6px; font-family:var(--font-mono);
  font-size:11px; color:var(--text-dim); line-height:1.5}

/* ============================================================
   SECCION ESTRUCTURAL PROPIA DE CADA FAMILIA
   ============================================================ */
.sv-signature{padding:clamp(56px,8vw,104px) 0; position:relative}
.sv-sig-head{max-width:640px; margin:0 0 clamp(34px,5vw,54px)}
.sv-sig-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,3.6vw,2.5rem); line-height:1.1; color:#fff; margin:0 0 14px;
}
.sv-sig-sub{font-size:15.5px; line-height:1.65; color:var(--text-muted); margin:0}

/* ADS: la subasta, tres cartas escalonadas */
.sv-auction{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:end}
.sv-auction-card{
  background:var(--bg-card); border:var(--border-subtle);
  border-radius:var(--radius); padding:26px 24px;
}
.sv-auction-card:nth-child(2){transform:translateY(-14px); border-color:var(--f-soft)}
.sv-auction-card:nth-child(3){transform:translateY(-28px); border-color:var(--f1)}
.sv-auction-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--f-ink); margin-bottom:12px}
.sv-auction-t{font-family:var(--font-body); font-weight:600; font-size:17px; color:#fff; margin:0 0 8px}
.sv-auction-d{font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0}

/* ORG: linea de tiempo horizontal */
.sv-timeline{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); position:relative}
.sv-timeline::before{
  content:""; position:absolute; left:0; right:0; top:13px; height:1px;
  background:linear-gradient(90deg,var(--f1),rgba(255,255,255,.08));
}
.sv-tl{padding:0 18px 0 0; position:relative}
.sv-tl::before{
  content:""; position:absolute; left:0; top:8px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2px solid var(--f1);
}
.sv-tl-when{
  display:block; margin:34px 0 8px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--f-ink);
}
.sv-tl-t{font-family:var(--font-body); font-weight:600; font-size:16px; color:#fff; margin:0 0 7px}
.sv-tl-d{font-size:14px; line-height:1.6; color:var(--text-muted); margin:0}

/* MARCA: principios numerados, editorial */
.sv-principles{display:grid; gap:0; max-width:900px}
.sv-pr{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px);
  padding:clamp(24px,3.4vw,36px) 0; border-top:1px solid rgba(255,255,255,.1);
}
.sv-pr:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sv-pr-n{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1; color:var(--f1); opacity:.85;
}
.sv-pr-t{font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,2.1vw,1.35rem); color:#fff; margin:0 0 10px}
.sv-pr-d{font-size:15.5px; line-height:1.7; color:var(--text-muted); margin:0}

/* SECTOR: recorrido del cliente */
.sv-journey{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sv-jn{
  background:var(--bg-card); border:var(--border-subtle);
  border-radius:var(--radius); padding:26px 24px; position:relative; overflow:hidden;
}
.sv-jn::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--f1),var(--f2));
}
.sv-jn-step{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--f-ink); margin-bottom:12px}
.sv-jn-q{font-family:var(--font-body); font-weight:600; font-size:16.5px; line-height:1.35;
  color:#fff; margin:0 0 10px}
.sv-jn-a{font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0}

/* ============================================================
   LOGOS, GRID, FAQ, BLOGS, CTA
   ============================================================ */
.sv-clients{padding:clamp(52px,7vw,88px) 0; border-block:var(--border-subtle); overflow:hidden}
.sv-clients-label{text-align:center; color:var(--text); font-size:clamp(15px,1.6vw,17px);
  font-weight:500; margin:0 0 clamp(32px,4.2vw,48px)}
.sv-marquee{position:relative; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sv-marquee-track{display:flex; align-items:center; gap:clamp(48px,6vw,88px);
  width:max-content; animation:sv-scroll 46s linear infinite}
.sv-marquee:hover .sv-marquee-track{animation-play-state:paused}
.sv-logo{flex:0 0 auto; width:clamp(120px,13vw,170px); height:clamp(56px,6vw,78px);
  display:flex; align-items:center; justify-content:center}
.sv-logo img{max-width:100%; max-height:100%; width:auto; height:auto;
  opacity:.8; filter:grayscale(1) brightness(2.1);
  transition:opacity var(--t-fast), filter var(--t-fast)}
.sv-logo:hover img{opacity:1; filter:grayscale(0) brightness(1.1)}
@keyframes sv-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sv-marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%}
}

.sv-grid-sec{padding:clamp(52px,7vw,96px) 0; background:var(--bg-section)}
.sv-grid-title{font-family:var(--font-display); font-weight:800; text-align:center;
  font-size:clamp(1.55rem,3.8vw,2.7rem); line-height:1.1; color:#fff;
  margin:0 auto clamp(38px,5vw,58px); max-width:20ch}
.sv-grid{display:grid; gap:16px; max-width:1300px; margin-inline:auto;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sv-tile{
  background:var(--bg-card); border:var(--border-subtle);
  border-radius:var(--radius); padding:24px 22px; min-height:124px;
  display:flex; align-items:flex-start; position:relative; overflow:hidden;
  font-family:var(--font-body); font-weight:600; font-size:16.5px;
  line-height:1.32; color:#fff;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.sv-tile::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--f1),transparent); opacity:0;
  transition:opacity var(--t-fast);
}
.sv-tile:hover{background:var(--bg-card-hover); border-color:var(--f-soft); transform:translateY(-2px)}
.sv-tile:hover::before{opacity:1}

.sv-blogs{position:relative; padding:clamp(56px,8vw,104px) 0; overflow:hidden}
.sv-blogs::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--f1) 55%,#000) 0%,
                                    color-mix(in srgb,var(--f1) 26%,#000) 40%,
                                    var(--bg) 100%)}
.sv-blogs-title{font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.55rem,3.8vw,2.7rem); line-height:1.12; color:#fff;
  margin:0 0 clamp(32px,4.6vw,50px); max-width:24ch}
.sv-posts{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.sv-post{background:var(--bg-card); border:var(--border-subtle); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:transform var(--t-fast)}
.sv-post:hover{transform:translateY(-3px)}
.sv-post-cover{height:140px}
.sv-post-cover--a{background:linear-gradient(115deg,var(--f1),var(--f2))}
.sv-post-cover--b{background:linear-gradient(115deg,var(--f2),var(--f1) 70%,#000)}
.sv-post-cover--c{background:linear-gradient(160deg,var(--f1),#000 85%)}
.sv-post-body{padding:24px; display:flex; flex-direction:column; gap:12px; flex:1}
.sv-post-h{font-family:var(--font-body); font-weight:600; font-size:17px; line-height:1.32; color:#fff; margin:0}
.sv-post-x{font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0; flex:1}
.sv-post-m{font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim)}

.sv-final{padding:clamp(52px,7vw,96px) 0; background:var(--bg-section); border-top:var(--border-subtle)}
.sv-final-in{max-width:1300px; margin-inline:auto; display:flex; gap:32px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}
.sv-final-title{font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.85rem,4.4vw,3.1rem); line-height:1.05; color:#fff; margin:0; max-width:13ch}
.sv-final-title em{font-style:normal;
  background:linear-gradient(90deg,var(--f2),var(--f1));
  -webkit-background-clip:text; background-clip:text; color:transparent}

@media (max-width:900px){
  .sv-split-card{grid-template-columns:1fr}
  .sv-split-card--rev .sv-split-visual{order:0}
  .sv-rings{max-width:320px; margin-inline:auto}
  .sv-auction-card:nth-child(n){transform:none}
  .sv-timeline::before{display:none}
  .sv-tl-when{margin-top:0}
}
@media (max-width:640px){
  .sv-metrics{grid-template-columns:1fr; gap:20px}
  .sv-hero-cta .btn{width:100%; text-align:center}
  .sv-pr{grid-template-columns:1fr; gap:10px}
}



/* ---------- FAQ: mismo diseno que la home, color por familia ----------
   El marcado y el tamano salen de styles.css (.faq, .faq-title,
   .faq-item...). Aqui solo se tine el resplandor con el color de la
   familia, para que la seccion no rompa la identidad de la pagina. */
.fam-ads .faq-bg-glow{
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(245,73,0,.9) 0%, rgba(245,73,0,.6) 25%, rgba(245,73,0,.28) 55%, rgba(245,73,0,0) 100%);
}
.fam-org .faq-bg-glow{
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(0,190,215,.85) 0%, rgba(0,133,120,.6) 25%, rgba(0,133,90,.28) 55%, rgba(0,133,0,0) 100%);
}
.fam-conv .faq-bg-glow{
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(155,48,255,.85) 0%, rgba(224,52,142,.5) 25%, rgba(155,48,255,.24) 55%, rgba(155,48,255,0) 100%);
}
.fam-marca .faq-bg-glow{
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(250,250,0,.5) 0%, rgba(200,180,0,.32) 25%, rgba(150,140,0,.16) 55%, rgba(250,250,0,0) 100%);
}
.fam-sector .faq-bg-glow{
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(252,168,255,.6) 0%, rgba(113,61,255,.5) 25%, rgba(113,61,255,.24) 55%, rgba(113,61,255,0) 100%);
}

.sv-case-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--f-ink); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color var(--t-fast);
}
.sv-case-link:hover{border-bottom-color:currentColor}