/* ==========================================================================
   Comercializadora Kadari — Estilos mobile-first
   Requiere: Bootstrap, AOS y (opcional) Swiper
   ========================================================================== */

/* ==============================
   1) Variables y fundamentos
   ============================== */
:root{
  /* Colores */
  --brand:#2563eb;           /* azul primario */
  --brand-2:#f97316;         /* acento naranja */
  --ink:#0f172a;             /* texto principal */
  --muted:#64748b;           /* texto secundario */
  --line:#e2e8f0;            /* bordes suaves */
  --bg:#ffffff;              /* fondo base */
  --bg-soft:#f8fafc;         /* secciones suaves */

  /* UI */
  --radius-2xl:1.25rem;
  --shadow-sm:0 6px 16px rgba(2,6,23,.06);
  --shadow-md:0 10px 30px rgba(2,6,23,.10);

  /* Medidas */
  --brand-logo-w:160px;
  --brand-logo-h:48px;       /* sube logos 320x96 (2x) */

  /* Tipografía / Ritmo vertical */
  --fs-1: clamp(32px, 5vw, 56px);
  --fs-2: clamp(24px, 3.2vw, 36px);
  --fs-3: 18px;
  --lh: 1.45;
  --space: 16px;             /* unidad base de espaciado */
}

/* Box sizing coherente */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:var(--lh);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin:0;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--brand); }

/* Accesibilidad */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset:2px;
}
.fw-extrabold{ font-weight:800!important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ==============================
   2) Utilidades pequeñas
   ============================== */
.text-muted{ color:var(--muted)!important; }
.border-soft{ border:1px solid var(--line); }
.shadow-soft{ box-shadow:var(--shadow-sm); }
.bg-soft{ background:var(--bg-soft)!important; }

/* Tipografía fluida */
h1{ font-size:var(--fs-1); margin:0 0 calc(var(--space)*.75); }
h2{ font-size:var(--fs-2); margin:0 0 calc(var(--space)*.75); }

/* ==============================
   3) Preloader
   ============================== */
.preloader{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#fff; z-index:10000;
  transition:opacity .3s ease, visibility .3s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; }
.spinner{
  width:56px; height:56px; border-radius:50%;
  border:4px solid #e2e8f0; border-top-color:var(--brand);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==============================
   4) Barra de progreso lectura
   ============================== */
.reading-progress{
  position:fixed; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transform-origin:0 50%; transform:scaleX(0);
  z-index:1200;
}

/* ==============================
   5) Header / Navegación
   ============================== */
#header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(2,6,23,.06);
}
#header .nav-link{ font-weight:600; }
#header .nav-link.active,
#header .nav-link:hover{ color:var(--brand); }
#header .nav-link.active{ position:relative; }
#header .nav-link.active::after{
  content:""; position:absolute; left:.4rem; right:.4rem; bottom:.2rem;
  height:2px; background:var(--brand); border-radius:2px;
}
.btn-cta{
  border-radius:999px; padding:.6rem 1rem; font-weight:800;
}

/* Offcanvas móvil */
.offcanvas .list-unstyled a{ color:var(--ink); display:block; padding:10px 0; }
.offcanvas .list-unstyled a:hover{ color:var(--brand); }

/* ==============================
   6) Hero
   ============================== */
#hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 80% at 10% -10%, rgba(37,99,235,.10), transparent),
    radial-gradient(60% 80% at 110% 10%, rgba(249,115,22,.10), transparent),
    var(--bg);
}
.blob{
  position:absolute; right:-160px; top:-120px;
  width:560px; height:560px; border-radius:50%;
  background: conic-gradient(from 90deg, rgba(37,99,235,.15), rgba(249,115,22,.15));
  filter:blur(40px); opacity:.8;
}
.lead-muted{ color:var(--muted); }
.hero-callout{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}

/* ==============================
   7) Secciones / contenedores
   ============================== */
.section-soft{ background:var(--bg-soft); }

/* ==============================
   8) Servicios
   ============================== */
.service-card{
  border:1px solid var(--line); border-radius:20px; padding:22px; height:100%;
  transition:transform .18s ease, box-shadow .18s ease; box-shadow:var(--shadow-sm);
  background:#fff;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service-icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(249,115,22,.12));
}

/* ==============================
   9) Marcas
   ============================== */
.brand-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
@media (min-width:576px){ .brand-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px){ .brand-grid{ grid-template-columns:repeat(6,1fr); } }

