/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Bangers", system-ui, sans-serif;
}

/* Evita escalado raro de texto en iOS al rotar / teclado */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fondo general */
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 100dvh: altura real visible (barra URL iOS); safe-area: notch/home */
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Contenedor 16:9 */
#game-container {
  width: 95vw;
  max-width: 1500px;
  height: 95vh;
  height: 95dvh;
  max-height: min(1200px, 95dvh);
  background: #000000;
  position: relative;
  overflow: hidden;
  border: 3px solid black;
}

/*
 * iOS Safari: si el font-size del <input> es < 16px, al enfocar hace zoom
 * y a veces el zoom NO se revierte al cerrar el teclado.
 * Mínimo 16px en campos editables dentro del libro.
 */
@media (max-width: 1024px) {
  #scene-root input,
  #scene-root textarea,
  #scene-root select {
    font-size: 16px !important;
    line-height: 1.25;
  }

  .unlock-container input,
  .unlock-right input,
  .intro-container input {
    font-size: 16px !important;
  }
}

/* Donde cargan las escenas */
#scene-root {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 🎨 ANIMACIÓN tipo “pop-in” suave y juguetona */
@keyframes popComic {
  0% {
    transform: scale(0.7) rotate(-2deg);
    opacity: 0;
  }
  40% {
    transform: scale(1.03) rotate(1deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* 🗯️ Cuadros de texto estilo cómic */
.text-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  max-width: 70%;
  padding: 14px 18px;
  font-size: 1.5rem;
  line-height: 1.15;

  background: white;
  color: black;
  border: 4px solid black;
  box-shadow: 6px 6px 0px #000;
  animation: popComic 2s ease forwards;
  z-index: 2000 !important;
}


#scene-root {
  position: relative;
}

.text-box {
  margin: 0 !important;

  /* ESTO ES LA CLAVE */
  pointer-events: auto;
  z-index: 9999 !important;
}


/* 🟦 Botones estilo viñeta */
button {
  background: white;
  color: black;
  border: 4px solid black;
  padding: 12px 22px;
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 5px 5px 0px #000;
  animation: popComic 2s ease forwards;
  transition: transform 0.15s, box-shadow 0.15s;
}

button.has-image {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: 90px;    /* 👈 tamaño SUGERIDO */
  height: 90px;   /* 👈 tamaño SUGERIDO */
  display: flex;
  justify-content: center;
  align-items: center;
}

button.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* evita clics dobles feos */
}


/* Hover “cómic” */
button:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px #000;
}

/* Botón deshabilitado */
button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Inputs estilo “bocadillo” */
input {
  background: white;
  border: 4px solid black;
  padding: 10px 14px;
  font-size: 1.3rem;
  border-radius: 0;
  box-shadow: 5px 5px 0px #000;
  animation: popComic 2s ease forwards;
}

video {
  position: absolute;
  width: 80%;          /* antes 100% */
  height: 80%;         /* antes 100% */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain !important;
  background: #000;
}

/* Excepciones: estos videos siempre van al 100% */
video[src*="cinematica.mp4"],
video[src*="cinematicamod.mp4"],
video[src*="fin.mp4"],
video[src*="capitulo2.mp4"],
video[src*="capitulo3.mp4"],
video[src*="capitulo4.mp4"],
video[src*="capitulo5.mp4"],
video[src*="intro"] {
  width: 100% !important;
  height: 100% !important;
}

video {
  opacity: 0;
  transition: opacity 0s; /* sin fade */
}

/* 🎯 Estilo especial para INSTRUCCIONES */
.instrucciones-text {
  position: absolute;
  top: 10%;               /* cambia si quieres más arriba o más abajo */
  left: 50%;
  transform: translateX(-50%);

  width: 70%;             /* ancho controlado */
  max-height: 70%;        /* scrolleable */
  overflow-y: auto;

  padding: 20px 26px;
  font-size: 1.4rem;
  line-height: 1.25;

  z-index: 20;
}

