/* /nosotros (aprobada el 28/10/2026; el archivo conserva el nombre de cuando era /nosotros-v2). Se carga después de la parte cabeza (base.css, home-v4.css, paginas.css).
   Usa las medidas comunes de las páginas internas: el ancho del .wrap, el espacio de .seccion-pag (88 / 64 px),
   los títulos .h-grande y el cierre .cierre-pag. Lo propio de esta página es lo de adentro de cada bloque.
   Referencias: rgg-sitio/25-comparacion-sitios-reales.md */

.nv { background: #fff; color: var(--texto); }

/* Portada: el texto en la misma columna que el resto de la página, el logo de RGG grande en la mitad derecha de esa columna */
/* Una luz blanca que baja desde arriba a la derecha, para que el marino no quede plano */
.nv-portada { display: flex; align-items: center; min-height: 560px;
  background: radial-gradient(60% 95% at 76% -14%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%), var(--luz-marino), var(--marino); }
.nv-portada .wrap { position: relative; z-index: 2; }
.nv-portada-txt { max-width: calc(50% - 48px); }
/* Luz blanca suave que sigue al cursor por toda la portada (--fx y --fy las pone el script de la página; sin mouse queda sobre el logo) */
.nv-foco { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--fx, 74%) var(--fy, 56%), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%); }

/* El logo va sobre la luz y la grilla de planilla de la marca (GUIA: "luz siempre en fondos sin foto").
   Todo se apila en la misma celda: grilla, luz, anillos y logo.
   Con el mouse, --mx y --my (de -1 a 1) mueven cada capa distinto: el logo se inclina hacia el cursor,
   la luz y los anillos lo acompañan y la grilla va para el otro lado, para dar profundidad. */
.nv-portada-logo { --logo: clamp(260px, 22vw, 320px); position: absolute; top: 0; right: max(var(--lado), calc((100% - var(--ancho)) / 2)); bottom: 0; left: 50%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding-top: var(--barra); }
.nv-portada-logo > *, .nv-portada-logo::after { grid-area: 1 / 1; }
.nv-portada-logo::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(122, 174, 232, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 174, 232, .10) 1px, transparent 1px);
  background-size: 44px 44px; background-position: calc(50% - var(--mx, 0) * 14px) calc(50% - var(--my, 0) * 14px);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); }
/* Detrás del logo, una luz con el centro casi blanco que se abre en azul */
.nv-portada-logo::after { content: ""; z-index: 0; width: calc(var(--logo) * 2.1); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .36) 0%, rgba(122, 174, 232, .28) 28%, rgba(58, 113, 191, .14) 44%, rgba(58, 113, 191, 0) 64%);
  translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 22px); animation: nv-respirar 7s ease-in-out infinite; }
.nv-anillos { z-index: 1; width: calc(var(--logo) * 1.6); height: auto; overflow: visible; translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 7px); animation: nv-aparecer 1.2s .3s ease-out both; }
.nv-anillos circle { fill: none; }
.nv-anillos .a1 { stroke: rgba(220, 232, 248, .45); stroke-width: 1.5; }
/* Marcas como las de un dial: 120 rayitas parejas, giran una vuelta cada 2 minutos */
.nv-anillos .a2 { stroke: rgba(200, 220, 245, .42); stroke-width: 12; stroke-dasharray: .12 .88; animation: nv-girar 120s linear infinite; }
.nv-anillos .a3 circle { stroke: rgba(200, 220, 245, .22); stroke-width: 1; }
.nv-anillos .a3 { animation: nv-girar 40s linear infinite reverse; }
.nv-anillos .a3 .punto { fill: #fff; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
/* El logo se inclina hacia el cursor; un brillo blanco leve se corre hacia el lado del cursor, como si el cursor fuera la luz.
   Es leve a propósito: el logo no se recolorea (DECISIONES 1). */
.nv-logo-mov { position: relative; z-index: 2; width: var(--logo); border-radius: 50%; will-change: transform;
  transform: perspective(900px) translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 16px), 0) rotateY(calc(var(--mx, 0) * 12deg)) rotateX(calc(var(--my, 0) * -12deg)); }
.nv-portada-logo img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 60px rgba(122, 174, 232, .18);
  animation: nv-entrar .9s cubic-bezier(.2, .7, .2, 1) both, nv-flotar 8s ease-in-out .9s infinite; }
.nv-brillo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; animation: nv-entrar .9s cubic-bezier(.2, .7, .2, 1) both, nv-flotar 8s ease-in-out .9s infinite;
  background: radial-gradient(circle at calc(38% + var(--mx, 0) * 30%) calc(28% + var(--my, 0) * 30%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%); }
