/* === 1. RESET E ESTILOS GLOBAIS === */
/* Design tokens (edit here to change the theme app-wide) */
:root {
    --color-bg: #00142b;
    --color-text: #ffffff;
    --color-surface: #ffffff;
    --color-border: #ccc;
    --color-muted: #5c6370;
    --color-primary: #1070e8;
    --color-accent: #EA1831; /* red */
    --color-accent-2: #96C430; /* green */
    --color-accent-3: #18b5d1; /* buttons */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;
    --color-neutral-900: #222222;
    --color-neutral-800: #333333;
    --color-subtle: #d4d4d4;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #ddd;
    --color-gray-500: #7f7f7f;
    --color-gray-600: #6f7a86;
    --color-success: #28a745;
    --color-success-text: #155724;
    --color-success-bg: #d4edda;
    --color-success-border: #c3e6cb;
    --color-error-text: #721c24;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-disabled: #cccccc;
    --color-disabled-2: #7e7e7e;
    --color-blue: #007bff;
    --color-border-strong: #dee2e6;
    --color-spine: #e0e0e0;
    --color-gray-250: #c9d2dc;
    --color-gray-225: #e7eef7;
    --color-gray-350: #b1b1b1;
    --color-green-700: #7f8c8d;
    --color-green-brand: #7ac143;
    --color-avatar-bg: #eef4ff;
    --color-avatar-border: #dbe7ff;
    --color-avatar-text: #2d4a9d;
    --color-gray-50: #eaf1ff;
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 12px;
    --shadow-sm: 0 2px 6px rgba(0,0,0,.15);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.2);
    --shadow-lg: 0 14px 36px rgba(17,24,39,.10);
    --shadow-footer: 0 -2px 5px rgba(0,0,0,0.1);
    --shadow-card-2: 0 2px 16px rgba(0,0,0,0.10);
    --shadow-avatar: 0 1px 2px rgba(0,0,0,0.04);
    --overlay-scrim: rgba(0,0,0,0.7);
    --container-max: 840px;
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;

    /* Program section tokens centralized */
    --prog-paper: #111827;
    --prog-ink: #0e0f12;
    --prog-muted: #5c6370;
    --prog-brand: #ffffff;
    --prog-line: #e5e7eb;
    --prog-stroke: rgba(229,231,235,.65);
    --prog-card: #ffffff;
    --prog-accent: #EA1831;
    --prog-ring: rgba(17,24,39,.15);
    --prog-radius: 12px;
    --prog-shadow: 0 10px 30px rgba(17,24,39,.06);
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "kakao-big-sans", sans-serif;
    line-height: 1.6;
    transition: margin 0.2s ease-out;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* === 2. LAYOUT PRINCIPAL === */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-image-container {
    background: var(--color-surface);
    text-align: center;
    padding: 0;
    padding-top: 20px;
}
.header-image-container img{
    width: 80vw;
    max-width: 1000px;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    margin-bottom: 2vh;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

footer {
    width: 100%;
    background: var(--color-surface);
    margin-top: auto;
}
footer .footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
}
footer img {
    max-height: 120px;
    height: auto;
    width: auto;
}

/* === 3. TIPOGRAFIA E LINKS === */
li a{
    color: var(--color-primary);
}

/* Download program button */
.program-download {
    text-align: center;
    margin: 16px 0;
}
.program-download a {
    display: inline-block;
    padding: 10px 16px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.program-download a:hover {
    filter: brightness(0.92);
}
.program-download a:active {
    transform: translateY(1px);
}

/* === 4. FORMULÁRIOS === */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
}
.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    background-color: var(--color-gray-100); /* Garante fundo branco */
}

.terms-container {
    max-height: 300px;
    padding: 10px;
    margin-bottom: 20px;
}

.form-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
    display: none;
}
.form-message.success {
    color: var(--color-success-text);
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}
.form-message.error {
    color: var(--color-error-text);
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
}

