/* ==========================================================================
   ckd-3d.css — Identidad Kadari/Copitech (inicio + páginas de servicio)

   Se deriva del logo: marino de los engranes de Copitech, índigo del
   wordmark, y el naranja de la K de Kadari. Tipografía display ancha y
   pesada (Archivo expandida) que rima con el wordmark KADARI.

   Un solo momento fuerte: el "deck" 3D del hero (tres tarjetas en
   perspectiva sobre un piso de retícula). Todo lo demás es callado:
   filetes de 1px, sin sombras de tarjeta, sin degradados decorativos.
   ========================================================================== */

:root{
  --navy-deep:#05070d;
  --navy:#11141f;
  --indigo:#11141f;
  --orange:#f97316;
  --orange-ink:#1a0e00;
  --paper:#f4f5f7;
  --ink:#0d1030;
  --muted:#5b6078;
  --line:#e2e4ea;

  --brand:#11141f;
  --bg-soft:#f5f6fb;

  --f-display:'Archivo', 'Arial Black', system-ui, sans-serif;
}

/* ---------- Botones (sobrescribe Bootstrap) ---------- */
.btn-primary{
  --bs-btn-bg:var(--indigo); --bs-btn-border-color:var(--indigo);
  --bs-btn-hover-bg:var(--navy); --bs-btn-hover-border-color:var(--navy);
  --bs-btn-active-bg:var(--navy); --bs-btn-active-border-color:var(--navy);
  --bs-btn-focus-shadow-rgb:17,20,31;
  --bs-btn-disabled-bg:var(--indigo); --bs-btn-disabled-border-color:var(--indigo);
}
.btn-outline-primary{
  --bs-btn-color:var(--indigo); --bs-btn-border-color:var(--indigo);
  --bs-btn-hover-bg:var(--indigo); --bs-btn-hover-border-color:var(--indigo);
  --bs-btn-active-bg:var(--navy); --bs-btn-active-border-color:var(--navy);
}
/* Naranja: texto marino (blanco sobre #f97316 no pasa AA) */
.btn-orange{
  --bs-btn-color:var(--orange-ink); --bs-btn-bg:var(--orange); --bs-btn-border-color:var(--orange);
  --bs-btn-hover-color:var(--orange-ink); --bs-btn-hover-bg:#ff8a3a; --bs-btn-hover-border-color:#ff8a3a;
  --bs-btn-active-color:var(--orange-ink); --bs-btn-active-bg:#e8650c; --bs-btn-active-border-color:#e8650c;
  font-weight:800;
}
#header .btn-cta{
  --bs-btn-color:var(--orange-ink); --bs-btn-bg:var(--orange); --bs-btn-border-color:var(--orange);
  --bs-btn-hover-color:var(--orange-ink); --bs-btn-hover-bg:#ff8a3a; --bs-btn-hover-border-color:#ff8a3a;
}
#header .nav-link.active::after{ background:var(--orange); }
#header .nav-link:hover, #header .nav-link.active{ color:var(--navy); }

/* ---------- Menú agrupado ---------- */
.ckd-dd .dropdown-toggle::after{ margin-left:.4em; vertical-align:.15em; }
.ckd-dd-menu{
  border:1px solid var(--line); border-radius:12px; padding:.4rem; min-width:290px;
  box-shadow:0 14px 34px rgba(5,8,56,.14); margin-top:.5rem!important;
}
.ckd-dd-menu .dropdown-item{ border-radius:8px; padding:.6rem .8rem; white-space:normal; }
.ckd-dd-menu .dropdown-item strong{ display:block; font-weight:700; color:var(--ink); }
.ckd-dd-menu .dropdown-item small{ display:block; color:var(--muted); font-size:.8rem; }
.ckd-dd-menu .dropdown-item:hover, .ckd-dd-menu .dropdown-item:focus{ background:var(--paper); }
.ckd-dd-menu .dropdown-item.active{ background:var(--paper); box-shadow:inset 3px 0 0 var(--orange); }

/* ---------- Titulares ---------- */
.ckd-h{
  font-family:var(--f-display); font-weight:800; font-stretch:125%;
  font-variation-settings:'wdth' 125;
  letter-spacing:-.02em; line-height:1.05; color:var(--ink);
  font-size:clamp(1.75rem, 3.4vw, 2.6rem); margin:0 0 .75rem;
}
.ckd-lead{ color:var(--muted); font-size:1.075rem; max-width:56ch; }

