/* ==========================================================
   style-landing.css — Landing Ads (tema claro) 100% responsive
   ========================================================== */

:root{
  --bg:#ffffff;
  --panel:#f8fafc;
  --ink:#0f172a;        /* texto principal */
  --muted:#64748b;      /* texto secundario */
  --line:#e2e8f0;       /* bordes */
  --brand:#2563eb;      /* azul */
  --brand-2:#60a5fa;    /* azul claro para degradé (fix var) */
  --accent:#f97316;     /* naranja */
  --success:#16a34a;
  --danger:#dc2626;

  --radius-xl:22px;
  --shadow-sm:0 6px 16px rgba(2,6,23,.06);
  --shadow-md:0 14px 40px rgba(2,6,23,.10);

  /* Logos marcas */
  --brand-logo-w:160px;
  --brand-logo-h:48px; /* sube 320x96 para retina */
}

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

html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(800px 50% at -10% 0%, rgba(37,99,235,.08), transparent),
    radial-gradient(800px 50% at 110% 10%, rgba(249,115,22,.08), transparent),
    var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--brand); }
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 50%, transparent);
  outline-offset:2px;
}

/* Preloader */
.preloader{
  position: fixed; inset:0; display:grid; place-items:center; z-index:2000;
  background:#fff; transition: opacity .3s ease, visibility .3s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.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); } }

/* --------------------- 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;
}
/* --------------------- Header --------------------- */
#header{
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(2,6,23,.06);
  padding-top: env(safe-area-inset-top, 0);
}
#header .nav-link{ font-weight: 600; }
.btn-cta{
  border-radius: 999px; padding: .6rem 1rem; font-weight: 800;
}

/* Activo en desktop: subrayado suave */
#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;
}

/* Offcanvas: tipografía y separación amigable en móvil */
.offcanvas .list-unstyled a{ color: var(--ink); }
.offcanvas .list-unstyled a:hover{ color: var(--brand); }

/* --------------------- HERO split --------------------- */
.hero-split{ position:relative; }
.hero-split .display-title{
  font-weight:800; line-height:1.04;
  font-size: clamp(30px, 6.2vw, 56px);
  letter-spacing:-0.02em;
}
.eyebrow{
  color: var(--brand); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; display:inline-flex; align-items:center; gap:.5rem;
}
.lead-muted{ color: var(--muted); font-size: clamp(.98rem, 2.4vw, 1.08rem); }
.accent{ color: var(--brand); }
.hero-bullets{ list-style:none; padding:0; margin:1rem 0 0; color:var(--ink); }
.hero-bullets li{ display:flex; gap:.6rem; align-items:flex-start; margin:.35rem 0; }
.hero-bullets i{ color: var(--success); }

/* Panel derecho con diagonal sutil */
.hero-media{
  position: relative; border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(37,99,235,.10), rgba(249,115,22,.10)),
    var(--panel);
  border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  overflow: hidden;
}
.hero-media::after{
  content:""; position:absolute; inset:-10% -20% 50% auto;
  background: linear-gradient(90deg, rgba(255,255,255,.6), transparent);
  transform: skewX(-14deg);
  pointer-events:none;
}
.hero-img{ width:100%; height:auto; max-height:520px; object-fit:contain; }

/* Pills de navegación */
.hero-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-pills .pill{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:999px; padding:.45rem .8rem;
  background:#fff; box-shadow: var(--shadow-sm);
  font-weight:600;
}
.hero-pills .pill:hover{ border-color: var(--brand); color: var(--brand); }

/* Trustbar */
.trustbar{ display:flex; flex-wrap:wrap; gap:10px; }
.trustbar span{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px dashed var(--line); border-radius:999px; padding:.35rem .7rem;
  color: var(--muted); background:#fff;
}

/* Secciones */
.section-soft{ background: var(--panel); }

/* “365” enorme */
.big-365{
  font-size: clamp(72px, 16vw, 160px);
  font-weight: 800; line-height:.85;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(37,99,235,.15));
}
.feat{
  display:flex; align-items:center; gap:.6rem; border:1px solid var(--line);
  border-radius:12px; padding:.6rem .8rem; background:#fff; box-shadow: var(--shadow-sm);
}

/* Marcas (uniforme) */
.brand-grid{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
@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:.16s ease transform, .16s ease box-shadow;
}
.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;
}
.brand-tile:hover img{ filter: none; opacity:1; }

/* Proceso (pasos) */
.step-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; height:100%;
  box-shadow: var(--shadow-sm);
}
.step{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "JetBrains Mono", monospace;
  color: var(--brand); font-weight:700;
}

/* Swiper logos */
.logo-swiper .swiper-slide{ display:flex; align-items:center; justify-content:center; }
.logo-swiper img{ height:40px; filter: grayscale(1); opacity:.85; 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; }

/* FAQ */
.lp-faq{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; color: var(--ink);
}
.lp-faq + .lp-faq{ margin-top:12px; }
.lp-faq summary{ cursor:pointer; font-weight:700; }
.lp-faq[open]{ box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }

