/* Las fichas de Estudio también presentan los servicios en la Home. */
.home-studio-services{padding-block:clamp(45px,6vw,84px);background:#fff}
.home-studio-services .studio-service{color:#1d2254}
.home-studio-services .studio-service-image{position:relative}
.home-studio-services .studio-service-image img{display:block}
@media(max-width:650px){.home-studio-services{padding-block:45px 65px}}

/* Contraste de la ficha de señalética en la portada. */
.home-studio-services .studio-service:first-child .studio-service-copy{background:#1d2254;color:#fff}
.home-studio-services .studio-service:first-child .studio-service-copy>span{color:#51edc8}
.home-studio-services .studio-service:first-child .studio-service-copy h3,
.home-studio-services .studio-service:first-child .studio-service-copy h3 a{color:#fff}
.home-studio-services .studio-service:first-child .studio-service-copy p{color:rgba(255,255,255,.88)}
.home-studio-services .studio-service:first-child .studio-service-copy>a{color:#51edc8}

/* La ficha digital alterna imagen y texto en pantallas amplias. */
.home-studio-services .studio-service:nth-child(2){grid-template-columns:57% 43%}
.home-studio-services .studio-service:nth-child(2) .studio-service-image{grid-column:2;grid-row:1}
.home-studio-services .studio-service:nth-child(2) .studio-service-copy{grid-column:1;grid-row:1;background:#1d2254;color:#fff}
.home-studio-services .studio-service:nth-child(2) .studio-service-copy>span{color:#51edc8}
.home-studio-services .studio-service:nth-child(2) .studio-service-copy h3,
.home-studio-services .studio-service:nth-child(2) .studio-service-copy h3 a{color:#fff}
.home-studio-services .studio-service:nth-child(2) .studio-service-copy p{color:rgba(255,255,255,.88)}
.home-studio-services .studio-service:nth-child(2) .studio-service-copy>a{color:#51edc8}
@media(max-width:650px){
 .home-studio-services .studio-service:nth-child(2){grid-template-columns:1fr}
 .home-studio-services .studio-service:nth-child(2) .studio-service-image{grid-column:1;grid-row:1}
 .home-studio-services .studio-service:nth-child(2) .studio-service-copy{grid-column:1;grid-row:2}
}

/* La imagen de señalética pasa a la derecha en escritorio. */
.home-studio-services .studio-service:first-child{grid-template-columns:57% 43%}
.home-studio-services .studio-service:first-child .studio-service-image{grid-column:2;grid-row:1}
.home-studio-services .studio-service:first-child .studio-service-copy{grid-column:1;grid-row:1}
@media(max-width:650px){
 .home-studio-services .studio-service:first-child{grid-template-columns:1fr}
 .home-studio-services .studio-service:first-child .studio-service-image{grid-column:1;grid-row:1}
 .home-studio-services .studio-service:first-child .studio-service-copy{grid-column:1;grid-row:2}
}

/* El enlace del hero llega antes de las dos fichas, despejando el menú fijo. */
#servicios.home-studio-services{scroll-margin-top:96px}
@media(max-width:900px){#servicios.home-studio-services{scroll-margin-top:76px}}
/* Ocultar la delgada línea de borde del recurso fotográfico. */
.home-studio-services .studio-service:nth-child(2) .studio-service-image img{width:calc(100% + 6px);max-width:none;margin-left:-3px}

/* Más presencia para la invitación final de la Home. */
#contacto.cta-band{padding:62px 0!important}
#contacto .cta-title{font-size:clamp(44px,3.5vw,49px)!important;line-height:1.06!important;font-weight:700!important;max-width:410px!important}
@media(max-width:900px){
 #contacto.cta-band{padding:58px 0!important}
 #contacto .cta-title{font-size:clamp(38px,9vw,44px)!important;max-width:none!important}
}

/* Variante solicitada: ambas fichas con texto sobre verde institucional. */
.home-studio-services .studio-service .studio-service-copy{background:#51edc8!important;color:#1d2254!important}
.home-studio-services .studio-service .studio-service-copy>span,
.home-studio-services .studio-service .studio-service-copy h3,
.home-studio-services .studio-service .studio-service-copy h3 a,
.home-studio-services .studio-service .studio-service-copy p,
.home-studio-services .studio-service .studio-service-copy>a{color:#1d2254!important}
.home-studio-services .studio-service .studio-service-copy>a{border-bottom-color:#1d2254!important}

.home-studio-services .studio-service h3{margin-top:26px}

/* Movimiento leve en los enlaces de las dos fichas. */
.home-studio-services .studio-service-copy>a{display:inline-flex;align-items:center;transition:transform .25s ease}
.home-studio-services .studio-service-copy>a span{display:inline-block;transition:transform .25s ease}
.home-studio-services .studio-service-copy>a:hover,
.home-studio-services .studio-service-copy>a:focus-visible{transform:translateY(-2px)}
.home-studio-services .studio-service-copy>a:hover span,
.home-studio-services .studio-service-copy>a:focus-visible span{transform:translate(3px,-2px)}
@media(prefers-reduced-motion:reduce){.home-studio-services .studio-service-copy>a,.home-studio-services .studio-service-copy>a span{transition:none}.home-studio-services .studio-service-copy>a:hover,.home-studio-services .studio-service-copy>a:focus-visible,.home-studio-services .studio-service-copy>a:hover span,.home-studio-services .studio-service-copy>a:focus-visible span{transform:none}}

/* Cierre editorial de la Home: tipografía amplia y proceso claro. */
#contacto.cta-feature{background:#1d2254!important;color:#fff;padding:clamp(80px,8vw,120px) 0!important;overflow:hidden}
#contacto.cta-feature::before,#contacto.cta-feature::after{display:none!important}
#contacto .cta-feature-grid{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);gap:clamp(50px,7vw,115px)!important;align-items:center}
#contacto .cta-feature-eyebrow,#contacto .cta-feature-process>p{margin:0 0 27px;color:#51edc8;font-size:13px;font-weight:700;letter-spacing:.16em}
#contacto h2{margin:0 0 43px;font-size:clamp(62px,6.2vw,96px);line-height:.98;letter-spacing:-.055em;font-weight:700;max-width:720px;color:#fff}
#contacto h2 span{display:block;color:#51edc8}
#contacto .cta-feature-button{min-height:60px;padding:0 31px;gap:20px;font-size:16px;letter-spacing:.03em;box-shadow:0 14px 34px rgba(0,0,0,.16)}
#contacto .cta-feature-process{border:0;padding:0}
#contacto .cta-feature-process>p{margin-bottom:19px}
#contacto .cta-feature-process ol{list-style:none;margin:0;padding:0}
#contacto .cta-feature-process li{display:grid;grid-template-columns:44px 1fr;column-gap:18px;padding:20px 0;border-top:1px solid rgba(255,255,255,.2);font-size:18px;line-height:1.35;color:rgba(255,255,255,.86)}
#contacto .cta-feature-process li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
#contacto .cta-feature-process li>span{grid-row:1;color:#51edc8;font-size:14px;font-weight:700;letter-spacing:.08em;padding-top:4px}
#contacto .cta-feature-process li strong{display:inline;color:#fff;font-size:inherit;font-weight:700;margin-right:.25em}
@media(max-width:900px){
 #contacto.cta-feature{padding:72px 0!important}
 #contacto .cta-feature-grid{grid-template-columns:1fr;gap:62px!important}
 #contacto h2{font-size:clamp(49px,10.5vw,76px);margin-bottom:34px}
 #contacto .cta-feature-process{border:0;padding:0}
 #contacto .cta-feature-button{width:100%;max-width:430px;min-height:56px}
}
@media(max-width:520px){#contacto.cta-feature{padding:62px 0!important}#contacto h2{font-size:clamp(43px,11.5vw,60px)}#contacto .cta-feature-grid{gap:52px!important}#contacto .cta-feature-process li{font-size:17px;padding:18px 0}}

/* El titular del cierre iguala la escala del hero; vuelven los íconos del proceso. */
#contacto h2{font-size:clamp(46px,4.9vw,82px)!important;line-height:1!important;letter-spacing:-.054em!important}
#contacto .cta-feature-process li>.cta-feature-icon{display:grid;place-items:center;width:38px;height:38px;padding:0;color:#51edc8;align-self:center}
#contacto .cta-feature-icon svg{display:block;width:34px;height:34px;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){#contacto h2{font-size:clamp(42px,11.8vw,64px)!important}}
@media(max-width:390px){#contacto h2{font-size:clamp(38px,11.5vw,47px)!important}}

/* Títulos de servicios con la mayor escala que permite cada ancho de ficha. */
.home-studio-services .studio-service h3{font-size:clamp(34px,3.2vw,52px);line-height:1.04;letter-spacing:-.045em}
@media(min-width:651px) and (max-width:1100px){.home-studio-services .studio-service h3{font-size:clamp(28px,3vw,34px)}}
@media(max-width:650px){.home-studio-services .studio-service h3{font-size:clamp(38px,10vw,48px)}}

/* Jerarquía final: proceso protagonista y llamado alineado al margen derecho. */
#contacto .cta-feature-main{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0}
#contacto h2{font-size:clamp(42px,4.2vw,70px)!important;max-width:100%;margin-left:auto}
#contacto .cta-feature-process>p{font-size:16px;letter-spacing:.12em}
#contacto .cta-feature-process li{font-size:21px}
@media(max-width:900px){#contacto h2{font-size:clamp(38px,10vw,58px)!important}#contacto .cta-feature-process li{font-size:20px}}
@media(max-width:520px){#contacto .cta-feature-process li{font-size:19px}#contacto .cta-feature-process>p{font-size:14px}}
@media(max-width:390px){#contacto h2{font-size:clamp(35px,9.4vw,40px)!important}}

/* Escala los dos títulos con el ancho real del texto, sin partir Diseño Web. */
.home-studio-services .studio-service-copy{container-type:inline-size}
.home-studio-services .studio-service h3{font-size:min(58px,16cqw);white-space:nowrap;max-width:100%}
@media(min-width:651px) and (max-width:1100px){.home-studio-services .studio-service h3{font-size:min(58px,16cqw)}}
@media(max-width:650px){.home-studio-services .studio-service h3{font-size:min(58px,16cqw)}}

/* El proceso ocupa dos tercios; la invitación queda en el tercio derecho. */
#contacto .cta-feature-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(36px,4.5vw,70px)!important}
#contacto .cta-feature-process>p{font-size:clamp(18px,1.5vw,22px);letter-spacing:.1em;margin-bottom:26px}
#contacto .cta-feature-process li{grid-template-columns:56px 1fr;column-gap:20px;padding:22px 0;font-size:clamp(22px,1.85vw,27px);line-height:1.22}
#contacto .cta-feature-process li>.cta-feature-icon{width:48px;height:48px;border:1px solid rgba(81,237,200,.46);border-radius:50%;background:rgba(81,237,200,.08)}
#contacto .cta-feature-icon svg{width:28px;height:28px}
#contacto .cta-feature-process li div{align-self:center}
#contacto .cta-feature-main h2{font-size:clamp(36px,3.5vw,58px)!important}
@media(max-width:900px){#contacto .cta-feature-grid{grid-template-columns:1fr;gap:52px!important}#contacto .cta-feature-process li{font-size:clamp(19px,3vw,24px)}#contacto .cta-feature-main h2{font-size:clamp(38px,9.5vw,58px)!important}}
@media(max-width:390px){#contacto .cta-feature-process li{grid-template-columns:48px 1fr;gap:14px;font-size:19px}#contacto .cta-feature-process li>.cta-feature-icon{width:44px;height:44px}#contacto .cta-feature-main h2{font-size:clamp(35px,9.4vw,40px)!important}}

/* Desplaza la primera línea del llamado para equilibrar las dos palabras. */
#contacto h2 .cta-title-first{color:#fff;transform:translateX(-1.45em)}
@media(max-width:900px){#contacto h2 .cta-title-first{transform:translateX(-.75em)}}

/* Jerarquía semántica sin alterar la composición editorial. */
.home-seo-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Respuesta táctil y visual discreta de las fichas. */
.home-studio-services .studio-service{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
@media(hover:hover){.home-studio-services .studio-service:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(29,34,84,.12)}}
.home-studio-services .studio-service:focus-within{box-shadow:0 0 0 3px rgba(29,34,84,.22)}
@media(prefers-reduced-motion:reduce){.home-studio-services .studio-service{transition:none}.home-studio-services .studio-service:hover{transform:none}}