/* Lista bonita dentro de instrucciones */
.instrucciones-text ul {
  padding-left: 25px;
  margin: 0;
}

.instrucciones-text li {
  margin-bottom: 12px;
  list-style: disc;
}

/* 🔥 Corrección absoluta para centrar el cuadro de INSTRUCCIONES */
.instrucciones-text {
  position: absolute !important;

  top: 10% !important;             /* mueve arriba/abajo */
  left: 50% !important;            /* centro horizontal */
  transform: translateX(-50%) !important;

  width: 50% !important;           /* ancho fijo */
  max-height: 50% !important;      
  overflow-y: auto !important;

  margin: 0 !important;            /* limpia márgenes heredados */
}

/* 🎨 INTRODUCCIÓN — diseño centrado y bonito */
.intro-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;

  width: 70%;
  z-index: 30;
}

/* Input grande y centrado */
.intro-container input {
  width: 100%;
  font-size: 1.8rem;
  padding: 14px 18px;
  text-align: center;
}

.intro-avatar-label {
  font-size: 1.4rem;
  color: black;
  background: white;
  padding: 6px 14px;
  text-align: center;
  line-height: 1;
  margin-bottom: -10px;
}

/* Avatares alineados */
.intro-avatars {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 25px !important;
  width: 100%;
}

/* Cada avatar redondo y grande */
.intro-avatars img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  border: 4px solid black !important;
  object-fit: cover;
  cursor: pointer;
  box-shadow: 4px 4px 0px #000;
  transition: transform 0.2s;
}

.intro-avatars img:hover {
  transform: scale(1.1);
}

/* Avatar seleccionado */
.intro-avatars img.selected {
  border-color: #ffdd00 !important;
  box-shadow: 6px 6px 0px #000;
}

/* Botón centrado */
.intro-container button {
  font-size: 1.6rem;
  padding: 14px 30px;
}

/* Fuerza a que el video de escenas tipo AUDIO sea visible */
.video-audio-bg {
  position: absolute !important;
  z-index: 1 !important;   /* debajo del audio y botón */
  display: block !important;
  opacity: 1 !important;
  pointer-events: none;    /* no interfiere */
  width: 90% !important;     /* 👈 tamaño que quieres */
  height: 90% !important;    /* 👈 tamaño proporcional */
}

/* 🎥 Fondo (lo dejas igual si ya te funciona bien) */
.unlock-bg-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  filter: blur(2px) brightness(0.55);
  opacity: 1 !important;
  z-index: 0;
  pointer-events: none;
}

/* 🧩 CONTENEDOR PRINCIPAL — crece con el contenido; sin scroll interno obligatorio */
.unlock-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: row;

  width: 85%;
  max-width: 1100px;
  height: auto;
  max-height: min(94dvh, 92vh);
  overflow: visible;

  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: clamp(14px, 2.2vh, 24px);
  gap: clamp(16px, 2.5vw, 28px);

  font-family: Arial, sans-serif;
}

/* 🖼️ COLUMNA IZQUIERDA */
.unlock-left {
  flex: 0.4;

  background: url("assets/flyer.png") no-repeat center;
  background-size: contain;
}

/* Columna derecha: nunca scroll interno; el panel completo se ajusta */
.unlock-right {
  flex: 1.6;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-width: 0;
  overflow: visible;
}

/* TEXTO */
/* 🔧 FIX: evitar que el texto se monte sobre inputs en unlock */
.unlock-right .text-box {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  max-width: 100% !important;
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

/* Registro / login: menos hueco vertical entre controles */
.unlock-form-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: clamp(6px, 1vh, 10px) 0 0;
  gap: clamp(8px, 1.4vh, 12px);
}

/* Texto de precio / condiciones: todo visible de una vez (sin scroll en la caja blanca) */
.unlock-container .text-box.unlock-main-copy {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow-x: hidden;
  max-height: none;
  overflow-y: visible;
}

