/* ============================================================
   ACTORES S.C.G — Estilos de LA SOCIEDAD / Lo que hacemos
   (que-hacemos.html) · se carga junto a site.css
   ============================================================ */

/* ====== INTRO ====== */
.intro{background:var(--white)}
.intro p{font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3.2vw,40px); line-height:1.2; letter-spacing:-.01em; margin:0; max-width:24ch}
.intro p em{font-style:italic; color:var(--accent)}

/* ====== EL CICLO ====== */
.flow{background:var(--paper)}
.flow-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px}
.flow-node{background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 24px; position:relative}
.flow-node .fnum{width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:18px}
.flow-node h4{font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 8px}
.flow-node p{font-size:14px; color:#555; margin:0}
.flow-node:not(:last-child)::after{content:"→"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); z-index:2; color:var(--accent); font-size:18px; font-weight:700; background:var(--paper); width:22px; height:22px; display:flex; align-items:center; justify-content:center}
@media(max-width:820px){.flow-grid{grid-template-columns:1fr 1fr}
  .flow-node:not(:last-child)::after{display:none}}
@media(max-width:480px){.flow-grid{grid-template-columns:1fr}}

/* ====== FILAS DE DETALLE ====== */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; padding:clamp(64px,7vw,104px) 0; border-top:1px solid var(--line); scroll-margin-top:80px}
.frow:first-of-type{border-top:none}
.frow.rev .fr-body{order:2}
.fr-media{border-radius:22px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 40px 80px -40px rgba(0,0,0,.4)}
.fr-num{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.16em; color:var(--accent); display:flex; align-items:center; gap:12px; margin-bottom:20px}
.fr-num::before{content:""; width:26px; height:1px; background:var(--accent)}
.fr-body h2{font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.6vw,44px); line-height:1.04; letter-spacing:-.01em; margin:0 0 18px}
.fr-body h2 em{font-style:italic; color:var(--accent)}
.fr-body p{font-size:17px; line-height:1.6; color:#3a3a37; margin:0 0 18px; max-width:46ch}
.fr-list{list-style:none; padding:0; margin:24px 0 26px}
.fr-list li{position:relative; padding-left:32px; margin-bottom:12px; font-size:15.5px; color:#333; line-height:1.4}
.fr-list li::before{content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; background:var(--orange-100); color:var(--orange-700); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.fr-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-style:italic; font-size:18px; color:var(--ink); padding-left:16px; border-left:3px solid var(--accent)}
@media(max-width:820px){
  .frow{grid-template-columns:1fr; gap:32px; padding:56px 0}
  .frow.rev .fr-body{order:0}
  .fr-media{order:-1; max-width:520px}
}

/* ====== FRANJA DE CIFRAS ====== */
.stats{background:var(--ink); color:#fff; overflow:hidden}
.stats .spiral{right:-120px; top:-120px; width:400px; height:400px; opacity:.1}
.stats .spiral path{stroke:var(--accent)}
.stats .wrap{position:relative; z-index:2}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center}
.stat b{font-family:var(--font-display); font-weight:700; font-size:clamp(40px,6vw,74px); color:var(--accent); display:block; line-height:1}
.stat span{display:block; margin-top:10px; font-size:15px; color:#cfccc4; font-weight:500}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr; gap:36px}}

/* ====== CTA ====== */
.socta{background:var(--accent); color:var(--ink); text-align:center; overflow:hidden}
.socta .spiral{left:-120px; bottom:-140px; width:360px; height:360px; opacity:.16}
.socta .spiral path{stroke:#fff}
.socta .wrap{position:relative; z-index:2}
.socta h2{font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,52px); margin:0 0 16px; color:var(--ink)}
.socta h2 em{font-style:italic; color:#fff}
.socta p{color:rgba(18,17,15,.82); max-width:46ch; margin:0 auto 32px; font-size:18px; font-weight:500}
.socta .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ====== VER EN DETALLE (link dentro de una fila) ====== */
.fr-more{font-size:14px; font-weight:600; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; display:inline-block; margin-top:22px; transition:opacity .2s}
.fr-more:hover{opacity:.7}

/* ====== KEYPOINTS ====== */
.keypoints{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px}
.kp{border:1px solid var(--line); border-radius:16px; padding:28px 26px; background:#fff; transition:transform .5s var(--ease), box-shadow .5s, border-color .3s}
.kp:hover{transform:translateY(-5px); border-color:transparent; box-shadow:0 30px 56px -34px rgba(90,90,90,.4)}
.kp .kdot{width:38px; height:38px; border-radius:11px; background:var(--orange-100); color:var(--orange-700); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.kp .kdot svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.kp h4{font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 6px}
.kp p{font-size:14.5px; color:#3a3a37; margin:0}
@media(max-width:820px){.keypoints{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.keypoints{grid-template-columns:1fr}}

/* ====== ENLACES CRUZADOS ENTRE FUNCIONES ====== */
.xsec{background:var(--paper)}
.xgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.xcard{display:flex; align-items:center; gap:20px; padding:28px 30px; background:#fff; border:1px solid var(--line); border-radius:18px; transition:transform .4s var(--ease), box-shadow .4s, border-color .3s}
.xcard:hover{transform:translateY(-4px); border-color:transparent; box-shadow:0 30px 56px -34px rgba(0,0,0,.3)}
.xcard .xn{font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--accent); line-height:1; flex:0 0 auto}
.xcard .xt b{font-family:var(--font-display); font-weight:500; font-size:20px; display:block; line-height:1.1; color:var(--ink)}
.xcard .xt span{font-size:14px; color:#555}
.xcard .xarr{margin-left:auto; color:var(--accent); font-size:20px; transition:transform .3s var(--ease); flex:0 0 auto}
.xcard:hover .xarr{transform:translateX(4px)}
@media(max-width:700px){.xgrid{grid-template-columns:1fr}}