/* ============================================================
   HOME v3 — PORT LITERAL das classes Tailwind do src/app/pages/Home.tsx
   Cada regra abaixo é tradução 1:1 das classes Tailwind v4
   usadas no componente React original do Figma Make.
   Carregado depois de home.css.
   ============================================================ */


/* Inter + Spectral importadas via wp_enqueue_style em functions.php (mais rápido que @import) */


/* ============================================================
   1) HERO ROTATIVO
   <section className="relative w-full h-screen bg-black overflow-hidden flex flex-col pt-24">
   ============================================================ */

.v3-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	background: #000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-top: 6rem; /* pt-24 */
	margin-top: -6rem; /* compensa header fixo */
}

/* Camada de slides — IMG com filter grayscale + brightness escurecendo a foto */
.v3-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.v3-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.v3-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 400ms ease, visibility 0s linear 0s;
}
.v3-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Filtro LITERAL do Figma: grayscale 70% + brightness 0.4 */
	filter: grayscale(70%) brightness(0.4);
}

/* Overlay com conteúdo:
   <div className="relative z-10 flex-1 flex flex-col justify-end pb-16 max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
*/
.v3-hero__overlay-content {
	position: relative;
	z-index: 10;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 4rem; /* pb-16 = 64px */
	max-width: 1400px;
	margin-inline: auto;
	width: 100%;
	padding-inline: 1rem; /* px-4 */
	transition: opacity 500ms ease;
}
@media (min-width: 640px)  { .v3-hero__overlay-content { padding-inline: 1.5rem; } } /* sm:px-6 */
@media (min-width: 1024px) { .v3-hero__overlay-content { padding-inline: 2rem; } }   /* lg:px-8 */

.v3-hero__content-inner {
	position: relative;
	width: 100%;
}
.v3-hero__content {
	display: none;
}
.v3-hero__content.is-active {
	display: block;
}

/* Label:
   <p className="text-xs font-bold uppercase tracking-[0.2em] text-white/50 mb-5">
*/
.v3-hero__label {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;            /* text-xs */
	font-weight: 700;           /* font-bold */
	text-transform: uppercase;
	letter-spacing: 0.2em;      /* tracking-[0.2em] */
	color: rgba(255,255,255,0.5); /* text-white/50 */
	margin: 0 0 1.25rem 0;      /* mb-5 */
}

/* Título h1:
   <h1 className="text-[clamp(3.5rem,9vw,10rem)] font-[900] uppercase leading-[0.82] tracking-tighter text-white max-w-5xl mb-8">
   v3.9.49 — Revertido ao tamanho exato do Figma TSX (Livia pediu fidelidade total). */
.v3-hero__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(3.5rem, 9vw, 10rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 0.82;
	letter-spacing: -0.05em;          /* tracking-tighter */
	color: #fff;
	max-width: 64rem;                 /* max-w-5xl */
	margin: 0 0 2rem 0;               /* mb-8 */
}

/* Subtítulo:
   <p className="text-base md:text-lg text-white/55 font-medium max-w-lg mb-10 leading-relaxed">
*/
.v3-hero__subtitle {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;            /* text-base */
	font-weight: 500;           /* font-medium */
	line-height: 1.625;         /* leading-relaxed */
	color: rgba(255,255,255,0.55); /* text-white/55 */
	max-width: 32rem;           /* max-w-lg */
	margin: 0 0 2.5rem 0;       /* mb-10 */
}
@media (min-width: 768px) { .v3-hero__subtitle { font-size: 18px; } } /* md:text-lg */

