/* ==========================================================================
   Mariona Agency 2028 · Portada de Servicios centrada (28/10/26) — leer antes de tocar.
   Plantilla: page-servicios.php (publicada el 28/10/26; antes, vista previa /servicios-simbolo/).
   Se apoya en ma-servicio.css (tokens, revelado, enlaces, hoja clara) y en
   ma-simbolo.css (la entrada). Aquí solo lo propio de esta portada.

   Criterio (Jacinto, 28/10): todo en el eje central, al estilo Apple, para que la
   vista no tenga que ir de izquierda a derecha. Orden: las cuatro disciplinas, una
   imagen general a sangre y después cada disciplina con su imagen debajo.
   · Textos centrados con medida corta (centrado y largo no se lee).
   · Lo grande en UltraLight; las imágenes de cada disciplina, enteras y en su proporción.
   · La imagen general pasa de tarjeta (medida de la cápsula) a sangre al entrar y después
     deriva despacio: la mueve ma-servicios-c.js con --gi (0 → 1) y --gp (−1 → 1). Sin JS o con
     movimiento reducido, a sangre y quieta.
   · Movimiento (Jacinto, 28/10: «todo muy aesthetic y fluido»): nada aparece de golpe. Los
     textos suben y se enfocan; los titulares grandes, línea a línea; las imágenes se abren
     desde dentro; la línea de las cuatro disciplinas se dibuja desde el centro. Lo dispara el
     revelado de ma-servicio.js (.sx-js / .sx-in); el estado final siempre nítido (filter:none).
   ========================================================================== */

.sc{text-align:center}
.sc .sx-p{margin-inline:auto;max-width:54ch}
.sc .sx-h2{margin-inline:auto;max-width:18ch}
.sc .sc-n{font-family:var(--fm);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--orange);font-variant-numeric:tabular-nums}

