/* ==============================================
   Fuentes y base
============================================== */
@font-face{
  font-family: 'ExposureItalicTrial';
  src: url('assets/fonts/ExposureItalicTrial.woff2') format('woff2'),
       url('assets/fonts/ExposureItalicTrial.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Athelas';
  src: url('fonts/Athelas-Regular.woff2') format('woff2'),
       url('fonts/Athelas-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* Títulos con Exposure; resto Arial */
.title-font {
  font-family: ExposureItalicTrial, Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
}

:root { --overlay: rgba(0, 0, 0, 0.45); }
* { box-sizing: border-box; }

/* Evitar scroll en escritorio */
@media (min-width: 992px) {
  html, body { height: 100%; overflow: hidden; }
}

body { min-height: 100vh; }

/* Fondo global de video */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.05) brightness(0.65);
  z-index: 0;
}

/* Pantallas */
.screen {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.screen.show { opacity: 1; }

/* ==============================================
   Página 1: input con borde inferior
============================================== */
.input-underline .prefix {
  font-weight: 300;
}

.input-underline .prefix {
  white-space: nowrap;
  font-size: 30px;
}
.input-underline input {
  flex: 1;
  max-width: 200px;
  background: transparent;
  border: none;
  outline: none;
  font-weight: 300;
  color: #fff;
  font-size: 30px;
  border-bottom: 1px solid #fff;
}

/* ==============================================
   Página 2: tarjetas 9:16 sin títulos overlay
   - Botón debajo
   - 7 elementos caben (4 + 3) sin scroll en desktop
============================================== */
.card-ambient {
  border: none;
  background: transparent;
}
.card-ambient .img {
  aspect-ratio: 9/16;
  background: center / cover no-repeat;
  border: none;
  box-shadow: none;
}
.card-ambient .actions {
  text-align: center;
  padding: 0.25rem;
}

@media (min-width: 992px) {
  /* 2 filas ~ 68vh + gaps -> evita scroll */
  #p2 .col-lg-8 .img { height: 34vh; }
}

/* En móviles se permite scroll */
@media (max-width: 991.98px) {
  html, body { overflow: auto; }
}

/* ==============================================
   Página 3: preview 9:16 sin bordes (pequeño)
============================================== */
.preview-wrap {
  width: min(260px, 70vw);
  aspect-ratio: 9/16;
  position: relative;
}
.preview-wrap > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ====== Botón tipo "Generar Clip" (versión estática) ====== */
.btn-generar {
  display: inline-block;
  background-color: #fff;       /* Fondo blanco */
  color: #000;                  /* Texto negro */
  border: 1.5px solid #ddd;     /* Borde gris claro */
  border-radius: 6px;           /* Bordes redondeados */
  padding: 5px 10px;         /* Espaciado interno */
  font-family: 'Athelas', serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;        /* Sin subrayado */
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8),
              0 1px 3px rgba(0,0,0,0.2); /* Sombra sutil */
}

/* =====================================================
   Margen superior e inferior en móvil
   (para que las secciones no queden pegadas al borde)
===================================================== */
@media (max-width: 767.98px) {
  section.screen {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Ajusta los contenedores internos también */
  section.screen .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* En móviles, reduce separación extra de filas */
  section.screen .row {
    row-gap: 1.5rem !important;
  }

  /* Centra mejor los textos grandes */
  .title-font, .display-4, .display-5 {
    text-align: center;
  }
}