/* ===========================================================
   comenta con GIO — landing page styles
   =========================================================== */

:root{
  --pink-pastel:#f4b6df;
  --lime:#dff701;
  --pink-hot:#fd57a7;
  --purple:#3f22ec;
  --turquoise:#03e39d;
  --yellow:#f0ca60;
  --brown:#3a221b;
  --cream:#fffaf3;
  --white:#ffffff;

  --font-display:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;

  --radius-blob: 32px;
  --shadow-hard: 6px 6px 0 var(--brown);
  --shadow-hard-sm: 4px 4px 0 var(--brown);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--brown);
  background:var(--cream);
  overflow-x:hidden;
  font-size:16px;
  line-height:1.5;
}

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

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

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  margin:0;
  line-height:1.05;
  letter-spacing:-0.01em;
}

h2{
  font-size:clamp(2rem, 5.5vw, 3.4rem);
  margin-bottom:1rem;
}

h3{ font-size:1.4rem; }

p{ margin:0 0 1rem; }

.wiggle{ display:inline-block; animation:wiggle 2.6s ease-in-out infinite; }
@keyframes wiggle{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(-8deg); }
  75%{ transform:rotate(8deg); }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  padding:1rem 1.7rem;
  border-radius:100px;
  border:3px solid var(--brown);
  box-shadow:var(--shadow-hard);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  white-space:nowrap;
}
.btn:hover{
  transform:translate(-2px,-3px);
  box-shadow:8px 9px 0 var(--brown);
}
.btn:active{
  transform:translate(1px,2px);
  box-shadow:2px 2px 0 var(--brown);
}
.btn-primary{ background:var(--pink-hot); color:var(--white); }
.btn-secondary{ background:var(--lime); color:var(--brown); }
.btn-big{ padding:1.15rem 2rem; font-size:1.12rem; }
.btn-nav{
  padding:.6rem 1.15rem;
  font-size:.85rem;
  box-shadow:3px 3px 0 var(--brown);
  background:var(--turquoise);
  color:var(--brown);
}
.btn-nav:hover{ box-shadow:5px 6px 0 var(--brown); }

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- floating doodles ---------- */
.doodle{ position:absolute; pointer-events:none; z-index:2; }
.float-slow{ animation:floaty 6s ease-in-out infinite; }
.float-med{ animation:floaty 4.2s ease-in-out infinite; }
.float-fast{ animation:floaty 3s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-12px) rotate(var(--r,0deg)); }
}

.sticker-flat{
  background:var(--white);
  border:3px solid var(--brown);
  border-radius:20px;
  box-shadow:4px 4px 0 var(--brown);
  padding:.5rem .9rem;
  font-weight:700;
  font-size:.85rem;
  transform:rotate(-4deg);
  z-index:3;
}

/* halftone dot texture */
.halftone{
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--brown) 1.4px, transparent 1.4px);
  background-size:16px 16px;
  opacity:.05;
  pointer-events:none;
  z-index:0;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,250,243,.88);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--brown);
}
.nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:.65rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.nav-logo img{ height:38px; width:auto; }
.nav-links{
  display:flex;
  gap:1.6rem;
  font-weight:600;
  font-size:.92rem;
}
.nav-links a{
  position:relative;
  padding:.2rem 0;
}
.nav-links a:hover{ color:var(--pink-hot); }
@media (max-width:760px){
  .nav-links{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 1.5rem 3rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%, var(--pink-pastel) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, var(--turquoise) 0%, transparent 38%),
    radial-gradient(circle at 92% 82%, var(--yellow) 0%, transparent 34%),
    var(--cream);
}
.hero-inner{ position:relative; z-index:4; max-width:760px; }

.eyebrow-tape{
  display:inline-block;
  background:var(--purple);
  color:var(--white);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.03em;
  padding:.5rem 1.2rem;
  border-radius:100px;
  border:2.5px solid var(--brown);
  transform:rotate(-2deg);
  margin-bottom:1.6rem;
}

.hero-lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.8rem, 2.4vw, 1.8rem);
  flex-wrap:wrap;
  margin-bottom:1.4rem;
}

.hero-face-icon{
  --size:clamp(150px, 20vw, 260px);
  height:var(--size);
  width:auto;
  flex:0 0 auto;
  filter:drop-shadow(5px 7px 0 rgba(58,34,27,.16));
}

