/* ═══════════════════════════════════════════════
   SPONSOREALO — css/servicios.css
   Estilos exclusivos de la página /servicios
   Hereda: fonts/fonts.css + css/styles.css
   (tokens, nav, footer, carousel, chips, btns)
   Versión: 2026
═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   HERO — fondo de blobs con grid, sin foto
   Refleja el mismo hero del index pero con
   variación de posición en blobs
───────────────────────────────────────── */
#hero-serv {
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10rem 5vw 5rem;
  position: relative;
  overflow: hidden;
}

/* Blobs posicionados distintos al index */
#hero-serv .h-blob-1 {
  width: 680px; height: 680px;
  background: var(--pink); opacity: .08;
  top: -200px; right: -100px;
}
#hero-serv .h-blob-2 {
  width: 500px; height: 500px;
  background: var(--cyan); opacity: .10;
  bottom: -100px; left: -60px;
}

/* Breadcrumb */
.serv-breadcrumb {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--fh); font-size: .6rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 2rem;
}
.serv-breadcrumb a         { color: rgba(255,255,255,.35); transition: color .2s; }
.serv-breadcrumb a:hover   { color: var(--cyan); }
.serv-breadcrumb .bc-sep   { width:14px; height:1px; background:rgba(255,255,255,.2); }
.serv-breadcrumb .bc-cur   {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Eyebrow */
.serv-eyebrow {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fh); font-size: .63rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1.6rem;
}
.serv-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--grad); flex-shrink: 0;
}

/* H1 */
.serv-h1 {
  position: relative; z-index: 2;
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(3rem, 7.5vw, 9rem);
  line-height: .93; letter-spacing: -.036em;
  max-width: 900px; margin-bottom: 2rem;
}
.serv-h1 .line-solid   { color: var(--white); display: block; }
.serv-h1 .line-grad    {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  display: block;
}
.serv-h1 .line-outline {
  -webkit-text-stroke: 2px rgba(255,255,255,.16);
  color: transparent; display: block;
}

.serv-sub {
  position: relative; z-index: 2;
  font-size: 1.05rem; color: var(--dim);
  line-height: 1.8; max-width: 560px; margin-bottom: 3rem;
}

.serv-hero-ctas {
  position: relative; z-index: 2;
  display: flex; gap: 1rem; flex-wrap: wrap;
}


/* ─────────────────────────────────────────
   INTRO — 2 columnas: copy + 3 pills stats
───────────────────────────────────────── */
#serv-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6vw; align-items: center;
  padding: 8rem 5vw;
  border-top: 1px solid var(--border);
}

.serv-intro-copy p {
  font-size: .97rem; color: var(--dim);
  line-height: 1.85; margin-bottom: 1.4rem;
}
.serv-intro-copy p strong { color: var(--white); font-weight: 600; }

.serv-intro-pills {
  display: flex; flex-direction: column; gap: .7rem;
}
.s-pill {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.4rem 1.8rem;
  display: flex; align-items: center; gap: 1.2rem;
  transition: border-color .3s, background .3s, transform .25s;
}
.s-pill:hover {
  border-color: rgba(1,229,254,.2); background: var(--card-hi); transform: translateX(5px);
}
.s-pill-ico {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(1,229,254,.08); border: 1px solid rgba(1,229,254,.14);
  display: flex; align-items: center; justify-content: center;
}
.s-pill-ico svg { width: 20px; height: 20px; stroke: var(--cyan); fill: none; stroke-width: 1.7; }
.s-pill-text strong {
  display: block; font-family: var(--fh);
  font-size: .96rem; font-weight: 700; margin-bottom: .18rem;
}
.s-pill-text span { font-size: .8rem; color: var(--dim); line-height: 1.5; }


/* ─────────────────────────────────────────
   GRID DE SERVICIOS — 6 cards 3×2
───────────────────────────────────────── */
#servicios-grid {
  padding: 8rem 5vw;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.2);
}

.serv-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3.5rem;
}

/* card base */
.serv-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 2.4rem 2rem;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .35s, transform .35s, background .35s, box-shadow .35s;
}
/* gradiente sutil de fondo en hover */
.serv-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 0% 0%, rgba(1,229,254,.06) 0%, transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.serv-card:hover {
  border-color: rgba(1,229,254,.22);
  transform: translateY(-6px);
  background: var(--card-hi);
  box-shadow: 0 24px 56px rgba(1,229,254,.07);
}
.serv-card:hover::before { opacity: 1; }

/* ícono en card */
.serv-card-ico {
  width: 64px; height: 64px; margin-bottom: 1.6rem;
  border-radius: var(--r-md);
  background: rgba(1,229,254,.07); border: 1px solid rgba(1,229,254,.14);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
  position: relative; z-index: 1;
}
.serv-card:hover .serv-card-ico {
  background: rgba(1,229,254,.14); border-color: rgba(1,229,254,.28);
}
.serv-card-ico img {
  width: 34px; height: 34px; object-fit: contain;
  filter: brightness(2.5) saturate(0);
  transition: filter .3s;
}
.serv-card:hover .serv-card-ico img { filter: brightness(1) saturate(1); }

.serv-card h3 {
  font-family: var(--fh); font-size: 1.1rem; font-weight: 700;
  margin-bottom: .8rem; letter-spacing: -.015em;
  position: relative; z-index: 1;
}
.serv-card p {
  font-size: .84rem; color: var(--dim);
  line-height: 1.82; flex: 1;
  position: relative; z-index: 1;
}

/* Tags de tecnologías usadas en cada servicio */
.serv-card-tags {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: 1.4rem; position: relative; z-index: 1;
}
.sc-tag {
  font-family: var(--fh); font-size: .55rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .75rem; border-radius: var(--r-pill);
  border: 1px solid var(--border2); color: var(--dim2);
  transition: border-color .2s, color .2s;
}
.serv-card:hover .sc-tag { border-color: rgba(1,229,254,.2); color: var(--dim); }

