:root{
  --gold:#e2674d;
  --gold-soft:#f4a793;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Mozilla Headline",system-ui,sans-serif;
  --sans:"Mozilla Headline",system-ui,sans-serif;
  /* runtime-driven */
  --txt:#10262e;
  --txt-soft:#456069;
  --line:rgba(16,38,46,.16);
  --card:rgba(255,255,255,.72);
  --card-line:rgba(16,38,46,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  font-optical-sizing:auto;
  font-style:normal;
  font-variation-settings:"wdth" 100;
  background:#04101a;color:var(--txt);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}

.deck{
  position:fixed;inset:0;
  background:linear-gradient(180deg,#e9f3f6,#cfe6ec);
  transition:background 1.1s var(--ease);
  overflow:hidden;
}

/* ---------- atmosphere ---------- */
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 80% -12%,rgba(255,255,255,.4),transparent 55%);
  transition:opacity 1s var(--ease);
}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.bubble{
  position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.05));
  opacity:0;animation:rise linear infinite;filter:blur(.2px);
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:var(--o,.4)}
  100%{transform:translateY(-108vh) translateX(var(--drift,18px));opacity:0}
}

/* ---------- top progress ---------- */
.topbar{position:absolute;top:0;left:0;right:0;height:3px;z-index:7}
.progress{height:100%;width:100%;background:rgba(0,0,0,.08)}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transition:width .6s var(--ease)}

/* ---------- depth ruler (sonar) ---------- */
.ruler{
  position:absolute;top:0;bottom:0;left:44px;width:1px;z-index:5;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}
.ruler .tick{position:absolute;left:0;width:9px;height:1px;background:var(--line)}
.ruler .tick.major{width:16px}
.marker{
  position:absolute;left:-5px;width:11px;height:11px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(226,103,77,.22);
  transform:translateY(-50%);transition:top .8s var(--ease);
}
.marker::after{content:attr(data-d);position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-soft);white-space:nowrap}

/* ---------- stage / slides ---------- */
.stage{position:absolute;inset:0;z-index:4;overflow:hidden}
.slide{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(36px,5vw,84px);
  padding:clamp(56px,7vw,110px) clamp(60px,8vw,130px) clamp(72px,8vw,120px) clamp(110px,11vw,190px);
  opacity:1;visibility:hidden;pointer-events:none;
  transform:translateY(100%);
  transition:none;
}
.slide.active{
  visibility:visible;pointer-events:auto;z-index:6;
  transform:translateY(0);
  transition:transform .55s var(--ease), visibility 0s;
}
.slide.centered{
  grid-template-columns:1fr;
  justify-items:center;align-content:center;text-align:center;
}
.slide.centered .title{max-width:18ch}
.slide.centered .desc{margin-left:auto;margin-right:auto}
.slide.exit-up,
.slide.exit-down{
  visibility:visible;pointer-events:none;z-index:5;
  transition:transform .55s var(--ease), visibility 0s linear .55s;
}
.slide.exit-up{transform:translateY(-100%)}
.slide.exit-down{transform:translateY(100%)}
.slide.enter-from-above{transform:translateY(-100%)}
.slide.enter-from-below{transform:translateY(100%)}

.title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,6vw,92px);line-height:1.02;letter-spacing:-.02em;
  max-width:14ch;color:var(--txt);
  font-optical-sizing:auto;font-variation-settings:"wdth" 100;
}
.title em{font-style:normal;color:var(--gold);font-weight:inherit}
.slide:has(.logo-row) .title{max-width:none;line-height:1.05}

.desc{
  margin-top:clamp(20px,2.6vw,34px);max-width:52ch;
  font-size:clamp(16px,1.5vw,21px);line-height:1.6;font-weight:300;color:var(--txt-soft);
}

