/* ═══════════════════════════════════════════════════════════════════
   CONECTA KIDS — hoja propia
   Conecta Senior S.A.S. | NIT 901882682-5

   ── POR QUÉ NO REUTILIZA index.css ──────────────────────────────────
   index.css son 43 KB con los estilos de todo el sitio y una paleta
   oscura fijada en :root. Para invertirla habría que sobrescribir esas
   variables y pelear con cada regla que da por hecho el fondo negro.
   Una hoja propia, como ya hace comprar.css, es menos código y no
   arriesga romper la home al tocarla.

   ── LA PALETA ───────────────────────────────────────────────────────
   Fondo claro y cálido para el público de padres jóvenes, conservando
   la tipografía y el logo de la marca. El dorado de la marca (#C9A535)
   no se usa sobre claro: da 1.9:1 de contraste, ilegible. Se sustituye
   por una versión oscurecida (#8A6612) que conserva el tono y llega a
   5.4:1. El verde profundo es el color de acción; sobre el fondo da
   7.0:1, apto para texto.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FBF9F5;          /* crema cálido */
  --surface:#FFFFFF;
  --surface-2:#F3F0E9;
  --ink:#1F2430;         /* texto principal — 14.8:1 sobre --bg */
  --muted:#5B6474;       /* secundario — 6.1:1 */
  --line:#E4DFD4;
  --verde:#0B5F53;       /* acción, texto y bordes — 7.0:1 */
  --verde-f:#0F7A6B;     /* rellenos y estados hover */
  --oro:#8A6612;         /* la marca, oscurecida para fondo claro */
  --oro-suave:#F6EFDC;
  --coral:#C4452F;       /* solo para lo urgente/médico — 5.6:1 */
  --coral-suave:#FDEDE9;
  --r:10px;
  --nav:66px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Navegación ──────────────────────────────────────────────── */
.k-nav{
  position:sticky;top:0;z-index:50;height:var(--nav);
  display:flex;align-items:center;gap:1rem;
  padding:0 clamp(1rem,4vw,2.5rem);
  background:rgba(251,249,245,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.k-brand{display:flex;align-items:center;text-decoration:none}
/* Alto fijo y ancho automático: el logo es un lockup horizontal y forzarle
   un cuadrado —como hacía la regla anterior— lo deformaba.
   El fondo oscuro va en la propia imagen, a propósito: los colores del
   logo están hechos para fondo oscuro y sobre el crema de esta página la
   S amarilla queda en 1.5:1 de contraste, es decir, invisible. */
.k-brand img{height:44px;width:auto;border-radius:8px;display:block;
  /* object-fit es un seguro: si alguna vez otra regla vuelve a forzarle
     un cuadrado, el logo se ajusta dentro en lugar de aplastarse. Un
     logo deformado se ve peor que uno con margen. */
  object-fit:contain}
@media(max-width:420px){.k-brand img{height:38px}}
.k-nav-sp{flex:1}
.k-nav a.k-nav-link{color:var(--muted);font-size:.85rem;font-weight:600}
@media(max-width:640px){.k-nav a.k-nav-link{display:none}}

/* ── Botones ─────────────────────────────────────────────────── */
.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:'Raleway',sans-serif;font-size:.9rem;font-weight:700;
  letter-spacing:.03em;padding:.8rem 1.4rem;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s;
  /* 44px de alto mínimo: es el objetivo táctil que no falla en móvil */
  min-height:46px;
}
.k-btn:hover{text-decoration:none}
.k-btn-p{background:var(--verde-f);color:#fff}
.k-btn-p:hover{background:var(--verde)}
.k-btn-s{background:transparent;color:var(--verde);border-color:var(--verde)}
.k-btn-s:hover{background:var(--verde);color:#fff}
.k-btn-lg{font-size:1rem;padding:1rem 1.9rem;min-height:54px}

/* ── Estructura ──────────────────────────────────────────────── */
.k-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.k-sec{padding:clamp(3rem,7vw,5.5rem) 0}
.k-sec-alt{background:var(--surface-2)}
.k-lbl{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro);
  background:var(--oro-suave);padding:.35rem .8rem;border-radius:99px;
}
.k-h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:600;line-height:1.15;
  margin:.9rem 0 .7rem;
}
.k-h2 em{font-style:italic;color:var(--verde)}
.k-lead{color:var(--muted);font-size:1.02rem;max-width:62ch}
.k-center{text-align:center}
.k-center .k-lead{margin-inline:auto}

/* ── Hero ────────────────────────────────────────────────────── */
.k-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem)}
.k-hero-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center}
@media(min-width:860px){.k-hero-grid{grid-template-columns:1.05fr .95fr}}
.k-hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.3rem,6vw,3.7rem);font-weight:600;line-height:1.08;
  margin:1rem 0 .9rem;
}
.k-hero h1 em{font-style:italic;color:var(--verde)}
.k-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.k-hero-img{border-radius:16px;overflow:hidden;border:1px solid var(--line);
            box-shadow:0 18px 40px -24px rgba(31,36,48,.45)}
