/* Extracted from educacion-financiera.php. Keep page-specific rules here. */
body{
      font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1000px 600px at 10% -10%, rgba(122,201,67,.18), transparent 55%),
        radial-gradient(900px 560px at 95% 5%, rgba(31,63,147,.16), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 42%, #ffffff 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
    }

    /* ========= WAVES BACKGROUND (global) ========= */
    body::before,
    body::after{
      content:"";
      position: fixed;
      inset: -20%;
      z-index: -1;
      pointer-events: none;
      filter: blur(80px);
      opacity: .9;
    }
    body::before{
      background:
        radial-gradient(40% 35% at 20% 30%, var(--wave-blue-1), transparent 70%),
        radial-gradient(45% 40% at 80% 20%, var(--wave-blue-2), transparent 72%),
        radial-gradient(35% 30% at 60% 80%, var(--wave-blue-3), transparent 75%);
      animation: waveMoveA 22s linear infinite;
    }
    body::after{
      background:
        radial-gradient(35% 30% at 30% 70%, var(--wave-blue-2), transparent 70%),
        radial-gradient(40% 35% at 70% 60%, var(--wave-blue-1), transparent 72%);
      animation: waveMoveB 28s linear infinite;
      opacity: .7;
    }
    @keyframes waveMoveA{
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(-6%, -4%) scale(1.05); }
      100% { transform: translate(0,0) scale(1); }
    }
    @keyframes waveMoveB{
      0%   { transform: translate(0,0) scale(1); }
      50%  { transform: translate(5%, 6%) scale(1.08); }
      100% { transform: translate(0,0) scale(1); }
    }
    /* ========= PAGE ========= */
    .page{ padding: 2.2rem 0 3.6rem; }
    .page-hero{ padding: 1.25rem 0 1rem; }
    .kicker{
      display:inline-flex; gap:.45rem; align-items:center;
      font-weight: 900; font-size: .85rem;
      color: var(--brand-700);
      background: rgba(31,63,147,.08);
      border: 1px solid rgba(31,63,147,.12);
      border-radius: 999px;
      padding: .28rem .6rem;
    }
    .dot{
      width: 8px; height: 8px; border-radius: 99px; background: var(--accent);
      box-shadow: 0 0 0 4px rgba(122,201,67,.18);
    }
    .page-title{
      font-weight: 900;
      letter-spacing: -.02em;
      color: var(--brand-700);
      font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
      line-height: 1.05;
      margin: .55rem 0 0;
    }
    .page-sub{
      color: var(--muted);
      max-width: 78ch;
      margin-top: .75rem;
      font-size: 1.06rem;
    }

    /* ========= CARDS ========= */
    .card-pro{
      border-radius: var(--r-lg);
      border: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-1);
      transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    }
    .card-pro:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow-2);
    }

    .content-card{ padding: 1.35rem 1.35rem; }
    .content-card h2{
      font-weight: 900;
      color: var(--brand-700);
      letter-spacing: -.01em;
      font-size: clamp(1.2rem, 1.2vw + 1rem, 1.65rem);
      margin: 0 0 .8rem;
    }
    .content-card h3{
      font-weight: 900;
      color: var(--brand-700);
      margin: 1.2rem 0 .5rem;
      font-size: 1.15rem;
    }
    .content-card p{
      color: var(--muted);
      line-height: 1.7;
      margin: 0 0 .9rem;
    }
    .content-card ul{
      margin: .25rem 0 0 1.1rem;
      color: var(--muted);
    }
    .content-card li{ margin: .25rem 0; }

    .note{
      border-left: 4px solid rgba(122,201,67,.55);
      background: rgba(122,201,67,.10);
      padding: .85rem 1rem;
      border-radius: 16px;
      margin-top: 1rem;
      color: var(--ink);
    }
    .note b{ color: var(--brand-700); }

    /* ========= TOPIC LIBRARY ========= */
    .topic-library{
      display:grid;
      grid-template-columns: minmax(260px, .36fr) minmax(0, 1fr);
      gap: 1rem;
      margin: 1.1rem 0 1.45rem;
      align-items: stretch;
    }
    .library-head,
    .topic-card,
    .article-visual-panel,
    .article-insight{
      border-radius: var(--r-lg);
      border: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow-1);
    }
    .library-head{
      padding: 1.2rem;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height: 100%;
    }
    .library-eyebrow,
    .topic-number,
    .article-visual-copy span{
      color: var(--brand-700);
      font-weight: 900;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .library-head h2{
      color: var(--brand-700);
      font-weight: 900;
      line-height: 1.05;
      margin: .4rem 0 .65rem;
      font-size: clamp(1.45rem, 1.2vw + 1rem, 2rem);
    }
    .library-head p{
      color: var(--muted);
      line-height: 1.62;
      margin:0;
    }
    .topic-grid{
      display:grid;
      grid-template-columns: 1.16fr .92fr .92fr;
      gap: 1rem;
    }
    .topic-card{
      min-height: 208px;
      padding: 1rem;
      text-decoration:none;
      color: inherit;
      overflow:hidden;
      position:relative;
      transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    }
    .topic-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-2);
      border-color: rgba(31,63,147,.16);
    }
    .topic-card.is-current{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 104px;
      grid-template-areas:
        "number visual"
        "title visual"
        "copy visual"
        "cta visual";
      align-items:center;
      column-gap: .85rem;
      background:
        radial-gradient(220px 160px at 86% 12%, rgba(122,201,67,.18), transparent 72%),
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(241,246,255,.78));
    }
    .topic-card.is-upcoming{
      opacity:.86;
    }
    .topic-card.is-current .topic-number{ grid-area:number; }
    .topic-card.is-current h3{ grid-area:title; }
    .topic-card.is-current p{ grid-area:copy; }
    .topic-card.is-current .topic-cta{ grid-area:cta; }
    .topic-card h3{
      color: var(--brand-700);
      font-weight: 900;
      font-size: 1.05rem;
      line-height: 1.18;
      margin: .35rem 0 .4rem;
    }
    .topic-card p{
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.5;
      margin:0;
    }
    .topic-cta{
      display:inline-flex;
      width:max-content;
      margin-top:.85rem;
      color:#fff;
      background: var(--brand);
      border-radius: 999px;
      padding: .42rem .72rem;
      font-weight:900;
      font-size:.88rem;
    }
    .topic-visual{
      grid-area: visual;
      width: 104px;
      max-width: 100%;
      height: 82px;
      opacity:.95;
      justify-self:end;
      align-self:center;
    }
    .topic-svg{ width:100%; height:100%; overflow:visible; }
    .topic-page{ transform-origin:center; animation: topicFloat 5.8s ease-in-out infinite; }
    .topic-line{ stroke-dasharray: 42; stroke-dashoffset:42; animation: topicDraw 4.8s ease-in-out infinite; }
    .topic-line-2{ animation-delay:.28s; }
    .topic-line-3{ animation-delay:.56s; }
    .topic-coin{ transform-origin:center; animation: topicPulse 4.4s ease-in-out infinite; }
    .topic-coin-2{ animation-delay:.5s; }
    .topic-check{ stroke-dasharray: 24; stroke-dashoffset:24; animation: topicDraw 4.4s ease-in-out infinite .75s; }

    .article-card{ position:relative; overflow:hidden; }
    .article-visual-panel{
      display:grid;
      grid-template-columns: minmax(180px, 270px) minmax(0, 1fr);
      gap: 1rem;
      align-items:center;
      margin: .95rem 0 1.1rem;
      padding: 1rem;
      background:
        radial-gradient(240px 180px at 18% 24%, rgba(122,201,67,.16), transparent 72%),
        linear-gradient(135deg, rgba(31,63,147,.08), rgba(255,255,255,.86));
    }
    .finance-motion svg{ width:100%; max-width:270px; height:auto; display:block; }
    .motion-chart{ stroke-dasharray: 120; stroke-dashoffset:120; animation: chartDraw 4.8s ease-in-out infinite; }
    .motion-axis{ opacity:.75; }
    .motion-dot{ transform-origin:center; animation: dotPop 4.8s ease-in-out infinite; }
    .motion-dot-2{ animation-delay:.18s; }
    .motion-dot-3{ animation-delay:.36s; }
    .motion-coin{ transform-origin:center; animation: softFloat 5s ease-in-out infinite; }
    .motion-shield{ transform-origin:center; animation: shieldPulse 5.2s ease-in-out infinite; }
    .article-visual-copy strong{
      display:block;
      color: var(--brand-700);
      font-size: clamp(1.15rem, .8vw + 1rem, 1.55rem);
      line-height: 1.22;
      margin-top:.35rem;
    }
    .article-insight{
      display:grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: .9rem;
      align-items:center;
      margin: 1rem 0;
      padding: .95rem 1rem;
      background: linear-gradient(135deg, rgba(122,201,67,.10), rgba(31,63,147,.07));
    }
    .article-insight h3{
      margin:0 0 .25rem;
    }
    .article-insight p{
      margin:0;
    }
    .insight-icon{
      width: 52px;
      height: 52px;
      display:grid;
      place-items:center;
      border-radius: 18px;
      background: rgba(31,63,147,.08);
      border: 1px solid rgba(31,63,147,.12);
    }
    .insight-icon svg{ width:34px; height:34px; }
    .insight-ring{ stroke-dasharray: 132; stroke-dashoffset: 132; animation: ringDraw 4.8s ease-in-out infinite; }
    .reference-note{
      border-left-color: rgba(31,63,147,.55);
      background: linear-gradient(135deg, rgba(31,63,147,.08), rgba(122,201,67,.12));
      line-height:1.55;
    }
    .reference-note a{
      color: var(--brand-700);
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .reference-note a:hover{
      color: var(--brand);
    }

    @keyframes topicFloat{
      0%,100%{ transform: translateY(0) rotate(0deg); }
      50%{ transform: translateY(-5px) rotate(-1deg); }
    }
    @keyframes topicDraw{
      0%{ stroke-dashoffset:42; opacity:.45; }
      38%,78%{ stroke-dashoffset:0; opacity:1; }
      100%{ stroke-dashoffset:42; opacity:.45; }
    }
    @keyframes topicPulse{
      0%,100%{ transform: scale(1); opacity:.8; }
      50%{ transform: scale(1.08); opacity:1; }
    }
    @keyframes chartDraw{
      0%{ stroke-dashoffset:120; opacity:.55; }
      42%,78%{ stroke-dashoffset:0; opacity:1; }
      100%{ stroke-dashoffset:120; opacity:.55; }
    }
    @keyframes dotPop{
      0%,18%,100%{ transform: scale(.75); opacity:.55; }
      36%,78%{ transform: scale(1); opacity:1; }
    }
    @keyframes softFloat{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-6px); }
    }
    @keyframes shieldPulse{
      0%,100%{ transform: scale(1); opacity:.9; }
      50%{ transform: scale(1.04); opacity:1; }
    }
    @keyframes ringDraw{
      0%{ stroke-dashoffset:132; }
      45%,80%{ stroke-dashoffset:0; }
      100%{ stroke-dashoffset:132; }
    }

    @media (max-width: 1199.98px){
      .topic-library{ grid-template-columns: 1fr; }
      .topic-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 991.98px){
      .topic-grid{ grid-template-columns: 1fr; }
      .topic-card{ min-height: auto; }
      .topic-visual{
      grid-area: visual;
      width: 104px;
      max-width: 100%;
      height: 82px;
      opacity:.95;
      justify-self:end;
      align-self:center;
    }
    @media (max-width: 575.98px){
      .page{ padding-top: 1.4rem; }
      .article-visual-panel{ grid-template-columns: 1fr; }
      .article-insight{ grid-template-columns: 1fr; }
      .reference-note{ align-items:stretch; flex-direction:column; }
    }
/* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important; }
      body::before, body::after{ animation:none!important; }
      .topic-page, .topic-line, .topic-coin, .topic-check, .motion-chart, .motion-dot, .motion-coin, .motion-shield, .insight-ring{ animation:none!important; }
    }