/* ==========================================================================
   Mariona Agency 2028 · Portada de servicios (page-servicios.php).
   Se apoya en ma-servicio.css (el de las fichas): aquí solo lo propio de la
   portada. Las cuatro disciplinas alternan imagen a derecha e izquierda; la de
   IA va sin imagen. Todo en la medida de la cápsula; lo grande en UltraLight.
   ========================================================================== */
.sx-port .sx-h1x{max-width:12em}

/* ---------- Las cuatro disciplinas ---------- */
.sx-disc{padding-top:var(--sec);align-items:center}
.sx-dtx{grid-column:1/6}
.sx-dh{margin-top:14px;font-family:var(--fl);font-weight:300;font-size:clamp(26px,2.5vw,38px);line-height:1.14;letter-spacing:-.02em;color:var(--t1)}
.sx-dh a{text-decoration:none;transition:color .3s}
.sx-dh a:hover{color:var(--orange)}
.sx-ded{margin:clamp(14px,1.6vw,22px) 0 clamp(24px,2.8vw,40px) -.03em;font-family:var(--fx);font-weight:200;font-size:clamp(40px,4.8vw,78px);
  line-height:.98;letter-spacing:-.045em;color:var(--t1);text-wrap:balance}
.sx-dgo{margin-top:clamp(26px,3vw,40px)}
.sx-chips{margin-top:clamp(22px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:8px}
.sx-chips a{display:inline-flex;align-items:center;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-family:var(--fm);font-weight:500;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--t2);transition:border-color .3s,color .3s}
.sx-chips a:hover{border-color:var(--orange);color:var(--t1)}
/* La imagen, entera y en su proporción: sin recortes que corten rótulos o piezas. */
.sx-dimg{grid-column:7/13;display:block;border-radius:var(--r);overflow:hidden;background:var(--ink2)}
.sx-dimg img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.sx-dimg:hover img{transform:scale(1.03)}
.sx-disc.sx-rev .sx-dtx{grid-column:8/13;order:2}
.sx-disc.sx-rev .sx-dimg{grid-column:1/7;order:1}
.sx-disc.sx-noimg .sx-dtx{grid-column:1/9}

/* ---------- Todos los servicios: índice alfabético en columnas ---------- */
.sx-idx{padding-top:var(--sec)}
.sx-idx>.sx-p{margin-top:clamp(18px,2vw,26px)}
.sx-idxl{margin-top:clamp(32px,4vw,56px);columns:4;column-gap:var(--gap)}
.sx-idxl li{break-inside:avoid}
.sx-idxl a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 18px;border-top:1px solid var(--line);
  text-decoration:none;font-family:var(--fl);font-size:clamp(17px,1.35vw,20px);line-height:1.25;letter-spacing:-.012em;color:var(--t1);transition:border-color .3s}
.sx-idxl a::after{content:"\2192";color:var(--orange);transition:transform .45s var(--spring)}
.sx-idxl a:hover{border-color:var(--orange)}
.sx-idxl a:hover::after{transform:translateX(5px)}

/* ---------- Forma de trabajar: los cinco pasos en la hoja clara ---------- */
.sx-five{margin-top:clamp(36px,5vw,72px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--dline)}
.sx-five li{padding-top:clamp(18px,2vw,26px);font-family:var(--fx);font-weight:200;font-size:clamp(30px,3.4vw,54px);line-height:1;letter-spacing:-.04em;color:var(--d1)}
.sx-five span{display:block;margin-bottom:12px;font-family:var(--fm);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--d3)}
.sx-sheet .sx-five-p{margin-top:clamp(30px,3.6vw,52px);max-width:62ch;color:var(--d2)}
.sx-sheet .sx-five-p+.sx-link{display:inline-flex}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .sx-dtx{grid-column:1/7}
  .sx-dimg{grid-column:7/13}
  .sx-disc.sx-rev .sx-dtx{grid-column:7/13}
  .sx-disc.sx-rev .sx-dimg{grid-column:1/7}
  .sx-disc.sx-noimg .sx-dtx{grid-column:1/-1}
  .sx-idxl{columns:3}
}
@media (max-width:760px){
  .sx-dtx,.sx-dimg,.sx-disc.sx-rev .sx-dtx,.sx-disc.sx-rev .sx-dimg{grid-column:1/-1;order:0}
  .sx-dimg{margin-top:clamp(32px,8vw,44px)}
  .sx-idxl{columns:2}
  .sx-five{grid-template-columns:1fr}
  .sx-five li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--dline)}
  .sx-five span{margin:0;min-width:2.2em}
}
@media (max-width:520px){
  .sx-idxl{columns:1}
}
@media (prefers-reduced-motion:reduce){
  .sx-dimg img{transition:none}
}