/* ============================================
   AGENCIA FGS — estilos.css
   CSS compartido para todas las páginas
   excepto indexinicio.html
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: #0A0A6B;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ===== VARIABLES ===== */
:root {
  --azul-oscuro:    #0A0A6B;
  --azul-medio:     #1A1AE0;
  --azul-electrico: #0066FF;
  --amarillo:       #FFD700;
  --verde-neon:     #00FF66;
  --verde-wa:       #25D366;
  --blanco:         #FFFFFF;
  --negro:          #000000;
  --sombra-card:    0 0 18px rgba(0,102,255,0.55);
  --sombra-card-hover: 0 0 32px rgba(0,102,255,0.9);
  --font-titulo:    'Bebas Neue', cursive;
  --font-body:      'Montserrat', sans-serif;
  --radius:         12px;
  --transition:     0.35s ease;
}

/* ===== ANIMACIONES ===== */
@keyframes float-particle {
  0%,100% { transform:translateY(0) scale(1); opacity:0.6; }
  50%      { transform:translateY(-18px) scale(1.2); opacity:1; }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes pulse-wa {
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,0.60); }
  60%  { box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@keyframes hero-bg-drift {
  0%   { transform:scale(1.04) translateX(0) translateY(0); }
  33%  { transform:scale(1.07) translateX(-8px) translateY(-5px); }
  66%  { transform:scale(1.05) translateX(6px) translateY(4px); }
  100% { transform:scale(1.04) translateX(0) translateY(0); }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes logo-glow {
  0%,100% { filter:drop-shadow(0 0 14px rgba(255,215,0,0.40)); }
  50%      { filter:drop-shadow(0 0 28px rgba(255,215,0,0.80)); }
}
@keyframes overlay-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.88; }
}
@keyframes card-appear {
  from { opacity:0; transform:translateY(32px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top:0; left:0; width:100%;
  z-index: 1000;
  background: var(--azul-oscuro);
  border-bottom: 2px solid var(--azul-electrico);
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: rgba(10,10,107,0.97);
  box-shadow: 0 4px 24px rgba(0,102,255,0.35);
}
.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.logo-img { height:52px; width:auto; object-fit:contain; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width:26px; height:3px;
  background: var(--amarillo);
  border-radius: 3px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

.nav-menu { display:flex; align-items:center; gap:8px; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blanco);
  padding: 8px 14px;
  border-radius: 6px;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
  color: var(--amarillo);
  background: rgba(255,215,0,0.08);
}
.btn-asesoria {
  display: inline-block;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  padding: 10px 18px;
  border-radius: 8px;
  border: 2px solid var(--amarillo);
  margin-left: 12px;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-asesoria:hover {
  background: #FFC200;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,215,0,0.45);
}

/* ===== BTN CTA ===== */
.btn-cta {
  display: inline-block;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 14px 32px;
  border-radius: 50px;
  transition: var(--transition);
}
.btn-cta:hover {
  background: #FFC200;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255,215,0,0.5);
}

/* ===== BANNER TAGLINE ===== */
.banner-tagline {
  background: linear-gradient(90deg, var(--azul-medio), var(--azul-electrico));
  border-top: 3px solid var(--verde-neon);
  border-bottom: 3px solid var(--verde-neon);
  padding: 14px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.banner-tagline::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);
  background-size:200% 100%;
  animation: shimmer 3.5s linear infinite;
  pointer-events:none;
}
.banner-tagline p {
  font-family: var(--font-titulo);
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  letter-spacing: 0.08em;
  color: var(--blanco);
  position: relative;
  z-index: 1;
}

/* ===== FOOTER ===== */
.footer {
  background: linear-gradient(90deg, var(--azul-medio), var(--azul-electrico));
  border-top: 3px solid var(--verde-neon);
  padding: 22px 0 14px;
  position: relative;
  overflow: hidden;
}
.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.footer-social { display:flex; align-items:center; gap:10px; }
.footer-social-link { display:flex; transition:var(--transition); }
.footer-social-link:hover { opacity:0.75; transform:scale(1.15); }
.footer-handle { font-family:var(--font-body); font-weight:700; font-size:0.95rem; }
.footer-location { display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:600; font-size:1rem; }
.footer-copy { text-align:center; padding:10px 24px 0; font-size:0.8rem; color:rgba(255,255,255,0.6); }

/* ===== WHATSAPP FLOTANTE ===== */
.whatsapp-float {
  position: fixed;
  bottom:28px; right:28px;
  z-index: 900;
  background: var(--verde-wa);
  width:62px; height:62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.6);
  transition: var(--transition);
  animation: pulse-wa 2.5s infinite;
}
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(37,211,102,0.85);
  animation: none;
}