/* Contacto */
.contact-block{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.contact-block .form-control, .contact-block .form-select{
  background:#fff; border:1px solid var(--line);
}
.contact-block .form-control:focus, .contact-block .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Footer (acepta #footer y #lp-footer para compatibilidad) */
#footer, #lp-footer{ border-top:1px solid var(--line); background:#fff; }

/* Toast flotante */
.toast-floating{
  position: fixed; left:50%; bottom:22px; transform: translateX(-50%) translateY(12px);
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
  z-index:2200; 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; color:var(--ink);
}
.toast-floating.show{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }
.toast-floating.success .icon{ color: var(--success); }
.toast-floating.danger .icon{ color: var(--danger); }
.toast-floating .close{ background:transparent; border:0; font-size:18px; opacity:.6; cursor:pointer; }

/* ====== Copitech blocks ====== */
.brand-mark{ color: var(--bs-primary, #2563eb); font-weight: 800; }

/* Chips de razones */
.reason-chip{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--bs-border-color, #e2e8f0);
  border-radius:999px; padding:.55rem .9rem; background:#fff;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  justify-content:center; font-weight:600; color:#0f172a;
}
.reason-chip i{ color: var(--bs-primary, #2563eb); }

/* Tarjetas de servicio */
.svc-card{
  background:#fff; border:1px solid var(--bs-border-color, #e2e8f0);
  border-radius:18px; padding:18px; color:#0f172a;
  box-shadow: 0 14px 40px rgba(2,6,23,.10); height:100%;
}
.svc-head{ margin-bottom:.4rem; }
.svc-badge{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.02em;
  padding:.35rem .6rem; border-radius:999px;
  background: color-mix(in srgb, var(--bs-primary, #2563eb) 12%, #ffffff);
  color: var(--bs-primary, #2563eb);
  border:1px solid color-mix(in srgb, var(--bs-primary, #2563eb) 35%, #ffffff);
}
.svc-badge.alt{
  background: color-mix(in srgb, #f97316 12%, #ffffff);
  color:#f97316; border-color: color-mix(in srgb, #f97316 35%, #ffffff);
}
.svc-title{ font-weight:800; margin:.5rem 0; }

/* Lista de inclusiones */
.svc-includes{ list-style:none; padding-left:0; margin: .5rem 0 0; }
.svc-includes li{ display:flex; gap:.6rem; margin:.35rem 0; }
.svc-includes i{ color: var(--bs-success, #16a34a); }

/* Modo de pago */
.svc-model .chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px dashed var(--bs-border-color, #e2e8f0);
  border-radius:999px; padding:.35rem .7rem; background:#fff; color:#64748b;
}

/* ====== Why Copitech (diferenciadores) ====== */
.why-copitech .feature-card{
  background:#fff;
  border:1px solid var(--line, #e2e8f0);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow-sm, 0 6px 16px rgba(2,6,23,.06));
  height:100%;
  position:relative;
  transition:.16s ease transform, .16s ease box-shadow, .16s ease border-color;
}
.why-copitech .feature-card::after{
  content:"";
  position:absolute; inset:auto 12px 12px auto; width:36px; height:6px;
  border-radius:6px;
  background: linear-gradient(90deg, var(--brand,#2563eb), #f97316);
  opacity:.35; pointer-events:none;
}
.why-copitech .feature-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand,#2563eb) 30%, #e2e8f0);
  box-shadow: var(--shadow-md, 0 14px 40px rgba(2,6,23,.10));
}
.fc-icon{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; color: var(--brand,#2563eb);
  border:1px solid var(--line,#e2e8f0);
  margin-bottom:.6rem;
}
.fc-title{ font-weight:800; margin:0 0 .25rem; }
.fc-text{ color: var(--muted,#64748b); margin:0; }

/* KPI chips */
.kpi-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.kpi-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px dashed var(--line,#e2e8f0);
  border-radius:999px; padding:.45rem .8rem; background:#fff;
  color: var(--muted,#64748b);
}
.kpi-chip i{ color: var(--brand,#2563eb); }

/* ===== 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; 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;
}
.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; }
@media (min-width: 992px){ .side-rail{ display: none !important; } }
@media (max-width: 360px){
  .side-rail{ right: 8px; bottom: 8px; gap: 6px; }
  .rail-btn{ width: 40px; height: 40px; }
}

/* --------------------- Responsive tuning --------------------- */
@media (max-width: 991.98px){
  .hero-media{ padding:14px; }
  .hero-img{ max-height:420px; }
  .trustbar span{ font-size:.9rem; }
}
@media (max-width: 767.98px){
  .hero-img{ max-height:320px; }
  .brand-tile{ height:96px; }
  .hero-pills .pill{ padding:.4rem .7rem; font-size:.95rem; }
  .lp-faq{ padding:14px; }
  html, body{ width:100%; overflow-x:hidden; }
}
@media (max-width: 575.98px){
  .hero-pills{ gap:6px; }
  .trustbar{ gap:8px; }
  .trustbar span{ padding:.3rem .6rem; font-size:.9rem; }
  .svc-card{ padding:16px; }
  .contact-block{ padding:16px; }
}

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