/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #027373;
    /* Teal */
    --accent-color: #F88E2A;
    /* Laranja Vibrante */
    --text-color: #ffffff;
    --font-heading: 'Mitr', sans-serif;
    --font-body: 'Nunito', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Background & Overlay */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 115, 115, 0.85);
    /* Teal overlay with high opacity */
    z-index: -1;
}

/* Container & Layout */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 100vh;
    /* Ensure single fold on desktop */
}

/* Typography */
h1 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subheadline {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 1.5rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* Bullet Points */
.benefits {
    list-style: none;
    margin-bottom: 3rem;
}

.benefits li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.benefits .icon {
    color: var(--accent-color);
    font-weight: bold;
    margin-right: 12px;
    font-size: 1.25rem;
}

/* Footer (Left Column) */
footer {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: auto;
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* Ebook Image */
.ebook-preview {
    margin-bottom: 2rem;
    perspective: 1000px;
}

.ebook-img {
    max-width: 280px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    transform: rotateY(-5deg);
    /* Slight 3D effect */
    transition: transform 0.3s ease;
}

.ebook-img:hover {
    transform: rotateY(0deg) scale(1.05);
}

/* Form Styles */
.capture-form h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.form-group {
    margin-bottom: 1rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(248, 142, 42, 0.2);
}

/* CTA Button */
.cta-button {
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--accent-color);
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-button:hover {
    transform: scale(1.03);
    background-color: #e57d1b;
    /* Slightly darker orange */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cta-button:active {
    transform: scale(0.98);
}

.privacy-note {
    margin-top: 1rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Mobile Responsive */
@media (max-width: 960px) {
    .container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 4rem 1.5rem;
        /* More padding top/bottom */
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        /* Form on top roughly? No, requested: Image -> Headline -> Form is weird. Request: Stacked (Image e-book -> Headline -> Form) - wait. 
        Request: "Estrutura Mobile: Empilhado (Imagem do e-book -> Headline -> Formulário)."
        
        Current HTML structure: Left Col (Headline) -> Right Col (Card w/ Image + Form).
        If just stacking, it would be Headline -> Image+Form.
        To achieve Image -> Headline -> Form, I might need to restructure HTML or use Flex order.
        Let's use Flex order.
        */
        display: flex;
        flex-direction: column;
    }

    /* We need to break the card components apart visually if we want Image -> Headline -> Form. 
       HTML has Image and Form inside .glass-card. Headline is in .content.
       
       If I want strictly: Ebook Image -> Headline -> Form. 
       I would need the Ebook Image to be separate or use display contents?
       
       Let's try to keep it simple first. The user said "Imagem do e-book -> Headline -> Formulário".
       This suggests the visual hierarchy. 
       
       Option A: Move Ebook Image out of the card in HTML? But on Desktop it's in the card.
       Option B: Use JS to move it? No.
       Option C: Duplicate image? No.
       
       Let's stick to a logical mobile flow which is usually Headline -> Content -> Form.
       However, the user asked specifically.
       
       "Estrutura Mobile: Empilhado (Imagem do e-book -> Headline -> Formulário)."
       
       This is a bit customized. 
       I can hide the image in the card on mobile, and show another one at the top?
       OR I can restructure HTML to have:
       Container is Flex Column.
       Item 1: Ebook Preview (Mobile only?)
       Item 2: Headlines
       Item 3: Form
       
       But desktop is 2 cols.
       
       Let's try this:
       HTML:
       <main class="container">
           <div class="mobile-ebook-container"> ... image ... </div> (Visible only mobile)
           <div class="content"> ... Headlines ... </div>
           <div class="card-container">
               <div class="glass-card">
                    <div class="desktop-ebook-container"> ... image ... </div> (Visible only desktop)
                    <form ...>
               </div>
           </div>
       </main>
       
       This might be the cleanest CSS way without complex Grid manipulation.
    */

    .container {
        padding-top: 2rem;
    }

    /* Re-ordering for mobile if I stick to the current HTML structure which is cleaner:
       .content (Headlines) 
       .card-container (Image + Form)
       
       Default Stack: Headlines -> Image -> Form.
       User wants: Image -> Headline -> Form.
       
       I can make .container flex-direction: column.
       But Image is inside .card-container.
       
       I will modify HTML to adapt to this specific request in the next turn if needed, 
       but for now, standard stacking (Headline -> Form) acts better for SEO and reading flow usually. 
       But "Imagem do e-book -> Headline -> Formulário" is the request.
       
       Let's modify the HTML slightly in the `write_to_file` call above? No, I already queued it.
       I can use `display: contents` on parents maybe?
       
       Let's try to make the `.glass-card` flex?
       
       Actually, standard simple Squeeze page on mobile often puts the "Prize" (Image) first to show what you get.
       
       I will execute the write_to_file as is (standard structure) then I will see if I can tweak it with CSS Grid areas or if I need to edit HTML.
       
       Actually, `write_to_file` has not run yet. I can edit the content in my `write_to_file` call directly!
       
       I will edit the HTML content in my `write_to_file` call to include a mobile-only image or structure it better.
       
       Actually, I can use Grid Areas.
       .container { display: grid; grid-template-areas: "content card"; }
       .glass-card { display: flex; flex-direction: column; }
       
       Mobile:
       .container { grid-template-areas: "ebook" "content" "form"; }
       
       But ebook and form are in the same div.
       
       If I pull the ebook image OUT of the form card in logic...
       
       Let's change HTML to:
       Right Column: 
          Ebook Image (outside card? or inside?)
          Card (Form)
       
       If I put Ebook Image outside the form card, but inside the Right Column wrapper.
       
       <div class="right-col">
           <img class="ebook-img">
           <div class="glass-form-card">...form...</div>
       </div>
       
       Desktop: Right Col has Image and Form. I can style them to look like one card (put background on `right-col`? or just stack them).
       
       The user said: "Um Card (Glassmorphism) contendo a imagem da capa do E-book (Mockup 3D) e o Formulário".
       So they are visually in one box on Desktop.
       
       On mobile: Image -> Headline -> Form. 
       This splits the card.
       
       I will implement a mobile-specific image at the top of the body or main, and hide the desktop one on mobile. It's the easiest/most robust way.
       
       I will update the HTML string in the tool call below.
    */
}

@media (max-width: 960px) {
    /* Adjusting for mobile specific request: Image -> Headline -> Form */

    .container {
        display: flex;
        flex-direction: column;
        padding-top: 1rem;
    }

    h1 {
        font-size: 2rem;
        margin-top: 0;
    }

    .logo {
        margin-bottom: 2rem;
        text-align: center;
    }

    .content {
        order: 2;
        /* Headline second */
        text-align: center;
    }

    .benefits li {
        justify-content: center;
        text-align: left;
    }

    .card-container {
        order: 1;
        /* Image first? But form is also here */
        /* We need to separate them visually maybe? */
    }

    /* 
    The easiest way to satisfy "Image -> Headline -> Form" 
    with the current HTML "Headline | [Image+Form]" 
    is to move the Image to the top of the Container in the HTML and hide/show.
    */

    .desktop-only {
        display: none;
    }

    .mobile-only-img {
        display: block;
        margin: 0 auto 2rem auto;
        max-width: 200px;
        order: 1;
    }

    .content {
        order: 2;
    }

    .card-container {
        order: 3;
    }
}

/* Thank You Page Specifics */
.centered-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-template-columns: 1fr;
    /* Override grid */
    padding-top: 2rem;
}

.full-width-card {
    width: 100%;
    max-width: 600px;
}

.alert-box {
    background-color: rgba(255, 235, 59, 0.15);
    /* Yellow tint transparent */
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
}

/* Video Container (16:9 Aspect Ratio) */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: #000;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WhatsApp Button */
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    /* Pill shape */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    margin-bottom: 2rem;
}

.whatsapp-button:hover {
    background-color: #1fad53;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-button svg {
    width: 24px;
    height: 24px;
}