/* ===== CONTACTO RÁPIDO (index) ===== */
.contacto-rapido {
  background: linear-gradient(160deg, var(--azul-oscuro) 0%, #0C0C85 60%, var(--azul-medio) 100%);
  padding: 64px 0;
}
.contacto-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.contacto-titulo { font-family:var(--font-body); font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:28px; }
.contacto-form { display:flex; flex-direction:column; gap:16px; }
.input-group { width:100%; }
.form-input {
  width:100%;
  background:transparent;
  border:2px solid rgba(255,255,255,0.35);
  border-radius:50px;
  padding:14px 22px;
  color:var(--blanco);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9rem;
  letter-spacing:0.06em;
  outline:none;
  transition:var(--transition);
}
.form-input::placeholder { color:rgba(255,255,255,0.55); font-style:italic; letter-spacing:0.08em; }
.form-input:focus { border-color:var(--amarillo); box-shadow:0 0 14px rgba(255,215,0,0.28); }
.btn-enviar {
  align-self:flex-end;
  background:var(--verde-neon);
  color:var(--negro);
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  padding:12px 36px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:var(--transition);
}
.btn-enviar:hover { background:#00e85a; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,255,102,0.4); }
.contacto-nota { font-family:var(--font-body); font-weight:600; font-size:1rem; margin-top:16px; font-style:italic; }
.contacto-logo-col { display:flex; flex-direction:column; align-items:center; gap:24px; }
.contacto-logo { width:220px; height:auto; filter:drop-shadow(0 0 20px rgba(255,215,0,0.35)); }
.contacto-whatsapp-link { display:inline-block; transition:var(--transition); }
.contacto-whatsapp-link:hover { transform:scale(1.1) rotate(-4deg); }
.contacto-whatsapp-img { width:90px; height:90px; object-fit:contain; border-radius:50%; filter:drop-shadow(0 0 16px rgba(37,211,102,0.7)); }

/* ===== RESPONSIVE TABLET ===== */
@media (max-width: 900px) {
  .hamburger { display:flex; }
  .nav-menu {
    position:fixed;
    top:0; right:-100%;
    width:80%; max-width:320px;
    height:100vh;
    background:var(--azul-oscuro);
    border-left:2px solid var(--azul-electrico);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    padding:80px 32px 32px;
    transition:right 0.4s cubic-bezier(0.4,0,0.2,1);
    z-index:1050;
  }
  .nav-menu.open { right:0; }
  .nav-links { flex-direction:column; align-items:flex-start; width:100%; gap:0; }
  .nav-link { font-size:1.1rem; padding:12px 8px; width:100%; border-bottom:1px solid rgba(255,255,255,0.08); }
  .btn-asesoria { margin-left:0; margin-top:16px; width:100%; text-align:center; padding:14px; }
  .contacto-container { grid-template-columns:1fr; gap:32px; }
  .contacto-logo-col { flex-direction:row; justify-content:center; flex-wrap:wrap; }
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 600px) {
  .footer-container { flex-direction:column; align-items:center; text-align:center; }
  .whatsapp-float { bottom:18px; right:18px; width:54px; height:54px; }
  .btn-enviar { align-self:center; width:100%; }
  .contacto-nota { text-align:center; }
}

/* ===== FADE IN ON SCROLL ===== */
.fade-in { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease,transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
