/* ==========================================================================
   RESET & BASE STYLES (MOBILE-FIRST)
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

   :root {
       --primary-red: #C50F12;
       --dark-red: #B00710;
       --accent-red: #FF1F1F;
       --black: #0A0A0A;
       --dark-gray: #1A1A1A;
       --light-gray: #2A2A2A;
       --white: #FFFFFF;
       --green-test: #1DB954;
       --dark-green: #169943;
       --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
       --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
       --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
       --border-radius-sm: 8px;
       --border-radius-md: 12px;
       --border-radius-lg: 16px;
       --transition-fast: 200ms ease;
       --transition-base: 300ms ease;
       --safe-area-inset-top: env(safe-area-inset-top);
       --safe-area-inset-bottom: env(safe-area-inset-bottom);
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       -webkit-text-size-adjust: 100%;
       -webkit-tap-highlight-color: transparent;
       scroll-behavior: smooth;
   }
   
   body {
       display: flex;
       flex-direction: column;
       min-height: 100vh;
       font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
       min-height: 100vh;
       min-height: 100dvh;
       overflow-x: hidden;
       background: 
           linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 0, 0, 0.9) 100%),
           url('assets/fundo.png') center/cover no-repeat scroll;
       color: var(--white);
       line-height: 1.5;
       position: relative;
       padding-top: var(--safe-area-inset-top);
       padding-bottom: 0;
   }
   
   body::before {
       content: '';
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: repeating-linear-gradient(
           0deg,
           transparent,
           transparent 2px,
           rgba(229, 9, 20, 0.03) 2px,
           rgba(229, 9, 20, 0.03) 4px
       );
       pointer-events: none;
       z-index: 1;
   }
   
   /* ==========================================================================
      HEADER
      ========================================================================== */
   
   .site-header {
       width: 100%;
       padding: 1rem 1rem 0.5rem;
       position: relative;
       z-index: 20;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   .logo {
       width: min(280px, 70vw);
       height: auto;
       max-height: 80px;
       object-fit: contain;
       /* filter: invert(12%) sepia(92%) saturate(6500%) hue-rotate(350deg) brightness(95%) contrast(90%); */
       filter: brightness(0) invert(1) contrast(1.2);
   }
   
   /* ==========================================================================
      MAIN CONTAINER
      ========================================================================== */
   
   .container {
       display: flex;
       flex-direction: column;
       min-height: calc(100vh - 100px);
       padding: 0rem;
       position: relative;
       z-index: 2;
       flex: 1;
   }
   
   /* ==========================================================================
      LEFT SECTION
      ========================================================================== */
   
   .left-section {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1rem 1rem;
       min-width: 0;
   }

   .content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 700px;
        width: 100%;
        position: relative;
        z-index: 2;
        align-self: center;
    }
   
   .message {
       color: var(--white);
       font-size: clamp(1.25rem, 4vw, 1.75rem);
       font-weight: 700;
       line-height: 1.2;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
   
   .highlight {
       color: var(--accent-red);
       font-size: clamp(1.35rem, 4.5vw, 1.9rem);
       font-weight: 800;
       display: inline-block;
       /* animation: pulse-glow 3s ease-in-out infinite; */
       text-shadow: 0 0 10px rgba(255, 31, 31, 0.3), 0 0 20px rgba(255, 31, 31, 0.2);
   }
   
   @keyframes pulse-glow {
       0%, 100% { 
           text-shadow: 0 0 10px rgba(255, 31, 31, 0.3), 0 0 20px rgba(255, 31, 31, 0.2);
       }
       50% { 
           text-shadow: 0 0 20px rgba(255, 31, 31, 0.6), 0 0 30px rgba(255, 31, 31, 0.4);
       }
   }
   
   /* ==========================================================================
      BUTTONS
      ========================================================================== */
   
   .buttons {
       display: flex;
       flex-direction: column;
       gap: 0.8rem;
       width: 100%;
   }
   
   .btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1rem;
       padding: 1.25rem 1.5rem;
       border: none;
       border-radius: var(--border-radius-lg);
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
       font-size: clamp(1rem, 3.5vw, 1.125rem);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       cursor: pointer;
       transition: all var(--transition-base);
       position: relative;
       overflow: hidden;
       width: 100%;
       min-height: 60px;
       box-shadow: var(--shadow-lg);
   }
   
   .btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.6s ease;
   }
   
   .btn:hover::before,
   .btn:focus-visible::before {
       left: 100%;
   }
   
   .btn:active {
       transform: scale(0.98);
   }
   
   .btn-green {
       background: linear-gradient(135deg, var(--green-test) 0%, var(--dark-green) 100%);
       color: var(--white);
       border: 2px solid rgba(255, 255, 255, 0.2);
   }
   
   .btn-green:hover,
   .btn-green:focus-visible {
       background: linear-gradient(135deg, #22d15f 0%, var(--green-test) 100%);
       transform: translateY(-3px);
   }
   
   .btn-client {
       background: linear-gradient(135deg, var(--primary-red) 0%, var(--dark-red) 100%);
       color: var(--white);
       border: 2px solid rgba(255, 255, 255, 0.2);
   }
   
   .btn-client:hover,
   .btn-client:focus-visible {
       background: linear-gradient(135deg, var(--accent-red) 0%, var(--primary-red) 100%);
       transform: translateY(-3px);
   }
   
   .btn-icon {
       width: 28px;
       height: 28px;
       flex-shrink: 0;
   }
   
   .btn-text {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
   }
   
   .btn-line1 {
       font-size: clamp(0.875rem, 3vw, 1rem);
       font-weight: 700;
       line-height: 1.2;
   }
   
   .btn-line2 {
       font-size: clamp(0.75rem, 2.5vw, 0.875rem);
       font-weight: 600;
       opacity: 0.95;
       line-height: 1.2;
   }
   
   /* ==========================================================================
      FEATURES BULLETS
      ========================================================================== */
   
   .features {
       display: flex;
       flex-wrap: wrap;
       gap: 0.75rem;
       justify-content: center;
   }
   
   .bullet {
       user-select: none;
       -webkit-user-select: none; /* Safari */
       -ms-user-select: none;     /* IE/Edge antigo */
       background: rgba(42, 42, 42, 0.8);
       padding: 0.45rem 1rem;
       border-radius: var(--border-radius-sm);
       font-size: clamp(0.75rem, 3vw, 0.875rem);
       font-weight: 600;
       color: var(--white);
       border-left: 3px solid var(--primary-red);
       transition: all var(--transition-fast);
       white-space: nowrap;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
   }
   
   .bullet:hover {
       background: var(--primary-red);
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
   }
   
   /* ==========================================================================
      RIGHT SECTION
      ========================================================================== */
   
    .right-section {
        flex: 0 0 auto;
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        overflow: visible;
        align-items: center;
        min-height: auto;
    }

    .tv-container {
        position: relative;
        width: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
    }

    .tv-image {
        width: 70vw;
        object-fit: contain;
        filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6)) brightness(0.9);
        position: relative;
        transform: translateY(-15%);
    }
   
    .deadpool {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(270px, 40vw, 300px);
        height: auto;
        z-index: 100;
        object-fit: contain;
        object-position: bottom right;
        transform-origin: bottom right;
        pointer-events: none;
    }
   
   /* ==========================================================================
      MODAL STYLES (MANTIDO IGUAL)
      ========================================================================== */
   
   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.9);
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 1000;
       padding: 1rem;
       opacity: 0;
       transition: opacity var(--transition-base);
   }
   
   .modal-overlay.active {
       display: flex;
       opacity: 1;
       animation: fadeIn 0.3s ease;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   .modal-container {
       background: linear-gradient(135deg, var(--dark-gray) 0%, var(--black) 100%);
       border: 2px solid var(--primary-red);
       border-radius: var(--border-radius-lg);
       padding: clamp(1.5rem, 4vw, 2rem);
       width: 100%;
       max-width: 450px;
       max-height: 90vh;
       overflow-y: auto;
       position: relative;
       box-shadow: 
           0 20px 50px rgba(229, 9, 20, 0.25),
           0 10px 30px rgba(0, 0, 0, 0.7);
       animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   
   @keyframes slideUp {
       from {
           transform: translateY(30px) scale(0.98);
           opacity: 0;
       }
       to {
           transform: translateY(0) scale(1);
           opacity: 1;
       }
   }
   
   .close-modal {
       position: absolute;
       top: 1rem;
       right: 1rem;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: var(--primary-red);
       border: 2px solid var(--white);
       color: var(--white);
       font-size: 1.5rem;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all var(--transition-base);
       z-index: 10;
       padding: 0;
   }
   
   .close-modal:hover,
   .close-modal:focus-visible {
       background: var(--accent-red);
       transform: scale(1.1) rotate(90deg);
       box-shadow: 0 0 20px rgba(229, 9, 20, 0.4);
   }
   
   .modal-header {
       text-align: center;
       margin-bottom: 2rem;
   }
   
   .modal-title {
       color: var(--accent-red);
       font-size: clamp(1.75rem, 5vw, 2.2rem);
       margin-bottom: 0.5rem;
       font-weight: 900;
       text-transform: uppercase;
       letter-spacing: 1px;
       text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }
   
   .modal-subtitle {
       color: rgba(255, 255, 255, 0.9);
       font-size: clamp(1.2rem, 3vw, 1.2rem);
       line-height: 1.4;
       font-weight: 800;
   }

    .modal-container::-webkit-scrollbar {
        width: 10px;
    }

    .modal-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    .modal-container::-webkit-scrollbar-thumb {
        background: rgba(229, 9, 20, 0.6);
        border-radius: 10px;
        border: 2px solid rgba(0, 0, 0, 0.2);
    }

    .modal-container::-webkit-scrollbar-thumb:hover {
        background: rgba(229, 9, 20, 0.8);
    }
   
   /* ==========================================================================
      FORM STYLES
      ========================================================================== */
   
   .trial-form {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .form-group {
       display: flex;
       flex-direction: column;
       gap: 0.4rem;
   }
   
   .form-group label {
       font-weight: 700;
       color: var(--white);
       font-size: clamp(0.875rem, 3vw, 0.95rem);
       letter-spacing: 0.5px;
   }
   
   .form-group input,
   .form-group select {
       padding: 0.875rem;
       border: 2px solid var(--light-gray);
       background: var(--dark-gray);
       color: var(--white);
       border-radius: var(--border-radius-md);
       font-size: 1rem;
       font-family: 'Rajdhani', sans-serif;
       transition: all var(--transition-fast);
       width: 100%;
       -webkit-appearance: none;
       appearance: none;
   }
   
   .form-group input:focus,
   .form-group select:focus {
       outline: none;
       border-color: var(--primary-red);
       box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
   }
   
   .form-group input::placeholder {
       color: rgba(255, 255, 255, 0.5);
   }
   
   .form-group select {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 1rem center;
       background-size: 16px;
       padding-right: 2.5rem;
   }
   
   .form-buttons {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       margin-top: 0.5rem;
   }
   
   .form-btn {
       padding: 0.875rem 1.25rem;
       border: none;
       border-radius: var(--border-radius-md);
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
       font-size: clamp(0.9rem, 3vw, 1rem);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       cursor: pointer;
       transition: all var(--transition-base);
       width: 100%;
   }
   
   .btn-submit {
       background: linear-gradient(135deg, var(--primary-red) 0%, var(--dark-red) 100%);
       color: var(--white);
       border: 2px solid rgba(255, 255, 255, 0.3);
       box-shadow: var(--shadow-md);
   }
   
   .btn-submit:hover,
   .btn-submit:focus-visible {
       background: linear-gradient(135deg, var(--accent-red) 0%, var(--primary-red) 100%);
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg);
   }
   
   .btn-cancel {
       background: var(--light-gray);
       color: var(--white);
       border: 2px solid rgba(255, 255, 255, 0.2);
   }
   
   .btn-cancel:hover,
   .btn-cancel:focus-visible {
       background: var(--dark-gray);
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
   }
   
   .form-message {
       text-align: center;
       padding: 1rem;
       border-radius: var(--border-radius-md);
       font-weight: 800;
       display: none;
       animation: fadeIn var(--transition-base);
   }
   
   .form-message.success {
       display: block;
       background: linear-gradient(135deg, var(--green-test) 0%, var(--dark-green) 100%);
       color: var(--white);
   }
   
   .form-message.error {
       display: block;
       background: linear-gradient(135deg, var(--primary-red) 0%, var(--dark-red) 100%);
       color: var(--white);
   }
   
   /* ==========================================================================
      LOADING OVERLAY
      ========================================================================== */
    .loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 9000;
        justify-content: center;
        align-items: center;
    }
    
    .spinner {
        width: 60px;
        height: 60px;
        border: 6px solid rgba(255, 255, 255, 0.2);
        border-top-color: var(--primary-red);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        to { 
            transform: rotate(360deg); 
        }
    }

    /* Tablet / Desktop (1000px+) */
    @media screen and (min-width: 1000px) {
        body {
            background-attachment: fixed;
        }
        .site-header { padding: 1.5rem 1.5rem 1rem; }
        .logo { width: min(350px, 60vw); max-height: 100px; }

        .container {
            flex-direction: row;
            align-items: stretch;
            gap: 1rem;
            min-height: calc(100vh - 150px);
        }

        .left-section {
            flex: 1;
            text-align: left;
            align-items: flex-start;
            padding-left: 2rem;
            justify-content: center;
        }

        .content { text-align: left; margin: 0; }

        .message { text-align: left; font-size: 1.8rem; }
        .highlight { font-size: 1.9rem; }

        .buttons { flex-direction: row; gap: 1.5rem; }
        .btn { min-height: 70px; padding: 1.5rem; }
        .btn-icon { width: 32px; height: 32px; }

        .features { justify-content: flex-start; gap: 1rem; }
        .bullet { font-size: 0.75rem; padding: 0.5rem 1.25rem; }

        .right-section { 
            flex: 0 0 45%; 
            padding: 0; 
            min-height: 0;
            align-items: center;
        }
        .tv-container { 
            width: auto;
            display: inline-flex;
        }
        .tv-image {
            width: 35vw;
            max-width: 500px;
        }
        .deadpool { width: clamp(250px, 25vw, 450px); }
        .modal-container {
            max-width: 500px;
        }
        .form-buttons {
            flex-direction: row;
            gap: 1rem;
        }
        
        .form-btn {
            flex: 1;
        }
    }

    /* Large Desktop (1200px+) */
    @media screen and (min-width: 1200px) {
        .site-header { padding: 2rem 3rem 1rem; }
        .container { gap: 2rem; }
        .left-section { padding-right: 1.5rem; }
        .message { font-size: 2rem; }
        .highlight { font-size: 2.1rem; }
        .btn { font-size: 1.125rem; padding: 1.75rem 2rem; }
        .btn-icon { width: 36px; height: 36px; }
        .features { gap: 1.2rem; }
        .bullet { font-size: 0.9rem; padding: 0.5rem 0.9rem; }

        .right-section { flex: 0 0 45%; }
        .tv-image {
            width: 35vw;
            max-width: 550px;
        }
        .tv-container { max-width: none; }
        .deadpool { width: clamp(300px, 30vw, 550px); }
    }

    /* Large Desktop XL (1440px+) */
    @media screen and (min-width: 1440px) {
        .container { max-width: 100%; margin: 0; gap: 3rem; }
        .message { font-size: 2.0rem; }
        .highlight { font-size: 2.1rem; }
        .left-section { padding-left: 8rem; }
        .bullet { font-size: 1rem; padding: 0.6rem 0.9rem; }
        .right-section { flex: 1; }
        .tv-image {
            width: 40vw;
            max-width: 600px;
            transform: translateY(-15%) translateX(-15%);
        }
        .tv-container { max-width: none; }
        .deadpool { width: clamp(350px, 45vw, 500px); }
    }











/* STATUS MESSAGE (por cima do loading) */
.status-message {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 14px 20px;
    border-radius: 10px;

    font-size: 1rem;
    font-weight: 600;              
    letter-spacing: 0.2px;        

    color: #fff;
    display: none;
    z-index: 10000;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 

    animation: slideIn 0.25s ease-out;
}

/* VARIAÇÕES */
.status-message.success {
    background: #199b47;
}

.status-message.error {
    background: #b70912;
}

.status-message.warning {
    background: #f0b429;           
    color: #1f1f1f;
}


/* ANIMAÇÃO */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}