/* ══════════════════════════════════════════════════════════════════════════
   R3 · Más de nosotros — índice y nota
   ──────────────────────────────────────────────────────────────────────────
   Va después de r3-base.css, que trae los tokens y el chrome.

   Dos superficies, a propósito:
     · el ÍNDICE va oscuro (--core), como la sección de equipo. Las fotos
       son lo que tiene que brillar, y sobre oscuro brillan.
     · la NOTA va clara (--base). Es lectura larga y sostenida: tinta oscura
       sobre claro cansa menos que el revés a los mil palabras.
   El pie cierra en oscuro en las dos, así que el recorrido termina igual.

   Sobre fondo claro el naranja --focus da 2,9:1 y NO pasa AA. Para texto
   sobre claro va --focus-ink (#BA5100), que es el mismo naranja bajado hasta
   el ratio. --focus queda para bordes, fondos y el anillo de foco.
   ══════════════════════════════════════════════════════════════════════════ */

/* En estas páginas no hay hero de video: el header arranca con fondo desde
   el primer píxel, no espera al scroll como en la home. */
header.siempre::before{opacity:1}

/* El salto al contenido: existe siempre, se ve sólo con teclado. */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--focus);color:var(--core);padding:12px 20px;
  font-size:15px;font-weight:600;text-decoration:none;border-radius:2px}
.saltar:focus{left:clamp(20px,3.9vw,56px);top:12px}

/* ─────────────────────────────────────────────────────────────────────────
   ÍNDICE

   OJO con el relleno: estos bloques llevan también la clase .shell, que trae
   su propio padding-inline (el margen lateral de todo el sitio). Escribir
   `padding: 40px 0` acá lo pisa y el contenido se va contra el borde de la
   pantalla. Por eso todos usan padding-block, que sólo toca arriba y abajo.
   ───────────────────────────────────────────────────────────────────────── */
body.idx{background:var(--core);color:var(--base)}

/* Sin el overline arriba, el título puede empezar antes: lo que separa del
   header ahora es aire, no una línea de texto que no aportaba nada. */
.idx-head{padding-block:calc(var(--hdr) + clamp(26px,4.5vh,52px)) clamp(28px,4vh,46px)}
.idx-head h1{margin:0;
  font-size:clamp(38px,6.4vw,84px);font-weight:700;letter-spacing:-.028em;
  line-height:1.04;max-width:16ch}
.idx-head .bajada{margin:clamp(16px,2.2vh,26px) 0 0;max-width:52ch;
  font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--ink-3)}

/* La línea que separa el encabezado de la grilla. La misma que separa a los
   fundadores entre sí: es el recurso del sistema para "acá empieza otra cosa". */
.idx-sep{border:0;border-top:1px solid var(--linea);margin:0}

/* ── La grilla ──
   Tres columnas en escritorio, dos en tableta, una en teléfono. La primera
   nota ocupa el ancho entero y se lee como portada: sin eso son nueve cards
   iguales y ninguna manda. */
/* margin-block y no `margin:0`: este <ul> lleva también .shell, y .shell se
   centra con margin-inline:auto. Un `margin:0` acá lo pisaba y la grilla
   quedaba pegada a la izquierda mientras el título seguía centrado — 130 px
   de desfase en una pantalla de 1700. A 1440 no se notaba, porque ahí el
   shell ocupa todo y no hay margen que anular. Mismo cuidado que el padding. */
.notas{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,44px) clamp(20px,2.2vw,32px);
  padding-block:clamp(34px,5vh,58px) clamp(60px,9vh,110px);list-style:none;margin-block:0}
@media(max-width:960px){.notas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.notas{grid-template-columns:1fr;gap:clamp(30px,5vh,42px)}}

.nota-card{margin:0}
.nota-card a{display:grid;gap:14px;color:inherit;text-decoration:none;
  /* El foco tiene que rodear la card entera, no sólo el título. */
  border-radius:2px;outline-offset:6px}

.nota-foto{position:relative;overflow:hidden;border-radius:2px;
  aspect-ratio:3/2;background:var(--depth)}
.nota-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--e)}
@media(hover:hover) and (pointer:fine){
  .nota-card a:hover .nota-foto img{transform:scale(1.04)}
  .nota-card a:hover .nota-t{color:var(--pulse)}
}
.nota-card a:active{transform:scale(.995)}
.nota-card a{transition:transform .18s var(--e)}

/* Sin foto la card no se rompe: queda el bloque de color con el isotipo.
   Pasa cuando se publica apurado y la imagen viene después. */
.nota-foto.vacia{display:grid;place-items:center;
  background:linear-gradient(135deg,var(--depth),var(--deep))}
