/* ============================================================
   XULA COMUNICACIÓN — Landing
   Tipografía: Poppins (titulares) + Hanken Grotesk (cuerpo, alt. Codec Pro)
   ============================================================ */

:root{
  /* Marca */
  --rosa:        #FF78D7;
  --naranja:     #FC8F17;
  --naranja-osc: #EA5B0C;
  --carne:       #FFF4ED;
  --amarillo:    #FCD671;
  --rosa-palo:   #FAD2E1;
  --azul:        #7CA5FA;
  --lila:        #9A7BFF;
  --tinta:       #292929;   /* gris oscuro: textos */

  --radio:   26px;
  --radio-s: 16px;
  --maxw:    1180px;
  --ease:    cubic-bezier(.22,1,.36,1);

  --fs-eyebrow: clamp(.72rem, 1.4vw, .82rem);
  --fs-hero:    clamp(2.9rem, 11.5vw, 7.6rem);
  --fs-h2:      clamp(2.05rem, 7.2vw, 4.4rem);
  --fs-big:     clamp(1.45rem, 5.4vw, 2.85rem);
  --fs-lead:    clamp(1.15rem, 3vw, 1.6rem);
  --fs-body:    clamp(1.02rem, 2.4vw, 1.22rem);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  color:var(--tinta);
  background:var(--carne);
  font-size:var(--fs-body);
  line-height:1.55;
  font-weight:450;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:700;
  line-height:.99;
  letter-spacing:-.025em;
  text-wrap:balance;
}

/* La palabra clave en cursiva — se mantiene Poppins */
em, .key{ font-family:"Poppins", system-ui, sans-serif; font-style:italic; font-weight:700; }
.lead em{ font-family:inherit; font-weight:600; }

a{ color:inherit; text-decoration:none; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.4rem, 5vw, 4rem); }