/* ---------- Cabecera: titular, entradilla y las cuatro disciplinas ---------- */
.sc-hero{padding-top:clamp(40px,7svh,96px);display:flex;flex-direction:column;align-items:center}
.sc-h1{margin-top:clamp(18px,2.2vw,28px);font-family:var(--fx);font-weight:200;font-size:clamp(48px,7.6vw,124px);line-height:.96;letter-spacing:-.05em;color:var(--t1)}
.sc-h1 .sc-l{display:block}
.sc-lead{margin-top:clamp(28px,3.2vw,44px);max-width:52ch;color:var(--t2);font-size:clamp(17px,1.35vw,20px);line-height:1.6;text-wrap:pretty}
.sc-four{position:relative;width:100%;margin-top:clamp(72px,9vw,132px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.sc-four::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:50% 50%}
.sc-four li{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.sc-four a{display:grid;grid-row:span 3;grid-template-rows:subgrid;justify-items:center;row-gap:14px;padding:clamp(28px,3.2vw,44px) clamp(6px,1vw,14px) 0;text-decoration:none;color:var(--t1)}
.sc-fn{position:relative;align-self:end;font-family:var(--fx);font-weight:200;font-size:clamp(32px,3.2vw,52px);line-height:1;letter-spacing:-.04em;text-wrap:balance;transition:color .4s var(--ease)}
.sc-fn::after{content:"";position:absolute;left:50%;bottom:-9px;width:28px;height:1px;margin-left:-14px;background:var(--orange);transform:scaleX(0);transition:transform .6s var(--ease)}
.sc-four a:hover .sc-fn::after,.sc-four a:focus-visible .sc-fn::after{transform:scaleX(1)}
.sc-fd{max-width:21ch;color:var(--t2);font-size:clamp(15.5px,1.2vw,18px);line-height:1.45;transition:color .3s}
.sc-four a:hover .sc-fn{color:var(--orange)}
.sc-four a:hover .sc-fd{color:var(--t1)}

/* ---------- Imagen general: de tarjeta a sangre ---------- */
.sc-gen{--gi:1;margin:clamp(96px,11vw,170px) 0 0}
.sc-gen-f{position:relative;height:min(56.25vw,92svh);overflow:hidden;background:var(--ink2);
  clip-path:inset(0 calc(var(--edge,5%) * (1 - var(--gi))) round calc(18px * (1 - var(--gi))))}
.sc-gen img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;transform:translate3d(0,calc(var(--gp,0) * 3.5%),0) scale(calc(1.07 - .07 * var(--gi)));transform-origin:50% 50%;will-change:transform}
.sx-js .sc-gen{--gi:0}

/* ---------- Argumento ---------- */
.sc-arg{padding-top:var(--sec)}
.sc-txt{margin-top:clamp(26px,3vw,40px)}

/* ---------- Cada disciplina: texto en el eje y su imagen debajo ---------- */
.sc-disc{padding-top:var(--sec);display:flex;flex-direction:column;align-items:center}
.sc-dh{margin-top:16px;font-family:var(--fl);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.16;letter-spacing:-.02em;color:var(--t1)}
.sc-dh a{text-decoration:none;transition:color .3s}
.sc-dh a:hover{color:var(--orange)}
.sc-ded{margin-top:clamp(14px,1.6vw,22px);max-width:15ch;font-family:var(--fx);font-weight:200;font-size:clamp(44px,5.8vw,96px);line-height:.98;letter-spacing:-.045em;color:var(--t1);text-wrap:balance}
.sc-go{margin-top:clamp(28px,3.2vw,44px)}
.sc-chips{justify-content:center}
.sc-dimg{display:block;width:min(100%,1080px);margin-top:clamp(52px,6.4vw,96px);border-radius:var(--r);overflow:hidden;background:var(--ink2)}
.sc-dimg img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.sc-dimg:hover img{transform:scale(1.02)}

/* ---------- Todos los servicios: una nube centrada ---------- */
.sc-idx{padding-top:var(--sec)}
.sc-idx>.sx-p{margin-top:clamp(18px,2vw,26px)}
.sc-idxl{max-width:1040px;margin:clamp(34px,4vw,56px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sc-idxl a{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--line);border-radius:999px;font-family:var(--fl);font-size:clamp(15px,1.15vw,17.5px);line-height:1.2;letter-spacing:-.01em;text-decoration:none;color:var(--t1);transition:border-color .3s,color .3s}
.sc-idxl a:hover{border-color:var(--orange);color:var(--t1)}

/* ---------- Forma de trabajar y cierre ---------- */
.sc-sheet .sx-five li{text-align:center}
.sc-sheet .sx-five-p{margin-inline:auto}
.sc-close{padding-block:var(--sec) clamp(56px,7vw,110px)}
.sc-close .sx-p{margin-top:clamp(22px,3vw,40px)}
.sc-close .sx-btn{margin-top:clamp(28px,3.4vw,46px)}

/* ---------- Movimiento: revelados de esta portada ----------
   Sustituyen al revelado general de ma-servicio.css (subir 28 px) por uno más lento y limpio. */
.sc{--rv:cubic-bezier(.19,1,.22,1)}
.sx-js .sc .sx-rv{opacity:0;transform:translate3d(0,34px,0);filter:blur(6px)}
.sx-js .sc .sx-rv.sx-in{opacity:1;transform:none;filter:none;
  transition:opacity 1.1s var(--rv) var(--d,0s),transform 1.4s var(--rv) var(--d,0s),filter 1.1s var(--rv) var(--d,0s)}
/* Titular de la cabecera: línea a línea */
.sx-js .sc .sc-h1.sx-rv{opacity:1;transform:none;filter:none}
.sx-js .sc .sc-h1 .sc-l{opacity:0;transform:translate3d(0,.32em,0);filter:blur(10px)}
.sx-js .sc .sc-h1.sx-in .sc-l{opacity:1;transform:none;filter:none;transition:opacity 1.2s var(--rv),transform 1.6s var(--rv),filter 1.2s var(--rv)}
.sx-js .sc .sc-h1.sx-in .sc-l+.sc-l{transition-delay:.14s}
/* Frases grandes: se enfocan con más recorrido */
.sx-js .sc .sc-ded.sx-rv:not(.sx-in){transform:translate3d(0,.4em,0);filter:blur(10px)}
/* Las cuatro disciplinas: la línea se dibuja desde el centro y las columnas entran escalonadas */
.sx-js .sc .sc-four::before{transform:scaleX(0);transition:transform 1.8s var(--rv) .1s}
.sx-js .sc .sc-four.sc-on::before{transform:scaleX(1)}
/* Imágenes de cada disciplina: se abren desde dentro */
.sx-js .sc .sc-dimg.sx-rv{opacity:1;transform:none;filter:none;clip-path:inset(7% 7% 7% 7% round var(--r))}
.sx-js .sc .sc-dimg.sx-rv img{transform:scale(1.1)}
.sx-js .sc .sc-dimg.sx-in{clip-path:inset(0 0 0 0 round var(--r));transition:clip-path 1.6s var(--rv)}
.sx-js .sc .sc-dimg.sx-in img{transform:none;transition:transform 2s var(--rv)}
.sx-js .sc .sc-dimg.sx-in:hover img{transform:scale(1.02);transition:transform 1.2s var(--ease)}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .sc-four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
  .sc-four a{padding-top:26px;row-gap:10px}
  .sc-fn{font-size:clamp(28px,8vw,38px)}
  .sc-gen-f{height:min(118vw,78svh)}
  .sc-dimg{margin-top:clamp(36px,9vw,52px)}
  .sc-sheet .sx-five li{justify-content:center}
}

/* ---------- Movimiento reducido: la imagen general, a sangre y quieta ---------- */
@media (prefers-reduced-motion:reduce){
  .sx-js .sc-gen,.sc-gen{--gi:1;--gp:0}
  .sc-dimg img,.sc-fn::after{transition:none}
}