/* =====================================================================
   servicios.html — estilos propios de la página
   (usa styles.css para el armazón: sky, header, footer, tipografía)
   ===================================================================== */

.svc-main{position:relative; z-index:2;}

/* ---------- HERO ---------- */
.svc-hero{
  padding:160px 0 90px;
}
.svc-hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:1.03;
  letter-spacing:-0.02em;
  max-width:16ch;
}
.svc-hero p{
  margin-top:22px;
  max-width:52ch;
  color:var(--ink-soft);
  font-size:1.12rem;
}
.svc-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--ink-soft);
}
.svc-back:hover{color:var(--ink);}

/* ---------- ÍNDICE ---------- */
.svc-index{
  display:flex;
  flex-direction:column;
  padding:6px 0;
}
.svc-index a{
  display:flex;
  align-items:baseline;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.15rem, 2.3vw, 1.55rem);
  color:var(--ink-soft);
  transition:color .2s ease, padding-left .2s ease;
}
.svc-index a:last-child{border-bottom:1px solid var(--line);}
.svc-index a:hover{color:var(--ink); padding-left:8px;}
.svc-index a::after{
  content:'↓';
  margin-left:auto;
  font-family:var(--mono);
  color:var(--ink-faint);
}

/* ---------- SECCIÓN ---------- */
.svc-section{padding:74px 0;}
.svc-topic{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-0.02em;
}
.svc-section > .wrap > h2:not(.svc-topic){
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing:-0.01em;
}
.svc-section > .wrap > .lead{
  margin-top:16px;
  max-width:54ch;
  color:var(--ink-soft);
  font-size:1.06rem;
}
.svc-rule{
  border:0;
  border-top:1px solid var(--line);
  margin:0;
}

/* ---------- GRID DE TIPOS DE PÁGINA ---------- */
.type-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
  margin-top:48px;
}
.type-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(23,16,41,0.4);
}
.type-body{padding:24px 24px 28px;}
.type-name{
  font-family:var(--display);
  font-size:1.2rem;
  font-weight:600;
}
.type-desc{
  margin-top:8px;
  color:var(--ink-soft);
  font-size:0.97rem;
}
.type-use{
  margin-top:12px;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
}
@media (max-width:760px){
  .type-grid{grid-template-columns:1fr; gap:22px;}
}

/* ---------- CAJA DE DEMO ---------- */
.demo{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(139,92,246,0.14), transparent 60%),
    linear-gradient(160deg, #16102a, #0c0716);
}
.demo *{box-sizing:border-box;}
.demo-card{
  position:absolute;
  border-radius:9px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(196,181,253,0.14);
}

/* 1 · Página estática moderna: elementos que entran + brillo que pasa */
.d-static .bar{
  position:absolute; left:14%; height:9px; border-radius:5px;
  background:rgba(196,181,253,0.35);
  animation:d-rise 3.6s ease-in-out infinite;
}
.d-static .b1{top:24%; width:46%; background:rgba(245,243,250,0.6); height:12px; animation-delay:.0s;}
.d-static .b2{top:42%; width:62%; animation-delay:.2s;}
.d-static .b3{top:54%; width:52%; animation-delay:.35s;}
.d-static .btn{
  position:absolute; left:14%; top:70%;
  width:34%; height:22px; border-radius:999px;
  background:linear-gradient(135deg, var(--violet), var(--violet-dim));
  animation:d-rise 3.6s ease-in-out infinite; animation-delay:.5s;
}
.d-static .shine{
  position:absolute; top:0; bottom:0; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
  animation:d-shine 3.6s ease-in-out infinite;
}
@keyframes d-rise{
  0%,12%{opacity:0; transform:translateY(10px);}
  30%,80%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(10px);}
}
@keyframes d-shine{
  0%,55%{transform:translateX(-120%);}
  85%,100%{transform:translateX(320%);}
}

