/* Nuestra red — página 4 */
.r-page { background: var(--forest); }
#r-hero, .r-lens-view { will-change: clip-path; }

.r-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.r-stage p { margin: 0; }
.r-stage img { user-select: none; -webkit-user-drag: none; }

.r-sec { position: relative; overflow: hidden; height: 100vh; height: 100svh; }
.r-hero { background: #0d1e03; }
.r-vinculo { background: var(--forest); height: auto; }
.r-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--forest); }
.r-parte { background: #0f2800; margin-top: -100vh; margin-top: -100svh; z-index: 1; }
#r-vinculo { z-index: 2; }
.r-pin { z-index: 2; }
.r-lens-view { position: absolute; overflow: hidden; background: #0f2800; visibility: hidden; }
.r-lens-view .r-cta { pointer-events: none; }

/* frase con subrayado de plumón: las píldoras van detrás del texto */
.r-hero [data-id="247:219"] { z-index: 2; }
.r-hero [data-id="247:216"], .r-hero [data-id="247:217"], .r-hero [data-id="247:218"] { z-index: 1; }

/* cinta de organizaciones */
.r-logos { position: relative; overflow: hidden; background: var(--forest); padding: clamp(26px, 3vw, 48px) 0 clamp(30px, 3.6vw, 56px); }
.r-logos-title {
  margin: 0 0 clamp(16px, 1.8vw, 28px); text-align: center; color: var(--cream);
  font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(11px, 1vw, 16px); letter-spacing: .16em;
}
.r-net { position: relative; }
.r-net-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.r-net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.r-net-lines path { fill: none; stroke: var(--cream); stroke-linecap: round; transition: opacity .35s, stroke-width .35s, stroke .35s; }
.r-net-lines .spoke { stroke-width: 5px; opacity: .45; }
.r-net-lines .ring { stroke-width: 3px; opacity: .2; stroke-dasharray: 2 22; }
.r-net.focus .r-net-lines path { opacity: .08; }
.r-net.focus .r-net-lines path.on { opacity: 1; stroke: var(--sky); stroke-width: 9px; }
.r-net-hub { position: absolute; width: 1694px; height: 525px; transform-origin: 50% 50%; }
.r-logo { position: absolute; border-radius: 50%; cursor: pointer; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.r-logo > div { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.r-logo img { position: absolute; max-width: none; }
.r-logo:hover, .r-logo:focus-visible, .r-logo.on { transform: scale(1.16); z-index: 2; }
.r-logo:focus-visible { outline: 6px solid var(--sky); outline-offset: 8px; }
.r-net.focus .r-logo:not(.on) { opacity: .4; }
.r-net-name {
  position: absolute; margin: 0; white-space: nowrap; pointer-events: none; opacity: 0;
  translate: -50% 0; padding: 14px 34px; border-radius: 60px; background: var(--sky); color: var(--forest);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: 3px; text-transform: uppercase;
  transition: opacity .25s;
}
.r-net.focus .r-net-name { opacity: 1; }

/* botón ¡Conversemos! */
.r-cta {
  position: absolute; display: grid; place-items: center; border-radius: 91px; background: var(--sky);
  color: var(--forest); text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 48px; letter-spacing: 4px; text-transform: uppercase; z-index: 3;
  transition: background .3s, color .3s;
}
.r-cta:hover, .r-cta:focus-visible { background: var(--cream); }
.r-cta:focus-visible { outline: 8px solid var(--cream); outline-offset: 10px; }

.r-lens { cursor: grab; }
.r-rig { position: absolute; left: 0; top: 0; width: 2980px; height: 1867px; pointer-events: none; will-change: transform; }
.r-rig > * { pointer-events: auto; }

/* ¿Te gustaría ser parte?: bloque más contenido y con aire */
:is(.r-parte, .r-lens-view) [data-id="247:287"] { left: 260px !important; top: 430px !important; font-size: 104px !important; letter-spacing: 10px !important; line-height: 1.18 !important; width: 1100px !important; }
:is(.r-parte, .r-lens-view) [data-id="247:288"] { left: 260px !important; top: 800px !important; font-size: 42px !important; width: 940px !important; line-height: 1.6 !important; }
:is(.r-parte, .r-lens-view) .r-cta { left: 260px !important; top: 1110px !important; width: 640px !important; height: 116px !important; }
/* una sombra suave a la izquierda para que el texto respire sobre la foto */
:is(.r-parte, .r-lens-view) [data-id="247:286"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(13,30,3,.7) 0%, rgba(13,30,3,.35) 40%, rgba(13,30,3,0) 62%); }

@media (max-width: 760px) {
  .r-cta { font-size: 72px; letter-spacing: 4px; }
  :is(.r-parte, .r-lens-view) .r-cta { left: 160px !important; top: 1130px !important; width: 820px !important; height: 150px !important; }
  /* en celular la frase se agranda y los subrayados (que dependen del corte de líneas) se ocultan */
  .r-hero [data-id="247:219"] { left: 1400px !important; width: 1500px !important; font-size: 64px !important; line-height: 1.35 !important; }
  .r-hero [data-id="247:216"], .r-hero [data-id="247:217"], .r-hero [data-id="247:218"] { display: none; }
  :is(.r-parte, .r-lens-view) [data-id="247:288"] { left: 160px !important; top: 760px !important; width: 1380px !important; font-size: 56px !important; }
  :is(.r-parte, .r-lens-view) [data-id="247:287"] { left: 160px !important; top: 360px !important; width: 1400px !important; font-size: 124px !important; }
  .r-net-name { font-size: 46px; }
  /* bajo los arbustos sigue el pasto, para que no queden flotando */
  .r-pin { background: linear-gradient(to bottom, var(--forest) 0 66%, #8e8b34 66%); }
}
.r-page .animate { background: var(--forest); }