/* ============================================
   LUXDENT — Design Tokens
   Basado en Manual de Marca oficial
   Editar SOLO estos valores para retocar el look global
   ============================================ */
:root{
  /* Colores primarios (Manual 4.1) */
  --morado-diamante: #4B3C98;
  --morado-diamante-dark: #362b6e;
  --morado-diamante-light: #6c5cd6;
  --negro-grafito: #1D1D1B; /* uso reservado a texto, ya NO se usa como fondo */
  --blanco-marfil: #C6B29A;

  /* Azul noche: tomado directo del logo real (fondo del lockup) — reemplaza el negro como color oscuro de marca */
  --azul-noche: #11144E;
  --azul-noche-light: #1c2070;

  /* Neutros de soporte (no están en el manual, derivados para fondos/legibilidad) */
  --ivory-bg: #FAF7F2;
  --ivory-card: #FFFFFF;
  --gris-texto: #5b5852;
  --linea-suave: #e8e1d6;

  /* Paleta Kids (Manual 4.2) */
  --kids-sol: #F2B705;
  --kids-azul: #00A9E0;
  --kids-lux: #6633CC;
  --kids-bg: #FFFBEF;

  /* Tipografía — el wordmark real del logo usa una geométrica redondeada, no la serif del manual */
  --font-display: 'Baloo 2', 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Espaciado */
  --section-pad: clamp(64px, 9vw, 128px);
  --container: 1180px;

  /* Sombra y radio */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 60px -25px rgba(29,29,27,0.25);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--negro-grafito);
  background: var(--ivory-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  margin: 0 0 .4em;
  line-height: 1.12;
  font-weight: 700;
  color: var(--negro-grafito);
}

p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--morado-diamante);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: var(--morado-diamante);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space: nowrap;
}
.btn-primary{
  background: var(--morado-diamante);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(75,60,152,.55);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(75,60,152,.6); }
.btn-outline{
  background: transparent;
  border-color: rgba(29,29,27,.25);
  color: var(--negro-grafito);
}
.btn-outline:hover{ border-color: var(--negro-grafito); transform: translateY(-3px); }
.btn-light{
  background:#fff;
  color: var(--morado-diamante);
}
.btn-light:hover{ transform: translateY(-3px); }

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }

.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

:focus-visible{
  outline: 3px solid var(--kids-azul);
  outline-offset: 3px;
}