/* ==========================================================================
   HERO: CONFIGURACIÓN DE INTERFAZ (UI VARIABLES)
   ========================================================================== */

/* --- 1. Tema y Fondos (Theme & Backgrounds) --- */
$heroBgColor: $white;
$background-img: '/assets/hero.webp';
$background-img-mobile: $background-img;
$background-position: center;
$overlayBg: rgba(black, 0.2); // OVERLAY

/* --- 2. Color y Texto General (General Color & Text) --- */
$textColor: $white;

/* --- 3. Tipografía: Título Principal (Typography: Header) --- */
$headerSize: 56px;
$headerSizeMobile: 40px;
$headerWeight: 600;
$headerColor: $textColor;
$headerInsideColor: $mainColor; // Color de textos resaltados (span) dentro del h1

/* --- 4. Tipografía: Párrafo (Typography: Paragraph) --- */
$paragraphSize: 24px;
$paragraphSizeMobile: 16px;
$paragraphColor: #CBD5E1;

/* --- 5. Dimensiones y Contenedores (Layout & Sizing) --- */
$contentMaxWidth: 900px;

/* --- 6. Espaciados Internos (Paddings) --- */
$heroGeneralPadding: 80px;
$heroGeneralPaddingMobile: 60px;

// Paddings Calculados (Normal)
$heroPaddingTop: calc($navbarOffset + $heroGeneralPadding);
$heroPadding: $heroGeneralPadding;
$heroPaddingTopMobile: calc($navbarOffsetMobile + $heroGeneralPaddingMobile);
$heroPaddingMobile: $heroGeneralPaddingMobile;

/* --- 7. Espaciados: Página de Agradecimiento (Thank You Page Paddings) --- */
$heroGeneralPaddingThankYou: 300px;
$heroGeneralPaddingMobileThankYou: 60px;

// Paddings Calculados (Thank You Page)
$heroPaddingTopThankYou: calc($navbarOffset + $heroGeneralPaddingThankYou);
$heroPaddingThankYou: $heroGeneralPaddingThankYou;
$heroPaddingTopMobileThankYou: calc($navbarOffsetMobile + $heroGeneralPaddingMobileThankYou);
$heroPaddingMobileThankYou: $heroGeneralPaddingMobileThankYou;


.hero {
    padding: $heroPadding 0;
    padding-top: $heroPaddingTop;
    background-image: url($background-img);
    background-size: cover;
    background-position: $background-position;
    position: relative;
    background-color: $heroBgColor;

    &:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;

        position: absolute;
        top: 0;
        left: 0;
        background-color: $overlayBg;
    }

    @media #{$ipad} {
        padding: $heroPaddingMobile 0;
        padding-top: $heroPaddingTopMobile;
        background-image: url($background-img-mobile);
        background-position: top right;
    }

    &.typ {
        padding: $heroPaddingThankYou 0;
        padding-top: $heroPaddingTopThankYou;

        @media #{$ipad} {
            padding: $heroPaddingMobileThankYou 0;
            padding-top: $heroPaddingTopMobileThankYou;
        }
    }

    .main-container {
        position: relative;

        .hero-content {
            max-width: $contentMaxWidth;

            h1 {
                color: $headerColor;
                font-size: $headerSize;
                font-weight: $headerWeight;

                span {
                    color: $headerInsideColor;
                }

                @media #{$ipad} {
                    font-size: $headerSizeMobile;
                }
            }

            p.description-hero {
                font-size: $paragraphSize;
                color: $paragraphColor;
                line-height: 1.6;

                @media #{$ipad} {
                    font-size: $paragraphSizeMobile;
                }
            }

            h1,
            p {
                @media #{$ipad} {
                    text-align: center;
                }
            }

            .main-button {
                @media #{$ipad} {
                    margin: 0 auto;
                }
            }

            &.center {
                text-align: center;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
    }
}