button {
    padding: 10px 15px;
    border: none;
    background-color: var(--color-accent-3);
    color: var(--color-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    margin-top: 20px;
}
button:disabled {
    background-color: var(--color-disabled);
    cursor: not-allowed;
}

/* === 5. CHECKBOXES E HONEYPOT === */
/* === HONEYPOT STYLE TO HIDE FROM HUMANS === */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.agreements-container {
    margin-bottom: 20px;
}

.checkbox-group {
    margin-bottom: 10px;
    display: flex;
    align-items: start;
}

/* Chrome, Edge, Safari */
.checkbox-group input[type="checkbox"] {
    margin-top: 5px;
    margin-right: 10px;
    accent-color: var(--color-gray-500);
}

/* Firefox */
input[type="checkbox"].checkbox-blocked:disabled {
    background-color: var(--color-disabled-2);
    border-color: var(--color-disabled-2);
}

.checkbox-blocked {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(100%);
}

/* === 6. MODAL === */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-scrim); /* Mais opaco para impedir leitura do texto por baixo */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: var(--color-surface);
    border-radius: 8px;
    max-width: 95vw;
    width: 100%;
    max-height: 95vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    padding: 5%;
    margin: 5%;
    overflow-x: hidden;
}
.modal-close {
    position: absolute;
    top: 5%;
    right: 5%;
    background: var(--color-transparent);
    border: none;
    font-size: 2rem;
    color: var(--color-neutral-800);
    cursor: pointer;
    z-index: 10;
}
.modal-doc-container {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: 60vh;
    color: var(--color-neutral-900);
    background: var(--color-surface);
    overflow-x: hidden;
}
#modalConfirmBtn {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    border-radius: 5px;
    border: none;
    margin-top: 10px;
    background-color: var(--color-disabled);
    color: var(--color-white);
    cursor: not-allowed;
    transition: background 0.2s;
}
#modalConfirmBtn.enabled {
    background-color: var(--color-blue);
    cursor: pointer;
}

/* === SPEAKER MODAL === */
.clickable-speaker {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.clickable-speaker:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0.9;
}
.clickable-speaker:active {
    transform: scale(0.98);
}

.speaker-modal-overlay {
    animation: fadeIn 0.2s ease;
}
.speaker-modal-content {
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    padding: 40px 30px 30px 30px;
    animation: slideUp 0.3s ease;
}
.speaker-modal-text {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--color-neutral-900);
    background: var(--color-surface);
    line-height: 1.7;
    font-size: 16px;
    /* Scroll behavior for mobile */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.speaker-modal-text p {
    margin-bottom: 15px;
}
.speaker-modal-text h3 {
    color: var(--color-neutral-900);
    margin-bottom: 10px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Mobile specific styles for speaker modal */
@media (max-width: 600px) {
    .speaker-modal-content {
        max-width: 95vw;
        width: 95%;
        max-height: 90vh;
        padding: 50px 20px 20px 20px;
        margin: 0;
    }
    .speaker-modal-text {
        padding: 15px;
        font-size: 15px;
        max-height: calc(90vh - 100px);
    }
    .speaker-modal-overlay .modal-close {
        top: 15px;
        right: 15px;
        font-size: 2.5rem;
        color: var(--color-neutral-900);
        background: var(--color-white);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
    }
}

.confirm-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 90%;
    background-color: var(--color-gray-100);
    border-top: 1px solid var(--color-border-strong);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow-footer);
}
.confirm-footer button {
    padding: 10px 20px;
    font-size: 1rem;
}

.disclaimer {
    text-align: center;
}

