/* ==========================================================================
   RANERI — Hero
   --------------------------------------------------------------------------
   Camadas de cada banner (de baixo para cima):
     1. .hero__media      fotografia (ou gradiente escuro de fallback)
        └ .hero__technical  grade / diagrama unifilar: nítido sem foto,
                            extremamente sutil sobre fotografia
     2. .hero__scrim      escurecimento uniforme
     3. .hero__gradient   gradiente direcional (preset de overlay)
     4. .hero__vignette   vinheta nas bordas
     5. .hero__inner      conteúdo HTML (área segura)
     6. .hero__controls   controles do slider (compartilhados)

   Personalização por banner (custom properties no .hero__slide), todas
   opcionais — sem valor, valem os padrões do design system:
     --hero-focal-desktop / --hero-focal-mobile        ponto focal (object-position)
     --hero-overlay-intensity  0–1                     intensidade do gradiente
     --hero-scrim              0–1                     escurecimento uniforme
     --hero-vignette           0–1                     intensidade da vinheta
     --hero-technical          0–1                     camada técnica (vazio = automático)
     --hero-{eyebrow|title|description}-size-{desktop|mobile}
     --hero-{eyebrow|title|description}-color | -weight | -line-height |
       -letter-spacing | -max-width
     --hero-pos-{x|y}-{desktop|mobile}                 posição "custom" (%)

   Mobile-first: < 48em usa os valores "mobile"; ≥ 48em (responsive.css)
   usa os valores "desktop".
   ========================================================================== */

.hero {
    --hero-controls-height: 4.5rem;
    --hero-safe-top: calc(var(--header-height) + clamp(1.5rem, 4vh, 4rem));
    --hero-safe-bottom: calc(var(--hero-controls-height) + clamp(1rem, 3vh, 2.5rem));

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-bg-deep);
    color: var(--color-white);
}

.hero__slides {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
}

/* Sem JavaScript: o banner de <noscript> ocupa a célula da grade */
@media (scripting: none) {
    .hero__slides > noscript {
        display: contents;
    }
}

/* Todos os banners ocupam a mesma célula da grade: a altura do hero é a do
   banner mais alto (nunca corta conteúdo em telas baixas). */
.hero__slide {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--hero-transition, 1200ms) var(--ease-standard),
        visibility 0s linear var(--hero-transition, 1200ms);
}

/* Banner visível: entra por cima com fade */
.hero__slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--hero-transition, 1200ms) var(--ease-standard),
        visibility 0s linear 0s;
}

/* Banner que sai: permanece opaco por baixo até o novo cobrir por inteiro */
.hero__slide.is-leaving {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: none;
}

/* --------------------------------------------------------------------------
   1. Fotografia
   -------------------------------------------------------------------------- */
