/* ============================================================================
   PERSONALIZACAO — "Cada mensagem é uma fusão" home-page section.

   Sits between the dark _ConversasReais section and _ComoFunciona on the
   PT home flow. Background is design-system "surface" (#f6f7fc) so the
   blue (customer) and orange (lead) accents on the source cards pop.

   Visual structure:
     [HEADING — left-aligned on desktop, centered on mobile]
     [TWO SOURCE CARDS side-by-side on desktop, stacked on mobile]
     [SVG CONVERGENCE INDICATOR — two lines funnel into an arrow]
     [ANNOTATED EMAIL MOCKUP — phrases underlined by source color]
     [LEGEND — keys the underline colors back to the sources]

   ============================================================================ */


/* Personalizacao is a child of .conversas-reais-home (one shared <section>),
   so it inherits the dark bg and waves from its parent. No section-level
   styles here — only the inner layout + spacing from the heading above. */

.personalizacao {
    width: 100%;
}


/* INNER LAYOUT — vertical stack of bridge → sources → merge → output → legend. */

.personalizacao .personalizacao__inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}


/* ============================================================================
   BRIDGE — narrative connector between the live mockup (in conversas-reais)
   and the fusion formula below. A thin gradient vertical line fades down,
   the small italic caption "por dentro de cada uma" reads as a hand-written
   note, then a second line continues down to the source cards. No second H2:
   this section is the same beat as the one above, just zoomed in.
   ============================================================================ */


/* BRIDGE — full-width container so the desktop arrow can sweep from the
   left edge (where the heading sits on ≥1024px) over to the center (where
   the bridge text + source cards are). Children stay centered by default
   (align-items), but the arrow SVG takes 100% width so its internal viewBox
   coordinates align: x=50 reads as "near the left edge", x=500 reads as
   "center" — matching where the cards below are aligned. */

.personalizacao .personalizacao__inner .personalizacao__bridge {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}


/* BRIDGE TEXT — poster treatment. Two lines of extreme typographic
   contrast: a small italic-regular prefix ("Personalização") frames a
   HUGE bold-italic gradient hero word ("cirúrgica"). The qualifier
   carries the meaning, so it gets the visual weight. */

.personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}


.personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-text .personalizacao__bridge-text-prefix {
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}


.personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-text .personalizacao__bridge-text-headline {
    display: inline-block;
    font-size: 56px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-top: 10px;
    padding: 0 10px;
}


/* DESKTOP ARROW — 1000-wide viewBox, path origin at x=50 (left), endpoint
   at x=500 (center). Cyan→blue brand gradient stroke at 6px, with a soft
   cyan drop-shadow glow that gives the line presence on the dark canvas
   without going neon-tacky. Hidden on mobile (left-to-center sweep
   doesn't apply when the heading is centered). */

.personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-arrow--desktop {
    display: none;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 25px rgba(28, 145, 228, 0.35));
}


/* MOBILE ARROW — compact vertical arrow, same gradient + glow treatment
   so the brand thread carries through across breakpoints. */

.personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-arrow--mobile {
    display: block;
    width: 50px;
    height: 100px;
    filter: drop-shadow(0 0 15px rgba(28, 145, 228, 0.35));
}


/* CONTINUING LINE — picks up where the bridge text ends and fades down
   toward the source cards, keeping the narrative thread visually connected. */

.personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}


/* ============================================================================
   TWO SOURCE CARDS (Sua solução  +  Este lead)
   ============================================================================ */


