:root {
    --navy: #1c2330; --navy-deep: #141a25; --navy-dark: #0a0f19;
    --gold: #ffd83d; --gold-soft: #ffe066;
    --ink: #1c2330; --paper: #ffffff; --paper-warm: #f6f4ef;
    --muted: #5a6472; --line: rgba(28,35,48,0.1);
    --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.4,.64,1);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Montserrat', system-ui, sans-serif; color: var(--ink);
    background: var(--paper); line-height: 1.75; -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ===== Barra superior fija con progreso de lectura ===== */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; background: rgba(10,15,25,0); backdrop-filter: blur(0);
    transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  }
  .topbar.scrolled { background: rgba(28,35,48,0.92); backdrop-filter: blur(16px); }
  .topbar__logo { height: 22px; opacity: 0; transition: opacity 0.4s; }
  .topbar.scrolled .topbar__logo { opacity: 1; }
  .topbar__cta {
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--navy);
    background: var(--gold); padding: 9px 18px; border-radius: 999px;
    text-decoration: none; transition: transform 0.3s var(--spring);
    opacity: 0; pointer-events: none;
  }
  .topbar.scrolled .topbar__cta { opacity: 1; pointer-events: auto; }
  .topbar__cta:hover { transform: scale(1.05); }
  .progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); z-index: 51; width: 0%; transition: width 0.1s linear; }

  /* ===== Hero ===== */
  .hero {
    position: relative; min-height: 88vh; display: flex; align-items: flex-end;
    padding: 0 22px 54px; overflow: hidden; background: var(--navy);
  }
  .hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
    animation: kenburns 22s ease-out infinite alternate;
  }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
  .hero__veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,15,25,0.25) 0%, rgba(10,15,25,0.45) 45%, rgba(10,15,25,0.95) 100%);
  }
  .hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; width: 100%; }
  .hero__kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
    margin-bottom: 20px; opacity: 0; animation: rise 0.8s var(--ease) 0.1s forwards;
  }
  .hero__kicker::before { content: ''; width: 26px; height: 1.5px; background: var(--gold); }
  .hero__title {
    font-family: 'Syncopate', sans-serif; font-weight: 700;
    font-size: clamp(30px, 7vw, 56px); line-height: 1.06; color: #fff;
    letter-spacing: -0.015em; margin-bottom: 20px;
    opacity: 0; animation: rise 0.8s var(--ease) 0.22s forwards;
  }
  .hero__title em { color: var(--gold); font-style: normal; }
  .hero__meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    opacity: 0; animation: rise 0.8s var(--ease) 0.34s forwards;
  }
  .hero__chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #fff; background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px);
    padding: 7px 14px; border-radius: 999px;
  }
  .hero__chip strong { color: var(--gold); font-weight: 700; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

  /* ===== Índice (tabla de contenidos) ===== */
  .toc {
    max-width: 720px; margin: -34px auto 0; position: relative; z-index: 5;
    background: #fff; border-radius: 20px; padding: 22px 26px;
    box-shadow: 0 20px 50px rgba(28,35,48,0.16); border: 1px solid var(--line);
  }
  .toc__label {
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 9px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
  }
  .toc__list { list-style: none; display: grid; gap: 9px; }
  .toc__list a {
    display: flex; align-items: baseline; gap: 10px; text-decoration: none;
    color: var(--navy); font-weight: 500; font-size: 14.5px; transition: color 0.2s;
  }
  .toc__list a:hover { color: #b48a00; }
  .toc__list .n {
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 10px;
    color: var(--gold); flex-shrink: 0;
  }

  /* ===== Cuerpo ===== */
  .post { max-width: 720px; margin: 0 auto; padding: 44px 22px 0; }
  .post__lead {
    font-size: clamp(18px, 2.6vw, 21px); line-height: 1.65; color: var(--navy);
    font-weight: 500; margin-bottom: 8px;
  }
  .post__lead::first-letter {
    float: left; font-family: 'Syncopate', sans-serif; font-weight: 700;
    font-size: 58px; line-height: 0.8; color: var(--gold);
    margin: 6px 12px 0 0;
  }
  .post h2 {
    font-family: 'Syncopate', sans-serif; font-weight: 700;
    font-size: clamp(21px, 3.8vw, 28px); line-height: 1.2; color: var(--navy);
    letter-spacing: -0.01em; margin: 52px 0 18px; scroll-margin-top: 80px;
    display: flex; align-items: center; gap: 14px;
  }
  .post h2::before {
    content: ''; width: 28px; height: 3px; background: var(--gold);
    border-radius: 2px; flex-shrink: 0;
  }
  .post h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; margin: 32px 0 10px; color: var(--navy); }
  .post p { margin-bottom: 18px; color: #2c3340; }
  .post ul, .post ol { margin: 0 0 22px 4px; list-style: none; }
  .post ul li, .post ol li { position: relative; padding-left: 28px; margin-bottom: 11px; color: #2c3340; }
  .post ul li::before {
    content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px;
    background: var(--gold); border-radius: 50%;
  }
  .post ol { counter-reset: step; }
  .post ol li { counter-increment: step; }
  .post ol li::before {
    content: counter(step); position: absolute; left: 0; top: 1px;
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 11px;
    color: var(--navy); background: var(--gold); width: 20px; height: 20px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
  }
  .post strong { color: var(--navy); font-weight: 700; }
  .post a { color: #b48a00; text-decoration: underline; text-underline-offset: 2px; }

  /* Imagen ancha en el cuerpo */
  .post__figure { margin: 32px -22px; position: relative; }
  .post__figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .post__figure figcaption {
    font-size: 12px; color: var(--muted); text-align: center; padding: 10px 22px 0;
  }

  /* Tabla de precios premium */
  .price-table {
    width: 100%; border-collapse: collapse; margin: 10px 0 14px;
    font-size: 14.5px; border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(28,35,48,0.1); border: 1px solid var(--line);
  }
  .price-table th {
    background: var(--navy); color: #fff; text-align: left; padding: 15px 18px;
    font-family: 'Syncopate', sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  }
  .price-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); }
  .price-table tr:last-child td { border-bottom: none; }
  .price-table tr:nth-child(even) td { background: var(--paper-warm); }
  .price-table .price { font-family: 'Syncopate', sans-serif; font-weight: 700; color: var(--navy); white-space: nowrap; }
  .price-table .feat { position: relative; }
  .price-table .feat td:first-child::after {
    content: 'POPULAR'; font-family: 'Syncopate', sans-serif; font-size: 7px;
    letter-spacing: 1px; background: var(--gold); color: var(--navy);
    padding: 2px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
  }

  /* Callout dorado */
  .callout {
    background: linear-gradient(180deg, #fffbe9 0%, #fff6d0 100%);
    border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0;
    padding: 20px 24px; margin: 28px 0; display: flex; gap: 14px; align-items: flex-start;
  }
  .callout__icon { font-size: 22px; flex-shrink: 0; }
  .callout p { margin: 0; }
  .callout strong { color: var(--navy); }

  /* Cita / dato destacado */
  .pullstat {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px 0;
  }
  .pullstat__item {
    background: var(--navy); border-radius: 16px; padding: 22px 16px; text-align: center;
  }
  .pullstat__num { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: clamp(20px,5vw,28px); color: var(--gold); line-height: 1; }
  .pullstat__label { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 8px; line-height: 1.3; }

  /* CTA box */
  .cta-box {
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-radius: 26px; padding: 44px 30px; margin: 52px 0; text-align: center;
    position: relative; overflow: hidden;
  }
  .cta-box::before {
    content: ''; position: absolute; top: -50%; right: -15%; width: 300px; height: 300px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,216,61,0.2), transparent 70%);
  }
  .cta-box__kicker { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; position: relative; }
  .cta-box__title { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: clamp(22px, 4.5vw, 30px); color: #fff; margin-bottom: 12px; line-height: 1.15; position: relative; }
  .cta-box__sub { color: rgba(255,255,255,0.75); font-size: 15px; margin-bottom: 26px; position: relative; }
  .cta-box__btn {
    display: inline-flex; align-items: center; gap: 12px; background: var(--gold); color: var(--navy);
    font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; padding: 17px 32px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 14px 34px rgba(255,216,61,0.4); transition: transform 0.3s var(--spring), box-shadow 0.3s; position: relative;
  }
  .cta-box__btn:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(255,216,61,0.5); }
  .cta-box__arrow { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--gold); align-items: center; justify-content: center; transition: transform 0.3s var(--spring); }
  .cta-box__btn:hover .cta-box__arrow { transform: translateX(4px); }

  /* FAQ acordeón */
  .faq { margin: 16px 0; }
  .faq__item { border-bottom: 1px solid var(--line); }
  .faq__q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px;
    color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px;
  }
  .faq__q::after { content: '+'; font-family: 'Syncopate', sans-serif; color: var(--gold); font-size: 20px; flex-shrink: 0; transition: transform 0.3s; }
  .faq__item.open .faq__q::after { transform: rotate(45deg); }
  .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
  .faq__a p { padding: 0 0 20px; color: #2c3340; margin: 0; }

  /* Footer */
  .post-foot { max-width: 720px; margin: 56px auto 0; padding: 32px 22px 70px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
  .post-foot a { font-family: 'Syncopate', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .post-foot a:hover { color: #b48a00; }

  .breadcrumb { max-width: 720px; margin: 24px auto 0; padding: 0 22px; font-size: 12px; color: var(--muted); }
  .breadcrumb a { color: var(--muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--navy); }

  @media (prefers-reduced-motion: reduce) {
    .hero__bg { animation: none; }
    .hero__kicker, .hero__title, .hero__meta { animation: none; opacity: 1; }
  }

/* ===== Artículos relacionados (enlazado interno) ===== */
.related {
  max-width: 980px; margin: 40px auto 0; padding: 48px 22px 0;
  border-top: 1px solid var(--line);
}
.related__label {
  font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.related__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}
.rcard {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(28,35,48,0.06);
  text-decoration: none; color: inherit; transition: transform 0.35s var(--spring), box-shadow 0.35s, border-color 0.3s;
}
.rcard:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(28,35,48,0.15); border-color: rgba(255,216,61,0.4); }
.rcard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--navy); }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.rcard:hover .rcard__media img { transform: scale(1.07); }
.rcard__tag {
  position: absolute; top: 10px; left: 10px; font-family: 'Syncopate', sans-serif;
  font-weight: 700; font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--navy); background: var(--gold); padding: 4px 9px; border-radius: 999px;
}
.rcard__body { padding: 15px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.rcard__title { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--navy); margin-bottom: 7px; }
.rcard__excerpt { font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.rcard__more { margin-top: 12px; font-family: 'Syncopate', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #b48a00; }