/* Párrafo largo de registro: tipografía más densa para ocupar menos alto */
.unlock-container .text-box.unlock-main-copy:not(.unlock-main-copy--login-only) {
  font-size: clamp(0.56rem, 1.15vmin, 0.72rem);
  line-height: 1.2;
  padding: clamp(6px, 1vh, 9px) clamp(8px, 1.2vw, 11px);
  image-rendering: auto;
}

/* Caja blanca compacta cuando no hay texto largo de precio (login = mismo estilo que cuenta gratis) */
.unlock-container .text-box.unlock-main-copy.unlock-main-copy--login-only {
  max-height: none;
  overflow-y: visible;
  font-size: 1rem;
}

/* Pantalla cuenta gratis: mensaje corto, sin scroll interno */
.unlock-container .text-box.unlock-free-copy {
  max-height: none;
  overflow-y: visible;
}

.unlock-form-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(4px, 0.6vh, 8px);
  margin-top: 2px;
  width: 100%;
}

/* Enlaces del panel unlock: dos líneas (p. ej. login) deben caber sin scroll */
.unlock-container .unlock-form-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
  font-size: clamp(0.68rem, 1.5vmin, 0.88rem);
  line-height: 1.2;
  text-align: left;
  padding: 3px 2px;
  min-height: 30px;
}

.unlock-container .unlock-form-link-have-account {
  font-size: clamp(0.74rem, 1.65vmin, 0.92rem);
  font-weight: 700;
  min-height: 34px;
  padding: 4px 2px;
}

.unlock-container .unlock-form-stack > input {
  align-self: flex-start;
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Botones a todo el ancho de la columna (como el diseño original) */
.unlock-container .unlock-form-stack > button {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.unlock-form-stack > .unlock-form-links {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

/* INPUTS */
.unlock-right input {
  width: 100%;
  margin-bottom: 4px;
  padding: 12px;
}

/* BOTONES */
.unlock-right button {
  width: 100%;
  margin-top: 4px;
}

/* 🚫 Evitar selección de texto */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img, video {
  -webkit-user-drag: none;
}


#rotate-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: black;
  color: white;
  z-index: 999999;
  font-size: 1.4rem;
  text-align: center;

  justify-content: center;
  align-items: center;
  padding: 30px;
}

.btn-intro {
  position: absolute;

  /* Tamaño grande */
  min-width: 320px;
  padding: 26px 54px;

  /* Tipografía */
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;

  /* Metal base */
  background:
    linear-gradient(
      135deg,
      #f5f5f5 0%,
      #d6d6d6 25%,
      #bfbfbf 50%,
      #e6e6e6 75%,
      #f9f9f9 100%
    );

  color: #1a1a1a;

  /* Bordes y bisel */
  border-radius: 18px;
  border: 3px solid #8a8a8a;

  /* Profundidad */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.8),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    0 16px 30px rgba(0,0,0,0.45);

  cursor: pointer;

  /* Sensación de peso */
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.btn-intro {
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 -1px 1px rgba(0,0,0,0.6);
}

.btn-intro:active {
  transform: translate(-50%, -50%) scale(0.98);
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.35),
    inset 0 -1px 2px rgba(255,255,255,0.4),
    0 8px 18px rgba(0,0,0,0.35);
}


.btn-intro:hover {
  filter: brightness(1.08);
}

.instrucciones-text {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
}

.instrucciones-text::-webkit-scrollbar {
  width: 16px;
}

.instrucciones-text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6);
  border: 4px solid black;
  border-radius: 10px;
  box-shadow: 2px 2px 0px black;
}

.instrucciones-text::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-left: 4px solid black;
}
/* 
.unlock-container {
  position: relative;
  z-index: 5;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 40px;
}
*/
.unlock-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* 👈 se queda detrás */
}

/* 🗯️ Balota tipo cómic pixel — más pequeña */
.unlock-container .text-box {
  background: #ffffff;
  color: #000;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000000;
  padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.4vw, 14px);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
  image-rendering: pixelated;
  max-width: 100%;
  margin-bottom: clamp(8px, 1.1vh, 12px);
}

