/* Memoria del Agua — página de la Exposición ("¿Podemos dar forma al agua?")
 * Se carga DESPUÉS de territorio.css (fuentes, encabezado, audio, conceptos, cortina y pie).
 * Escritorio: medidas del diseño Expo (1920 px). --u = 1 px del diseño.
 */
:root{--e-lila:#8084CC;--e-cyan:#7FF0FF;--e-azul:#3083CD;--e-rosa:#FF959C;--e-lila-claro:#F1F1FA}
body.exposicion{color:var(--e-lila)}
#exposicion{background:#fff}

/* Encabezado lila y barra anclada */
.e-header{background:var(--e-lila);color:var(--e-cyan)}
.e-logo{display:block;width:calc(542 * var(--u));aspect-ratio:542/56;background:var(--e-cyan);
  -webkit-mask:url('./logo-memoria-del-agua.svg') no-repeat center/contain;mask:url('./logo-memoria-del-agua.svg') no-repeat center/contain}
.e-tabs{position:sticky;top:0;z-index:30;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(--e-cyan);color:var(--e-azul);font-size:max(calc(24 * var(--u)),12px);transition:box-shadow .25s ease}
.e-tabs.is-stuck{box-shadow:0 6px 18px rgba(0,94,130,.16)}
.e-tabs a{display:inline-flex;align-items:center;gap:calc(18 * var(--u));text-decoration:none;color:inherit}
.e-tabs svg{width:calc(40 * var(--u));min-width:16px;height:auto}
.e-tabs-right{display:inline-flex;align-items:center;gap:calc(40 * var(--u))}
.e-map{gap:8px!important;padding:6px 12px;border-radius:999px;background:var(--e-azul);color:var(--e-cyan)!important}
.e-map svg{width:18px;min-width:0}
.e-tabs a:focus{outline:none}
.e-tabs a:focus-visible{outline:2px solid currentColor;outline-offset:-5px}

/* Dibujo y título */
.e-diagram{margin:calc(60 * var(--u)) calc(100 * var(--u)) 0}
.e-diagram img{width:100%;height:auto}
.e-intro{padding:calc(20 * var(--u)) calc(100 * var(--u)) 0;scroll-margin-top:12px}
.e-intro h1{margin:0;font-weight:900;font-size:calc(250 * var(--u));line-height:.82;letter-spacing:-.01em;color:var(--e-rosa)}
.e-sub{margin:calc(40 * var(--u)) 0 0;font-size:max(calc(45 * var(--u)),15px);line-height:1.15;color:var(--e-lila)}
.e-keys{padding-top:calc(100 * var(--u))}
.e-keys .t-concepts{color:var(--e-lila)}
.e-keys h3{color:var(--e-lila)}

/* Entrada + Descargar pdf */
.e-entrada{display:grid;grid-template-columns:1fr auto;gap:calc(60 * var(--u));padding:calc(80 * var(--u)) calc(100 * var(--u)) 0}
.e-entrada-text{max-width:calc(1250 * var(--u));font-size:max(calc(32 * var(--u)),15px);line-height:1.4}
.e-entrada-text p{margin:0}
.e-entrada-text p+p{margin-top:.75em}
.e-entrada .t-pdf{align-self:start;margin:0;color:var(--e-lila)}
.exposicion .t-audio{padding-top:calc(90 * var(--u))}

/* Índice de secciones */
.e-indice{display:flex;flex-wrap:wrap;gap:calc(14 * var(--u));padding:calc(100 * var(--u)) calc(100 * var(--u)) 0;font-size:max(calc(24 * var(--u)),13px)}
.e-indice a{display:inline-flex;align-items:baseline;gap:.6em;padding:.55em 1.1em;border:2px solid var(--e-lila);border-radius:999px;color:var(--e-lila);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.e-indice b{color:var(--e-rosa);font-weight:900}
.e-indice a:hover,.e-indice a:focus-visible{background:var(--e-lila);color:#fff;outline:none}
.e-indice a:hover b,.e-indice a:focus-visible b{color:var(--e-cyan)}

/* Secciones con gráficos */
.e-sec{padding:calc(140 * var(--u)) calc(100 * var(--u)) 0;scroll-margin-top:calc(var(--bar-h,50px) + 8px)}
.e-sec h2{margin:0 0 calc(50 * var(--u));font-weight:900;font-size:calc(90 * var(--u));line-height:1;letter-spacing:-.01em;color:var(--e-lila)}
.e-num{display:block;margin-bottom:calc(14 * var(--u));font-size:max(calc(26 * var(--u)),14px);letter-spacing:.08em;color:var(--e-rosa)}
.e-fig{position:relative;margin:0}
.e-fig a{display:block;cursor:zoom-in}
.e-fig img{display:block;width:100%;height:auto}
/* Pastilla "ampliar" sobre cada gráfico */
.e-fig::after{content:'⤢ ampliar';position:absolute;right:10px;bottom:10px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);border:1.5px solid var(--e-azul);color:var(--e-azul);font:700 12px/1 'Doto','Consolas',monospace;letter-spacing:.02em;pointer-events:none;opacity:0;transition:opacity .2s}
.e-fig:hover::after{opacity:1}
.e-cap{margin:calc(24 * var(--u)) 0 0;max-width:calc(1100 * var(--u));font-size:max(calc(22 * var(--u)),14px);line-height:1.4;opacity:.85}
.e-cap a{color:var(--e-azul);text-underline-offset:3px}

/* Leyenda de islas */
.e-islas{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(40 * var(--u));margin:calc(40 * var(--u)) 0 0;padding:0;font-size:max(calc(22 * var(--u)),14px);line-height:1.3}
.e-islas li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.e-islas b{grid-row:span 2;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--e-rosa);color:#fff;font-size:1.3em}
.e-islas span{font-weight:900}
.e-islas small{font-size:.9em;opacity:.85}

/* Color: muestras reales */
.e-paletas{display:grid;grid-template-columns:1fr 1.5fr;gap:calc(80 * var(--u));align-items:start}
.e-paleta h3{margin:0 0 calc(20 * var(--u));font-size:max(calc(26 * var(--u)),14px);font-weight:700;color:var(--e-lila)}
.e-paleta ul{list-style:none;margin:0;padding:0;display:grid}
.e-base{grid-template-columns:repeat(3,1fr)}
.e-general{grid-template-columns:repeat(5,1fr)}
.e-paleta button{display:flex;align-items:flex-end;width:100%;aspect-ratio:1/1;padding:8px;border:0;border-radius:0;background:var(--c);color:#fff;font:700 max(calc(18 * var(--u)),11px)/1 'Doto','Consolas',monospace;letter-spacing:.02em;cursor:copy;transition:transform .15s ease,box-shadow .15s ease}
.e-base button{aspect-ratio:4/3}
.e-paleta button.claro{color:#403C4A}
.e-paleta button:hover,.e-paleta button:focus-visible{position:relative;z-index:1;transform:scale(1.06);box-shadow:0 6px 18px rgba(64,60,74,.25);outline:none}
.e-paleta button.copiado::before{content:'copiado';position:absolute;top:8px;left:8px;font-size:.85em}

.e-identidad{display:grid;grid-template-columns:1.9fr 1fr;gap:calc(60 * var(--u));align-items:center}

/* La memoria del agua: dos columnas */
.e-memoria-text{columns:2;column-gap:calc(140 * var(--u));font-size:max(calc(22 * var(--u)),15px);line-height:1.4;font-weight:400}
.e-memoria-text p{margin:0 0 calc(16 * var(--u));break-inside:avoid}
.e-refran{font-weight:900;font-size:1.25em;line-height:1.2;color:var(--e-lila)}
.e-memoria-text .e-grande{font-size:2.1em;line-height:1.02;color:var(--e-rosa);margin-bottom:calc(30 * var(--u))}
.e-memoria-text .e-cita{margin:calc(34 * var(--u)) 0;padding-left:calc(24 * var(--u));border-left:4px solid var(--e-rosa);font-weight:900;font-size:1.6em;line-height:1.08;color:var(--e-rosa)}
/* Tarjetas de los tres territorios (enlazan a sus páginas) */
.e-terr{display:block;break-inside:avoid;margin:0 0 calc(18 * var(--u));padding:calc(26 * var(--u)) calc(30 * var(--u));border-radius:14px;background:var(--e-lila-claro);color:var(--e-lila);text-decoration:none;transition:background .2s,color .2s,transform .2s}
.e-terr-nom{display:block;font-size:.95em;color:var(--e-azul);margin-bottom:.4em}
.e-terr-txt{display:block}
.e-terr strong{display:block;margin-top:.5em;font-weight:900;font-size:1.3em;line-height:1.15;color:var(--e-rosa)}
.e-terr-ir{display:block;margin-top:.6em;text-align:right;font-size:.85em;color:var(--e-azul)}
.e-terr:hover,.e-terr:focus-visible{background:var(--e-lila);color:#fff;outline:none;transform:translateY(-2px)}
.e-terr:hover .e-terr-nom,.e-terr:hover .e-terr-ir,.e-terr:focus-visible .e-terr-nom,.e-terr:focus-visible .e-terr-ir{color:var(--e-cyan)}
.e-terr:hover strong,.e-terr:focus-visible strong{color:#fff}
/* Cierre */
.e-cierre{display:grid;grid-template-columns:1fr 1fr;gap:calc(140 * var(--u));margin-top:calc(110 * var(--u));padding-top:calc(60 * var(--u));border-top:2px dashed var(--e-lila)}
.e-cierre p{margin:0;font-weight:900;font-size:calc(60 * var(--u));line-height:1.02;color:var(--e-rosa)}
.e-cierre p+p{color:var(--e-lila)}

/* Créditos: tres columnas */
.e-creditos{padding-bottom:calc(140 * var(--u))}
.e-creditos-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(60 * var(--u));font-size:max(calc(22 * var(--u)),14px);line-height:1.3}
.e-creditos dl{margin:0}
.e-cred{margin-top:calc(26 * var(--u))}
.e-cred:first-child{margin-top:0}
.e-creditos dt{font-weight:900}
.e-creditos dd{margin:0;font-weight:400}
.e-cred-linea{margin-top:calc(4 * var(--u))}
.e-cred-linea dt,.e-cred-linea dd{display:inline}
.e-cred-linea+.e-cred:not(.e-cred-linea){margin-top:calc(26 * var(--u))}

/* Visor de imágenes (tocar un gráfico lo abre a pantalla completa) */
.e-visor{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:64px 12px 52px;background:#fff;opacity:0;transition:opacity .25s ease;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.e-visor.abierto{opacity:1}
/* Ajustada: la imagen entera cabe en la pantalla (cualquier tamaño u orientación) */
.e-visor img{display:block;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in}
/* Ampliada (tocar la imagen): tamaño grande y se recorre deslizando */
.e-visor.zoom{display:block;padding:64px 12px 52px}
.e-visor.zoom img{max-width:none;max-height:none;width:min(2200px,max(250vw,1400px));cursor:zoom-out}
@media (min-width:821px){.e-visor.zoom img{width:min(2200px,180vw)}}
.e-visor-ayuda{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:var(--e-lila);color:#fff;font:700 12px/1 "Doto","Consolas",monospace;white-space:nowrap;pointer-events:none}
.e-visor button{position:fixed;top:12px;right:12px;width:48px;height:48px;border:2px solid var(--e-azul);border-radius:50%;background:var(--e-cyan);color:var(--e-azul);font-size:26px;line-height:1;cursor:pointer}

/* Entrada en cascada (como el menú) y aparición suave de cada sección al llegar a ella */
.e-reveal{transition:opacity .55s ease var(--d,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
body.is-entering .e-reveal{opacity:0;transform:translate3d(0,26px,0);transition:none}
.e-oculta{opacity:0;transform:translate3d(0,30px,0)}
.e-aparece{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.e-reveal,.e-oculta{transition:none!important;opacity:1!important;transform:none!important}}

/* Celular */
@media (max-width:820px){
  .e-logo{width:calc(210 * var(--m))}
  .e-tabs{height:auto;padding:10px 16px;font-size:12px}
  .e-tabs svg{width:16px}
  .e-tabs-right{gap:10px}
  .e-menu span{display:none}
  .e-map{padding:6px 9px}.e-map span{display:none}.e-map svg{width:20px}
  .e-diagram{margin:22px 0 0}
  .e-intro{padding:18px 16px 0}
  .e-intro h1{font-size:calc(64 * var(--m));line-height:.88}
  .e-sub{font-size:15px;margin-top:14px}
  .e-keys{padding-top:36px}
  .e-entrada{grid-template-columns:1fr;gap:16px;padding:30px 16px 0}
  .e-entrada-text{max-width:none;font-size:17px;line-height:1.5}
  .e-entrada .t-pdf{order:-1;justify-self:end}

  /* Índice: fila que se desliza de lado */
  .e-indice{flex-wrap:nowrap;gap:8px;margin-top:36px;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;font-size:13px;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  .e-indice::-webkit-scrollbar{display:none}
  .e-indice a{scroll-snap-align:start;padding:9px 14px}
  .e-indice{scroll-padding-inline:16px}

  .e-sec{padding:56px 16px 0}
  .e-sec h2{font-size:32px;margin-bottom:18px}
  .e-num{font-size:14px;margin-bottom:6px}
  .e-fig{margin:0 -16px}
  .e-fig::after{opacity:1;right:12px;bottom:12px}
  /* Planos anchos: se ven más grandes y se recorren deslizando de lado */
  .e-pan a{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .e-pan a::-webkit-scrollbar{display:none}
  .e-pan img{width:230%;max-width:none}
  .e-pan::after{content:'↔ desliza · toca para ampliar'}
  .e-cap{font-size:14px;margin-top:12px}

  .e-islas{grid-template-columns:1fr;gap:12px;margin-top:18px}

  .e-paletas{grid-template-columns:1fr;gap:28px}
  .e-paleta h3{font-size:14px;margin-bottom:10px}
  .e-paleta button{padding:6px;font-size:10px}
  .e-paleta button:hover{transform:none;box-shadow:none}

  .e-identidad{grid-template-columns:1fr;gap:16px}

  .e-memoria-text{columns:1;font-size:16px;line-height:1.55}
  .e-memoria-text p{margin-bottom:14px}
  .e-refran{font-size:19px}
  .e-memoria-text .e-grande{font-size:32px;margin-bottom:20px}
  .e-memoria-text .e-cita{margin:26px 0;padding-left:14px;font-size:25px}
  .e-terr{margin:0 0 12px;padding:18px 18px 14px}
  .e-terr strong{font-size:21px}
  .e-cierre{grid-template-columns:1fr;gap:22px;margin-top:44px;padding-top:30px}
  .e-cierre p{font-size:27px;text-wrap:balance}

  .e-creditos-cols{display:block;columns:2;column-gap:18px;font-size:14px;line-height:1.35}
  .e-creditos dl{display:contents}
  .e-cred{break-inside:avoid;margin:0 0 16px}
  .e-cred-linea{margin:0 0 16px}
  .e-cred-linea dt,.e-cred-linea dd{display:block}
}
@media print{.e-tabs{position:static;box-shadow:none}.e-map,.e-menu,.e-visor,.e-indice{display:none!important}.e-fig a{cursor:auto}.e-fig::after{display:none}.e-oculta{opacity:1;transform:none}}