/* === 7. MEDIA QUERIES === */
@media screen and (max-width: 600px) {
    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .container {
        padding: 10px;
        border: none;
        margin: 0;
        width: 95%;
        text-align: center;
    }
    .terms-container {
        max-height: 50vh;
        text-align: left;
        margin: 0;
        padding: 5px;
    }
    button {
        padding: 15px 20px;
        width: 100%;
        margin: 0;
        display: block;
    }
    .header-image-container {
        display: block;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    footer .footer-flex {
        display: block !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0;
        padding: 0;
    }
    footer .footer-flex img {
        max-width: 100%;
        max-height: none;
        margin: 0 auto;
        display: block;
    }
    .form-group {
        text-align: center;
        margin: 0;
        padding: 5px 0;
    }
    .form-group label {
        text-align: center;
        margin: 0;
    }
    .checkbox-group {
        display: block;
        text-align: left;
        margin: 0;
        padding: 5px 0;
    }
}

/* ===============================
   11. ERS Programa — Flat, centered, no spine, title band
   =============================== */

/* Local tokens (scoped via program section to avoid global side effects) */
.program-section {
    --paper: var(--prog-paper);
    --ink: var(--prog-ink);
    --muted: var(--prog-muted);
    --brand: var(--prog-brand);
    --line: var(--prog-line);
    /* Added to support card/grid variant */
    --stroke: var(--prog-stroke);
    --card: var(--prog-card);
    --accent: var(--prog-accent);
    --ring: var(--prog-ring);
    --radius: 12px;
    --shadow: var(--prog-shadow);
    background: var(--bg);
    color: var(--ink);
    padding: clamp(24px, 4vw, 56px) 16px;
}

.prog-container {
    max-width: 860px;
    margin: 0 auto;
}

.prog-main-header {
    text-align: left;
    margin: 0 0 clamp(20px, 3.5vw, 36px) 0;
}
.prog-main-header h1 {
    margin: 0 0 6px 0;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -0.02em;
}
.prog-main-header .subtitle {
    color: var(--muted);
}

/* Timeline without center line */
.prog-timeline { position: relative; padding: 0; }
.prog-timeline::before,
.prog-timeline::after { display: none; }

/* Single-column items, centered container, left-aligned text */
.prog-item {
    position: relative;
    display: block;
    margin: 22px 0;
}

/* Time chip above the card; no pin */
.prog-marker { position: static; margin-bottom: 6px; width: auto; height: auto; }
.prog-marker::after { display: none; }
.prog-time { display: inline-block; background: var(--color-accent); color: #ffffff; font-weight: 700; padding: 8px 10px; border-radius: 0; box-shadow: var(--shadow-sm); font-size: 13px; }

/* Flat card: no radius, light border, content padding managed inside */
.prog-content { border-radius: 0; background: var(--color-transparent); border: 0; box-shadow: none; padding: 0; overflow: hidden; float: none; width: 100%; text-align: left; }

/* Remove side pointers */
.prog-content::before { display: none; }

/* Title band */
.prog-title {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 8px 10px;
    background: var(--color-surface);
    color: var(--color-bg);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: .01em;
    text-align: left;
    border: 0;
    border-radius: 0;
}
.simple-title {
    background: var(--color-surface);
    color: var(--color-bg);
}

/* Inner content spacing */
.prog-speaker,
.prog-speaker-group,
.panel-details,
.oradores-list {
    padding: 0 18px;
}
.panel-details { margin: 12px 0 8px 0; }
.panel-details .panel-topics { margin: 8px 0 0 0; padding-left: 18px; color: var(--muted); }
.panel-details .panel-topics li { margin: 6px 0; line-height: 1.5; }

.prog-speaker-group { margin-top: 0px; }

.prog-group-title {
    margin: 16px 0 6px 0;
    font: 700 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.prog-speaker-name { margin: 0; font-weight: 700; font-size: 24px; text-decoration: none; }
.prog-speaker-role { margin: 0 0 28px 0;; color: var(--muted); font-size: 16px; }

/* Clickable speaker names */
.prog-speaker-name.clickable {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.prog-speaker-name.clickable:hover {
    opacity: 0.8;
}

.oradores-list { margin: 8px 0 14px 0; padding-left: 18px; }
.oradores-list li { margin: 6px 0; line-height: 1.45; }
.oradores-list .prog-speaker-name { font-weight: 700; }


/* Hover polish (desktop) */
@media (hover:hover) {
    .prog-content { transition: box-shadow .2s ease, transform .2s ease; }
    .prog-content:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }
}

/* Responsive refinements */
@media (max-width: 640px) {
    .prog-time { font-size: 12px; padding: 7px 10px; text-align: center; }
    .prog-title { padding: 12px 14px; text-align: center; }
    .prog-speaker, .prog-speaker-group, .panel-details, .oradores-list { padding: 0 14px; text-align: left; }
}

/* === FINAL ENFORCED OVERRIDES (ensure flat, single-column on all widths) === */
.prog-timeline::before,
.prog-timeline::after { display: none; }
.timeline-left .prog-content,
.timeline-right .prog-content,
.prog-content { float: none; width: 100%; text-align: left; }
.timeline-left .parallel-session,
.timeline-right .parallel-session { border-right: none; border-left: 3px solid var(--color-accent-2); padding-right: 0; padding-left: 15px; }
.prog-item { display: block; margin-left: 0; margin-right: 0; }
.prog-marker::before,
.prog-marker::after { display: none; }

/* === FINAL LOOK TO MATCH REFERENCE (dark navy, white chip, red time) === */
.program-section {
    background: var(--color-bg);
    color: var(--color-text);
}
/* .prog-container defined earlier */

/* Time badge on its own row, left aligned (consolidated above) */

/* Flat content: consolidated above */


/* Text colors on dark background */
.prog-speaker-name { color: var(--color-white); }
.prog-speaker-role { color: var(--color-gray-250); }
.panel-details, .oradores-list { color: var(--color-gray-225); }
.panel-details .panel-topics { color: var(--color-green-700); }

/* Keep single column and left-aligned content (consolidated above) */
.prog-item { display: block; }

/* Remove duplicate bullets: keep custom red dot only for speakers */
.oradores-list, .oradores-list li { list-style: none; }
.prog-speaker-group ul, .prog-speaker-group li { list-style: none; padding-left: 0; }
@media (max-width: 600px) {
    .modal-content {
        max-width: 95vw;
        max-height: 95vh;
        border-radius: 8px;
        padding: 20px;
        margin: 0 auto;
        overflow-x: hidden;
        text-align: center;
    }
    .modal-doc-container {
        max-height: 60vh;
        padding: 16px 10px 16px 10px;
        margin: 10px 0;
        color: var(--color-neutral-900);
        background: var(--color-surface);
        overflow-x: hidden;
        text-align: left;
    }
    .modal-close {
        top: 10px;
        right: 10px;
        left: auto;
        bottom: auto;
    }
}
@media screen and (min-width: 601px) and (max-width: 842px) {
    footer .footer-flex {
        display: block !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0;
        padding: 0;
    }
    footer .footer-flex img {
        max-width: 100%;
        max-height: none;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

/* === 8. ESTILOS ESPECÍFICOS === */
/* Apenas para links na página de sucesso */
.success-page a, .success-page a:visited { color: var(--color-success); }

/* === AVISOS DESTACADOS === */
.highlight-warning {
    color: var(--color-white);
    /*font-weight: bold;*/
    background-color: var(--color-success);
    border-radius: 6px;
    padding: 6px;
}

/* === SAVE THE DATE SECTION (IMAGEM ÚNICA) === */
.save-date-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1920px;
    margin: 0 auto 0px auto;
    border-radius: 0;
}
.save-date-img-desktop { display: block; }
.save-date-img-mobile { display: none; }

@media (max-width: 916px) {
    .save-date-img-desktop { display: none; }
    .save-date-img-mobile { display: block; }
}

/* === SAVE THE DATE SECTION (GRID AVANÇADO) === */
.save-the-date-section {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.std-grid-adv {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    width: 100%;
    max-width: 900px;
    min-width: 280px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    background: var(--color-surface);
    position: relative;
    margin: 0 auto;
}
.std-adv-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    width: 100%;
    height: 100%;
    padding: 0;
    min-height: 120px;
}
.std-adv-red { background: var(--color-accent); border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.std-adv-green { background: var(--color-green-brand); }
.std-adv-blue { background: var(--color-accent); border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.std-adv-save { background: var(--color-surface); }
.std-adv-sinc { background: var(--color-surface); }

.std-adv-save-img {
    width: 90%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    display: block;
}
.std-adv-sinc-img {
    width: 80%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    display: block;
}

@media (max-width: 916px) {
    .save-the-date-section {
        width: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .std-grid-adv {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
    }
    .std-adv-red, .std-adv-save, .std-adv-green, .std-adv-sinc, .std-adv-blue { 
        display: block;
        width: 100%;
        margin: 0;
        padding: 10px 0;
        border-radius: 0;
    }

    .prog-title { 
        text-align: center; 
        margin: 0;
    }
}
@media (max-width: 700px) {
    .std-adv-cell {
        min-height: 80px;
    }
    .std-adv-cell img { max-width: 100%; max-height: 120px; }
    .std-adv-save-img { max-width: 220px; }
    .std-adv-sinc-img { max-width: 150px; }
}
@media (max-width: 480px) {
    .std-adv-cell img { max-height: 80px; }
    .std-adv-save-img { max-width: 140px; }
    .std-adv-sinc-img { max-width: 90px; }
}

/* Geração dos pontos via JS */

/* === 9. PROGRAMA TIMELINE (VERSÃO COM CÍRCULOS CORRIGIDOS) === */
.program-section {
    padding: 0px 0;
    font-family: inherit;
}
.prog-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}
.prog-main-header {
    text-align: center;
    margin-bottom: 50px;
}
.prog-main-header h1 {
    font-size: 2.5rem;
    font-weight: 900; margin: 0; color: var(--color-surface);
}
.prog-main-header .subtitle {
    font-style: italic;
    font-size: 0.9rem; margin: 0 0 15px 0; color: var(--color-subtle);
}
.prog-main-header h2 {
    font-size: 1.2rem;
    font-weight: 700; margin: 0; color: var(--color-white);
}
.prog-main-header .date-location {
    font-size: 1rem;
    font-weight: 700; margin-top: 10px; color: var(--color-white);
}

/* Linha do tempo e linha central */
.prog-timeline {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.prog-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: var(--color-spine);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

/* Itens da timeline */
.prog-item {
    position: relative;
    margin-bottom: 30px;
}
.prog-item:last-child {
    margin-bottom: 0;
}

/* Marcador (agora é um container transparente) */
.prog-marker {
    position: absolute;
    left: 5%;
    top: 0;
    z-index: 2;
    transform: translateX(-50%);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* LARGURA E ALTURA IGUAIS PARA SER SEMPRE UM CÍRCULO */
    width: 75px;
    height: 75px;
    
    /* O fundo foi removido daqui */
}

/* CORREÇÃO: Círculo cinza de fundo (::before) e Círculo vermelho (::after) */
.prog-marker::before, .prog-marker::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

/* Círculo Cinza (camada de baixo) */
.prog-marker::before {
    z-index: 1; /* Camada 1 */
    background: var(--color-gray-300);
    /* Ligeiramente maior que o círculo vermelho */
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
}

/* Círculo Vermelho (camada do meio) */
.prog-marker::after {
    z-index: 2; /* Camada 2 */
    background: var(--color-accent);
    /* Tamanho exato do container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.prog-marker.prog-marker-long {
    /* CORREÇÃO: Aumenta largura e altura igualmente para manter círculo */
    width: 85px;
    height: 85px;
}

.prog-marker.break-time::after { /* Altera a cor do círculo vermelho para cinza nos breaks */
    background-color: var(--color-green-700);
}

.prog-time {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--color-white);
    position: relative; /* Adicionado para garantir que o texto fique por cima */
    z-index: 3; /* Camada 3 (topo) */
}

/* Container do conteúdo (texto) */
.prog-content {
    position: relative;
    width: calc(50% - 60px); /* Ajuste de espaço */
}

/* Posição dos itens à ESQUERDA */
.timeline-left .prog-content {
    float: left;
    text-align: left;
}

/* Posição dos itens à DIREITA */
.timeline-right .prog-content {
    float: right;
    text-align: left;
}

.prog-item::after { /* Limpa os floats para que os items não se sobreponham */
    content: "";
    display: block;
    clear: both;
}

/* Estilos de texto e painéis */
.prog-title.simple-title {
    padding-top: 10px;
}
.prog-title.simple-title:not(:last-of-type) {
    padding-bottom: 30px;
}
.panel-details, .prog-speaker-group, .prog-speaker, .parallel-session {
    margin-top: 0px;
}
.panel-topics {
    list-style-position: inside;
    padding-left: 0;
    font-size: 0.9rem;
}
.prog-group-title {
    font-weight: 700;
    color: var(--color-accent-2);
    font-size: 1.1rem;
}
.prog-speaker-name { font-weight: bold; }
.prog-speaker-role { font-size: 1rem; color: var(--color-gray-350); }
.oradores-list { list-style: none; padding: 0; }
.oradores-list li { margin-bottom: 10px; }
.parallel-session { border-left: 3px solid var(--color-accent-2); padding-left: 15px; }
.timeline-left .parallel-session { border-left: none; border-right: 3px solid var(--color-accent-2); padding-left: 0; padding-right: 15px; }
.parallel-title { font-size: 1.1rem; font-weight: bold; }
.parallel-or { text-align: center; font-weight: bold; color: var(--color-accent); margin: 5px 0; }

/* Mobile - Simplified centered layout */
@media screen and (max-width: 768px) {
    .prog-timeline::after {
        display: none; /* Hide timeline line on mobile */
    }
    
    .prog-item {
        display: block;
        text-align: center;
        margin: 0;
        padding: 10px 0;
    }

    .prog-marker {
        position: static;
        margin: 0;
        padding: 5px 0;
        display: block;
        text-align: center;
    }

    .prog-content {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    
    .timeline-left .parallel-session,
    .timeline-right .parallel-session {
        border: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
}

/* === 10. THEME OVERRIDES TO MATCH REFERENCE IMAGE === */
/* Red time badge instead of circular marker */
.prog-marker { width: auto; height: auto; background: var(--color-transparent); }
.prog-marker::before,
.prog-marker::after { display: none; }
.prog-time { display: inline-block; background: var(--color-accent); color: var(--color-white); padding: 8px 12px; font-weight: 900; letter-spacing: 0.2px; }


/* Speaker styles: red name with small dot */
.prog-speaker-name {
    color: var(--color-surface);
    font-weight: 900;
    margin-top: 20px;
}
.prog-speaker-name::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    top: -5px;
}
.prog-speaker-role { color: var(--color-gray-600); }

/* Optional: hide the center spine for a cleaner list look like mock */
.prog-timeline::after { display: none; }

/* Show center spine on desktop only */
@media screen and (min-width: 769px) {
    .prog-timeline::after {
        display: block;
        content: '';
        position: absolute;
        width: 2px;
        background: var(--color-spine);
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -1px;
    }
}

/* === FINAL ALIGNMENT OVERRIDES (badge and title chip) === */
.program-section .prog-timeline::after { display: none !important; }
.program-section .prog-marker { position: static !important; margin-bottom: 0px !important; width: auto !important; height: auto !important; }
.program-section .prog-time { margin-left: 78px !important; }

/* === SPEAKER AVATAR CIRCLE (88px behind each .prog-speaker) === */
.prog-speaker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0px 18px;
}
.program-section .prog-speaker {
    display: grid;                 /* stack name over role next to avatar */
    grid-template-columns: 80px 1fr;
    grid-auto-rows: min-content;
    align-items: center;
}
.program-section .prog-speaker .speaker-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;   
}
.program-section .prog-speaker-name,
.program-section .prog-speaker-role {
    grid-column: 2;                /* text sits in the second column */
}
.prog-speaker .speaker-avatar {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    object-fit: cover;
    flex: 0 0 80px;
    background: var(--color-avatar-bg);
    border: 1px solid var(--color-avatar-border);
    box-shadow: var(--shadow-avatar);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-avatar-text);
    font-weight: 800;
}
.prog-speaker::before {
    display: none !important; /* use inline avatar circle instead */
}
/* Optional: set a custom photo per speaker by providing --speaker-photo: url('...') inline */
.prog-speaker.has-photo::before {
    background: var(--color-gray-300) center/cover no-repeat;
    background-image: var(--speaker-photo);
}

/* === Speaker grid and cards to match reference (image 2) === */
.prog-speaker-group {
    padding: 0 0 8px 0;
    margin-left: 0px;
}
.prog-speaker {
    padding: 8px 0;
}
.oradores-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 22px 28px;
}
.oradores-list li {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 0 0 18px 0;
}
.oradores-list li:nth-child(odd) { border-color: rgba(229,231,235,0.65); }
.oradores-list li .speaker-avatar {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-avatar-border);
    color: var(--color-avatar-text);
    font-weight: 800;
}
.oradores-list .prog-speaker-name {
    display: block;
}
.oradores-list .prog-speaker-role {
    color: var(--color-gray-500) !important; /* keep original role color */
    display: block;
    margin-top: 2px;
}

/* Ensure name over role for generic .bio blocks used in program markup */
.bio { display: block; }
.bio .nome { display: block; margin: 0; font-weight: 700; }
.bio .cargo { display: block; margin: 2px 0 0; color: var(--muted); font-size: .95rem; }

/* Moderacao block single row look */
.prog-speaker.mod { /* add class on the moderator item if needed */
    border-bottom: 1px dashed var(--stroke);
    padding-bottom: 18px;
}

/* Small screens: remove grids and center */
@media (max-width: 700px) {
    .oradores-list {
        display: block;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .oradores-list li {
        display: block;
        text-align: left;
        margin: 0;
        padding: 10px 0;
    }
}

/* Center program titles on mobile and tablet */
@media (max-width: 1024px) {
    .program-section .prog-title {
        text-align: center;
    }
    .prog-speaker-group {
        margin-left: 0px;
    }
    .program-section .prog-speaker .speaker-avatar {
        margin-top: -16px;
    }
}

/* Desktop styles for 1025px and larger */
@media screen and (min-width: 1025px) {
    body {
        margin: 0;
        text-align: left;
    }
    .container {
        padding: 20px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin: 100px auto 100px auto;
        max-width: var(--container-max);
        text-align: left;
    }
    .terms-container {
        max-height: 300px;
        text-align: left;
        margin-bottom: 20px;
        padding: 10px;
    }
    button {
        padding: 10px 15px;
        width: auto;
        margin: 20px 0 0 0;
        display: inline-block;
    }
    .header-image-container, footer .footer-flex {
        /* display: flex; */
        text-align: center;
        margin: 0;
        padding: 0;
    }
    footer .footer-flex {
        justify-content: space-between;
        align-items: center;
        align-items: center;
    max-width: 980px;
    margin: 0 auto;
    }
    footer .footer-flex img {
        max-height: 120px;
        height: auto;
        width: auto;
        margin: 0;
    }
    .form-group {
        text-align: left;
        margin-bottom: 15px;
        padding: 0;
    }
    .form-group label {
        text-align: left;
        margin-bottom: 5px;
    }
    .checkbox-group {
        display: flex;
        align-items: start;
        text-align: left;
        margin-bottom: 10px;
        padding: 0;
    }
    .checkbox-group input[type="checkbox"] {
        margin-top: 5px;
        margin-right: 10px;
    }
    
    /* Program section desktop styles */
    .prog-item {
        display: block;
        text-align: left;
        margin-bottom: 30px;
        padding: 0;
    }
    .prog-marker {
        position: static;
        margin: 0 0 6px 0;
        padding: 0;
    }
    .prog-content {
        float: none;
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .timeline-left .parallel-session,
    .timeline-right .parallel-session {
        border-left: 3px solid var(--color-accent-2);
        padding-left: 15px;
        margin: 0;
        text-align: left;
    }
    .timeline-left .parallel-session {
        border-left: none;
        border-right: 3px solid var(--color-accent-2);
        padding-left: 0;
        padding-right: 15px;
    }
    
    /* Speaker lists desktop styles */
    .oradores-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 22px 28px;
        text-align: left;
        margin: 8px 0 0 0;
        padding: 0;
    }
    .oradores-list li {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 0 0 18px 0;
        text-align: left;
    }
    
    /* Save the Date desktop styles */
    .save-the-date-section {
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .std-grid-adv {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0;
        width: 100%;
        max-width: 900px;
        min-width: 280px;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 2px 16px rgba(0,0,0,0.10);
        background: var(--color-surface);
        position: relative;
        margin: 0 auto;
    }
    .std-adv-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface);
        width: 100%;
        height: 100%;
        padding: 0;
        min-height: 120px;
    }
    .std-adv-red { 
        background: var(--color-accent); 
        border-top-left-radius: 18px; 
        border-bottom-left-radius: 18px; 
    }
    .std-adv-green { 
        background: var(--color-green-brand); 
    }
    .std-adv-blue { 
        background: var(--color-accent); 
        border-top-right-radius: 18px; 
        border-bottom-right-radius: 18px; 
    }
    .std-adv-save { 
        background: var(--color-surface); 
    }
    .std-adv-sinc { 
        background: var(--color-surface); 
    }
    
    .prog-title { 
        text-align: left; 
        margin: 0 0 10px 0;
    }
    
    .prog-speaker-group {
        margin-left: 80px;
    }
}

/* === 12. SEÇÃO DO VÍDEO === */
.video-section {
    background: var(--color-bg);
    padding: 60px 20px;
    text-align: center;
}

.video-container {
    max-width: 1000px;
    margin: 0 auto;
}

.video-container h2 {
    color: var(--color-white);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 40px;
    text-align: center;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive styles for video */
@media (max-width: 768px) {
    .video-section {
        padding: 40px 15px;
    }
    
    .video-container h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .video-section {
        padding: 30px 10px;
    }
    
    .video-container h2 {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }
}

/* === 13. GALERIA E CARROSSEL === */
.gallery-section {
    background: var(--color-bg);
    padding: 60px 20px;
    text-align: center;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-container h2 {
    color: var(--color-white);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 40px;
    text-align: center;
}

.carousel-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto 20px auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 0;
}

.carousel-dots .carousel-dot {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3) !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7 !important;
}

.carousel-dots .carousel-dot.active {
    background: #ffffff !important;
    opacity: 1 !important;
    transform: scaleY(1.5);
}

.carousel-dots .carousel-dot:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.9 !important;
    transform: scaleY(1.2);
}

.carousel-dot {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3) !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7 !important;
}