.hero-logo{
  height:clamp(120px, 16vw, 210px);
  width:auto;
  filter:drop-shadow(6px 8px 0 rgba(58,34,27,.18));
}

@media (max-width:560px){
  .hero-lockup{ gap:.7rem; }
}

.hero-tagline{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem,3.4vw,1.9rem);
  color:var(--pink-hot);
  margin-bottom:.6rem;
}

.hero-sub{
  font-size:1.1rem;
  font-weight:500;
  max-width:520px;
  margin:0 auto 2.1rem;
  color:var(--brown);
}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}

/* hero doodles positions — kept clear of the face+logo lockup in the center */
.doodle-star1{ width:34px; top:10%; left:7%; }
.doodle-star2{ width:24px; top:82%; left:10%; }
.doodle-heart1{ width:44px; bottom:8%; right:8%; z-index:2; }
.doodle-bubble1{ top:4%; left:50%; margin-left:-92px; --r:-4deg; }
.doodle-scribble1{ width:100px; bottom:5%; left:3%; opacity:.7; }
.doodle-bolt1{ width:24px; top:16%; right:20%; }

@media (max-width:640px){
  .doodle-heart1{ display:none; }
  .doodle-bubble1{ display:none; }
  .doodle-scribble1{ display:none; }
  .doodle-bolt1{ display:none; }
  .doodle-star1{ left:4%; }
}

/* ---------- generic section ---------- */
.section{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:5.5rem 1.5rem;
  text-align:center;
}

.section-intro{
  max-width:600px;
  margin:0 auto 0.5rem;
  font-size:1.08rem;
}

.quote-callout{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  font-size:1.2rem;
  background:var(--pink-pastel);
  padding:.7rem 1.4rem;
  border-radius:16px;
  border:2.5px solid var(--brown);
  transform:rotate(-1.4deg);
  margin:1.2rem 0 0;
}

.tape{
  position:absolute;
  top:1.6rem;
  right:6%;
  background:var(--yellow);
  border:2.5px solid var(--brown);
  padding:.4rem 1rem;
  font-weight:700;
  font-size:.85rem;
  transform:rotate(5deg);
  border-radius:6px;
}

/* ---------- que hacemos / concept cards ---------- */
.concept-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
  margin-top:3rem;
}
.concept-card{
  background:var(--white);
  border:3px solid var(--brown);
  border-radius:28px;
  padding:2.2rem 1.4rem;
  box-shadow:6px 6px 0 var(--brown);
  transform:rotate(var(--rot));
  transition:transform .25s ease;
}
.concept-card:hover{ transform:rotate(0deg) translateY(-6px); }
.concept-card h3{ color:var(--c); margin:.6rem 0 .5rem; }
.concept-emoji{ font-size:2.4rem; }
.concept-card p{ margin:0; font-weight:500; }

@media (max-width:760px){
  .concept-grid{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; margin-top:2.4rem;}
}