.nota-foto.vacia span{width:34%;max-width:74px;opacity:.28;color:var(--base)}
.nota-foto.vacia svg{width:100%;height:auto;display:block}

.nota-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  line-height:1.4;color:var(--ink-3)}
.nota-meta .sq{background:var(--pulse)}
.nota-meta time{color:inherit}

.nota-t{margin:0;font-size:clamp(20px,1.65vw,25px);font-weight:700;
  letter-spacing:-.018em;line-height:1.22;color:var(--ink-1);
  transition:color .25s var(--e)}
.nota-d{margin:0;font-size:15px;line-height:1.58;color:var(--ink-3);
  max-width:42ch}

/* ── La portada ──
   Foto a la izquierda, texto a la derecha, ancho completo. */
.nota-card.portada{grid-column:1 / -1}
.nota-card.portada a{grid-template-columns:1.12fr .88fr;
  gap:clamp(24px,3.4vw,54px);align-items:center}
.nota-card.portada .nota-foto{aspect-ratio:16/10}
.nota-card.portada .nota-t{font-size:clamp(27px,3.3vw,46px);letter-spacing:-.025em;
  line-height:1.1}
.nota-card.portada .nota-d{font-size:clamp(15px,1.15vw,17px);max-width:46ch}
.nota-card.portada .txt{display:grid;gap:clamp(12px,1.6vh,18px)}
@media(max-width:860px){
  .nota-card.portada a{grid-template-columns:1fr;gap:16px}
  .nota-card.portada .nota-foto{aspect-ratio:3/2}
}

/* ── Cuando todavía no hay nada publicado ──
   Una sección vacía sin explicación se lee como un error del sitio. */
.idx-vacio{padding-block:clamp(50px,10vh,110px) clamp(70px,12vh,130px);
  max-width:46ch}
.idx-vacio p{margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.6;
  color:var(--ink-3)}
.idx-vacio .btn{margin-top:clamp(22px,3vh,32px)}

/* ─────────────────────────────────────────────────────────────────────────
   NOTA
   ───────────────────────────────────────────────────────────────────────── */
body.art{background:var(--base);color:var(--core)}

/* Sobre claro, el chrome invierte. La home hace lo mismo con .on-light. */
body.art header{color:var(--core)}
body.art header::before{background:var(--ink-2);border-bottom-color:#1c1c1f14}
body.art .btn-solid{background:var(--core);color:var(--base)}
body.art .btn-solid:hover{background:var(--focus);color:var(--core)}

/* La barra de lectura: el mismo riel de progreso de la home, arriba de todo.
   Sin JS se queda en cero y no molesta: es una línea de 2px. */
.leido{position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;
  background:transparent;pointer-events:none}
.leido i{display:block;height:100%;width:0;background:var(--focus);
  transform-origin:0 50%;transition:width .1s linear}

.art-head{padding-block:calc(var(--hdr) + clamp(40px,7vh,84px)) 0}
.art-vuelta{display:inline-flex;align-items:center;gap:10px;
  color:var(--focus-ink);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  transition:gap .2s var(--e)}
.art-vuelta svg{width:17px;height:auto;display:block;transform:rotate(180deg);flex:none}
@media(hover:hover) and (pointer:fine){.art-vuelta:hover{gap:15px}}

.art-head h1{margin:clamp(18px,2.4vh,28px) 0 0;
  font-size:clamp(32px,5vw,64px);font-weight:700;letter-spacing:-.026em;
  line-height:1.08;max-width:20ch;color:var(--ink-1c)}
.art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;
  margin:clamp(16px,2.2vh,24px) 0 0;
  font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  line-height:1.4;color:var(--ink-3c)}
.art-meta .sq{background:var(--focus)}
.art-bajada{margin:clamp(16px,2.2vh,24px) 0 0;max-width:58ch;
  font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--ink-2c);
  font-weight:500}

.art-portada{margin:clamp(30px,5vh,56px) 0 0;border-radius:2px;overflow:hidden;
  background:var(--depth);aspect-ratio:16/9}
.art-portada img{width:100%;height:100%;object-fit:cover;display:block}
.art-pie-foto{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3c)}

/* ── El cuerpo ──
   Columna de 68ch. Más ancho que eso el ojo pierde el renglón al volver.
   Una sola columna: acá vivió un llamado a la acción clavado a la derecha,
   y se sacó junto con el bloque. El aire del costado en pantalla grande es
   lo normal en un texto largo, y el "Contactanos" del header ya está fijo
   ahí arriba todo el tiempo. */
