/**
 * Asta Mobili — HERO PRINCIPAL da Home.
 *
 * Etapa 1: reprodução visual fiel do mockup aprovado (backups/mockup/rv07).
 * Todos os valores (cores, tipografia, espaçamentos, gradiente, proporções)
 * vêm do HTML do mockup. As unidades `cqw` do mockup foram convertidas para
 * `vw` — o Hero ocupa 100% da largura da viewport — seguindo a mesma
 * convenção adotada no componente do header (asta-header.css).
 *
 * O layout é 100% fluido (clamp + vw), exatamente como no mockup: não há
 * breakpoints discretos no Hero; os três estados de referência
 * (mobile 390 / tablet 834 / desktop 1440) são resultado das funções clamp().
 */

.asta-hero,
.asta-hero *,
.asta-hero *::before,
.asta-hero *::after { box-sizing:border-box; }

/* Seção full-bleed: quebra o container de conteúdo (Elementor/tema) para
   ocupar a largura total da viewport, como no mockup. */
.asta-hero {
	position:relative;
	display:flex;
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	min-height:clamp(460px, 44vw, 620px);
	overflow:hidden;
	background:#0e0d0c;
	font-family:Inter, Helvetica, Arial, sans-serif;
}

/* ---- Camada de imagem ----
   O contêiner (.asta-hero__media) é absoluto e cobre toda a altura real da
   seção (inset:0 sobre .asta-hero, que cresce com o conteúdo).

   A imagem precisa preencher esse contêiner por inteiro. O reset do tema
   (hello-elementor `img{height:auto}`) e, sobretudo, o `.elementor img
   {height:auto}` (especificidade 0,0,1,1) sobrepunham um `height:100%` de
   classe simples — no mobile a imagem horizontal ficava com altura
   automática (~metade da seção) e sobrava faixa escura embaixo.
   Por isso o dimensionamento/encaixe é fixado aqui com !important, e a
   imagem é posicionada absoluta em inset:0 para garantir a caixa cheia
   independente de regras externas. object-fit:cover faz o recorte. */
.asta-hero__media { position:absolute; inset:0; z-index:0; overflow:hidden; }
.asta-hero__image {
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	min-height:100%;
	margin:0;
	max-width:none !important;
	object-fit:cover !important;
	object-position:center !important;
}

/* ---- Overlay / gradiente ---- */
.asta-hero__overlay {
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(90deg,
		rgba(14,13,12,.86) 0%,
		rgba(14,13,12,.62) 42%,
		rgba(14,13,12,.18) 100%);
	pointer-events:none;
}

/* ---- Conteúdo ---- */
.asta-hero__content {
	position:relative;
	z-index:2;
	flex:1 1 auto;
	display:flex;
	align-items:flex-end;
	padding:clamp(28px, 4vw, 72px) clamp(20px, 4vw, 64px) clamp(34px, 4.5vw, 80px);
}
.asta-hero__inner {
	width:100%;
	max-width:1180px;
	margin:0 auto;
}
.asta-hero__col {
	display:flex;
	flex-direction:column;
	gap:clamp(16px, 1.8vw, 26px);
	max-width:680px;
}

.asta-hero__eyebrow {
	margin:0 !important;
	padding:0;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:10px !important;
	font-weight:400 !important;
	letter-spacing:.18em !important;
	line-height:1.2 !important;
	text-transform:uppercase;
	color:#d9a9ac !important;
}
.asta-hero__title {
	margin:0 !important;
	padding:0;
	font-family:Manrope, Helvetica, Arial, sans-serif !important;
	font-weight:600 !important;
	font-size:clamp(32px, 5.6vw, 66px) !important;
	line-height:1.02 !important;
	letter-spacing:-.035em !important;
	color:#fff !important;
	text-wrap:pretty;
}
.asta-hero__text {
	margin:0 !important;
	padding:0;
	max-width:440px;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:clamp(14px, 1.4vw, 18px) !important;
	font-weight:400 !important;
	line-height:1.55 !important;
	color:rgba(255,255,255,.82) !important;
}

/* ---- Botões / ações ---- */
.asta-hero__actions {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:6px;
}
.asta-hero__btn {
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin:0;
	padding:15px 24px;
	font-family:Inter, Helvetica, Arial, sans-serif !important;
	font-size:13.5px !important;
	font-weight:400 !important;
	letter-spacing:.03em;
	line-height:1.2 !important;
	white-space:nowrap;
	text-decoration:none;
	text-shadow:none;
	cursor:pointer;
}
.asta-hero a { text-decoration:none; }

/* Primário: preenchido vermelho Asta, cantos arredondados 8px (conforme mockup). */
.asta-hero__btn--primary {
	border:0;
	border-radius:8px;
	background:#a01c24;
	color:#fff !important;
	transition:background .18s ease;
}
.asta-hero__btn--primary:hover,
.asta-hero__btn--primary:focus-visible {
	background:#7e1319;
	color:#fff !important;
}

/* Secundário: contorno claro, SEM border-radius (conforme mockup). */
.asta-hero__btn--ghost {
	border:1px solid rgba(255,255,255,.45);
	border-radius:0;
	background:transparent;
	color:#fff !important;
	transition:border-color .18s ease;
}
.asta-hero__btn--ghost:hover,
.asta-hero__btn--ghost:focus-visible {
	border-color:#fff;
	color:#fff !important;
}

