/* ==========================================================================
   Aurion Eventos — style.css
   Complementa o CSS crítico inline do index.html
   ========================================================================== */

/* -------------------------
   Reset / Base
   ------------------------- *//* Reset e base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 20px; }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(5,3,10,0.75), rgba(5,3,10,0.45)); border-bottom: 1px solid rgba(255,255,255,0.03); }
.header-inner { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:12px 20px; }
.logo { height:40px; display:block; }
.logo-small { height:34px; display:block; }

/* Nav */
.nav-list { display:none; list-style:none; gap:12px; align-items:center; }
.nav-list li a { color:var(--muted-gray); text-decoration:none; padding:8px 10px; border-radius:8px; font-family:var(--font-display); font-weight:600; font-size:14px; }
.nav-list li a:hover { color:var(--white); background: rgba(196,60,255,0.04); box-shadow: 0 0 12px rgba(196,60,255,0.06); }
.nav-toggle { background:transparent; color:var(--white); border:0; font-size:20px; display:block; }

/* CTA header */
.whatsapp-cta { display:inline-block; background: linear-gradient(90deg,var(--purple-500),var(--magenta-400)); color:var(--white); padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:600; font-family:var(--font-body); }

/* Hero */
.hero { padding:36px 0; position:relative; overflow:visible; }
.hero-inner { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.hero-content { flex:1 1 320px; max-width:640px; }

/* Neon title: sharper stroke + faster, subtler flicker */
.neon-title {
  font-family:var(--font-display);
  font-size:32px;
  line-height:1.05;
  color:var(--purple-500);
  letter-spacing:0.01em;
  margin-bottom:12px;

  /* thin dark stroke to increase letter nitidez */
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.55);
  text-shadow:
    0 0 6px rgba(196,60,255,0.18),
    0 0 12px rgba(160,32,240,0.08);

  /* faster, less intrusive flicker */
  animation: neon-flicker 1.1s infinite alternate;
}

/* Reduced flicker: shorter, fewer opacity drops */
@keyframes neon-flicker {
  0% { opacity:0.98; filter: drop-shadow(0 0 6px rgba(196,60,255,0.18)); }
  45% { opacity:1; }
  48% { opacity:0.88; }
  52% { opacity:1; }
  100% { opacity:0.99; }
}

/* Use neon color for section titles to create hierarchy */
.section-title {
  color: var(--purple-500);
  font-family: var(--font-display);
  font-weight:700;
  -webkit-text-stroke: 0.3px rgba(0,0,0,0.45); /* subtle stroke for clarity */
  margin-bottom:8px;
}

/* Make h2 slightly larger and more prominent */
.section-title { font-size:20px; }

/* Body text */
.lead { color:var(--muted-gray); margin-bottom:16px; font-size:15px; }
.micro { color:rgba(255,255,255,0.6); margin-top:12px; font-size:13px; }

/* Buttons */
.btn { display:inline-block; text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:600; font-family:var(--font-body); cursor:pointer; }
.btn-primary { background: linear-gradient(90deg,var(--purple-500),var(--magenta-400)); color:var(--white); box-shadow: 0 6px 18px rgba(160,32,240,0.12); border:0; }
.btn-outline { background:transparent; color:var(--white); border:1.5px solid rgba(196,60,255,0.12); }
.btn-small { padding:8px 10px; border-radius:10px; font-size:14px; }

/* DIFERENCIAIS */
.diff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; align-items:start; }
.diff-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:14px; border:1px solid rgba(255,255,255,0.02); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.diff-value { font-family:var(--font-display); font-weight:700; color:var(--white); font-size:16px; margin-bottom:6px; -webkit-text-stroke:0.25px rgba(0,0,0,0.35); }
.diff-sub { color:var(--muted-gray); font-size:13px; }

/* Grid and cards */
.services-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px; }
.card { background: rgba(255,255,255,0.02); border-radius: var(--radius-md); padding:18px; border:1px solid rgba(255,255,255,0.02); position:relative; overflow:visible; }
.service-card h3 { color:var(--highlight); margin-bottom:6px; font-family:var(--font-display); -webkit-text-stroke:0.25px rgba(0,0,0,0.28); }

/* Neon border for cards (kept) */
.neon-border {
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  transition: box-shadow .18s ease, transform .12s ease;
}
.neon-border::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-md) + 1px);
  background: linear-gradient(90deg, rgba(160,32,240,0.12), rgba(196,60,255,0.12));
  z-index: -1;
  filter: blur(8px);
  opacity: 0.6;
  transition: opacity .18s ease, transform .18s ease;
}
.neon-border:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(160,32,240,0.12); }
.neon-border:hover::after { opacity: 1; transform: scale(1.02); }

