/* ==========================================================================
   REVELA — sitio.css  ·  la puerta de entrada y la galería abierta
                                                                  JD Martin
   ========================================================================== */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------- la barra */
#barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding-top: var(--seg-top); mix-blend-mode: difference; color: #fff;
}
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
/* El logo es la puerta de atrás: tres toques. Hay que apagarle al navegador
   el zoom del doble toque, la selección de texto y el menú de mantener
   apretado, o los toques se pierden antes de llegar al tercero. */
#barra .marca {
  color: #fff;
  user-select: none; -webkit-user-select: none;
  touch-action: none;             /* el dedo encima es nuestro: ni scroll ni zoom */
  -webkit-touch-callout: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  padding: 10px 12px; margin: -10px -12px;   /* más blanco donde picar */
  transition: transform .12s ease;
}
#barra .marca.tocado { transform: scale(.93); }
/* el anillo que se va llenando mientras mantienes apretado: así sabes que
   sí te está contando y cuánto falta */
#barra .marca::after {
  content: ''; position: absolute; left: 0; top: 50%;   /* centrado en la camarita */
  width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); border-right-color: transparent; border-bottom-color: transparent;
  opacity: 0; transform: rotate(-90deg); pointer-events: none;
}
#barra .marca.cargando::after { opacity: 1; animation: marcaGira .9s linear forwards; }
@keyframes marcaGira { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
#barra .marca .lente { stroke: #fff; }
.barra-liga { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #fff; opacity: .8; }
.barra-liga:hover { opacity: 1; }
@media (max-width: 560px) { .barra-liga { display: none; } }

/* --------------------------------------------------------------- la puerta */
#puerta {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  padding: 90px 0 70px; overflow: hidden; background: var(--tinta);
}
.puerta-fondo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.puerta-fondo img { width: 100%; height: 100%; object-fit: cover; }
.puerta-fondo.puesta { opacity: .5; }
.puerta-fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,23,26,.55), rgba(21,23,26,.3) 45%, rgba(21,23,26,.8));
}
.puerta-caja { position: relative; text-align: center; max-width: 560px; color: var(--hueso); }
.puerta-caja .rotulo { color: rgba(246,243,237,.66); }
#puerta h1 { font-size: clamp(36px, 7.4vw, 66px); margin: 14px 0 34px; text-shadow: 0 2px 40px rgba(0,0,0,.4); }
.puerta-caja .fino { color: rgba(246,243,237,.56); max-width: 40ch; margin: 22px auto 0; }

.clave-campo { display: block; margin-bottom: 12px; }
#campoClave {
  width: 100%; padding: 20px 16px; border-radius: var(--r); text-align: center;
  background: rgba(246,243,237,.07); border: 1px solid rgba(246,243,237,.26); color: var(--hueso);
  font-family: var(--f-ui); font-size: clamp(24px, 5vw, 32px); font-weight: 400;
  letter-spacing: .1em; transition: border-color .2s, background .2s;   /* la clave se ve como la escribió el fotógrafo */
}
#campoClave::placeholder { color: rgba(246,243,237,.26); letter-spacing: .1em; }
#campoClave:focus { outline: none; border-color: var(--ambar); background: rgba(246,243,237,.12); }
#formClave .btn { background: var(--hueso); color: var(--tinta); }
#formClave .btn:hover { background: var(--ambar); color: var(--hueso); }
#formClave .btn:disabled { opacity: .5; }
#errorClave { color: #E8785F; margin-top: 14px; }

.puerta-baja { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; display: grid; place-items: center; z-index: 2; }
.puerta-baja span { display: block; width: 11px; height: 11px; border-right: 1.5px solid rgba(246,243,237,.7); border-bottom: 1.5px solid rgba(246,243,237,.7); transform: rotate(45deg); animation: baja 2.1s infinite; }
@keyframes baja { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .5; } 50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; } }

