/* ============================================================
   RUTAS RRSG — hoja de estilo de la seccion (05/08/2026).

   Antes vivia en un <style> dentro de cada una de las 24 paginas
   (1 hub + 7 fichas, por 3 sitios), asi que arreglar algo obligaba
   a tocar 24 ficheros y cualquier olvido dejaba una pagina
   distinta de las demas sin que nadie lo notara.

   Hereda el lenguaje del Modo Examen y del blog, a proposito:
     - la banda oscura del hero (160deg, --warm -> --warm-2);
     - las chips de cifras;
     - la tarjeta blanca con borde, radio 16 y elevacion al pasar;
     - UNA sola medida para todo lo que se lee.

   Y anade lo propio de esta seccion: **cada ruta tiene su color**,
   el MISMO que ya usa en el catalogo del Modo Examen. Que la Ruta
   CISO sea azul aqui y alli es lo que hace que el sitio se lea como
   uno solo y no como cinco secciones cosidas.
   ============================================================ */

:root{
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --sh-sm:0 2px 8px -2px rgba(11,16,34,.08);
  --sh-md:0 8px 24px -8px rgba(11,16,34,.14);
  --sh-lg:0 20px 40px -16px rgba(11,16,34,.22);
  /* Medida unica de esta seccion. En rem, NUNCA en `ch`: `ch` se resuelve contra el
     tamano de letra de cada elemento, asi que la misma variable daria anchos distintos
     al titular y al cuerpo y los bordes dejarian de cuadrar. */
  --col:46rem;
  /* Color por defecto; cada ruta lo pisa con su clase `r-*` en el <body>. */
  --acc:#3f7fe0; --acc-d:#3a74cd;
}

/* Los MISMOS colores del catalogo del Modo Examen. Si aqui divergen, el sitio deja de
   leerse como uno solo: el usuario ve la Ruta DPO morada en una pagina y azul en otra. */
/* Cada ruta trae DOS tonos, y hay un motivo medido:
     --acc    el color vivo, para barras y adornos, donde no hay texto encima;
     --acc-d  el mismo color oscurecido hacia el azul noche de la marca, para cuando
              lleva TEXTO BLANCO encima.
   Con el tono vivo, el blanco no se lee: el dorado del auditor da **2,24:1** sobre
   blanco y el verde de IA 3,24, cuando el minimo exigible es 4,5:1. Los oscurecidos
   estan calculados uno a uno hasta pasar de 4,6:1, no elegidos a ojo. */