/* CTA Link:
   <Link className="inline-flex items-center gap-3 text-sm font-bold uppercase tracking-widest border-b pb-1 text-white transition-all self-start"
         style={{ borderColor: slide.color }}>
*/
.v3-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;               /* gap-3 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 700;           /* font-bold */
	text-transform: uppercase;
	letter-spacing: 0.1em;      /* tracking-widest */
	color: #fff;
	background: transparent;
	border-bottom: 1px solid var(--slide-accent, #CA047A); /* borderColor inline */
	padding: 0 0 0.25rem 0;     /* pb-1 */
	text-decoration: none;
	align-self: flex-start;
	transition: color 200ms ease;
}
.v3-hero__cta:hover {
	color: var(--slide-accent, #CA047A);
	text-decoration: none;
}

/* Controles:
   <div className="relative z-10 flex items-center justify-between max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full pb-8">
*/
.v3-hero__controls {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin-inline: auto;
	width: 100%;
	padding-inline: 1rem;
	padding-bottom: 2rem;       /* pb-8 */
}
@media (min-width: 640px)  { .v3-hero__controls { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .v3-hero__controls { padding-inline: 2rem; } }

/* Dots — flex items-center gap-3 + cada <button> width 2rem (ativo)/0.5rem (inativo), height 2px */
.v3-hero__dots {
	display: flex;
	align-items: center;
	gap: 0.75rem;               /* gap-3 */
}
.v3-hero__dot {
	width: 0.5rem;
	height: 2px;
	background: rgba(255,255,255,0.3);
	border: 0;
	cursor: pointer;
	padding: 0;
	border-radius: 0;
	transition: width 300ms ease, background 300ms ease;
}
.v3-hero__dot.is-active {
	width: 2rem;
	background: var(--slide-accent-current, #CA047A);
}

/* Setas — w-10 h-10 border border-white/30 */
.v3-hero__arrows {
	display: flex;
	align-items: center;
	gap: 0.75rem;               /* gap-3 */
}
.v3-hero__arrow {
	width: 2.5rem;              /* w-10 */
	height: 2.5rem;             /* h-10 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3); /* border-white/30 */
	cursor: pointer;
	transition: border-color 200ms ease;
}
.v3-hero__arrow:hover { border-color: #fff; }


/* ============================================================
   2) INSTITUCIONAL "Uma instituição, múltiplas atuações"
   <section className="py-28 bg-white border-b border-black/10">
   ============================================================ */

.v3-inst {
	padding-block: 7rem;        /* py-28 */
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.v3-inst .v3-container {
	max-width: 1400px;
}

/* Head:
   <div className="mb-16 flex flex-col md:flex-row md:items-end justify-between gap-6">
*/
.v3-inst__head {
	margin-bottom: 4rem;        /* mb-16 */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;                /* gap-6 */
}
@media (min-width: 768px) {
	.v3-inst__head {
		flex-direction: row;
		align-items: flex-end;
	}
}

/* Título h2:
   <h2 className="text-4xl md:text-5xl font-[900] uppercase tracking-tighter leading-[0.9]">
*/
.v3-inst__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 36px;            /* text-4xl */
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;    /* tracking-tighter */
	line-height: 0.9;           /* leading-[0.9] */
	color: #000;
	margin: 0;
}
@media (min-width: 768px) { .v3-inst__title { font-size: 48px; } } /* md:text-5xl */

/* Lead:
   <p className="text-base text-black/45 font-medium leading-relaxed max-w-md md:text-right">
*/
.v3-inst__lead {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: rgba(0,0,0,0.45);
	line-height: 1.625;
	max-width: 28rem;           /* max-w-md */
	margin: 0;
}
@media (min-width: 768px) { .v3-inst__lead { text-align: right; } }

/* Grid divisor:
   <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-black/10">
   Trick Tailwind: gap-px (1px gap) + background black/10 = linhas divisórias
*/
.v3-inst__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(0,0,0,0.1);
}
@media (min-width: 640px) {
	.v3-inst__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card:
   <Link className="group bg-white p-10 flex flex-col hover:bg-gray-50 transition-colors">
*/
.v3-inst__frente {
	background: #fff;
	padding: 2.5rem;            /* p-10 */
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: background 200ms ease;
	min-height: auto;
}
.v3-inst__frente:hover {
	background: #f9fafb;        /* hover:bg-gray-50 */
	text-decoration: none;
}

/* Bar:
   <div className="w-8 h-[3px] bg-[#FF6600] mb-8" />
*/
.v3-inst__bar {
	position: static;
	width: 2rem;                /* w-8 */
	height: 3px;
	margin-bottom: 2rem;        /* mb-8 */
	transition: none;
}
.v3-inst__frente:hover .v3-inst__bar { width: 2rem; }

/* Número (01, 02, 03):
   <span className="text-xs font-bold uppercase tracking-[0.2em] text-black/35 mb-3">
*/
.v3-inst__num {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(0,0,0,0.35);
	margin: 0 0 0.75rem 0;      /* mb-3 */
	display: block;
}

/* Nome (A Bienal, O CCBA, etc.):
   <span className="text-2xl font-[900] uppercase tracking-tighter group-hover:text-[#FF6600] transition-colors block mb-5 leading-tight">
*/
.v3-inst__name {
	display: block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 24px;            /* text-2xl */
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 1.25;          /* leading-tight */
	color: #000;
	margin: 0 0 1.25rem 0;      /* mb-5 */
	transition: color 200ms ease;
}
.v3-inst__frente:hover .v3-inst__name {
	color: var(--frente-color, currentColor);
}

/* Descrição:
   <p className="text-black/50 font-medium text-sm leading-relaxed mb-8 flex-1">
*/
.v3-inst__desc {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 500;
	line-height: 1.625;
	color: rgba(0,0,0,0.5);
	margin: 0 0 2rem 0;         /* mb-8 */
	flex: 1;
}

/* CTA:
   <span className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-[#FF6600] self-start">
   SEM border-bottom!
*/
.v3-inst__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;                /* gap-2 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;      /* tracking-widest */
	align-self: flex-start;
	margin-top: auto;
	border-bottom: 0;
	padding-bottom: 0;
}


/* ============================================================
   3) EXPOSIÇÕES EM CARTAZ
   <section className="bg-white border-y border-black/10">
   ============================================================ */

.v3-expos {
	background: #fff;
	border-block: 1px solid rgba(0,0,0,0.1);
}

/* Wrapper do head:
   <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-20">
   (mapeia pra .v3-container do template + padding-block adicional)
*/
.v3-expos > .v3-container { padding-block: 5rem; }

/* Head:
   <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4 border-b border-black/10 pb-8">
*/
.v3-expos__head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 3rem;        /* mb-12 */
	gap: 1rem;                  /* gap-4 */
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-bottom: 2rem;       /* pb-8 */
}
@media (min-width: 768px) {
	.v3-expos__head { flex-direction: row; align-items: flex-end; }
}

/* Título:
   <h2 className="text-5xl md:text-6xl font-[900] uppercase tracking-tighter leading-[0.9]">
*/
.v3-expos__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 48px;            /* text-5xl */
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 0.9;
	color: #000;
	margin: 0;
}
@media (min-width: 768px) { .v3-expos__title { font-size: 60px; } } /* md:text-6xl */

/* "Todas as exposições":
   <Link className="text-black font-bold uppercase tracking-widest hover:text-[#CA047A] transition-colors flex items-center gap-2 text-sm">
*/
.v3-expos__see-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;                /* gap-2 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000;
	text-decoration: none;
	transition: color 200ms ease;
	border-bottom: 0;
	padding-bottom: 0;
}
.v3-expos__see-all:hover {
	color: #CA047A;
	text-decoration: none;
}

/* Body — usa .v3-container do template + pb-16 */
.v3-expos__body { padding-bottom: 4rem; /* pb-16 */ }

.v3-expos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;                  /* gap-4 */
}
@media (min-width: 1024px) {
	.v3-expos__grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

/* Destaque:
   <Link className="lg:col-span-7 group cursor-pointer flex flex-col">
     <div className="relative overflow-hidden bg-gray-200 flex-1 min-h-[480px]">
   No PHP, shade e body são IRMÃOS do __media (não filhos como no React),
   então aplicamos relative + overflow hidden no próprio __featured.
*/
.v3-expos__featured {
	position: relative;         /* containing block pros filhos absolutos */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	min-height: 480px;          /* casa com min-h-[480px] do __media original */
}
@media (min-width: 1024px) {
	.v3-expos__featured { grid-column: span 7 / span 7; }
}
.v3-expos__featured-media {
	position: relative;
	overflow: hidden;
	background: #e5e7eb;        /* bg-gray-200 */
	flex: 1;
	min-height: 480px;
}
.v3-expos__featured-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 700ms ease, transform 700ms ease;
}
.v3-expos__featured:hover .v3-expos__featured-media img {
	filter: grayscale(0%);
	transform: scale(1.02);
}
/* gradient overlay:
   <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
*/
.v3-expos__featured-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(0,0,0,0.8) 0%,
		rgba(0,0,0,0.2) 50%,
		transparent 100%);
}
/* Body:
   <div className="absolute bottom-0 left-0 right-0 p-8">
*/
.v3-expos__featured-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem;              /* p-8 */
	z-index: 2;
}
.v3-expos__selos {
	display: flex;
	align-items: center;
	gap: 0.75rem;               /* gap-3 */
	margin-bottom: 0.75rem;     /* mb-3 */
}
/* h3:
   <h3 className="text-3xl md:text-4xl font-[900] uppercase tracking-tighter text-white leading-tight mb-2">
*/
.v3-expos__featured-titulo {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 30px;            /* text-3xl */
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.5rem 0;       /* mb-2 */
}
@media (min-width: 768px) { .v3-expos__featured-titulo { font-size: 36px; } }
/* p:
   <p className="text-white/70 font-medium text-sm mb-4 max-w-md">
*/
.v3-expos__featured-sub {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.7);
	max-width: 28rem;
	margin: 0 0 1rem 0;         /* mb-4 */
}
.v3-expos__featured-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* p:
   <p className="text-white/50 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
