/* ===== Búho Digital – Estilos base ===== */

/* Paleta */
:root{
  --bg-1:#070b14;     /* fondo principal */
  --bg-2:#0c1220;     /* secciones */
  --ink:#eaf2ff;      /* texto principal */
  --muted:#9fb0cc;    /* texto secundario */
  --owl:#ffd166;      /* acento ámbar */
  --owl-2:#7aa2ff;    /* acento azul */
  --card:#0f1729;     /* tarjetas */
  --line:#1c2741;     /* bordes */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 20px;
}
@media (prefers-color-scheme: light){
  :root{ --bg-1:#f6f8ff; --bg-2:#eef2ff; --ink:#0b1220; --muted:#4a5872; --card:#ffffff; --line:#dfe7ff; --shadow:0 10px 30px rgba(6,19,64,.08); }
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 70% -10%, #152042 0%, var(--bg-1) 45%) fixed;
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid color-mix(in oklab, var(--owl) 55%, white 0%); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

/* ===== NAVBAR ===== */
.navbar-blur{
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(7,11,20,.85), rgba(7,11,20,.45) 60%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* LOGO del navbar: controla tamaño y estética del PNG/JPG */
.navbar-brand img{
  width:40px; height:40px;
  object-fit:cover;           /* o 'contain' si tu logo tiene mucho borde blanco */
  border-radius:10px;
  display:block;
  background:#fff;            /* ayuda si el logo tiene transparencia muy clara */
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent 90%);
  box-shadow: var(--shadow);
}

/* Espaciado del texto junto al logo */
.navbar-brand .fw-bold{ letter-spacing:.2px; }

/* ===== HERO ===== */
.hero{ padding-top:7rem; padding-bottom:2rem; }
.hero-ill{
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(122,162,255,.18), rgba(255,209,102,.12));
  border:1px solid var(--line);
  height:360px; position:relative; box-shadow:var(--shadow);
}
.crescent{
  position:absolute; right:18%; top:28px; width:80px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 30% 35%, #fff8d6 10%, #ffe8a8 55%, rgba(255,255,255,0) 62%);
  filter:blur(.2px);
}
.owl-box{
  position:absolute; left:18px; right:18px; bottom:18px; height:240px; border-radius:18px;
  background:
    radial-gradient(60px 45px at 25% 55%, #2a365c 10%, #121a34 64%),
    radial-gradient(60px 45px at 75% 55%, #2a365c 10%, #121a34 64%),
    radial-gradient(120px 80px at 50% 60%, #1b2647 10%, #0e1630 60%),
    radial-gradient(600px 260px at 50% 120%, rgba(122,162,255,.3), rgba(0,0,0,0) 60%);
  border:1px solid var(--line);
}
.owl-box::after{
  content:""; position:absolute; inset:auto 0 0 0; height:24px; border-radius:0 0 18px 18px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}

/* Títulos y notas */
.section-title{ font-family:Poppins; font-weight:800; font-size:clamp(1.4rem, 2.6vw, 2rem); margin:0 0 8px; }
.section-sub{ color:var(--muted); margin:0 0 22px; }
.note{ font-size:.9rem; color:var(--muted); }

/* ===== Tarjetas / chips ===== */
.card-owl{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink);
}
.icon-owl{
  width:36px; height:36px; border-radius:10px;
  display:inline-grid; place-items:center;
  background:color-mix(in oklab, var(--owl) 70%, var(--owl-2) 30%);
  color:#1a1300; font-weight:900;
}
.chip{
  background:rgba(7,11,20,.7);
  border:1px solid var(--line);
  padding:.35rem .6rem;
  border-radius:999px; font-size:.78rem;
}

/* ===== Portafolio (imágenes) ===== */
#gridPortafolio img{
  height:220px; width:100%; object-fit:cover;
  border-radius:14px; border:1px solid var(--line);
}

/* ===== Reveal on scroll ===== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.show{ opacity:1; transform:none; }

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; right:18px; bottom:18px; z-index:999;
  opacity:0; pointer-events:none; transition:.25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }

/* Footer */
footer{ border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, transparent, rgba(255,255,255,.02)); }

/* Ajustes finos de listas en servicios */
.svc-list{ list-style: disc; }
.svc-list li::marker{ color: var(--owl); }