:root{
  --turquesa:#36DEEF;
  --turquesa-oscuro:#00A8B8;
  --rosa:#F897FC;
  --tinta:#20232A;
  --gris:#5B6B74;
  --borde:#E6EBEE;
  --fondo:#F5F7F9;
  --tinta-line:rgba(246,250,251,.14);
  --on-tinta-muted:#aebac0;
  --radius:20px;
  --wrap:840px;
  --wrap-wide:1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:#fff;
  color:var(--tinta);
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  font-weight:400;
}
h1,h2,h3,.display{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  text-wrap:balance;
  letter-spacing:-0.01em;
  margin:0;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
.wrap-wide{max-width:var(--wrap-wide); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-weight:800; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color:var(--turquesa-oscuro);
}
.surface-tinta{background:var(--tinta); color:#fff;}
.surface-tinta .eyebrow{color:var(--turquesa);}

/* header */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--borde);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--wrap-wide); margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:800; font-size:20px; color:var(--tinta); text-decoration:none;}
.brand img{width:34px;height:34px;border-radius:9px;display:block;}
.navlinks{display:flex; align-items:center; gap:30px; font-size:14.5px; color:var(--gris); font-weight:600;}
.navlinks a{text-decoration:none; transition:color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--turquesa-oscuro);}
.btn{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px;
  padding:12px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn-pink{background:var(--rosa); color:#4a0d4f;}
.btn-pink:hover{transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(248,151,252,.55);}

.nav-toggle{display:none; background:none; border:1px solid var(--borde); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; color:var(--tinta); flex:none;}
.nav-cta-mobile{display:none;}
header.menu-open{background:#fff; backdrop-filter:none;}
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-cta-desktop{display:none;}
  .navlinks{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--borde);
    max-height:0; overflow:hidden; opacity:0; padding:0 28px;
    transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
  }
  .navlinks.open{max-height:420px; opacity:1; padding:8px 28px 20px;}
  .navlinks a{padding:13px 0; border-bottom:1px solid var(--borde); width:100%;}
  .nav-cta-mobile{display:inline-flex; margin-top:16px; justify-content:center;}
}

/* breadcrumb */
.crumbs{font-size:13px; color:var(--gris); padding:22px 0 0;}
.crumbs a{text-decoration:none; color:var(--turquesa-oscuro); font-weight:600;}
.crumbs a:hover{text-decoration:underline;}

/* article header */
.post-head{padding:26px 0 40px; border-bottom:1px solid var(--borde);}
.post-head h1{font-size:clamp(28px,4.2vw,42px); line-height:1.14; margin-top:14px; color:var(--tinta);}
.post-meta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:18px; font-size:13.5px; color:var(--gris); font-weight:600;}
.post-meta .dot{opacity:.5;}

/* article body */
.post-body{padding:44px 0 20px; font-size:17px; color:#333a41;}
.post-body p{margin:0 0 20px;}
.post-body h2{font-size:24px; margin:40px 0 16px; color:var(--tinta);}
.post-body h3{font-size:19px; margin:28px 0 12px; color:var(--tinta);}
.post-body ul,.post-body ol{margin:0 0 20px; padding-left:22px;}
.post-body li{margin-bottom:8px;}
.post-body strong{color:var(--tinta);}
.callout{
  background:var(--fondo); border:1px solid var(--borde); border-left:4px solid var(--rosa);
  border-radius:12px; padding:20px 22px; margin:28px 0; font-size:15.5px; color:var(--tinta);
}
.callout strong{color:#b93cc0;}

/* post CTA */
.post-cta{
  margin-top:44px; padding:36px; border-radius:var(--radius); text-align:center;
  background:radial-gradient(520px 260px at 50% 0%, rgba(248,151,252,.18), transparent 65%), var(--fondo);
  border:1px solid var(--borde);
}
.post-cta h3{font-size:22px; margin-bottom:10px;}
.post-cta p{color:var(--gris); margin:0 auto 22px; max-width:48ch;}

/* related / index grid */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:720px){ .blog-grid{grid-template-columns:1fr;} }
.post-card{display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--borde); border-radius:18px; padding:26px; transition:box-shadow .15s, transform .15s;}
.post-card:hover{box-shadow:0 20px 34px -20px rgba(32,35,42,.3); transform:translateY(-3px);}
.post-card .eyebrow{margin-bottom:10px;}
.post-card h3{font-size:19px; margin-bottom:10px; color:var(--tinta);}
.post-card p{margin:0; color:var(--gris); font-size:14.5px; line-height:1.55;}
.post-card .read{display:inline-block; margin-top:14px; font-size:13px; font-weight:800; color:var(--turquesa-oscuro);}

.blog-hero{padding:52px 0 40px; background:radial-gradient(680px 340px at 88% -10%, rgba(54,222,239,.18), transparent 62%), #fff;}
.blog-hero h1{font-size:clamp(30px,4.4vw,46px); color:var(--tinta);}
.blog-hero p.lead{font-size:17px; color:var(--gris); max-width:56ch; margin-top:16px;}

/* footer */
footer{padding:44px 0 30px; border-top:1px solid var(--tinta-line);}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid var(--tinta-line); margin-bottom:20px;}
.foot-brand{display:flex; align-items:center; gap:12px;}
.foot-brand img{width:44px;height:44px;border-radius:11px;display:block;}
.foot-brand span{font-family:'Poppins',sans-serif; font-weight:800; font-size:18px;}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap; font-size:13.5px; color:var(--on-tinta-muted);}
.foot-cols b{display:block; color:#fff; font-weight:700; margin-bottom:8px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; color:var(--on-tinta-muted); font-size:13px;}
.foot-row a{text-decoration:underline;}