/**
 * Hero Section Styles
 */


section.hero {
    height: 100dvh;
    background-color: var(--color-lilac);
    aspect-ratio: 16/5;
    overflow: hidden;
    display: flex;
    flex-direction: column;

}

/* ==========================================================================
   UPPER CONTENT - Área para textos com padding de 1 célula
   ========================================================================== */

/* Os textos e elementos decorativos vão dentro de .upper-content */

section.hero .upper-dogo {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    position: relative;
}

section.hero .dogo {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100dvh;
    object-fit: cover;
    object-position: top right;
}
section.hero .dogo-container {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    pointer-events: none;
    z-index: 2;
}


section.hero .young-type {
    background-color: var(--color-green);
    height: 40%;
    z-index: 5;
    position: relative;
}

section.hero .type-space {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

section.hero .type-space .type-space-text {
    flex: 1;
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

section.hero .type-space .type-space-text:first-child { justify-content: flex-start; }
section.hero .type-space .type-space-text:last-child { justify-content: flex-end; }


section.hero .type-space .type-space-text img {
    width: auto;
    height: auto;
    min-height: 100%;
}

/* Type Space - Efeito Pixelado com Máscara Circular */
section.hero .type-space-text {
    display: inline-block;
    position: relative;
    --mx: 50%;
    --my: 50%;
    --reveal-radius: 0px;
}

/* Imagem original - sempre visível, sem filtro */
section.hero .type-space-text img {
    /* Sem transições, sem filtros */
}

/* Camada pixelada via pseudo-elemento */
section.hero .type-space-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--img-src);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: url(#pixelate);
    clip-path: circle(var(--reveal-radius) at var(--mx) var(--my));
    pointer-events: none;
    z-index: 1;
}

/* Ajuste para primeira e última letra (alinhamento diferente) */
section.hero .type-space-text:first-child::before {
    background-position: left center;
}

section.hero .type-space-text:last-child::before {
    background-position: right center;
}


section.hero .about-intro {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0 var(--cell-width);
    z-index:2;
    position: relative;
    pointer-events: none;
}

section.hero .about-intro .about-intro-text {
    width: 29.6296vw; /* 8 colunas */
    background-color: var(--color-yellow);
    padding: var(--padding-sm);
    pointer-events: auto;
    container-type: inline-size;
}

section.hero .about-intro h1 { 
    text-align: justify;
    display: flex;
    /* font-size: var(--font-size-5xl);
	line-height: var(--line-height-xs); */
    font-size: 12.5cqw;
    line-height: 9cqw;
    gap: 1.6cqh;
    align-items: center;
    font-weight: 300;
    justify-content: space-between;
    flex-wrap: wrap;
    width:100%;
}
section.hero .about-intro h1 div { }

section.hero .about-intro h1 .arrow-container { dispaly:inline-flex; line-height:0; }

section.hero .about-intro h1 img { height:9cqw; width:auto;}

/* Content area - flex 1 para ocupar o espaço restante */
section.hero .upper-content {
    width: 100%;
    flex: 1;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}

section.hero .upper-content .top-text {
    width: calc(var(--cell-width) * 6); 
    padding-top: var(--cell-size);
    margin-left: calc(var(--cell-width) * 3);
    display: flex;
    gap: var(--cell-width);
    justify-content: space-between;
    align-items: flex-start;
}

section.hero .arrow {
    width: 1.5vw;
    min-width: 22px;
}

section.hero .arrow svg {
    width: 100%;
    height: auto;
    transform: rotate(180deg);
}

section.hero .arrow svg path {
    fill: var(--color-white);
}

section.hero .upper-content .top-text .text {
    text-align:right;
}
section.hero .upper-content .bottom-text {
    width: 14.8148vw; /* 4 colunas */
    padding-bottom: var(--cell-size);
    margin-left: auto;
    margin-right: var(--cell-width);
    text-align: right;
    display: flex;
    flex-direction:column;
    align-items: flex-end;
    gap: var(--cell-height);
}

section.hero .upper-content .bottom-text .arrow svg {
    width: 100%;
    height: auto;
    max-height: 28px;
    transform: rotate(90deg);
}