/* ═══════════════════════════════════════════════════════
   Departamento de Misiones — home
   Se apoya en congreso.css (paleta, botones, cabecera, pie)
   y sólo agrega lo propio de esta página.
   ═══════════════════════════════════════════════════════ */

/* ── Marca de la cabecera ──────────────────────────────── */
.dm-logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.dm-logo__iso{width:40px;height:auto;display:block;flex:none}
.dm-logo__texto{display:flex;flex-direction:column;line-height:1.15}
.dm-logo__texto b{
  font-family:var(--display,Fraunces),serif;font-weight:600;
  font-size:1.02rem;color:var(--tinta);letter-spacing:-.01em;
}
.dm-logo__texto small{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);margin-top:.15rem;
}
@media (max-width:420px){
  .dm-logo__texto b{font-size:.92rem}
  .dm-logo__texto small{font-size:.58rem;letter-spacing:.15em}
  .dm-logo__iso{width:34px}
}

/* ── Portada ───────────────────────────────────────────── */
.dm-hero{padding-block:clamp(7rem,14vw,11rem) clamp(3rem,7vw,5rem)}
.dm-hero__grid{
  display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .dm-hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
}
.dm-kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--oro);margin-bottom:1rem;
}
.dm-titulo .cm-titulo__lema{font-size:clamp(2.6rem,8vw,5.4rem)}
.dm-titulo .cm-titulo__sub{font-size:clamp(1.5rem,4.4vw,2.9rem)}

/* Foto de portada con el borde rasgado */
.dm-hero__foto{margin:0;justify-self:center}
.dm-hero__foto img{
  width:100%;max-width:min(520px,92vw);height:auto;display:block;
  filter:drop-shadow(0 22px 54px rgba(0,0,0,.62));
  animation:dm-flotar 11s ease-in-out infinite;
}

@keyframes dm-flotar{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}

.dm-cifras{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,2.6rem);
  margin:2rem 0 2.2rem;
}
.dm-cifras div{display:flex;flex-direction:column}
.dm-cifras strong{
  font-family:var(--display,Fraunces),serif;font-weight:600;
  font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;color:var(--oro);
  letter-spacing:-.02em;
}
.dm-cifras span{
  margin-top:.35rem;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--humo);
}

.dm-telon{
  margin:clamp(2.5rem,6vw,4rem) auto 0;text-align:center;
  font-family:var(--display,Fraunces),serif;font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.5rem);color:var(--ambar);
  opacity:.9;padding-inline:1.25rem;
}

/* ── Pilares ───────────────────────────────────────────── */
.dm-pilares{
  display:grid;gap:1.1rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.dm-pilar{
  position:relative;padding:1.8rem 1.6rem;border-radius:16px;
  background:rgba(230,184,119,.055);
  border:1px solid rgba(230,184,119,.18);
}
.dm-pilar__num{
  font-family:var(--display,Fraunces),serif;font-size:2.4rem;font-weight:600;
  color:rgba(230,184,119,.3);line-height:1;display:block;margin-bottom:.4rem;
}
.dm-pilar h3{
  font-family:var(--display,Fraunces),serif;font-size:1.45rem;font-weight:600;
  color:var(--tinta);margin-bottom:.6rem;
}
.dm-pilar p{color:var(--humo);line-height:1.65;font-size:.97rem}

.dm-lema-3{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.8rem clamp(1.2rem,4vw,2.6rem);margin-top:2.6rem;
  font-family:var(--display,Fraunces),serif;font-style:italic;
  font-size:clamp(1rem,2.4vw,1.3rem);color:var(--ambar);text-align:center;
}
.dm-lema-3 span{position:relative}
.dm-lema-3 span + span::before{
  content:"·";position:absolute;left:clamp(-.9rem,-2vw,-1.4rem);color:rgba(230,184,119,.5);
}

/* ── Mapa embebido ─────────────────────────────────────── */
#mapa .chips{margin-top:1.5rem}
#mapa .mapa-pie{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;margin-top:1.6rem;
}

