/* ============================================================
   Kairos Contabilidad — sitio público
   Editorial cálido: degradados suaves de marca (dorado / verde /
   coral), profundidad medida y movimiento con intención.
   Paleta y tipografías de Kairos, sin cambios.
   ============================================================ */

:root{
  --ink:#1B2430;
  --ink-soft:#3D4759;
  --ink-faint:#5A6472;
  --paper:#F6F5F1;
  --paper-raised:#FFFFFF;

  --gold:#D89B2E;
  --gold-deep:#8A6112;
  --gold-soft:#F7DFA0;
  --gold-tint:#FBF1D8;
  --gold-wash:#FDF7E9;

  --teal:#12916E;
  --teal-deep:#0E5C43;
  --teal-soft:#BDEBDA;
  --teal-tint:#DDF3EA;
  --teal-wash:#EDF7F3;

  --coral:#E1573F;
  --coral-deep:#A33A26;
  --coral-soft:#FAD2C8;
  --coral-tint:#FCE3DC;
  --coral-wash:#FDEFEB;

  --line:#DCD9CE;
  --line-strong:#C4BEAE;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --max:1140px;
  --gutter:22px;
  --sh-1:0 1px 2px rgba(27,36,48,.04), 0 10px 24px -12px rgba(27,36,48,.14);
  --sh-2:0 2px 6px rgba(27,36,48,.06), 0 28px 55px -18px rgba(27,36,48,.26);
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:700px){ :root{ --gutter:48px; } }

*{ box-sizing:border-box; margin:0; padding:0; }
/* Sin esto, saltar a un ancla (#servicios, #calculadora, y ahora cada
   tarjeta de servicio) deja el destino tapado bajo el nav fijo. */
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font-body);
  font-size:16px; line-height:1.6; color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--gold-soft); }