.k-hero-nota{font-size:.8rem;color:var(--muted);margin-top:1.1rem}

/* ── Tarjetas de escenario ───────────────────────────────────── */
.k-grid{display:grid;gap:1.1rem;margin-top:2.2rem}
@media(min-width:700px){.k-grid{grid-template-columns:repeat(2,1fr)}}
.k-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem 1.4rem;
}
.k-card-ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--oro-suave);color:var(--oro);margin-bottom:.9rem;
}
.k-card-ico svg{width:22px;height:22px}
.k-card.med .k-card-ico{background:var(--coral-suave);color:var(--coral)}
.k-card h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;margin-bottom:.45rem}
.k-card p{color:var(--muted);font-size:.93rem}

/* ── Cómo funciona ───────────────────────────────────────────── */
.k-pasos{display:grid;gap:1.6rem;margin-top:2.4rem;counter-reset:paso}
@media(min-width:760px){.k-pasos{grid-template-columns:repeat(3,1fr)}}
.k-paso{display:flex;gap:.9rem;align-items:flex-start}
.k-paso-num{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--verde-f);color:#fff;font-weight:700;font-size:1rem;line-height:1;
}
.k-paso h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;margin-bottom:.3rem}
.k-paso p{color:var(--muted);font-size:.9rem}

/* ── Incluye ─────────────────────────────────────────────────── */
.k-incluye{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,4vw,2.4rem);margin-top:2rem;
}
.k-incluye ul{list-style:none;display:grid;gap:.75rem}
@media(min-width:640px){.k-incluye ul{grid-template-columns:1fr 1fr}}
.k-incluye li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem}
.k-check{flex:none;width:20px;height:20px;margin-top:.15rem;color:var(--verde)}

/* ── Planes ──────────────────────────────────────────────────── */
.k-planes{display:grid;gap:1.1rem;margin-top:2.4rem}
@media(min-width:820px){.k-planes{grid-template-columns:repeat(3,1fr)}}
.k-plan{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;
}
.k-plan-precio{
  display:inline-block;align-self:flex-start;
  font-size:1.05rem;font-weight:700;color:var(--verde);
  border:1.5px solid var(--verde);border-radius:99px;padding:.3rem .9rem;
  margin-bottom:.9rem;
}
.k-plan h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;margin-bottom:.5rem}
.k-plan p{color:var(--muted);font-size:.92rem;flex:1}
/* La renovación va apagada: es una condición del servicio, no el precio
   por el que se decide la compra. */
.k-plan-renov{font-size:.8rem;color:var(--muted);margin-top:.9rem;line-height:1.5;opacity:.9}
.k-planes-nota{
  margin-top:1.4rem;font-size:.86rem;color:var(--muted);
  text-align:center;line-height:1.6;
}

/* ── Cierre ──────────────────────────────────────────────────── */
.k-cierre{
  background:var(--verde);color:#fff;border-radius:16px;
  padding:clamp(2rem,5vw,3.2rem);text-align:center;margin:clamp(2.5rem,6vw,4rem) 0;
}
.k-cierre h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,4vw,2.5rem);font-weight:600;line-height:1.15}
.k-cierre p{color:rgba(255,255,255,.85);margin:.8rem auto 1.6rem;max-width:52ch;font-size:.98rem}
.k-cierre .k-btn-p{background:#fff;color:var(--verde)}
.k-cierre .k-btn-p:hover{background:var(--oro-suave)}
.k-cierre .k-btn-s{color:#fff;border-color:rgba(255,255,255,.6)}
.k-cierre .k-btn-s:hover{background:rgba(255,255,255,.14);color:#fff}
.k-cierre-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ── Privacidad ──────────────────────────────────────────────── */
.k-priv{
  border-left:3px solid var(--oro);background:var(--oro-suave);
  border-radius:0 var(--r) var(--r) 0;padding:1.3rem 1.4rem;
  font-size:.9rem;color:var(--ink);
}
.k-priv strong{font-weight:700}

/* ── Pie ─────────────────────────────────────────────────────── */
.k-foot{
  border-top:1px solid var(--line);padding:2.2rem 0 3rem;
  font-size:.84rem;color:var(--muted);text-align:center;
}
.k-foot a{color:var(--verde)}
.k-foot-links{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:.8rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}