/* El aire con el que termina la nota. Tiene que ser bastante más que el que
   separa la firma del texto de arriba: si son parecidos, la firma se lee como
   parte del bloque siguiente en vez de como el cierre de la lectura.
   Con 72 px quedaba apretada contra "Seguir leyendo". */
.art-fin{padding-bottom:clamp(86px,13vh,150px)}

.art-cuerpo{padding-block:clamp(34px,6vh,64px) clamp(20px,3vh,32px);
  max-width:68ch;font-size:clamp(17px,1.25vw,19px);line-height:1.72;
  color:var(--ink-2c)}
.art-cuerpo > *:first-child{margin-top:0}
.art-cuerpo p{margin:0 0 1.35em}
.art-cuerpo h2{margin:clamp(34px,5vh,56px) 0 .55em;
  font-size:clamp(23px,2.2vw,32px);font-weight:700;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink-1c)}
.art-cuerpo h3{margin:clamp(26px,4vh,40px) 0 .5em;
  font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.012em;
  line-height:1.3;color:var(--ink-1c)}
.art-cuerpo strong,.art-cuerpo b{font-weight:700;color:var(--ink-1c)}
.art-cuerpo em,.art-cuerpo i{font-style:italic}
.art-cuerpo a{color:var(--focus-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .18s linear}
@media(hover:hover) and (pointer:fine){
  .art-cuerpo a:hover{color:var(--core);text-decoration-color:var(--focus)}
}
.art-cuerpo ul,.art-cuerpo ol{margin:0 0 1.35em;padding-left:0;list-style:none}
.art-cuerpo ol{counter-reset:r3li}
.art-cuerpo li{position:relative;padding-left:28px;margin-bottom:.6em}
.art-cuerpo ul li::before{content:"";position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:1px;background:var(--focus)}
.art-cuerpo ol li{counter-increment:r3li}
.art-cuerpo ol li::before{content:counter(r3li);position:absolute;left:0;top:.06em;
  font-size:13px;font-weight:700;letter-spacing:.6px;color:var(--focus-ink)}

/* La cita usa Newsreader, igual que las frases de la home. Es el único lugar
   donde el sitio cambia de tipografía, y significa siempre lo mismo: alguien
   está hablando. */
.art-cuerpo blockquote{margin:clamp(30px,4.5vh,48px) 0;padding:0 0 0 clamp(20px,2.4vw,32px);
  border-left:2px solid var(--focus);
  font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(20px,1.9vw,27px);line-height:1.38;color:var(--ink-1c)}
.art-cuerpo blockquote p{margin:0 0 .45em}
.art-cuerpo blockquote p:last-child{margin-bottom:0}
.art-cuerpo blockquote cite{display:block;margin-top:.7em;font-family:Manrope,system-ui,sans-serif;
  font-size:13px;font-style:normal;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-3c)}

/* Imagen dentro del texto: rompe la columna y respira a los costados. */
.art-cuerpo figure{margin:clamp(30px,4.5vh,50px) 0;width:100%}
.art-cuerpo figure img{width:100%;height:auto;display:block;border-radius:2px;
  background:var(--linea-c)}
.art-cuerpo figcaption{margin:10px 0 0;font-size:13px;line-height:1.5;
  color:var(--ink-3c)}

.art-cuerpo hr{border:0;border-top:1px solid var(--linea-c);
  margin:clamp(34px,5vh,56px) 0}

/* ── Cierre de la nota ── */
/* La firma acompaña al texto, así que respeta su ancho de lectura. */
.art-firma{display:flex;align-items:center;gap:14px;max-width:68ch;margin:0;
  padding-top:clamp(24px,3.4vh,34px);border-top:1px solid var(--linea-c);
  font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ink-3c)}
.art-firma .sq{background:var(--pulse)}

/* ── Seguir leyendo ── */
.sigue{background:var(--core);color:var(--base);
  padding-block:clamp(46px,7vh,84px) clamp(52px,8vh,96px)}
.sigue .ft-h,.sigue .overline{color:var(--ink-3)}
.sigue ul{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,2.6vw,36px);list-style:none;margin:clamp(24px,3.4vh,34px) 0 0;padding:0}
@media(max-width:860px){.sigue ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sigue ul{grid-template-columns:1fr;gap:26px}}

/* ─────────────────────────────────────────────────────────────────────────
   Entrada de las cards. El default es VISIBLE: si el JS no corre, están.
   La clase .con-anim (la pone el propio JS) es la que las esconde para
   después traerlas. Mismo trato que en la home.
   ───────────────────────────────────────────────────────────────────────── */
.con-anim .sube{opacity:0;transform:translateY(16px)}
.con-anim .sube.vino{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e)}