/* =============================== FUENTES LOCALES ================================ */
@font-face { font-family: 'Gotham Black'; src: url('../fonts/Gotham Black.otf') format('opentype'); }
@font-face { font-family: 'Gotham Bold'; src: url('../fonts/Gotham Bold.otf') format('opentype'); }
@font-face { font-family: 'Gotham Book'; src: url('../fonts/Gotham Book_0.otf') format('opentype'); }
@font-face { font-family: 'Gotham Ultra'; src: url('../fonts/Gotham Ultra.otf') format('opentype'); }
@font-face { font-family: 'Myriad Pro'; src: url('../fonts/MYRIADPRO-REGULAR.OTF') format('opentype'); }
@font-face { font-family: 'Tiki Tako'; src: url('../fonts/Tiki Tako.otf') format('opentype'); }

:root{
  --bg:#7CC5AD;
  --outer:#FFFbDE;
  --inner:#EFECD1;
  --text:#2A3A1C;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --radius-xl:36px;
  --radius-md:24px;
  --transition:1500ms ease-in-out;
}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg);
}
body{
  margin:0;
  font-family:"Gotham Book",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
}

/* Escena */
.scene{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows: 1fr auto;
  align-items:center;
  justify-items:center;
  gap: clamp(8px, 1.5vh, 16px);
  background:var(--bg);
  padding-bottom: 20px;
}

/* GIFs */
.gif{position:absolute;pointer-events:none;user-select:none;}
.deco{mix-blend-mode:multiply;opacity:.3;}
.deco-01{top:2%;left:2%;width:min(28vw,420px);}
.deco-02{top:6%;right:2%;width:min(26vw,400px);}
.deco-03{bottom:14%;left:8%;width:min(24vw,380px);}
.arbustos{position:fixed;left:0;right:0;bottom:0;width:100%;height:auto;opacity:1;z-index:2;}

/* Marco */
.banner{
  position:relative;
  z-index:3;
  width:100%;
  padding:clamp(12px,2vw,32px);
  display:grid;
  place-items:center;
}
.frame-outer{
  background:var(--outer);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  max-width:min(1200px,90vw);
  width:100%;
  padding:clamp(12px,1.2vw,18px);
}
.frame-inner{
  background:var(--inner);
  border-radius:calc(var(--radius-xl) - 10px);
  padding:clamp(18px,2.2vw,28px);
  display:grid;
  grid-template-columns: clamp(86px,10vw,140px) 1fr;
  grid-template-areas: "rail content";
  gap:clamp(16px,2vw,24px);
}

/* Rail PROM2025 */
.rail{
  grid-area:rail;
  background:color-mix(in oklab, var(--inner), #000 4%);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,1.6vw,18px);
}
.titulo-vertical{
  font-family:"Tiki Tako","AppetitePro",system-ui,sans-serif;
  font-size:clamp(32px,4.8vw,58px);
  letter-spacing:.02em;
  padding-inline:.2em;
  margin:0;
  color:#7CC5AD;
  text-shadow:0 3px 0 rgba(0,0,0,.06);
  transform:rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;
}

/* Stage / Tarjetas */
.content{
  grid-area:content;
  position:relative;
  background:#ffffff1c;
  border-radius:0;
  padding:20px;
  overflow:hidden;
  min-height: 650px;
}

/* TARJETAS */
.card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  gap:12px;
  padding:20px;
  opacity:0;
  transition: none; /* controlado por JS */
}
.card-current{ opacity:1; }

/* Nombre */
.card .nombre{
  font-family:"Gotham Ultra","Gotham Bold","Gotham Book",sans-serif;
  font-weight:900;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.1;
  padding-top:.1em;
  margin:0 0 8px 0;
  overflow-wrap:anywhere;
}

/* FOTO */
.card .foto-wrap{
  position:relative;
  width:100%;
  height: clamp(400px, 46vh, 550px);
  background:transparent;
  border-radius:0;
  overflow:hidden;
  margin:0;
}
.card figure{ margin:0; width:100%; height:100%; }
.card img.foto{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}

/* Franja decorativa */
.foto-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:10px;
  background:linear-gradient(
    to right,
    #F0C84A 0%, #F0C84A 33.33%,
    #D23A3A 33.33%, #D23A3A 66.66%,
    #F0C84A 66.66%, #F0C84A 100%
  );
}

/* Texto */
.card .texto{
  font-family:"Gotham Book",sans-serif;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.4;
  margin:12px 0 0 0;
  color:var(--text);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 4;
  overflow:hidden;
  max-height: 5.6em;
}

