/* ============================================================
   ACTORES S.C.G — NUESTRA HISTORIA
   Se carga DESPUÉS de site.css y de sociedad.css.

   Esta hoja añade solo lo que no existía en el sistema: el riel vertical de
   la línea de tiempo (con su hueco), la banda de la campaña y el bloque del
   nombre. La apertura (`.intro`), las tarjetas de «Lo que consta»
   (`.keypoints`) y el cierre (`.socta`) vienen de `sociedad.css` sin tocar:
   son los mismos componentes de Recaudamos, Administramos y Distribuimos.

   ⚠ Si algún día esta página deja de cargar `sociedad.css`, tres secciones se
   quedan sin estilo y NO fallan: se pintan como texto suelto. Es el fallo
   silencioso que ya se coló una vez en Tarifas.
   ============================================================ */

/* ====== LOS CUARENTA Y DOS ======

   La imagen de apertura de la página. Es un gráfico y no una foto: el porqué
   está en la vista, y se resume en que este es el único tipo de imagen que no
   se puede desfasar del dato que ilustra —los puntos se dibujan desde el
   config—.

   El punto tampoco es una forma cualquiera: la trama de puntos es uno de los
   cuatro gestos de la marca. Aquí es la misma textura, subida de escala hasta
   que cada punto se puede contar. */
.hfundadores{background:var(--white)}
.hfundadores .wrap{display:grid; grid-template-columns:auto 1fr; gap:36px 68px; align-items:center}

/* Siete por fila y seis filas: 42 exactos, sin una fila coja. ⚠ La rejilla es
   FIJA a 7 columnas a propósito. Si el número de fundadores cambiara —el acta
   de constitución manda sobre la web de la que salió—, lo que hay que rehacer
   es esta cuenta, igual que la pared de monitores de la portada avisa de la
   suya. Con `auto-fit` los puntos se recolocarían solos y la última fila
   quedaría a medias sin que nadie se enterara. */
.hfd-arte{display:grid; grid-template-columns:repeat(7,20px); gap:20px; width:max-content}
.hfd-punto{width:20px; height:20px; border-radius:50%; background:var(--accent)}

/* Se encienden uno detrás de otro, en el orden en que firmaron. Es la única
   animación propia de la página y dura menos de un segundo en total: lo que
   se busca es que se lean como cuarenta y dos actos, no como una textura.
   `--i` lo pone la vista, y es el índice del punto. */
.hfd-arte.in .hfd-punto{animation:hfd-firma .5s var(--ease) both; animation-delay:calc(var(--i) * 18ms)}
@keyframes hfd-firma{from{opacity:0; transform:scale(.2)} to{opacity:1; transform:none}}

.hfd-cifra{display:flex; align-items:baseline; gap:14px; margin:0 0 18px; flex-wrap:wrap}
.hfd-cifra b{font-family:var(--font-display); font-weight:700; font-size:clamp(52px,7vw,92px); line-height:.9;
  color:var(--accent); letter-spacing:-.03em}
.hfd-cifra span{font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--g2)}

.hfd-frase{font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.8vw,34px);
  line-height:1.2; letter-spacing:-.01em; margin:0; max-width:30ch}
.hfd-frase em{font-style:italic; color:var(--accent)}

.hfd-pie{margin:22px 0 0; font-size:14px; line-height:1.6; color:var(--g2); max-width:44ch}
.hfd-pie i{font-style:normal; color:var(--ink); font-weight:600}

@media(max-width:820px){
  .hfundadores .wrap{grid-template-columns:1fr; gap:32px}
  .hfd-arte{grid-template-columns:repeat(7,14px); gap:14px}
  .hfd-punto{width:14px; height:14px}
}

/* Nadie tiene que ver cuarenta y dos cosas aparecer de una en una si ha pedido
   que la pantalla se esté quieta. */
@media(prefers-reduced-motion:reduce){
  .hfd-arte.in .hfd-punto{animation:none}
}

/* ====== LA LÍNEA DE TIEMPO ======

   Vertical y no horizontal como la de Ruta Verde (`.rvriel`). Allá son cuatro
   plazos de una palabra y caben en fila; aquí cada hito lleva un párrafo y su
   acto administrativo, y en cuatro columnas de 30ch no se lee ninguno.

   Vertical trae además lo que esta página necesita y la otra no: el riel se
   puede INTERRUMPIR. El tramo `.htespera` es un hueco de verdad en la línea, y
   es la mitad del argumento de la página. */
.htiempo{background:var(--paper)}

