/**
 * ═══════════════════════════════════════════════════════════════════════════
 * 🇧🇷 TEMA COPA DO MUNDO 2026 — BRASIL
 * Etapa 3: Feature Split · Planos & Preços · Seção Fundadora (Camila)
 * ─ Dependência: copa-2026-etapa1.css (variáveis --copa-*) ─
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  ★ │ ESTRELAS SVG PULSANTES — FUNDO COPA 2026                         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/**
 * Camada de estrelas absolutas dentro de qualquer seção.
 * Cada .copa-star é um div-halo com SVG centralizado.
 * Propriedades inline: --sx, --sy (posição), --ss (tamanho total),
 *   --sl (delay), --sd (duração), --so (opacidade máx.), --sr (rotação),
 *   --sbg (cor do halo radial).
 */
.copa-stars-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Halo + estrela: div circular com fundo radial suave */
.copa-star {
    position: absolute;
    left:    var(--sx, 50%);
    top:     var(--sy, 50%);
    width:   var(--ss, 100px);
    height:  var(--ss, 100px);
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        var(--sbg, rgba(255, 215, 0, 0.22)) 0%,
        transparent 68%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity, transform;
    animation: copa-star-pulse var(--sd, 4s) ease-in-out var(--sl, 0s) infinite;
}

/* SVG da estrela: 36% do container para deixar espaço ao halo */
.copa-star svg {
    width:  36%;
    height: 36%;
    flex-shrink: 0;
    overflow: visible;
}

@keyframes copa-star-pulse {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }
    40%, 60% {
        opacity: var(--so, 0.70);
        transform: translate(-50%, -50%) scale(1) rotate(var(--sr, 20deg));
    }
}

/* Conteúdo das seções sempre acima da camada de estrelas */
.feature-split-section > .container-default,
.about-founder-section > .container-founder {
    position: relative;
    z-index: 1;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  1 │ FEATURE SPLIT — .feature-split-section                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.feature-split-section {
    background: var(--copa-off-white);
    padding: var(--copa-section-py) 0;
    overflow: hidden;
}

/* ── Linha de split ── */
.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}
.split-row:last-child { margin-bottom: 0; }

/* Linha invertida: imagem à esquerda */
.split-row.reverse {
    direction: rtl;
}
.split-row.reverse > * {
    direction: ltr;
}

/* ── Coluna de texto ── */
.split-text { max-width: 540px; }

.highlight-text {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--copa-green-dark);
    background: rgba(26,71,42,.08);
    border: 1px solid rgba(26,71,42,.16);
    padding: 6px 16px;
    border-radius: var(--copa-radius-pill);
    margin-bottom: 16px;
}

.split-text h3 {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 900;
    color: var(--copa-text);
    line-height: 1.28;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: -.3px;
}

.split-text p {
    font-size: 15px;
    color: var(--copa-text-muted);
    line-height: 1.80;
    margin-bottom: 24px;
}

/* Lista de checks */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--copa-text);
}

.check-list li i {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--copa-green-dark), var(--copa-green));
    color: var(--copa-yellow);
    border-radius: var(--copa-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(26,71,42,.20);
}

/* Botão outline */
.btn-primary-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    background: transparent;
    color: var(--copa-green-dark);
    border: 2px solid var(--copa-green-dark);
    border-radius: var(--copa-radius-pill);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .8px;
    transition: all var(--copa-dur-med) var(--copa-spring);
}
.btn-primary-outline:hover {
    background: var(--copa-green-dark);
    color: var(--copa-yellow);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(26,71,42,.25);
}

/* ── Coluna de imagem ── */
.split-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blob de fundo */
.blob-shape {
    position: absolute;
    width: 85%;
    height: 85%;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    z-index: 0;
    animation: copa-orbFloat 8s ease-in-out infinite;
}
.blob-shape.shape-green {
    background: radial-gradient(ellipse, rgba(45,95,63,.14), rgba(26,71,42,.07));
}
.blob-shape.shape-beige {
    background: radial-gradient(ellipse, rgba(255,215,0,.10), rgba(255,215,0,.03));
}

/* Imagem / Ilustração */
.person-photo {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    max-height: 520px;
    height: auto;
    display: block;
    border-radius: 0;               /* sem borda retangular que cria caixa branca */
    object-fit: contain;            /* sem corte — exibe a imagem completa */
    box-shadow: none;               /* box-shadow não respeita transparência do PNG */
    filter: drop-shadow(0 18px 36px rgba(26,71,42,.22)); /* sombra segue o contorno do PNG */
    transition: transform var(--copa-dur-slow) var(--copa-ease),
                filter var(--copa-dur-slow) var(--copa-ease);
}
.split-image-wrapper:hover .person-photo {
    transform: scale(1.02);
    filter: drop-shadow(0 24px 48px rgba(26,71,42,.30));
}

