/* ============================================================
   ACTORES S.C.G — RUTA VERDE
   Protocolo de prevención y atención de violencias y
   discriminación. Se carga junto a site.css.

   La página se llama Ruta Verde porque así la nombra el
   protocolo, pero NO es verde: usa el naranja de la marca como
   todo el sitio. Se probó en verde —el de la paleta secundaria—
   y el resultado fue una página que se leía como de otra
   entidad, y encima plana: el color solo no da vida.
   Lo que la da es lo de aquí abajo: foto con duotono, iconos,
   la línea de tiempo y los dos diagramas.

   Nota de tono: esta es la única página del sitio que alguien
   puede estar leyendo el peor día de su vida. Hay imagen y hay
   diagrama, pero el movimiento es mínimo y el siguiente paso
   está siempre a la vista.
   ============================================================ */

/* ====== HERO ======
   Partido como el de la portada: el texto a la izquierda y la foto a la
   derecha con una tarjeta encima. La tarjeta lleva el correo, que es lo único
   accionable de la página: quien llega aquí con algo que contar lo tiene
   delante sin bajar ni una vez.

   Mide lo mismo que los demás heros del sitio: --alto-hero, el token de
   site.css. Aquí quien manda el alto no es el titular sino la foto, que es un
   4/5 estirado por su columna; por eso se le pone techo abajo (.rvhero-art) en
   vez de dejarla crecer. */
/* Las dos guardas son tokens porque no las usa solo el `padding`: el techo de
   la foto (.rvhero-art, abajo) se calcula restándolas del alto del hero, y
   desde que las tres cifras encogen con la ventana —el token trae techo de una
   pantalla— tenían que dejar de estar escritas dos veces. */
.rvhero{--rv-arriba:clamp(108px, 16svh, 150px); --rv-abajo:clamp(48px, 9svh, 84px);
  background:var(--orange); color:var(--ink); padding:var(--rv-arriba) 0 var(--rv-abajo);
  position:relative; overflow:hidden;
  min-height:var(--alto-hero); display:flex; align-items:center}
