/* ============================================================
   EJE INTELIGENTE — servicios.css (página /servicios)
   Se carga después de premium.css.
   ============================================================ */

/* ---------- Hero de subpágina ---------- */
.hero--sub{padding-bottom:clamp(48px,6vw,72px)}
.hero--sub .hero__sub{margin-top:24px}

/* menú de accesos directos del hero */
.srv__nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.srv__nav a{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line-2);border-radius:99px;padding:15px 19px;
  background:rgba(242,244,239,.03);
  transition:border-color .3s var(--ease),color .3s,background .3s,transform .35s var(--ease);
}
.srv__nav a b{color:var(--green-bright);font-weight:400}
.srv__nav a:hover{
  border-color:rgba(74,222,128,.5);color:var(--green-bright);
  background:rgba(47,164,83,.08);transform:translateY(-2px);
}

/* ---------- Bloques de servicio ---------- */
.srv{position:relative;padding-block:clamp(70px,9vw,116px);border-top:1px solid var(--line)}
.srv--first{border-top:0}
.srv__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px);align-items:center}

.srv__title{font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:-.03em}
.srv__desc{color:rgba(242,244,239,.7);font-size:clamp(1.02rem,1.5vw,1.14rem);max-width:48ch;margin-top:20px}
.srv__desc strong{color:var(--ink);font-weight:600}

.srv__price{
  display:flex;align-items:baseline;gap:12px;
  border-block:1px solid var(--line);padding:24px 0;margin-top:32px;
}
.srv__price b{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.6rem,4.6vw,3.6rem);
  background:linear-gradient(180deg,#fff 20%,#9BDFB6 115%);
  -webkit-background-clip:text;background-clip:text;
}
.srv__price i{
  font-style:normal;font-family:var(--f-mono);font-weight:400;
  font-size:.46em;color:var(--green-bright);vertical-align:.85em;margin-right:.14em;
}
.srv__price small{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;color:var(--muted)}

.srv__ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.srv__note{line-height:2}

/* — columna lateral: qué incluye — */
.srv__side{
  position:relative;border-radius:22px;
  border-color:transparent;
  background:
    radial-gradient(120% 90% at 10% 0%,rgba(47,164,83,.13),transparent 58%) padding-box,
    linear-gradient(165deg,rgba(74,222,128,.36),rgba(242,244,239,.09) 42%,rgba(242,244,239,.05)) border-box;
  padding:clamp(24px,3vw,34px);
}
.srv__ico{
  width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;
  border:1px solid rgba(74,222,128,.3);
  background:linear-gradient(180deg,rgba(47,164,83,.18),rgba(47,164,83,.06));
}
.srv__ico svg{width:25px;height:25px;stroke:var(--green-bright);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.srv__side-k{margin-top:20px;color:var(--green-bright)}
.srv__list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.srv__list li{
  display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:start;
  color:rgba(242,244,239,.8);font-size:.95rem;line-height:1.48;
}
.srv__list li strong{color:var(--ink);font-weight:600}
.srv__list .ic{
  margin-top:2px;width:22px;height:22px;padding:5px;border-radius:50%;
  background:rgba(47,164,83,.14);stroke-width:2.1;
}
.srv__for{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);line-height:2.1}
.srv__for b{color:var(--ink);font-weight:400;letter-spacing:.08em}

/*">×</span> helper: separador cero en móvil */
.srv__side.sheen::before{border-radius:22px}

/* ---------- Banda "incluido siempre" ---------- */
.always__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,16px)}
.always__item{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(15px,1.6vw,19px) clamp(16px,1.8vw,20px);
  background:rgba(242,244,239,.02);
  transition:border-color .3s,background .3s,transform .4s var(--ease);
}
.always__item:hover{
  border-color:rgba(74,222,128,.35);background:rgba(47,164,83,.055);transform:translateY(-3px);
}
.always__item .ic{
  margin-top:0;width:24px;height:24px;padding:5px;border-radius:50%;
  background:rgba(47,164,83,.14);stroke-width:2.1;flex:none;
}
.always__item span{color:rgba(242,244,239,.85);font-size:.93rem;line-height:1.4}
.always__item span strong{color:var(--ink);font-weight:600}
.always__item.sheen::before{border-radius:16px}

/* ---------- Sección del Plan EJE 360 ---------- */
.plan360-sec{padding-block:clamp(56px,7vw,88px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .srv__grid{grid-template-columns:1fr}
  .always__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .srv{padding-block:clamp(56px,15vw,76px)}
  .srv__nav a{padding:16px 15px;font-size:10px;letter-spacing:.1em}
  .srv__title{font-size:clamp(1.9rem,8.6vw,2.35rem)}
  .srv__desc{margin-top:16px;font-size:1rem}
  .srv__price{padding:20px 0;margin-top:26px}
  .srv__price b{font-size:2.35rem}
  .srv__note{display:none}   /* la nota de entrega vive dentro del panel */
  .always__grid{grid-template-columns:1fr;gap:10px}
  .always__item{padding:14px 16px}
}