/* Badges flutuantes */
.float-badge {
    position: absolute;
    z-index: 2;
    background: var(--copa-green-dark);
    color: var(--copa-yellow);
    font-size: 12px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: var(--copa-radius-pill);
    box-shadow: 0 8px 24px rgba(26,71,42,.35);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .5px;
    white-space: nowrap;
    border: 1px solid rgba(255,215,0,.25);
    animation: copa-float 5s ease-in-out infinite;
}
.float-badge.badge-right { right: -12px; }
.float-badge.badge-left  {  left: -12px; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  2 │ PLANOS & PREÇOS (se existir seção de planos)                     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.plans-section {
    background: #fff;
    padding: var(--copa-section-py) 0;
    position: relative;
    overflow: hidden;
}

/* Toggle mensal / anual */
.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

.billing-toggle span {
    font-size: 14px;
    font-weight: 700;
    color: var(--copa-text-muted);
    transition: color var(--copa-dur-fast) var(--copa-ease);
}
.billing-toggle span.active { color: var(--copa-green-dark); }

.toggle-switch {
    width: 52px;
    height: 28px;
    background: var(--copa-border);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background var(--copa-dur-med) var(--copa-ease);
    border: none;
    padding: 0;
}
.toggle-switch.is-annual { background: var(--copa-green-dark); }

.toggle-thumb {
    position: absolute;
    top: 4px; left: 4px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.20);
    transition: transform var(--copa-dur-med) var(--copa-spring);
}
.toggle-switch.is-annual .toggle-thumb { transform: translateX(24px); }

/* Grade de planos */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.plan-card {
    background: #fff;
    border: 2px solid var(--copa-border);
    border-radius: var(--copa-radius);
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    transition: all var(--copa-dur-med) var(--copa-spring);
    box-shadow: var(--copa-shadow-sm);
}

/* Card em destaque (popular) */
.plan-card.is-featured {
    border-color: var(--copa-green-dark);
    box-shadow: 0 0 0 4px rgba(26,71,42,.08), var(--copa-shadow-md);
    transform: scale(1.03);
}

.plan-card.is-featured::before {
    content: '⭐ Mais Popular';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--copa-green-dark), var(--copa-green));
    color: var(--copa-yellow);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 22px;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
}

.plan-card:hover:not(.is-featured) {
    border-color: var(--copa-green);
    transform: translateY(-6px);
    box-shadow: var(--copa-shadow-md);
}

/* Nome do plano */
.plan-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--copa-green-dark);
    margin-bottom: 8px;
    margin-top: 12px;
}
.is-featured .plan-name { margin-top: 28px; }

/* Preço */
.plan-price {
    margin-bottom: 6px;
}
.plan-price .currency {
    font-size: 18px;
    font-weight: 700;
    color: var(--copa-text);
    vertical-align: top;
    line-height: 1.5;
}
.plan-price .amount {
    font-size: 42px;
    font-weight: 900;
    color: var(--copa-text);
    line-height: 1;
}
.plan-price .period {
    font-size: 13px;
    color: var(--copa-text-muted);
    font-weight: 500;
}

/* Economia */
.annual-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--copa-green);
    background: rgba(45,95,63,.08);
    border: 1px solid rgba(45,95,63,.15);
    padding: 4px 12px;
    border-radius: var(--copa-radius-pill);
    display: inline-block;
    margin-bottom: 20px;
    min-height: 24px;
}

/* Divisor */
.plan-divider {
    height: 1px;
    background: var(--copa-border);
    margin: 20px 0;
}

/* Lista de features */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--copa-text-muted);
    line-height: 1.5;
}
.plan-features li i {
    color: var(--copa-green);
    font-size: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}
.plan-features li.unavailable {
    opacity: .45;
    text-decoration: line-through;
}
.plan-features li.unavailable i { color: #ccc; }

/* CTA do plano */
.btn-plan {
    display: block;
    text-align: center;
    padding: 13px 20px;
    border-radius: var(--copa-radius-pill);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-decoration: none;
    transition: all var(--copa-dur-med) var(--copa-spring);
}

.btn-plan--outline {
    background: transparent;
    color: var(--copa-green-dark);
    border: 2px solid var(--copa-green-dark);
}
.btn-plan--outline:hover {
    background: var(--copa-green-dark);
    color: var(--copa-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26,71,42,.20);
}

.btn-plan--solid {
    background: linear-gradient(135deg, var(--copa-green-dark), var(--copa-green));
    color: var(--copa-yellow);
    border: 2px solid transparent;
    box-shadow: 0 6px 20px rgba(26,71,42,.30);
}
.btn-plan--solid:hover {
    background: linear-gradient(135deg, #14381f, #256838);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(26,71,42,.40);
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  3 │ SEÇÃO FUNDADORA — .about-founder-section                        ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.about-founder-section {
    background: linear-gradient(160deg, #f9f5ef 0%, #f4f0e6 100%);
    padding: var(--copa-section-py) 0;
    position: relative;
    overflow: hidden;
}

/* Detalhe floral / café ao fundo */
.about-founder-section::before {
    content: '☕';
    position: absolute;
    top: -40px;
    right: -30px;
    font-size: 300px;
    opacity: .035;
    line-height: 1;
    pointer-events: none;
    animation: copa-orbFloat 12s ease-in-out infinite;
}

.container-founder {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Grid fundadora */
.founder-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
    align-items: center;
}

/* ── Tag de seção ── */
.founder-content .section-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--copa-green-dark);
    background: rgba(26,71,42,.07);
    border: 1px solid rgba(26,71,42,.14);
    padding: 6px 16px;
    border-radius: var(--copa-radius-pill);
    margin-bottom: 18px;
}

/* Título fundadora */
.founder-title {
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 900;
    color: var(--copa-text);
    line-height: 1.22;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: -.3px;
}

.founder-title .highlight-hand {
    color: var(--copa-green-dark);
    position: relative;
}
.founder-title .highlight-hand::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--copa-yellow), var(--copa-green));
    border-radius: 2px;
}

