/* =====================
   Base / Tokens
===================== */
:root{
  --brand:#ff6a00;                  /* naranja principal */
  --brand-ink:#0b1220;              /* texto fuerte */
  --ink:#1f2937;                    /* cuerpo */
  --muted:#6b7280;                  /* secundarios */
  --surface:#ffffff;                /* fondo tarjetas */
  --surface-2:#f8fafc;              /* fondo secciones */
  --ring:#ffddbfb3;                 /* enfoque */
  --shadow-sm:0 8px 18px rgba(0,0,0,.06);
  --shadow-md:0 16px 30px rgba(0,0,0,.08);
  --radius:18px;
}

html{scroll-behavior:smooth}
body{color:var(--ink)}
.text-brand{color:var(--brand)}
.py-6{padding-block:4rem}

/* =====================
   Botones
===================== */
.btn-brand{
  background:var(--brand);
  color:#fff; border:none; border-radius:12px;
  padding:.85rem 1.2rem; font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-brand:hover{filter:brightness(.96); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-brand:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

.btn-brand-invert{
  background:#fff; color:var(--brand-ink); border:1px solid #e5e7eb;
  border-radius:12px; padding:.85rem 1.2rem; font-weight:700;
}
.btn-brand-invert:hover{background:#f9fafb}

.badge-soft-orange{
  display:inline-block; padding:.4rem .8rem; border-radius:999px;
  background:#fff3e9; color:var(--brand); font-weight:800; letter-spacing:.2px;
}

/* =====================
   Utilidades
===================== */
.img-rounded{border-radius:var(--radius)}
.rounded-4{border-radius:var(--radius)!important}
.btn-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; background:#eef2f7; color:#111827;
  transition:filter .2s ease, transform .18s ease;
}
.btn-circle:hover{filter:brightness(.98); transform:translateY(-1px)}
.topbar i{vertical-align:-1px}

/* Accesibilidad / motion */
:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

/* =====================
   HERO (sin conflictos)
   - Si quieres overlay, usa .hero--overlay en el <header>
===================== */
.hero{position:relative}
.hero--overlay::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.20) 100%);
  pointer-events:none;
}
.shadow-hero{box-shadow:var(--shadow-md)}

/* =====================
   CTA BG
===================== */
.cta-bg{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:url('../img/cta-bg.jpg') center/cover no-repeat, var(--surface-2);
}
.cta-bg::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.35);
}

/* =====================
   Process cards
===================== */
.card-process{
  border:0; background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  position:relative; transition:transform .18s ease, box-shadow .18s ease;
}
.card-process:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.card-process .icon-badge{
  width:56px; height:56px; border-radius:14px;
  background:#fff3e9; color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
}
.card-process .step-number{
  position:absolute; top:14px; right:14px;
  background:#eef2f7; border-radius:.6rem;
  padding:.22rem .5rem; font-weight:800; color:#475569; font-size:.82rem;
}

/* =====================
   Services
===================== */
.card-service{
  border:0; background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-service:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
/* Quitamos alturas fijas: usar .media para armonía */
.card-service .service-icon{
  position:absolute; top:-22px; left:22px;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px;
  background:#fff3e9; color:var(--brand); font-size:1.35rem;
  box-shadow:var(--shadow-md);
}

/* =====================
   Team
===================== */
.team-card{
  border:0; background:var(--surface); border-radius:var(--radius);
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.team-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.team-card .team-social{position:absolute; top:14px; left:14px; display:flex; gap:.5rem; z-index:2}
.team-card .team-social a{
  background:var(--brand); color:#fff; display:inline-flex;
  width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:.75rem; box-shadow:var(--shadow-sm);
}
.team-card::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 65%, rgba(0,0,0,.25) 100%);
}

/* =====================
   Navbar / Logo
===================== */
/* Tamaño consistente del logo – un solo lugar */
.navbar-brand img{
  display:block;
  max-height:42px;      /* desktop */
  height:auto; width:auto;
}
@media (max-width:991.98px){
  .navbar-brand img{max-height:34px}
}
.nav-link{font-weight:600}
.nav-link:hover{color:var(--brand)}

/* =====================
   Responsive tweaks
===================== */
@media (max-width:1199.98px){
  /* alturas ya controladas por .media */
}
@media (max-width:767.98px){
  .py-6{padding-block:3rem}
}

/* =====================
   Dark mode opcional
===================== */
@media (prefers-color-scheme: dark){
  :root{
    --brand-ink:#e5e7eb; --ink:#e5e7eb; --muted:#9aa4b2;
    --surface:#0f172a; --surface-2:#0b1220;
    --ring:#ff9a4db3;
  }
  .btn-brand-invert{background:transparent; color:#fff; border-color:#334155}
  .card-process, .card-service, .team-card{box-shadow:none; border:1px solid #1f2937}
  .badge-soft-orange{background:#3b2a21; color:#ffd2b2}
}

/* =====================
   Media ratios unificados
===================== */
.media{position:relative; overflow:hidden; border-radius:var(--radius); background:#f3f4f6}
.media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Ratios */
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--3x2{aspect-ratio:3/2}
.media--1x1{aspect-ratio:1/1}
.media--4x5{aspect-ratio:4/5}   /* retratos */