.htlinea{list-style:none; margin:0; padding:0; position:relative}

/* El riel. Va por detrás de los puntos, de arriba del primero a abajo del
   último: `top`/`bottom` a la mitad del punto (44/2 = 22) para que la línea
   nazca y muera en el centro de un punto y no en el aire. */
.htlinea::before{content:""; position:absolute; left:21px; top:22px; bottom:22px; width:2px;
  background:linear-gradient(180deg, var(--accent), rgba(255,81,21,.22)); border-radius:2px}

.hthito{position:relative; display:grid; grid-template-columns:44px 1fr; gap:0 26px; padding-bottom:44px}
.hthito:last-child{padding-bottom:0}

.hth-punto{width:44px; height:44px; border-radius:50%; background:#fff; border:2px solid var(--accent);
  color:var(--accent); display:flex; align-items:center; justify-content:center; position:relative; z-index:2}
.hth-punto svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.hth-cuerpo{padding-top:2px; max-width:62ch}

/* El año manda y la fecha lo acompaña. Van en la misma línea porque son el
   mismo dato partido en dos precisiones: «2011 · 28 de septiembre». */
.hth-anio{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(30px,3.6vw,42px); line-height:1;
  color:var(--accent); letter-spacing:-.01em}
.hth-anio i{font-style:normal; font-family:var(--font-ui); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--g2)}

.hthito h3{font-family:var(--font-display); font-weight:500; font-size:clamp(21px,2.4vw,27px); line-height:1.15;
  margin:0 0 10px; letter-spacing:-.01em}
.hthito p{margin:0; font-size:16.5px; line-height:1.65; color:#3a3a37}

/* El sello del acto administrativo. Es lo que separa esta página de un relato:
   cada hito que tiene papel lo enseña. */
.hth-acto{display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:7px 14px 7px 11px;
  border-radius:999px; background:var(--orange-50); border:1px solid rgba(255,81,21,.22);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--orange-700)}
.hth-acto svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ── LA IMAGEN O EL CLIP DE UN HITO ──────────────────────────────────────────
   Hoy ningún hito trae media —ver `config/historia.php`—, así que esto no
   pinta nada todavía. Está escrito porque el contrato existe y porque las once
   ilustraciones propias del aniversario están a una decisión de distancia.

   El duotono NO se aplica aquí, y es la única página del sitio donde una foto
   de contexto va a su color. `.duo` tiñe de naranja por multiplicación, y una
   ilustración documental teñida deja de ser un documento: pasa a ser una pieza
   de marca. Lo que sí se hereda es el redondeo y la sombra del sistema. */
.hth-media{margin:22px 0 0; max-width:520px}
.hth-media img, .hth-media video{display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid var(--line); box-shadow:0 16px 32px -24px rgba(0,0,0,.5); background:var(--paper)}
.hth-media figcaption{margin-top:10px; font-size:13px; line-height:1.55; color:var(--g2)}

/* ── EL HUECO ────────────────────────────────────────────────────────────────
   No es un hito: no lleva punto ni número, porque lo que cuenta es justamente
   que aquí no pasó nada. Se pinta tapando el riel con el color de la sección y
   dejando una línea de puntos en su lugar: la continuidad se rompe a la vista.

   Lleva `aria-hidden` en el marcado. Es una figura, no información: los 21
   años ya están dichos en el texto del hito de 2010, y un lector de pantalla
   que lea «21 años» suelto entre dos fechas no entiende nada. */
.htespera{position:relative; display:grid; grid-template-columns:44px 1fr; gap:0 26px; padding-bottom:44px}
.htespera::before{content:""; position:absolute; left:14px; top:-6px; bottom:38px; width:16px;
  background:var(--paper)}
.htespera::after{content:""; position:absolute; left:21px; top:-6px; bottom:38px; width:2px;
  background:repeating-linear-gradient(180deg, rgba(14,14,12,.22) 0 5px, transparent 5px 12px)}

.hte-anios{grid-column:2; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,30px);
  line-height:1; color:rgba(14,14,12,.28); letter-spacing:-.01em; margin-bottom:8px}
.htespera p{grid-column:2; margin:0; font-size:15px; line-height:1.6; color:var(--g2); max-width:52ch; font-style:italic}

@media(max-width:620px){
  .hthito, .htespera{grid-template-columns:36px 1fr; gap:0 18px}
  .htlinea::before{left:17px}
  .hth-punto{width:36px; height:36px}
  .hth-punto svg{width:17px; height:17px}
  .htespera::before{left:11px}
  .htespera::after{left:17px}
}

