/* ============================================================
   VisualWS — kilcom.css
   Propuesta KILCOM · misma estética/branding que VisualWS
   (usa los tokens y la fuente de base.css)
   ============================================================ */

body{ background:var(--paper); color:var(--ink); }

/* ===================== HEADER (sin menú) ===================== */
.kheader{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gutter);
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.kheader__logo{ display:flex; align-items:center; height:30px; }
.kheader__logo img{ height:100%; width:auto; display:block; }
.kheader__cta{ font-size:.86rem; }

/* ===================== HERO ===================== */
.khero{ padding:calc(var(--header-h) + clamp(3rem,9vh,7rem)) 0 clamp(2.5rem,6vh,4.5rem); }
.khero__inner{ }
.khero__eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:clamp(1.2rem,3vh,2rem); }
.khero__eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-ink); }
.khero__title{ font-size:clamp(2.4rem,6.4vw,5.6rem); line-height:.98; letter-spacing:-.025em; text-transform:none; max-width:18ch; }
.khero__title em{ color:var(--accent-ink); }
.khero__sub{ margin-top:clamp(1.4rem,3vh,2.2rem); max-width:60ch; color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.5; }
.khero__meta{ display:flex; flex-wrap:wrap; gap:1rem 2.4rem; margin-top:clamp(2rem,4vh,3rem); padding-top:1.6rem; border-top:1px solid var(--line); }
.khero__meta div{ display:flex; flex-direction:column; gap:.3rem; }
.khero__meta b{ font-size:1.05rem; font-weight:600; }
.khero__hint{ margin-top:2rem; font-size:.95rem; color:var(--muted); display:flex; align-items:center; gap:.6rem; }
.khero__hint svg{ flex:0 0 auto; }

/* ===================== GRUPOS DE SERVICIOS ===================== */
.kgroup{ padding-block:clamp(2.5rem,6vh,4.5rem); }
.kgroup__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,4vh,2.8rem); }
.kgroup__title{ font-size:clamp(1.8rem,3.6vw,3rem); line-height:1; text-transform:none; letter-spacing:-.02em; }
.kgroup__note{ font-size:.85rem; color:var(--muted); }

.kgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem); align-items:start; }

/* ===================== TARJETA DE SERVICIO ===================== */
.svc{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:18px; background:var(--paper);
  padding:clamp(1.6rem,2.4vw,2.4rem);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.svc.is-selected{ border-color:var(--ink); box-shadow:0 24px 50px -28px rgba(0,0,0,.35); }
.svc--wide{ grid-column:1 / -1; }
.svc__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.svc__badge{ font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.34rem .7rem; border-radius:100px; white-space:nowrap; }
.svc__badge--once{ background:#efe7d8; color:#8a682c; }
.svc__badge--month{ background:#0a0a0a; color:#f2f1ee; }
.svc__num{ font-family:var(--font); font-size:.8rem; color:var(--muted); }
.svc__title{ font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.05; letter-spacing:-.02em; margin:1rem 0 .8rem; }
.svc__desc{ color:var(--muted); font-size:.98rem; line-height:1.5; }
.svc__list{ list-style:none; margin:1.2rem 0 0; display:flex; flex-direction:column; gap:.55rem; }
.svc__list li{ position:relative; padding-left:1.5rem; font-size:.94rem; line-height:1.4; }
.svc__list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--accent-ink); }
.svc__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; }
@media (max-width:560px){ .svc__cols{ grid-template-columns:1fr; } }
.svc__excl{ margin-top:1.2rem; padding-top:1rem; border-top:1px dashed var(--line); font-size:.84rem; color:var(--muted-dark); }
.svc__excl b{ color:var(--ink); font-weight:600; }
.svc__cond{ margin-top:1rem; font-size:.82rem; color:var(--muted); }

.svc__foot{ margin-top:auto; padding-top:1.6rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.svc__price{ display:flex; flex-direction:column; gap:.15rem; }
.svc__price .amount{ font-family:var(--font); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; line-height:1; }
.svc__price .period{ font-size:.78rem; color:var(--muted); letter-spacing:.02em; }

/* toggle "agregar" */
.svc__add{ cursor:pointer; user-select:none; }
.svc__add input{ position:absolute; opacity:0; pointer-events:none; }
.svc__add .pillbtn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.2rem; border-radius:100px; border:1px solid var(--ink);
  font-size:.88rem; font-weight:500; transition:background .35s var(--ease), color .35s var(--ease);
  background:transparent; color:var(--ink);
}
.svc__add .pillbtn .ic{ width:15px; height:15px; }
.svc__add .pillbtn .txt-off{ display:inline; }
.svc__add .pillbtn .txt-on{ display:none; }
.svc__add input:checked ~ .pillbtn{ background:var(--ink); color:var(--paper); }
.svc__add input:checked ~ .pillbtn .txt-off{ display:none; }
.svc__add input:checked ~ .pillbtn .txt-on{ display:inline; }
.svc__add:hover .pillbtn{ background:var(--ink); color:var(--paper); }

