/* Página de servicios (/servicios/): precios y plazos claros. Pestañas «según quién seas», sección fijada de «cómo
   trabajamos» que cambia de color, libro de precios con cifras grandes, packs de horas, plazos, mantenimiento, IA,
   «lo que no hacemos» tachado, FAQ y cierre. El listado de servicios es el de la home (css/home.css). Va bajo
   .pagina--servicios y usa las piezas de .pagina del framework. La cabecera del sitio es fija (72px). */
.pagina--servicios{ --nav-h: 72px; }
body.pagina-servicios{ background: var(--bg); }

/* ---------- 1. Encabezado ---------- */

/* ---------- 2. Listado (hueco) ---------- */
.pagina--servicios .listado{ padding-bottom: var(--section-y); }

/* ---------- 3. Según quién seas: lista + panel (como los servicios de la home) ---------- */

.pagina--servicios .quien__grid{ display: grid; grid-template-columns: 5fr 7fr; gap: 14px; align-items: stretch; }
.pagina--servicios .tabs{ display: grid; gap: 10px; align-content: start; }
.pagina--servicios .tab{ text-align: left; width: 100%; padding: clamp(18px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); border-radius: var(--radius); background: none; color: var(--text-dim); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; cursor: pointer; transition: background .3s, color .3s, transform .3s cubic-bezier(.22, 1, .36, 1); }
.pagina--servicios .tab:hover{ color: var(--c); }
.pagina--servicios .tab[aria-selected="true"]{ color: var(--c); transform: translateX(14px); }
.pagina--servicios .tab#t1{ --c: var(--purple); }
.pagina--servicios .tab#t2{ --c: var(--green); }
.pagina--servicios .tab#t3{ --c: var(--orange); }
.pagina--servicios .panel{ background: var(--c); color: var(--bg); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 28px; align-content: space-between; min-height: 360px; }
.pagina--servicios .panel[hidden]{ display: none; }
.pagina--servicios .panel p{ font-size: var(--fs-lg); line-height: 1.3; max-width: 52ch; }
.pagina--servicios .panel--1{ --c: var(--purple); }
.pagina--servicios .panel--2{ --c: var(--green); }
.pagina--servicios .panel--3{ --c: var(--orange); }