.personalizacao .personalizacao__inner .personalizacao__sources {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 25px;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source .personalizacao__source-head {
    display: flex;
    align-items: center;
    gap: 10px;
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source .personalizacao__source-head .personalizacao__source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source .personalizacao__source-head .personalizacao__source-title {
    margin: 0;
    color: var(--color-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source .personalizacao__source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--color-muted);
    line-height: 1.5;
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source .personalizacao__source-list li {
    position: relative;
    padding-left: 25px;
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source .personalizacao__source-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


/* COLOR ACCENTS PER SOURCE — blue for solution, orange for lead. Drives both
   the icon-circle background and the bullet-dot color so each card carries
   its own identity at a glance. */

.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source--solution .personalizacao__source-head .personalizacao__source-icon {
    background: rgba(28, 145, 228, 0.12);
    color: var(--color-primary);
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source--solution .personalizacao__source-list li::before {
    background: var(--color-primary);
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source--lead .personalizacao__source-head .personalizacao__source-icon {
    background: rgba(255, 111, 60, 0.12);
    color: var(--color-accent);
}


.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__source--lead .personalizacao__source-list li::before {
    background: var(--color-accent);
}


/* "+" SIGN BETWEEN THE TWO CARDS — neutral ink, big enough to read as a
   formula operator. */

.personalizacao .personalizacao__inner .personalizacao__sources .personalizacao__plus {
    align-self: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}


/* ============================================================================
   CONVERGENCE INDICATOR — two lines funneling into a single arrow
   ============================================================================ */


.personalizacao .personalizacao__inner .personalizacao__merge {
    width: 100%;
    max-width: 200px;
    display: flex;
    justify-content: center;
}


.personalizacao .personalizacao__inner .personalizacao__merge svg {
    width: 100%;
    height: auto;
}


/* ============================================================================
   OUTPUT — annotated email mockup
   ============================================================================ */


.personalizacao .personalizacao__inner .personalizacao__output {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 25px;
    border-bottom: 1px solid var(--color-border);
    background: #f6f7fc;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-head .personalizacao__output-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(28, 145, 228, 0.12);
    color: var(--color-primary);
    flex-shrink: 0;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-head .personalizacao__output-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-head .personalizacao__output-meta .personalizacao__output-line {
    color: var(--color-ink);
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-head .personalizacao__output-meta .personalizacao__output-line .personalizacao__output-key {
    color: var(--color-muted);
    font-weight: 600;
    margin-right: 10px;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-body {
    padding: 25px;
    color: var(--color-ink);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-body p {
    margin: 0;
}


/* HIGHLIGHTED PHRASES — colored underline + tiny bg tint marks every span
   that came from one of the two sources. Underline thickness 2px, offset 3px
   so the line reads as a deliberate highlight rather than spell-check chrome. */

.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-body .from-solution {
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    background: rgba(28, 145, 228, 0.08);
    padding: 0 3px;
    border-radius: 3px;
}


.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-body .from-lead {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    background: rgba(255, 111, 60, 0.08);
    padding: 0 3px;
    border-radius: 3px;
}


/* SAME UNDERLINE TREATMENT FOR THE FROM/SUBJECT ROWS — keeps the visual
   contract consistent across header + body. */

.personalizacao .personalizacao__inner .personalizacao__output .personalizacao__output-head .personalizacao__output-meta .personalizacao__output-line .from-lead {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    background: rgba(255, 111, 60, 0.08);
    padding: 0 3px;
    border-radius: 3px;
}


/* ============================================================================
   LEGEND — keys the underline colors back to the two sources
   ============================================================================ */


.personalizacao .personalizacao__inner .personalizacao__legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 25px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}


.personalizacao .personalizacao__inner .personalizacao__legend .personalizacao__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


.personalizacao .personalizacao__inner .personalizacao__legend .personalizacao__legend-item strong {
    color: #ffffff;
}


.personalizacao .personalizacao__inner .personalizacao__legend .personalizacao__legend-item .personalizacao__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}


.personalizacao .personalizacao__inner .personalizacao__legend .personalizacao__legend-item .personalizacao__legend-dot--solution {
    background: var(--color-primary);
}


.personalizacao .personalizacao__inner .personalizacao__legend .personalizacao__legend-item .personalizacao__legend-dot--lead {
    background: var(--color-accent);
}


/* ============================================================================
   RESPONSIVE — DESKTOP (≥1024px). Source cards go side-by-side with the "+"
   between them. Heading switches to left alignment to match the two-column
   "Interações em tempo real" section above (visual rhythm continuity).
   ============================================================================ */


@media (min-width: 1024px) {

    .personalizacao .personalizacao__inner .personalizacao__sources {
        flex-direction: row;
        align-items: stretch;
    }


    /* Swap the compact mobile arrow for the wide left-to-center sweep. */

    .personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-arrow--desktop {
        display: block;
    }


    .personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-arrow--mobile {
        display: none;
    }


    /* Bump the poster headline at desktop where there's more real estate.
       28px / 72px italic + tight tracking = editorial-poster scale. */

    .personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-text .personalizacao__bridge-text-prefix {
        font-size: 22px;
    }


    .personalizacao .personalizacao__inner .personalizacao__bridge .personalizacao__bridge-text .personalizacao__bridge-text-headline {
        font-size: 72px;
        letter-spacing: -2px;
    }

}