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

:root{
  --gold:#F9C74F;
  --bg1:#0e0e18;
  --bg2:#13131a;
  --panel:#1a182a;
  --text:#f0e6d2;
}

body{
  margin:0;
  padding:0;
  font-family:'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color:#0e0c1b;
  color:var(--text);
  animation: fadeIn .8s ease-in-out;
  line-height:1.6;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* ===== Navbar ===== */
.navbar{
  background: linear-gradient(to right, var(--bg1), var(--bg2));
  padding: 10px 20px;
  border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 999;
}
.navbar .navbar-toggler{ border-color: rgba(255,255,255,.25); }

.navbar-nav .nav-link{
  color:#fff;
  font-weight:700;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
  margin:0 6px; padding:6px 10px; border-radius:6px; text-decoration:none;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  background:var(--gold); color:#1C1C26; transform: translateY(-1px);
}
/* ACTIVO (unificado con el resto del sitio) */
.navbar-nav .nav-link.active{
  background: var(--gold);
  color: #1C1C26;
  border-radius: 6px;
}

/* Logo */
#logo{
  width:48px; height:auto; border-radius:50%;
  box-shadow:0 0 10px var(--gold); transition: transform .3s;
}
#logo:hover{ transform: rotate(5deg) scale(1.06); }

.fecha-hora, #fecha-hora-mobile{
  color:#fff; font-size:.9rem; font-weight:700;
}

/* ===== OFFCANVAS (menú móvil “glass/blur”) ===== */
.offcanvas-custom{
  --bs-offcanvas-width: min(420px, 90vw);
  background: rgba(19, 19, 26, 0.72);
  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 var(--gold); }
.offcanvas-title{ font-weight:700; color:var(--gold); }

.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,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
  transform: translateX(12px); opacity:0; animation: slideIn .45s ease forwards;
}
.mobile-link i{ font-size:1.2rem; } .mobile-link span{ font-weight:600; }
.mobile-link .arrow{ opacity:.6; }
.mobile-link:hover{ background:var(--gold); color:#1c1c26; transform: translateX(0) scale(1.02); }
/* ACTIVO en móvil (unificado) */
.mobile-link.active{ background: var(--gold); 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); }

/* ===== Sección Servicios ===== */
.servicios{
  padding: 4rem 1.25rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.titulo-seccion{
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3rem);
  margin-bottom: 1rem;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
  animation: glow 2s infinite alternate;
}
@keyframes glow{ from{ text-shadow:0 0 5px var(--gold); } to{ text-shadow:0 0 20px var(--gold); } }
.descripcion-seccion{ font-size: clamp(1rem, .95rem + .5vw, 1.2rem); color:#d6d6d6; margin-bottom: 2.2rem; }

/* Grid responsive con tarjetas */
.servicios-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
  padding-bottom: 2rem;
}

/* Tarjeta de servicio */
.servicio{
  background-color: var(--panel);
  border: 1px solid rgba(255, 200, 87, .25);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  justify-content: space-between;
  box-shadow: 0 0 15px rgba(255,200,87,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.servicio:hover{
  transform: translateY(-6px);
  box-shadow: 0 0 22px rgba(255,200,87,.28);
  border-color: rgba(255,200,87,.45);
}

.servicio img{
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: contain;
  margin-bottom: .5rem;
}

.servicio h2{
  color: #ffa500;
  font-size: 1.2rem;
  margin: .25rem 0 .2rem;
}
.servicio p{
  color:#ccc; font-size: 1rem; line-height:1.55; flex-grow:1;
}

/* Botón */
.boton-wrapper{ margin-top:.5rem; }
.boton-servicio{
  display:inline-block;
  padding:.6rem 1.1rem;
  background: linear-gradient(135deg, #ffc857, #ff9900);
  color:#0e0c1b; font-weight:700; text-decoration:none;
  border-radius: 999px;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
  box-shadow: 0 0 10px rgba(255,200,87,.2);
}
.boton-servicio:hover{
  background: linear-gradient(135deg, #ffb347, #ff7700);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 20px rgba(255,200,87,.45);
}

/* ===== Responsive tweaks ===== */
@media (max-width: 768px){
  .servicios{ padding: 3rem 1rem 2.2rem; }
}