/* ==========================================================================
   2 · LA ENTRADA — el selector de perfil
   ==========================================================================
   Tres hojas cortadas en diagonal, a sangre. Lo único que se mueve al pasar
   el cursor es el RECORTE: la foto está fija a la ventana, así que el lado no
   «crece», se destapa.

   Cada hoja escribe su texto DENTRO de su propia columna. Antes los tres
   textos se pintaban pegados al borde izquierdo de la ventana y el recorte se
   comía los de norte y administración: la pantalla se veía como tres fotos
   sin explicación. El texto tiene que vivir entre los dos cortes de su hoja.
   ========================================================================== */
.entrada {
  position: fixed; inset: 0; z-index: 100; background: var(--nori);
  overflow: hidden;
}
/* Grano. Un degradado limpio sobre pantalla grande se ve digital y barato;
   el ruido le devuelve la textura de impresión. */
.entrada::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: .38; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.partidor {
  position: absolute; inset: 0;
  /* Los dos cortes en reposo. Administración es algo más angosta: se entra
     ahí mucho menos que a una caja, pero tiene que caber su texto. */
  --c1: 36%;
  --c2: 69%;
  /* Compensación del sesgo: el corte se recuesta hacia la derecha a medida
     que sube, así que el texto —que vive abajo— necesita un margen extra por
     el lado izquierdo para no quedar cortado en su primera línea. */
  --sesgo: 2.6vw;
  transition: none;
}
.partidor.lista { transition: --c1 var(--d-medio) var(--ease), --c2 var(--d-medio) var(--ease); }

/* Se registran como propiedades animables: sin esto el navegador interpola
   los porcentajes a saltos en vez de suave. */
@property --c1 { syntax: '<percentage>'; inherits: true; initial-value: 36%; }
@property --c2 { syntax: '<percentage>'; inherits: true; initial-value: 69%; }

.hoja {
  position: absolute; inset: 0; display: block; overflow: hidden;
  color: var(--crema); text-align: left;
  will-change: clip-path;
  transition: clip-path var(--d-medio) var(--ease);
}
.hoja--sur {
  clip-path: polygon(0 0, calc(var(--c1) + var(--corte)) 0,
                     calc(var(--c1) - var(--corte)) 100%, 0 100%);
}
.hoja--norte {
  clip-path: polygon(calc(var(--c1) + var(--corte)) 0, calc(var(--c2) + var(--corte)) 0,
                     calc(var(--c2) - var(--corte)) 100%, calc(var(--c1) - var(--corte)) 100%);
}
.hoja--admin {
  clip-path: polygon(calc(var(--c2) + var(--corte)) 0, 100% 0,
                     100% 100%, calc(var(--c2) - var(--corte)) 100%);
}
.hoja:focus-visible { outline: none; }
.hoja:focus-visible .hoja__texto { outline: 2.5px solid var(--naranja); outline-offset: -10px;
                                   border-radius: 18px; }

/* La foto está fija a la VENTANA, no a la hoja: por eso el lado se destapa en
   vez de crecer. Es el truco entero del efecto. */
.hoja__foto { position: absolute; inset: 0; overflow: hidden; }
.hoja__foto img {
  position: absolute; inset: 0; width: 100vw; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transform: scale(1.05);
  filter: saturate(.96) brightness(.86) contrast(1.04);
  transition: transform 1.1s var(--ease), filter .55s var(--ease-suave);
}
.hoja--gana   .hoja__foto img { transform: scale(1);    filter: saturate(1.12) brightness(1.02) contrast(1.02); }
.hoja--pierde .hoja__foto img { transform: scale(1.09); filter: saturate(.55) brightness(.5); }

/* Administración no tiene fachada: es la trastienda. Rojo profundo con la
   diagonal de la marca, para que se lea como «otro lugar» y no como una sede. */
/* Administración sí tiene foto, pero no una fachada: la barra por dentro. Es
   la trastienda —donde se decide la carta— y por eso va teñida de rojo
   profundo: para que se lea como «otro lugar» y no como una tercera sede. */
