/* =========================================================
   Fuente PAMIT (autohospedada)
   Pamit no está en Google Fonts. Descárgala de una fuente legal
   (ej. dafont.com/pamit.font o creativefabrica) y sube el archivo
   .ttf o .woff2 a la carpeta /fonts de tu hosting con este nombre
   exacto. Si usas otro nombre de carpeta/archivo, ajusta la ruta
   del "src" de aquí abajo.
========================================================= */
@font-face{
  font-family:"Pamit";
  src:url("fonts/Pamit.woff2") format("woff2"),
      url("fonts/Pamit.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   Tokens
========================================================= */
:root{
  /* Paleta de marca */
  --brand-yellow:      #FFE602;
  --brand-dark:        #2E3436;
  --brand-slate:       #5C7180;
  --brand-blue:        #3260A9;
  --brand-pink:        #E7384F;
  --brand-brown:       #AC4422;
  --brand-yellow-2:    #FFDA05;
  --brand-sky:         #2DB4E9;
  --brand-coral:       #EB624C;

  /* Fondo espacial, ahora con los tonos de marca */
  --space-black:   var(--brand-dark);
  --space-deep:    #232829;
  --space-deep-2:  #3a4245;
  --accent-cyan:   var(--brand-yellow);
  --accent-cyan-soft: rgba(255,230,2,.35);
  --accent-orange: var(--brand-coral);
  --accent-orange-soft: rgba(255, 34, 0, 0.35);
  --text-white:    #f4f6fb;
  --text-muted:    #ffffff;
  --text-faint:    white; 

  --font-display: "Pamit", "Open Sans", sans-serif;
  --font-heading: "Open Sans", sans-serif;
  --font-body:    "Open Sans", sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  height:100dvh; /* respeta la barra de Safari en iPhone */
  color:var(--text-white);
  font-family:var(--font-body);
  overflow:hidden;

  /* Fondo con imagen: cubre toda la pantalla sin deformarse,
     en cualquier dispositivo. La capa oscura de encima es para
     que el texto blanco se siga leyendo bien en las zonas más
     claras de la foto. */
  background:
    linear-gradient(rgba(10, 20, 17, 0.342), rgba(10, 14, 20, 0.235)),
    url("img/fondo-galeria.jpg") center center / cover no-repeat;
  background-attachment:scroll; /* "fixed" da problemas en iPhone/Safari */
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================================================
   Page layout
========================================================= */
.page{
  position:relative;
  z-index:1;
  max-width:1400px;
  height:100vh;
  height:100dvh; /* altura real disponible en iOS */
  margin:0 auto;
  padding:clamp(10px, 1.8vh, 24px) 24px clamp(10px, 1.8vh, 20px);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

/* Topbar */
.topbar{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-start;
  margin-bottom:clamp(6px, 1.2vh, 16px);
}

/* Titles */
.titles{
  flex:0 0 auto;
  text-align:center;
  margin-bottom:clamp(6px, 1.2vh, 18px);
}
.gallery-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(18px, 2vw, 28px);
  letter-spacing:.12em;
  margin:0 0 clamp(6px, 1vh, 12px);
  text-transform:uppercase;
  text-shadow:0 0 24px rgba(251, 251, 251, 0.35);
}
.title-rule{
  width:280px;
  height:2px;
  margin:0 auto clamp(6px, 0.8vh, 12px);
  background:linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  box-shadow:0 0 14px var(--accent-cyan-soft);
}
.gallery-subtitle{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0;
}

/* =========================================================
   Carousel
========================================================= */
.carousel{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.frame{
  position:relative;
  height:100%;
  width:auto;
  min-width:0;
  max-width:100%;
  max-height:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  border:2px solid var(--accent-cyan);
  box-shadow:
    0 0 0 1px rgba(8, 8, 8, 0.9),
    0 0 30px var(--accent-cyan-soft),
    0 0 70px rgba(5, 5, 5, 0.667),
    inset 0 0 40px rgba(5, 5, 5, 0.649);
  background:var(--space-deep);
}

.frame__track{
  display:flex;
  height:100%;
  width:100%;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}

.slide{
  flex:0 0 100%;
  height:100%;
  position:relative;
}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.slide__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(4,6,15,0) 60%, rgba(4, 6, 15, 0.334) 100%);
  pointer-events:none;
}

.nav-arrow{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(120,150,220,.4);
  background:rgba(0, 0, 0, 0.7);
  color:var(--text-white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 0 18px rgba(79, 141, 240, 0.733);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.nav-arrow:hover{
  transform:scale(1.08);
  border-color:var(--accent-cyan);
  color:var(--accent-cyan);
  box-shadow:0 0 24px var(--accent-cyan-soft);
}
.nav-arrow:active{ transform:scale(.96); }
.nav-arrow:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:3px;
}



/* =========================================================
   Dots
========================================================= */
.dots{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 12px;
  max-width:1600px;
  margin:clamp(8px, 1.4vh, 16px) auto clamp(8px, 1.4vh, 16px);
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#b0b0c7;
  border:none;
  cursor:pointer;
  padding:0;
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dot:hover{ background:#46578c; }
.dot.is-active{
  background:var(--accent-cyan);
  box-shadow:0 0 12px var(--accent-cyan-soft);
  transform:scale(1.25);
}
.dot:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:3px;
}

/* =========================================================
   Caption
========================================================= */
.caption{
  flex:0 0 auto;
  text-align:center;
  transition:opacity .25s ease;
}
.caption.is-fading{
  opacity:0;
}
.caption__year{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(14px, 1.6vw, 22px);
  letter-spacing:.2em;
  margin:0 0 clamp(4px, 0.8vh, 8px);
}
.caption__tag{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(11px, 1.2vw, 13px);
  letter-spacing:.22em;
  color:white;
  text-transform:uppercase;
  margin:0 0 clamp(6px, 1.2vh, 10px);
}
.caption-rule{
  width:100px;
  height:2px;
  margin:0 auto clamp(6px, 1.2vh, 12px);
  background:linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
.caption__text{
  font-family:var(--font-body);
  font-size:clamp(12px, 1.1vw, 14px);
  color:var(--text-muted);
  max-width:560px;
  margin:0 auto;
  line-height:1.4;
}

/*=========================================================
MÓVILES
=========================================================*/

@media (max-width:768px){

    html,body{
        overflow:auto; /* red de seguridad: permite scroll si algo no cabe */
    }

    .page{
        padding:18px 5px calc(18px + env(safe-area-inset-bottom, 0px));
        height:auto;
        min-height:100vh;
        min-height:100dvh;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        overflow:visible;
    }

    .titles{
        margin-bottom:8px;
    }

    .gallery-title{
        font-size:1.2rem;
        letter-spacing:4px;
        margin-bottom:4px;
    }

    .gallery-subtitle{
        font-size:.75rem;
        margin-top:5px;
    }

    .title-rule{
        width:170px;
        margin:8px auto;
    }

    /* FOTO */

    .frame{
        width:98vw;
        max-width:380px;
        aspect-ratio:4/3;
        height:auto;
        margin:0 auto;
        border-radius:20px;
    }

    .frame img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    /* FLECHAS */

    .nav-arrow{
        width:40px;
        height:40px;
    }

    .nav-arrow svg{
        width:60%;
        height:60%;
    }

    /* INDICADORES */

    .dots{
        margin:20px 0;
    }

    /* TEXTOS (nombres corregidos para que coincidan con el HTML) */

    .caption__year{
        font-size:1.1rem;
        margin-top:4px;
    }

    .caption__tag{
        font-size:.85rem;
        margin-top:4px;
    }

    .caption__text{
        font-size:.88rem;
        line-height:1.4;
        max-width:95%;
        margin:10px auto 0;
    }

}