/* TRANSICIONES FADE */
.card-fade-out { opacity: 1; }
.card-fade-out-active { opacity: 0; transition: opacity 750ms ease-in-out; }
.card-fade-in { opacity: 0; }
.card-fade-in-active { opacity: 1; transition: opacity 750ms ease-in-out; }

/* =================== SCROLL HINT (mouse + chevrones) =================== */
.scroll-hint{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: auto;
  display: grid;
  justify-items: center;
  gap: 6px;
  opacity: .95;
}

/* Mouse */
.scroll-hint__icon{
  display:block;
  width: 26px;
  height: 40px;
  border: 2px solid #2A3A1C;
  border-radius: 16px;
  position: relative;
  opacity: .9;
  animation: floaty 3s ease-in-out infinite;
}
.scroll-hint__icon::after{
  content:"";
  position:absolute;
  left:50%; top:8px;
  width: 4px; height: 8px;
  background:#2A3A1C;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollWheel 1.6s ease-in-out infinite;
}

.chevrons{
  display: grid;
  gap: 4px;
  pointer-events: none; 
}
.chev {
    width: 16px; height: 16px;
    border-right: 3px solid #2A3A1C;
    border-bottom: 3px solid #2A3A1C;
    opacity: .9;
    will-change: transform, opacity;
  }

  .chev.chev-up{
    transform: rotate(225deg);
    animation: bobUp 1.4s ease-in-out infinite;
    animation-delay: .1s; 
  }
.chev.chev-down{
  transform: rotate(45deg); 
  animation: bobDown 1.4s ease-in-out infinite;
}


@keyframes bobDown{
  0%,100%{ transform: translateY(0) rotate(45deg); opacity:.9; }
  50%{ transform: translateY(8px) rotate(45deg); opacity:.4; }
}

@keyframes bobUp{
  0%,100%{ transform: translateY(0) rotate(225deg); opacity:.9; }
  50%{ transform: translateY(-8px) rotate(225deg); opacity:.4; }
}

.scroll-hint[data-animate="on"] .chev {
    animation-play-state: running !important;
  }
/* =================== ESTRELLAS (overlay) =================== */
.stars{
  position:absolute;
  inset:0;
  z-index:5;          
  pointer-events:none;
}
.star{
  position:absolute;
  width: 22px; height:auto;
  opacity:0;
  transform: scale(.6) rotate(0deg);
  transition: opacity .4s ease, transform .4s ease;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.15));
}
.star.twinkle{
  opacity:1;
  transform: scale(1) rotate(8deg);
  animation: starPulse 2.2s ease-out forwards;
}
@keyframes starPulse{
  0%{ opacity:0; transform:scale(.5) rotate(0deg); }
  15%{ opacity:1; transform:scale(1.05) rotate(8deg); }
  60%{ opacity:.95; transform:scale(.9) rotate(5deg); }
  100%{ opacity:0; transform:scale(.4) rotate(0deg); }
}

/* HOME */
.btn-home{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:7;
  display:inline-block;
  padding:.6rem 1rem;
  background:#C2C057;
  color:#2A3A1C;
  text-decoration:none;
  font-family:"Gotham Ultra",sans-serif;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-home:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.22); }

/* ===== RESPONSIVE ≤900px ===== */
@media (max-width:900px){
  .frame-inner{
    grid-template-columns:1fr;
    grid-template-areas:"rail" "content";
    gap:14px;
  }
  .rail{ border-radius:18px; padding:12px 0; }
  .titulo-vertical{ transform:none; text-align:center; font-size:clamp(30px,8.2vw,48px); padding-inline:.25em; }

  .content{ 
    padding:16px; 
    border-radius:0; 
    min-height:680px;  
  }

  .card{ padding:16px; gap:10px; }

  .foto-wrap{ 
    height:auto; 
    min-height:280px; 
    max-height:20vh; 
  }
  .card img.foto{ object-fit:contain; }

  .card .texto{
    font-size:clamp(14px, 1.2vw, 16px);
    line-height:1.35;
    margin-top:8px;
    -webkit-line-clamp:unset;  
    line-clamp:unset;
    max-height:none;
  }

  .scroll-hint{ bottom:16px; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .card-fade-out-active, .card-fade-in-active{ transition: opacity 0.3s ease !important; }
  .scroll-hint__icon, .scroll-hint__icon::after, .chev { animation: none !important; }
  .star{ animation: none !important; transition: none !important; }
}