/* Card head */
.card-head { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.card-icon { flex:0 0 44px; border-radius:8px; }
.badge { display:inline-block; margin-top:6px; font-size:12px; color:var(--muted-gray); }

/* Card lead and features */
.card-lead { color:var(--muted-gray); margin-bottom:12px; }
.card-features { display:grid; gap:10px; }
.feature { display:flex; gap:10px; align-items:flex-start; }
.feat-ico { flex:0 0 18px; margin-top:4px; }
.feat-sub { color:var(--muted-gray); font-size:13px; margin-top:4px; }

/* Products list (full offerings) */
.products-list { margin-top:22px; background: rgba(255,255,255,0.01); padding:14px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }
.products-list h3 { font-family:var(--font-display); margin-bottom:10px; color:var(--purple-500); -webkit-text-stroke:0.25px rgba(0,0,0,0.28); }
.products-list ul { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; list-style:none; padding-left:0; }
.products-list li { padding-left:18px; position:relative; color:var(--muted-gray); font-size:14px; }
.products-list li::before { content:""; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:2px; background: linear-gradient(90deg,var(--purple-500),var(--magenta-400)); box-shadow: 0 6px 18px rgba(160,32,240,0.08); }

/* Ajuste do Grid de Portfólio - Mobile First */
.portfolio-grid {
  display: grid;
  gap: 16px; /* Espaço entre as fotos conforme sua variável --gap */
  grid-template-columns: repeat(2, 1fr); /* 2 colunas no mobile para destacar as fotos */
  padding: 10px;
}

/* Ajuste da Imagem com Proporção Exata */
.portfolio-card img {
  width: 100%; /* Ocupa toda a largura da coluna */
  height: auto;
  
  /* Mantém a proporção exata de 311 por 414.66 */
  aspect-ratio: 311 / 414.66; 
  
  /* Garante que a imagem preencha o espaço sem ficar esticada ou esmagada */
  object-fit: cover; 
  
  border-radius: 10px; /* Combina com o design que você já tem */
  display: block;
  transition: transform 0.3s ease;
}

/* Efeito de hover para desktop */
.portfolio-card img:hover {
  transform: scale(1.03);
}

/* Ajuste para telas maiores (Desktop) */
@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
    max-width: var(--container-max); /* Respeita o limite do site */
    margin: 0 auto;
  }
}


/* Testimonials */
.testimonials { position: relative; overflow: hidden; margin-top:12px; }
.testimonials-track { display:flex; gap:12px; transition: transform .5s ease; will-change: transform; padding-bottom:8px; }
.testimonial { min-width: 280px; max-width: 420px; flex: 0 0 auto; background: rgba(255,255,255,0.02); padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,0.02); }
.testimonials-controls { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.testimonials-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.08); border:0; cursor:pointer; }
.testimonials-dot.active { background: linear-gradient(90deg,var(--purple-500),var(--magenta-400)); box-shadow: 0 6px 18px rgba(160,32,240,0.12); }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:12px; }
.contact-form label { display:block; margin-bottom:10px; font-size:14px; color:var(--muted-gray); }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:var(--white); }
.form-actions { display:flex; gap:10px; margin-top:8px; }

/* Modal */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1200; }
.modal.open { display: flex; }
.modal-backdrop { position:absolute; inset:0; background: rgba(5,3,10,0.7); backdrop-filter: blur(6px); }
.modal-panel { position:relative; background: linear-gradient(180deg, rgba(11,7,16,0.98), rgba(5,3,10,0.95)); border-radius:14px; padding:20px; width:92%; max-width:520px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); border:1px solid rgba(196,60,255,0.06); }
.modal-close { position:absolute; right:12px; top:12px; background:transparent; border:0; color:var(--muted-gray); font-size:18px; }
.modal-form label { display:block; margin-bottom:10px; color:var(--muted-gray); }
.modal-form input, .modal-form textarea, .modal-form select { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:var(--white); margin-top:6px; }

/* Floating WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1300;
  box-shadow: 0 10px 30px rgba(160,32,240,0.12);
  background: linear-gradient(135deg, var(--purple-500), var(--magenta-400));
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(196,60,255,0.18); }
.whatsapp-float svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }

/* Footer */
.site-footer { padding:18px 0; border-top:1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, rgba(5,3,10,0.6), rgba(5,3,10,0.55)); }
.footer-inner { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.footer-left { display:flex; gap:12px; align-items:center; }
.brand { color:var(--muted-gray); font-family:var(--font-display); font-weight:600; margin:0; }
.footer-nav { display:flex; gap:14px; align-items:center; }
.footer-nav a { color:var(--muted-gray); text-decoration:none; font-size:14px; padding:6px 8px; border-radius:8px; }
.footer-nav a:hover { color:var(--white); background: rgba(196,60,255,0.04); }
.footer-contacts { display:flex; gap:10px; align-items:center; }
.footer-icon { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px; text-decoration:none; background: linear-gradient(135deg, rgba(160,32,240,0.08), rgba(196,60,255,0.06)); transition: transform .14s ease, box-shadow .14s ease; }
.footer-icon:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(160,32,240,0.08); }
.footer-meta { min-width:200px; text-align:right; }
.footer-meta .muted { color:var(--muted-gray); font-size:13px; margin:0; }

/* Responsive */
@media(min-width:768px){
  .nav-list { display:flex; }
  .nav-toggle { display:none; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid { grid-template-columns:repeat(3,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .diff-grid { grid-template-columns:repeat(5,1fr); }
  .products-list ul { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media(max-width:767px){
  .footer-inner { flex-direction:column; align-items:flex-start; gap:12px; }
  .footer-meta { text-align:left; width:100%; }
  .diff-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .services-grid { grid-template-columns:1fr; }
  .products-list ul { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* ===== Patch mínimo: esconder "Pular para o conteúdo" e ajustes seguros ===== */

/* Skip link: escondido por padrão, visível apenas ao focar (teclado) */
.skip-link,
.visually-hidden.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Quando receber foco (tab), torna-se visível e estilizado de forma discreta */
.skip-link:focus,
.skip-link:active,
.visually-hidden.skip-link:focus,
.visually-hidden.skip-link:active {
  position: fixed;
  left: 18px;
  top: 12px;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--purple-500), var(--magenta-400));
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-weight: 600;
  font-family: var(--font-body, system-ui);
  outline: none;
}

/* foco consistente e sutil para inputs/links (não altera layout) */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(160,32,240,0.12);
  outline-offset: 3px;
}

/* Pequeno helper para os dots do carrossel (não altera cards) */
.testimonials-track { will-change: transform; }
.testimonials-dot { border: 0; background: rgba(255,255,255,0.08); }
.testimonials-dot.active { background: linear-gradient(90deg, var(--purple-500), var(--magenta-400)); }