/* ---------- Rejilla ---------- */
.wrap{
  padding-left:  max(var(--gutter), calc((100% - var(--max)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.section{ padding-block:clamp(60px, 3.5rem + 5vw, 124px); position:relative; }
.section--tight{ padding-block:clamp(44px, 3rem + 3vw, 80px); position:relative; }

/* Fondos de franja: lavados de marca en vez de blanco plano */
.band{ background:linear-gradient(180deg, var(--paper-raised), #FBFAF7); border-block:1px solid var(--line); }
.band--gold{
  background:
    radial-gradient(760px 380px at 88% -10%, rgba(216,155,46,.16), transparent 62%),
    linear-gradient(180deg, var(--gold-wash), #FBFAF6);
  border-block:1px solid #EDE4CE;
}
.band--cool{
  background:
    radial-gradient(720px 360px at 6% 0%, rgba(18,145,110,.12), transparent 60%),
    linear-gradient(180deg, var(--teal-wash), #F7F7F3);
  border-block:1px solid #DDE9E2;
}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-optical-sizing:auto; font-weight:500; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); text-wrap:balance;
}
.display{ font-size:clamp(2.55rem, 1.5rem + 4.4vw, 4.35rem); line-height:1.02; letter-spacing:-.03em; }
.h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); letter-spacing:-.025em; }
.lead{ font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem); color:var(--ink-soft); line-height:1.62; max-width:52ch; }
p{ max-width:68ch; }

.ledger-label{
  display:flex; align-items:center; gap:13px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:24px;
}
.ledger-label::before{ content:""; width:26px; height:2px; background:var(--gold); flex:none; }
.ledger-label a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:color .15s; }
.ledger-label a:hover{ color:var(--ink); }

.section-head{ max-width:44ch; margin-bottom:clamp(32px,5vw,56px); }
.section-head .lead{ margin-top:16px; }
.section-head--label{ margin-bottom:clamp(24px,4vw,40px); }

.mark{
  color:var(--ink); position:relative;
  background:linear-gradient(var(--teal),var(--teal)) left 90% / 100% .055em no-repeat;
  padding-bottom:.02em;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-size:.9rem; font-weight:600; line-height:1;
  padding:14px 22px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn-primary{ background:var(--ink); color:var(--paper); box-shadow:0 10px 22px -12px rgba(27,36,48,.5); }
.btn-primary:hover{ background:#0f1d29; transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(27,36,48,.55); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(27,36,48,.03); }
.btn-gold{
  background:linear-gradient(180deg, #E7AC43, #D6982B);
  color:#3B2A08; box-shadow:0 10px 24px -10px rgba(216,155,46,.7);
}
.btn-gold:hover{ background:linear-gradient(180deg, #EEB752, #DA9E31); transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(216,155,46,.8); }
.btn-wa{ background:#1F5C42; color:#fff; box-shadow:0 10px 24px -12px rgba(31,92,66,.65); }
.btn-wa:hover{ background:#1a4e39; transform:translateY(-2px); }
.btn-block{ width:100%; }

.arrow-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; color:var(--ink);
  text-decoration:none; transition:gap .16s var(--ease);
}
.arrow-link:hover{ gap:12px; }
.arrow-link .ico{ color:var(--gold-deep); }
.ico{ flex:none; }

/* ---------- Navegación ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:20px; padding-block:14px;
  background:rgba(246,245,241,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink); margin-right:auto; }
.nav-brand .kc{ width:42px; height:42px; flex:none; border-radius:10px; box-shadow:0 4px 12px -4px rgba(27,36,48,.4); }
.nav-brand .txt{ display:flex; flex-direction:column; line-height:1.08; }
.nav-brand .txt b{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:.005em; }
.nav-brand .txt span{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.13em; color:var(--ink-soft); }
.nav-menu{ display:flex; align-items:center; gap:30px; }
.nav-menu > a{ font-size:.88rem; color:var(--ink-soft); text-decoration:none; transition:color .15s; }
.nav-menu > a:hover, .nav-menu > a[aria-current="page"]{ color:var(--ink); }
.nav-menu .nav-cta{ font-size:.86rem; padding:11px 20px; }
.nav-burger{ display:none; background:none; border:0; padding:6px; margin-left:auto; cursor:pointer; color:var(--ink); }

@media (max-width:820px){
  .site-nav{ flex-wrap:wrap; }
  .nav-burger{ display:inline-flex; }
  .nav-menu{
    display:none; order:3; width:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  }
  .nav-menu.open{ display:flex; }
  .nav-menu > a{ padding:12px 2px; font-size:1rem; }
  .nav-menu .nav-cta{ margin:8px 0 4px; text-align:center; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(56px, 3rem + 6vw, 118px) clamp(60px, 3rem + 7vw, 132px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:150%; z-index:-1;
  background:
    radial-gradient(680px 460px at 14% 8%, rgba(216,155,46,.20), transparent 60%),
    radial-gradient(620px 480px at 92% 30%, rgba(18,145,110,.15), transparent 62%),
    radial-gradient(520px 420px at 60% 100%, rgba(225,87,63,.10), transparent 60%);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,6vw,60px); align-items:center; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:minmax(0,60%) minmax(0,40%); } }
.hero .display{ max-width:16ch; }
.hero .lead{ margin-top:24px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.trust-row{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.trust-item{ display:inline-flex; align-items:center; gap:9px; font-size:.8rem; color:var(--ink-soft); }
.trust-item .ico{ color:var(--gold-deep); }
a.trust-item{ text-decoration:none; transition:color .15s var(--ease); }
a.trust-item:hover{ color:var(--ink); }
a.trust-item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.hero-art{ position:relative; display:flex; justify-content:center; }
.hero-art::after{
  content:""; position:absolute; inset:12% 8%; z-index:0;
  background:radial-gradient(circle at 50% 45%, rgba(216,155,46,.28), transparent 68%);
  filter:blur(6px);
}
.hero-art .float{ position:relative; z-index:1; width:100%; max-width:420px; animation:floaty 6.5s ease-in-out infinite; }
.hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 26px 40px rgba(27,36,48,.16)); }
@media (max-width:960px){ .hero-art{ margin-top:8px; } .hero-art .float{ max-width:340px; } }

@keyframes floaty{ 0%,100%{ transform:translateY(-8px) } 50%{ transform:translateY(10px) } }
@keyframes heroDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.06); }
}

/* ---------- Servicios (inicio): tarjetas con color y profundidad ---------- */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:620px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .svc-grid{ grid-template-columns:1fr 1fr 1fr; } }

.card-svc{
  background:linear-gradient(168deg, #FFFFFF 58%, var(--chip-bg));
  border:1px solid var(--line);
  border-radius:16px; padding:26px 24px 24px;
  box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  text-decoration:none; color:inherit; display:block;
}
.card-svc:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--c); }
.card-svc:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.card-svc .chip{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--chip-bg, var(--gold-tint)); color:var(--c-text, var(--gold-deep));
  margin-bottom:16px;
}
.card-svc h3{ font-size:1.12rem; font-weight:600; margin-bottom:7px; }
.card-svc p{ color:var(--ink-soft); font-size:.9rem; line-height:1.55; }
/* --c-text: misma familia de color que --c, pero con contraste AA real como
   texto/ícono (--gold en particular no llega ni a 3:1 sobre fondo claro).
   --c sigue usándose tal cual para fondos, bordes de hover y marcas
   decorativas, donde su brillo actual no es un problema de lectura. */
.c-gold{  --c:var(--gold);  --c-text:var(--gold-deep);  --chip-bg:var(--gold-tint); }
.c-teal{  --c:var(--teal);  --c-text:var(--teal-deep);  --chip-bg:var(--teal-tint); }
.c-coral{ --c:var(--coral); --c-text:var(--coral-deep); --chip-bg:var(--coral-tint); }

/* ---------- Sobre nosotros: texto + panel de cifras al lado ---------- */
.about-split{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,48px); align-items:center; }
@media (min-width:900px){
  .about-split{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }  /* ~45 / 55 */
  .about-split .stats-card{ order:-1; }   /* panel de cifras a la izquierda */
}
.about-split .section-head{ margin-bottom:0; max-width:none; }
.about-split .section-head .lead{ max-width:56ch; }

.stats-card{
  background:
    radial-gradient(420px 240px at 100% 0%, rgba(216,155,46,.14), transparent 65%),
    linear-gradient(165deg, #FFFFFF, #FBF7EE);
  border:1px solid #EBE3D0; border-radius:20px; padding:26px 28px 12px;
  box-shadow:var(--sh-1);
}
.stats-card .sc-head{
  display:flex; align-items:center; gap:9px; margin-bottom:6px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.stats-card .sc-head .dot{
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(216,155,46,.5); animation:pulse 2.6s ease-out infinite;
}
.stat-row{ display:flex; align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.stat-row:last-child{ border-bottom:0; }
.stat-row .ic{
  width:48px; height:48px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--chip-bg); color:var(--c-text);
}
.stat-row .n{ font-family:var(--font-display); font-weight:500; font-size:2.3rem; line-height:1; letter-spacing:-.035em; color:var(--c-text); font-variant-numeric:tabular-nums; }
.stat-row .l{ font-size:.88rem; color:var(--ink); margin-top:4px; }
.stat-row .t{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
/* Especializaciones. Va tras la última .stat-row, cuyo borde inferior (que ya
   no se anula, porque deja de ser :last-child) sirve de separador. */
.sc-cert{ list-style:none; display:grid; gap:10px; padding:18px 0 14px; }
.sc-cert li{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center;
  font-size:.84rem; line-height:1.4; color:var(--ink);
}
.sc-cert li svg{ color:var(--gold-deep); }

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(216,155,46,.5); }
  70%{ box-shadow:0 0 0 9px rgba(216,155,46,0); }
  100%{ box-shadow:0 0 0 0 rgba(216,155,46,0); }
}

/* ---------- Noticias: destacado + secundarios ---------- */
.news-feature{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:840px){
  .news-feature{ grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; }
  .news-feature .card-news--big{ grid-row:1 / span 2; }
}
.card-news{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(168deg, #FFFFFF 55%, var(--chip-bg));
  border:1px solid var(--line); border-radius:18px;
  padding:22px; box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card-news:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:var(--c); }
.card-news .tag{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:var(--chip-bg); color:var(--c-text);
  font-family:var(--font-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:20px; margin-bottom:14px;
}
.card-news h3{ font-size:1.05rem; font-weight:600; line-height:1.3; }
.card-news p{ color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin-top:8px; flex:1; }
.card-news .more{
  margin-top:14px; font-size:.8rem; font-weight:600; color:var(--c-text);
  text-decoration:none; position:relative;
}
.card-news .more:hover{ text-decoration:underline; }
.card-news .more:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

.card-news--big{
  overflow:hidden; padding:clamp(26px,3.5vw,40px);
  background:
    radial-gradient(420px 300px at 88% 8%, var(--chip-bg), transparent 70%),
    linear-gradient(160deg, #FFFFFF 45%, var(--chip-bg));
}
.card-news--big .tag{ font-size:.7rem; padding:7px 13px; margin-bottom:18px; }
.card-news--big h3{ font-size:clamp(1.4rem, 1rem + 1.7vw, 2rem); font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; }
.card-news--big p{ font-size:.95rem; max-width:42ch; }
.card-news--big .more{ font-size:.85rem; margin-top:18px; }
.card-news--big .watermark{
  position:absolute; right:14px; bottom:-30px; z-index:0;
  font-family:var(--font-display); font-weight:500; font-size:clamp(6rem,12vw,9.5rem);
  line-height:1; color:var(--c); opacity:.10; pointer-events:none; user-select:none;
}
.card-news--big > *{ position:relative; z-index:1; }

/* ---------- Calculadora ---------- */
.calc-band{
  background:
    radial-gradient(700px 420px at 4% 0%, rgba(216,155,46,.18), transparent 60%),
    radial-gradient(680px 460px at 100% 100%, rgba(18,145,110,.16), transparent 60%),
    linear-gradient(160deg, var(--gold-wash) 0%, var(--teal-wash) 70%, #F5F6F2 100%);
  border-block:1px solid #E7E3D6;
}
.calc{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,56px); align-items:start; }
@media (min-width:900px){ .calc{ grid-template-columns:minmax(0,44%) minmax(0,56%); } }
.calc-intro .lead{ margin-top:16px; }
.calc-intro .calc-note{ text-align:left; margin-top:20px; max-width:38ch; }

.panel{
  background:linear-gradient(170deg, #FFFFFF, #FDFBF5);
  border:1px solid #EBE6D8;
  border-radius:20px; padding:clamp(24px,4vw,40px); box-shadow:var(--sh-2);
}
.field{ margin-bottom:16px; }
.field > label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.field input, .field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line-strong); border-radius:11px;
  font:inherit; font-size:.93rem; background:#FCFBF8; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field textarea:focus{
  outline:0; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 4px rgba(216,155,46,.18);
}
.row2{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:520px){ .row2{ grid-template-columns:1fr 1fr; } .row2 .field{ margin-bottom:0; } }
.calc-note{ font-size:.72rem; color:var(--ink-faint); font-style:italic; margin-top:12px; text-align:center; }

#calc-resultado{ overflow:hidden; }
.calc-result{
  margin-top:16px; border-radius:12px; padding:16px 18px; font-size:.9rem; line-height:1.5;
  animation:resultIn .4s var(--ease) both;
}
.calc-result-yes{ background:linear-gradient(150deg, var(--coral-tint), #FFF4F1); color:var(--coral-deep); border:1px solid var(--coral-soft); }
.calc-result-no{ background:linear-gradient(150deg, var(--teal-tint), #F1FBF6); color:var(--teal-deep); border:1px solid var(--teal-soft); }
@keyframes resultIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }

/* ============================================================
   Página Servicios — encabezado con constelación + bento grid
   ============================================================ */
.svc-band{
  background:
    radial-gradient(760px 420px at 96% -6%, rgba(216,155,46,.20), transparent 62%),
    radial-gradient(680px 420px at 2% 40%, rgba(18,145,110,.12), transparent 58%),
    radial-gradient(560px 380px at 70% 104%, rgba(225,87,63,.10), transparent 60%),
    linear-gradient(175deg, var(--gold-wash) 0%, #FBFAF6 42%, var(--teal-wash) 100%);
  border-block:1px solid #EBE5D6;
}

/* ---- Encabezado ---- */
.svc-hero{ display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,60px); align-items:center; }
@media (min-width:960px){ .svc-hero{ grid-template-columns:minmax(0,1fr) minmax(0,420px); } }
.svc-hero .section-head{ margin-bottom:0; max-width:none; }
.svc-hero .section-head .lead{ max-width:50ch; }

/* Constelación de íconos: previsualiza los servicios y da vida al hueco */
.icon-cloud{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,18px); max-width:400px; margin-inline:auto;
}
.icon-cloud::before{
  content:""; position:absolute; inset:-22% -16%; z-index:0;
  background:radial-gradient(circle at 52% 48%, rgba(216,155,46,.26), transparent 66%);
  filter:blur(6px);
}
.ic-tile{
  position:relative; z-index:1; aspect-ratio:1/1;
  display:grid; place-items:center; border-radius:20px;
  background:linear-gradient(158deg,#FFFFFF 55%, var(--chip-bg));
  border:1px solid var(--line); box-shadow:var(--sh-1); color:var(--c);
  animation:floaty 7.5s ease-in-out infinite;
}
.ic-tile:nth-child(2){ margin-top:24px; animation-delay:-1.25s; }
.ic-tile:nth-child(3){ animation-delay:-2.5s; }
.ic-tile:nth-child(4){ margin-top:14px; animation-delay:-3.75s; }
.ic-tile:nth-child(5){ animation-delay:-5s; }
.ic-tile:nth-child(6){ margin-top:26px; animation-delay:-6.25s; }
@media (max-width:960px){ .icon-cloud{ max-width:330px; } }

/* Separador con degradado */
.sep-grad{
  height:1px; border:0; margin:clamp(40px,5.5vw,68px) 0 clamp(30px,4vw,44px);
  background:linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

/* ---- Bento grid ---- */
.bento{ display:grid; grid-template-columns:1fr; gap:clamp(14px,1.6vw,20px); }
@media (min-width:700px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){
  .bento{ grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(188px,auto); }
  .bento .b1{ grid-column:span 3; grid-row:span 2; }
  .bento .b2{ grid-column:span 3; }
  .bento .b3{ grid-column:span 3; }
  .bento .b4, .bento .b5, .bento .b6{ grid-column:span 2; }
}

.bento-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(22px,2.4vw,32px);
  border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(158deg, #FFFFFF 52%, var(--chip-bg));
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bento-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-2); border-color:var(--c); }

/* Ícono grande semitransparente de fondo */
.bento-card .ghost{
  position:absolute; right:-20px; bottom:-26px; z-index:-1;
  color:var(--c); opacity:.075; pointer-events:none;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.bento-card:hover .ghost{ transform:translate(-8px,-10px) rotate(-7deg) scale(1.07); opacity:.13; }

/* Chip del ícono */
.bento-card .chip{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--chip-bg); color:var(--c-text); margin-bottom:18px;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.bento-card:hover .chip{ transform:translateY(-3px) rotate(-6deg) scale(1.07); box-shadow:0 10px 20px -10px var(--c); }

/* Título con línea que se dibuja al pasar el cursor */
.bento-card .titlewrap{ position:relative; display:inline-block; padding-bottom:9px; margin-bottom:11px; }
.bento-card .titlewrap::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--c), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease);
}
.bento-card:hover .titlewrap::after{ transform:scaleX(1); }
.bento-card h3{ font-size:1.18rem; font-weight:600; letter-spacing:-.015em; }
.bento-card > p{ color:var(--ink-soft); font-size:.9rem; line-height:1.58; max-width:46ch; }

.bento-card ul{ list-style:none; display:grid; gap:9px; margin-top:auto; padding-top:18px; }
.bento-card li{ display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:.85rem; color:var(--ink-soft); line-height:1.42; }
.bento-card li .ico{ color:var(--c); margin-top:2px; opacity:.85; transition:opacity .3s var(--ease); }
.bento-card:hover li .ico{ opacity:1; }

/* Marca de esquina (detalle de acabado) */
.bento-card .corner{
  position:absolute; top:16px; right:16px; color:var(--c);
  opacity:0; transform:scale(.7) rotate(-12deg);
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.bento-card:hover .corner{ opacity:.5; transform:none; }

/* Tarjeta destacada */
.bento-card.is-feature{ padding:clamp(26px,3vw,40px); }
.bento-card.is-feature .chip{ width:62px; height:62px; border-radius:18px; margin-bottom:22px; }
.bento-card.is-feature h3{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.025em;
  font-size:clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
}
.bento-card.is-feature > p{ font-size:.98rem; line-height:1.62; max-width:40ch; }
/* En la destacada el detalle va justo bajo el texto: el aire queda abajo,
   donde vive el ícono de fondo, en vez de abrirse un hueco en medio. */
.bento-card.is-feature ul{ margin-top:28px; padding-top:0; }
@media (min-width:560px){ .bento-card.is-feature ul{ grid-template-columns:1fr 1fr; column-gap:26px; } }
.bento-card.is-feature li{ font-size:.88rem; }
.bento-card.is-feature .ghost{ right:-38px; bottom:-48px; opacity:.085; }
.bento-card.is-feature:hover .ghost{ opacity:.14; }

/* ---------- Valores (sobre nosotros) ---------- */
.card-value{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:16px;
  padding:26px 24px; box-shadow:var(--sh-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card-value:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.card-value .chip{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--chip-bg); color:var(--c-text); margin-bottom:14px;
}
.card-value h3{ font-size:1.12rem; font-weight:600; margin-bottom:7px; }
.card-value p{ color:var(--ink-soft); font-size:.9rem; line-height:1.55; }

/* ============================================================
   Carrusel de valores
   Sin JS o con "reduced motion" se queda como rejilla estática
   (los controles solo aparecen cuando JS activa .is-ready).
   ============================================================ */
.carousel{ position:relative; }
.carousel-viewport{ padding:6px 6px 16px; margin:-6px -6px -16px; }
.carousel-track{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .carousel-track{ grid-template-columns:repeat(3,1fr); } }
.carousel-controls{ display:none; }

.carousel.is-ready .carousel-viewport{ overflow:hidden; }
.carousel.is-ready .carousel-track{
  display:flex; gap:0; grid-template-columns:none;
  transition:transform .55s var(--ease); will-change:transform;
}
.carousel.is-ready .carousel-track > *{ flex:0 0 100%; min-width:0; }
/* El padding del viewport (que evita recortar la sombra) ensancha el área de
   recorte, así que la diapositiva vecina asomaría por el borde: se atenúa. */
.carousel.is-ready .carousel-track > [aria-hidden="true"]{
  opacity:0; transition:opacity .4s var(--ease);
}
.carousel.is-ready .carousel-controls{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2vw,22px); margin-top:24px;
}

.carousel-nav, .carousel-play{
  width:40px; height:40px; flex:none; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--line-strong);
  transition:border-color .18s var(--ease), color .18s var(--ease),
             background .18s var(--ease), transform .18s var(--ease);
}
.carousel-nav:hover, .carousel-play:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }
.carousel-nav:focus-visible, .carousel-play:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.carousel-dots{ display:flex; align-items:center; gap:3px; }
/* El punto mide siempre 28px: se estira con transform (sin reflujo) y el
   botón conserva un área de toque cómoda. */
.carousel-dots button{
  width:28px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; border-radius:8px;
}
/* Se recorta con clip-path en vez de escalar: scaleX también comprimiría el
   radio y el punto inactivo saldría cuadrado. Y no provoca reflujo. */
.carousel-dots button::after{
  content:''; display:block; width:28px; height:8px;
  background:var(--line-strong); clip-path:inset(0 36% round 99px);
  transition:clip-path .32s var(--ease), background .32s var(--ease);
}
.carousel-dots button:hover::after{ background:var(--ink-soft); }
.carousel-dots button[aria-current="true"]::after{ clip-path:inset(0 round 99px); background:var(--gold); }
.carousel-dots button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.carousel-play{ margin-left:4px; }

/* En modo carrusel la tarjeta ocupa todo el ancho: se agranda y pasa a dos columnas. */
.carousel.is-ready .card-value{ padding:clamp(28px,3.4vw,42px) clamp(24px,3.4vw,44px); }
@media (min-width:700px){
  .carousel.is-ready .card-value{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:6px clamp(24px,3vw,36px); align-content:center;
  }
  .carousel.is-ready .card-value .chip{
    grid-row:1 / span 2; width:62px; height:62px; border-radius:18px; margin:0;
  }
  .carousel.is-ready .card-value .chip svg{ width:30px; height:30px; }
  .carousel.is-ready .card-value h3{ font-size:1.45rem; align-self:end; margin-bottom:0; }
  .carousel.is-ready .card-value p{ font-size:1.02rem; line-height:1.62; max-width:54ch; align-self:start; }
}

/* ============================================================
   Por qué elegir Kairos — lista con ícono + panel de credencial
   ============================================================ */
.why-split{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px); align-items:center; }
@media (min-width:900px){
  .why-split{ grid-template-columns:minmax(0,1fr) minmax(0,340px); align-items:stretch; }
  .credencial{ display:flex; flex-direction:column; justify-content:center; }
}

.why-list{ list-style:none; display:grid; gap:12px; }
.why-item{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  /* Halo radial anclado al ícono: en una barra ancha, un degradado diagonal
     teñiría media tarjeta. */
  background:radial-gradient(360px 150px at 0% 50%, var(--chip-bg), transparent 72%), var(--paper-raised);
  border:1px solid var(--line); border-radius:15px;
  padding:17px 20px; box-shadow:var(--sh-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.why-item:hover{ transform:translateX(5px); box-shadow:var(--sh-2); border-color:var(--c); }
.why-item .ic{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--chip-bg); color:var(--c-text);
}
.why-item span{ font-size:.95rem; color:var(--ink); line-height:1.5; }

.credencial{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(300px 200px at 50% 0%, rgba(216,155,46,.18), transparent 68%),
    linear-gradient(165deg, #FFFFFF, #FBF6EA);
  border:1px solid #EBE3D0; border-radius:22px;
  padding:clamp(28px,3vw,38px) 26px; box-shadow:var(--sh-2);
}
.credencial .kc{ width:50px; height:50px; border-radius:14px; margin:0 auto 20px; }
.credencial .big{
  font-family:var(--font-display); font-weight:500; line-height:.92;
  font-size:clamp(3.6rem, 2.6rem + 3.4vw, 5.2rem); letter-spacing:-.045em; color:var(--gold);
}
.credencial .big .plus{ font-size:.46em; vertical-align:.62em; letter-spacing:0; }
.credencial .lbl{ font-size:.95rem; color:var(--ink); margin-top:10px; }
.credencial .sub{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:10px;
}
.credencial .ghost{ position:absolute; right:-42px; bottom:-48px; color:var(--gold); opacity:.085; pointer-events:none; }

/* ============================================================
   FAQ — acordeón nativo <details>, accesible sin JS
   ============================================================ */
/* max-width por legibilidad (líneas de respuesta no demasiado anchas), pero
   centrado dentro de .wrap -- sin margin:auto quedaba pegado al borde
   izquierdo en pantallas anchas, más angosto que el resto de la página. */
.faq{ display:grid; gap:12px; max-width:920px; margin-inline:auto; }
.faq-item{
  background:radial-gradient(420px 190px at 0% 0%, var(--chip-bg), transparent 74%), var(--paper-raised);
  border:1px solid var(--line); border-radius:16px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open]{ border-color:var(--c); box-shadow:var(--sh-1); }
.faq-q{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:19px 22px; list-style:none;
  font-family:var(--font-body); font-size:1rem; font-weight:600;
  color:var(--ink); line-height:1.4;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; border-radius:16px; }
.faq-q .ic{ color:var(--c-text); flex:none; }
.faq-q .chev{ margin-left:auto; color:var(--c-text); flex:none; transition:transform .3s var(--ease); }
.faq-item[open] .chev{ transform:rotate(180deg); }
.faq-a{ animation:faqIn .34s var(--ease) both; }
.faq-a p{
  margin:0; padding:0 24px 22px 58px;
  color:var(--ink-soft); font-size:.93rem; line-height:1.68; max-width:64ch;
}
@keyframes faqIn{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){ .faq-a p{ padding-left:24px; } }

/* ============================================================
   Páginas legales — texto plano, sin adornos.
   ============================================================ */
.legal{ max-width:72ch; color:var(--ink-soft); font-size:1rem; line-height:1.7; }
.legal h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.6rem, 1.3rem + 1.6vw, 2.15rem); line-height:1.2;
  color:var(--ink); letter-spacing:-.01em;
}
.legal .legal-sub{ margin-top:4px; font-weight:600; color:var(--ink); }
.legal .legal-meta{ margin-top:10px; font-size:.9rem; color:var(--ink-faint); }
.legal h2{
  font-family:var(--font-display); font-weight:600; font-size:1.28rem; line-height:1.3;
  color:var(--ink); margin-top:2.4em; padding-top:1.4em; border-top:1px solid var(--line);
}
.legal h3{ font-weight:600; font-size:1.02rem; color:var(--ink); margin-top:1.7em; }
.legal p{ margin-top:1em; }
.legal ul, .legal ol{ margin-top:1em; padding-left:1.35em; }
.legal li{ margin-top:.5em; }
.legal li::marker{ color:var(--ink-faint); }
.legal strong{ color:var(--ink); font-weight:600; }
.legal hr{ margin-top:2.4em; border:0; border-top:1px solid var(--line); }
.legal .legal-nota{ font-size:.9rem; color:var(--ink-faint); }

/* ---------- CTA de cierre ---------- */
.cta-band{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; }
@media (min-width:720px){ .cta-band{ grid-template-columns:1fr auto; } }
.cta-band h2{ font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem); }
.cta-band p{ color:var(--ink-soft); margin-top:8px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,44px); align-items:start; }
@media (min-width:860px){ .contact-grid{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); } }
.contact-aside{ display:grid; gap:16px; }
.aside-card{
  background:linear-gradient(160deg, #FFFFFF, #FBF7EF);
  border:1px solid #EBE3D0; border-radius:16px; padding:24px; box-shadow:var(--sh-1);
}
.aside-card h3{ font-size:1.15rem; font-weight:600; margin-bottom:14px; }
.aside-actions{ display:grid; gap:10px; }
.aside-actions .btn{ width:100%; }
.aside-meta{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-size:.8rem; color:var(--ink-soft); }
.aside-meta .ico{ color:var(--gold-deep); }
.social-row{ display:flex; gap:14px; }
.social-row a{ width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:var(--gold-tint); color:var(--gold-deep); transition:transform .16s var(--ease), background .16s; }
.social-row a:hover{ transform:translateY(-3px); background:var(--gold-soft); }
.form-msg{ display:flex; gap:10px; font-size:.85rem; border-radius:11px; padding:13px 15px; margin-bottom:16px; animation:resultIn .35s var(--ease) both; }
.form-msg.ok{ background:linear-gradient(150deg, var(--teal-tint), #F1FBF6); color:var(--teal-deep); }
.form-msg.err{ background:linear-gradient(150deg, var(--coral-tint), #FFF4F1); color:var(--coral-deep); }
.field textarea{ min-height:120px; resize:vertical; }

/* ---------- Pie ---------- */
.site-foot{
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(216,155,46,.10), transparent 60%),
    var(--ink);
  color:#C7C9C3; padding-block:46px;
}
.site-foot a{ color:#DBDCD6; text-decoration:none; transition:color .15s; }
.site-foot a:hover{ color:#fff; }
.foot-top{ display:flex; justify-content:space-between; gap:22px 40px; flex-wrap:wrap; align-items:center; }
.foot-brand{ font-family:var(--font-display); font-weight:500; font-size:1.15rem; color:#fff; }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; font-size:.85rem; }
.foot-link{ display:inline-flex; align-items:center; gap:8px; }
.foot-social{ display:flex; gap:15px; align-items:center; }
.foot-social a{ color:#9A9C95; }
.foot-social a:hover{ color:#fff; }
.foot-copy{
  margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--font-mono); font-size:.7rem; color:#909288;
  display:flex; justify-content:space-between; align-items:center; gap:10px 20px; flex-wrap:wrap;
}
.foot-credit{ display:inline-flex; align-items:center; gap:7px; color:#8E9083; }
.foot-credit b{ font-weight:500; color:#9EA09A; }
.foot-credit svg{ color:#8C8E86; }

/* ---------- Modal ---------- */
.push-overlay{
  position:fixed; inset:0; z-index:9999; padding:20px;
  background:rgba(27,36,48,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.push-overlay.show{ opacity:1; pointer-events:auto; }
.push-modal{
  background:linear-gradient(165deg, #FFFFFF, #FBF7EF);
  border-radius:20px; max-width:400px; width:100%; padding:32px 30px 26px;
  position:relative; box-shadow:0 40px 90px -22px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.97); transition:transform .3s var(--ease);
}
.push-overlay.show .push-modal{ transform:none; }
.push-modal .kc{ width:44px; height:44px; border-radius:12px; margin-bottom:16px; box-shadow:0 8px 20px -6px rgba(27,36,48,.4); }
.push-modal h3{ font-size:1.3rem; font-weight:600; margin-bottom:10px; }
.push-modal p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; margin-bottom:22px; }
.push-actions{ display:grid; gap:10px; }
.push-actions .btn{ width:100%; }
.push-close{ position:absolute; top:14px; right:14px; background:none; border:0; padding:6px; cursor:pointer; color:var(--ink-faint); }
.push-close:hover{ color:var(--ink); }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  /* Bloque completo (p. ej. Sobre nosotros): recorrido un poco mayor y más lento */
  .about-split.reveal{ transition-duration:.85s; }
  .about-split.reveal:not(.in){ transform:translateY(30px); }
  .reveal:nth-child(2){ transition-delay:.06s; }
  .reveal:nth-child(3){ transition-delay:.12s; }
  .reveal:nth-child(4){ transition-delay:.18s; }
  .stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .stagger.in > *{ opacity:1; transform:none; }
  .stagger.in > *:nth-child(2){ transition-delay:.07s; }
  .stagger.in > *:nth-child(3){ transition-delay:.14s; }
  .stagger.in > *:nth-child(4){ transition-delay:.21s; }
  .stagger.in > *:nth-child(5){ transition-delay:.28s; }
  .stagger.in > *:nth-child(6){ transition-delay:.35s; }

  /* Las tarjetas dentro de un .stagger conservan su transición de hover
     (sombra y borde incluidos), no solo la de entrada. */
  .stagger > .bento-card,
  .stagger > .card-svc,
  .stagger > .card-news,
  .stagger > .card-value,
  .stagger > .faq-item{
    transition:transform .38s var(--ease), box-shadow .3s var(--ease),
               border-color .3s var(--ease), opacity .55s var(--ease);
  }
  /* ...y su elevación: `.stagger.in > *{transform:none}` tiene la misma
     especificidad que `.tarjeta:hover`, así que aquí se le gana. */
  .stagger.in > .bento-card:hover{ transform:translateY(-8px); }
  .stagger.in > .card-svc:hover,
  .stagger.in > .card-news:hover{ transform:translateY(-6px); }
  .stagger.in > .card-value:hover{ transform:translateY(-5px); }
  .stagger > .why-item{
    transition:transform .25s var(--ease), box-shadow .25s var(--ease),
               border-color .25s var(--ease), opacity .55s var(--ease);
  }
  .stagger.in > .why-item:hover{ transform:translateX(5px); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero-art .float, .stats-card .sc-head .dot, .ic-tile{ animation:none; }
  .calc-result, .form-msg{ animation:none; }
  .bento-card, .bento-card .ghost, .bento-card .chip,
  .bento-card .titlewrap::after, .bento-card .corner{ transition:none; }
  .bento-card:hover{ transform:none; }
  .bento-card:hover .chip, .bento-card:hover .ghost{ transform:none; }
  /* El carrusel no se inicializa (queda como rejilla), y el acordeón abre sin animar. */
  .faq-a{ animation:none; }
  .faq-q .chev{ transition:none; }
  .why-item:hover{ transform:none; }
}