.hoja--admin .hoja__foto {
  background: linear-gradient(160deg, var(--rojo-prof) 0%, var(--nori) 64%), var(--nori);
}
.hoja--admin .hoja__foto > img:not(.hoja__marca) { filter: saturate(.62) brightness(.78); }
.hoja--admin.hoja--gana  .hoja__foto > img:not(.hoja__marca) { filter: saturate(.86) brightness(.96); }
.hoja--admin.hoja--pierde .hoja__foto > img:not(.hoja__marca) { filter: saturate(.32) brightness(.44); }
.hoja--admin .hoja__foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(105% 72% at 80% 2%, rgba(210,38,45,.3), transparent 56%),
    linear-gradient(170deg, rgba(90,14,17,.4) 0%, rgba(22,16,13,.62) 78%);
}
.hoja--admin .hoja__foto::after {
  content: ""; position: absolute; inset: -20%; z-index: 2;
  background: repeating-linear-gradient(
    var(--diag, 116deg), rgba(253,244,231,.045) 0 2px, transparent 2px 16px);
}
.hoja--admin .hoja__marca {
  position: absolute; z-index: 3; top: auto; left: auto;
  right: -5%; bottom: -8%; width: 30%; height: auto; opacity: .07;
  object-fit: contain;
  transition: transform var(--d-lento) var(--ease), opacity var(--d-medio) var(--ease);
}
.hoja--admin.hoja--gana .hoja__marca { transform: translate(-8%, -6%) rotate(-5deg); opacity: .11; }

.hoja__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,7,5,.96) 2%, rgba(10,7,5,.8) 26%, rgba(10,7,5,.4) 58%,
    rgba(10,7,5,.24) 80%, rgba(10,7,5,.5) 100%);
  transition: opacity var(--d-medio) var(--ease);
}
/* Un calor apenas perceptible al pie de la hoja elegida. */
.hoja--gana .hoja__velo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 55% at 22% 108%, rgba(240,144,30,.3), transparent 70%);
  animation: velo-entra .5s var(--ease) both;
}

/* --- El texto vive DENTRO de su columna ---------------------------------- */
.hoja__texto {
  position: absolute; bottom: 0; z-index: 2;
  padding: clamp(1.15rem, 2.5vw, 2.5rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
}
.hoja--sur   .hoja__texto { left: 0;
                            right: calc(100% - var(--c1) + var(--corte)); }
.hoja--norte .hoja__texto { left: calc(var(--c1) - var(--corte) + var(--sesgo));
                            right: calc(100% - var(--c2) + var(--corte)); }
.hoja--admin .hoja__texto { left: calc(var(--c2) - var(--corte) + var(--sesgo));
                            right: 0; }

.hoja__texto > * {
  opacity: 0; transform: translateY(16px);
  animation: hoja-sube .8s var(--ease) forwards;
  animation-delay: calc(var(--n, 0) * 85ms + 260ms);
}
@keyframes hoja-sube { to { opacity: 1; transform: none; } }

/* El rótulo del perfil: es lo que contesta «¿qué soy yo acá?» antes de mirar
   la foto. Va primero y en mayúsculas por eso. */
.hoja__perfil {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .85em .42em .7em; border-radius: 99px;
  font-size: clamp(.62rem, 1vw, .71rem); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amarillo); white-space: nowrap;
  background: rgba(253,244,231,.09);
  border: 1px solid rgba(251,210,75,.32);
  backdrop-filter: blur(8px) saturate(1.2);
  margin-bottom: .6rem;
}
.hoja__perfil .ico { font-size: 1.35em; letter-spacing: 0; }
.hoja--admin .hoja__perfil { color: #FF8A8F; border-color: rgba(255,138,143,.34); }

.hoja__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 2.95rem); color: var(--crema);
  line-height: 1.02; letter-spacing: -.03em;
  text-wrap: balance; hyphens: auto; overflow-wrap: break-word;
}
.hoja__titulo em { font-style: normal; color: var(--naranja-cl); display: block; }
.hoja--admin .hoja__titulo { font-size: clamp(1.2rem, 2.7vw, 2.35rem); }

.hoja__zona {
  display: flex; align-items: flex-start; gap: .45em;
  font-size: clamp(.78rem, 1.1vw, .9rem); color: var(--crema-3);
  margin: .5rem 0 0; opacity: .95; text-wrap: pretty;
}
.hoja__zona .ico { font-size: 1.15em; opacity: .8; margin-top: .18em; }
.hoja__nota {
  font-family: var(--script); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--amarillo); margin: .18rem 0 0; opacity: .88;
}

.hoja__estado {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .8rem;
  font-size: .77rem; font-weight: 600; color: var(--crema-2);
  padding: .34em .8em; border-radius: 99px;
  background: rgba(253,244,231,.1); border: 1px solid rgba(253,244,231,.12);
  backdrop-filter: blur(6px);
}
.hoja__estado:empty { display: none; }
.hoja--admin .hoja__estado { color: var(--crema-3); }
.punto { width: .5em; height: .5em; border-radius: 50%; background: var(--verde-cl); flex: none; }
.punto--on { animation: latido 2.4s var(--ease-suave) infinite; }
.punto--off { background: var(--arena); }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(30,158,92,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(30,158,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,158,92,0); }
}