*/
.v3-expos__featured-data {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
.v3-expos__featured-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.6);
	border-bottom: 0;
	padding-bottom: 0;
	transition: color 200ms ease;
}
.v3-expos__featured:hover .v3-expos__featured-arrow { color: #fff; }

/* Secundários:
   <div className="lg:col-span-5 flex flex-col gap-4">
*/
.v3-expos__secondary {
	display: flex;
	flex-direction: column;
	gap: 1rem;                  /* gap-4 */
}
@media (min-width: 1024px) {
	.v3-expos__secondary { grid-column: span 5 / span 5; }
}

/* Card secundário:
   <Link className="group cursor-pointer flex flex-col flex-1 relative overflow-hidden bg-gray-200 min-h-[224px]">
*/
.v3-expos__card {
	position: relative;
	overflow: hidden;
	background: #e5e7eb;
	flex: 1;
	min-height: 224px;          /* min-h-[224px] */
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
.v3-expos__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 700ms ease, transform 700ms ease;
}
.v3-expos__card:hover .v3-expos__card-img {
	filter: grayscale(0%);
	transform: scale(1.02);
}
.v3-expos__card-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(0,0,0,0.8) 0%,
		rgba(0,0,0,0.3) 50%,
		transparent 100%);
}
/* Body:
   <div className="absolute bottom-0 left-0 right-0 p-6">
*/
.v3-expos__card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.5rem;            /* p-6 */
	z-index: 2;
}
.v3-expos__card-body .v3-expos__selos {
	gap: 0.5rem;                /* gap-2 */
	margin-bottom: 0.5rem;      /* mb-2 */
}
/* h3:
   <h3 className="text-xl font-[900] uppercase tracking-tighter text-white leading-tight mb-1">
*/
.v3-expos__card-titulo {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 20px;            /* text-xl */
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	color: #fff;
	line-height: 1.25;
	margin: 0 0 0.25rem 0;      /* mb-1 */
}
.v3-expos__card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.v3-expos__card-data {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;            /* text-[11px] */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
.v3-expos__card-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.5);
	border-bottom: 0;
	padding-bottom: 0;
	transition: color 200ms ease;
}
.v3-expos__card:hover .v3-expos__card-arrow { color: #fff; }

/* "Mais na programação" — usa .v3-container + pb-20 */
.v3-expos__mais { padding-bottom: 5rem; /* pb-20 */ }
.v3-expos__mais-kicker {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(0,0,0,0.35);
	margin: 0 0 1.5rem 0;       /* mb-6 */
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 2rem;          /* pt-8 */
}
/* Grid 4 cols:
   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
*/
.v3-expos__mais-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;               /* gap-5 */
}
@media (min-width: 640px)  { .v3-expos__mais-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v3-expos__mais-grid { grid-template-columns: repeat(4, 1fr); } }
/* Card "Mais":
   <Link className="group cursor-pointer flex flex-col bg-white border border-black/10 hover:border-black/25 hover:shadow-lg transition-all duration-300">
*/
.v3-expos__mais-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	text-decoration: none;
	color: inherit;
	transition: border-color 300ms ease, box-shadow 300ms ease;
}
.v3-expos__mais-card:hover {
	border-color: rgba(0,0,0,0.25);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* hover:shadow-lg */
}
.v3-expos__mais-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f3f4f6;        /* bg-gray-100 */
}
.v3-expos__mais-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 700ms ease, transform 700ms ease;
}
.v3-expos__mais-card:hover .v3-expos__mais-card-media img {
	filter: grayscale(0%);
	transform: scale(1.05);
}
.v3-expos__mais-card-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
}
/* Body:
   <div className="p-5 flex flex-col flex-1">
*/
.v3-expos__mais-card-body {
	padding: 1.25rem;           /* p-5 */
	display: flex;
	flex-direction: column;
	flex: 1;
}
.v3-expos__mais-card-tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.625rem;    /* mb-2.5 */
}
.v3-expos__mais-card-tag .v3-tag {
	font-size: 9px;             /* text-[9px] */
	font-weight: 700;
	letter-spacing: 0.18em;     /* tracking-[0.18em] */
	padding: 0.125rem 0.5rem;   /* px-2 py-0.5 */
}
/* h3:
   <h3 className="text-sm font-[900] uppercase tracking-tight leading-tight mb-3 flex-1">
*/
.v3-expos__mais-card-titulo {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.025em;   /* tracking-tight */
	line-height: 1.25;
	color: #000;
	margin: 0 0 0.75rem 0;      /* mb-3 */
	flex: 1;
}
/* p:
   <p className="text-black/35 font-medium flex items-center gap-1.5 text-xs">
*/
.v3-expos__mais-card-data {
	display: flex;
	align-items: center;
	gap: 0.375rem;              /* gap-1.5 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;            /* text-xs */
	font-weight: 500;
	color: rgba(0,0,0,0.35);
	margin: 0;
}