.section{
  position:relative;
  padding-block:clamp(5rem, 13vw, 9.5rem);
  overflow:hidden;
}
.section--pink   { background:var(--rosa);      color:var(--carne); }
.section--cream  { background:var(--carne);     color:var(--tinta); }
.section--palo   { background:var(--rosa-palo); color:var(--tinta); }
.section--dark   { background:var(--tinta);     color:var(--carne); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:600;
  font-size:var(--fs-eyebrow);
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.9;
  margin-bottom:clamp(1.4rem, 3.5vw, 2.2rem);
}
.eyebrow .dot{ width:.55em; height:.55em; border-radius:50%; background:currentColor; }
.eyebrow--orange{ color:var(--naranja-osc); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.9rem,2.5vw,1.3rem) clamp(1.4rem,5vw,3rem);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:color-mix(in srgb, var(--carne) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 color-mix(in srgb, var(--tinta) 9%, transparent);
}
.brand{ display:inline-flex; align-items:center; line-height:0; }
.brand .logo{ display:block; height:clamp(24px,6.5vw,32px); width:auto; }
.brand .logo--color{ display:none; }
.nav.scrolled .brand .logo--cream{ display:none; }
.nav.scrolled .brand .logo--color{ display:block; }
.nav-cta{
  font-family:"Poppins",system-ui,sans-serif; font-weight:600;
  font-size:.95rem;
  padding:.62em 1.25em; border-radius:999px;
  background:var(--naranja); color:var(--carne);
  transition:transform .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover{ transform:translateY(-2px); background:var(--naranja-osc); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--rosa); color:var(--carne);
  padding-block:clamp(7rem,18vw,9rem) clamp(3rem,8vw,5rem);
  position:relative;
  overflow:hidden;
}
.hero__eyebrow{
  font-family:"Poppins",system-ui,sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:var(--fs-eyebrow);
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
  display:flex; align-items:center; gap:.7em;
}
.hero__eyebrow .line{ height:1px; width:clamp(28px,8vw,64px); background:currentColor; opacity:.7; }
.hero h1{
  font-size:var(--fs-hero);
  max-width:14ch;
}
.hero h1 em{ color:var(--amarillo); }
.hero__scroll{
  position:absolute; left:50%; bottom:clamp(1.5rem,4vw,2.5rem);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  font-family:"Poppins",system-ui,sans-serif; font-weight:500;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.2em;
  opacity:.85;
}
.hero__scroll .arrow{ width:1px; height:34px; background:currentColor; position:relative; animation:scrollpulse 1.8s var(--ease) infinite; }
.hero__scroll .arrow::after{ content:""; position:absolute; bottom:0; left:50%; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translate(-50%,2px) rotate(45deg); }
@keyframes scrollpulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* Blobs decorativos sutiles */
.blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; pointer-events:none; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--naranja-osc); color:var(--carne);
  padding-block:clamp(1.1rem,2.6vw,1.5rem);
  overflow:hidden; white-space:nowrap;
  border-block:0;
}
.marquee__track{ display:inline-flex; gap:2.4rem; align-items:center; animation:marquee 28s linear infinite; }
.marquee__track span{
  font-family:"Poppins",system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.05rem,3vw,1.7rem); letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:2.4rem;
}
.marquee .star{ color:var(--amarillo); font-size:1.1em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECCIONES DE TEXTO
   ============================================================ */
.section h2{ font-size:var(--fs-h2); max-width:18ch; }
.section h2 .q{ display:block; }
.lead{
  font-size:var(--fs-lead);
  max-width:30ch;
  margin-top:clamp(1.5rem,4vw,2.2rem);
  font-weight:450;
  line-height:1.5;
}

/* "más modernos / más actuales / más grandes" */
.escalada{
  display:flex; flex-direction:column; gap:.15em;
  margin-top:clamp(1.8rem,5vw,2.8rem);
  font-family:"Poppins",system-ui,sans-serif; font-weight:700;
  letter-spacing:-.03em; line-height:1;
}
.escalada span{ font-size:var(--fs-big); display:flex; align-items:baseline; gap:.4em; }
.escalada span .mas{ font-style:italic; }
.escalada span:nth-child(1){ color:var(--naranja); }
.escalada span:nth-child(2){ color:var(--naranja-osc); }
.escalada span:nth-child(3){ color:var(--rosa); }
.section--pink .escalada span:nth-child(1){ color:var(--amarillo); }
.section--pink .escalada span:nth-child(3){ color:var(--carne); }

.outro-line{
  margin-top:clamp(2rem,5vw,3rem);
  font-family:"Poppins",system-ui,sans-serif; font-weight:700;
  font-size:var(--fs-lead); letter-spacing:-.02em;
  max-width:24ch;
}

/* Cuerpos en prosa (antes listas) */
.prose{
  font-size:clamp(1.35rem, 4.4vw, 2.15rem);
  line-height:1.32;
  font-weight:500;
  letter-spacing:-.015em;
  max-width:21ch;
  margin-top:clamp(1.7rem,4.2vw,2.5rem);
  text-wrap:pretty;
}
.prose + .prose{ margin-top:clamp(1rem,2.5vw,1.4rem); }
.prose em{ font-weight:700; }
.prose .c1{ color:var(--naranja); }
.prose .c2{ color:var(--naranja-osc); }
.prose .c3{ color:var(--rosa); }
.section--dark .prose .c3{ color:var(--rosa); }
.section--pink .prose .c1{ color:var(--amarillo); }
.prose q{ font-style:normal; }

/* ---------- Listas ---------- */
.list{ list-style:none; margin-top:clamp(2rem,5vw,3rem); display:flex; flex-direction:column; gap:clamp(1.1rem,2.6vw,1.5rem); max-width:30ch; }
.list li{
  display:flex; gap:.85em; align-items:flex-start;
  font-size:var(--fs-big);
  font-family:"Poppins",system-ui,sans-serif; font-weight:600;
  letter-spacing:-.02em; line-height:1.08;
}
.list li .mk{
  flex:none; margin-top:.12em;
  font-size:.62em; line-height:1;
  color:var(--naranja);
}
.section--dark .list li .mk{ color:var(--rosa); }
.section--palo .list li .mk{ color:var(--naranja-osc); }
.list li q{ font-style:normal; }
.list--quotes li{ font-weight:500; }

/* ============================================================
   PRESENTACIÓN FINAL
   ============================================================ */
.presenta{ text-align:left; }
.presenta .hola{ font-size:var(--fs-hero); line-height:.95; max-width:12ch; }
.presenta .hola em{ color:var(--amarillo); }
.presenta .sub{
  font-size:var(--fs-lead); max-width:30ch; line-height:1.5;
  margin-top:clamp(1.8rem,4.5vw,2.6rem); font-weight:450;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto h2{ font-size:clamp(2.2rem,8vw,5rem); max-width:14ch; }
.form{
  margin-top:clamp(2.4rem,6vw,3.4rem);
  display:grid; gap:clamp(1.1rem,2.6vw,1.4rem);
  max-width:620px;
}
.field{ display:flex; flex-direction:column; gap:.5em; }
.field label{
  font-family:"Poppins",system-ui,sans-serif; font-weight:600;
  font-size:.92rem; letter-spacing:.01em;
}
.field input, .field textarea{
  font-family:inherit; font-size:1.06rem; color:var(--tinta);
  background:var(--carne);
  border:2px solid color-mix(in srgb, var(--tinta) 16%, transparent);
  border-radius:var(--radio-s);
  padding:.85em 1em;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  width:100%;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb, var(--tinta) 42%, transparent); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--naranja);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--naranja) 22%, transparent);
}
.form .field--full{ grid-column:1/-1; }