.carousel-dot.active {
    background: #ffffff !important;
    opacity: 1 !important;
    transform: scaleY(1.5);
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.9 !important;
    transform: scaleY(1.2);
}

.gallery-cta {
    text-align: center;
    margin-top: 40px;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.cta-button:hover {
    background: #c4122a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.cta-button:active {
    transform: translateY(0);
}

/* Responsive styles for carousel */
@media (max-width: 768px) {
    .gallery-container h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .carousel-container {
        max-width: 100%;
        margin: 0 auto 30px auto;
    }
    
    .carousel-wrapper {
        height: 300px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .carousel-prev {
        left: 10px;
    }
    
    .carousel-next {
        right: 10px;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-section {
        padding: 40px 15px;
    }
    
    .gallery-container h2 {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }
    
    .carousel-wrapper {
        height: 250px;
    }
    
    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    
    .carousel-prev {
        left: 5px;
    }
    
    .carousel-next {
        right: 5px;
    }
}

/* === 13. LIGHTBOX === */
.lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.lightbox[style*="display: block"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    margin: 0;
    display: block;
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: lightboxZoom 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lightbox-close:hover {
    color: #ff6b6b;
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

@keyframes lightboxZoom {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive lightbox sizing */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 85%;
        max-height: 85%;
    }
}

@media (max-width: 480px) {
    .lightbox-content {
        max-width: 90%;
        max-height: 90%;
    }
}

/* === 14. PÁGINA DE FOTOGRAFIAS === */
.photographs-section {
    background: var(--color-bg);
    padding: 60px 20px;
    min-height: 100vh;
}

.photographs-container {
    max-width: 1400px;
    margin: 0 auto;
}

.photographs-container h1 {
    color: var(--color-white);
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-align: center;
}

.photographs-subtitle {
    color: var(--color-gray-250);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 50px;
    font-style: italic;
}

.photographs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.photo-item {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.photo-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.photo-item img {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.photo-item img:hover {
    transform: scale(1.02);
}

.photo-caption {
    padding: 20px;
    color: var(--color-bg);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    margin: 0;
    background: var(--color-surface);
}

.back-to-home {
    text-align: center;
    margin-top: 40px;
}

.back-button {
    display: inline-block;
    padding: 15px 30px;
    background: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.back-button:hover {
    background: #c4122a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.back-button:active {
    transform: translateY(0);
}

/* Responsive styles for photographs page */
@media (max-width: 768px) {
    .photographs-container h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .photographs-subtitle {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    
    .photographs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .photo-caption {
        padding: 15px;
        font-size: 1rem;
    }
    
    .back-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .photographs-section {
        padding: 40px 15px;
    }
    
    .photographs-container h1 {
        font-size: 2rem;
    }
    
    .photographs-subtitle {
        font-size: 0.9rem;
        margin-bottom: 30px;
    }
    
    .photographs-grid {
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .photo-caption {
        padding: 12px;
        font-size: 0.9rem;
    }
}