/* ---------- historia section ---------- */
.historia-section{ text-align:left; }
.doodle-star3{ width:30px; top:1.2rem; left:6%; }
@media (max-width:640px){ .doodle-star3{ display:none; } }
.historia-card{
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:3rem;
  align-items:center;
  background:var(--purple);
  color:var(--white);
  border:3px solid var(--brown);
  border-radius:36px;
  padding:3.2rem;
  box-shadow:8px 8px 0 var(--brown);
}
.historia-card h2{ color:var(--white); }
.question-list{
  list-style:none;
  padding:0;
  margin:1.2rem 0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.question-list li{
  font-weight:600;
  font-size:1.05rem;
  padding-left:1.5rem;
  position:relative;
}
.question-list li::before{
  content:"💭";
  position:absolute;
  left:0;
}
.mandamela{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.6rem;
  color:var(--lime);
  margin-top:1.4rem;
}
.note-anon{
  margin-top:.9rem;
  font-size:.92rem;
  opacity:.9;
}
.btn-big{ margin-top:.4rem; }

.envelope-stack{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  align-items:center;
}
.env-sticker{
  background:var(--c);
  color:var(--brown);
  border:3px solid var(--brown);
  border-radius:20px;
  padding:1rem 1.3rem;
  font-weight:700;
  font-size:1rem;
  box-shadow:5px 5px 0 var(--brown);
  transform:rotate(var(--rot));
  width:min(280px, 100%);
  text-align:center;
}

@media (max-width:900px){
  .historia-card{ grid-template-columns:1fr; padding:2.2rem; }
  .historia-visual{ order:-1; }
  .envelope-stack{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
}

/* ---------- redes sociales ---------- */
.redes-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
  margin-top:3rem;
}
.red-card{
  background:var(--white);
  border:3px solid var(--brown);
  border-radius:26px;
  padding:2rem 1.3rem;
  box-shadow:5px 5px 0 var(--brown);
  transition:transform .2s ease, box-shadow .2s ease;
  text-align:left;
}
.red-card:hover{
  transform:translateY(-6px);
  box-shadow:8px 9px 0 var(--brown);
}
.red-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--c);
  color:var(--white);
  margin-bottom:1rem;
}
.red-card h3{ margin-bottom:.3rem; }
.red-card p{ font-size:.92rem; font-weight:500; }
.red-cta{
  display:inline-block;
  margin-top:.6rem;
  font-weight:700;
  font-size:.88rem;
  color:var(--c);
}

@media (max-width:900px){
  .redes-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .redes-grid{ grid-template-columns:1fr; }
}

/* ---------- manda section ---------- */
.manda-section{
  background:var(--pink-pastel);
  border-top:3px solid var(--brown);
  border-bottom:3px solid var(--brown);
  max-width:none;
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.sticker-cloud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  max-width:900px;
  margin:2.6rem auto;
}
.cloud-sticker{
  background:var(--c);
  border:3px solid var(--brown);
  border-radius:100px;
  padding:.75rem 1.3rem;
  font-weight:700;
  font-size:.98rem;
  box-shadow:4px 4px 0 var(--brown);
  transform:rotate(var(--rot));
  transition:transform .2s ease;
  color:var(--brown);
}
.cloud-sticker:hover{ transform:rotate(0deg) scale(1.06); }
.no-story-line{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  margin-top:1rem;
}

/* ---------- brand statement ---------- */
.brand-statement{
  position:relative;
  background:var(--purple);
  color:var(--white);
  padding:7rem 1.5rem;
  text-align:center;
  overflow:hidden;
  border-top:3px solid var(--brown);
  border-bottom:3px solid var(--brown);
}
.brand-eyebrow{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--lime);
  margin-bottom:1rem;
}
.brand-huge{
  font-size:clamp(2.6rem, 9vw, 6.2rem);
  font-weight:900;
  letter-spacing:-.02em;
}
.brand-huge span{ color:var(--lime); }

.doodle-heart2{ width:70px; top:12%; left:8%; }
.doodle-star4{ width:44px; bottom:14%; right:12%; }
.doodle-bubble2{ top:18%; right:10%; background:var(--white); color:var(--brown); }
@media (max-width:700px){
  .doodle-heart2, .doodle-star4, .doodle-bubble2{ display:none; }
}

/* ---------- final cta ---------- */
.final-cta{
  position:relative;
  text-align:center;
  padding:6rem 1.5rem 5rem;
  overflow:hidden;
}
.final-character{
  width:120px;
  margin:0 auto 1.2rem;
}
.final-cta .hero-ctas{ margin-top:1.6rem; }

/* ---------- footer ---------- */
.footer{
  background:var(--brown);
  color:var(--cream);
  text-align:center;
  padding:3.4rem 1.5rem 2.2rem;
}
.footer-logo{ height:56px; margin:0 auto 1rem; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.footer-tag{ font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; color:var(--pink-pastel); }
.footer-phrase{ font-weight:700; font-size:1.05rem; margin-bottom:1.6rem; }
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.4rem;
  font-weight:600;
  font-size:.92rem;
  margin-bottom:1.8rem;
}
.footer-links a:hover{ color:var(--lime); }
.footer-copy{ font-size:.78rem; opacity:.65; margin:0; }

/* ---------- responsive base ---------- */
@media (max-width:600px){
  .section{ padding:3.6rem 1.2rem; }
  .historia-card{ border-radius:26px; }
}