:root{
  --paper:#FFFFFF;
  --ink:#201811;
  --ink-soft:#4a3d31;
  --celeste:#01CFF8;
  --celeste-soft:#DFF6FC;
  --celeste-deep:#0093B0;
  --marron:#4F3625;
  --marron-wash:#F1E4D8;
  --gris:#ADB5BD;
  --gris-wash:#EBEEF0;
  --radius-card:26px;
  --radius-pill:999px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;}
.display{
  font-family:'Antonio',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.005em;
}

/* ---------- nav ---------- */
nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:40;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Antonio',sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:0.01em;
  text-decoration:none;
  text-transform:uppercase;
}
.nav-links{
  display:flex;
  gap:24px;
  list-style:none;
  margin:0;padding:0;
}
.pill-link{
  padding:9px 4px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.01em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}
.pill-link:hover{color:var(--celeste-deep);}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.03em;
  padding:12px 22px;
  text-decoration:none;
  border:2px solid var(--ink);
  cursor:pointer;
}
.btn--filled{background:var(--ink);color:var(--paper);}
.btn--ghost{background:var(--paper);color:var(--ink);}
.btn--celeste{background:var(--celeste);color:var(--ink);border-color:var(--ink);}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible, .pill-link:focus-visible{outline:3px solid var(--celeste-deep);outline-offset:2px;}

@media (max-width:760px){
  .nav-links{display:none;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--celeste-soft);
  padding:88px 24px 64px;
  overflow:hidden;
  border-bottom:2px solid var(--ink);
}
.hero__inner{
  max-width:1200px;
  margin:0 auto;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:26px;
}
.hero__title{
  position:relative;
  z-index:1;
  font-size:clamp(64px, 15vw, 190px);
  line-height:0.82;
  color:var(--ink);
}
.hero__tagline{
  position:relative;
  z-index:1;
  font-size:clamp(18px,2.6vw,26px);
  font-weight:500;
  max-width:34ch;
  color:var(--ink-soft);
}
.hero__ctas{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:6px;
}
.stickers{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}
.sticker{
  width:64px;height:64px;
  border:2.5px solid var(--ink);
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.sticker svg{width:30px;height:30px;}
.sticker--celeste{background:var(--celeste);}
.sticker--marron{background:var(--marron-wash);}
.sticker--gris{background:var(--gris);}
.sticker--rot1{transform:rotate(-8deg);}
.sticker--rot2{transform:rotate(6deg);}
.sticker--rot3{transform:rotate(-4deg);}
.sticker--rot4{transform:rotate(9deg);}
.sticker--rot5{transform:rotate(-10deg);}

@media (min-width:820px){
  .hero__inner{align-items:flex-start;text-align:left;}
  .hero__tagline{max-width:44ch;}
  .hero__ctas, .stickers{justify-content:flex-start;}
  .stickers{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .sticker{position:absolute;}
  .s1{top:6%;right:8%;}
  .s2{top:32%;right:1%;}
  .s3{bottom:16%;right:14%;}
  .s4{top:2%;right:28%;}
  .s5{bottom:2%;right:34%;}
}

/* ---------- sections ---------- */
section{padding:72px 24px;}
.section__inner{max-width:1200px;margin:0 auto;}
.section__head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:40px;
  max-width:56ch;
}
.section__title{
  font-size:clamp(34px,5vw,56px);
  line-height:0.92;
}

/* servicios */
.servicios{background:var(--paper);}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}
.card{
  border:2px solid var(--ink);
  border-radius:var(--radius-card);
  padding:32px 26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  background:var(--paper);
}
.card__icon{
  width:64px;height:64px;
  border:2px solid var(--ink);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
}
.card__icon svg{width:32px;height:32px;}
.card h3{font-size:20px;font-weight:700;}

/* sobre mi */
.sobre{background:var(--marron-wash);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.sobre__inner{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.sobre__title{font-size:clamp(30px,4.6vw,50px);line-height:0.94;margin-bottom:18px;}
.sobre__text{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:52ch;}
.sobre__text + .sobre__text{margin-top:14px;}
.badgegrid{
  display:flex;flex-wrap:wrap;gap:12px;
}
.badge{
  border:2px solid var(--ink);
  border-radius:var(--radius-pill);
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  background:var(--paper);
  letter-spacing:0.02em;
}
@media (max-width:820px){
  .sobre__inner{grid-template-columns:1fr;}
}

/* proceso */
.proceso{background:var(--gris-wash);}
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.step{
  display:flex;
  align-items:baseline;
  gap:16px;
}
.step__num{
  font-family:'Antonio',sans-serif;
  font-weight:700;
  font-size:56px;
  line-height:1;
  color:var(--celeste-deep);
  flex:none;
}
.step h3{font-size:22px;}

/* cta final */
.cta-final{
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  border-top:2px solid var(--ink);
}
.cta-final .section__inner{
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.cta-final__title{
  font-size:clamp(40px,8vw,96px);
  line-height:0.86;
  color:var(--paper);
}
.cta-final p{color:#d8cfc6;font-size:16px;max-width:44ch;}
.cta-final .btn--celeste{color:var(--ink);}

/* footer */
footer{
  background:var(--paper);
  border-top:2px solid var(--ink);
  padding:28px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--ink-soft);
}
footer a{text-decoration:underline;}