/* ============================================================
   BASE · variables, reset y utilidades — kaele.mx
   ============================================================ */

:root{
  /* Paleta de marca */
  --morado:#6C4CF1;
  --morado-osc:#4E33C4;
  --coral:#FF6B6B;
  --butter:#FFD66B;
  --crema:#FFF9F2;
  --crema-2:#FDF2E6;
  --ink:#17151F;
  --gris:#6B6779;
  --blanco:#ffffff;
  --borde:#EDE6DD;

  /* Tipografía */
  --font:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Medidas */
  --ancho:1160px;
  --radio:20px;
  --radio-lg:28px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

/* La barra superior es fija: sin este margen el ancla deja el inicio de la
   sección escondido detrás de ella. */
section[id]{scroll-margin-top:96px;}
@media (max-width:980px){
  section[id]{scroll-margin-top:84px;}
}

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--crema);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;}

/* ---------- Contenedor ---------------------------------------------------- */
.contenedor{
  width:100%;max-width:var(--ancho);
  margin:0 auto;padding:0 24px;
}

/* ---------- Tipografía ---------------------------------------------------- */
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-weight:800;}
h1{font-size:clamp(2.6rem,6.4vw,4.4rem);}
h2{font-size:clamp(2rem,4.6vw,3.1rem);}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;}

.destacado{color:var(--morado);}
.seccion-intro{
  font-size:1.08rem;color:var(--gris);max-width:52ch;
}
.seccion-intro-centrada{margin:12px auto 0;}

/* ---------- Botones -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-size:1rem;font-weight:700;
  padding:15px 28px;border-radius:999px;
  border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn-primario{
  background:var(--morado);color:#fff;
  box-shadow:0 8px 22px rgba(108,76,241,.32);
}
.btn-primario:hover{background:var(--morado-osc);box-shadow:0 12px 28px rgba(108,76,241,.4);}

.btn-secundario{
  background:transparent;color:var(--ink);border-color:var(--ink);
}
.btn-secundario:hover{background:var(--ink);color:var(--crema);}

.btn-grande{font-size:1.08rem;padding:18px 34px;}

/* ---------- Secciones ------------------------------------------------------ */
.seccion{padding:88px 0;}
.seccion-clara{background:var(--blanco);}

/* ---------- Animación de entrada ------------------------------------------- */
.aparece{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.aparece.visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

@media (max-width:720px){
  .seccion{padding:60px 0;}
}