/* ── Línea de tiempo ───────────────────────────────────── */
.dm-linea{
  list-style:none;margin:2.8rem 0 0;padding:0;position:relative;
}
.dm-linea::before{
  content:"";position:absolute;left:0;top:.6rem;bottom:1.5rem;width:2px;
  background:linear-gradient(180deg,
    rgba(230,184,119,.05), rgba(230,184,119,.5) 12%,
    rgba(230,184,119,.5) 86%, rgba(230,184,119,.05));
}
.dm-hito{
  position:relative;padding-left:1.9rem;padding-bottom:2rem;
}
.dm-hito::before{
  content:"";position:absolute;left:-5px;top:.55rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--ambar);box-shadow:0 0 0 4px rgba(201,142,78,.18);
}
.dm-hito--marcado::before{
  background:var(--oro);box-shadow:0 0 0 5px rgba(230,184,119,.26),0 0 18px rgba(230,184,119,.7);
}
.dm-hito--fin::before{
  width:16px;height:16px;left:-7px;background:var(--crema);
  box-shadow:0 0 0 6px rgba(244,234,217,.16),0 0 22px rgba(244,234,217,.5);
}
/* En celular el año va encima del título: al lado no entra */
.dm-hito__anio{
  display:block;margin-bottom:.3rem;
  font-family:var(--display,Fraunces),serif;font-weight:600;
  font-size:1.05rem;color:var(--oro);
  letter-spacing:-.01em;white-space:nowrap;
}
.dm-hito h3{
  font-family:var(--display,Fraunces),serif;font-size:clamp(1.15rem,3vw,1.5rem);
  font-weight:600;color:var(--tinta);margin-bottom:.45rem;line-height:1.25;
}
.dm-hito p{color:var(--humo);line-height:1.65;font-size:.97rem;max-width:56ch}
.dm-hito--fin h3{color:var(--crema)}

@media (min-width:760px){
  .dm-linea::before{left:7.5rem}
  .dm-hito{padding-left:10rem}
  .dm-hito::before{left:7.5rem;transform:translateX(-5px)}
  .dm-hito--fin::before{transform:translateX(-7px)}
  .dm-hito__anio{
    position:absolute;left:0;top:.15rem;margin:0;
    width:6.6rem;text-align:right;font-size:1.25rem;
  }
}

/* ── Ministerios ───────────────────────────────────────── */
.dm-minis{
  display:grid;gap:1.1rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.dm-mini{
  padding:1.7rem 1.5rem;border-radius:16px;
  background:rgba(11,7,4,.4);border:1px solid rgba(230,184,119,.2);
}
.dm-mini h3{
  font-family:var(--display,Fraunces),serif;font-size:1.35rem;font-weight:600;
  color:var(--oro);margin-bottom:.6rem;
}
.dm-mini p{color:var(--humo);line-height:1.65;font-size:.96rem}

/* ── Galería ───────────────────────────────────────────── */
.dm-galeria{
  margin-top:2.4rem;
  display:grid;gap:.7rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:720px){.dm-galeria{grid-template-columns:repeat(4,1fr)}}
.dm-galeria figure{
  margin:0;border-radius:12px;overflow:hidden;aspect-ratio:1;
  border:1px solid rgba(230,184,119,.18);background:#1a1008;
}
.dm-galeria img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
@media (hover:hover){
  .dm-galeria figure:hover img{transform:scale(1.06)}
}
.dm-galeria__pie{margin-top:1.8rem;text-align:center}

/* ── Cómo ser parte ────────────────────────────────────── */
.dm-partes{
  display:grid;gap:1.1rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.dm-parte{
  display:flex;flex-direction:column;
  padding:1.8rem 1.6rem;border-radius:16px;
  background:linear-gradient(150deg,rgba(201,142,78,.14),rgba(201,142,78,.04));
  border:1px solid rgba(230,184,119,.24);
}
.dm-parte h3{
  font-family:var(--display,Fraunces),serif;font-style:italic;
  font-size:1.9rem;font-weight:500;color:var(--oro);margin-bottom:.6rem;
}
.dm-parte p{color:var(--humo);line-height:1.65;font-size:.97rem;flex:1}
.dm-parte__cta{
  margin-top:1.1rem;align-self:flex-start;
  font-weight:600;font-size:.95rem;color:var(--crema);text-decoration:none;
  border-bottom:1px solid rgba(230,184,119,.45);padding-bottom:.15rem;
  transition:color .2s, border-color .2s;
}
.dm-parte__cta:hover,.dm-parte__cta:focus-visible{
  color:var(--oro);border-color:var(--oro);
}
.dm-parte__cta .flecha{display:inline-block;transition:transform .2s}
.dm-parte__cta:hover .flecha{transform:translateX(3px)}

/* ── Pie ───────────────────────────────────────────────── */
.cm-pie__iso{width:46px;height:auto;display:block;margin-bottom:.9rem}

@media (prefers-reduced-motion:reduce){
  .dm-hero__foto img{animation:none}
  .dm-galeria img{transition:none}
}

/* ── Globo embebido: algo más bajo que en mapa.html ────── */
#mapa #globo{height:clamp(420px,58vh,620px)}

/* ── Aparición al entrar en pantalla ───────────────────── */
.dm-oculto{opacity:0;transform:translateY(18px)}
.dm-visible{
  opacity:1;transform:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,.9,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .dm-oculto{opacity:1;transform:none}
  .dm-visible{transition:none}
}

/* ── El plomo arranca donde arranca el título ──────────── */
.dm .plomo{margin-inline:0}

/* ── Ritmo vertical propio de esta página ──────────────── */
.dm .seccion{padding-block:clamp(3.5rem,2.5rem + 4.5vw,6rem)}

/* Franjas alternas: la sección oscura no existía en el sistema */
.dm .seccion--oscura{
  position:relative;
  background:linear-gradient(180deg,
    rgba(0,0,0,.34), rgba(0,0,0,.42) 50%, rgba(0,0,0,.34));
}
.dm .seccion--oscura::before,
.dm .seccion--oscura::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(230,184,119,.26) 20%, rgba(230,184,119,.26) 80%, transparent);
}
.dm .seccion--oscura::before{top:0}
.dm .seccion--oscura::after{bottom:0}

