/* ============================================================
   NAV + HERO — kaele.mx
   ============================================================ */

/* ---------- Navegación ----------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,249,242,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.nav.con-sombra{border-bottom-color:var(--borde);}
.nav-inner{
  display:flex;align-items:center;gap:36px;
  padding:14px 24px;max-width:var(--ancho);margin:0 auto;
}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;}
.marca img{height:44px;width:auto;}
.marca span{font-weight:800;font-size:1.4rem;letter-spacing:-.035em;}
.nav-links{display:flex;gap:30px;margin:0 auto;}
.nav-links a{
  text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink);
  transition:color .15s;
}
.nav-links a:hover{color:var(--morado);}
.nav .btn{padding:12px 24px;font-size:.94rem;}

@media (max-width:980px){
  .nav-links{display:none;}
  .nav .btn{margin-left:auto;}
}


/* ---------- Hero ----------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:52px 0 76px;}

.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:32px;align-items:center;
  position:relative;z-index:2;
}
.hero h1{margin-bottom:20px;}
.hero-texto > p{
  font-size:1.14rem;color:var(--gris);max-width:42ch;margin-bottom:30px;
}
.hero-acciones{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}

.hero-notas{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.92rem;color:var(--gris);font-weight:600;
}
.hero-notas span{display:flex;align-items:center;gap:7px;}
.hero-notas .sep{color:#D9D2CA;font-weight:400;}

/* Círculo lila detrás del teléfono, como en la referencia */
.hero-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-fondo .circulo{
  position:absolute;border-radius:50%;
}
.circulo-lila{
  width:640px;height:640px;background:#EDE7FF;
  right:-40px;top:-120px;
}
.circulo-durazno{
  width:340px;height:340px;background:#FFEFE1;
  right:340px;bottom:-190px;
}