body.r-ciso{--acc:#3f7fe0;--acc-d:#3a74cd}
body.r-riesgos{--acc:#2f9e8f;--acc-d:#288279}
body.r-auditor{--acc:#d8a53c;--acc-d:#8e6f33}
body.r-dpo{--acc:#8b6fd4;--acc-d:#7e66c2}
body.r-dora{--acc:#2f7fd8;--acc-d:#2c76c9}
body.r-ia{--acc:#43a06b;--acc-d:#38835c}
body.r-compliance{--acc:#c2762f;--acc-d:#a5662d}

/* ============================================================
   1. HERO (hub y ficha comparten banda)
   ============================================================ */
/* Era `linear-gradient(180deg,#f6f8fe,#fff)`: un blanco sobre blanco que dejaba la
   seccion sin identidad ninguna, justo el defecto que tenia el blog antes del 05/08. */
.hub-hero,.rt-hero{
  background:linear-gradient(160deg,var(--warm) 0%,var(--warm-2) 100%);
  color:#fff;padding:56px 0 60px;position:relative;overflow:hidden;isolation:isolate}
.hub-hero > *,.rt-hero > *{position:relative;z-index:1}
/* Un halo del color de la ruta: identifica la pagina sin gritar. */
.rt-hero::before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--acc),transparent 62%);
  opacity:.22;pointer-events:none;z-index:0}
.hub-hero .eyebrow,.rt-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:999px;
  padding:6px 14px;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#dfe9ff;margin:0 0 16px}
.rt-hero .eyebrow .dot,.hub-hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;
  background:var(--acc);display:inline-block}
.hub-hero h1,.rt-hero h1{font-size:clamp(1.7rem,3.4vw,2.35rem);line-height:1.16;
  margin:0 0 16px;color:#fff;letter-spacing:-.015em;max-width:22em}
.hub-hero .sub,.rt-hero .sub{color:#c9d8f5;font-size:1.05rem;line-height:1.62;
  max-width:44rem;margin:0}
.rt-hero .sub{margin:0 0 22px}

/* Chips: la misma pieza que anuncia las cifras en el Modo Examen y en el blog. */
.rt-chips,.hub-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.rt-chips span,.rt-chips li,.hub-chips li{background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;
  font-size:.83rem;font-weight:600;color:#dfe9ff}
.rt-chips{margin:0 0 24px}

/* Botones del hero, sobre fondo oscuro */
.rt-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.rt-hero .btn{background:#fff;color:var(--warm-2);border-color:#fff;font-weight:700}
.rt-hero .btn:hover{background:#eef2fb}
.rt-hero .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.rt-hero .btn.ghost:hover{background:rgba(255,255,255,.10)}

@media(max-width:640px){
  .hub-hero,.rt-hero{padding:40px 0 44px}
  .rt-hero .btn{width:100%;justify-content:center}
}

/* ============================================================
   2. SECCIONES
   ============================================================ */
.hub-sec,.rt-sec{padding:46px 0 0}
.hub-sec:last-of-type,.rt-sec:last-of-type{padding-bottom:8px}
.hub-sec h2,.rt-sec h2{font-size:1.6rem;line-height:1.25;margin:0 0 6px;letter-spacing:-.015em}
.hub-sec .lead,.rt-sec .lead{color:var(--muted);margin:0 0 22px;font-size:1rem;max-width:var(--col)}
/* El titular de seccion se ancla con una barra del color de la ruta: da ritmo a la pagina
   y repite el codigo de color sin ocupar sitio. */
.rt-sec h2::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
  background:var(--acc);margin:0 0 14px}

/* ============================================================
   3. HUB: las 7 rutas
   ============================================================ */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.hub-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px -16px rgba(11,16,34,.3);
  border-color:#cfdcff}

/* Portada compuesta, el mismo lenguaje que el catalogo del Modo Examen y el blog:
   degradado azul noche, escudo dibujado (no una imagen) y barra inferior del color de
   la ruta. Nitida a cualquier tamano, se traduce sola y pesa cero. */
.hub-card .cap{position:relative;padding:20px 22px;display:flex;align-items:center;gap:14px;
  color:#fff;background:linear-gradient(150deg,#22397e 0%,var(--warm-2) 58%,#0e1a35 100%);
  min-height:104px}
.hub-card .cap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--acc)}
.hub-card .cap .halo{position:absolute;right:-30px;top:-46px;width:170px;height:170px;
  border:1px solid rgba(255,255,255,.10);border-radius:50%}
.hub-card .cap svg{flex:none;width:42px;height:42px;position:relative;z-index:1}
.hub-card .cap .tit{position:relative;z-index:1;font-size:1.16rem;font-weight:800;
  letter-spacing:-.015em;line-height:1.15}
.hub-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.hub-card p{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0 0 14px;flex:1}
/* Pie con linea y `margin-top:auto`: asi TODOS los pies de una fila quedan a la misma
   altura aunque los resumenes midan distinto. Es lo que se hizo en las tarjetas del blog. */
.hub-card .foot{display:flex;justify-content:space-between;align-items:center;
  font-size:.9rem;border-top:1px solid var(--line);padding-top:12px;margin-top:auto;
  color:var(--muted)}
.hub-card .foot b{color:var(--warm-2);font-weight:700}
.hub-card .mas{margin-top:10px;font-weight:600;color:var(--accent);font-size:.92rem}
.hub-card:hover .mas{text-decoration:underline}
/* Color por tarjeta en el hub (el <body> del hub no tiene ruta) */
.hub-card.c-ciso{--acc:#3f7fe0;--acc-d:#3a74cd}
.hub-card.c-riesgos{--acc:#2f9e8f;--acc-d:#288279}
.hub-card.c-auditor{--acc:#d8a53c;--acc-d:#8e6f33}
.hub-card.c-dpo{--acc:#8b6fd4;--acc-d:#7e66c2}
.hub-card.c-dora{--acc:#2f7fd8;--acc-d:#2c76c9}
.hub-card.c-ia{--acc:#43a06b;--acc-d:#38835c}
.hub-card.c-compliance{--acc:#c2762f;--acc-d:#a5662d}

/* "Como funciona": iba a 840 px mientras el resto de la pagina iba a 1120, y ese escalon
   de 280 px se veia. Son TRES pasos, asi que van en tres columnas y cuadran exactamente
   con la rejilla de rutas de arriba: mismo borde izquierdo y mismo borde derecho. */
.hub-how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.hub-how{grid-template-columns:1fr}}
.hub-how div{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;line-height:1.6;font-size:.95rem;color:var(--muted);
  border-top:3px solid var(--acc)}
.hub-how b{color:var(--fg);display:block;margin-bottom:6px;font-size:1rem}
/* Un color por paso, para que se lean como una secuencia y no como tres cajas iguales. */
.hub-how div:nth-child(1){--acc:#3f7fe0}
.hub-how div:nth-child(2){--acc:#2f9e8f}
.hub-how div:nth-child(3){--acc:#d8a53c}

/* ============================================================
   4. FICHA DE RUTA
   ============================================================ */
/* Una sola medida para TODO lo que se lee. Antes convivian 760, 820 y 640 px en la misma
   pagina, con el titular a 820: cuatro bordes distintos donde deberia haber uno. */
.rt-who,.rt-how,.rt-total,.rt-faq{max-width:var(--col)}

.rt-who{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rt-who li{padding:14px 18px 14px 46px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);position:relative;line-height:1.55}
.rt-who li::before{content:"";position:absolute;left:18px;top:21px;width:11px;height:6px;
  border-left:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);
  transform:rotate(-45deg)}

/* Las etapas, como una linea de tiempo: el numero es el hilo conductor de una ruta. */
.rt-steps{display:grid;gap:0;position:relative}
.rt-step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;display:grid;grid-template-columns:56px 1fr;gap:18px;
  box-shadow:var(--sh-sm);position:relative;margin-bottom:18px;
  transition:box-shadow .18s ease,border-color .18s ease}
.rt-step:last-child{margin-bottom:0}
.rt-step:hover{box-shadow:var(--sh-md);border-color:#cfdcff}
/* El hilo que une una etapa con la siguiente */
.rt-step::after{content:"";position:absolute;left:52px;top:100%;width:2px;height:18px;
  background:linear-gradient(180deg,var(--acc),rgba(0,0,0,0))}
.rt-step:last-child::after{display:none}
/* 🛑 EL NUMERO ERA ILEGIBLE. Iba `background:var(--warm)` (azul oscuro) con
   `color:#3d1606` (marron oscuro), sobra de una paleta anterior: contraste medido
   **1,54:1** cuando el minimo legible es 4,5:1 (3:1 si es grande y en negrita). O sea
   que el numero de etapa, que es lo que ORDENA una ruta, no se leia en las 21 fichas de
   los 3 sitios. Ahora va el color de la ruta con texto blanco. */
.rt-step .num{width:46px;height:46px;border-radius:var(--r-md);background:var(--acc-d);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:1.2rem;box-shadow:0 6px 14px -6px var(--acc)}
.rt-step h3{margin:0 0 5px;font-size:1.12rem;line-height:1.3;letter-spacing:-.01em}
.rt-step .meta{color:var(--muted);font-size:.86rem;margin:0 0 10px}
.rt-step p{margin:0 0 12px;line-height:1.6}
.rt-step .go{font-weight:600;font-size:.92rem;color:var(--acc-d);text-decoration:none}
.rt-step .go:hover{text-decoration:underline}
.rt-badge{display:inline-block;background:#eef8f1;border:1px solid #cdebd8;color:#116632;
  font-size:.76rem;font-weight:700;border-radius:999px;padding:3px 11px;margin-left:8px;
  vertical-align:middle;white-space:nowrap}

.rt-how{display:grid;gap:12px}
.rt-how div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 20px}
.rt-how b{color:var(--warm-2)}

.rt-total{background:var(--warm-soft);border:1px solid var(--warm-line);
  border-radius:var(--r-lg);padding:24px 28px}
.rt-total .amt{font-size:1.9rem;font-weight:800;color:var(--warm-2);letter-spacing:-.02em;
  line-height:1.1}
.rt-total p{margin:8px 0 0;color:var(--warm-2);font-size:.95rem}

.rt-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 20px;margin-bottom:10px;transition:border-color .15s}
.rt-faq details[open]{border-color:var(--warm-line)}
.rt-faq summary{font-weight:600;cursor:pointer;list-style:none;position:relative;
  padding-right:26px}
.rt-faq summary::-webkit-details-marker{display:none}
.rt-faq summary::after{content:"";position:absolute;right:4px;top:6px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease}
.rt-faq details[open] summary::after{transform:rotate(-135deg);top:10px}
.rt-faq .body{padding-top:12px;color:var(--muted);line-height:1.65}

/* ============================================================
   5. CIERRE (hub y ficha)
   ============================================================ */
.hub-final,.rt-final{background:linear-gradient(160deg,var(--warm) 0%,var(--warm-2) 100%);
  color:#fff;border-radius:var(--r-xl);padding:40px 34px;text-align:center;margin:46px 0 0;
  position:relative;overflow:hidden}
.hub-final::after,.rt-final::after{content:"";position:absolute;right:-70px;top:-70px;
  width:240px;height:240px;border:1px solid rgba(255,255,255,.10);border-radius:50%;
  pointer-events:none}
.hub-final > *,.rt-final > *{position:relative;z-index:1}
.hub-final h2,.rt-final h2{color:#fff;font-size:1.5rem;margin:0 0 10px;letter-spacing:-.015em}
.hub-final h2::before,.rt-final h2::before{display:none}
.hub-final p,.rt-final p{color:#c9d8f5;max-width:36rem;margin:0 auto 22px;line-height:1.6}
.hub-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hub-final .btn,.rt-final .btn{background:#fff;color:var(--warm-2);border-color:#fff;
  font-weight:700}
.hub-final .btn:hover,.rt-final .btn:hover{background:#eef2fb}
.hub-final .btn.ghost,.rt-final .btn.ghost{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45)}
.hub-final .btn.ghost:hover,.rt-final .btn.ghost:hover{background:rgba(255,255,255,.10)}

main{padding-bottom:56px}

@media(max-width:640px){
  .rt-step{grid-template-columns:1fr;padding:18px 20px}
  .rt-step .num{width:40px;height:40px;font-size:1.05rem}
  .rt-step::after{left:20px}
  .hub-final,.rt-final{padding:30px 22px}
  .hub-sec h2,.rt-sec h2{font-size:1.35rem}
  .rt-total{padding:20px}
}
