/* ============================================================
   Puerta 23 — Blog (CSS compartido)
   Coherente con index.html principal (mismas variables y tipografías)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

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

:root{
  --night:#0D0D1A;
  --deep:#12122B;
  --violet:#5B3FD4;
  --violet-md:#7B5CE5;
  --violet-lt:#A48EF5;
  --accent:#C9B8FF;
  --pastel:#D4B8FF;
  --cream:#F7F5FF;
  --warm:#EDEAF8;
  --text:#1E1A36;
  --muted:#6B6490;
  --white:#ffffff;
  --border:rgba(91,63,212,.12);
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden;line-height:1.6}

/* ===== NAV (idéntico al index principal, simplificado) ===== */
nav.blog-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:.35rem 3vw;gap:1rem;
  background:rgba(13,13,26,.97);backdrop-filter:blur(16px);
  box-shadow:0 2px 32px rgba(91,63,212,.15)
}
nav.blog-nav .nav-logo{display:flex;align-items:center;text-decoration:none}
nav.blog-nav .nav-logo img{height:90px;width:auto}
nav.blog-nav .nav-links{display:flex;gap:1.4rem;list-style:none;align-items:center;flex-wrap:wrap}
nav.blog-nav .nav-links a{
  color:rgba(255,255,255,.7);text-decoration:none;
  font-size:.78rem;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;transition:color .25s
}
nav.blog-nav .nav-links a:hover{color:var(--accent)}
nav.blog-nav .nav-cta{
  border:1px solid var(--violet-lt);color:var(--violet-lt)!important;
  padding:.4rem 1.1rem;border-radius:2px;transition:all .25s
}
nav.blog-nav .nav-cta:hover{background:var(--violet-lt);color:var(--night)!important}

/* Hamburger nav móvil */
.blog-hamb{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;z-index:210}
.blog-hamb span{display:block;width:22px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .3s,opacity .3s}
.blog-hamb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.blog-hamb.open span:nth-child(2){opacity:0}
.blog-hamb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.blog-mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(13,13,26,.97);backdrop-filter:blur(20px);z-index:205;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.blog-mobile-menu.open{display:flex}
.blog-mobile-menu a{color:rgba(255,255,255,.85);text-decoration:none;font-size:1.25rem;font-family:'Oswald',serif;font-weight:300;letter-spacing:.06em}
.blog-mobile-menu .mob-cta{border:1px solid var(--violet-lt);color:var(--violet-lt);padding:.6rem 1.8rem;border-radius:2px;font-size:1rem;font-family:'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase}

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

section[id]{scroll-margin-top:90px}

/* ===== HERO de listado ===== */
.blog-hero{
  background:linear-gradient(160deg,var(--night) 0%,#1C1040 50%,#0D1A2E 100%);
  padding:9rem 5vw 5rem;color:#fff;position:relative;overflow:hidden
}
.blog-hero::before{
  content:'';position:absolute;right:-180px;top:-180px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,63,212,.22) 0%,transparent 70%);
  pointer-events:none
}
.blog-hero::after{
  content:'';position:absolute;left:-120px;bottom:-120px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(164,142,245,.14) 0%,transparent 70%);
  pointer-events:none
}
.blog-hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.blog-hero .eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pastel);margin-bottom:1.2rem
}
.blog-hero .eyebrow::before{content:'';display:block;width:26px;height:1px;background:var(--pastel)}
.blog-hero h1{
  font-family:'Oswald',serif;font-size:clamp(2.4rem,5.5vw,4rem);
  font-weight:300;line-height:1.12;color:#fff;margin-bottom:1.2rem;
  max-width:820px
}
.blog-hero h1 em{font-style:italic;color:var(--violet-lt)}
.blog-hero .lead{
  font-size:1rem;font-weight:300;line-height:1.78;
  color:rgba(255,255,255,.82);max-width:620px
}

/* ===== Grid de artículos en listado ===== */
.blog-list-section{padding:5rem 5vw;background:var(--cream)}
.blog-list-section .container{max-width:1200px;margin:0 auto}

.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:1.6rem;margin-top:1rem
}

.blog-card{
  background:#fff;border:1px solid var(--border);
  border-radius:6px;overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:rgba(91,63,212,.3);
  box-shadow:0 18px 40px rgba(91,63,212,.12)
}