/* ============================================================
   4) NOTÍCIAS / NOVIDADES
   <section className="py-20 bg-white border-b border-black/10">
   ============================================================ */

.v3-news {
	padding-block: 5rem;        /* py-20 */
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.v3-news .v3-container { max-width: 1400px; }

/* Head:
   <div className="flex items-end justify-between mb-12 pb-8 border-b border-black/10">
*/
.v3-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 3rem;        /* mb-12 */
	padding-bottom: 2rem;       /* pb-8 */
	border-bottom: 1px solid rgba(0,0,0,0.1);
	gap: 1rem;
}

/* Kicker:
   <span className="text-xs font-bold uppercase tracking-[0.2em] text-[#CA047A] mb-3 block">
*/
.v3-news__kicker {
	display: block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #CA047A;
	margin: 0 0 0.75rem 0;      /* mb-3 */
}

/* Título h2:
   <h2 className="text-5xl md:text-6xl font-[900] uppercase tracking-tighter leading-[0.9]">
*/
.v3-news__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 48px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 0.9;
	color: #000;
	margin: 0;
}
@media (min-width: 768px) { .v3-news__title { font-size: 60px; } }

/* "Ver todas":
   <Link className="hidden md:flex items-center gap-2 text-sm font-bold uppercase tracking-widest hover:text-[#CA047A] transition-colors">
*/
.v3-news__see-all {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000;
	text-decoration: none;
	transition: color 200ms ease;
	border-bottom: 0;
	padding-bottom: 0;
}
@media (min-width: 768px) { .v3-news__see-all { display: inline-flex; } }
.v3-news__see-all:hover { color: #CA047A; text-decoration: none; }

/* Grid 3 cols:
   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
*/
.v3-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;                  /* gap-8 */
}
@media (min-width: 640px)  { .v3-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v3-news__grid { grid-template-columns: repeat(3, 1fr); } }