/* ---------- 4. Cómo trabajamos: sección clara con pasos fijados ---------- */
.pagina--servicios .proc{ padding: 0; background: var(--purple); transition: background-color .5s ease, color .5s ease; }
.pagina--servicios .proc[data-paso="1"]{ background: var(--purple); }
.pagina--servicios .proc[data-paso="2"]{ background: var(--green); }
.pagina--servicios .proc[data-paso="3"]{ background: var(--orange); }
.pagina--servicios .proc[data-paso="4"]{ background: var(--bg); color: var(--text); }
.pagina--servicios .proc{ --fg-dim: var(--bg); }
.pagina--servicios .proc[data-paso="4"]{ --fg-dim: var(--text-mute); }
.pagina--servicios .proc[data-paso="4"] .eyebrow{ color: var(--text); }
.pagina--servicios .proc[data-paso="4"] .eyebrow::before{ background: var(--text); }
.pagina--servicios .proc__top{ padding-top: var(--section-y); padding-bottom: clamp(24px, 4vw, 48px); }
.pagina--servicios .proc__track{ position: relative; }
.pagina--servicios .proc__sticky{ position: sticky; top: 0; height: 100vh; display: grid; align-content: center; }
.pagina--servicios .proc__sent{ margin-top: -100vh; }
.pagina--servicios .proc__sent i{ display: block; height: 70vh; }
.pagina--servicios .proc__list{ display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: repeat(4, auto); column-gap: clamp(24px, 5vw, 80px); row-gap: clamp(8px, 1.4vw, 18px); align-items: center; }
.pagina--servicios .proc__list li{ display: contents; }
.pagina--servicios .proc__w{ grid-column: 1; width: fit-content; font-size: var(--fs-d1); font-weight: 800; letter-spacing: -.04em; line-height: 1; padding: .02em .18em .06em; border-radius: 18px; color: var(--bg); transition: background .35s, color .35s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.pagina--servicios .proc__list li:nth-child(1) .proc__w{ grid-row: 1; --hl: var(--purple); --hc: var(--bg); }
.pagina--servicios .proc__list li:nth-child(2) .proc__w{ grid-row: 2; --hl: var(--green); --hc: var(--bg); }
.pagina--servicios .proc__list li:nth-child(3) .proc__w{ grid-row: 3; --hl: var(--orange); --hc: var(--bg); }
.pagina--servicios .proc__list li:nth-child(4) .proc__w{ grid-row: 4; --hl: var(--bg); --hc: var(--text); }
.pagina--servicios .proc__w.on{ color: var(--text); transform: translateX(1.4vw); }
.pagina--servicios .proc[data-paso="4"] .proc__w{ color: var(--text-mute); }
.pagina--servicios .proc[data-paso="4"] .proc__w.on{ color: var(--text); }
.pagina--servicios .proc__p{ grid-column: 2; grid-row: 1 / span 4; align-self: center; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.01em; max-width: 24ch; visibility: hidden; transform: translateY(14px); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pagina--servicios .proc__p.on{ visibility: visible; transform: none; }
@media (max-width: 900px){
  .pagina--servicios .proc__sticky{ position: static; height: auto; padding-bottom: var(--section-y); }
  .pagina--servicios .proc__sent{ display: none; }
  .pagina--servicios .proc__list{ grid-template-columns: 1fr; grid-template-rows: none; row-gap: 28px; }
  .pagina--servicios .proc__list li{ display: block; }
  .pagina--servicios .proc__w{ color: var(--bg); background: none; }
  .pagina--servicios .proc[data-paso="4"] .proc__w{ color: var(--bg); }
  .pagina--servicios .proc__p{ visibility: visible; transform: none; margin-top: 12px; max-width: 40ch; }
  /* móvil: sin cambio por scroll; cada paso es una banda a todo el ancho con su color */
  .pagina--servicios .proc[data-paso]{ background: var(--bg); color: var(--text); }
  .pagina--servicios .proc[data-paso] .eyebrow{ color: var(--text); }
  .pagina--servicios .proc[data-paso] .eyebrow::before{ background: var(--text); }
  .pagina--servicios .proc__sticky{ padding-bottom: 0; }
  .pagina--servicios .proc__list{ row-gap: 0; }
  .pagina--servicios .proc__list li{ padding: clamp(28px, 8vw, 44px) 0; clip-path: inset(0 -100vmax); box-shadow: 0 0 0 100vmax var(--hl); background: var(--hl); color: var(--hc); }
  .pagina--servicios .proc__list li:nth-child(1){ --hl: var(--purple); --hc: var(--bg); }
  .pagina--servicios .proc__list li:nth-child(2){ --hl: var(--green); --hc: var(--bg); }
  .pagina--servicios .proc__list li:nth-child(3){ --hl: var(--orange); --hc: var(--bg); }
  .pagina--servicios .proc__list li:nth-child(4){ --hl: var(--bg-elev); --hc: var(--text); }
  .pagina--servicios .proc[data-paso] .proc__w, .pagina--servicios .proc[data-paso] .proc__p{ color: var(--hc); }
}
@media (prefers-reduced-motion: reduce){
  .pagina--servicios .proc__sticky{ position: static; height: auto; padding-bottom: var(--section-y); }
  .pagina--servicios .proc__sent{ display: none; }
  .pagina--servicios .proc__list{ grid-template-columns: 1fr; grid-template-rows: none; row-gap: 28px; }
  .pagina--servicios .proc__list li{ display: block; }
  .pagina--servicios .proc__w{ color: var(--bg); background: none; transition: none; }
  .pagina--servicios .proc__w, .pagina--servicios .proc__w.on{ transform: none; }
  .pagina--servicios .proc{ transition: none; }
  .pagina--servicios .proc__p{ visibility: visible; transform: none; margin-top: 12px; max-width: 40ch; transition: none; }
}

/* ---------- 5. Precios: título sticky y libro de precios ---------- */
.pagina--servicios .precios__grid{ display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.pagina--servicios .precios__tit{ position: sticky; top: 40px; }
.pagina--servicios .libro{ display: grid; gap: 10px; }
.pagina--servicios .fila{ --a: var(--text); background: var(--bg-elev); border-radius: var(--radius); transition: background .3s; }
.pagina--servicios .fila:nth-child(1){ --a: var(--purple); }
.pagina--servicios .fila:nth-child(2){ --a: var(--text); }
.pagina--servicios .fila:nth-child(3){ --a: var(--green); }
.pagina--servicios .fila:nth-child(4){ --a: var(--orange); }
.pagina--servicios .fila:nth-child(5){ --a: var(--purple); }
.pagina--servicios .fila:nth-child(6){ --a: var(--green); }
.pagina--servicios .fila:nth-child(7){ --a: var(--orange); }
.pagina--servicios .fila__b{ display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.6vw, 34px); border-radius: var(--radius); cursor: pointer; }
.pagina--servicios .fila__t{ font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; transition: color .3s; }
.pagina--servicios .fila__t small{ display: block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; transition: color .3s; }
.pagina--servicios .fila__n{ font-size: var(--fs-d7); font-weight: 800; letter-spacing: -.05em; line-height: .85; color: var(--a); white-space: nowrap; transition: color .3s; }
.pagina--servicios .fila__n small{ font-size: .32em; letter-spacing: -.01em; font-weight: 600; }
.pagina--servicios .fila__n--txt{ font-size: var(--fs-4xl); letter-spacing: -.03em; line-height: 1; text-align: right; }
.pagina--servicios .fila__d{ display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1), visibility 0s .4s; }
.pagina--servicios .fila__d > div{ overflow: hidden; min-height: 0; }
.pagina--servicios .fila__d p{ padding: 0 clamp(20px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px); color: var(--text-dim); max-width: 56ch; font-size: var(--fs-md); }
.pagina--servicios .fila.open{ background: var(--a); }
.pagina--servicios .fila.open .fila__t, .pagina--servicios .fila.open .fila__n{ color: var(--bg); }
.pagina--servicios .fila.open .fila__t small, .pagina--servicios .fila.open .fila__d p{ color: var(--bg); }
.pagina--servicios .fila.open .fila__d{ grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.pagina--servicios .fila:nth-child(2).open{ --a: var(--text); }

/* packs de horas */
.pagina--servicios .packs{ margin-top: 14px; background: var(--bg-elev); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); }
.pagina--servicios .packs h3{ font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 6px; }
.pagina--servicios .packs__lead{ color: var(--text-dim); margin-bottom: 24px; }
.pagina--servicios .packs__opts{ display: grid; gap: 8px; }
.pagina--servicios .pack{ display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--bg); cursor: pointer; transition: background .25s; }
.pagina--servicios .pack:hover{ background: var(--tint-neutral); }
.pagina--servicios .pack__h{ font-weight: 700; font-size: var(--fs-md); }
.pagina--servicios .pack__bar{ height: 14px; border-radius: 7px; background: var(--tint-neutral); position: relative; overflow: hidden; }
.pagina--servicios .pack__bar i{ position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--text-mute); border-radius: 7px; transform-origin: left; transition: background .3s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.pagina--servicios .pack__p{ font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-dim); min-width: 5.5em; text-align: right; }
.pagina--servicios .pack[aria-checked="true"]{ background: var(--tint-neutral); }
.pagina--servicios .pack[aria-checked="true"] .pack__bar i{ background: var(--green); }
.pagina--servicios .pack[aria-checked="true"] .pack__p{ color: var(--text); }
.pagina--servicios .pack .badge{ margin-left: 8px; vertical-align: middle; }
.pagina--servicios .packs__res{ margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.pagina--servicios .packs__res b{ font-size: var(--fs-d7); font-weight: 800; letter-spacing: -.05em; line-height: .85; color: var(--green); }
.pagina--servicios .packs__res span{ font-size: var(--fs-xl); color: var(--text-dim); }
.pagina--servicios .packs__res span strong{ color: var(--text); font-weight: 600; }

/* ---------- 6. Plazos: bloque verde con dos barras que se dibujan ---------- */
.pagina--servicios .plazos{ --c: var(--green); }
.pagina--servicios .plazos__grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 6vw, 100px); align-items: start; }
.pagina--servicios .barras{ display: grid; gap: clamp(26px, 4vw, 44px); margin-top: 6px; }
.pagina--servicios .barra{ display: grid; gap: 10px; }
.pagina--servicios .barra__l{ display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.pagina--servicios .barra__l span{ font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.pagina--servicios .barra__pista{ position: relative; height: clamp(16px, 1.8vw, 24px); }
.pagina--servicios .barra__min, .pagina--servicios .barra__rango{ position: absolute; top: 0; bottom: 0; border-radius: 999px; transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.pagina--servicios .barra__min{ left: 0; width: calc(var(--min) / var(--tope, 14) * 100%); background: var(--bg); }
.pagina--servicios .barra__rango{ left: calc(var(--min) / var(--tope, 14) * 100%); width: calc((var(--max) - var(--min)) / var(--tope, 14) * 100%); background: var(--c, var(--purple)); transition-delay: .5s; }
/* cada barra tiene su color: lo seguro en oscuro y el margen de plazo en un color vivo */
.pagina--servicios .barra:nth-child(1){ --c: var(--purple); }
.pagina--servicios .barra:nth-child(2){ --c: var(--orange); }
.pagina--servicios .barra:nth-child(3){ --c: var(--pink); }
.pagina--servicios .barra:nth-child(4){ --c: var(--lilac); }
.pagina--servicios .barra:nth-child(5){ --c: var(--coral); }
.pagina--servicios .barra:nth-child(6){ --c: var(--lemon); }
.pagina--servicios .barra.in .barra__min, .pagina--servicios .barra.in .barra__rango{ transform: none; }
.pagina--servicios .barra:nth-child(2) .barra__min{ transition-delay: .3s; }
.pagina--servicios .barra:nth-child(2) .barra__rango{ transition-delay: .8s; }
.pagina--servicios .eje{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 7. Mantenimiento ---------- */
.pagina--servicios .mant__grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 6vw, 100px); align-items: center; }
.pagina--servicios .mant__cifra{ background: var(--bg-elev); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 48px); display: grid; gap: 8px; }
.pagina--servicios .mant__cifra b{ font-size: var(--fs-d5); font-weight: 800; letter-spacing: -.06em; line-height: .8; color: var(--purple); }
.pagina--servicios .mant__cifra span{ font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }

/* ---------- 8. IA: bloque morado con la cadena de cambios ---------- */
.pagina--servicios .ia{ --c: var(--purple); }
.pagina--servicios .ia__tit{ max-width: 14ch; }
.pagina--servicios .ia__txt{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); }
.pagina--servicios .ia__txt p{ font-size: var(--fs-md); }
.pagina--servicios .ia__txt p + p{ margin-top: 1em; }
.pagina--servicios .cadena{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: clamp(36px, 5vw, 72px); }
.pagina--servicios .cadena li{ display: flex; align-items: center; gap: 8px; }
.pagina--servicios .cadena .pill{ background: var(--bg); color: var(--text); border-radius: 999px; padding: clamp(8px, 1vw, 14px) clamp(14px, 1.7vw, 24px); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.pagina--servicios .cadena .flecha{ font-size: var(--fs-lg); font-weight: 700; }
.pagina--servicios .cadena .ia-c{ width: clamp(84px, 8.5vw, 124px); aspect-ratio: 1; border-radius: 50%; background: var(--bg); color: var(--purple); display: grid; place-items: center; font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.04em; }
.js .pagina--servicios .cadena li{ transform: translateX(-24px); transition: transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--k) * .12s); }
.js .pagina--servicios .cadena.in li{ transform: none; }

