/* ============================================================
   KAWIIL MX — SISTEMA VISUAL v3
   Cálido, redondeado, mexicano, accesible.
============================================================ */

:root {
  --kawiil-blue:  #0075EF;
  --kawiil-aqua:  #00FFA1;
  --kawiil-deep:  #0026A0;
  --kawiil-blue-soft: #E6F1FE;
  --kawiil-aqua-soft: #D9FFEE;

  --bg:           #FFFFFF;
  --bg-soft:      #F2F6FF;
  --bg-blue:      #E6F1FE;
  --bg-deep:      #001E5C;
  --ink:          #0A1228;
  --ink-soft:     #2C3552;
  --ink-mute:     #6B7290;
  --rule:         rgba(10, 18, 40, 0.10);

  /* Mapeo: lo que antes era "arena/coral/sol" ahora vive en la paleta Kawiil
     (azul + aqua + tinta). Mantenido como alias por compatibilidad. */
  --sol:          var(--kawiil-blue);
  --tierra:       var(--kawiil-deep);
  --coral:        var(--kawiil-deep);
  --coral-soft:   var(--kawiil-aqua-soft);
  --bg-coral:     var(--kawiil-blue-soft);

  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html {
  margin: 0; padding: 0;
  scroll-behavior: smooth;
}
body {
  margin: 0; padding: 0;
  background-color: var(--bg);
  /* Textura sutil + puntos: continuidad con el “look producto” del sitio React */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(10, 18, 40, 0.06) 1px, transparent 0),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(10, 18, 40, 0.018) 3px,
      rgba(10, 18, 40, 0.022) 4px
    );
  background-size: 22px 22px, auto;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-size: 17px; line-height: 1.55;
}
::selection { background: var(--kawiil-aqua); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

/* TIPO */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--kawiil-aqua);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.5} }

.h-display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.93;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.h-section {
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.h-card {
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
.h-display em, .h-section em {
  font-style: normal;
  color: var(--kawiil-blue);
  font-weight: 500;
}
.squiggle {
  position: relative; display: inline-block;
  color: var(--kawiil-blue);
  z-index: 1;
}
.squiggle::after {
  content: ''; position: absolute;
  left: -3%; right: -3%; bottom: 4%;
  height: 22%; background: var(--kawiil-aqua);
  z-index: -1; border-radius: 999px;
  transform: skewX(-3deg);
}

.lead {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}
.body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.small { font-size: 14px; color: var(--ink-mute); }
.mono { font-family: var(--mono); font-size: 13px; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* BOTONES */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 15px; padding: 14px 22px;
  border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all .2s cubic-bezier(.2,.7,.2,1);
}
.btn-primary { background: var(--kawiil-blue); color: white; }
.btn-primary:hover {
  background: var(--kawiil-deep);
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px -10px rgba(0, 117, 239, 0.45),
    0 0 0 1px rgba(0, 117, 239, 0.12);
}
.btn-aqua { background: var(--kawiil-aqua); color: var(--ink); border-color: var(--ink); }
.btn-aqua:hover { background: var(--ink); color: var(--kawiil-aqua); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: white; }
.btn .arrow { transition: transform .2s; display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

/* Cards */
.card {
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 24px;
  padding: 28px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--ink);
}

/* Animaciones */
.fade-up { opacity: 0; transform: translateY(24px); animation: fade-up .9s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.fade-up.d1 { animation-delay: .1s; }
.fade-up.d2 { animation-delay: .2s; }
.fade-up.d3 { animation-delay: .3s; }
.fade-up.d4 { animation-delay: .4s; }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
  .float, .wiggle, .marquee { animation: none !important; }
}

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.float { animation: float 5s ease-in-out infinite; }

@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee {
  display: flex; gap: 60px;
  animation: marquee 38s linear infinite;
  width: max-content;
  align-items: center;
}

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg-soft);
  font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--rule);
  white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 999px; }

/* ========== Capa visual “novedosa” (heredada del stack React) ========== */

.gradient-text {
  background: linear-gradient(
    125deg,
    var(--kawiil-blue) 0%,
    var(--kawiil-deep) 42%,
    var(--kawiil-aqua) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.hero-orb--pulse {
  animation: orb-pulse 5.5s ease-in-out infinite;
}
.hero-orb--pulse.d1 { animation-delay: 1.2s; }
.hero-orb--pulse.d2 { animation-delay: 2.5s; }

@keyframes orb-pulse {
  0%, 100% { opacity: 0.38; transform: scale(1); }
  50% { opacity: 0.58; transform: scale(1.06); }
}

.glass-panel {
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(10, 18, 40, 0.11);
  border-radius: 24px;
  box-shadow:
    0 8px 32px -12px rgba(10, 18, 40, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s;
}

.glass-panel:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px -14px rgba(0, 117, 239, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hero-glass-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid rgba(10, 18, 40, 0.08);
}
.hero-glass-row:first-child {
  border-top: none;
  padding-top: 0;
}

.hero-glass-ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.gradient-ico-blue {
  background: linear-gradient(135deg, var(--kawiil-blue) 0%, var(--kawiil-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0, 117, 239, 0.5);
}
.gradient-ico-aqua {
  background: linear-gradient(135deg, var(--kawiil-aqua) 0%, #00c988 100%);
  color: var(--ink);
  box-shadow: 0 6px 16px -6px rgba(0, 255, 161, 0.35);
}
.gradient-ico-mix {
  background: linear-gradient(135deg, var(--kawiil-deep) 0%, var(--kawiil-blue) 50%, var(--kawiil-aqua) 100%);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0, 38, 160, 0.4);
}

.status-pulse-soft {
  animation: status-pulse-soft 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes status-pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(1.06); }
}

.fade-in-hero {
  animation: fade-in-hero 0.75s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes fade-in-hero {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; background-position: 0% 40%; }
  .hero-orb--pulse { animation: none; opacity: 0.42; transform: none; }
  .status-pulse-soft { animation: none; }
  .fade-in-hero { animation: none; opacity: 1; transform: none; }
  .glass-panel:hover { transform: none; }
}