/* La etiqueta y el título, más juntos */
.dm .titulo-seccion{margin-top:.5rem;margin-bottom:.9rem}

/* Fotos verticales: el recorte cuadrado no debe comerse las caras */
.dm-galeria__alto{object-position:50% 22%}

/* ═══════════════════════════════════════════════════════
   Cinta de fotos del congreso
   Dos tiras continuas: la de arriba va a la izquierda,
   la de abajo a la derecha. El contenido está duplicado,
   así el bucle se cierra sin salto.
   ═══════════════════════════════════════════════════════ */
.dm-cinta{
  position:relative;overflow:hidden;
  margin-top:.75rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.dm-cinta:first-of-type{margin-top:2.2rem}

.dm-cinta__pista{
  display:flex;width:max-content;gap:.75rem;
  will-change:transform;
}
.dm-cinta__pista--izq{animation:dm-correr-izq 64s linear infinite}
.dm-cinta__pista--der{animation:dm-correr-der 72s linear infinite}

.dm-cinta__pista img{
  height:clamp(118px,15vw,196px);width:auto;display:block;
  border-radius:10px;border:1px solid rgba(230,184,119,.2);
  object-fit:cover;background:#1a1008;
  transition:transform .4s ease, border-color .4s ease;
}

/* La cinta se frena si alguien quiere mirar una foto */
@media (hover:hover){
  .dm-cinta:hover .dm-cinta__pista{animation-play-state:paused}
  .dm-cinta__pista img:hover{transform:scale(1.05);border-color:rgba(230,184,119,.55)}
}

/* Recorre media pista: la otra mitad es la copia */
@keyframes dm-correr-izq{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-50% - .375rem))}
}
@keyframes dm-correr-der{
  from{transform:translateX(calc(-50% - .375rem))}
  to  {transform:translateX(0)}
}

/* ═══════════════════════════════════════════════════════
   Fotos históricas flotando junto a la línea de tiempo
   ═══════════════════════════════════════════════════════ */
.dm-linea-caja{position:relative}
.dm-viejas{display:none}