/* add-ons (viáticos / drone) dentro de una tarjeta */
.svc__addons{ margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.7rem; }
.addon{ display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; user-select:none; opacity:.5; transition:opacity .3s; }
.addon.is-enabled{ opacity:1; }
.addon input{ position:absolute; opacity:0; pointer-events:none; }
.addon__box{ display:inline-flex; align-items:center; gap:.7rem; font-size:.92rem; }
.addon__check{ width:20px; height:20px; border:1.5px solid var(--ink); border-radius:6px; display:grid; place-items:center; flex:0 0 auto; transition:background .25s; }
.addon__check svg{ opacity:0; transition:opacity .2s; }
.addon input:checked ~ .addon__box .addon__check{ background:var(--ink); }
.addon input:checked ~ .addon__box .addon__check svg{ opacity:1; }
.addon__price{ font-weight:600; font-size:.92rem; white-space:nowrap; }

/* ===================== CTA FINAL ===================== */
.kclose{ padding:clamp(3rem,8vh,6rem) 0 clamp(7rem,12vh,9rem); }
.kclose__card{ background:var(--black); color:var(--on-dark); border-radius:22px; padding:clamp(2.4rem,5vw,4.5rem); text-align:center; }
.kclose__title{ font-size:clamp(2rem,5vw,4rem); line-height:1; letter-spacing:-.02em; text-transform:none; }
.kclose__sub{ margin:1.2rem auto 2rem; max-width:46ch; color:var(--muted-dark); }
.kclose__cta{ background:var(--on-dark); color:var(--black); }
.kclose__cta:hover{ background:transparent; color:var(--on-dark); }

/* ===================== FOOTER ===================== */
.kfooter{ background:var(--black); color:var(--muted-dark); padding:clamp(2rem,5vh,3rem) 0; }
.kfooter__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; font-size:.82rem; }
.kfooter__in a:hover{ color:var(--on-dark); }
.kfooter__brand{ display:flex; align-items:center; gap:.7rem; color:var(--on-dark); font-weight:600; }
.kfooter__brand img{ height:22px; filter:invert(1) brightness(2.4); }

/* ===================== PRESUPUESTO FLOTANTE ===================== */
.budget{
  position:fixed; z-index:80; right:var(--gutter); bottom:clamp(1rem,3vh,1.8rem);
  width:min(360px, calc(100vw - 2 * var(--gutter)));
  background:#0a0a0a; color:var(--on-dark);
  border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  padding:1.3rem 1.4rem; transform:translateY(0); transition:transform .5s var(--ease), opacity .4s;
}
.budget__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.budget__label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-dark); }
.budget__toggle{ display:none; font-size:.72rem; color:var(--muted-dark); }
.budget__lines{ margin:.9rem 0; display:flex; flex-direction:column; gap:.6rem; }
.budget__line{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.budget__line span{ font-size:.9rem; color:var(--muted-dark); }
.budget__line strong{ font-family:var(--font); font-weight:600; font-size:1.25rem; letter-spacing:-.01em; }
.budget__line strong small{ font-size:.62em; color:var(--muted-dark); font-weight:500; margin-left:.15em; }
.budget__line.is-zero{ opacity:.4; }
.budget__count{ font-size:.8rem; color:var(--muted-dark); margin-bottom:1rem; }
.budget__cta{ width:100%; justify-content:center; background:var(--on-dark); color:#0a0a0a; }
.budget__cta:hover{ background:#fff; }
body.budget-collapsed .budget{ transform:translateY(calc(100% - 56px)); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:820px){
  .kgrid{ grid-template-columns:1fr; }
  .khero__title{ max-width:none; }
}
@media (max-width:560px){
  .budget{ right:0; left:0; bottom:0; width:100%; border-radius:18px 18px 0 0; }
  .budget__toggle{ display:inline; cursor:pointer; }
  .kheader__cta{ font-size:.78rem; padding:.55rem .85rem; }
}

/* reveals (reusa la lógica de effects.css con data-reveal) */
[data-reveal="fade"]{ opacity:0; transform:translateY(26px); }
[data-reveal="fade"].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } }