/* ==========================================================================
   Responsividade — Antonia de Jesus
   Complementa o bundle Tailwind para celular, tablet e notebook.
   ========================================================================== */

/* --- Base: evitar scroll horizontal e respeitar notch --- */
html {
  overflow-x: clip;
  scroll-padding-top: 4rem;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

#root {
  overflow-x: clip;
  width: 100%;
}

/* --- Container com padding fluido --- */
.container-custom {
  width: 100%;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
  }
}

/* --- Ancoras: compensar header fixo --- */
section[id] {
  scroll-margin-top: 4rem;
}

#contato-titulo {
  scroll-margin-top: 4.5rem;
}

#contato {
  scroll-margin-top: 5rem;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 5rem;
  }

  section[id] {
    scroll-margin-top: 5rem;
  }

  #contato-titulo {
    scroll-margin-top: 5.5rem;
  }

  #contato {
    scroll-margin-top: 6rem;
  }
}

/* --- Tipografia fluida para titulos grandes --- */
@supports (text-wrap: balance) {
  h1,
  h2 {
    text-wrap: balance;
  }
}

/* --- Celular (< 640px) --- */
@media (max-width: 639px) {
  .section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Hero: altura mais compacta, foto primeiro */
  #inicio .min-h-\[85vh\] {
    min-height: 0;
    padding-bottom: 5rem;
  }

  #inicio h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }

  #inicio .text-lg {
    font-size: 1rem !important;
  }

  #inicio .text-base {
    font-size: 0.9375rem !important;
  }

  /* Botoes do hero em largura total */
  #inicio .flex-col.sm\:flex-row {
    width: 100%;
  }

  #inicio .flex-col.sm\:flex-row > * {
    width: 100%;
    justify-content: center;
  }

  /* Espacamento de titulos de secao */
  .mb-16 {
    margin-bottom: 2.5rem !important;
  }

  .mb-12 {
    margin-bottom: 2rem !important;
  }

  /* Cards com padding excessivo */
  .p-12 {
    padding: 2rem !important;
  }

  .glass-card.rounded-3xl {
    padding: 1.5rem !important;
  }

  /* Elementos decorativos grandes */
  .w-\[600px\],
  .w-\[800px\] {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .h-\[600px\],
  .h-\[800px\] {
    height: 100vw !important;
    max-height: 100vw !important;
  }

  .w-96.h-96 {
    width: 16rem !important;
    height: 16rem !important;
  }

  /* Imprensa: titulos longos quebram linha */
  #imprensa h3 {
    font-size: 1.0625rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* Redes sociais: grid 2 colunas mais confortavel */
  #redes-sociais .grid-cols-2 {
    gap: 0.75rem;
  }

  /* Formulario: inputs com tamanho minimo para toque */
  input,
  select,
  textarea,
  button[type="submit"] {
    min-height: 2.75rem;
    font-size: 16px; /* evita zoom no iOS */
  }

  /* Indicador "Saiba mais" nao sobrepoe conteudo */
  #inicio button.absolute.bottom-8 {
    bottom: 1rem;
  }
}

/* --- Celular muito pequeno (< 375px) --- */
@media (max-width: 374px) {
  .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #inicio .relative.w-56 {
    width: 12rem !important;
    height: 16rem !important;
  }

  #redes-sociais .grid-cols-2 {
    grid-template-columns: 1fr;
    max-width: 14rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Tablet (640px – 1023px) --- */
@media (min-width: 640px) and (max-width: 1023px) {
  .section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  /* Hero em coluna unica no tablet */
  #inicio .grid.lg\:grid-cols-2 {
    gap: 2.5rem;
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 4rem;
  }

  #inicio .order-1.lg\:order-2 {
    order: 1;
  }

  #inicio .order-2.lg\:order-1 {
    order: 2;
  }

  /* Timeline: cards ocupam largura total abaixo do icone */
  #trajetoria .md\:max-w-\[calc\(50\%-60px\)\] {
    max-width: 100% !important;
  }

  #trajetoria .md\:flex-row,
  #trajetoria .md\:flex-row-reverse {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #trajetoria .md\:absolute.md\:left-1\/2 {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    align-self: flex-start;
    margin-bottom: 0.75rem;
  }

  #trajetoria .md\:mr-auto,
  #trajetoria .md\:ml-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  /* Imprensa: 2 colunas no tablet */
  #imprensa .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Redes: 3 colunas no tablet */
  #redes-sociais .lg\:grid-cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .w-\[600px\],
  .w-\[800px\] {
    width: 80vw !important;
    height: 80vw !important;
  }
}