.rvhero > .wrap{width:100%}
.rvhero .spiral{left:-160px; bottom:-200px; width:560px; height:560px; opacity:.16}
.rvhero .spiral path{stroke:#fff}
.rvhero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,64px); align-items:center; position:relative; z-index:2}
.rvhero h1{font-family:var(--font-display); font-weight:600; font-size:min(clamp(44px,6.4vw,92px), 12svh); line-height:.96; letter-spacing:-.02em; margin:0; color:var(--ink)}
.rvhero h1 em{font-style:italic; color:#fff; font-weight:500}
.rvhero .psub{margin-top:22px; max-width:46ch; font-size:18px; font-weight:500; color:rgba(14,14,12,.84)}
.rvhero .lab{color:var(--ink)}
.rvhero .lab::before{background:var(--ink)}
.rvhero .crumb{color:rgba(14,14,12,.72)}
.rvhero-cta{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}

/* La foto y su tarjeta. Mismo duotono que el resto del sitio, así que el
   naranja del hero se cuela en la imagen y no queda pegada encima. */
/* El techo de la foto es lo que deja el hero a la altura del resto del sitio:
   el alto común menos las guardas del propio hero, por 0.8 que es el 4/5 de la
   imagen. Sin esto la foto se estira con la columna y arrastra el hero 70px
   por encima de las demás páginas. Va pegada a la derecha del carril. */
.rvhero-art{position:relative; width:calc((var(--alto-hero) - var(--rv-arriba) - var(--rv-abajo)) * .8); max-width:100%; margin-left:auto}
.rvhero-foto{border-radius:22px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.rvhero-art .spiral{right:-34px; top:-34px; left:auto; bottom:auto; width:140px; height:140px; opacity:.9}
.rvhero-art .spiral path{stroke:var(--ink)}
.rvhero-tarjeta{position:absolute; left:-20px; bottom:26px; z-index:3; background:var(--ink); color:#fff;
  border-radius:18px; padding:20px 24px; max-width:300px; box-shadow:0 24px 50px -18px rgba(0,0,0,.6)}
.rvhero-tarjeta small{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#cfccc4; font-weight:600; margin-bottom:10px}
.rvhero-tarjeta small::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.rvhero-tarjeta a{display:block; font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.2;
  color:#fff; word-break:break-all; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:4px}
.rvhero-tarjeta a:hover{color:var(--accent); border-bottom-color:var(--accent)}
@media(max-width:900px){
  .rvhero{--rv-arriba:clamp(104px, 14svh, 128px); --rv-abajo:clamp(44px, 8svh, 72px)}
  .rvhero-grid{grid-template-columns:1fr; gap:24px}
  /* Cuando el hero se parte en dos filas, la foto se retira: debajo del texto
     medía 525px ella sola y dejaba el hero en 1.220px —una pantalla y media de
     teléfono antes de la primera línea de contenido, y el doble que cualquier
     otra página del sitio.

     Lo que no se va es el correo, que es lo único accionable de la página.
     Deja de estar encima de la imagen —ya no hay imagen sobre la que estar— y
     pasa a bloque propio debajo de los botones, que es donde cae la vista
     después de leerlos. */
  .rvhero-foto, .rvhero-art .spiral{display:none}
  .rvhero-art{width:auto; max-width:none; margin-left:0}
  .rvhero-tarjeta{position:static; max-width:none; padding:16px 18px}
}
/* Por debajo de 360px el correo se parte en dos líneas y la tarjeta crece 23px
   —que, siendo Ruta Verde la página que fija el alto de todas, son 23px de más
   en todo el sitio—. Un punto menos de letra y cabe entero. */
@media(max-width:360px){.rvhero-tarjeta a{font-size:17px}}
@media(max-width:520px){.rvhero-tarjeta{left:0; right:0; max-width:none}}

/* ====== TRES FORMAS DE ACTIVARLA ====== */
.rvcanales{background:var(--ink); color:#fff}
.rvcanales .lab{color:#8e8b84}
.rvcanales h2.sec{color:#fff}
.rvcanales-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rvcanal{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:20px; padding:30px 28px}
.rvcanal .ic{width:46px; height:46px; border-radius:14px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px}
.rvcanal .ic svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rvcanal b{display:block; font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.2; color:#fff; margin-bottom:8px}
.rvcanal b a{border-bottom:1px solid rgba(255,255,255,.4); word-break:break-all}
.rvcanal b a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.rvcanal p{margin:0; font-size:14.5px; line-height:1.6; color:#a9a69f}
@media(max-width:880px){.rvcanales-grid{grid-template-columns:1fr}}

/* ====== ALCANCE ====== */
.rvalcance{background:var(--white)}
.rvquien{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px}
.rvquien div{border:1px solid var(--line); border-radius:18px; padding:28px 26px; background:#fff;
  transition:transform .45s var(--ease), box-shadow .45s, border-color .3s}
.rvquien div:hover{transform:translateY(-5px); border-color:transparent; box-shadow:0 30px 56px -34px rgba(255,81,21,.45)}
.rvquien .ic{width:42px; height:42px; border-radius:12px; background:var(--orange-100); color:var(--orange-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.rvquien .ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.rvquien b{display:block; font-family:var(--font-display); font-weight:500; font-size:19px; margin-bottom:8px}
.rvquien span{font-size:14.5px; color:#3a3a37; line-height:1.55}
@media(max-width:900px){.rvquien{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rvquien{grid-template-columns:1fr}}

.rvlugares{margin-top:34px; padding:26px 30px; background:var(--orange-50); border:1px solid var(--orange-100); border-radius:18px}
.rvlugares p{margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-700)}
.rvlugares ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 28px}
.rvlugares li{position:relative; padding-left:22px; font-size:15.5px; color:#2c2c29}
.rvlugares li::before{content:"›"; position:absolute; left:6px; color:var(--orange-700); font-weight:700}

/* ====== TIPOS DE VIOLENCIA ====== */
.rvtipos{background:var(--paper)}
.rvtgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:16px; margin-top:44px}
.rvtipo{background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px}
.rvtipo .ic{width:40px; height:40px; border-radius:12px; background:var(--orange-100); color:var(--orange-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.rvtipo .ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.rvtipo h4{font-family:var(--font-display); font-weight:500; font-size:20px; margin:0 0 10px}
.rvtipo p{margin:0; font-size:14.5px; line-height:1.6; color:#3a3a37}

/* ====== LAS REGLAS DE LA CASA (las 28 conductas) ======
   Nativo <details>/<summary>: se abre sin JavaScript, responde al
   teclado y el buscador del navegador lo encuentra igual. En una
   página que puede estar leyéndose desde un teléfono prestado, no
   depender de un script es parte del diseño. */
.rvreglas{background:var(--white)}
.rvnota{max-width:66ch; font-size:15.5px; line-height:1.7; color:var(--g2); margin:-24px 0 34px}
.rvacc{border-top:1px solid var(--line)}
.rvacc details{border-bottom:1px solid var(--line)}
.rvacc summary{display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  padding:22px 0; font-family:var(--font-display); font-weight:500; font-size:clamp(19px,2.2vw,24px); list-style:none}
.rvacc summary::-webkit-details-marker{display:none}
.rvacc summary:hover{color:var(--orange-700)}
.rvacc summary .pm{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--orange-100); color:var(--orange-700);
  display:flex; align-items:center; justify-content:center; font-size:21px; line-height:1; transition:transform .3s var(--ease)}
.rvacc details[open] summary .pm{transform:rotate(45deg)}
.rvacc summary .cuenta{margin-left:auto; margin-right:4px; font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--g2)}
.rvacc ul{list-style:none; padding:0 0 26px; margin:0; columns:2; column-gap:44px}
.rvacc li{break-inside:avoid; position:relative; padding-left:26px; margin-bottom:14px; font-size:15px; line-height:1.6; color:#333}
.rvacc li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
@media(max-width:820px){.rvacc ul{columns:1}}

/* ====== QUIÉN PUEDE ACTIVARLA ======
   Sobre foto con duotono: es la sección que más tiene que entrar por el ojo,
   porque contradice lo que la gente da por supuesto —que denunciar es cosa de
   quien lo sufrió—. Las tres tarjetas van en blanco encima. */
.rvactiva{position:relative; color:#fff; overflow:hidden; background:#171715}
.rvactiva-fondo{position:absolute; inset:0; background-size:cover; background-position:center}
.rvactiva-fondo::before{content:""; position:absolute; inset:0; background:var(--accent); mix-blend-mode:multiply; opacity:.55}
.rvactiva-fondo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,14,12,.72), rgba(14,14,12,.5))}
.rvactiva .wrap{position:relative; z-index:2}
.rvactiva .lab{color:rgba(255,255,255,.78)}
.rvactiva .lab::before{background:#fff}
.rvactiva h2.sec{color:#fff}
.rvactiva h2.sec em{color:var(--accent)}
.rvagrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rvagrid div{background:rgba(255,255,255,.95); color:var(--ink); border-radius:20px; padding:30px 28px; backdrop-filter:blur(4px)}
.rvagrid .ic{width:44px; height:44px; border-radius:13px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.rvagrid .ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rvagrid b{display:block; font-family:var(--font-display); font-weight:500; font-size:21px; margin-bottom:8px}
.rvagrid span{font-size:14.5px; line-height:1.6; color:#3a3a37}
@media(max-width:820px){.rvagrid{grid-template-columns:1fr}}

/* ====== LÍNEA DE TIEMPO ======
   Los tres plazos del protocolo puestos en un solo riel. Sueltos —uno en la
   etapa 2, otro en medidas, otro en la etapa 3— no se ve lo único que de
   verdad tranquiliza: que esto tiene principio y fin. */
.rvtiempo{background:var(--ink); color:#fff; overflow:hidden}
.rvtiempo .spiral{right:-140px; top:-150px; width:440px; height:440px; opacity:.12}
.rvtiempo .spiral path{stroke:var(--accent)}
.rvtiempo .wrap{position:relative; z-index:2}
.rvtiempo .lab{color:#8e8b84}
.rvtiempo h2.sec{color:#fff}
.rvriel{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:8px}
/* El riel: una línea continua por detrás de los cuatro hitos. Va de centro a
   centro de los puntos extremos y no de borde a borde: el punto mide 46 y la
   columna lleva 16 de padding, así que su eje está a 39px del arranque de su
   columna, y la última columna empieza al 75%. */
.rvriel::before{content:""; position:absolute; left:39px; right:calc(25% - 39px); top:23px; height:2px;
  background:linear-gradient(90deg, var(--accent), rgba(255,81,21,.25))}
.rvhito{position:relative; padding:0 16px}
.rvhito .punto{width:46px; height:46px; border-radius:50%; background:var(--ink); border:2px solid var(--accent);
  color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:24px; position:relative; z-index:2}
.rvhito .punto svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rvhito .cifra{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.8vw,34px);
  line-height:1; color:var(--accent); margin-bottom:8px}
.rvhito b{display:block; font-family:var(--font-display); font-weight:500; font-size:19px; color:#fff; margin-bottom:8px}
.rvhito p{margin:0; font-size:14px; line-height:1.6; color:#a9a69f; max-width:30ch}
@media(max-width:900px){
  .rvriel{grid-template-columns:1fr 1fr; gap:36px 0}
  .rvriel::before{display:none}
}
@media(max-width:560px){.rvriel{grid-template-columns:1fr} .rvhito{padding:0}}

/* ====== LA RUTA, POR QUIÉN ERES ====== */
.rvruta{background:var(--paper)}

/* El resumen visual de las tres etapas, antes de la letra pequeña. Es el
   diagrama del protocolo contado en tres nodos. */
.rvpasos-mapa{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 40px}
.rvpaso-nodo{background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 24px; position:relative}
.rvpaso-nodo .n{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:16px}
.rvpaso-nodo h4{font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 6px}
.rvpaso-nodo p{font-size:14px; color:#555; margin:0}
.rvpaso-nodo: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){
  .rvpasos-mapa{grid-template-columns:1fr}
  .rvpaso-nodo:not(:last-child)::after{content:"↓"; right:auto; left:50%; top:auto; bottom:-18px; transform:translateX(-50%)}
}

/* Las pastillas cambian de ruta. No son las .chip de site.js: aquí no filtran
   una parrilla y siempre hay una abierta. */
.rvtabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px}
.rvtab{appearance:none; cursor:pointer; font-family:var(--font-ui); font-size:14.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:40px; background:#fff; color:var(--ink); border:1px solid var(--line);
  transition:background .25s, color .25s, border-color .25s}
.rvtab svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rvtab:hover{border-color:var(--accent)}
.rvtab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#fff}

.rvpanel[hidden]{display:none}
.rvpanel-cab{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:30px;
  padding-bottom:22px; border-bottom:1px solid var(--line)}
.rvpanel-cab h3{font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.6vw,30px); margin:0}
.rvpanel-cab span{font-size:14px; color:var(--g2)}
.rvpanel-cab span b{color:var(--orange-700)}

.rvetapas{display:grid; gap:18px}
.rvetapa{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3vw,38px); position:relative}
.rvetapa-cab{display:flex; align-items:flex-start; gap:18px; margin-bottom:24px}
.rvetapa .num{flex:0 0 auto; width:44px; height:44px; 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:18px}
.rvetapa h4{font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 4px; line-height:1.15}
.rvetapa-cab p{margin:0; font-size:14.5px; color:var(--g2)}

.rvpasos{list-style:none; padding:0; margin:0}
.rvpasos li{position:relative; padding-left:32px; margin-bottom:14px; font-size:16px; line-height:1.65; color:#2c2c29}
.rvpasos li::before{content:""; position:absolute; left:9px; top:10px; width:9px; height:9px; border-radius:50%;
  background:#fff; border:2px solid var(--accent)}
/* La línea que une los pasos, centrada bajo el punto: el punto ocupa de 9px a
   22px contando su borde, así que su eje está en 15px. */
.rvpasos li:not(:last-child)::after{content:""; position:absolute; left:15px; top:23px; bottom:-14px; width:1px; background:#f0d4c8}

.rvcampos{margin:22px 0 0; padding:24px 26px; background:var(--orange-50); border:1px solid var(--orange-100); border-radius:16px}
.rvcampos p{margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-700)}
.rvcampos ol{margin:0; padding-left:20px}
.rvcampos li{font-size:15px; line-height:1.6; color:#2c2c29; margin-bottom:9px}
.rvcampos li:last-child{margin-bottom:0}
.rvcampos .correo{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--font-display);
  font-weight:600; font-size:18px; color:var(--orange-700); border-bottom:1px solid var(--orange-700); word-break:break-all}

/* ====== LA BIFURCACIÓN DE LA ETAPA 3 ======
   Quién investiga no depende de quién denuncia sino de quién es la persona
   señalada. En el protocolo eso es un diagrama, y en párrafo seguido se
   pierde. Aquí es un tronco con dos ramas, dibujado con un pseudo-elemento
   por rama: sin SVG, y en móvil se apila solo. */
.rvbifurca{margin-top:26px}
.rvbifurca-tronco{display:flex; align-items:center; gap:14px; padding:16px 22px; border-radius:14px;
  background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:500; font-size:17px}
.rvbifurca-tronco svg{width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* El tallo baja del tronco (::after) y a los 14px se abre en un arco cuyos
   extremos caen justo sobre el centro de cada rama (::before). Con dos columnas
   iguales, 25% y 75% del ancho SON esos centros, así que el arco no necesita
   ninguna medida a ojo. Los 40px de padding son la altura del dibujo. */
.rvramas{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; padding-top:40px; position:relative}
.rvramas::after{content:""; position:absolute; top:0; left:50%; width:1px; height:14px; background:var(--line)}
.rvramas::before{content:""; position:absolute; top:14px; left:25%; right:25%; height:26px;
  border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0}
.rvrama{border:1px solid var(--line); border-radius:16px; padding:24px 24px; background:var(--paper); position:relative}
/* En móvil el arco desaparece —las ramas se apilan— y cada una se cuelga de su
   propia patita. En escritorio sobra: la da el arco. */
.rvrama::before{content:""; display:none; position:absolute; top:-16px; left:26px; width:1px; height:16px; background:var(--line)}
.rvrama .cuando{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g2); display:block; margin-bottom:8px}
.rvrama .quien{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600;
  font-size:18px; color:var(--orange-700); margin-bottom:16px}
.rvrama .quien svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rvrama .rvpasos li{font-size:15px}
@media(max-width:820px){
  .rvramas{grid-template-columns:1fr; padding-top:22px; gap:32px}
  .rvramas::before, .rvramas::after{display:none}
  .rvrama::before{display:block}
}

.rvcierre{margin-top:24px; padding-top:24px; border-top:1px dashed var(--line)}
.rvcierre p.t{margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-700)}

.rvavisos{margin-top:22px; display:grid; gap:10px}
.rvaviso{display:flex; gap:12px; font-size:14.5px; line-height:1.6; color:var(--g2);
  background:var(--paper); border-radius:12px; padding:14px 18px}
.rvaviso::before{content:"i"; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--orange-100);
  color:var(--orange-700); font-family:var(--font-display); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-top:1px}
.rvrama .rvaviso{background:#fff}

.rvtestigo{margin-top:22px; padding:20px 24px; border-radius:16px; background:var(--ink); color:#cfccc4;
  font-size:15px; line-height:1.65}
.rvtestigo b{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600;
  font-size:16px; color:var(--accent); margin-bottom:8px}
.rvtestigo b svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ====== DERECHOS ====== */
.rvderechos{background:var(--white)}
.rvdgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px}
.rvdcol{border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3vw,36px)}
.rvdcol:first-child{border-color:var(--accent); background:var(--orange-50)}
.rvdcol h3{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:500; font-size:26px; margin:0 0 20px}
.rvdcol h3 svg{width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.rvdcol:first-child h3{color:var(--orange-700)}
.rvdcol ul{list-style:none; padding:0; margin:0}
.rvdcol li{position:relative; padding-left:30px; margin-bottom:14px; font-size:15.5px; line-height:1.6; color:#2c2c29}
.rvdcol li::before{content:"✓"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:var(--orange-100); color:var(--orange-700); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700}
.rvdcol:last-child li::before{background:rgba(14,14,12,.07); color:var(--g2)}
@media(max-width:820px){.rvdgrid{grid-template-columns:1fr}}

/* ====== MEDIDAS DE PROTECCIÓN ====== */
.rvmedidas{background:var(--paper)}
.rvreloj{display:inline-flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--accent);
  border-radius:40px; padding:10px 26px 10px 12px; margin-bottom:30px}
.rvreloj b{width:48px; height:48px; 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:15px}
.rvreloj span{font-size:15px; font-weight:600; color:var(--ink); max-width:44ch}
.rvmlist{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 34px}
.rvmlist li{position:relative; padding-left:30px; font-size:15.5px; line-height:1.6; color:#2c2c29}
.rvmlist li::before{content:""; position:absolute; left:2px; top:8px; width:12px; height:2px; background:var(--accent)}
@media(max-width:820px){.rvmlist{grid-template-columns:1fr}}

/* ====== QUIÉN INVESTIGA ====== */
.rvcomites{background:var(--white)}
.rvcgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px}
.rvcomite{border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:6px 6px 22px 22px; padding:clamp(26px,3vw,34px)}
.rvcomite h3{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:500; font-size:24px; margin:0 0 16px}
.rvcomite h3 svg{width:24px; height:24px; flex:0 0 auto; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.rvcomite .cuando{font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 14px; font-weight:500}
.rvcomite .compone{font-size:14.5px; line-height:1.65; color:var(--g2); margin:0}
@media(max-width:820px){.rvcgrid{grid-template-columns:1fr}}

/* ====== PREVENCIÓN + MARCO LEGAL ====== */
.rvprev{background:var(--ink); color:#fff; overflow:hidden}
.rvprev .spiral{left:-150px; bottom:-170px; width:440px; height:440px; opacity:.12}
.rvprev .spiral path{stroke:var(--accent)}
.rvprev .wrap{position:relative; z-index:2}
.rvprev .lab{color:#8e8b84}
.rvprev h2.sec{color:#fff}
.rvpgrid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,5vw,70px); align-items:start}
.rvplist{list-style:none; padding:0; margin:0}
.rvplist li{position:relative; padding-left:32px; margin-bottom:16px; font-size:16px; line-height:1.6; color:#d6d3cc}
.rvplist li::before{content:"✓"; position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%;
  background:rgba(255,81,21,.2); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700}
.rvmarco{border-left:1px solid rgba(255,255,255,.14); padding-left:clamp(24px,3vw,40px)}
.rvmarco p{margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.rvmarco ul{list-style:none; padding:0; margin:0}
.rvmarco li{font-size:14px; line-height:1.55; color:#a9a69f; padding:10px 0; border-top:1px solid rgba(255,255,255,.08)}
.rvmarco li:first-child{border-top:none}
@media(max-width:900px){
  .rvpgrid{grid-template-columns:1fr; gap:40px}
  .rvmarco{border-left:none; border-top:1px solid rgba(255,255,255,.14); padding-left:0; padding-top:30px}
}

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

@media(prefers-reduced-motion:reduce){
  .rvacc summary .pm, .rvquien div{transition:none}
}