.logo-row{
  display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(22px,2.8vw,36px);flex-wrap:wrap;
}
.logo-slot{
  display:flex;align-items:center;justify-content:center;
  height:clamp(28px,3.4vw,40px);
}
.logo-row img{
  display:block;height:100%;width:auto;
  object-fit:contain;opacity:.88;filter:grayscale(.15);
  transition:opacity .3s var(--ease), filter .3s var(--ease);
}
/* IEEE es una sola línea en bold: baja un poco para igualar peso óptico */
.logo-slot:nth-child(3) img{height:82%}
.logo-row img:hover{opacity:1;filter:grayscale(0)}

/* ---------- media / logos ---------- */
.media{
  align-self:center;justify-self:center;width:100%;max-width:560px;aspect-ratio:4/3;
  display:grid;place-items:center;
}
.media img{max-width:100%;max-height:100%;object-fit:contain}
.media:not(.grid):not(.hero):not(.collage):not(.portrait) img{
  max-height:min(68vh, calc(420px * var(--sc, 1)));
  max-width:min(100%, calc(560px * var(--sc, 1)));
}
.media.portrait{
  width:clamp(140px,16vw,220px);max-width:220px;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(3,12,21,.18);
}
.media.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.media.grid{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px);align-content:center}
.media.grid.three{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.media.grid.four{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.media.grid.stack{
  grid-template-columns:1fr;gap:clamp(16px,2.2vw,28px);
  aspect-ratio:auto;max-width:420px;
}
.media.grid.stack .cell img{
  max-height:calc(clamp(72px,11vh,120px) * var(--sc, 1));
  max-width:min(100%, calc(340px * var(--sc, 1)));
}
.media .cell{display:grid;place-items:center;min-height:0;overflow:visible}
.media .cell img{
  width:auto;height:auto;
  max-height:calc(120px * var(--sc, 1));
  max-width:min(100%, calc(220px * var(--sc, 1)));
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(3,12,21,.08));
}
.media.grid.four .cell img,
.media.grid.three .cell img{
  max-height:calc(clamp(64px,8.5vw,100px) * var(--sc, 1));
  max-width:min(100%, calc(200px * var(--sc, 1)));
}

/* ---------- hero + small badges (RAGs) ---------- */
.media.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,2.4vw,32px);aspect-ratio:auto;max-width:620px;
}
.media.hero .hero-main{
  width:100%;display:grid;place-items:center;
}
.media.hero .hero-main img{
  max-width:100%;max-height:min(42vh, calc(360px * var(--sc, 1)));width:auto;height:auto;object-fit:contain;
  border-radius:8px;
}
.media.hero .hero-badges{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,3.2vw,40px);flex-wrap:wrap;width:100%;
}
.media.hero .badge{
  display:flex;align-items:center;justify-content:center;
  height:calc(clamp(28px,3.6vw,44px) * var(--sc, 1));
  max-width:calc(160px * var(--sc, 1));
}
.media.hero .badge img{
  display:block;max-height:100%;width:auto;max-width:100%;height:auto;object-fit:contain;
}

/* ---------- film collage (intro) ---------- */
.media.collage{
  position:relative;width:100%;max-width:580px;aspect-ratio:4/5;
  background:transparent;overflow:visible;
}
.media.collage .film{
  position:absolute;margin:0;padding:10px 12px;
  background:#0a0a0a;
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  background-image:
    linear-gradient(#0a0a0a,#0a0a0a),
    repeating-linear-gradient(
      180deg,
      transparent 0 9px,
      rgba(255,255,255,.28) 9px 11px,
      transparent 11px 20px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 9px,
      rgba(255,255,255,.28) 9px 11px,
      transparent 11px 20px
    );
  background-size:100% 100%, 7px 100%, 7px 100%;
  background-position:center, left 2px top, right 2px top;
  background-repeat:no-repeat, repeat-y, repeat-y;
}
.media.collage .film img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.05) brightness(.96);
}
.media.collage .film-1{
  --r:3.5deg;width:47%;aspect-ratio:3/4;top:2%;right:4%;
  transform:rotate(3.5deg);z-index:2;
}
.media.collage .film-2{
  --r:-3.5deg;width:50%;aspect-ratio:3/4;top:18%;left:2%;
  transform:rotate(-3.5deg);z-index:3;
}
.media.collage .film-3{
  --r:2.5deg;width:48%;aspect-ratio:4/3;bottom:8%;left:8%;
  transform:rotate(2.5deg);z-index:4;
}
.media.collage .film-4{
  --r:-1.5deg;width:53%;aspect-ratio:3/4;bottom:2%;right:2%;
  transform:rotate(-1.5deg);z-index:10;
}