.hero__media,
.hero__scrim,
.hero__gradient,
.hero__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__media {
    z-index: 0;
    overflow: hidden;
    transform: scale(var(--hero-zoom, 1.06));
    transform-origin: 60% 50%;
    background-color: var(--color-bg-deep);
    /* Fallback sem fotografia: gradiente escuro RANERI com brilho vermelho
       discreto (fica por baixo da foto quando ela existe) */
    background-image:
        radial-gradient(90% 70% at 78% 42%, rgba(165, 25, 22, 0.12) 0%, rgba(165, 25, 22, 0) 60%),
        linear-gradient(118deg, #090909 0%, #121212 48%, #1b1b1b 100%);
    background-repeat: no-repeat;
}

/* Camada técnica (dentro de .hero__media: acompanha o zoom da imagem).
   Grade isométrica de 30° abaixo de 75em; diagrama unifilar a partir de 75em
   (responsive.css). Intensidade automática: 1 sem fotografia; sutil sobre
   fotografia. --hero-technical (0–1) substitui o automático. */
.hero__technical {
    position: absolute;
    inset: 0;
    background-image: url("../img/texturas/grade-isometrica-escura.svg");
    background-size: 55.4256px 32px;
    opacity: var(--hero-technical, 1);
    pointer-events: none;
}

.hero__slide--photo .hero__technical {
    opacity: var(--hero-technical, var(--hero-technical-photo, 0.4));
    mix-blend-mode: screen;
}

.hero__picture,
.hero__image {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__image {
    object-fit: cover;
    object-position: var(--hero-focal-mobile, var(--hero-focal-desktop, 50% 50%));
}

/* --------------------------------------------------------------------------
   2–4. Overlay (presets via data-overlay no .hero__slide)
   Cada preset define o gradiente mobile (--_gradient-mobile) e desktop
   (--_gradient-desktop); a troca acontece em responsive.css.
   -------------------------------------------------------------------------- */
.hero__scrim {
    z-index: 1;
    background-color: #000;
    opacity: var(--hero-scrim, var(--_scrim, 0.15));
}

.hero__gradient {
    z-index: 2;
    background: var(--_gradient-mobile, none);
    opacity: var(--hero-overlay-intensity, 1);
}

.hero__vignette {
    z-index: 3;
    background: radial-gradient(ellipse 115% 95% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.6) 100%);
    opacity: var(--hero-vignette, var(--_vignette, 0.9));
}

/* Base comum: escurece topo (header) e base (controles) */
.hero__slide {
    --_shade-top: linear-gradient(180deg, rgba(8, 8, 8, 0.45) 0%, rgba(8, 8, 8, 0) 26%);
    --_shade-bottom: linear-gradient(0deg, rgba(8, 8, 8, 0.8) 0%, rgba(8, 8, 8, 0) 34%);
}

/* cinematic-left: forte à esquerda, suaviza para a direita */
[data-overlay="cinematic-left"] {
    --_gradient-desktop:
        var(--_shade-top),
        var(--_shade-bottom),
        linear-gradient(90deg,
            rgba(8, 8, 8, 0.94) 0%,
            rgba(8, 8, 8, 0.84) 22%,
            rgba(8, 8, 8, 0.58) 44%,
            rgba(8, 8, 8, 0.22) 68%,
            rgba(8, 8, 8, 0.06) 100%);
    --_gradient-mobile:
        var(--_shade-top),
        linear-gradient(0deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.35) 55%, rgba(8, 8, 8, 0) 80%),
        linear-gradient(90deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.55) 60%, rgba(8, 8, 8, 0.35) 100%);
}

/* cinematic-right: espelho do anterior */
[data-overlay="cinematic-right"] {
    --_gradient-desktop:
        var(--_shade-top),
        var(--_shade-bottom),
        linear-gradient(270deg,
            rgba(8, 8, 8, 0.94) 0%,
            rgba(8, 8, 8, 0.84) 22%,
            rgba(8, 8, 8, 0.58) 44%,
            rgba(8, 8, 8, 0.22) 68%,
            rgba(8, 8, 8, 0.06) 100%);
    --_gradient-mobile:
        var(--_shade-top),
        linear-gradient(0deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.35) 55%, rgba(8, 8, 8, 0) 80%),
        linear-gradient(270deg, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.55) 60%, rgba(8, 8, 8, 0.35) 100%);
}

/* uniform: escurecimento homogêneo */
[data-overlay="uniform"] {
    --_scrim: 0.5;
    --_gradient-desktop: var(--_shade-top), var(--_shade-bottom);
    --_gradient-mobile: var(--_shade-top), var(--_shade-bottom);
}

/* soft-center: foco escuro no centro para texto centralizado */
[data-overlay="soft-center"] {
    --_gradient-desktop:
        var(--_shade-top),
        var(--_shade-bottom),
        radial-gradient(ellipse 62% 58% at 50% 50%, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.45) 55%, rgba(8, 8, 8, 0.2) 100%);
    --_gradient-mobile:
        var(--_shade-top),
        var(--_shade-bottom),
        radial-gradient(ellipse 95% 60% at 50% 50%, rgba(8, 8, 8, 0.82) 0%, rgba(8, 8, 8, 0.5) 60%, rgba(8, 8, 8, 0.3) 100%);
}

/* none: sem overlay */
[data-overlay="none"] {
    --_scrim: 0;
    --_vignette: 0;
    --_gradient-desktop: none;
    --_gradient-mobile: none;
}