/* --- Notebook / desktop pequeno (1024px – 1279px) --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container-custom {
    max-width: 72rem;
  }

  #redes-sociais .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* --- Imagens e midia sempre fluidas --- */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* --- Logo do header --- */
header .container-custom > .flex.items-center.justify-between {
  height: 6rem !important;
}

@media (min-width: 768px) {
  header .container-custom > .flex.items-center.justify-between {
    height: 8rem !important;
  }
}

header a[href="#inicio"] .site-logo {
  display: block;
  height: 6rem !important;
  width: auto;
  max-width: min(28rem, 90vw);
}

@media (min-width: 768px) {
  header a[href="#inicio"] .site-logo {
    height: 8rem !important;
    max-width: 38rem;
  }
}

/* --- Menu mobile: area de toque confortavel --- */
@media (max-width: 1023px) {
  header nav.hidden {
    display: none !important;
  }

  header nav.lg\:hidden a,
  header button.lg\:hidden {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  header nav.lg\:hidden .p-4.space-y-1 a {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* --- Preferencia de movimento reduzido --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Rodapé — Antonia de Jesus
   ========================================================================== */

/* Rodapé React — grid 3 colunas e alinhamento superior (md:grid-cols-3 ausente no bundle) */
footer.bg-primary .container-custom .grid.grid-cols-1 {
  align-items: start;
}

@media (min-width: 768px) {
  footer.bg-primary .container-custom .grid.grid-cols-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Coluna Informações Legais — centralizada no mobile/tablet, à direita no desktop */
footer.bg-primary .grid > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding-bottom: 0.5rem;
}

footer.bg-primary .grid > div:last-child > div {
  text-align: center;
  align-items: center;
}

@media (min-width: 1024px) {
  footer.bg-primary .grid > div:last-child {
    align-items: flex-end;
  }

  footer.bg-primary .grid > div:last-child > div {
    text-align: left;
    align-items: flex-start;
  }
}

.site-footer {
  background: linear-gradient(135deg, #1a365d 0%, #2d4a67 100%);
  color: #ffffff;
  padding: 3rem 0 2rem 0;
  border-top: 4px solid #3182ce;
  margin-top: auto;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(1rem, env(safe-area-inset-left, 0px)) 0 max(1rem, env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-container {
    grid-template-columns: 2fr 2fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .footer-container {
    padding: 0 max(2rem, env(safe-area-inset-left, 0px)) 0 max(2rem, env(safe-area-inset-right, 0px));
  }
}

/* --- Informações principais --- */
.footer-main-info {
  text-align: center;
}

@media (min-width: 768px) {
  .footer-main-info {
    text-align: left;
  }
}

.candidate-name {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.candidate-position {
  font-size: 1.125rem;
  margin: 0 0 1rem 0;
  color: #e2e8f0;
  font-weight: 500;
}

.party-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .party-info {
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
  }
}

.party-name {
  background: #3182ce;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  border: 2px solid #2c5aa0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.candidate-number {
  background: #e2e8f0;
  color: #1a365d;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  border: 2px solid #cbd5e0;
}

/* --- Informações de contato --- */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-item strong {
  color: #63b3ed;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.contact-item span {
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.contact-item a {
  color: #90cdf4;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.95rem;
}

.contact-item a:hover {
  color: #63b3ed;
  text-decoration: underline;
}

/* --- Informações legais --- */
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-legal {
    align-items: flex-start;
    text-align: left;
  }
}

.privacy-policy {
  color: #90cdf4;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid #63b3ed;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  display: inline-block;
  font-size: 0.9rem;
}

.privacy-policy:hover {
  background: #63b3ed;
  color: #1a365d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.copyright {
  color: #a0aec0;
  font-size: 0.875rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #4a5568;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .copyright {
    text-align: left;
  }
}

/* --- Celular (ajustes específicos) --- */
@media (max-width: 639px) {
  .site-footer {
    padding: 2rem 0 1.5rem 0;
  }
  
  .footer-container {
    gap: 1.5rem;
  }
  
  .candidate-name {
    font-size: 1.5rem;
  }
  
  .candidate-position {
    font-size: 1rem;
  }
  
  .party-name, .candidate-number {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
  }
  
  .contact-item {
    text-align: center;
  }
}

/* Garantir que a seção trajetória tenha posicionamento relativo */
#trajetoria {
  position: relative;
}

/* --- Div com gradient radial e imagem de trajetória --- */
.trajetoria-background-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0px), url('../images/trajetoria.jpeg');
  background-size: 40px 40px, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* --- Garantir que o body tenha altura mínima --- */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#root {
  flex: 1;
}

/* --- Seção Sobre - Imagem da Antonia de Jesus --- */
.sobre-antonia-image {
  position: relative;
  display: inline-block;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px rgba(49, 130, 206, 0.3);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: linear-gradient(135deg, #3182ce 0%, #2d4a67 50%, #1a365d 100%);
  padding: 8px;
  z-index: 10;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Tamanho padrão muito menor - v2.0 */
  width: 160px !important;
  height: 200px !important;
}

.sobre-antonia-image::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: linear-gradient(45deg, #3182ce, #63b3ed, #3182ce, #2d4a67);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: gradient-rotate 4s linear infinite;
}

@keyframes gradient-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sobre-antonia-image:hover::before {
  opacity: 0.7;
}

.sobre-antonia-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  transition: all 0.5s ease;
  filter: brightness(1) contrast(1.05) saturate(1.1);
}

.sobre-antonia-image:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 30px 60px -12px rgba(0, 0, 0, 0.3),
    0 0 50px rgba(49, 130, 206, 0.4),
    0 0 15px rgba(99, 179, 237, 0.25);
}

.sobre-antonia-image:hover img {
  transform: scale(1.02);
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
}

/* Container para o layout da seção sobre */
.sobre-content-container {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .sobre-content-container {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .sobre-antonia-image {
    width: 180px !important;
    height: 230px !important;
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .sobre-content-container {
    gap: 2.5rem;
  }
  
  .sobre-antonia-image {
    width: 200px !important;
    height: 260px !important;
  }
}

/* Ajustes para mobile */
@media (max-width: 767px) {
  .sobre-antonia-image {
    width: 160px !important;
    height: 200px !important;
    margin: 1rem auto;
  }
  
  .sobre-content-container {
    text-align: center;
    gap: 1.5rem;
  }
  
  /* Reduz efeitos em dispositivos móveis para melhor performance */
  .sobre-antonia-image:hover {
    transform: translateY(-5px) scale(1.02);
  }
  
  .sobre-antonia-image::after {
    display: none; /* Remove partículas em mobile */
  }
}

/* Suporte para dispositivos de alta densidade (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .sobre-antonia-image img {
    image-rendering: -webkit-optimize-contrast;
  }

  @supports (image-rendering: crisp-edges) {
    .sobre-antonia-image img {
      image-rendering: crisp-edges;
    }
  }
}

/* Modo escuro (se aplicável) */
@media (prefers-color-scheme: dark) {
  .sobre-antonia-image {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%);
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(37, 99, 235, 0.4);
  }
  
  .sobre-image-badge {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(37, 99, 235, 0.3);
  }
}

/* Acessibilidade - respeita preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .sobre-antonia-image,
  .sobre-antonia-image *,
  .sobre-antonia-image::before,
  .sobre-antonia-image::after {
    animation: none !important;
    transition: none !important;
  }
  
  .sobre-antonia-image:hover {
    transform: none !important;
  }
}

/* Fallback para navegadores que não suportem backdrop-filter */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .sobre-image-badge {
    background: rgba(26, 54, 93, 0.95);
  }
}

/* Container responsivo melhorado */
.sobre-content-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 3rem !important;
  flex-wrap: wrap !important;
}