@keyframes nv-girar { to { transform: rotate(360deg); } }
@keyframes nv-respirar { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes nv-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes nv-entrar { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes nv-aparecer { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Misión, visión y valores: misión y visión en dos columnas, valores en una grilla de 3 con línea arriba; mismo espacio entre columnas */
.nv-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.nv-mv h3, .nv-valores-tit { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.nv-mv p { margin-top: 12px; font-size: 20px; line-height: 1.55; color: var(--marino); }
.nv-valores-tit { margin-top: 64px; }
.nv-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin: 24px 0 0; }
.nv-valores div { padding-top: 18px; border-top: 1px solid var(--borde); }
.nv-valores dt { font-size: 19px; font-weight: 700; color: var(--marino); }
.nv-valores dd { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--texto-2); }
.nv-mvv .link-azul { margin-top: 40px; }
.nv-mvv .link-azul .ico { width: 18px; height: 18px; }

/* Historia (sacada de la página por ahora, queda en un comentario del HTML): la línea de tiempo a lo ancho, con el año en grande */
.nv-linea { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--marino); }
.nv-linea li { position: relative; padding: 28px 28px 0 0; }
.nv-linea li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--marino); }
.nv-linea b { display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--azul); }
.nv-linea span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--texto-2); }

/* Equipo: cada socio en una fila, foto a un lado y trayectoria al otro; la segunda fila se invierte con las mismas medidas */
.nv-persona { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: center; }
.nv-persona + .nv-persona { margin-top: 88px; }
.nv-persona:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.nv-persona:nth-of-type(even) img { order: 2; }
.nv-persona img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-bloque); }
.nv-persona h3 { font-size: clamp(30px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--marino); }
.nv-cargo { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--azul); }
.nv-persona > div > p:not(.nv-cargo) { margin-top: 20px; font-size: 18px; line-height: 1.65; color: #334155; }
.nv-datos { display: grid; gap: 14px; margin: 28px 0 8px; }
.nv-datos div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-top: 14px; border-top: 1px solid var(--borde); }
.nv-datos dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.nv-datos dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto); }
.nv-persona .link-azul .ico { width: 18px; height: 18px; }

/* En los medios */
.nv-medios ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.nv-medios li + li { border-left: 1px solid #D5DCE6; }
/* Cada medio: una fila fija para el logo (así los títulos quedan alineados), el título y la fecha */
.nv-medios a { display: grid; grid-template-rows: 64px auto auto; align-content: start; height: 100%; padding: 4px 32px 4px 0; }
.nv-medios li + li a { padding-left: 32px; }
/* Logos de los medios en un solo tono oscuro, como las franjas de prensa de los sitios de referencia (el de K2 es blanco en su original) */
.nv-medios img { display: block; align-self: center; height: 44px; width: auto; filter: brightness(0); opacity: .82; }
.nv-medios img.m-ecos { height: 30px; }
.nv-medios img.m-ecn { height: 64px; }
.nv-medios a:hover img { opacity: 1; }
.nv-medios span { display: block; margin-top: 16px; font-size: 16px; line-height: 1.5; color: #334155; }
.nv-medios small { display: block; margin-top: 8px; font-size: 13px; color: var(--texto-2); }
.nv-medios a:hover span { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* Registro: una franja angosta con el logo de la CNV y las dos matrículas */
.nv-registro { padding: 36px 0; border-top: 1px solid var(--borde); }
.nv-registro .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.nv-registro .nv-cnv { height: 48px; width: auto; }
.nv-registro p { flex: 1 1 320px; font-size: 16px; color: var(--texto-2); }
.nv-registro a { display: flex; flex-direction: column; font-size: 16px; font-weight: 700; color: var(--marino); }
.nv-registro a span { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--azul); }
.nv-registro a:hover span { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  /* El logo arriba, más chico, y el texto abajo, en la columna de siempre */
  .nv-portada { flex-direction: column; align-items: stretch; min-height: 0; padding-top: var(--barra); }
  .nv-portada .wrap { padding-top: 8px; }
  .nv-portada-txt { max-width: 680px; }
  .nv-portada-logo { --logo: 220px; position: relative; inset: auto; order: -1; height: 380px; padding-top: 0; }
  .nv-portada { background: radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%), var(--luz-marino), var(--marino); }
  .nv-foco { background: radial-gradient(420px circle at var(--fx, 50%) var(--fy, 254px), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%); }
  .nv-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; border-top: 0; }
  .nv-linea li { border-top: 2px solid var(--marino); }
  .nv-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-persona, .nv-persona:nth-of-type(even) { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; }
  .nv-persona:nth-of-type(even) img { order: 0; }
}
@media (max-width: 700px) {
  .nv-portada-logo { --logo: 190px; height: 320px; }
  .nv-mv, .nv-valores { grid-template-columns: 1fr; gap: 28px; }
  .nv-mv p { font-size: 18px; }
  .nv-valores-tit { margin-top: 44px; }
  .nv-linea { grid-template-columns: 1fr; }
  .nv-persona, .nv-persona:nth-of-type(even) { grid-template-columns: 1fr; gap: 28px; }
  .nv-persona img { max-width: 360px; }
  .nv-persona + .nv-persona { margin-top: 64px; }
  .nv-datos div { grid-template-columns: 1fr; gap: 4px; }
  .nv-medios ul { grid-template-columns: 1fr; gap: 28px; }
  .nv-medios li + li { border-left: 0; border-top: 1px solid #D5DCE6; padding-top: 28px; }
  .nv-medios a, .nv-medios li + li a { padding: 0; }
}