.dm-vieja{
  position:absolute;margin:0;
  padding:.55rem .55rem 1.5rem;         /* marco de foto vieja */
  background:linear-gradient(170deg,#efe3cd,#d9c9ac);
  border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
.dm-vieja img{
  width:100%;height:auto;display:block;border-radius:1px;
}

@media (min-width:1080px){
  .dm-viejas{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
  .dm-vieja{pointer-events:auto;width:clamp(140px,13.5vw,200px)}

  .dm-vieja--1{top:1%;   right:2%;  transform:rotate(-4.5deg); width:clamp(130px,12.5vw,184px)}
  .dm-vieja--2{top:14%;  right:22%; transform:rotate(3.2deg)}
  .dm-vieja--3{top:27%;  right:3%;  transform:rotate(-2.4deg)}
  .dm-vieja--4{top:41%;  right:21%; transform:rotate(4.6deg)}
  .dm-vieja--5{top:55%;  right:2%;  transform:rotate(-3.6deg)}
  .dm-vieja--6{top:69%;  right:21%; transform:rotate(2.8deg)}
  .dm-vieja--7{top:82%;  right:4%;  transform:rotate(-5deg)}

  /* cada una flota a su ritmo, para que no vayan en bloque */
  .dm-vieja--1{animation:dm-flota-a 13s ease-in-out infinite}
  .dm-vieja--2{animation:dm-flota-b 16s ease-in-out infinite .8s}
  .dm-vieja--3{animation:dm-flota-a 15s ease-in-out infinite 1.6s}
  .dm-vieja--4{animation:dm-flota-b 12s ease-in-out infinite .4s}
  .dm-vieja--5{animation:dm-flota-a 17s ease-in-out infinite 2.2s}
  .dm-vieja--6{animation:dm-flota-b 14s ease-in-out infinite 1.1s}
  .dm-vieja--7{animation:dm-flota-a 18s ease-in-out infinite 1.9s}

  @media (hover:hover){
    .dm-vieja{transition:transform .45s cubic-bezier(.22,.9,.3,1), box-shadow .45s}
    .dm-vieja:hover{
      animation-play-state:paused;
      transform:rotate(0deg) scale(1.1);
      box-shadow:0 26px 58px rgba(0,0,0,.65);
      z-index:3;
    }
  }
}

/* El texto de la línea nunca queda debajo de las fotos */
@media (min-width:1080px){
  .dm-linea{position:relative;z-index:1;max-width:min(660px,56%)}
}

@keyframes dm-flota-a{
  0%,100%{translate:0 0}
  50%    {translate:0 -15px}
}
@keyframes dm-flota-b{
  0%,100%{translate:0 0}
  50%    {translate:0 13px}
}

@media (prefers-reduced-motion:reduce){
  .dm-cinta__pista{animation:none}
  .dm-cinta{overflow-x:auto}
  .dm-vieja{animation:none !important}
}

/* ═══════════════════════════════════════════════════════
   Cómo se usa el mapa
   El texto cambia según se navegue con mouse o con el dedo.
   ═══════════════════════════════════════════════════════ */
.dm-guia{
  list-style:none;margin:1.8rem 0 0;padding:0;
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.dm-guia__paso{
  display:grid;grid-template-columns:auto 1fr;
  gap:.2rem .8rem;align-items:center;
  padding:.85rem 1rem;border-radius:12px;
  background:rgba(230,184,119,.055);
  border:1px solid rgba(230,184,119,.17);
}
.dm-guia__icono{
  grid-row:span 2;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(230,184,119,.12);color:var(--oro);
}
.dm-guia__icono svg{width:21px;height:21px;display:block}
.dm-guia__paso b{
  font-family:var(--display,Fraunces),serif;font-weight:600;
  font-size:1.02rem;color:var(--tinta);align-self:end;line-height:1.2;
}
.dm-guia__paso span:not(.dm-guia__icono){
  font-size:.87rem;color:var(--humo);align-self:start;line-height:1.35;
}

/* Una sola variante a la vez */
.solo-tacto{display:none}
@media (hover:none){
  .solo-mouse{display:none}
  .solo-tacto{display:inline}
}

@media (max-width:460px){
  .dm-guia{gap:.5rem}
  .dm-guia__paso{padding:.7rem .85rem;gap:.15rem .65rem}
  .dm-guia__icono{width:34px;height:34px}
  .dm-guia__icono svg{width:18px;height:18px}
  .dm-guia__paso b{font-size:.95rem}
}