/* 2 · Parallax: capas a distinta velocidad */
.d-parallax .layer{position:absolute; inset:-20% -10%;}
.d-parallax .l-far{
  background-image:radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, #fff, transparent),
    radial-gradient(2px 2px at 85% 20%, #C4B5FD, transparent),
    radial-gradient(1.5px 1.5px at 40% 90%, #fff, transparent);
  background-size:180px 180px; opacity:.5;
  animation:d-drift 9s linear infinite;
}
.d-parallax .l-mid{
  background-image:radial-gradient(2.5px 2.5px at 30% 40%, #C4B5FD, transparent),
    radial-gradient(2px 2px at 75% 60%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 50% 15%, #fff, transparent);
  background-size:220px 220px; opacity:.8;
  animation:d-drift 5.5s linear infinite;
}
.d-parallax .planet{
  position:absolute; left:60%; top:22%;
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #b7a0ff, #6d28d9 60%, #3b0a72);
  box-shadow:0 0 30px rgba(124,58,237,0.5);
  animation:d-drift 14s linear infinite;
}
@keyframes d-drift{
  from{transform:translateY(-14%);}
  to{transform:translateY(14%);}
}

/* 3 · Aparición al bajar (scroll reveal) */
.d-reveal .row{
  position:absolute; left:12%; width:66%; height:14px; border-radius:6px;
  background:rgba(196,181,253,0.28);
  animation:d-reveal 4s ease-in-out infinite;
}
.d-reveal .r1{top:22%;}
.d-reveal .r2{top:40%; width:78%; animation-delay:.35s;}
.d-reveal .r3{top:58%; width:56%; animation-delay:.7s;}
.d-reveal .r4{top:76%; width:70%; animation-delay:1.05s;}
@keyframes d-reveal{
  0%,8%{opacity:0; transform:translateY(16px);}
  32%,72%{opacity:1; transform:translateY(0);}
  92%,100%{opacity:0; transform:translateY(16px);}
}

/* 4 · Landing de campaña: un solo objetivo, botón que late */
.d-landing .head{
  position:absolute; left:50%; top:26%; transform:translateX(-50%);
  width:60%; height:14px; border-radius:6px; background:rgba(245,243,250,0.6);
}
.d-landing .sub{
  position:absolute; left:50%; top:42%; transform:translateX(-50%);
  width:44%; height:9px; border-radius:5px; background:rgba(196,181,253,0.3);
}
.d-landing .cta{
  position:absolute; left:50%; top:62%; transform:translateX(-50%);
  width:42%; height:30px; border-radius:999px;
  background:linear-gradient(135deg, var(--violet), var(--violet-dim));
  animation:d-beat 1.8s ease-in-out infinite;
}
@keyframes d-beat{
  0%,100%{transform:translateX(-50%) scale(1); box-shadow:0 0 0 rgba(139,92,246,0);}
  50%{transform:translateX(-50%) scale(1.06); box-shadow:0 0 26px rgba(139,92,246,0.55);}
}

/* 5 · Catálogo / portafolio: tiles que se levantan en ola */
.d-grid .tiles{
  position:absolute; inset:16%;
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:8%;
}
.d-grid .tiles span{
  border-radius:7px;
  background:rgba(196,181,253,0.14);
  border:1px solid rgba(196,181,253,0.16);
  animation:d-pop 4.5s ease-in-out infinite;
}
.d-grid .tiles span:nth-child(1){animation-delay:0s;}
.d-grid .tiles span:nth-child(2){animation-delay:.25s;}
.d-grid .tiles span:nth-child(3){animation-delay:.5s;}
.d-grid .tiles span:nth-child(4){animation-delay:.75s;}
.d-grid .tiles span:nth-child(5){animation-delay:1s;}
.d-grid .tiles span:nth-child(6){animation-delay:1.25s;}
@keyframes d-pop{
  0%,60%,100%{transform:translateY(0); background:rgba(196,181,253,0.10); border-color:rgba(196,181,253,0.14);}
  18%{transform:translateY(-6px); background:rgba(139,92,246,0.32); border-color:rgba(139,92,246,0.5);}
}

/* 6 · Modo oscuro / identidad fuerte: el mini-sitio cambia de tema */
.d-theme .mini{
  position:absolute; inset:16%;
  border-radius:10px; padding:16px;
  animation:d-theme 6s ease-in-out infinite;
}
.d-theme .mini .t-bar{height:12px; width:55%; border-radius:6px; background:currentColor; opacity:.85;}
.d-theme .mini .t-line{height:8px; width:80%; border-radius:5px; background:currentColor; opacity:.35; margin-top:12px;}
.d-theme .mini .t-line.short{width:60%;}
.d-theme .knob{
  position:absolute; right:12%; top:12%;
  width:34px; height:18px; border-radius:999px;
  background:rgba(139,92,246,0.4);
  animation:d-knob 6s ease-in-out infinite;
}
.d-theme .knob::after{
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%; background:#fff;
  animation:d-knob-dot 6s ease-in-out infinite;
}
@keyframes d-theme{
  0%,45%{background:#f2f0f7; color:#1b1030;}
  55%,100%{background:#120a1f; color:#f5f3fa;}
}
@keyframes d-knob{
  0%,45%{background:rgba(150,140,175,0.35);}
  55%,100%{background:rgba(139,92,246,0.6);}
}
@keyframes d-knob-dot{
  0%,45%{transform:translateX(0);}
  55%,100%{transform:translateX(16px);}
}

/* ---------- CHIPS + FRASE GANCHO (apps / bases de datos) ---------- */
.chip-row{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:24px;
}
.chip-row span{
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--lavender);
  border:1px solid var(--violet-dim);
  border-radius:7px;
  padding:6px 11px;
}
.svc-hook{
  margin-top:40px;
  padding-left:20px;
  border-left:2px solid var(--violet);
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.3rem, 2.6vw, 1.8rem);
  line-height:1.28;
  color:var(--ink);
  max-width:24ch;
}

/* ---------- Botón "Cómo lo trabajamos" (lleva a como-trabajamos.html) ---------- */
.proc-link{
  margin-top:34px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border:1px solid var(--violet-dim);
  border-radius:8px;
  font-weight:600;
  font-size:0.98rem;
  color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.proc-link svg{width:18px; height:18px; color:var(--lavender); transition:transform .2s ease;}
.proc-link:hover{border-color:var(--lavender); background:rgba(139,92,246,0.08);}
.proc-link:hover svg{transform:translateX(4px);}

/* ---------- CTA FINAL ---------- */
.svc-cta{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(139,92,246,0.10), rgba(23,16,41,0.5));
  padding:48px;
  text-align:center;
}
.svc-cta h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  text-wrap:balance;
}
.svc-cta p{margin-top:12px; color:var(--ink-soft); max-width:44ch; margin-inline:auto;}
.svc-cta .actions{
  margin-top:26px;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.svc-cta a{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px;
  border-radius:8px;
  font-weight:600;
}
.svc-cta .wa{background:radial-gradient(circle at 30% 25%, #b7a0ff, #7c3aed 60%, #4c1d95); color:#fff;}
.svc-cta .wa:hover{filter:brightness(1.08);}
.svc-cta .mail{border:1px solid var(--violet-dim); color:var(--ink);}
.svc-cta .mail:hover{border-color:var(--lavender);}

@media (prefers-reduced-motion: reduce){
  .demo *{animation:none !important;}
}
@media (max-width:560px){
  .svc-hero{padding:130px 0 70px;}
  .svc-section{padding:56px 0;}
  .svc-cta{padding:36px 24px;}
}