/* ═══════════════════════════════════════════════════════════
   HERO SLIDER — Clean & Photo
   COMSAF
═══════════════════════════════════════════════════════════ */

/* ── Seção Hero ── */
.hero-section {
    position: relative;
    width: 100%;
    margin: 0;
    height: 100vh;
    min-height: 560px;
    max-height: 860px;
    overflow: hidden;
}

/* ── Slider Container ── */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Slide Base ── */
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide.prev-slide {
    opacity: 0;
    z-index: 1;
}

/* ── Foto de Fundo ── */
.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    transition: transform 8s ease-out;
    will-change: transform;
}

.slide.active .slide-bg {
    transform: scale(1);
}

/* Slide 1 — Paisagem fluvial / natureza */
.slide-bg-1 {
    background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=1600&q=85&auto=format&fit=crop');
}

/* Slide 2 — Vista aérea municipal */
.slide-bg-2 {
    background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1600&q=85&auto=format&fit=crop');
}

/* Slide 3 — Campo / agronegócio / paisagem rural */
.slide-bg-3 {
    background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1600&q=85&auto=format&fit=crop');
}

/* ── Overlay clean — escurece sem poluir ── */
.slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.52) 60%,
            rgba(0, 0, 0, 0.72) 100%
        );
    z-index: 1;
}

/* ── Conteúdo do Slide ── */
.slide-content {
    position: relative;
    z-index: 3;
    width: 100%;
    /* Cabeçalho já ocupa a sua faixa no fluxo do documento; não repetir offset aqui. */
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.slide-content .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-text {
    max-width: 680px;
    text-align: center;
}

/* ── Tag / Badge ── */
.slide-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s;
}

.slide.active .slide-tag {
    opacity: 1;
    transform: translateY(0);
}

/* ── Título ── */
.slide-title {
    font-size: clamp(1.65rem, 3vw, 2.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--white);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease 0.35s, transform 0.65s ease 0.35s;
}

.slide.active .slide-title {
    opacity: 1;
    transform: translateY(0);
}

.slide-title strong {
    color: var(--green-300);
    font-weight: var(--fw-extrabold);
}

/* Linha decorativa sob o strong */
.slide-title strong::after {
    content: '';
    display: block;
    height: 2px;
    width: 48px;
    background: var(--green-400);
    margin: 4px auto 0;
    border-radius: var(--radius-full);
    opacity: 0.7;
}

/* ── Descrição ── */
.slide-desc {
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
    margin-bottom: var(--space-8);
    max-width: 540px;
    margin-inline: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease 0.5s, transform 0.65s ease 0.5s;
}

.slide.active .slide-desc {
    opacity: 1;
    transform: translateY(0);
}

/* ── Botões do Slide ── */
.slide-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease 0.65s, transform 0.55s ease 0.65s;
}

.slide.active .slide-actions {
    opacity: 1;
    transform: translateY(0);
}

/* Botão primário */
.btn-primary-hero {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 28px;
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--green-700);
    color: var(--white);
    border: 2px solid var(--green-700);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary-hero:hover {
    background: var(--green-600);
    border-color: var(--green-600);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* Botão secundário */
.btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 24px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.btn-secondary-hero:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
}

/* ── Setas ── */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.slider-arrow:hover {
    background: var(--green-700);
    border-color: var(--green-700);
    transform: translateY(-50%) scale(1.06);
}

.slider-prev { left: var(--space-6); }
.slider-next { right: var(--space-6); }

/* ── Dots ── */
.slider-dots {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.65);
    width: 20px;
}

.dot.active {
    background: var(--white);
    width: 28px;
}

/* ── Scroll indicator ── */
.scroll-down-hint {
    position: absolute;
    bottom: var(--space-8);
    right: var(--space-10);
    z-index: 10;
}

.scroll-mouse-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color 0.25s ease;
}

.scroll-mouse-link:hover { color: rgba(255, 255, 255, 0.85); }

.scroll-mouse {
    width: 22px;
    height: 34px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 11px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-wheel {
    width: 3px;
    height: 7px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-full);
    animation: scrollWheel 1.8s ease infinite;
}

@keyframes scrollWheel {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
}