/* Memoria del Agua — página de investigación (repositorio)
 * Se carga DESPUÉS de territorio.css: reutiliza fuentes, cortina, audio, conceptos y pie.
 * Escritorio: medidas del archivo de diseño (1920 px). --u = 1 px del diseño.
 */
:root{--i-blue:#3083CD;--i-cyan:#7FF0FF}
body.investigacion{color:var(--i-blue)}
#investigacion{background:#fff}

/* ---------- Encabezado azul ---------- */
.i-header{background:var(--i-blue);color:var(--i-cyan)}
.i-logo{display:block;width:calc(542 * var(--u));aspect-ratio:542/56;background:var(--i-cyan);
  -webkit-mask:url('./logo-memoria-del-agua.svg') no-repeat center/contain;mask:url('./logo-memoria-del-agua.svg') no-repeat center/contain}
.i-tabs{display:flex;justify-content:space-between;align-items:center;height:calc(70 * var(--u));min-height:40px;padding:0 calc(100 * var(--u)) 0 calc(98 * var(--u));background:var(--i-cyan);color:var(--i-blue);font-size:max(calc(24 * var(--u)),12px)}
.i-scroll{display:flex;align-items:center;gap:calc(18 * var(--u));text-decoration:none}
.i-scroll svg{width:calc(40 * var(--u));min-width:16px;height:auto}
.i-nums{white-space:nowrap;letter-spacing:.04em}
.i-num{text-decoration:none;padding:4px 2px}
a.i-num:hover{text-decoration:underline}
.i-num.is-current{color:#FF959C}
.i-num.is-pending{opacity:.75}

/* ---------- Portada: collage + título ---------- */
.i-hero{position:relative;height:calc(1421 * var(--u));overflow:hidden;background:#e9eef0}
.i-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.4s var(--ease)}
body.is-entering .i-hero img{transform:scale(1.12);transition:none}
body.is-leaving .i-hero img{transform:scale(1.06);transition:transform .4s cubic-bezier(.55,0,.7,.4)}
.i-hero h1{position:absolute;right:calc(100 * var(--u));bottom:calc(60 * var(--u));margin:0;color:#fff;font-weight:900;font-size:calc(245 * var(--u));line-height:.8;letter-spacing:-.01em;text-align:left;text-shadow:0 2px 24px rgba(0,0,0,.18)}

/* ---------- Investigador, pregunta y entrada ---------- */
.i-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(100 * var(--u));padding:calc(80 * var(--u)) calc(100 * var(--u)) 0}
.i-person{grid-column:2;grid-row:1;text-align:right;font-size:max(calc(32 * var(--u)),14px);line-height:1.2}
.i-person p{margin:0}
.i-person .i-person-name{font-size:max(calc(40 * var(--u)),17px);font-weight:400;margin-bottom:calc(6 * var(--u))}
.i-person .i-person-inst{font-weight:700}
.i-intro-left{grid-column:1;grid-row:1 / span 2}
.i-question{margin:0;color:#FF959C;font-weight:900;font-size:calc(165 * var(--u));line-height:.92;letter-spacing:-.01em;hyphens:manual}
.i-lema{margin:calc(80 * var(--u)) 0 0;font-size:max(calc(45 * var(--u)),15px);line-height:1.2;max-width:calc(700 * var(--u))}
.i-intro-right{grid-column:2;grid-row:2;display:flex;flex-direction:column;padding-top:calc(90 * var(--u))}
.i-intro-right .t-pdf{margin:0 0 calc(70 * var(--u));align-self:flex-end}
.i-intro-text{font-size:max(calc(30 * var(--u)),15px);line-height:1.53}
.i-intro-text p{margin:0}
.i-keys{padding-top:calc(220 * var(--u))}

/* ---------- Bloques de pregunta (color) ---------- */
.i-block{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(100 * var(--u));min-height:calc(1080 * var(--u));padding:calc(110 * var(--u)) calc(100 * var(--u));background:var(--bg);color:var(--fg)}
.i-block h2{margin:0;font-weight:900;font-size:calc(90 * var(--u));line-height:1.2;max-width:calc(760 * var(--u))}
.i-block-text{font-size:max(calc(30 * var(--u)),15px);line-height:1.2}
.i-block-text p{margin:0}

/* ---------- Gráfico con descripción ---------- */
.i-chart{display:grid;grid-template-columns:calc(1000 * var(--u)) 1fr;align-items:start;column-gap:calc(262 * var(--u));margin:0;padding:calc(40 * var(--u)) calc(100 * var(--u)) calc(60 * var(--u)) calc(128 * var(--u))}
.i-chart img{width:calc(885 * var(--u));height:auto}
.i-chart figcaption{padding-top:calc(110 * var(--u));max-width:calc(430 * var(--u));font-size:max(calc(30 * var(--u)),14px);line-height:1.2}

/* ---------- Foto a todo el ancho ---------- */
.i-photo{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#e9eef0}
.i-photo img{width:100%;height:100%;object-fit:cover}
.i-photo figcaption{position:absolute;left:calc(100 * var(--u));top:calc(100 * var(--u));max-width:calc(430 * var(--u));color:#fff;font-size:max(calc(30 * var(--u)),14px);line-height:1.2;text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* ---------- Referencias ---------- */
.i-refs{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(100 * var(--u));padding:calc(130 * var(--u)) calc(100 * var(--u)) calc(200 * var(--u))}
.i-refs h2,.i-repo h2{margin:0;font-weight:900;font-size:calc(90 * var(--u));line-height:1.1}
.i-refs-list{list-style:none;margin:calc(10 * var(--u)) 0 0;padding:0;max-width:calc(660 * var(--u));font-size:max(calc(16 * var(--u)),13px);line-height:1.4}
.i-refs-list li+li{margin-top:calc(22 * var(--u))}
.i-refs-list a{font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.i-refs-list a:hover{text-decoration:underline}

/* ---------- Repositorio general ---------- */
.i-repo{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(100 * var(--u));padding:calc(200 * var(--u)) calc(100 * var(--u)) calc(250 * var(--u))}
.i-repo-list{list-style:none;margin:calc(8 * var(--u)) 0 0;padding:0;font-size:max(calc(35 * var(--u)),15px);line-height:1.2}
.i-repo-item{display:inline-block;padding:calc(2 * var(--u)) 0;text-decoration:none}
a.i-repo-item:hover{text-decoration:underline;text-underline-offset:.2em}
.i-repo-item.is-current{color:#FF959C}
.i-repo-item.is-pending{opacity:.75}

/* ==========================================================================
   Celular (80% del público)
   ========================================================================== */
@media (max-width:820px){
  .i-logo{width:calc(210 * var(--m))}
  .i-tabs{height:auto;padding:10px 16px;gap:10px;flex-wrap:wrap;font-size:12px}
  .i-scroll{gap:6px}
  .i-scroll svg{width:16px}
  .i-nums{font-size:14px}
  .i-num{display:inline-block;padding:6px 1px}

  .i-hero{height:auto;aspect-ratio:4/3.6}
  .i-hero h1{right:16px;bottom:18px;font-size:calc(74 * var(--m))}

  .i-intro{grid-template-columns:1fr;padding:28px 16px 0;row-gap:0}
  .i-person{grid-column:1;grid-row:auto;text-align:left;font-size:14px;line-height:1.3}
  .i-person .i-person-name{font-size:19px;margin-bottom:2px}
  .i-intro-left{grid-column:1;grid-row:auto;margin-top:30px}
  .i-question{font-size:calc(58 * var(--m));line-height:.92}
  .i-lema{margin-top:18px;font-size:15px;max-width:none}
  .i-intro-right{grid-column:1;grid-row:auto;padding-top:22px}
  .i-intro-right .t-pdf{margin:0 0 14px;padding:6px 0}
  .i-intro-text{font-size:17px;line-height:1.45}
  .i-keys{padding-top:40px}

  .i-block{grid-template-columns:1fr;min-height:0;padding:48px 16px 52px;row-gap:22px}
  .i-block h2{font-size:30px;line-height:1.12;max-width:none}
  .i-block-text{font-size:17px;line-height:1.45}

  .i-chart{grid-template-columns:1fr;row-gap:14px;padding:28px 16px 36px}
  .i-chart img{width:100%;max-width:520px}
  .i-chart figcaption{padding-top:0;max-width:none;font-size:15px;line-height:1.35}

  /* En celular la descripción va bajo la foto (sobre la imagen quedaría demasiado chica) */
  .i-photo{aspect-ratio:auto;overflow:visible;background:none}
  .i-photo img{height:auto;aspect-ratio:16/9}
  .i-photo figcaption{position:static;max-width:none;padding:12px 16px 4px;color:var(--i-blue);font-size:15px;line-height:1.35;text-shadow:none}

  .i-refs,.i-repo{grid-template-columns:1fr;row-gap:18px;padding:48px 16px 40px}
  .i-refs h2,.i-repo h2{font-size:32px}
  .i-refs-list{max-width:none;font-size:14px;line-height:1.45}
  .i-refs-list li+li{margin-top:14px}
  .i-repo{padding-bottom:56px}
  .i-repo-list{font-size:17px;line-height:1.25}
  .i-repo-item{padding:7px 0}
}
/* Escritorio: los títulos del investigador en una línea, extendiéndose hacia la izquierda como en el diseño */
/* Datos del investigador: siempre dentro de su columna, para no cruzarse con la pregunta */
/* ---------- Página provisoria (investigacion.html?n=0N): portada sin foto ---------- */
.i-hero.is-plain{height:calc(760 * var(--u));background:var(--i-blue)}
.i-hero-num{position:absolute;left:calc(92 * var(--u));top:calc(16 * var(--u));font-size:calc(406 * var(--u));line-height:1;color:var(--i-cyan);font-weight:900;letter-spacing:-.04em}
.i-soon{display:block;padding-bottom:calc(220 * var(--u))}
.i-soon .i-lema{margin:0 0 calc(30 * var(--u))}
.i-soon .i-intro-text{max-width:calc(900 * var(--u))}
@media (max-width:820px){
  .i-hero.is-plain{aspect-ratio:auto;height:62vw;min-height:230px}
  .i-hero-num{left:12px;top:4px;font-size:calc(150 * var(--m))}
  .i-soon{padding-bottom:56px}
  .i-soon .i-intro-text{max-width:none}
}
/* El título de portada nunca más ancho que la pantalla: así el ajuste automático lo achica si no cabe */
.i-hero h1{max-width:calc(100% - 200 * var(--u))}
@media (max-width:820px){
  .i-hero h1{max-width:calc(100% - 32px)}
  .i-hero.is-plain{height:78vw;min-height:280px}
}
@media (max-width:400px){
  /* Barra 01 / … / 08 completa en teléfonos angostos */
  .i-nums{font-size:12px;letter-spacing:0}
  .i-nums>span[aria-hidden]{margin:0 -1px}
}
/* ---------- Foto con símbolo y cita (ej. Investigación 02) ---------- */
.i-photo-mark{position:absolute;left:calc(500 * var(--u));top:50%;transform:translateY(-50%);color:#fff;font-family:Arial,sans-serif;font-size:calc(511 * var(--u));line-height:1;pointer-events:none}
.i-photo-quote{position:absolute;left:calc(1390 * var(--u));top:calc(160 * var(--u));max-width:calc(440 * var(--u));margin:0;color:var(--qc,#F5FFB7);font-size:max(calc(30 * var(--u)),14px);line-height:1.2;font-weight:300}
.i-photo-quote p{margin:0}
/* ---------- Video ---------- */
.i-video{margin:0;background:#000}
.i-video-poster,.i-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0}
.i-video-poster{position:relative;cursor:pointer;background:#0d2c33;overflow:hidden}
.i-video-poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s}
.i-video-poster:hover img{transform:scale(1.02);filter:brightness(.9)}
.i-video-play{position:absolute;left:50%;top:50%;width:calc(150 * var(--u));min-width:72px;aspect-ratio:1;border-radius:50%;background:var(--i-blue);color:#fff;display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .2s var(--ease)}
.i-video-play svg{width:46%;margin-left:6%}
.i-video-poster:hover .i-video-play{transform:translate(-50%,-50%) scale(1.06)}
.i-video-poster:focus-visible{outline:4px solid var(--i-cyan);outline-offset:-4px}
.i-video-title{position:absolute;left:calc(40 * var(--u));right:calc(40 * var(--u));top:calc(34 * var(--u));color:#fff;font-weight:700;font-size:max(calc(34 * var(--u)),14px);line-height:1.2;text-align:left;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.i-video figcaption{padding:12px calc(100 * var(--u));background:#fff;font-size:max(calc(20 * var(--u)),13px)}
@media (max-width:820px){
  .i-photo.has-quote{position:relative}
  .i-photo.has-quote .i-photo-mark{left:50%;transform:translate(-50%,-50%);top:calc(50vw * 9/16);font-size:calc(160 * var(--m))}
  .i-photo-quote{position:static;max-width:none;padding:14px 16px 4px;color:var(--i-blue);font-size:17px;line-height:1.35}
  .i-video-title{left:12px;right:12px;top:10px;font-size:13px}
  .i-video figcaption{padding:10px 16px}
}
/* Descripción de foto a la derecha (pieLado: 'derecha', ej. Investigación 03) */
@media (min-width:821px){.i-photo.cap-right figcaption{left:auto;right:calc(100 * var(--u));text-align:left}}
@media print{
  .i-hero{height:auto;aspect-ratio:4/3}
  .i-hero.is-plain{aspect-ratio:auto}
}
@media print{.i-video{background:#fff}.i-video .i-print-only{margin:8px 16px 0}}
/* Celular: anclada, la barra queda en una sola línea con los números (ocupa menos pantalla) */
@media (max-width:820px){
  .i-tabs.is-stuck{padding-top:8px;padding-bottom:8px}
  .i-tabs.is-stuck .i-scroll{display:none}
}

/* Botón "mapa" en la barra anclada de las investigaciones */
.i-tabs{gap:calc(30 * var(--u))}
.i-nums{margin-left:auto}
.i-map{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--i-blue);color:var(--i-cyan);text-decoration:none;white-space:nowrap}
.i-map svg{width:18px;height:auto}
.i-map:hover{background:#1f6db3}
@media (max-width:820px){.i-tabs{flex-wrap:nowrap}.i-tabs:not(.is-stuck){flex-wrap:wrap}.i-map{padding:6px 9px}.i-map span{display:none}.i-map svg{width:20px}}