/* RGG Group · /nosotros y las fichas del equipo (/equipo/julian-ruggiero, /equipo/pablo-spata)
   Se carga después de paginas.css. Usa los colores y medidas de base.css.
   Componentes que sirven para otras páginas (para pasar a paginas.css): .cifras-cab, .linea, .prensa,
   .perfil-datos, .redes-perfil, .alyc-num, .pasos-fila y .seccion-pie. */

/* ── Cabecera de /nosotros: foto a la derecha y las cifras al pie, como la tapa de la home ── */
.cifras-cab { padding-bottom: 0; }
.cifras-cab .pag-cab-2 { padding-bottom: 64px; }
.cifras-cab .pag-cab-2 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cifras-cab .datos { position: relative; }

/* ── Historia: línea de tiempo con el año a la izquierda ── */
.linea { margin: 0; padding: 0; list-style: none; }
.linea > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 20px; }
.linea-cuando { padding-top: 1px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--azul); font-variant-numeric: tabular-nums; }
.linea-txt { position: relative; padding: 0 0 32px 28px; border-left: 1.5px solid var(--borde); }
.linea > li:last-child .linea-txt { padding-bottom: 0; border-left-color: transparent; }
.linea-txt::before { content: ""; position: absolute; left: -7px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--azul); }
.linea > li:last-child .linea-txt::before { background: var(--azul); }
.linea h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--marino); }
.linea p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--texto-2); }

/* Texto corrido de una sección (historia, trayectoria) */
.texto-sec > * + * { margin-top: 16px; }
.texto-sec p:not(.etiqueta) { font-size: 17px; line-height: 1.7; color: #334155; }
.texto-sec .h-grande + p { margin-top: 20px; }
.texto-sec p a:not(.btn) { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* ── En los medios: lista con el medio, el título y la fecha (.medios ya existe en base.css) ── */
.prensa { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--borde); }
.prensa h3 { color: var(--texto-2); }
.prensa ul { display: grid; gap: 4px; margin-top: 12px; }
.prensa a { display: grid; gap: 2px; padding: 10px 0; min-height: 44px; }
.prensa b { font-size: 15px; color: var(--marino); }
.prensa span { font-size: 15px; color: var(--azul); }
.prensa small { font-size: 13px; color: var(--texto-2); }
.prensa a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── El método en tres pasos, uno al lado del otro ── */
.pasos-fila { counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.pasos-fila li { counter-increment: paso; position: relative; padding: 26px 26px 28px; border-radius: var(--r-tarjeta); background: rgba(255, 255, 255, .72); border: 1px solid rgba(58, 113, 191, .18); }
.pasos-fila li::before { content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; border: 1.5px solid var(--azul); font-weight: 700; color: var(--azul); background: #fff; }
.pasos-tit { margin-top: 88px; }
.pasos-fila h3, .pasos-fila h4 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--marino); }
.pasos-fila p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #3B4C68; }
.metodo-pie { margin-top: 28px; font-size: 15px; color: #3B4C68; }
.metodo-pie .link-azul { min-height: 0; margin-left: 4px; }

/* ── Matrículas CNV ── */
.matriculas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.matricula { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--r-tarjeta); background: #fff; border: 1px solid var(--borde); }
.matricula img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.matricula b { display: block; font-size: 17px; color: var(--marino); }
.matricula span { display: block; font-size: 15px; color: var(--texto-2); }
.matricula a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--azul); }
.matricula a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── ALyC: el número de registro debajo del logo ── */
.alycs-sec { margin-top: 64px; }
.alycs-sec h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--marino); }
.alycs-sec > p { max-width: 680px; margin: 10px 0 24px; color: var(--texto-2); }
.alycs > li { display: grid; }
.alyc { min-height: 132px; align-content: center; }
.alyc img { height: 40px; max-width: 160px; }
.alyc .alyc-num { display: grid; gap: 2px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.alyc .alyc-num b { font-size: 14px; font-weight: 700; color: var(--marino); }

/* ── Equipo: la ficha lleva un link a la página de cada uno ── */
.equipo-fichas { margin-top: 0; }
.qs-ficha .link-azul { margin-top: 8px; font-size: 15px; }
.equipo-mas { max-width: 760px; margin-top: 24px; }

/* Texto que no se corta en dos líneas (matrícula, AP CNV) */
.nw { white-space: nowrap; }

/* Historia en compu: la línea de tiempo acompaña al texto mientras se lee */
@media (min-width: 1024px) {
  .linea { position: sticky; top: calc(var(--barra) + 32px); }
}

/* Pie de sección con un link o un botón */
.seccion-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }

