/* =========================================================
   JM Argentina — capa "editorial"
   Estructura inspirada en el estilo "AI for Business" de Refero
   (lienzo de color, tarjetas planas, radios grandes, nav en píldora,
   titulares condensados enormes en mayúscula, etiquetas monoespaciadas),
   pero con la paleta oficial del Manual del Símbolo.
   Se carga DESPUÉS de styles.css. Para volver al estilo anterior,
   alcanza con quitar el <link> a este archivo.
   ========================================================= */

/* ---------- Tipografías (descargadas, licencia OFL — ver assets/fonts) ---------- */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* Superficies (equivalentes JM de canvas / card / inverted / mist) */
  --lienzo: #E4ECF4;          /* fondo de página: gris-celeste derivado de --celeste y --azul */
  --papel: #FFFFFF;           /* tarjetas */
  --niebla: #F2F6FA;          /* paneles suaves, tarjetas sobre blanco */

  --display: 'Barlow Condensed', 'Anton', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Radios del sistema */
  --radio-btn: 8px;
  --radio-card: 28px;
  --radio-card-lg: 48px;
  --radio-pill: 64px;
  --radio: 12px;
  --radio-lg: var(--radio-card);
}

body { background: var(--lienzo); }

/* ---------- Titulares: condensados, mayúscula, interlineado 0.9 ---------- */
.h1, .h2, main h1,
.lockup-name, .brand-name,
.cal-nav h2, .prose h3, .timeline .year, .ficha-anio, .ev-date b {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.h1 { font-size: clamp(52px, 8.4vw, 116px); line-height: .9; }
.h2 { font-size: clamp(40px, 5.4vw, 72px); line-height: .92; }
.h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: .95; }

.card h3, .feature h3, .sant-panel h2, .dlg-head h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 30px; line-height: .95; letter-spacing: 0;
}
.feature--main h3 { font-size: clamp(40px, 5vw, 64px); line-height: .9; }
.prose h3 { font-size: 34px; line-height: .95; }
.timeline .year { font-size: 26px; line-height: 1; }
.ficha-anio { font-size: 24px; }
.cal-nav h2 { font-size: 36px; line-height: 1; }
.lead { font-size: 19px; line-height: 1.5; }

/* ---------- Etiquetas técnicas en monoespaciada ---------- */
.eyebrow, .num, .feature-num, .steps .label, .kind, .mat-card .kind, .asis-item .kind,
.chat-mat-top, .cal-head span, .ficha-sec h3, .lib-ext, .stage-card span, .stage-picker span,
.result-goal small, .pending, .tag, .ev-date span {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0;
}
.eyebrow { font-size: 13px; }
.eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); margin-right: 10px; vertical-align: 1px; }
.section--navy .eyebrow::before, .section--azul .eyebrow::before { background: var(--celeste); }