/* Card "featured" — ocupa todo el ancho en la primera fila */
.serv-card.featured {
  grid-column: span 2;
  flex-direction: row; gap: 2.4rem; align-items: center;
}
.serv-card.featured .serv-card-ico {
  width: 80px; height: 80px; flex-shrink: 0;
}
.serv-card.featured .serv-card-ico img { width: 42px; height: 42px; }
.serv-card.featured .serv-card-body { flex: 1; }
.serv-card.featured h3 { font-size: 1.3rem; }
.serv-card.featured::before {
  background: radial-gradient(ellipse at 100% 50%, rgba(255,0,164,.05) 0%, transparent 70%);
}


/* ─────────────────────────────────────────
   PROCESO — mismo que nosotros.css
   (reutilizado íntegro, no duplicar CSS)
   Solo ajuste de fondo diferente
───────────────────────────────────────── */
#proceso-serv {
  padding: 8rem 5vw;
  border-top: 1px solid var(--border);
}

.proceso-timeline-s {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 3.5rem; position: relative;
}
.proceso-timeline-s::before {
  content: ''; position: absolute;
  top: 31px; left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  opacity: .22; z-index: 0;
}

.paso-s {
  padding: 0 1.4rem; position: relative; z-index: 1;
}
.paso-s-dot {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.6rem; position: relative;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.paso-s:hover .paso-s-dot {
  border-color: var(--cyan); background: rgba(1,229,254,.07);
  box-shadow: 0 0 24px rgba(1,229,254,.15);
}
.paso-s-dot img {
  width: 28px; height: 28px; object-fit: contain;
  filter: brightness(2.5) saturate(0); transition: filter .3s;
}
.paso-s:hover .paso-s-dot img { filter: brightness(1) saturate(1); }
.paso-s-num {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad); color: #000;
  font-family: var(--fh); font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.paso-s h3 { font-family: var(--fh); font-size: .96rem; font-weight: 700; margin-bottom: .6rem; }
.paso-s p  { font-size: .83rem; color: var(--dim); line-height: 1.78; }


/* ─────────────────────────────────────────
   TECNOLOGÍAS — grid de pills/logos
───────────────────────────────────────── */
#tecnologias {
  padding: 8rem 5vw;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.22);
}

.tec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-top: 3.5rem;
}
.tec-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.8rem;
  text-align: center;
  transition: border-color .3s, transform .3s, background .3s;
}
.tec-card:hover {
  border-color: rgba(255,0,164,.2); transform: translateY(-4px); background: var(--card-hi);
}
.tec-icon {
  font-size: 2rem; margin-bottom: .9rem; display: block;
  line-height: 1;
}
.tec-card h4 {
  font-family: var(--fh); font-size: .88rem; font-weight: 700;
  margin-bottom: .4rem;
}
.tec-card p { font-size: .76rem; color: var(--dim); line-height: 1.65; }


/* ─────────────────────────────────────────
   FAQ — acordeón
───────────────────────────────────────── */
#faq {
  padding: 8rem 5vw;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 7vw; align-items: start;
}

.faq-copy p {
  font-size: .97rem; color: var(--dim); line-height: 1.85; margin-bottom: 1.8rem;
}

.faq-list { display: flex; flex-direction: column; gap: .5rem; }

.faq-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .3s;
}
.faq-item.open { border-color: rgba(1,229,254,.2); }

.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.5rem; gap: 1rem; text-align: left;
}
.faq-q-text {
  font-family: var(--fh); font-size: .88rem; font-weight: 700;
  color: var(--white); line-height: 1.4;
}
.faq-arrow {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: var(--card-hi);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .3s, border-color .3s;
}
.faq-item.open .faq-arrow {
  background: var(--grad); border-color: transparent; transform: rotate(45deg);
}
.faq-arrow svg { width: 12px; height: 12px; stroke: var(--white); fill: none; stroke-width: 2.5; }
.faq-item.open .faq-arrow svg { stroke: #000; }

.faq-body {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .3s;
  padding: 0 1.5rem;
}
.faq-item.open .faq-body {
  max-height: 300px;
  padding: 0 1.5rem 1.3rem;
}
.faq-body p { font-size: .82rem; color: var(--dim); line-height: 1.8; }


/* ─────────────────────────────────────────
   AGENCIAS PARTNERS — carousel infinito
───────────────────────────────────────── */
#agencias-nos {
  padding: 5rem 5vw;
  border-top: 1px solid var(--border);
}


/* ─────────────────────────────────────────
   TESTIMONIOS
───────────────────────────────────────── */
#testimonials-serv {
  padding: 8rem 5vw;
  border-top: 1px solid var(--border);
}


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1100px) {
  .serv-cards-grid  { grid-template-columns: repeat(2, 1fr); }
  .serv-card.featured { grid-column: span 2; }
  .tec-grid         { grid-template-columns: repeat(2, 1fr); }
  .proceso-timeline-s { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .proceso-timeline-s::before { display: none; }
  #faq              { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  #serv-intro       { grid-template-columns: 1fr; }
  .serv-card.featured { grid-column: span 1; flex-direction: column; }
}
@media (max-width: 640px) {
  .serv-h1          { font-size: clamp(2.4rem, 13vw, 4rem); }
  .serv-cards-grid  { grid-template-columns: 1fr; }
  .tec-grid         { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .proceso-timeline-s { grid-template-columns: 1fr; }
  .paso-s           { padding: 0; }
  #hero-serv        { min-height: 75svh; padding: 8rem 5vw 4rem; }
}