/* ============================================================
   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(14,14,12,.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) ====== */
/* Cuando sigue a la frase de marca, en su propia línea. Los dos son en línea
   —una `inline-flex` y el otro `inline-block`— así que sin esto el enlace se
   pega al final de la frase y se lee como parte de ella: «Si salió al aire, no
   debe quedarse en el aire. Ver las tarifas del año →». */
.fr-tag + .fr-more{display:block; width:fit-content; margin-top:18px}
.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(255,81,21,.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}}

/* ====== TARJETA DE UN PROGRAMA DEL PGA ======
   La caja es la misma .kp de aquí arriba; esto solo añade lo que trae un
   beneficio de verdad y no traía una tarjeta escrita a mano: de qué línea del
   plan es y sus dos cifras. Vive en esta hoja y no en site.css porque el
   catálogo del PGA es de esta página, no del sistema entero.

   La tarjeta pasa a columna para que las cifras queden abajo y alineadas entre
   sí, aunque el resumen de cada beneficio tenga distinto largo. */
.kp{display:flex; flex-direction:column}
.kp-linea{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}
.kp-datos{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:16px}
.kp-datos span{font-size:12px; font-weight:600; color:var(--g2); background:var(--paper); border:1px solid var(--line); border-radius:40px; padding:4px 11px}
.kp-datos b{color:var(--ink); font-weight:700}

/* Cuando la parrilla lleva pastillas encima, el margen ya lo puso .filters. */
.filters + .keypoints{margin-top:0}

/* La letra pequeña de la sección: lo que hay que leer antes de la lista. */
.pga-nota{max-width:62ch; margin:0 0 34px; font-size:15px; line-height:1.65; color:var(--g2)}

/* ====== ENLACES CRUZADOS ENTRE FUNCIONES ====== */
.xsec{background:var(--paper)}
.xgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
/* Dos columnas porque en el ciclo son dos tarjetas: la siguiente y la que
   queda. Cuando el bloque va suelto —al pie de Protegemos— son las tres, y a
   dos columnas la tercera se quedaba sola a media anchura, con pinta de
   sobrante. */
.xgrid.tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.xgrid.tres{grid-template-columns:1fr 1fr}}
.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)}
/* Una tarjeta de paso sin `href`, para cuando la función de al lado todavía no
   tenga página. Hoy las tres la tienen y esto no lo usa nadie; se queda porque
   es la regla de la casa —un `<a>` sin destino no salta ni promete— y porque
   la cuarta función, si llega, nacerá así. Ver `.sin-destino` en site.css. */
.xcard.sin-destino:hover{transform:none; border-color:var(--line); box-shadow:none}

/* ── La siguiente del ciclo ──────────────────────────────────────────────────
   El bloque de paso no es un «te puede interesar»: las tres funciones ocurren
   en un orden, y la que sigue no está al mismo nivel que la otra. Va con el
   borde de la marca y con su sello encima, de modo que se vea cuál es el
   camino antes de leer los dos nombres.

   El sello dice «Sigue», o «Vuelve a empezar» en la última, donde lo siguiente
   es la primera de todas (`config/hacemos.php`). */
.xcard.siguiente{border-color:var(--accent); box-shadow:0 24px 48px -34px rgba(255,81,21,.5)}
.xcard.siguiente:hover{box-shadow:0 34px 60px -32px rgba(255,81,21,.6)}
.xcard .xt .xpaso{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px}
@media(max-width:700px){.xgrid, .xgrid.tres{grid-template-columns:1fr}}