/* ---------- Encabezado: barra transparente con píldora de navegación ---------- */
.site-header { background: transparent; border-bottom: 0; }
.site-header .container { padding-top: 20px; padding-bottom: 20px; }
.brand-name { font-size: 28px; line-height: .9; color: var(--noche); }
.brand-lema { color: var(--azul); }
.nav { background: var(--papel); border-radius: var(--radio-card-lg); padding: 6px; gap: 2px; }
.nav a { border-radius: var(--radio-pill); padding: 10px 16px; font-weight: 500; font-size: 15px; color: var(--tinta-2); }
.nav a:hover { background: var(--niebla); color: var(--noche); }
.nav a[aria-current="page"] { background: var(--noche); color: #fff; font-weight: 600; }
.nav-toggle { border: 0; background: var(--papel); border-radius: var(--radio-pill); padding: 8px 18px; color: var(--noche); }
@media (max-width: 1180px) {
  .nav { border-radius: var(--radio-card); padding: 8px; margin-top: 4px; }
}

/* ---------- Botones: radio chico, planos ---------- */
.btn { border-radius: var(--radio-btn); font-weight: 600; border-width: 1.5px; }
.btn:hover { transform: none; }
.btn--primary { background: var(--noche); }
.btn--primary:hover { background: var(--azul); }
.btn--sun { font-weight: 700; }
.btn--outline { background: transparent; border-color: var(--noche); color: var(--noche); }
.btn--outline:hover { background: var(--noche); color: #fff; }
.btn--sm { border-radius: var(--radio-btn); }

/* Píldoras y etiquetas: totalmente redondeadas, acento celeste (rol del "mint") */
.pill, .chip, .tag, .chat-chip { border-radius: var(--radio-pill); }
.pill { border-width: 0; background: var(--papel); }
.chip { background: var(--celeste-medio); color: var(--noche); }
.tag--celeste, .tag--suave { background: var(--celeste-medio); color: var(--noche); }

/* ---------- Secciones: alternan lienzo / blanco / bloque oscuro con cúpula ---------- */
.section { padding: 88px 0; }
.section--tint, .section--celeste { background: var(--papel); }
.section--navy, .section--azul {
  border-radius: var(--radio-card-lg) var(--radio-card-lg) 0 0;
  padding: 104px 0;
}
@media (min-width: 900px) {
  .section--navy, .section--azul { border-radius: 64px 64px 0 0; }
}
.section--navy + .section, .section--azul + .section { margin-top: 0; }

/* ---------- Tarjetas planas: sin sombra, sin borde visible, radios grandes ---------- */
.card, .feature, .mat-card, .asis-item, .ev-card, .rama-card, .lib-list, .lib-index,
.cal, .prov-list, .morph-img, .asis-ans, .asis-opt, .stage-picker a {
  border-color: transparent;
  box-shadow: none;
}
.card, .feature { border-radius: var(--radio-card); padding: 28px; }
.feature:hover { transform: none; }
.card--tint, .card--sun { background: var(--papel); }
.card--sun { box-shadow: inset 0 0 0 2px var(--amarillo); }
.card--dashed { border-color: var(--linea-2); }
.feature--main { border-radius: var(--radio-card-lg); padding: 40px; background: var(--noche); border-color: var(--noche); }
.feature--main p { color: var(--texto-claro); }

/* Sobre fondo blanco, las tarjetas pasan a "niebla" para separarse sin bordes */
.section--tint .card, .section--tint .feature:not(.feature--main),
.section--celeste .card, .section--tint .mat-card, .section--tint .asis-item {
  background: var(--niebla);
}

.mat-card, .asis-item, .ev-card { border-radius: 24px; }
.lib-list, .lib-index, .cal, .prov-list, #mapa, .morph-img { border-radius: var(--radio-card); }
#mapa { border-color: transparent; }
.lib-ext { border-radius: var(--radio-btn); background: var(--celeste-medio); color: var(--noche); }
.ev-date { border-radius: 18px; background: var(--noche); }
.rama-card { border-radius: 20px; }
.rama-card .rama-ico { background: var(--noche); }
.stage-card { border-radius: 24px; background: var(--papel); }
.sant-panel { border-radius: var(--radio-card); background: var(--papel); }
.how li { background: var(--papel); border-radius: var(--radio-card); }
.section--tint .how li { background: var(--niebla); }
.list-plain li { border-radius: var(--radio-btn); }

/* ---------- Formularios ---------- */
.input, .filters select, .chat-input, .admin-row select { border-width: 1.5px; border-radius: var(--radio); }
.search .input { background: var(--papel); border-color: transparent; }
.search .input:focus { border-color: var(--noche); box-shadow: none; }

/* ---------- Hero ---------- */
.hero { padding: 48px 0 32px; }
.hero .h1 span { color: var(--azul); }
.hero-symbol { background: var(--papel); border-radius: var(--radio-card-lg); padding: 40px 32px; }
.lockup-name { font-size: 40px; line-height: .9; color: var(--noche); }

/* ---------- Pie: también con cúpula ---------- */
.site-footer { border-radius: var(--radio-card-lg) var(--radio-card-lg) 0 0; margin-top: 24px; }
.section--navy + .site-footer, .section--azul + .site-footer,
main:has(> .section--navy:last-child) + .site-footer { margin-top: 0; border-radius: 0; }
.site-footer .brand-name { color: #fff; }

/* ---------- Detalles ---------- */
.prose mark { background: var(--amarillo); }
.tour-pop { border-radius: 24px; }
.chat-panel, .modal, .dlg { border-radius: var(--radio-card); }
@media (max-width: 600px) {
  .chat-panel, .modal { border-radius: 0; }
  .section { padding: 64px 0; }
  .section--navy, .section--azul { padding: 72px 0; }
  .card, .feature { padding: 22px; }
  .feature--main { padding: 28px; border-radius: var(--radio-card); }
}

/* Aire entre titular condensado y bajada */
.h1 + .lead, .h2 + .lead, .h2 + .muted, .h1 + p, .h2 + p { margin-top: 10px; }

/* =========================================================
   Ficha de rama en estilo revista (ramas.html)
   Una grilla con lugares fijos para 6 fotos, titulares
   condensados enormes y etiquetas monoespaciadas.
   ========================================================= */
#fichaModal.is-revista { width: min(1040px, calc(100vw - 24px)); }
#fichaModal.is-revista .dlg-body { background: var(--lienzo); padding: 20px; }
#fichaModal.is-revista .ficha-sec { border-top-color: var(--linea-2); }

.rv {
  display: grid; gap: 14px; color: var(--noche);
  grid-template-columns: 200px minmax(0, 1fr) 240px;
  grid-template-rows: 320px minmax(360px, auto) 96px minmax(260px, auto) auto;
  grid-template-areas:
    "f1 head f2"
    "quien f3 f3"
    "f4 acts f6"
    "f5 acts f6"
    "pie pie f6";
}
.rv h3, .rv p { margin: 0; }
.rv-label { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.rv-vacio { opacity: .45; }

/* Fotos */
.rv-foto { position: relative; margin: 0; overflow: hidden; min-height: 0; background: repeating-linear-gradient(135deg, #262B63 0 14px, #2c3270 14px 28px); }
.rv-f3, .rv-f6 { background: repeating-linear-gradient(135deg, #1B1F4F 0 14px, #222760 14px 28px); }
.rv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.rv-foto.has-img::after { content: ""; position: absolute; inset: 0; background: var(--azul); mix-blend-mode: multiply; opacity: .22; pointer-events: none; }
.rv-ph { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.rv-ph b { font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--amarillo); }
.rv-ph span { font-weight: 600; font-size: 13px; line-height: 1.25; color: #fff; }
.rv-ph small { font-family: var(--mono); font-size: 10px; color: var(--texto-claro); }
.rv-f1 { grid-area: f1; } .rv-f2 { grid-area: f2; } .rv-f3 { grid-area: f3; }
.rv-f4 { grid-area: f4; } .rv-f5 { grid-area: f5; } .rv-f6 { grid-area: f6; }
.rv-f3 .rv-ph { padding: 18px; } .rv-f3 .rv-ph span { font-size: 18px; }
.rv-f4 .rv-ph small { display: none; }

/* Cabecera */
.rv-head { grid-area: head; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; container-type: inline-size; }
.rv-meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--tinta-2); }
.rv-nombre { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .82; font-size: 72px; font-size: min(112px, calc(100cqi / (var(--rv-w) * .5))); overflow-wrap: anywhere; }
.rv-nombre span { display: block; color: var(--azul); }
.rv-stat { display: flex; align-items: flex-end; gap: 14px; }
.rv-num { font-family: var(--display); font-weight: 700; font-size: 88px; line-height: .8; background: var(--amarillo); color: var(--noche); padding: 8px 10px 0; }
.rv-stat strong { display: block; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: .9; text-transform: uppercase; margin-bottom: 6px; }
.rv-stat small { font-family: var(--mono); font-size: 11px; color: var(--tinta-2); }

/* Quiénes somos */
.rv-quien { grid-area: quien; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; text-align: right; min-width: 0; }
.rv-quien .rv-label { justify-content: flex-end; }
.rv-lead { display: flex; gap: 12px; justify-content: flex-end; }
.rv-bar { flex: 0 0 10px; background: var(--noche); }
.rv-lead p { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .95; overflow-wrap: anywhere; }
.rv-lead--l p { font-size: 38px; } .rv-lead--m p { font-size: 30px; } .rv-lead--s p { font-size: 23px; }
.rv-texto { font-size: 13px; line-height: 1.55; color: var(--tinta-2); }

/* Actividades */
.rv-acts { grid-area: acts; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rv-acts .rv-label { padding-bottom: 6px; }
.rv-act { font-family: var(--display); font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.rv-act--l { font-size: 68px; line-height: .86; }
.rv-act--m { font-size: 34px; line-height: .95; color: var(--azul); }
.rv-act--s { font-size: 26px; line-height: .95; color: var(--azul); }
.rv-rayas { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.rv-rayas span { height: 5px; background: var(--noche); }
.rv-rayas span:first-child { height: 22px; }

/* Pie */
.rv-pie { grid-area: pie; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.rv-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-enc { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .88; overflow-wrap: anywhere; }
.rv-enc--l { font-size: 54px; } .rv-enc--m { font-size: 40px; } .rv-enc--s { font-size: 28px; }
.rv-jefe { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: .95; text-transform: uppercase; }
.rv-contacto { font-size: 13px; overflow-wrap: anywhere; }
.rv-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rv-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; background: var(--noche); color: #fff; text-decoration: none; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.rv-btn:hover { background: var(--azul); color: #fff; }
.rv-btn--sun { background: var(--amarillo); color: var(--noche); }
.rv-btn--sun:hover { background: #f5b640; color: var(--noche); }
.rv-btn--vacio { background: transparent; color: var(--tinta-2); border: 1.5px dashed var(--gris); }

/* Editor: rótulo de cada lugar de foto */
.foto-lugar { display: flex; flex-direction: column; gap: 4px; }
.ficha-fotos .ph strong { color: var(--noche); }

/* Celular: una columna, fotos de a pares */
@media (max-width: 760px) {
  #fichaModal.is-revista .dlg-body { padding: 14px; }
  .rv {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head head"
      "f3 f3"
      "quien quien"
      "f1 f2"
      "acts acts"
      "f4 f4"
      "f5 f6"
      "pie pie";
  }
  .rv-head .rv-nombre { font-size: min(84px, calc(100cqi / (var(--rv-w) * .5))); }
  .rv-num { font-size: 68px; }
  .rv-f3 { height: 240px; } .rv-f1, .rv-f2, .rv-f5, .rv-f6 { height: 210px; } .rv-f4 { height: 90px; }
  .rv-quien { text-align: left; }
  .rv-quien .rv-label { justify-content: flex-start; }
  .rv-lead { justify-content: flex-start; }
  .rv-lead--l p { font-size: 32px; } .rv-lead--m p { font-size: 26px; }
  .rv-texto { font-size: 14px; }
  .rv-act--l { font-size: 48px; } .rv-act--m { font-size: 28px; } .rv-act--s { font-size: 22px; }
  .rv-pie { grid-template-columns: minmax(0, 1fr); }
  .rv-enc--l { font-size: 46px; } .rv-enc--m { font-size: 34px; }
  .rv-links .rv-btn { flex: 1 1 140px; justify-content: center; min-height: 48px; }
}
.rv-meta span:first-child { white-space: nowrap; }
#rvVideo .video-box { width: 100%; max-width: 680px; padding-top: 0; aspect-ratio: 16 / 9; }