.brand-tile{
  border:1px solid var(--line); border-radius:16px; background:#fff;
  padding:16px; display:grid; place-items:center; height:110px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.brand-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.brand-tile img{
  width:var(--brand-logo-w); height:var(--brand-logo-h);
  object-fit:contain; filter:grayscale(1); opacity:.9; transition:.2s ease;
}
.brand-tile:hover img{ filter:none; opacity:1; }

/* ==============================
   10) Clientes (Swiper)
   ============================== */
.logo-swiper .swiper-slide{ display:flex; align-items:center; justify-content:center; }
.logo-swiper img{ height:36px; filter:grayscale(1); opacity:.75; transition:.2s ease; }
.logo-swiper img:hover{ filter:none; opacity:1; }
/* Oculta bullets/paginación + elimina espacio extra */
.logo-swiper .swiper-pagination{ display:none!important; }
.logo-swiper{ padding-bottom:0!important; }

/* ==============================
   11) FAQ (details)
   ============================== */
details{
  border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff;
}
details + details{ margin-top:12px; }
details summary{ cursor:pointer; list-style:none; font-weight:700; }
details summary::marker{ content:""; }
details[open]{ box-shadow:var(--shadow-sm); }

/* ==============================
   12) Contacto / Forms
   ============================== */
.contact-card{
  border:1px solid var(--line); border-radius:24px; padding:24px;
  box-shadow:var(--shadow-sm); background:#fff;
}

/* Mejoras móviles de formularios */
label.form-label{ font-weight:700; }
.form-control{
  border-radius:12px; border:1px solid var(--line);
  padding:.75rem .9rem; line-height:1.25;
}
.form-control:focus{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent);
}
.btn{ min-height:44px; }                 /* Tap target accesible */
.btn-lg{ min-height:48px; }

/* ==============================
   13) Toast flotante
   ============================== */
.toast-floating{
  position:fixed; left:50%; bottom:24px;
  transform:translateX(-50%) translateY(12px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:1300; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-md); border-radius:14px;
  padding:12px 14px; display:flex; align-items:center; gap:10px;
}
.toast-floating.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast-floating.success .icon{ color:#16a34a; }
.toast-floating.danger .icon{ color:#dc2626; }
.toast-floating .close{
  background:transparent; border:0; font-size:18px; line-height:1; opacity:.6; cursor:pointer;
}

/* ==============================
   14) Footer
   ============================== */
#footer{ border-top:1px solid var(--line); background:var(--bg-soft); }

/* ==============================
   15) Dock vertical (acciones)
   ============================== */
.actions-dock .btn{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* =========================================================
   16) Responsivo (mobile-first → sube en breakpoints)
   ========================================================= */

/* ==== MÓVIL (base) ajustes extra ==== */
@media (max-width: 767.98px){
  /* 1) Sin scroll lateral por desbordes */
  html, body{ width:100%; overflow-x:hidden; }
  #hero, .section-soft, .container, .swiper, .logo-swiper{ overflow-x:clip; }

  /* 2) Ajusta blob para pantallas chicas */
  .blob{ right:-20vw; top:-30vw; width:120vw; height:120vw; }

  /* 3) Logos de marcas más pequeños y tarjetas compactas */
  :root{
    --brand-logo-w:120px;
    --brand-logo-h:40px;
  }
  .brand-grid{ gap:16px; }
  .brand-tile{ padding:12px; height:96px; }
  .brand-tile img{
    max-width:min(100%, var(--brand-logo-w));
    max-height:var(--brand-logo-h);
    width:auto; height:auto; object-fit:contain;
  }

  /* 4) Botones y toast adaptables */
  .btn, .btn-lg{ max-width:100%; }
  .toast-floating{ bottom:16px; max-width:calc(100vw - 32px); }

  /* 5) Hero callout centrado en móvil */
  .hero-callout{ display:inline-flex; }

  /* 6) Separaciones un poco más compactas */
  section{ scroll-margin-top:72px; } /* anclas cómodas con header sticky */
}

/* ==== Tablet (≥ 768px) ==== */
@media (min-width:768px){
  .logo-swiper img{ height:42px; }
}

/* ==== Desktop (≥ 1200px) ==== */
@media (min-width:1200px){
  .logo-swiper img{ height:46px; }
}

/* ===== Miniraíl lateral (esquina inferior derecha) ===== */
.side-rail{
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  flex-direction: column;   /* apila hacia arriba */
  gap: 8px;
  z-index: 1100;
  pointer-events: auto;
}

.rail-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  touch-action: manipulation; /* mejor respuesta en móvil */
}
.rail-btn i{ font-size: 18px; }
.rail-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }

.rail-btn.brand{ background: var(--brand); color: #fff; border-color: transparent; }
.rail-btn.whatsapp{ background: #22c55e; color: #fff; border-color: transparent; }

/* Ocultarlo en desktop (tu HTML ya tiene d-lg-none, esto es redundante por si acaso) */
@media (min-width: 992px){
  .side-rail{ display: none !important; }
}

/* Ajustes ultra-compactos en pantallas muy chicas */
@media (max-width: 360px){
  .side-rail{ right: 8px; bottom: 8px; gap: 6px; }
  .rail-btn{ width: 40px; height: 40px; }
}