.hoja__entrar {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: 1.1rem; padding: .68em 1.25em; border-radius: 99px;
  background: var(--naranja); color: var(--nori);
  font-weight: 700; font-size: clamp(.8rem, 1.05vw, .89rem);
  letter-spacing: -.005em; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(240,144,30,.24);
  filter: saturate(.88) brightness(.93);
  transition: filter var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.hoja__entrar .ico { font-size: 1.15em; transition: transform var(--d-rapido) var(--ease); }
.hoja--gana   .hoja__entrar { filter: none; box-shadow: 0 12px 34px rgba(240,144,30,.42); }
.hoja--gana   .hoja__entrar .ico { transform: translateX(3px); }
.hoja--pierde .hoja__entrar { filter: saturate(.4) brightness(.72); box-shadow: none; }
.hoja--admin .hoja__entrar { background: var(--rojo-vivo); color: #fff;
                             box-shadow: 0 8px 22px rgba(210,38,45,.26); }
.hoja--admin.hoja--gana .hoja__entrar { box-shadow: 0 12px 34px rgba(210,38,45,.45); }

/* --- Rótulo de marca y la instrucción ------------------------------------ */
.entrada__marca::before {
  content: ""; position: absolute; left: 50%; top: -45%; translate: -50% 0;
  width: 170%; height: 205%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 44%,
    rgba(10,7,5,.86), rgba(10,7,5,.5) 56%, transparent 78%);
}
.entrada__marca {
  position: absolute; left: 50%; top: clamp(1.1rem, 3.4vh, 2.6rem);
  translate: -50% 0; z-index: 5; text-align: center; pointer-events: none;
  width: min(92vw, 30rem);
  animation: hoja-sube .9s var(--ease) both;
}
.entrada__logo {
  width: clamp(84px, 9.5vw, 124px); height: auto; display: block; margin: 0 auto .45rem;
  filter: drop-shadow(0 12px 40px rgba(240,144,30,.5));
  animation: flotar 6s var(--ease-suave) infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-9px)  rotate(-1.6deg); }
}
.entrada__t {
  font-family: var(--display); font-weight: 700; color: var(--crema);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: -.025em; margin: 0;
  text-shadow: 0 3px 22px rgba(12,8,6,.75);
}
.entrada__t em { font-style: normal; color: var(--rojo-vivo); }
.entrada__s {
  font-family: var(--script); font-size: clamp(1rem, 2vw, 1.28rem); margin: 0;
  color: var(--amarillo); text-shadow: 0 2px 16px rgba(12,8,6,.8);
}
/* La instrucción. Sin esto, la pantalla es tres fotos y hay que adivinar. */
.entrada__guia {
  display: flex; align-items: center; gap: .9rem; margin: 1.15rem 0 0;
  font-size: clamp(.63rem, 1vw, .72rem); font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; color: var(--crema-3);
  white-space: nowrap;
}
.entrada__guia::before, .entrada__guia::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253,244,231,.34));
}
.entrada__guia::after { background: linear-gradient(90deg, rgba(253,244,231,.34), transparent); }
.entrada__pista {
  margin: .5rem 0 0; font-size: clamp(.76rem, 1.2vw, .87rem);
  color: var(--crema-3); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 2px 14px rgba(12,8,6,.95);
}

