/* Hero / banners */
/* ---------- Hero / banners ----------
   A foto de fundo cheio (bleed) tinha um vermelho gravado na própria imagem
   que nunca bate exatamente com o degradê CSS — duas fotos vermelhas
   diferentes coladas sempre criam uma costura, e o recorte de altura total
   cortava a cabeça. Retrato circular emoldurado resolve as duas coisas: um
   único degradê contínuo no banner inteiro (sem segunda cor competindo) e o
   enquadramento do rosto sob controle total (object-position escolhido). */
.hero-banner{ position:relative; overflow:hidden; border-radius:1.1rem; padding:2rem; min-height:190px;
  background:linear-gradient(105deg,var(--wine-dark),var(--wine) 60%,#a3263c); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.banner-wine{ border-radius:1rem; padding:1.5rem 1.75rem; background:linear-gradient(100deg,var(--wine-dark),var(--wine)); }
.hero-portrait{ position:relative; width:136px; height:136px; border-radius:999px; flex-shrink:0; overflow:hidden;
  border:4px solid rgba(255,255,255,.28); box-shadow:0 12px 28px rgba(0,0,0,.25); }
.hero-portrait img{ width:100%; height:100%; object-fit:cover; }
/* Variante retangular — mesma ideia (moldura recortada, não bleed total, sem
   costura de cor), mas pra fotos de grupo/cena a área maior mostra a foto
   inteira em vez de espremer tudo num círculo pequeno. */
.hero-portrait.is-rect{ width:220px; height:150px; border-radius:1rem; }
/* Carrossel: todos os slides com o mesmo tamanho; setas e bolinhas não cobrem o texto */
.carousel-track{ align-items:stretch; }
.carousel-slide{ display:flex; }
.carousel .hero-banner{ width:100%; min-height:270px; padding:2rem 4rem 3rem; }
.carousel .hero-banner h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.carousel .hero-banner p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:680px){ .hero-portrait{ display:none; } .hero-banner{ padding:1.75rem; } .carousel .hero-banner{ min-height:240px; padding:1.75rem 3.25rem 3rem; } }