/* ---------- cover / closing (single column) ---------- */
.slide.cover{grid-template-columns:1fr;justify-items:stretch;align-content:center}
.cover-body{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(28px,5vw,72px);width:100%;
}
.cover-copy{min-width:0;flex:1}
.cover .eyebrow{
  font-size:clamp(11px,1vw,13px);letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
  margin-bottom:24px;
}
.cover .title{font-size:clamp(52px,10vw,150px);max-width:15ch}
.cover .sub{
  margin-top:30px;max-width:46ch;font-size:clamp(17px,1.7vw,24px);font-weight:300;color:var(--txt-soft);
}
.contact{
  list-style:none;margin-top:clamp(28px,3.5vw,44px);
  display:flex;flex-direction:column;gap:14px;
}
.contact li{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(15px,1.4vw,19px);
}
.contact-label{
  min-width:5.5rem;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
.contact a{
  color:var(--txt);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.contact a:hover{color:var(--gold);border-bottom-color:rgba(226,103,77,.45)}
.qr-block{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.qr-label{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;
}
.qr{
  width:min(60vw,317px);aspect-ratio:1;
  padding:18px;border-radius:16px;
  background:#fff;box-shadow:0 16px 40px rgba(3,12,21,.16);
}
.qr img{display:block;width:100%;height:100%;object-fit:contain}

/* ---------- HUD ---------- */
.hud{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px clamp(30px,5vw,64px);
  font-size:12px;letter-spacing:.12em;color:var(--txt-soft);text-transform:uppercase;
}
.hud .brand{font-family:var(--serif);font-style:normal;letter-spacing:0;text-transform:none;font-size:18px;color:var(--txt)}
.hud .brand b{color:var(--gold);font-weight:600;font-style:normal}
.hud .right{display:flex;align-items:center;gap:22px}
.hint{opacity:.55}
.counter b{color:var(--gold)}

.navbtn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:8;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  color:var(--txt);font-size:18px;display:grid;place-items:center;transition:.35s var(--ease);
}
.navbtn:hover{background:var(--gold);border-color:var(--gold);color:#04101a}
#prev{left:clamp(16px,3vw,40px)} #next{right:clamp(16px,3vw,40px)}

/* ---------- map overlay ---------- */
.map{
  position:absolute;inset:0;z-index:20;background:rgba(4,16,26,.94);color:#eef6f8;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease);
  display:flex;flex-direction:column;padding:clamp(30px,5vw,70px);backdrop-filter:blur(4px);
}
.map.open{opacity:1;visibility:visible}
.map h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,46px);letter-spacing:-.01em}
.map h2 em{font-style:normal;color:var(--gold)}
.map .maphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:18px}
.map .close{cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:none;border:none}
.mapgrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px;align-content:start}
.mapitem{display:flex;align-items:baseline;gap:14px;padding:13px 16px;cursor:pointer;border:1px solid transparent;border-radius:8px;transition:.25s var(--ease)}
.mapitem:hover{background:rgba(226,103,77,.1);border-color:rgba(226,103,77,.32)}
.mapitem .n{font-family:var(--serif);color:var(--gold);font-size:14px;min-width:26px}
.mapitem .t{font-size:15px;color:#eef6f8}
.mapitem .s{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9db9c2;margin-top:3px}

@media (max-width:860px){
  .slide{
    grid-template-columns:1fr;align-content:start;align-items:start;
    gap:18px;padding:52px 20px 88px 56px;
    overflow:hidden;
  }
  .slide.cover{align-content:center}
  .title{font-size:clamp(28px,8vw,44px);max-width:none}
  .slide:has(.logo-row) .title{font-size:clamp(26px,7.2vw,40px);line-height:1.08}
  .desc{margin-top:12px;font-size:clamp(14px,3.6vw,17px);line-height:1.45}
  .logo-row{margin-top:12px;gap:14px}
  .logo-slot{height:24px}
  .media:not(.portrait):not(.collage):not(.hero){max-width:100%;aspect-ratio:16/10;max-height:32vh}
  .media:not(.grid):not(.hero):not(.collage):not(.portrait) img{
    max-height:min(32vh, calc(280px * var(--sc, 1)));
  }
  .media.hero{max-width:100%}
  .media.hero .hero-main img{max-height:min(26vh, calc(220px * var(--sc, 1)))}
  .media.hero .badge{height:clamp(28px,6vw,36px)}
  .media.grid .cell img,
  .media.grid.four .cell img,
  .media.grid.three .cell img{
    max-height:calc(clamp(48px,11vw,72px) * var(--sc, 1));
  }
  .media.collage{
    max-width:min(100%,280px);aspect-ratio:1/1;justify-self:start;
    max-height:38vh;
  }
  .media.collage .film{padding:6px 8px}
  .media.collage .film-1{width:42%;top:0;right:2%}
  .media.collage .film-2{width:44%;top:14%;left:0}
  .media.collage .film-3{width:42%;bottom:4%;left:4%}
  .media.collage .film-4{width:46%;bottom:0;right:0}
  .cover .title{font-size:clamp(36px,11vw,64px)}
  .cover .sub{margin-top:16px;font-size:clamp(15px,3.8vw,18px)}
  .cover-body{flex-direction:column;align-items:flex-start;gap:22px}
  .qr{width:min(62vw,230px);padding:14px;border-radius:12px}
  .qr-label{font-size:10px}
  .contact{margin-top:18px;gap:10px}
  .contact li{font-size:15px;gap:10px}
  .contact-label{min-width:4.5rem;font-size:10px}
  .ruler{left:18px}
  .marker::after{font-size:8px;left:16px;max-width:9ch;overflow:hidden;text-overflow:ellipsis}
  .hint{display:none}
  .navbtn{width:36px;height:36px;font-size:15px;opacity:.55}
  #prev{left:8px} #next{right:8px}
  .hud{padding:14px 18px 14px 52px;font-size:11px}
  .hud .brand{font-size:14px}
}

@media (max-height:720px){
  .slide{gap:14px;padding-top:44px;padding-bottom:76px}
  .title{font-size:clamp(26px,5.5vh,40px)}
  .desc{margin-top:8px;font-size:clamp(13px,2.2vh,16px);line-height:1.4}
  .logo-row{margin-top:8px}
  .logo-slot{height:22px}
  .media.collage{max-height:34vh;max-width:min(100%,240px)}
  .media:not(.grid):not(.hero):not(.collage):not(.portrait) img{
    max-height:min(28vh, calc(240px * var(--sc, 1)));
  }
  .media.hero .hero-main img{max-height:min(22vh, calc(200px * var(--sc, 1)))}
  .cover .title{font-size:clamp(32px,9vh,56px)}
}

@media (max-height:600px){
  .slide{gap:10px;padding-top:36px;padding-bottom:64px}
  .title{font-size:clamp(22px,5vh,32px)}
  .desc{margin-top:6px;font-size:13px;line-height:1.35}
  .logo-row{margin-top:6px;gap:10px}
  .logo-slot{height:18px}
  .media.collage{max-height:28vh;max-width:min(100%,200px)}
  .navbtn{display:none}
}