/* Card:
   <Link className="group flex flex-col">
*/
.v3-news__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

/* Media: aspectRatio: i === 0 ? '16/10' : '4/3'
   <div className="relative overflow-hidden bg-gray-100 mb-5" style={{ aspectRatio: ... }}>
*/
.v3-news__media {
	position: relative;
	overflow: hidden;
	background: #f3f4f6;        /* bg-gray-100 */
	margin-bottom: 1.25rem;     /* mb-5 */
	aspect-ratio: 4 / 3;        /* uniforme em todos os cards */
}
/* (No Figma original o primeiro é 16:10 e os outros 4:3 — uniformizado pra consistência visual) */
.v3-news__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 700ms ease, transform 700ms ease;
}
.v3-news__card:hover .v3-news__media img {
	filter: grayscale(0%);
	transform: scale(1.03);
}

/* Tag — top-left:
   <div className="absolute top-4 left-4">
     <span className="text-[9px] font-bold uppercase tracking-[0.18em] px-2.5 py-1 text-white">
*/
.v3-news__tag {
	position: absolute;
	top: 1rem;                  /* top-4 */
	left: 1rem;                 /* left-4 */
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	padding: 0.25rem 0.625rem;  /* px-2.5 py-1 */
	color: #fff;
	text-transform: uppercase;
	z-index: 2;
}

/* Data:
   <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-black/30 mb-2">
*/
.v3-news__data {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(0,0,0,0.3);
	margin: 0 0 0.5rem 0;       /* mb-2 */
}