/* --------------------------------------------------------------------------
   Movimento da fotografia: aproximação lenta e contínua (zoom-out suave).
   O banner que sai mantém a mesma animação pausada — congela no quadro
   atual, sem salto visual.
   -------------------------------------------------------------------------- */
@keyframes hero-zoom {
    from {
        transform: scale(var(--hero-zoom, 1.06));
    }

    to {
        transform: scale(1);
    }
}

.hero__slide.is-active .hero__media,
.hero__slide.is-leaving .hero__media {
    animation: hero-zoom var(--hero-zoom-duration, 9s) cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.hero__slide.is-leaving .hero__media {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Entrada escalonada do conteúdo:
   eyebrow → título → descrição → botões → destaques
   -------------------------------------------------------------------------- */
.hero__eyebrow     { --_step: 0; }
.hero__title       { --_step: 1; }
.hero__description { --_step: 2; }
.hero__actions     { --_step: 3; }
.hero__highlights  { --_step: 4; }

.hero__reveal {
    transition:
        opacity 700ms var(--ease-out),
        transform 1000ms var(--ease-out-expo);
    transition-delay: calc(var(--hero-reveal-delay, 380ms) + var(--_step, 0) * 90ms);
}

.hero__slide:not(.is-active) .hero__reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition-duration: 300ms;
    transition-delay: 0s;
}

.hero__slide.is-leaving .hero__reveal {
    transform: translateY(-0.5rem);
}

/* --------------------------------------------------------------------------
   5. Conteúdo — área segura e sistema de posições
   -------------------------------------------------------------------------- */
.hero__inner {
    position: relative;
    z-index: var(--z-hero-content);
    display: grid;
    padding-top: var(--hero-safe-top);
    padding-bottom: var(--hero-safe-bottom);
}

/* O palco é exatamente a área segura: posições (inclusive "custom") são
   calculadas dentro dele. */
.hero__stage {
    position: relative;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: minmax(0, 1fr);
}

.hero__content,
.hero__highlights {
    grid-area: 1 / 1;
    align-self: var(--_align, center);
    justify-self: var(--_justify, start);
    text-align: var(--_text, left);
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: var(--_items, flex-start);
    width: 100%;
    max-width: var(--hero-content-max, 100%);
}

/* Posições (mobile). As mesmas posições para desktop ficam em responsive.css
   com o atributo data-pos-desktop. */
.hero__stage > [data-pos-mobile="top-left"]      { --_align: start;  --_justify: start;  --_text: left;   --_items: flex-start; }
.hero__stage > [data-pos-mobile="top-center"]    { --_align: start;  --_justify: center; --_text: center; --_items: center; }
.hero__stage > [data-pos-mobile="top-right"]     { --_align: start;  --_justify: end;    --_text: right;  --_items: flex-end; }
.hero__stage > [data-pos-mobile="center-left"]   { --_align: center; --_justify: start;  --_text: left;   --_items: flex-start; }
.hero__stage > [data-pos-mobile="center"]        { --_align: center; --_justify: center; --_text: center; --_items: center; }
.hero__stage > [data-pos-mobile="center-right"]  { --_align: center; --_justify: end;    --_text: right;  --_items: flex-end; }
.hero__stage > [data-pos-mobile="bottom-left"]   { --_align: end;    --_justify: start;  --_text: left;   --_items: flex-start; }
.hero__stage > [data-pos-mobile="bottom-center"] { --_align: end;    --_justify: center; --_text: center; --_items: center; }
.hero__stage > [data-pos-mobile="bottom-right"]  { --_align: end;    --_justify: end;    --_text: right;  --_items: flex-end; }

.hero__stage > [data-pos-mobile="hidden"] {
    display: none;
}

/* custom: x/y em % da área segura; o ponto de ancoragem acompanha o valor
   (0% = borda esquerda/superior, 100% = borda direita/inferior) */
.hero__stage > [data-pos-mobile="custom"] {
    position: absolute;
    left: var(--hero-pos-x-mobile, 0%);
    top: var(--hero-pos-y-mobile, 50%);
    width: max-content;
    max-width: 100%;
    transform: translate(calc(var(--hero-pos-x-mobile, 0%) * -1), calc(var(--hero-pos-y-mobile, 50%) * -1));
}

/* Mobile: com destaques visíveis, conteúdo e destaques são empilhados (a
   largura é compartilhada, então não podem ocupar a mesma célula). Destaques
   "top-*" vêm antes do conteúdo; os demais, depois. A posição vertical do
   conteúdo alinha o conjunto; a horizontal de cada bloco é respeitada.
   (Regra exclusiva de < 48em: no desktop os blocos ocupam lados opostos.) */
@media (max-width: 47.99em) {
    .hero__stage:has(> .hero__highlights:not([data-pos-mobile="hidden"], [data-pos-mobile="custom"])) {
        grid-template-rows: none;
        align-content: center;
        row-gap: clamp(1.75rem, 5vh, 2.5rem);
    }

    .hero__stage:has(> .hero__content[data-pos-mobile^="top"]) {
        align-content: start;
    }

    .hero__stage:has(> .hero__content[data-pos-mobile^="bottom"]) {
        align-content: end;
    }

    .hero__stage:has(> .hero__highlights:not([data-pos-mobile="hidden"], [data-pos-mobile="custom"])) > .hero__content:not([data-pos-mobile="custom"]),
    .hero__stage > .hero__highlights:not([data-pos-mobile="hidden"], [data-pos-mobile="custom"]) {
        grid-area: auto;
        align-self: auto;
    }

    .hero__stage > .hero__highlights[data-pos-mobile^="top"] {
        order: -1;
    }
}

/* Alinhamento individual de um texto (data-align), sobrepondo o da posição */
.hero__content [data-align="left"]   { align-self: flex-start; text-align: left; }
.hero__content [data-align="center"] { align-self: center;     text-align: center; }
.hero__content [data-align="right"]  { align-self: flex-end;   text-align: right; }

/* --------------------------------------------------------------------------
   Tipo 1 — Eyebrow
   -------------------------------------------------------------------------- */
.hero__eyebrow {
    max-width: 100%;
    font-size: var(--hero-eyebrow-size-mobile, 0.6875rem);
    font-weight: var(--hero-eyebrow-weight, var(--fw-semibold));
    line-height: var(--hero-eyebrow-line-height, 1.4);
    letter-spacing: var(--hero-eyebrow-letter-spacing, 0.22em);
    color: var(--hero-eyebrow-color, var(--color-gray-200));
}

.hero__eyebrow--plain {
    text-transform: none;
}

/* Centralizado/à direita: o fio vermelho acompanha o alinhamento */
[data-pos-mobile$="-right"] .hero__eyebrow,
.hero__eyebrow[data-align="right"] {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   Tipo 2 — Título (h1 no primeiro banner, h2 nos demais)
   -------------------------------------------------------------------------- */
.hero__title {
    max-width: var(--hero-title-max-width, 15em);
    margin-top: clamp(1.125rem, 0.8rem + 1.2vw, 1.75rem);
    font-family: var(--font-display);
    font-size: var(--hero-title-size-mobile, clamp(2.25rem, 1.35rem + 3.8vw, 3.25rem));
    font-weight: var(--hero-title-weight, var(--fw-semibold));
    line-height: var(--hero-title-line-height, 1.04);
    letter-spacing: var(--hero-title-letter-spacing, -0.03em);
    color: var(--hero-title-color, var(--color-white));
    text-wrap: balance;
}

/* Quebras controladas (\n): "always" (padrão) · "desktop" · "never" */
.hero__title[data-breaks="desktop"] br,
.hero__title[data-breaks="never"] br {
    display: none;
}

/* --------------------------------------------------------------------------
   Tipo 3 — Descrição
   -------------------------------------------------------------------------- */
.hero__description {
    max-width: var(--hero-description-max-width, 34rem);
    margin-top: clamp(1.125rem, 0.8rem + 1vw, 1.625rem);
    font-size: var(--hero-description-size-mobile, clamp(1rem, 0.95rem + 0.3vw, 1.125rem));
    font-weight: var(--hero-description-weight, var(--fw-regular));
    line-height: var(--hero-description-line-height, 1.6);
    letter-spacing: var(--hero-description-letter-spacing, 0);
    color: var(--hero-description-color, var(--color-gray-200));
}

/* --------------------------------------------------------------------------
   Botões (0 a 3) — mobile: empilhados, largura útil
   -------------------------------------------------------------------------- */
.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    width: 100%;
    max-width: 24rem;
    margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}

.hero__actions .btn--text {
    align-self: var(--_items, flex-start);
}

/* --------------------------------------------------------------------------
   Tipo 4 — Destaques laterais
   -------------------------------------------------------------------------- */
.hero__highlights {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.2vh, 1.5rem);
    padding: 0.375rem 0 0.375rem 1.5rem;
    border-left: var(--border-accent) solid var(--hero-highlights-accent, var(--color-primary));
}