/* ════ Fichas del equipo ════ */
.perfil-cab .pag-cab-2 { grid-template-columns: 1.15fr .85fr; }
.perfil-foto { margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.perfil-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.perfil-rol { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-claro); }

/* Redes y perfiles: píldoras sobre marino */
.redes-perfil { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.redes-perfil a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(184, 205, 232, .35); background: rgba(255, 255, 255, .05); font-size: 14px; font-weight: 600; color: #fff; transition: background .2s ease, border-color .2s ease; }
.redes-perfil a:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.redes-perfil a:focus-visible, .prensa a:focus-visible, .matricula a:focus-visible, .perfil-datos a:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; border-radius: 6px; }
.redes-perfil .marca-red { width: 18px; height: 18px; flex: none; fill: currentColor; }
.redes-perfil .ico { width: 18px; height: 18px; }

/* Datos de la ficha: dos columnas, rótulo y dato */
.perfil-datos { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--borde); }
.perfil-datos dt, .perfil-datos dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.perfil-datos dt { padding-right: 16px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.perfil-datos dd { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--marino); }
.perfil-datos dd span { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--texto-2); }
.perfil-datos dd ul { display: grid; gap: 6px; }
.perfil-datos a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* Libro: tapa a la derecha */
.libro-tapa { margin: 0; justify-self: center; width: 100%; max-width: 360px; }
.libro-tapa img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(15, 30, 56, .18)); }

/* Canal de YouTube sobre marino */
.canal-yt .pub-cab .h-media { color: #fff; }
.canal-yt .pub-cab .link-claro .ico { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.canal-yt .vid-dato { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--texto-osc); }

/* RGG Plus en la ficha de Pablo: captura sobre marino */
.plus-captura { margin: 0; border-radius: var(--r-bloque); overflow: hidden; background: #fff; border: 1px solid rgba(184, 205, 232, .2); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.plus-captura img { width: 100%; height: auto; }
.plus-captura figcaption { padding: 12px 16px; font-size: 13px; color: var(--texto-2); background: #fff; border-top: 1px solid var(--borde); }

.plus-lead { margin-top: 20px; font-size: 18px; color: var(--texto-osc); }
.plus-lista { margin-top: 24px; }
.plus-precio { font-size: 15px; color: var(--texto-osc); }
.plus-precio b { font-size: 18px; color: #fff; }

/* Pasos sobre fondo blanco: la tarjeta lleva el gris claro */
.pasos-blanco li { background: var(--claro); border-color: var(--borde); }

/* Notas del blog en la ficha: la lista de prensa, sin la línea de arriba */
.prensa-notas { margin-top: 0; padding-top: 0; border-top: 0; }
.prensa-notas li + li { border-top: 1px solid var(--borde); }
.prensa-notas a { padding: 14px 0; }

/* ── Tableta y celular ── */
@media (max-width: 1023px) {
  .pasos-fila { grid-template-columns: 1fr; gap: 14px; }
  .pasos-tit { margin-top: 64px; }
  .perfil-cab .pag-cab-2 { grid-template-columns: 1fr; }
  .perfil-foto { justify-self: start; max-width: 360px; }
}
@media (max-width: 700px) {
  .cifras-cab { padding-bottom: 0; }
  .cifras-cab .pag-cab-2 { padding-bottom: 40px; }
  .linea > li { grid-template-columns: 48px minmax(0, 1fr); gap: 0 12px; }
  .linea-cuando { font-size: 14px; }
  .linea-txt { padding-left: 22px; }
  .texto-sec p:not(.etiqueta) { font-size: 16px; }
  .matriculas { grid-template-columns: 1fr; }
  .matricula { grid-template-columns: 52px minmax(0, 1fr); padding: 18px; }
  .matricula img { width: 52px; height: 52px; }
  .alyc { min-height: 116px; padding: 18px 12px; }
  .alyc img { height: 32px; max-width: 120px; }
  .pag-acciones .btn { width: 100%; }
  .perfil-foto { max-width: none; }
  .perfil-foto img { aspect-ratio: 1 / 1; object-position: 50% 22%; }
  .perfil-datos { grid-template-columns: 1fr; }
  .perfil-datos dt { padding: 14px 0 0; border-bottom: 0; }
  .perfil-datos dd { padding: 2px 0 14px; }
  .libro-tapa { max-width: 260px; }
  .seccion-pie .btn { width: 100%; }
}