/* --- Paso de contraseña, sobre el partidor -------------------------------- */
.acceso {
  position: fixed; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(10,7,5,.78); backdrop-filter: blur(16px) saturate(1.25);
  animation: velo-entra .34s var(--ease) both;
}
.acceso__caja {
  width: min(430px, 100%); text-align: center;
  animation: modal-entra .5s var(--resorte) both;
}
.acceso__icono {
  width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 1.15rem;
  display: grid; place-items: center; font-size: 2rem; color: #fff;
  background: linear-gradient(145deg, var(--rojo), var(--rojo-osc));
  box-shadow: 0 18px 46px rgba(176,30,36,.5), inset 0 1px 0 rgba(255,255,255,.24);
}
.acceso__icono--naranja { background: linear-gradient(145deg, var(--naranja), #C96F0E);
                          color: var(--nori);
                          box-shadow: 0 18px 46px rgba(240,144,30,.42),
                                      inset 0 1px 0 rgba(255,255,255,.3); }
.acceso__caja h2 { color: var(--crema); font-size: 1.62rem; margin-bottom: .25rem;
                   letter-spacing: -.025em; }
.acceso__caja p.sub { color: var(--arena); font-size: .9rem; margin: 0 0 1.6rem;
                      line-height: 1.5; }

.campo-oscuro {
  width: 100%; padding: .95rem 1.1rem; border-radius: 13px; text-align: left;
  background: rgba(253,244,231,.07); color: var(--crema);
  border: 1.5px solid rgba(253,244,231,.17);
  transition: border-color var(--d-rapido) var(--ease), background var(--d-rapido) var(--ease),
              box-shadow var(--d-rapido) var(--ease);
}
.campo-oscuro::placeholder { color: rgba(169,144,124,.7); }
.campo-oscuro:focus { border-color: var(--naranja); background: rgba(253,244,231,.12);
                      outline: none; box-shadow: 0 0 0 4px rgba(240,144,30,.18); }
.acceso label { color: var(--crema-3); text-align: left; }

/* El ojo sobre el campo oscuro. `.clave-campo` y `.clave-ojo` los define
   08-cajon.css, que se carga después de este archivo, así que hace falta el
   `.acceso` delante para ganarle el color sin tocar el orden de los <link>. */
.acceso .clave-campo .campo-oscuro { padding-right: 3.4rem; }
.acceso .clave-ojo {
  right: .55rem; width: 40px; height: 40px; border-radius: 11px; color: var(--arena);
}
.acceso .clave-ojo:hover { color: var(--crema); background: rgba(253,244,231,.14); }

.acceso__error {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(210,38,45,.22); border: 1.5px solid rgba(210,38,45,.48);
  color: #FFD9DA; padding: .75rem 1rem; border-radius: 12px;
  font-size: .87rem; margin-bottom: 1rem; text-align: left;
  animation: sacudir .45s var(--ease-io);
}
.acceso__error .ico { font-size: 1.1rem; margin-top: .06rem; }
@keyframes sacudir {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}
.volver {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 1.3rem;
  color: var(--arena); font-size: .86rem; font-weight: 500;
  transition: color var(--d-rapido) var(--ease);
}
.volver:hover { color: var(--crema); }

/* --- En pantalla angosta el partidor se acuesta --------------------------
   Tres tajadas verticales de 30 % de ancho en un teléfono no se leen. Acá el
   telón se convierte en tres bandas apiladas, con la misma información y sin
   diagonal: la diagonal es un lujo de pantalla ancha.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .entrada { overflow-y: auto; overscroll-behavior: contain; }
  .entrada::after { position: fixed; }

  .entrada__marca {
    position: static; translate: none; width: auto; pointer-events: auto;
    padding: clamp(1rem, 4.5vw, 1.7rem) 1.2rem .9rem;
  }
  .entrada__marca::before { display: none; }
  .entrada__logo { animation: none; width: clamp(70px, 19vw, 96px); }
  .entrada__guia { margin-top: .95rem; }

  /* Acostado, el texto ya no cae sobre la parte oscura de la foto sino sobre
     el medio de la banda. El velo pasa de subir desde abajo a entrar por la
     izquierda, que es donde está el texto. */
  .hoja__velo {
    background: linear-gradient(100deg,
      rgba(10,7,5,.95) 0%, rgba(10,7,5,.86) 42%, rgba(10,7,5,.62) 72%, rgba(10,7,5,.42) 100%);
  }
  .hoja--gana .hoja__velo::after { content: none; }

  .partidor { position: static; display: grid; gap: 0;
              grid-template-rows: repeat(3, minmax(0, auto)); }
  .hoja {
    position: relative; inset: auto; min-height: clamp(178px, 24vh, 240px);
    clip-path: none !important;
  }
  .hoja + .hoja { border-top: 1px solid rgba(253,244,231,.13); }
  .hoja__foto img { width: 100%; }
  .hoja--admin .hoja__marca { width: 40%; right: -4%; }

  .hoja__texto {
    position: relative; left: auto !important; right: auto !important;
    width: 100%; padding: clamp(.95rem, 4vw, 1.4rem);
  }
  .hoja__zona   { margin-top: .38rem; }
  .hoja__estado { margin-top: .55rem; }
  /* En este modo no hay «hoja que gana»: nada se apaga. */
  .hoja__entrar { filter: none !important; margin-top: .9rem; }
  .hoja__perfil { margin-bottom: .5rem; }
}