/* =========================================
   LOMAS DE ANGELÓPOLIS — MAINTENANCE PAGE
   ========================================= */

/* ── @font-face: Circular Book (weight 400) ── */
@font-face {
    font-family: 'CircularBook';
    src: url('../fonts/Circular/CircularSpotifyTextBook.eot');
    src:
      url('../fonts/Circular/CircularSpotifyTextBook.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Circular/CircularSpotifyTextBook.woff2')      format('woff2'),
      url('../fonts/Circular/CircularSpotifyTextBook.woff')       format('woff'),
      url('../fonts/Circular/CircularSpotifyTextBook.ttf')        format('truetype'),
      url('../fonts/Circular/CircularSpotifyTextBook.svg#CircularBook') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  /* ── Reset & base ── */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1a1a1a; /* fallback si el video tarda */
  }
  
  /* =========================================
     VIDEO DE FONDO
     ========================================= */
  .video-wrapper {
    position: fixed;
    inset: 0;
    z-index: 0;
  }
  
  .bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
  
  /* Vignette — oscurece los lados y la parte baja, fiel al diseño original */
  .overlay {
    position: absolute;
    inset: 0;
    background:
      /* lado izquierdo oscuro */
      linear-gradient(
        to right,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.30) 30%,
        rgba(0, 0, 0, 0.05) 55%,
        rgba(0, 0, 0, 0.05) 65%,
        rgba(0, 0, 0, 0.28) 85%,
        rgba(0, 0, 0, 0.60) 100%
      ),
      /* parte superior oscura (muy sutil) */
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.30) 0%,
        transparent 20%,
        transparent 75%,
        rgba(0, 0, 0, 0.25) 100%
      );
    pointer-events: none;
  }
  
  /* =========================================
     CONTENIDO
     ========================================= */
  .content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 36px 36px;
  }
  
  /* =========================================
     LOGO
     ========================================= */
  .logo-area {
    display: flex;
    align-items: flex-start;
    animation: fadeIn 1s ease both;
  }
  
  .logo-img {
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  
  /* =========================================
     MENSAJE DE MANTENIMIENTO
     ========================================= */
  .message-area {
    display: flex;
    justify-content: flex-start; 
    align-items: center;         
    flex: 1;
    animation: slideUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  }
  
  .maintenance-text {
    font-family: CircularBook, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 400;
    font-style: normal;
    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-stretch: 100%;
    font-variant: normal;
    font-variation-settings: normal;
    line-height: 30px;
    color: rgb(255, 255, 255);
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    text-shadow:
      0 1px 4px rgba(0,0,0,0.6),
      0 2px 12px rgba(0,0,0,0.35);
  }
  

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

  @media (max-width: 600px) {
    .content {
      padding: 20px 22px 28px;
    }
  
    .logo-name {
      font-size: 10px;
      letter-spacing: 0.14em;
    }
  
    .logo-icon {
      width: 34px;
      height: 34px;
    }
  
    .maintenance-text {
      font-size: clamp(0.9rem, 4vw, 1.05rem);
    }
  }