/* ================================
   ABOUT — REDESIGN EDITORIAL
   Sem container, sem caixa, sem borda.
   Layout assimétrico sobre o vídeo.
   ================================ */

   .about-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
    z-index: 10;
    padding: 10vh 8% 10vh 8%;
    margin-top: 6vh;  
}

/* ── Grid assimétrico: título grande | linha | texto ── */
.about-container {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 72px;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* ── Coluna esquerda: título ── */
.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
}

.about-subtitle {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.5rem);
    color: var(--accent-gold);
    text-align: center;
    line-height: 1.05;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.5px;
}

/* Linha vertical separadora (coluna do meio do grid) */
.about-divider {
    width: 1px;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(197, 147, 76, 0.5) 20%,
        rgba(197, 147, 76, 0.5) 80%,
        transparent 100%
    );
    justify-self: center;
}

/* ── Coluna direita: texto ── */
.about-text {
    max-width: 100%;
}

.about-text p {
    font-family: var(--font-sans);
    color: rgba(245, 240, 232, 0.82);
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.03em;
    margin: 0;
}

/* Destaque do Método IMEO */
.about-text p span[style] {
    color: var(--accent-gold) !important;
    font-weight: 400;
}


/* ================================
   PORTRAIT — tablet grande  ≤ 1440px
   ================================ */
@media only screen and (max-width: 1440px) and (orientation: portrait) {
    .about-section {
        padding: 8vh 6% 8vh 6%;
        min-height: auto;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 40px 0;
    }

    .about-divider { display: none; }

    .about-content { align-items: center; }

    .about-subtitle {
        text-align: center;
        font-size: clamp(2.8rem, 8vw, 5rem);
    }

    .about-text { text-align: center; }

    .about-text p {
        font-size: 1.8rem; /* services: acc-text p @ 1024px */
        line-height: 1.7;
    }
}

/* ================================
   PORTRAIT — tablet/celular  ≤ 950px
   ================================ */
@media (max-width: 950px) and (orientation: portrait) {
    .about-section {
        padding: 8vh 7% 8vh 7%;
    }

    .about-subtitle {
        font-size: clamp(2.4rem, 9vw, 3.8rem);
    }

    .about-text p {
        font-size: 1.6rem; /* services: acc-text p @ 768px */
        line-height: 1.7;
    }
}

/* ================================
   PORTRAIT — iPad médio  451px – 950px
   ================================ */
@media (min-width: 451px) and (max-width: 950px) and (orientation: portrait) {
    .about-section { padding: 8vh 6% 8vh 6%; }

    .about-subtitle { font-size: clamp(2.6rem, 8vw, 4rem); }

    .about-text p   { font-size: 1.6rem; }
}

/* ================================
   PORTRAIT — celular pequeno  ≤ 450px
   ================================ */
@media (max-width: 450px) and (orientation: portrait) {
    .about-section {
        padding: 8vh 6% 8vh 6%;
    }

    .about-subtitle {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    .about-text p {
        font-size: 1.3rem; /* services: acc-text p @ 450px */
        line-height: 1.7;
    }
}

/* ================================
   PORTRAIT — celular muito pequeno  ≤ 320px
   ================================ */
@media (max-width: 320px) {
    .about-subtitle { font-size: 2.4rem; }
    .about-text p   { font-size: 1.2rem; }
}

@media (max-width: 320px) {
    .about-subtitle { font-size: 2.4rem; }
    .about-text p   { font-size: 1.3rem; }
}

@media (max-width: 450px) {
    .about-subtitle { font-size: 2.4rem; }
    .about-text p   { font-size: 1.4rem; }
}

/* ================================
   LANDSCAPE — celular/tablet  ≤ 950px
   ================================ */
@media only screen and (max-width: 950px) and (orientation: landscape) {
    .about-section {
        padding: 10vh 6% 6vh 6%;
        min-height: auto;
    }

    .about-container {
        grid-template-columns: 1fr 1px 1fr;
        gap: 0 40px;
        margin-top: 15vh;
    }

    .about-divider { display: block; }
    .about-content { align-items: center; }
    .about-subtitle {
        text-align: center;
        font-size: clamp(1.8rem, 5vw, 2.8rem);
    }

    .about-text { text-align: left; }
    .about-text p {
        font-size: 1.2rem; /* services: acc-text p landscape compacto */
        line-height: 1.6;
    }
}

/* ================================
   BORDAS LATERAIS — portrait (título acima do texto)
   Usando pseudo-elementos com gradiente igual ao accordion
   ================================ */

   @media (orientation: portrait) {
    .about-container {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 1rem;
    }

    .about-container::before,
    .about-container::after {
        content: '';
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--accent-gold) 8%,
            var(--accent-gold) 92%,
            transparent 100%
        );
        opacity: 0.35;
        transition: opacity 0.4s ease;
    }

    .about-container::before { left: 0; }
    .about-container::after  { right: 0; }
}