/* Sombreamento local: mantém a leitura sobre áreas claras da fotografia
   sem escurecer o restante da imagem */
.hero__highlights::before {
    content: "";
    position: absolute;
    inset: -45% -35% -45% -30%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(8, 8, 8, 0.62), rgba(8, 8, 8, 0));
    pointer-events: none;
}

.hero__highlight {
    font-size: var(--hero-highlights-size, 0.75rem);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hero-highlights-color, rgba(255, 255, 255, 0.9));
    text-align: left;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   6. Controles do slider (nunca dentro do header: base do hero)
   Mobile: contador + dots + pausar; setas a partir de 48em (responsive.css)
   -------------------------------------------------------------------------- */
.hero__slides {
    touch-action: pan-y;    /* swipe horizontal sem bloquear a rolagem vertical */
}

.hero__controls {
    position: absolute;
    inset: auto 0 0;
    z-index: var(--z-hero-controls);
    pointer-events: none;
}

.hero__controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    height: var(--hero-controls-height);
}

.hero__controls-inner > * {
    pointer-events: auto;
}

/* Contador + dots */
.hero__pager {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hero__counter {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.5);
}

.hero__counter-current {
    color: var(--color-white);
}

.hero__dots {
    display: flex;
    align-items: center;
}

.hero__dot {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: var(--control-size);
    padding: 0;
    border: 0;
    background: transparent;
}