.asta-hero :focus-visible {
	outline:2px solid #fff;
	outline-offset:3px;
}

/* =====================================================================
 * SLIDER — múltiplos slides
 * Cada slide reusa exatamente o template acima (mídia + overlay + conteúdo).
 * O banner estático (1 slide / slider desligado) não recebe nenhuma destas
 * regras: o markup histórico continua idêntico.
 * ===================================================================== */

/* Vídeo de fundo: mesmo encaixe da imagem (cobre a seção inteira). */
.asta-hero__video {
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	height:100% !important;
	min-height:100%;
	margin:0;
	max-width:none !important;
	border:0;
	object-fit:cover !important;
	object-position:center !important;
	pointer-events:none;
}

/* Camadas de mídia desktop / mobile (troca por breakpoint). */
.asta-hero__media-layer { position:absolute; inset:0; }
.asta-hero__media--responsive .asta-hero__media-layer--mobile { display:none; }
@media (max-width:767px) {
	.asta-hero__media--responsive .asta-hero__media-layer--desktop { display:none; }
	.asta-hero__media--responsive .asta-hero__media-layer--mobile { display:block; }
}

/* Trilho de slides — sempre absoluto: a seção mantém a altura fixa
   clamp(460px,44vw,620px) e a troca de slide não altera altura. */
.asta-hero--slider .asta-hero__slides { position:absolute; inset:0; z-index:1; }
.asta-hero--slider .asta-hero__slide {
	display:flex;
	min-width:0;
}
.asta-hero--slider .asta-hero__slide .asta-hero__content { z-index:2; }

/* Transição FADE — crossfade, sem mudança de altura, sem flash. */
.asta-hero--fade .asta-hero__slide {
	position:absolute;
	inset:0;
	opacity:0;
	pointer-events:none;
	transition:opacity var(--asta-hero-td, .6s) ease;
}
.asta-hero--fade .asta-hero__slide.is-active {
	opacity:1;
	pointer-events:auto;
	z-index:3;
}

/* Transição SLIDE — deslize horizontal; overflow contido pela seção. */
.asta-hero--slide .asta-hero__slides {
	display:flex;
	flex-wrap:nowrap;
	transition:transform var(--asta-hero-td, .6s) ease;
	will-change:transform;
}
.asta-hero--slide .asta-hero__slide {
	position:relative;
	flex:0 0 100%;
	width:100%;
	height:100%;
}

/* Indicadores / bolinhas — centralizados na base, discretos. */
.asta-hero--has-dots .asta-hero__content {
	padding-bottom:calc(clamp(34px, 4.5vw, 80px) + 26px);
}
.asta-hero__dots {
	position:absolute;
	z-index:6;
	left:50%;
	bottom:clamp(14px, 2vw, 24px);
	transform:translateX(-50%);
	display:flex;
	gap:9px;
	margin:0;
	padding:0;
}
/* Cor dos indicadores = identidade Asta. As regras abaixo neutralizam
   explicitamente o que o Hello Elementor / Elementor aplicam a <button>
   (hover/focus/borda em magenta, box-shadow, outline). Tamanho, posição,
   formato e comportamento permanecem os mesmos. */
.asta-hero .asta-hero__dot {
	appearance:none;
	-webkit-appearance:none;
	box-sizing:border-box;
	width:9px;
	height:9px;
	min-width:0;
	min-height:0;
	margin:0;
	padding:0;
	border:1px solid rgba(255,255,255,.65) !important;
	border-radius:50% !important;
	background:transparent !important;
	box-shadow:none !important;
	color:#a01c24 !important;
	text-shadow:none;
	cursor:pointer;
	outline:none;
	transition:background .18s ease, border-color .18s ease;
}
.asta-hero .asta-hero__dot::-moz-focus-inner { border:0; padding:0; }

.asta-hero .asta-hero__dot:hover,
.asta-hero .asta-hero__dot:focus,
.asta-hero .asta-hero__dot:active {
	border-color:#a01c24 !important;
	background:#a01c24 !important;
	box-shadow:none !important;
	color:#a01c24 !important;
}

.asta-hero .asta-hero__dot.is-active,
.asta-hero .asta-hero__dot[aria-current="true"] {
	background:#fff !important;
	border-color:#fff !important;
}
.asta-hero .asta-hero__dot.is-active:hover,
.asta-hero .asta-hero__dot.is-active:focus,
.asta-hero .asta-hero__dot[aria-current="true"]:hover,
.asta-hero .asta-hero__dot[aria-current="true"]:focus {
	background:#7e1319 !important;
	border-color:#7e1319 !important;
}

.asta-hero .asta-hero__dot:focus-visible {
	outline:2px solid #fff !important;
	outline-offset:3px;
}

@media (prefers-reduced-motion: reduce) {
	.asta-hero__btn { transition:none; }
	.asta-hero .asta-hero__dot { transition:none; }
	.asta-hero--fade .asta-hero__slide,
	.asta-hero--slide .asta-hero__slides { transition-duration:0s !important; }
}