/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to bottom, #09090f, #0c0c18);
  margin: 0; padding: 0; color: #FFFFFF;
  animation: fadeIn 2s ease-in-out; line-height: 1.6;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Navbar ===== */
.navbar {
  background: linear-gradient(to right, #0e0e18, #13131a);
  padding: 10px 20px;
  border-bottom: 3px solid #F9C74F;
}
.navbar .navbar-toggler { border-color: rgba(255,255,255,.25); }

.navbar-nav .nav-link {
  color: #FFFFFF; font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  margin: 0 6px; padding: 6px 10px; border-radius: 6px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background: #F9C74F; color: #1C1C26; transform: translateY(-1px);
}
.navbar-nav .nav-link.active {
  background: #F9C74F; color: #1C1C26; border-radius: 6px; font-weight: 700;
}

#logo { width: 48px; height: auto; border-radius: 50%; box-shadow: 0 0 10px #F9C74F; transition: transform 0.3s; }
#logo:hover { transform: rotate(5deg) scale(1.06); }

/* ===== Offcanvas ===== */
.offcanvas-custom{
  --bs-offcanvas-width: min(420px, 90vw);
  background: rgba(19,19,26,.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color:#fff; border-left:1px solid rgba(255,255,255,.08);
}
@media (max-width: 576px){ .offcanvas-custom{ --bs-offcanvas-width: 100vw; } }

.offcanvas-header{ padding: 18px 18px 10px; }
.offcanvas-logo{ width:36px; height:36px; border-radius:50%; box-shadow:0 0 8px #F9C74F; }
.offcanvas-title{ font-weight:700; color:#F9C74F; }

.mobile-nav{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.mobile-link{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; text-decoration:none;
  color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 2px 12px rgba(0,0,0,.25);
  transform:translateX(12px); opacity:0; animation:slideIn .45s ease forwards;
}
.mobile-link i{ font-size:1.2rem; }
.mobile-link:hover{ background:#F9C74F; color:#1c1c26; transform:translateX(0) scale(1.02); }
.mobile-link.active{ background:#F9C74F; color:#1c1c26; }

.mobile-link:nth-child(1){animation-delay:.05s}
.mobile-link:nth-child(2){animation-delay:.12s}
.mobile-link:nth-child(3){animation-delay:.19s}
.mobile-link:nth-child(4){animation-delay:.26s}
.mobile-link:nth-child(5){animation-delay:.33s}

@keyframes slideIn{ to{ transform:translateX(0); opacity:1; } }

.offcanvas-cta .btn{ box-shadow:0 6px 20px rgba(249,199,79,.25); border:none; }
.offcanvas-footer{ border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.9); }

/* ===== Hero ===== */
.hero{
  text-align:center; padding:3rem 1rem; background-color:#0c0c1b;
  border-bottom:2px solid #F9C74F; animation:fadeIn 1.5s ease-in-out;
}
.hero h1{ font-size:clamp(1.8rem, 2vw + 1.2rem, 3rem); color:#F9C74F; margin-bottom:1rem; }
.hero p{ font-size:1.1rem; color:#e0d8c8; }

/* ===== Contacto ===== */
.contacto{
  display:flex; flex-wrap:wrap; justify-content:space-around; padding:3rem 1rem; gap:2rem;
}
.info-contacto{
  max-width:400px; background:#1e1e2f; padding:2rem; border-radius:10px; box-shadow:0 0 10px #F9C74F;
  animation:slideUp 1.0s ease forwards; animation-delay:.1s;
}
.info-contacto h2{ color:#F9C74F; margin-bottom:1rem; }
.info-contacto p{ margin:.5rem 0; line-height:1.6; }

.formulario-contacto{
  flex:1; min-width:300px; max-width:540px; background:#1e1e2f; padding:2rem; border-radius:10px; box-shadow:0 0 10px #F9C74F;
  animation:slideUp 1.0s ease forwards; animation-delay:.2s;
}
.formulario-contacto input,
.formulario-contacto textarea{
  width:100%; padding:.85rem; margin-bottom:1rem; background:#2c2c40; border:1px solid #F9C74F;
  border-radius:6px; color:#f0eada; font-size:1rem;
}

.btn-enviar{
  background:#F9C74F; border:none; padding:.8rem 1.2rem; color:#1c1c26; font-size:1rem; border-radius:6px; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.btn-enviar:hover{ transform:scale(1.03); box-shadow:0 8px 18px rgba(249,199,79,.25); }

.btn-spinner{
  display:inline-block; width:1rem; height:1rem; margin-left:.5rem; border:.15rem solid rgba(0,0,0,.2); border-top-color:#1c1c26;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-feedback{ margin-top:.75rem; min-height:1.2rem; }
.form-feedback.ok{ color:#69f0ae; }
.form-feedback.error{ color:#ff8a80; }

/* ===== Footer ===== */
footer{ text-align:center; padding:1rem; background:#1a1a2e; color:#F9C74F; font-size:1rem; animation:fadeIn 2s ease-in; }

/* Animaciones */
@keyframes slideUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* Responsivo suave */
@media (max-width: 992px){
  .contacto{ padding:2rem 1rem; }
}
@media (max-width: 576px){
  .info-contacto, .formulario-contacto{ padding:1.25rem; }
}