/* -------------------------------------------------------------- la pública */
#publica { padding: clamp(60px, 10vw, 120px) 0; }
.titulo-centro { text-align: center; max-width: 680px; margin: 0 auto clamp(34px, 5vw, 58px); }
.plomo { font-size: clamp(16px, 2vw, 19px); color: #4A4741; max-width: 50ch; }
.plomo.centro { margin-inline: auto; }
.centro { text-align: center; }
#publicaRej { --rej-hueco: var(--hueso2); }
#publicaVacia { padding: 50px 0; }

/* ------------------------------------------------------------------- pie */
#pie { background: var(--tinta); color: var(--hueso); padding: clamp(40px, 6vw, 64px) 0 calc(34px + var(--seg-bot)); }
#pie .rotulo { color: var(--hueso); letter-spacing: .34em; font-size: 13px; }
#pie .fino { color: rgba(246,243,237,.5); margin: 8px 0 0; }

/* ------------------------------------------------------ la puerta de atrás */
#secreto { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 24px; }
.secreto-velo { position: absolute; inset: 0; background: rgba(12,13,15,.86); backdrop-filter: blur(6px); }
.secreto-caja {
  position: relative; width: min(340px, 100%); background: var(--tinta); color: var(--hueso);
  border: 1px solid rgba(246,243,237,.16); border-radius: var(--r); padding: 28px; text-align: center;
  animation: sube .22s ease;
}
.secreto-caja .rotulo { color: rgba(246,243,237,.55); }
.secreto-caja .campo { margin-top: 18px; text-align: left; }
/* Se tapa con css y no con type="password": así Safari no saca el llavero
   ni el aviso de "formulario no seguro" cada vez. */
.tapada { -webkit-text-security: disc; text-security: disc; letter-spacing: .14em; }
.tapada.abierta { -webkit-text-security: none; text-security: none; letter-spacing: .04em; }

/* el ojito para ver lo que estás escribiendo */
.con-ojo { position: relative; }
.con-ojo input { padding-right: 62px; }
.ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 8px 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(246,243,237,.6); border-radius: 999px;
}
.ojo:hover { color: var(--hueso); background: rgba(246,243,237,.1); }
.ojo.puesto { color: var(--ambar); }
.secreto-caja .fino { color: rgba(246,243,237,.6); margin: 10px 0 0; text-align: left; }
.secreto-caja .campo > span { color: rgba(246,243,237,.5); }
.secreto-caja input { background: rgba(246,243,237,.08); border-color: rgba(246,243,237,.24); color: var(--hueso); }
.secreto-caja .btn { background: var(--hueso); color: var(--tinta); }
.secreto-caja .palanca-chica { color: rgba(246,243,237,.72); }
.secreto-caja .liga { color: rgba(246,243,237,.5); margin-top: 16px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
#errorSecreto {
  color: #FFD9D1; background: rgba(168,65,47,.35); border: 1px solid rgba(232,120,95,.5);
  border-radius: var(--r); padding: 11px 14px; margin-top: 14px; text-align: left;
}

/* ----------------------------------------------- visor de la galería abierta */
#visor { position: fixed; inset: 0; z-index: 900; background: rgba(12,13,15,.97); color: #F2EFE9; display: grid; grid-template-rows: auto 1fr; }
.visor-barra { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--seg-top)) 14px 10px; font-size: 12px; letter-spacing: .14em; color: rgba(242,239,233,.72); }
.icono { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: inherit; font-size: 15px; }
.icono:hover { background: rgba(255,255,255,.12); }
.visor-marco { margin: 0; display: grid; place-items: center; overflow: hidden; position: relative; padding: 0 clamp(10px, 6vw, 80px) 40px; }
.visor-marco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-marco figcaption { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 13px; color: rgba(242,239,233,.7); }
.visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 34px; line-height: 1; color: rgba(242,239,233,.8); border-radius: 999px; z-index: 2; }
.visor-flecha:hover { background: rgba(255,255,255,.1); color: #fff; }
.visor-flecha.izq { left: 6px; } .visor-flecha.der { right: 6px; }
@media (max-width: 700px) { .visor-flecha { display: none; } }
body.sin-scroll { overflow: hidden; }