/* Título h3:
   <h3 className="font-[800] uppercase tracking-tight text-sm leading-snug group-hover:text-black/50 transition-colors line-clamp-3">
*/
.v3-news__card-titulo {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1.375;         /* leading-snug */
	color: #000;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 200ms ease;
}
.v3-news__card:hover .v3-news__card-titulo { color: rgba(0,0,0,0.5); }


/* ============================================================
   5) CAFÉ DO RIO — full bleed split 5/7
   <section className="border-b border-black/10">
     <div className="grid grid-cols-1 md:grid-cols-12">
   ============================================================ */

.v3-cafe {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.v3-cafe__grid {
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.v3-cafe__grid { grid-template-columns: repeat(12, 1fr); }
}

/* Texto (esq, fundo laranja):
   <div className="md:col-span-5 bg-[#FF6600] text-black p-10 md:p-16 flex flex-col justify-between min-h-[480px]">
*/
.v3-cafe__text {
	background: #FF6600;
	color: #000;
	padding: 2.5rem;            /* p-10 */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 320px;          /* reduzido 1/3 (era 480px) */
}
@media (min-width: 768px) {
	.v3-cafe__text {
		grid-column: span 5 / span 5;
		padding: 4rem;          /* md:p-16 */
	}
}

/* Kicker:
   <p className="text-xs font-bold uppercase tracking-[0.2em] text-black/50 mb-6">
*/
.v3-cafe__kicker {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(0,0,0,0.5);
	margin: 0 0 1.5rem 0;       /* mb-6 */
}

/* Título h2:
   <h2 className="text-5xl md:text-6xl font-[900] uppercase tracking-tighter leading-[0.9] mb-8">
*/
.v3-cafe__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 48px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 0.9;
	color: #000;
	margin: 0 0 2rem 0;         /* mb-8 */
}
@media (min-width: 768px) { .v3-cafe__title { font-size: 60px; } }

/* Lead (FONT-SERIF Spectral):
   <p className="text-xl font-serif leading-snug mb-6 opacity-90 max-w-sm">
*/
.v3-cafe__lead {
	font-family: 'Spectral', Georgia, 'Times New Roman', serif;
	font-size: 20px;            /* text-xl */
	line-height: 1.375;         /* leading-snug */
	opacity: 0.9;
	max-width: 24rem;           /* max-w-sm */
	color: #000;
	margin: 0 0 1.5rem 0;       /* mb-6 */
}

/* Horários wrapper:
   <div className="mb-8">
     <div className="flex flex-wrap gap-6 text-sm font-bold uppercase tracking-widest mb-2">
*/
.v3-cafe__horarios {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;                /* gap-6 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.5rem 0;       /* mb-2 */
	color: #000;
	padding-top: 0;
	border-top: 0;
}
/* Cada item: <div><div text-xs label></div><div valor></div></div> */
.v3-cafe__h-label {
	color: rgba(0,0,0,0.5);
	margin: 0 0 0.25rem 0;      /* mb-1 */
	font-size: 12px;            /* text-xs */
}
.v3-cafe__h-val {
	color: #000;
	font-size: 14px;
}

/* Nota:
   <p className="text-xs font-medium text-black/40">
*/
.v3-cafe__nota {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: rgba(0,0,0,0.4);
	margin: 0.5rem 0 2rem 0;    /* mb-8 do wrapper */
}

/* CTA "Ver cardápio":
   <Link className="inline-flex items-center gap-2 text-sm font-bold uppercase tracking-widest border-b-2 border-black pb-1 hover:opacity-60 transition-opacity">
*/
.v3-cafe__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;                /* gap-2 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;            /* text-sm */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000;
	background: transparent;
	border-bottom: 2px solid #000; /* border-b-2 border-black */
	padding: 0 0 0.25rem 0;     /* pb-1 */
	align-self: flex-start;
	text-decoration: none;
	transition: opacity 200ms ease;
}
.v3-cafe__cta:hover {
	opacity: 0.6;
	color: #000;
	text-decoration: none;
}

/* Imagem (dir):
   <div className="md:col-span-7">
     <div className="h-64 md:h-full min-h-[480px] overflow-hidden">
       <img className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
*/
.v3-cafe__image {
	height: 16rem;              /* h-64 */
	min-height: 320px;          /* reduzido 1/3 (era 480px) */
	overflow: hidden;
}
@media (min-width: 768px) {
	.v3-cafe__image {
		grid-column: span 7 / span 7;
		height: auto;
	}
}
.v3-cafe__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}
.v3-cafe__image:hover img { transform: scale(1.05); }