.blog-card-cover{
  height:170px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--violet) 0%,var(--violet-md) 60%,var(--violet-lt) 100%)
}
.blog-card-cover.cover-tdc{background:linear-gradient(135deg,#1A0B3D 0%,#5B3FD4 70%,#A48EF5 100%)}
.blog-card-cover.cover-buro{background:linear-gradient(135deg,#1F1147 0%,#7B5CE5 100%)}
.blog-card-cover.cover-cetes{background:linear-gradient(135deg,#0D0D1A 0%,#3A1F8C 60%,#5B3FD4 100%)}
.blog-card-cover.cover-sofipos{background:linear-gradient(135deg,#5B3FD4 0%,#A48EF5 100%)}
.blog-card-cover.cover-neobancos{background:linear-gradient(135deg,#12122B 0%,#5B3FD4 50%,#7B5CE5 100%)}
.blog-card-cover.cover-cajitas{background:linear-gradient(135deg,#3A1F8C 0%,#7B5CE5 80%,#D4B8FF 100%)}
.blog-card-cover.cover-tipos{background:linear-gradient(135deg,#0D0D1A 0%,#1A0B3D 50%,#5B3FD4 100%)}
.blog-card-cover.cover-empezar{background:linear-gradient(135deg,#5B3FD4 0%,#C9B8FF 100%)}

.blog-card-cover-decoration{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',serif;font-size:5rem;font-weight:300;
  color:rgba(255,255,255,.18);letter-spacing:-.02em
}
.blog-card-cover-decoration small{
  position:absolute;top:1.1rem;left:1.2rem;
  font-family:'Inter',sans-serif;font-size:.62rem;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);
  padding:.32rem .65rem;border-radius:20px;border:1px solid rgba(255,255,255,.18)
}

.blog-card-body{padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.blog-card-tag{
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--violet);font-weight:500;margin-bottom:.7rem
}
.blog-card h3{
  font-family:'Oswald',serif;font-size:1.32rem;font-weight:500;
  line-height:1.25;color:var(--text);margin-bottom:.65rem
}
.blog-card p{
  font-size:.86rem;line-height:1.62;color:var(--muted);
  font-weight:300;flex:1;margin-bottom:1.2rem
}
.blog-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1rem;border-top:1px solid var(--border)
}
.blog-card-time{font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.blog-card-arrow{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);font-weight:500;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:gap .25s
}
.blog-card:hover .blog-card-arrow{gap:.7rem}

/* ===== Artículo individual ===== */
.article-hero{
  padding:8rem 5vw 4rem;
  background:linear-gradient(160deg,var(--night) 0%,#1C1040 50%,#0D1A2E 100%);
  color:#fff;position:relative;overflow:hidden
}
.article-hero::before{
  content:'';position:absolute;right:-180px;top:-180px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,63,212,.18) 0%,transparent 70%);
  pointer-events:none
}
.article-hero-inner{max-width:780px;margin:0 auto;position:relative;z-index:2}
.article-back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(212,184,255,.78);text-decoration:none;
  margin-bottom:2rem;transition:color .2s,gap .25s
}
.article-back:hover{color:var(--accent);gap:.75rem}
.article-tag{
  display:inline-block;
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pastel);font-weight:500;
  padding:.3rem .85rem;border:1px solid rgba(212,184,255,.32);border-radius:20px;
  margin-bottom:1.4rem
}
.article-hero h1{
  font-family:'Oswald',serif;font-size:clamp(2rem,4.4vw,3.4rem);
  font-weight:300;line-height:1.18;color:#fff;margin-bottom:1.3rem
}
.article-hero h1 em{font-style:italic;color:var(--violet-lt)}
.article-meta{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:rgba(255,255,255,.6);
  padding-top:1.2rem;border-top:1px solid rgba(212,184,255,.14)
}
.article-meta strong{color:#fff;font-weight:500}
.article-meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(212,184,255,.4)}

/* Cuerpo del artículo */
.article-body{
  max-width:760px;margin:0 auto;padding:4rem 5vw 2rem;
  font-size:1.02rem;line-height:1.78;color:var(--text)
}
.article-body > .lead{
  font-size:1.18rem;line-height:1.65;color:var(--text);
  font-weight:300;margin-bottom:2.4rem;
  padding-left:1.4rem;border-left:3px solid var(--violet-lt)
}
.article-body h2{
  font-family:'Oswald',serif;font-size:1.85rem;font-weight:500;
  color:var(--text);margin:2.6rem 0 1rem;line-height:1.2
}
.article-body h2 em{font-style:italic;color:var(--violet)}
.article-body h3{
  font-family:'Oswald',serif;font-size:1.35rem;font-weight:500;
  color:var(--text);margin:2rem 0 .7rem;line-height:1.3
}
.article-body p{margin-bottom:1.2rem;color:var(--text);font-weight:400}
.article-body p strong{color:var(--text);font-weight:600}
.article-body ul,.article-body ol{margin:0 0 1.4rem 1.4rem}
.article-body li{margin-bottom:.55rem}
.article-body a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.article-body a:hover{color:var(--violet-md)}
.article-body em{font-style:italic;color:var(--violet)}

/* Callouts dentro de artículos */
.callout{
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--violet);
  padding:1.4rem 1.6rem;border-radius:4px;
  margin:1.8rem 0;
  font-size:.95rem;line-height:1.68
}
.callout strong{color:var(--violet);font-weight:600;display:block;margin-bottom:.4rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.callout.callout-warning{border-left-color:#D97706;background:#FFFBEB}
.callout.callout-warning strong{color:#92400E}
.callout.callout-tip{border-left-color:#059669;background:#ECFDF5}
.callout.callout-tip strong{color:#065F46}

/* Tabla comparativa */
.table-wrap{
  margin:1.8rem 0;border:1px solid var(--border);
  border-radius:6px;overflow:hidden;background:#fff
}
table.compare{width:100%;border-collapse:collapse;font-size:.88rem}
table.compare thead{background:var(--night);color:#fff}
table.compare th{
  padding:.85rem 1rem;text-align:left;
  font-family:'Oswald',serif;font-weight:400;letter-spacing:.04em;
  font-size:.82rem
}
table.compare td{
  padding:.85rem 1rem;border-top:1px solid var(--border);
  vertical-align:top;color:var(--text)
}
table.compare tbody tr:hover{background:var(--cream)}
@media(max-width:600px){
  table.compare,table.compare thead,table.compare tbody,table.compare th,table.compare td,table.compare tr{display:block}
  table.compare thead{display:none}
  table.compare tr{border-top:1px solid var(--border);padding:.5rem 0}
  table.compare td{border-top:none;padding:.4rem 1rem}
  table.compare td::before{content:attr(data-label);display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-bottom:.2rem}
}

/* Pasos numerados */
.steps{margin:1.6rem 0;display:flex;flex-direction:column;gap:1rem}
.step{
  display:flex;gap:1rem;align-items:flex-start;
  background:#fff;border:1px solid var(--border);
  padding:1.1rem 1.3rem;border-radius:6px
}
.step-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--violet-lt));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',serif;font-size:1rem;font-weight:500
}
.step-text{flex:1;font-size:.95rem;line-height:1.65}
.step-text strong{display:block;color:var(--text);font-weight:600;margin-bottom:.25rem}
.step-text span{color:var(--muted);font-size:.88rem}

/* CTA final dentro de artículo */
.article-cta{
  margin:3.5rem auto 0;max-width:760px;
  background:linear-gradient(160deg,var(--night) 0%,#1C1040 100%);
  border-radius:10px;padding:2.6rem 2rem;text-align:center;
  position:relative;overflow:hidden
}
.article-cta::before{
  content:'';position:absolute;right:-80px;top:-80px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(164,142,245,.18) 0%,transparent 70%);
  pointer-events:none
}
.article-cta h3{
  font-family:'Oswald',serif;font-size:1.7rem;font-weight:300;
  color:#fff;margin-bottom:.7rem;position:relative;z-index:2
}
.article-cta h3 em{font-style:italic;color:var(--violet-lt)}
.article-cta p{color:rgba(255,255,255,.78);font-size:.95rem;margin-bottom:1.6rem;position:relative;z-index:2;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.65}
.article-cta .btn-primary{
  background:linear-gradient(135deg,var(--violet),var(--violet-md));
  color:#fff;padding:.88rem 2rem;border:none;border-radius:3px;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;display:inline-block;
  transition:opacity .25s,transform .25s;
  box-shadow:0 8px 24px rgba(91,63,212,.4);
  position:relative;z-index:2
}
.article-cta .btn-primary:hover{opacity:.92;transform:translateY(-2px)}

/* ===== Author signature (al final del cuerpo del artículo) ===== */
.author-block{
  margin:3.2rem 0 2rem;padding:1.6rem 1.8rem;
  background:linear-gradient(135deg,rgba(91,63,212,.05),rgba(164,142,245,.02));
  border:1px solid rgba(91,63,212,.12);border-radius:6px;
  display:flex;align-items:center;gap:1.2rem
}
.author-avatar{
  flex-shrink:0;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--violet-md));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',serif;font-size:1.3rem;font-weight:500;letter-spacing:.02em
}
.author-info{flex:1;min-width:0}
.author-label{
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet-md);font-weight:500;margin-bottom:.3rem
}
.author-name{
  font-family:'Oswald',serif;font-size:1.1rem;font-weight:500;
  color:var(--night);letter-spacing:-.005em;line-height:1.2;margin-bottom:.2rem
}
.author-role{font-size:.85rem;color:var(--muted);font-weight:300;line-height:1.5}
@media(max-width:600px){
  .author-block{padding:1.3rem 1.4rem;gap:1rem}
  .author-avatar{width:48px;height:48px;font-size:1.1rem}
}

/* Sugerencias finales */
.related-section{
  background:#fff;padding:4rem 5vw;border-top:1px solid var(--border)
}
.related-section .container{max-width:1100px;margin:0 auto}
.related-section h3{
  font-family:'Oswald',serif;font-size:1.4rem;font-weight:400;
  color:var(--text);margin-bottom:1.8rem;letter-spacing:.02em
}
.related-section h3 em{font-style:italic;color:var(--violet)}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem
}
.related-card{
  text-decoration:none;color:inherit;
  background:var(--cream);border:1px solid var(--border);
  border-radius:5px;padding:1.4rem;
  transition:border-color .3s,transform .3s,background .3s
}
.related-card:hover{border-color:var(--violet-lt);background:var(--warm);transform:translateY(-3px)}
.related-card-tag{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);font-weight:500;margin-bottom:.5rem
}
.related-card h4{
  font-family:'Oswald',serif;font-size:1.05rem;font-weight:500;
  line-height:1.3;color:var(--text)
}

/* Footer (idéntico al index principal, simplificado) */
.blog-footer{background:var(--night);color:rgba(255,255,255,.65);padding:3.5rem 5vw 1.8rem}
.blog-footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.blog-footer-brand img{height:90px;width:auto;margin-bottom:.6rem}
.blog-footer-brand p{font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.5);max-width:280px}
.blog-footer-col h5{
  font-family:'Oswald',serif;font-size:.84rem;font-weight:500;
  color:#fff;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem
}
.blog-footer-col ul{list-style:none}
.blog-footer-col ul li{margin-bottom:.55rem}
.blog-footer-col ul a{
  color:rgba(255,255,255,.55);text-decoration:none;
  font-size:.83rem;transition:color .2s
}
.blog-footer-col ul a:hover{color:var(--violet-lt)}
.blog-footer-bottom{
  max-width:1200px;margin:2.5rem auto 0;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.76rem;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:.8rem
}
.blog-footer-bottom a{color:rgba(255,255,255,.55);text-decoration:none}
.blog-footer-bottom a:hover{color:var(--violet-lt)}

@media(max-width:760px){
  .blog-footer-inner{grid-template-columns:1fr 1fr;gap:1.8rem}
  .article-body{font-size:.97rem}
  .article-body h2{font-size:1.55rem}
  .article-body h3{font-size:1.18rem}
}
@media(max-width:480px){
  .blog-footer-inner{grid-template-columns:1fr}
  .blog-hero{padding:7rem 5vw 4rem}
  .article-hero{padding:7rem 5vw 3rem}
}

/* Aviso (banner suave para descargo financiero) */
.disclaimer{
  background:#fff;border:1px solid var(--border);border-radius:5px;
  padding:1.1rem 1.3rem;font-size:.78rem;line-height:1.6;
  color:var(--muted);margin:2.4rem 0 0
}
.disclaimer strong{color:var(--text)}