/* Confeti disperso */
.confeti{position:absolute;z-index:1;pointer-events:none;}
.confeti i{position:absolute;display:block;border-radius:3px;}
.c1{width:16px;height:16px;background:var(--morado);left:56%;top:8%;transform:rotate(22deg);}
.c2{width:13px;height:13px;background:var(--butter);left:60%;top:22%;transform:rotate(-14deg);}
.c3{width:15px;height:15px;background:#FF8FB1;left:53%;top:38%;transform:rotate(35deg);}
.c4{width:14px;height:14px;background:var(--coral);right:6%;top:14%;transform:rotate(-28deg);}
.c5{width:12px;height:12px;background:var(--morado);right:2%;top:36%;transform:rotate(18deg);}
.c6{width:16px;height:16px;background:var(--butter);right:9%;bottom:22%;transform:rotate(-10deg);}
.c7{width:13px;height:13px;background:#FF8FB1;left:57%;bottom:12%;transform:rotate(28deg);}
.c8{width:11px;height:11px;background:var(--coral);right:22%;bottom:6%;transform:rotate(40deg);}


/* ---------- Mockup del celular --------------------------------------------- */
/* El contenedor lleva padding lateral para que las tarjetas floten FUERA
   del teléfono y nunca tapen el contenido de la pantalla. */
.hero-visual{
  position:relative;z-index:2;
  padding:26px 68px;
  display:flex;justify-content:center;
}

.telefono{
  position:relative;
  width:min(272px,100%);
  aspect-ratio:9/18.6;
  background:#101014;
  border-radius:42px;
  padding:9px;
  box-shadow:0 34px 70px rgba(23,21,31,.32), 0 0 0 2px #2b2b33;
  transform:rotate(-3deg);
}
.telefono::before{  /* isla dinámica */
  content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:84px;height:23px;background:#101014;border-radius:999px;z-index:4;
}

.pantalla{
  width:100%;height:100%;
  border-radius:34px;overflow:hidden;
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:52px 20px 24px;
  color:#fff;
  transition:background .6s ease, opacity .35s ease;
}
/* luces cálidas tipo guirnalda + velo para legibilidad */
.pantalla::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,220,150,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 7%,  rgba(255,220,150,.30) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 14%, rgba(255,220,150,.32) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 9%,  rgba(255,220,150,.28) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 0%, rgba(255,210,140,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}
.pantalla > *{position:relative;z-index:2;}

.demo-kicker{
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:.9;margin-bottom:12px;font-weight:600;
}
.demo-titulo{
  font-size:1.9rem;line-height:1.02;font-weight:800;letter-spacing:-.025em;
  margin-bottom:12px;
}
.demo-adorno{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:10px;opacity:.75;font-size:.7rem;
}
.demo-adorno::before,.demo-adorno::after{
  content:"";width:34px;height:1px;background:rgba(255,255,255,.55);
}
.demo-sub{
  font-size:.82rem;font-style:italic;margin-bottom:18px;
  color:var(--butter);
}
.demo-datos{
  display:flex;flex-direction:column;gap:7px;
  font-size:.76rem;margin-bottom:20px;width:100%;
}
.demo-datos div{display:flex;align-items:center;justify-content:center;gap:7px;}
.demo-datos .ic{opacity:.85;font-size:.8rem;}

.demo-btn{
  width:100%;padding:11px;border-radius:999px;
  font-size:.8rem;font-weight:700;
  background:var(--morado);color:#fff;margin-bottom:8px;
  box-shadow:0 6px 16px rgba(108,76,241,.45);
}
.demo-btn-2{
  width:100%;padding:11px;border-radius:999px;
  font-size:.8rem;font-weight:700;
  border:1.5px solid rgba(255,255,255,.65);color:#fff;
}


/* ---------- Tarjetas flotantes ---------------------------------------------- */
.flotante{
  position:absolute;z-index:5;
  background:#fff;border-radius:18px;
  padding:11px 15px;
  box-shadow:0 16px 36px rgba(23,21,31,.16);
  display:flex;align-items:center;gap:11px;
  font-size:.86rem;font-weight:700;line-height:1.25;
  white-space:nowrap;
  animation:flotarSuave 5.5s ease-in-out infinite;
}
.flotante .punto{
  width:36px;height:36px;border-radius:12px;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.flotante small{display:block;font-weight:600;color:var(--gris);font-size:.73rem;}
.flotante .flecha{color:#C9C4D4;font-weight:800;margin-left:2px;}

.punto-lila{background:#EDE6FF;}
.punto-verde{background:#DFF5EC;}
.punto-rosa{background:#FFE1E1;}
.punto-amarillo{background:#FFF1CE;}

/* Ancladas a los bordes del contenedor (que tiene padding), así solo
   alcanzan a montarse sobre el marco del teléfono, nunca sobre la pantalla */
.flotante-1{left:0;top:30%;animation-delay:0s;}
.flotante-2{left:0;bottom:24%;animation-delay:1.2s;}
.flotante-3{right:0;top:12%;animation-delay:.6s;}
.flotante-4{right:0;bottom:14%;animation-delay:1.8s;}

@keyframes flotarSuave{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}


/* ---------- Adaptación a pantallas chicas ----------------------------------- */
/* Entre 960 y 1080 la columna se angosta: el teléfono se encoge para que las
   tarjetas sigan quedando sobre el marco y no sobre el contenido. */
@media (max-width:1080px){
  .hero-visual{padding:26px 40px;}
  .telefono{width:min(244px,100%);}
  .flotante{font-size:.79rem;padding:9px 11px;}
  .flotante .punto{width:30px;height:30px;flex-basis:30px;font-size:.92rem;}
  .flotante small{font-size:.69rem;}
}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-texto{text-align:center;}
  .hero-texto > p{margin-left:auto;margin-right:auto;}
  .hero-acciones,.hero-notas{justify-content:center;}
  .hero-visual{padding:20px 70px;}
  .telefono{width:min(272px,100%);}
  .circulo-lila{width:460px;height:460px;right:-140px;top:auto;bottom:0;}
  .circulo-durazno{display:none;}
  .confeti{display:none;}
}

/* En móvil no hay espacio a los lados del teléfono: en vez de encimar las
   tarjetas sobre la pantalla, dejan de flotar y se acomodan debajo. */
@media (max-width:620px){
  .hero-visual{
    padding:12px 0;
    flex-direction:column;align-items:center;gap:20px;
  }
  .telefono{width:min(232px,66vw);}

  .flotantes{
    position:static;
    display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
    max-width:340px;
  }
  .flotante{
    position:static;
    animation:none;
    font-size:.76rem;padding:8px 12px;border-radius:14px;
    box-shadow:0 6px 18px rgba(23,21,31,.10);
  }
  .flotante .punto{width:28px;height:28px;flex-basis:28px;font-size:.88rem;}
  .flotante small{font-size:.68rem;}
  .flotante .flecha{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .flotante{animation:none;}
}