/* 🎥 Video preview más compacto */
.unlock-container video {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #8338ec;
  width: 100%;
  max-width: 420px;
}

/* 🧾 Inputs pixel (en móvil iOS usar ≥16px; ver media query arriba) */
.unlock-container input {
  background: #ffffff;
  border: 3px solid #000;
  padding: 6px 8px;
  font-size: clamp(16px, 0.85rem, 18px);
  width: 100%;
  max-width: 260px;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
  line-height: 1.2;
}

/* 🔓 Botón 8-bit compacto */
.unlock-container button {
  background: #000000;
  color: white;
  border: 3px solid #ffffff;
  padding: 8px 12px;
  font-size: 0.7rem;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s ease;
  line-height: 1.2;
}

.unlock-container button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}


/* 🚫 Los videos de fondo NO deben bloquear clics */
video {
  pointer-events: none;
}

/* ✅ EXCEPCIÓN: videos que SÍ deben poder tocarse */
.unlock-container video,
video[controls] {
  pointer-events: auto;
}

.video-interactivo {
  pointer-events: auto;
  cursor: pointer;
}

video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/*---------------------MOBILE ROTATION WARNING---------------------*/

@media (max-width: 768px) and (orientation: portrait) {
  #rotate-warning {
    display: flex;
  }

  #game-container {
    display: none;
  }
}