/* ====== LA CAMPAÑA ======

   El único momento oscuro de la página, y el único hito que no firmó nadie en
   un despacho: los cinco del riel son resoluciones y una ley; este lo sostuvo
   un gremio negándose a firmar. Metido entre dos resoluciones se leería como
   un trámite más, así que sale del riel y cambia de fondo. */
.hfirme{background:var(--ink); color:#fff; overflow:hidden}
.hfirme .spiral{right:-150px; top:-170px; width:460px; height:460px; opacity:.13}
.hfirme .spiral path{stroke:var(--accent)}
.hfirme .wrap{position:relative; z-index:2}

/* Dos columnas: el lema a la izquierda y el relato a la derecha.
   Se probó apilado —lema arriba, relato abajo y empujado a la derecha— y
   dejaba media banda de tinta vacía al lado de la cita; en dos columnas la
   cita sostiene el texto en vez de flotar sobre él. */
.hfirme .wrap{display:grid; grid-template-columns:minmax(300px,.9fr) 1fr; gap:24px 64px; align-items:start}

.hf-cab .lab{color:#8e8b84}
/* El lema es una cita, no un titular de sección: va en cursiva y en el naranja
   de la marca. Es lo único de la página que dijo alguien. */
.hf-cab h2{font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(38px,5vw,66px); line-height:.98; letter-spacing:-.02em; margin:0; color:var(--accent)}
.hf-sub{margin:22px 0 0; font-family:var(--font-display); font-weight:400; font-size:clamp(18px,2vw,22px);
  line-height:1.3; color:#e6e3db; max-width:22ch}

.hf-cuerpo{max-width:58ch}
.hf-cuerpo > p{margin:0; font-size:17.5px; line-height:1.7; color:#cfccc4}

/* Lo que dice la ley, apartado del relato a propósito: el párrafo de arriba es
   lo que pasó y esto es lo que sigue siendo cierto hoy. Quien lea solo esto se
   lleva el dato que importa. */
.hf-ley{display:flex; gap:16px; align-items:flex-start; margin:28px 0;
  padding:22px 24px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid var(--line-light)}
.hf-ico{width:38px; height:38px; border-radius:11px; flex:none; background:rgba(255,81,21,.16); color:var(--accent);
  display:flex; align-items:center; justify-content:center}
.hf-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.hf-ley p{margin:0; font-size:15.5px; line-height:1.65; color:#e6e3db}

.hf-cierre{font-family:var(--font-display); font-weight:500; font-size:clamp(19px,2.2vw,24px);
  line-height:1.3; color:#fff; margin:0}

@media(max-width:900px){
  .hfirme .wrap{grid-template-columns:1fr; gap:32px}
  .hf-sub{max-width:34ch}
}

/* La nota del vídeo. Misma caja que `.hf-ley` —son las dos cosas que hay que
   saber de la campaña más allá del relato— pero con el borde en naranja: esta
   no es la ley, es lo que hicieron con ella. */
.hf-video{display:flex; gap:16px; align-items:flex-start; margin:0 0 28px;
  padding:22px 24px; border-radius:16px; background:rgba(255,81,21,.09); border:1px solid rgba(255,81,21,.3)}
.hf-video p{margin:0; font-size:15.5px; line-height:1.65; color:#e6e3db}

/* ====== EL FRISO DEL ANIVERSARIO ======

   Once ilustraciones de la identidad ANTERIOR —rojo, morado y amarillo— en una
   página naranja y tinta. Que no desentonen depende entera y exclusivamente
   del marco: van juntas, sobre papel, con su rótulo y su pie de procedencia.
   Repartidas por la página serían once errores de marca; aquí son un
   documento citado, que es distinto.

   Y van PEGADAS, sin separación ni tarjetas: están dibujadas como un friso
   continuo y la línea negra cruza de una a la siguiente. Separarlas rompe el
   dibujo que las une. */
.hfriso{background:var(--paper); overflow:hidden}
.hfr-lead{max-width:64ch; margin:-16px 0 34px; font-size:17px; line-height:1.7; color:#3a3a37}

/* El carril se sale del carril del sitio a propósito: un friso continuo metido
   en 1220 px se lee como una tarjeta ancha, y lo que tiene que parecer es una
   cinta que sigue más allá de la pantalla. Arranca con la sangría del `.wrap`
   para que su borde izquierdo caiga donde cae el texto. */
.hfr-carril{overflow-x:auto; overflow-y:hidden; padding:0 0 14px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  cursor:grab; scrollbar-width:thin}
.hfr-carril:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.hfr-cinta{display:flex; width:max-content; padding-left:max(30px, calc((100vw - var(--maxw)) / 2 + 30px))}
/* `margin-right:-1px` cose las láminas: a ciertos anchos de ventana el
   redondeo del navegador deja una raya de fondo de un píxel entre dos, y en un
   dibujo continuo esa raya se ve como un corte. */
.hfr-cinta img{display:block; height:clamp(220px,26vw,320px); width:auto; margin-right:-1px;
  scroll-snap-align:center}
.hfr-cinta img:first-child{border-radius:16px 0 0 16px}
.hfr-cinta img:last-child{border-radius:0 16px 16px 0; margin-right:0;
  padding-right:0; box-shadow:none}

.hfr-pie{margin:18px 0 0; max-width:70ch; font-size:13.5px; line-height:1.6; color:var(--g2)}
/* La pista de que esto se arrastra. Se esconde donde no hay ratón que
   arrastrar: en un móvil se descubre solo con el dedo. */
.hfr-ayuda{display:inline-block; margin-left:8px; font-weight:600; color:var(--orange-700); white-space:nowrap}
@media(hover:none){.hfr-ayuda{display:none}}

/* ====== LAS CIFRAS DE LOS DIEZ AÑOS ======
   `.stats` viene de `sociedad.css` —la franja de tinta con tres cifras
   grandes— y aquí solo se le añade lo que allí no existe: la nota bajo cada
   cifra y la fecha de corte. Sin esa fecha, tres números de 2020 en una página
   de 2026 se leen como los de hoy. */
.stats .stat em{display:block; margin-top:12px; font-style:normal; font-size:14px; line-height:1.6;
  color:#a9a69f; max-width:30ch; margin-inline:auto}
.hdec-corte{margin:44px auto 0; max-width:64ch; text-align:center; font-size:13.5px; line-height:1.6;
  color:#8e8b84}

/* ====== EL NOMBRE ====== */
.hnombre{background:var(--white)}

/* El nombre completo, grande y una sola vez. La página entera argumenta que es
   largo a propósito, así que enseñarlo pequeño sería contradecirse. */
.hn-completo{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,4.4vw,54px);
  line-height:1.05; letter-spacing:-.02em; margin:0 0 44px; max-width:16ch}

.hn-partes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.hn-parte{border-top:2px solid var(--accent); padding:22px 0 0}
.hn-parte b{display:block; font-family:var(--font-display); font-weight:500; font-size:21px; margin-bottom:8px}
.hn-parte p{margin:0; font-size:15px; line-height:1.65; color:#3a3a37}

.hn-pie{display:grid; grid-template-columns:1fr 1.4fr; gap:16px; margin-top:44px; align-items:stretch}

.hn-sigla{background:var(--ink); color:#fff; border-radius:20px; padding:30px 28px;
  display:flex; flex-direction:column; justify-content:center}
.hn-marca{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.2vw,36px);
  letter-spacing:.01em; color:var(--accent); margin-bottom:14px; line-height:1}
.hn-sigla p{margin:0; font-size:14.5px; line-height:1.65; color:#a9a69f}

/* El aviso del sindicato. Va en naranja claro y no en gris: es la confusión
   más común que tiene la sociedad, y en una tarjeta neutra se lee como una
   nota al pie. */
.hn-aviso{background:var(--orange-50); border:1px solid rgba(255,81,21,.2); border-radius:20px; padding:30px 28px}
.hn-aviso b{display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(21px,2.6vw,28px);
  margin-bottom:10px; color:var(--orange-700); line-height:1.1}
.hn-aviso p{margin:0; font-size:15.5px; line-height:1.65; color:#3a3a37}

@media(max-width:900px){
  .hn-partes{grid-template-columns:1fr}
  .hn-parte{padding-top:18px}
  .hn-pie{grid-template-columns:1fr}
}

/* ====== LO QUE CONSTA ======
   Las tarjetas son `.keypoints` de `sociedad.css` sin tocar. Lo único propio
   es el fondo —papel, para separarla del nombre que va en blanco— y que aquí
   son cuatro y no seis: en tres columnas la última fila quedaba con una sola
   tarjeta y parecía que faltaba algo. */
.hconsta{background:var(--paper)}
.hconsta .keypoints{grid-template-columns:repeat(4,1fr)}
.hconsta .kp p a{color:var(--orange-700); border-bottom:1px solid rgba(255,81,21,.4)}
@media(max-width:1020px){.hconsta .keypoints{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hconsta .keypoints{grid-template-columns:1fr}}