/* ---------- 9. Lo que no hacemos: lista tachada ---------- */
.pagina--servicios .nohace__grid{ display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(28px, 6vw, 100px); align-items: start; }
.pagina--servicios .tachas{ display: grid; gap: clamp(10px, 1.6vw, 22px); margin: 24px 0; }
.pagina--servicios .tachas li{ position: relative; width: fit-content; max-width: 100%; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--text); }
.pagina--servicios .tachas li::after{ content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: clamp(2px, .22vw, 3px); background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.22, 1, .36, 1) .25s; }
.pagina--servicios .tachas li.in::after{ transform: none; }
.pagina--servicios .tachas li:nth-child(2)::after{ transition-delay: .45s; }
.pagina--servicios .tachas li:nth-child(3)::after{ transition-delay: .65s; }
.pagina--servicios .tachas li:nth-child(4)::after{ transition-delay: .85s; }

/* ---------- 10. FAQ (clara, acordeón recto) ---------- */


/* ---------- 11. Cierre ---------- */

@media (max-width: 900px){
  .pagina--servicios .tachas li{ text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 2px; font-size: var(--fs-xl); }
  .pagina--servicios .tachas li::after{ display: none; }
  .pagina--servicios .precios__grid, .pagina--servicios .plazos__grid, .pagina--servicios .mant__grid, .pagina--servicios .ia__txt, .pagina--servicios .nohace__grid, .pagina--servicios .quien__grid{ grid-template-columns: 1fr; }
  
  .pagina--servicios .precios__tit{ position: static; }
  .pagina--servicios .tabs{ grid-template-columns: 1fr; }
  .pagina--servicios .tab[aria-selected="true"]{ transform: none; }
  /* desplegable: cada título lleva su + / − y su contenido va justo debajo */
  .pagina--servicios .tab{ display: flex; justify-content: space-between; align-items: center; gap: var(--s-7); }
  .pagina--servicios .tab::after{ content: "+"; font-family: var(--font-mono); font-weight: 500; flex-shrink: 0; }
  .pagina--servicios .tab[aria-expanded="true"]{ color: var(--c); }
  .pagina--servicios .tab[aria-expanded="true"]::after{ content: "−"; }
  .pagina--servicios .panel{ min-height: 0; }
  .pagina--servicios .pack{ grid-template-columns: 64px 1fr auto; gap: 10px; }
  .pagina--servicios .fila__b{ flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce){
  .pagina--servicios .tab, .pagina--servicios .fila, .pagina--servicios .fila__t, .pagina--servicios .fila__n, .pagina--servicios .fila__d, .pagina--servicios .pack, .pagina--servicios .pack__bar i{ transition: none; }
  .pagina--servicios .barra__min, .pagina--servicios .barra__rango{ transform: none; transition: none; }
  .pagina--servicios .tachas li::after{ transform: none; transition: none; }
  .js .pagina--servicios .cadena li{ transform: none; transition: none; }
}

/* ---------- Ajustes para la cabecera fija del sitio y para el contenido del editor ---------- */

.pagina--servicios .precios__tit{ top: calc(var(--nav-h) + 40px); }