/* ==========================================================================
   HERO — base compartida (fondo casi negro, titular, acciones).
   La escena del inicio vive en ckd-hero.css; las páginas de servicio usan
   .ckd-hero-actions y .ckd-link-light.
   ========================================================================== */
:root{
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --hero-bg:#05070d;
  --hero-line:rgba(255,255,255,.12);
  --hero-dim:rgba(255,255,255,.52);
}

#hero.ckd-hero, .ckd-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--hero-bg); color:#fff;
  padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);
}
.ckd-hero .ckd-h{
  color:#fff; font-weight:600; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(2.3rem, 4.9vw, 4.1rem); max-width:13ch;
}
.ckd-hero .ckd-lead{ color:rgba(255,255,255,.62); font-size:1.05rem; max-width:44ch; margin-top:1.25rem; }
.ckd-hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; margin-top:2rem; }
.ckd-link-light{
  color:rgba(255,255,255,.8); font-weight:600; text-decoration:underline; text-underline-offset:.32em;
  text-decoration-color:rgba(255,255,255,.25); transition:color 160ms ease, text-decoration-color 160ms ease;
}
.ckd-link-light:hover{ color:#fff; text-decoration-color:#fff; }
.ckd-hero-note{ margin-top:2.5rem; color:var(--hero-dim); font-size:.875rem; }

/* Respuesta al presionar (todas las acciones del hero) */
.ckd-hero .btn{ transition:transform 160ms var(--ease-out), background-color 160ms ease; }
.ckd-hero .btn:active{ transform:scale(.97); }

/* ==========================================================================
   Incluido sin costo (COPIX / AUDIX / SCANIX): filas con filete
   ========================================================================== */
.ckd-included{ padding:clamp(3rem,6vw,5rem) 0; background:#fff; }
.ckd-tools{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ckd-tool{
  display:grid; grid-template-columns:minmax(150px, 210px) 1fr auto; gap:.5rem 1.5rem; align-items:center;
  padding:1.35rem .25rem; border-bottom:1px solid var(--line); color:inherit; text-decoration:none;
  position:relative; transition:background .2s ease, padding .25s ease;
}
.ckd-tool::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:3px; background:var(--orange);
  transform:scaleY(0); transform-origin:50% 0; transition:transform .25s ease;
}
.ckd-tool:hover, .ckd-tool:focus-visible{ background:var(--paper); padding-left:1.1rem; color:inherit; }
.ckd-tool:hover::before, .ckd-tool:focus-visible::before{ transform:scaleY(1); }
.ckd-tool-name{
  font-family:var(--f-display); font-weight:900; font-variation-settings:'wdth' 125;
  font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; color:var(--navy);
}
.ckd-tool-desc{ color:var(--muted); margin:0; max-width:52ch; }
.ckd-tool-desc strong{ color:var(--ink); }
.ckd-tool-go{ color:var(--indigo); font-size:1.4rem; transition:transform .2s ease; }
.ckd-tool:hover .ckd-tool-go{ transform:translateX(5px); }
.ckd-free{
  display:inline-block; margin-top:1rem; font-weight:800; color:var(--navy);
  border-bottom:3px solid var(--orange); padding-bottom:.1rem;
}
@media (max-width:767.98px){
  .ckd-tool{ grid-template-columns:1fr auto; }
  .ckd-tool-desc{ grid-column:1 / -1; grid-row:2; }
}

/* ==========================================================================
   Detalle de servicio: lista 2×2 con filete (en lugar de tarjetas)
   ========================================================================== */
.ckd-detail{ padding:clamp(3rem,6vw,5rem) 0; background:var(--paper); }
.ckd-points{ display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; margin:0; padding:0; list-style:none; }
.ckd-points li{ padding:1.15rem 0; border-top:1px solid var(--line); }
.ckd-points i{ color:var(--orange); font-size:1.15rem; margin-right:.5rem; vertical-align:-.1em; }
.ckd-points h3{ font-size:1.05rem; font-weight:800; margin:0 0 .25rem; }
.ckd-points p{ margin:0; color:var(--muted); font-size:.95rem; }
@media (max-width:767.98px){ .ckd-points{ grid-template-columns:1fr; } }

/* ==========================================================================
   Páginas de servicio (renta-computo, venta-equipos, audix, scanix)
   ========================================================================== */
.ckd-page-hero{
  position:relative; overflow:hidden; isolation:isolate; background:var(--navy-deep); color:#fff;
  padding:clamp(2.5rem,6vw,4.5rem) 0;
}
.ckd-page-hero .ckd-h{ color:#fff; font-size:clamp(2rem,4.2vw,3.2rem); }
.ckd-page-hero .ckd-lead{ color:rgba(255,255,255,.8); }
.ckd-page-hero .ckd-floor{ height:100%; bottom:-30%; opacity:.7; }
.ckd-photo{
  border-radius:14px; overflow:hidden; background:#e9ecf9;
  box-shadow:0 30px 50px -24px rgba(0,0,0,.7);
  transform:perspective(1200px) rotateY(-9deg) rotateX(3deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.ckd-photo:hover{ transform:perspective(1200px) rotateY(0) rotateX(0); }
.ckd-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ckd-photo img.is-cutout{ object-fit:contain; padding:1.5rem; }
@media (max-width:991.98px){ .ckd-photo{ transform:none; } }

.ckd-split{ padding:clamp(3rem,6vw,5rem) 0; }
.ckd-split.is-soft{ background:var(--paper); }
.ckd-usecases{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.ckd-usecases li{ border:1px solid var(--line); border-radius:999px; padding:.4rem .95rem; font-weight:600; background:#fff; }

.ckd-steps{ list-style:none; margin:0; padding:0; counter-reset:s; border-top:1px solid var(--line); }
.ckd-steps li{ counter-increment:s; display:grid; grid-template-columns:2.4rem 1fr; gap:.25rem 1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.ckd-steps li::before{
  content:counter(s); font-family:var(--f-display); font-weight:900; font-variation-settings:'wdth' 125;
  color:var(--orange); font-size:1.5rem; line-height:1; grid-row:1 / span 2;
}
.ckd-steps strong{ font-size:1.05rem; }
.ckd-steps span{ color:var(--muted); }

.ckd-cta-band{ background:var(--navy-deep); color:#fff; padding:clamp(2.5rem,5vw,4rem) 0; }
.ckd-cta-band .ckd-h{ color:#fff; }
.ckd-cta-band p{ color:rgba(255,255,255,.78); max-width:56ch; }

/* Marcas: más sobrias en el inicio */
.brand-tile{ box-shadow:none!important; }
.brand-tile:hover{ transform:none!important; border-color:var(--indigo); }

/* Movimiento reducido: sin entrada ni inclinación */
@media (prefers-reduced-motion: reduce){
  .ckd-deck.is-intro{ animation:none!important; }
  .ckd-photo, .ckd-card{ transition:none!important; }
}


#header .nav-link{ color:var(--ink); }
#header .nav-link:hover, #header .nav-link.active, #header .nav-link.show{ color:var(--navy); }
#header .nav-link:hover{ color:var(--indigo); }

/* Secciones heredadas: mismos titulares y acentos que el resto */
main h2:not(.ckd-h){
  font-family:var(--f-display); font-weight:800; font-variation-settings:'wdth' 125;
  letter-spacing:-.02em; line-height:1.1; color:var(--ink);
}
.bg-primary{ background-color:var(--indigo)!important; }
.section-soft{ background:var(--paper); }

html, body{ overflow-x:clip; }

/* Placa 3D para las páginas de herramientas (AUDIX / SCANIX) */
.ckd-plate{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  aspect-ratio:4/3; border-radius:14px; background:#fff; color:var(--navy);
  box-shadow:0 30px 50px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4) inset;
  transform:perspective(1100px) rotateY(-14deg) rotateX(5deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  border-bottom:6px solid var(--orange);
}
.ckd-plate:hover{ transform:perspective(1100px) rotateY(0) rotateX(0); }
.ckd-plate i{ font-size:4.2rem; line-height:1; color:var(--indigo); }
.ckd-plate span{ font-family:var(--f-display); font-weight:900; font-variation-settings:'wdth' 125; font-size:2.1rem; letter-spacing:-.02em; }
@media (max-width:991.98px){ .ckd-plate{ transform:none; aspect-ratio:auto; padding:1.5rem; flex-direction:row; justify-content:flex-start; } }
@media (prefers-reduced-motion: reduce){ .ckd-plate{ transition:none; } }

/* Sin piso de retícula: el sitio es minimalista */
.ckd-floor{ display:none; }

/* Minimalista: titulares en peso 600 en todo el sitio, como el hero */
.ckd-h, main h2:not(.ckd-h){ font-weight:600; letter-spacing:-.03em; }
.ckd-tool-name{ font-weight:600; }
.ckd-card-body h2, .ckd-plate span{ font-weight:600; }
.ckd-steps li::before{ font-weight:600; }

/* Inicio: tras la escena gris neutra, la sección de detalle va en blanco */
#servicios.ckd-detail{ background:#fff; }