/*---------------------------RESPONSIVE---------------------------*/
@media (max-width: 1024px) and (orientation: landscape) {

  /* Texto principal */
  .text-box {
    font-size: 0.8rem !important;
    padding: 7px 12px !important;
    max-width: 86% !important;
    box-shadow: 3px 3px 0px #000;
  }

  /* Botones */
  button {
    font-size: 0.8rem !important;
    padding: 7px 14px !important;
    box-shadow: 3px 3px 0px #000;
  }

  button.has-image {
    width: 52px !important;
    height: 52px !important;
  }

  /* Inputs: 16px mínimo evita zoom iOS al enfocar */
  input,
  textarea,
  select {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* INTRO */
  .intro-container {
    width: 88% !important;
    gap: 14px !important;
  }
  
 .intro-avatar-label {
  font-size: 0.85rem !important;
  padding: 4px 10px;
  margin-bottom: -5px;
}

  .intro-container input {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  .intro-avatars img {
    width: 60px !important;
    height: 60px !important;
  }

  .intro-container button {
    font-size: 0.85rem !important;
    padding: 7px 16px !important;
  }

  /* INSTRUCCIONES */
  .instrucciones-text {
    width: 82% !important;
    font-size: 0.8rem !important;
    padding: 12px 16px !important;
  }

  /* UNLOCK */
  .unlock-container input {
    font-size: 16px !important;
  }

  /* Audio */
  audio {
    width: 78% !important;
  }

  .instrucciones-text + button {
    bottom: 18% !important;
  }

  .btn-intro {
    font-size: 22px;
    padding: 20px 42px;
    min-width: 260px;
  }
  
  .unlock-container {
    width: 95%;
    height: auto;
    max-height: min(94dvh, 92vh);
    padding: 15px;
    gap: 15px;
  }

  /* Columnas más compactas */
  .unlock-left {
    flex: 0.5;
    background-size: contain;
  }

  .unlock-right {
    flex: 1.5;
    justify-content: center;
    overflow: visible;
  }

  .unlock-form-stack {
    gap: 14px;
    margin-top: 10px;
  }

  /* Texto más pequeño */
  .unlock-container .text-box {
    font-size: 0.65rem;
    padding: 8px 10px;
  }

  .unlock-container .text-box.unlock-main-copy {
    max-height: none;
    overflow-y: visible;
  }

  /* Inputs: no bajar de 16px en iOS */
  .unlock-container input {
    font-size: 16px !important;
    padding: 10px;
    max-width: 100%;
  }

  /* Botones más pequeños */
  .unlock-container button {
    font-size: 0.65rem;
    padding: 8px;
  }
}

/*
 * Escena unlock (pago) + pantalla cuenta gratis comparten .unlock-container.
 * Sin scroll dentro de la caja blanca; inputs más bajos en móvil para evitar scroll de toda la vista.
 */
@media (max-width: 1024px) {
  .unlock-container {
    flex-direction: column;
    width: min(96vw, 520px);
    max-width: 96vw;
    height: auto;
    max-height: 96dvh;
    padding: clamp(6px, 1.6dvh, 14px);
    gap: clamp(5px, 1dvh, 12px);
    justify-content: flex-start;
    align-items: stretch;
    overflow: visible;
    touch-action: manipulation;
  }

  .unlock-left {
    flex: none;
    width: 100%;
    /* Flyer más legible en tablet/móvil; el escritorio usa solo .unlock-left sin esta media */
    height: clamp(130px, 28vmin, min(240px, 34dvh));
    min-height: 120px;
    max-height: min(38dvh, 260px);
    background-position: center center;
    background-size: contain;
  }

  .unlock-right {
    flex: none;
    width: 100%;
    min-height: 0;
    overflow: visible;
    justify-content: flex-start;
  }

  .unlock-right .text-box {
    margin-bottom: clamp(4px, 0.8dvh, 12px);
  }

  .unlock-container .text-box,
  .unlock-container .text-box.unlock-main-copy,
  .unlock-container .text-box.unlock-free-copy {
    max-height: none !important;
    overflow-y: visible !important;
    font-size: clamp(0.58rem, 2.6vmin, 0.88rem);
    padding: clamp(6px, 1dvh, 10px) clamp(7px, 2vw, 12px);
    line-height: 1.22;
    image-rendering: auto;
  }

  .unlock-form-stack {
    margin-top: clamp(4px, 0.8dvh, 12px);
    gap: clamp(5px, 1.1dvh, 12px);
  }

  .unlock-container .unlock-form-stack > input {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .unlock-container input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    /* 16px mínimo evita zoom iOS al enfocar; menos padding vertical = menos altura total */
    font-size: 16px !important;
    line-height: 1.2;
    padding: clamp(4px, 0.65dvh, 7px) 8px !important;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
  }

  .unlock-container .unlock-form-stack > button {
    width: 100%;
    max-width: 100%;
  }

  .unlock-container button {
    font-size: clamp(0.62rem, 2.3vmin, 0.8rem);
    padding: clamp(5px, 0.9dvh, 9px) 10px;
    line-height: 1.2;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
  }

  .unlock-form-links {
    width: 100%;
    align-items: stretch;
    gap: clamp(4px, 0.8dvh, 8px);
    margin-top: 2px;
  }

  .unlock-container .unlock-form-link {
    font-size: clamp(0.92rem, 3.8vmin, 1.12rem);
    padding: 10px 4px;
    min-height: 48px;
    line-height: 1.25;
  }

  .unlock-container .unlock-form-link-have-account {
    font-size: clamp(0.98rem, 4vmin, 1.18rem);
    min-height: 52px;
    padding: 12px 6px;
  }
}

.unlock-container .text-box.unlock-free-copy{
    font-size: clamp(0.52rem, 2.3vmin, 0.78rem);
    line-height: 1.18;
}

@media (max-width: 1024px) and (max-height: 560px) {
  .unlock-container {
    gap: 4px;
    padding: 4px 8px;
    max-height: 98dvh;
    touch-action: manipulation;
  }

  /* Celular típico (poco alto): sin flyer para dejar espacio a formulario y enlaces */
  .unlock-left {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }

  .unlock-container .text-box,
  .unlock-container .text-box.unlock-main-copy,
  .unlock-container .text-box.unlock-free-copy {
    font-size: clamp(0.52rem, 2.2vmin, 0.74rem);
    padding: 4px 6px;
    line-height: 1.15;
  }
  
  .unlock-container .text-box.unlock-free-copy{
    font-size: clamp(0.48rem, 2vmin, 0.68rem);
    line-height: 1.15;
}

  .unlock-form-stack {
    gap: 4px;
    margin-top: 2px;
  }

  .unlock-container input {
    font-size: 16px !important;
    padding: 3px 6px !important;
    line-height: 1.15;
    border-width: 2px;
    box-shadow: 1px 1px 0 #000;
  }

  .unlock-container button {
    padding: 4px 8px;
    line-height: 1.15;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000;
  }

  .unlock-container .unlock-form-link {
    font-size: clamp(0.95rem, 4vmin, 1.15rem);
    min-height: 48px;
    padding: 10px 4px;
  }

  .unlock-container .unlock-form-link-have-account {
    font-size: clamp(1.02rem, 4.2vmin, 1.22rem);
    min-height: 52px;
    padding: 12px 4px;
  }
}

/* Ventana baja solo en viewports estrechos (no afecta escritorio ancho) */
@media (max-width: 1024px) and (max-height: 720px) {
  .unlock-container {
    max-height: min(98dvh, 96vh);
    padding: clamp(8px, 1.2vh, 16px);
    gap: clamp(8px, 1.2vw, 18px);
  }

  .unlock-container .text-box.unlock-main-copy:not(.unlock-main-copy--login-only) {
    font-size: clamp(0.5rem, 1.05vmin, 0.66rem);
    line-height: 1.12;
    padding: 5px 7px;
  }
  
  .unlock-container .text-box.unlock-free-copy{
    font-size: clamp(0.50rem, 2.1vmin, 0.72rem);
    line-height: 1.18;
}

  .unlock-form-stack {
    gap: 6px;
    margin-top: 4px;
  }

  .unlock-container input {
    font-size: 16px !important;
    padding: 5px 7px;
  }

  .unlock-container button {
    padding: 6px 10px;
    font-size: 0.65rem;
  }
}

/* Pantallas muy estrechas: sin flyer en formulario unlock (no afecta portada gratuita) */
@media (max-width: 480px) {
  .unlock-left {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
}

/* Portada capítulo gratuito (antes del registro) */
.free-cover-screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: clamp(12px, 2.5dvh, 24px) clamp(14px, 4vw, 28px)
    clamp(16px, 3dvh, 28px);
  gap: clamp(12px, 2dvh, 20px);
  overflow: hidden;
  touch-action: manipulation;
}

.free-cover-flyer {
  flex: 1 1 auto;
  width: 100%;
  max-width: min(96vw, 720px);
  min-height: 0;
  margin: 0 auto;
  background: url("assets/flyer.png") no-repeat center center;
  background-size: contain;
}

.free-cover-enter-btn {
  flex: 0 0 auto;
  width: 100%;
  max-width: min(96vw, 520px);
  margin: 0 auto;
  padding: clamp(12px, 2dvh, 16px) clamp(16px, 4vw, 24px);
  font-size: clamp(0.72rem, 2.8vmin, 0.95rem);
  line-height: 1.25;
  text-align: center;
  background: #000000;
  color: #ffffff;
  border: 3px solid #ffffff;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s ease;
}

.free-cover-enter-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

@media (max-width: 1024px) {
  .free-cover-screen {
    padding: clamp(10px, 2dvh, 18px) clamp(12px, 3.5vw, 20px)
      clamp(14px, 2.5dvh, 22px);
  }

  .free-cover-flyer {
    max-width: min(94vw, 560px);
    min-height: min(52dvh, 420px);
  }

  .free-cover-enter-btn {
    font-size: clamp(0.78rem, 3.2vmin, 1rem);
    padding: clamp(11px, 1.8dvh, 15px) clamp(14px, 3vw, 20px);
  }
}

@media (max-width: 480px) {
  .free-cover-flyer {
    min-height: min(58dvh, 480px);
    max-height: calc(100dvh - 120px);
  }

  .free-cover-enter-btn {
    font-size: clamp(0.8rem, 3.6vmin, 1.05rem);
  }
}