  /* Estilos de las páginas de artículo del blog (se cargan después de styles.css) */

  .post-hero{background:var(--gray-bg); padding:44px 0 52px;}
  .post-shell{max-width:820px; margin:0 auto;}
  .crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); margin-bottom:22px;}
  .crumbs a{transition:color .2s ease;}
  .crumbs a:hover{color:var(--purple);}
  .crumbs [aria-current]{color:var(--ink); font-weight:600;}
  .post-title{font-size:clamp(30px,4.4vw,46px); line-height:1.16; font-weight:800; margin-bottom:18px;}
  .post-lead{font-size:18px; color:var(--muted); line-height:1.65; margin-bottom:20px;}
  .post-meta{font-size:13.5px; color:var(--muted); font-weight:600;}

  .post-cover{max-width:960px; margin:-26px auto 0; position:relative; z-index:2; aspect-ratio:1200/630; overflow:hidden; border-radius:18px; box-shadow:0 26px 60px rgba(1,12,42,0.16); background:var(--purple-light);}
  .post-cover img{width:100%; height:100%; object-fit:cover;}

  .post-body{max-width:760px; margin:0 auto; padding:56px 0 24px; font-size:17px; line-height:1.8; color:#2B2E35;}
  .post-body p{margin:0 0 20px;}
  .post-body h2{font-size:clamp(24px,2.8vw,31px); line-height:1.25; font-weight:800; margin:52px 0 16px; scroll-margin-top:96px;}
  .post-body h3{font-size:20px; line-height:1.35; font-weight:700; margin:30px 0 10px;}
  .post-body ul, .post-body ol{margin:0 0 22px; padding-left:24px;}
  .post-body li{margin-bottom:10px;}
  .post-body li::marker{color:var(--purple); font-weight:700;}
  .post-body a{color:var(--purple); font-weight:600; text-decoration:underline; text-underline-offset:3px; transition:color .2s ease;}
  .post-body a:hover{color:var(--purple-dark);}
  .post-body strong{color:var(--ink);}

  .toc{background:var(--purple-light); border-radius:14px; padding:22px 26px; margin:0 0 44px;}
  .toc strong{display:block; font-family:'Bitter', serif; font-size:16px; margin-bottom:10px;}
  .toc ol{margin:0; padding-left:20px;}
  .toc li{margin-bottom:6px; font-size:15.5px; line-height:1.5;}
  .toc a{text-decoration:none;}
  .toc a:hover{text-decoration:underline;}

  .callout{border-left:4px solid var(--purple); background:#FAF7FF; border-radius:0 12px 12px 0; padding:18px 22px; margin:28px 0;}
  .callout .callout-title{display:block; font-family:'Bitter', serif; font-weight:700; margin-bottom:6px; color:var(--purple-dark);}
  .callout p{margin:0; font-size:16px; line-height:1.7;}

  .post-table-wrap{overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:12px;}
  .post-table{width:100%; min-width:540px; border-collapse:collapse; font-size:15px; line-height:1.5;}
  .post-table th{background:var(--navy); color:#fff; text-align:left; padding:13px 16px; font-family:'Bitter', serif; font-size:14px;}
  .post-table td{padding:13px 16px; border-top:1px solid var(--line); vertical-align:top;}
  .post-table tbody tr:nth-child(even) td{background:#FAF9FD;}
  .post-table td:first-child{font-weight:700; color:var(--ink);}

  .faq{margin-top:12px;}
  .faq details{border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:12px; transition:box-shadow .2s ease;}
  .faq details[open]{box-shadow:0 10px 26px rgba(1,12,42,0.07); border-color:#D9CCFA;}
  .faq summary{cursor:pointer; list-style:none; padding:16px 52px 16px 20px; position:relative; font-family:'Bitter', serif; font-weight:700; font-size:16.5px; line-height:1.45; color:var(--ink);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:24px; line-height:1; color:var(--purple); font-weight:400;}
  .faq details[open] summary::after{content:"\2013";}
  .faq details p{margin:0; padding:0 20px 18px; font-size:16px; line-height:1.75;}

  .post-cta{background:linear-gradient(120deg, var(--navy), #1B0F4A 60%, var(--purple-dark)); color:#fff; border-radius:18px; padding:38px 36px; margin:52px 0 20px;}
  .post-cta h2{color:#fff; margin:0 0 12px; font-size:clamp(22px,2.6vw,28px);}
  .post-cta p{color:rgba(255,255,255,0.82); margin:0 0 24px; font-size:16.5px;}
  .post-cta-btns{display:flex; flex-wrap:wrap; gap:14px;}
  .post-body .post-cta a.btn{text-decoration:none; color:#fff;}
  .post-cta .btn-outline{border-color:#fff;}
  .post-cta .btn-outline:hover{background:#fff; color:var(--navy);}
  .post-body .post-cta a.btn-outline:hover{color:var(--navy);}

  .related{background:var(--gray-bg); padding:84px 0;}
  .related h2{text-align:center; font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:40px;}

  @media (max-width: 620px){
    .post-hero{padding:32px 0 44px;}
    .post-lead{font-size:16.5px;}
    .post-cover{margin-top:-22px; border-radius:14px;}
    .post-body{padding-top:44px; font-size:16.5px;}
    .post-body h2{margin-top:44px;}
    .post-table{min-width:0; font-size:13.5px; line-height:1.45;}
    .post-table th, .post-table td{padding:10px 9px;}
    .post-table th{font-size:12.5px;}
    .post-cta{padding:30px 24px;}
    .post-cta-btns .btn{width:100%; justify-content:center;}
    .related{padding:64px 0;}
  }