@media (max-width: 767px) {
  .sobre-content-wrapper {
    flex-direction: column !important;
    gap: 2rem !important;
  }
}

/* Garantir que imagens não quebrem o layout */
.sobre-antonia-image,
.sobre-antonia-image img {
  max-width: 100% !important;
  height: auto !important;
}

/* Efeito de partículas flutuantes ao redor da imagem */
.sobre-antonia-image::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 179, 237, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: float-particles 20s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.sobre-antonia-image:hover::after {
  opacity: 1;
}

@keyframes float-particles {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* Estilo de badge/legenda opcional */
.sobre-image-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(26, 54, 93, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: white;
  padding: 0.75rem;
  border-radius: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.5s ease;
}

.sobre-antonia-image:hover .sobre-image-badge {
  transform: translateY(0);
  opacity: 1;
}

/* --- Botão Voltar ao Topo --- */
.bg-accent {
  background-color: #3182ce;
}

.text-accent-foreground {
  color: #ffffff;
}

.site-footer button[aria-label="Voltar ao topo"] {
  transition: all 0.3s ease;
  cursor: pointer;
}

.site-footer button[aria-label="Voltar ao topo"]:hover {
  background-color: #2c5aa0;
  transform: translateY(-2px);
}

/* --- Top Bar/Header 100% transparente --- */
header {
  background: transparent !important;
}

/* Para garantir compatibilidade com diferentes estruturas do header */
header .container-custom,
header > div,
header nav.hidden {
  background: transparent !important;
}

/* Menu mobile: fundo transparente com blur e letras brancas */
header nav.lg\:hidden {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
}

header nav.lg\:hidden a {
  color: #fff !important;
}