.submit{
  grid-column:1/-1;
  justify-self:start;
  margin-top:.4rem;
  font-family:"Poppins",system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.05rem,2.6vw,1.25rem);
  color:var(--carne); background:var(--naranja);
  border:none; border-radius:999px;
  padding:.95em 2.1em;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.6em;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--naranja-osc) 80%, transparent);
}
.submit:hover{ transform:translateY(-3px); background:var(--naranja-osc); box-shadow:0 16px 30px -10px color-mix(in srgb, var(--naranja-osc) 85%, transparent); }
.submit .arrow{ transition:transform .25s var(--ease); }
.submit:hover .arrow{ transform:translateX(4px); }

.form-note{ grid-column:1/-1; font-size:.92rem; opacity:.7; }

.form-success{
  display:none;
  grid-column:1/-1;
  text-align:center;
  padding:clamp(2.4rem,6vw,3.6rem) clamp(1.5rem,4vw,2.5rem);
  background:var(--rosa); color:var(--carne);
  border-radius:var(--radio);
}
.form-success.show{ display:block; animation:pop .5s var(--ease); }
.form-success h3{ font-size:clamp(1.8rem,6vw,3rem); font-family:"Poppins"; font-weight:700; }
.form-success h3 em{ color:var(--amarillo); }
.form-success p{ margin-top:.7em; font-size:var(--fs-lead); }
.form.is-sent .field, .form.is-sent .submit, .form.is-sent .form-note{ display:none; }
@keyframes pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }

@media(min-width:620px){
  .form{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1/-1; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--tinta); color:var(--carne);
  padding-block:clamp(3rem,7vw,4.5rem);
}
.footer__top{ display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:flex-end; justify-content:space-between; }
.footer .brand .logo{ height:clamp(42px,12vw,62px); }
.footer .brand .logo--color{ display:block; }
.footer__slogan{
  font-family:"Poppins",system-ui,sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.82rem;
  color:var(--rosa);
}
.footer__bottom{
  margin-top:clamp(2rem,5vw,3rem);
  padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb, var(--carne) 18%, transparent);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.85rem; opacity:.6;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}