.hero__dot-line {
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.32);
    transition:
        width var(--dur-slow) var(--ease-out-expo),
        background-color var(--dur-base) var(--ease-standard);
}

.hero__dot:hover .hero__dot-line {
    background-color: rgba(255, 255, 255, 0.7);
}

.hero__dot[aria-current="true"] {
    width: 3.25rem;
}

.hero__dot[aria-current="true"] .hero__dot-line {
    width: 2.25rem;
    background-color: var(--color-white);
}

/* Pausar / setas */
.hero__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.hero__arrow {
    display: inline-grid;
    place-items: center;
    width: var(--control-size);
    height: var(--control-size);
    padding: 0;
    border: var(--border-width) solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-sm);
    background-color: rgba(10, 10, 10, 0.2);
    color: var(--color-white);
    transition:
        border-color var(--dur-base) var(--ease-standard),
        background-color var(--dur-base) var(--ease-standard);
}

.hero__arrow svg {
    width: 1rem;
    height: 1rem;
}

.hero__arrow:hover {
    border-color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
}

.hero__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Setas: somente a partir de 48em (no mobile o swipe basta) */
.hero__arrow--prev,
.hero__arrow--next {
    display: none;
}

/* Botão pausar/retomar: sem borda, discreto */
.hero__toggle {
    border-color: transparent;
    background-color: transparent;
}

.hero__toggle svg {
    width: 0.875rem;
    height: 0.875rem;
}

.hero__icon-play,
.hero.is-paused .hero__icon-pause {
    display: none;
}

.hero.is-paused .hero__icon-play {
    display: block;
}

/* Barra de progresso: fio fino na base do hero */
.hero__progress {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.hero__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
}

.hero:not(.has-autoplay) .hero__progress,
.hero:not(.has-autoplay) .hero__toggle {
    display: none;
}