/* AF Comunicación · institucional y corporativa */

.hero{padding:88px clamp(20px,4vw,48px) 72px}
.h1{display:flex;flex-direction:column;gap:26px;font-weight:400}
.display{display:block;font-family:var(--display);font-weight:400;font-size:clamp(48px,6.2vw,92px);line-height:.98;letter-spacing:-.022em;color:var(--hd)}
.display em{display:block;font-style:italic;color:var(--acc)}
/* Palabra que rota (institución, empresa, entidad); va al final de su línea para que no mueva el resto */
.display .l1{display:block}
.rot{display:inline-block;transition:opacity .4s var(--e),transform .4s var(--e)}
.rot.out{opacity:0;transform:translateY(.14em)}
.h-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:28px 64px;align-items:end;margin-top:44px;padding-top:32px;border-top:1px solid var(--ln)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--tx);max-width:42ch;text-wrap:pretty}
.h-row .ctas{justify-self:end}
.steps4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:72px;padding-top:34px}
.steps4::before{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:var(--ln2)}
.steps4::after{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:var(--acc);transform-origin:left}
.steps4 li{position:relative;display:flex;flex-direction:column;gap:6px}
.steps4 li::before{content:'';position:absolute;left:0;top:-34px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--acc);z-index:1}
.steps4 li:last-child::before{background:var(--acc)}
.steps4 b{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hd)}
.steps4 span{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.35;color:var(--mu)}

/* Qué hago */
.svc{border-top:1px solid var(--ln)}
.svc li{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,6fr);gap:12px 32px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--ln)}
.svc i{font-style:normal;font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:14px;color:var(--acc)}
.svc h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,31px);line-height:1.15;color:var(--hd)}
.svc p{font-size:17px;line-height:1.6;color:var(--mu);max-width:52ch}

/* Con tu equipo */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:24px}
.role{display:flex;flex-direction:column;gap:20px;padding:36px 34px 38px;background:var(--card);border:1px solid var(--ln);border-radius:10px}
.role h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2;color:var(--hd)}
.role ul{display:flex;flex-direction:column;border-top:1px solid var(--ln)}
.role li{padding:13px 0;border-bottom:1px solid var(--ln);font-size:16.5px;line-height:1.45}
.role.mine li{color:var(--tx)}
.role.team li{color:var(--mu)}
.after{margin-top:26px;font-size:16.5px;color:var(--mu)}

/* Para quién */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.wcard{display:flex;flex-direction:column;gap:18px;padding:40px 36px;border:1px solid var(--ln);border-radius:10px}
.wcard h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.1;color:var(--hd)}
.wcard p{font-size:17px;line-height:1.65;color:var(--mu)}
.wcard .tag{align-self:flex-start;font-size:13.5px;font-weight:500;padding:8px 14px;border:1px solid var(--ln2);border-radius:999px;color:var(--hd)}

/* Criterio jurídico */
.law{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:40px 80px;align-items:start}
.law-t{display:flex;flex-direction:column;gap:24px}
.law-t p{font-size:18px;line-height:1.7;color:var(--tx);max-width:50ch}
.law-q{display:flex;flex-direction:column;gap:18px;padding-top:28px;border-top:2px solid var(--acc)}
.law-q p{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,31px);line-height:1.3;color:var(--hd)}
.law-q small{font-size:13.5px;letter-spacing:.04em;color:var(--mu)}

/* Movimiento */
.motion .h1 .eyebrow{animation:up .9s var(--e) both}
.motion .display{animation:up 1.1s .06s var(--e) both}
.motion .display em{animation:up 1.1s .3s var(--e) both}
.motion .h-row{animation:up .9s .45s var(--e) both}
.motion .steps4::after{animation:line 1.8s .7s cubic-bezier(.65,0,.35,1) both}
.motion .steps4 li{animation:up .8s var(--e) both}
.motion .steps4 li:nth-child(1){animation-delay:.8s}
.motion .steps4 li:nth-child(2){animation-delay:1.15s}
.motion .steps4 li:nth-child(3){animation-delay:1.5s}
.motion .steps4 li:nth-child(4){animation-delay:1.85s}
@keyframes line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes linev{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (max-width:980px){
.hero{padding:52px 20px 48px}
.h-row .ctas{justify-self:start}
.steps4{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:48px;padding-top:0;padding-left:30px}
.steps4::before,.steps4::after{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
.steps4::after{transform-origin:top}
.motion .steps4::after{animation-name:linev}
.steps4 li::before{left:-30px;top:3px}
.svc li{grid-template-columns:40px minmax(0,1fr);padding:24px 0}
.svc p{grid-column:2}
.role,.wcard{padding:28px 22px}
}