/*
** HOME PAGE
**
** Styles in this file are loaded only by Source/pt-br/index.html.
** Shared tokens, layout primitives, and reusable components live in base.css.
*/

.HomeContent {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

.PageSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
** HERO
*/

.HeroSection {
    position: relative;
    width: 100cqw;
    margin-inline: calc(50% - 50cqw);
    isolation: isolate;
    overflow: clip;
}

.HeroInner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--page-padding);
    height: 34.5rem
}

.HeroText {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: relative;
    z-index: 2;
    gap: 2rem;
}

.HeroText h1 {
    margin: 0;
    text-wrap: balance;
}

.HeroText p {
    margin: 0;
    font-size: var(--font-size-lead);
    line-height: 1.45;
    color: var(--color-text-secondary);
    max-width: 35ch;
}

/*
** PLANET
*/

.HeroPlanetSlot {
    position: relative;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.PlanetRenderer {
    position: relative;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

.PlanetRenderer canvas {
    overflow: visible;
}

.PlanetFallbackImage {
    display: none;
    position: absolute;
    left: calc(var(--planet-canvas-left, 0px) + var(--planet-canvas-width, 70vw) / 2);
    top: calc(var(--planet-canvas-top, 0px) + var(--planet-canvas-height, 32rem) / 2);
    z-index: 1;
    width: min(var(--planet-canvas-width, 70vw), 32rem);
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.65;
}

.PlanetFallbackMessage {
    position: absolute;
    left: calc(var(--planet-canvas-left, 0px) + var(--planet-canvas-width, 70vw) / 2);
    top: calc(var(--planet-canvas-top, 0px) + var(--planet-canvas-height, 32rem) * 0.75);
    z-index: 2;
    padding: 0.65em 1rem;
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    letter-spacing: 0.04rem;
    text-align: center;
    background: var(--color-overlay-dark);
}

.PlanetRenderer[data-render-state="ready"] .PlanetFallbackImage,
.PlanetRenderer[data-render-state="ready"] .PlanetFallbackMessage {
    display: none;
}

.PlanetRenderer[data-render-state="error"] .PlanetFallbackImage {
    display: block;
}

.PlanetRenderer[data-render-state="error"] .PlanetFallbackMessage::before {
    content: "3D preview unavailable. ";
}

/*
** SERVICES
*/

.CardsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    justify-items: center;
}

.CardsGrid>.Card {
    min-height: var(--card-height);
    height: auto;
}

/*
** AMAZING COW
*/

.AmazingCowMain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
    width: 100%;
}

.AmazingCowVisuals {
    display: flex;
    align-items: start;
    justify-content: center;
    min-height: 460px;
    width: 100%;
}

.AmazingCowVisuals>img {
    display: block;
    width: min(100%, 34rem);
    max-width: 400px;
    position: absolute;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    object-position: center;
    background-image:
        radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--color-bg-spot-green) var(--bg-spot-alpha-1), transparent), transparent var(--bg-spot-size-1));
}

.AmazingCowContent {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2rem;
}

.AmazingCowTitle {
    text-align: start;
}

/*
** TEAM
*/

.Members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em 1.5rem;
    max-width: 80%;
}

.TheTeam {
    margin-bottom: 0;
}

.Members>* {
    flex: 0 0 calc(33.333% - 1.25em);
}

.Member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.Member h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
}

.MemberRole {
    margin-top: 0.25rem;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-body);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.MemberPhoto {
    width: 8rem;
    height: 8rem;
    margin-bottom: 0.9rem;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-circle);
}

.MemberPhoto:hover {
    box-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.8);
}

.MemberPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
** CONTACT
*/

.ContactIntro {
    text-align: center;
    padding-bottom: 0;
}

.ContactIntro h1 {
    white-space: normal;
}

.ContactIntro p {
    max-width: 46ch;
    margin-inline: auto;
}

.ContactIntro a {
    color: var(--color-brand-yellow);
    text-decoration: none;
}

.ContactSection {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
}

.ContactPanel {
    width: min(100%, 50rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-inline: auto;
}

.ContactForm {
    color: var(--color-brand-yellow);
}

.ContactFieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    border: 0;
}

.ContactFieldset legend {
    grid-column: 1 / -1;
    margin-bottom: 0.75rem;
    text-align: center;
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-yellow);
}

.ContactFormSection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--color-text-primary);
}

.ContactFormSection--full {
    grid-column: 1 / -1;
}

.ContactFormAction {
    align-items: center;
    margin-top: 0.5rem;
}

.ContactFormAction .Button {
    min-width: 14rem;
}

.ContactForm label {
    color: var(--color-brand-yellow);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}

.ContactForm input,
.ContactForm textarea {
    width: 100%;
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-md);
    background: var(--color-field-bg);
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
}

.ContactForm input::placeholder,
.ContactForm textarea::placeholder {
    color: var(--color-field-placeholder);
}

.ContactForm textarea {
    min-height: 11rem;
    resize: vertical;
}

.ContactFieldset .FormField:nth-child(5),
.ContactFieldset .FormField:nth-child(6) {
    grid-column: 1 / -1;
}

.ContactFieldset .FormField:nth-child(6) {
    margin-top: 0.5rem;
}

.ContactFieldset .FormField:nth-child(6) .Button {
    width: 100%;
}

.ContactFormStatus {
    grid-column: 1 / -1;
    min-height: 1.5rem;
    margin: 0;
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.ContactFormStatus[data-state="success"] {
    color: var(--color-brand-yellow);
}

.ContactFormStatus[data-state="error"] {
    color: var(--color-danger);
}

.Asterisk {
    color: var(--color-danger);
}

@media (max-width: 900px) {
    .HomeContent {
        gap: 5rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .ContactFieldset {
        grid-template-columns: minmax(0, 1fr);
    }

    .Card {
        text-align: center;
    }

    .Card h3 {
        text-align: center;
    }

    .CardsGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .HeroInner {
        display: flex;
        flex-direction: column-reverse;
        justify-items: center;
    }

    .HeroText {
        text-align: center;
    }

    .HeroText p {
        width: 100%;
        max-width: 100%;
    }

    .AmazingCowMain {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .AmazingCowVisuals {
        order: -1;
    }

    .AmazingCowVisuals img {
        max-height: 600px;
        width: min(100%, 26rem);
    }

    .AmazingCowDetails {
        text-align: center;
    }

    .AmazingCowContent {
        align-items: center;
    }

    .AmazingCowTitle {
        text-align: center;
    }

    .TheTeam {
        margin-top: 0;
    }
}

@media (max-width: 650px){
    
    .HeroInner{
        height: 30rem;
    }

}