/* Textos */
.founder-text-main {
    font-size: 16px;
    color: #3d3325;
    line-height: 1.82;
    margin-bottom: 18px;
}

.founder-text-sec {
    font-size: 14px;
    color: #6b5a48;
    line-height: 1.78;
    margin-bottom: 18px;
}

/* Caixa de citação */
.founder-quote-box {
    background: linear-gradient(135deg, rgba(26,71,42,.07), rgba(26,71,42,.03));
    border-left: 4px solid var(--copa-green-dark);
    border-radius: 0 var(--copa-radius-sm) var(--copa-radius-sm) 0;
    padding: 18px 24px;
    margin: 22px 0;
}

.founder-quote-box blockquote {
    font-size: 17px;
    font-weight: 700;
    font-style: italic;
    color: var(--copa-green-dark);
    margin: 0 0 8px;
    line-height: 1.5;
}

.founder-quote-box cite {
    font-size: 12px;
    color: var(--copa-text-muted);
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* CTA "tomar um café" */
.btn-founder-talk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 32px;
    background: var(--copa-green-dark);
    color: var(--copa-yellow);
    border: 2px solid var(--copa-green-dark);
    border-radius: var(--copa-radius-pill);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .8px;
    box-shadow: 0 8px 24px rgba(26,71,42,.25);
    transition: all var(--copa-dur-med) var(--copa-spring);
}
.btn-founder-talk:hover {
    background: #12301a;
    border-color: #12301a;
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(26,71,42,.35);
    gap: 16px;
}
.btn-founder-talk:hover {
    gap: 15px;
    color: #ffffff;
    /* border-color: var(--dark-brown); */
}
.exp-badge {
    gap: 0px;
}
.btn-founder-talk i { transition: transform var(--copa-dur-med) var(--copa-spring); }
.btn-founder-talk:hover i { transform: translateX(4px); }

/* ── Visual / Foto fundadora ── */
.founder-visual-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Moldura em arco */
.arch-frame {
    position: relative;
    width: 340px;
    border-radius: 180px 180px 24px 24px;
    overflow: hidden;
    box-shadow: var(--copa-shadow-lg);
    border: 4px solid rgba(26,71,42,.12);
    background: #e8ddd0;
}
.founder-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Badge de experiência */
.exp-badge {
    position: absolute;
    bottom: 24px;
    right: -20px;
    background: linear-gradient(135deg, var(--copa-green-dark), var(--copa-green));
    color: #fff;
    border-radius: 50%;
    width: 88px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 28px rgba(26,71,42,.40);
    border: 4px solid #fff;
    animation: copa-float 5s ease-in-out infinite;
}
.exp-badge .years {
    font-size: 22px;
    font-weight: 900;
    color: var(--copa-yellow);
    line-height: 1;
}
.exp-badge .label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.3;
    margin-top: 3px;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  4 │ RESPONSIVIDADE — Etapa 3                                         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 1280px) {
    .plans-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .split-row { grid-template-columns: 1fr; gap: 48px; }
    .split-row.reverse { direction: ltr; }
    .split-text { max-width: 100%; }
    .float-badge.badge-right,
    .float-badge.badge-left { position: static; margin-top: 16px; }
    .founder-grid { grid-template-columns: 1fr; gap: 56px; }
    .founder-visual-wrapper { order: -1; }
    .arch-frame { width: 280px; }
}

@media (max-width: 768px) {
    .plans-grid { grid-template-columns: 1fr; }
    .plan-card.is-featured { transform: none; }
    .split-text h3  { font-size: clamp(20px, 6vw, 30px); }
    .founder-title  { font-size: clamp(26px, 7vw, 38px); }
    .arch-frame     { width: 240px; }
    .exp-badge      { width: 72px; height: 72px; right: -12px; bottom: 16px; }
    .exp-badge .years { font-size: 18px; }
}

@media (max-width: 480px) {
    .split-image-wrapper .person-photo { max-width: 100%; max-height: 380px; }
    .btn-primary-outline { width: 100%; justify-content: center; }
    .btn-founder-talk    { width: 100%; justify-content: center; }
    .founder-quote-box blockquote { font-size: 15px; }
}