/* MI BOLSILLO · Estilos globales */
:root{--primary:#245C49;--primary-light:#83CBA6;--accent:#83CBA6;--accent-light:#234A39;--background:#0B1412;--surface:#121F1B;--surface-soft:#192A23;--text:#EAF2ED;--text-secondary:#AABBB1;--border:#293B32;--blue-soft:#1B2E3E;--orange-soft:#352B1B;--purple-soft:#2D2540;--shadow:0 8px 30px rgba(0,0,0,.22);--shadow-hover:0 14px 35px rgba(0,0,0,.34);--radius:14px;--radius-large:22px;--container:1160px;--font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--heading:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--background);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}body,button,input{font-family:var(--font)}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer}button,input{font-size:inherit}ul{list-style:none}h1,h2,h3,h4{font-family:var(--heading);color:var(--text);line-height:1.2;letter-spacing:-.035em}h1{font-size:clamp(2.5rem,5vw,4.3rem);font-weight:800}h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:750}h3{font-size:1.18rem;font-weight:700}p{color:var(--text-secondary)}::selection{background:var(--accent-light);color:var(--text)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:15px;z-index:9999;background:var(--primary);color:white;padding:12px 18px;border-radius:8px}.skip-link:focus{top:15px}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}.section{padding:90px 0}.eyebrow{display:inline-block;color:var(--primary-light);font-size:.72rem;font-weight:800;letter-spacing:.12em;margin-bottom:14px}
.site-header{width:100%;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}.header-inner{max-width:var(--container);width:calc(100% - 48px);margin:auto;min-height:78px;display:flex;align-items:center;justify-content:flex-start;gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;margin-right:auto}.brand-logo{width:42px;height:42px;border-radius:12px;background:var(--primary);color:white;display:grid;place-items:center}.brand-logo svg{width:25px;height:25px}.brand-name{color:var(--text);font-family:var(--heading);font-size:1.35rem;font-weight:800;letter-spacing:-.06em}.brand-name span{color:var(--primary-light)}.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:25px;margin-left:auto;margin-right:24px;flex:1}.main-nav a{color:var(--text-secondary);font-size:.88rem;font-weight:650;transition:color .2s}.main-nav a:hover,.main-nav a.active{color:var(--primary)}.header-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto}.icon-button{width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);display:grid;place-items:center;align-content:center;justify-content:center;line-height:1;text-align:center;text-decoration:none;font-size:1.1rem;transition:background .2s}.icon-button svg{display:block;width:18px;height:18px;flex:none;transform:none}.icon-button:hover{background:var(--surface-soft)}.menu-toggle{display:none}
.btn{min-height:48px;padding:12px 22px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:.91rem;font-weight:750;border:1px solid transparent;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}.btn-secondary:hover{background:var(--surface-soft)}.text-link{color:var(--primary);font-size:.88rem;font-weight:750}.text-link:hover,.article-link:hover{text-decoration:underline}
.hero{padding:90px 0 100px;background:radial-gradient(ellipse at 80% 20%,rgba(70,139,105,.16),transparent 42%),var(--background);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px}.hero-content h1{max-width:680px;margin-bottom:24px}.text-accent{color:#83CBA6}.hero-description{max-width:570px;font-size:1.06rem;line-height:1.85;margin-bottom:30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}.hero-trust span{font-size:.77rem;color:var(--text-secondary);font-weight:600}
.hero-visual{position:relative;padding:20px}.finance-card{min-height:350px;border-radius:24px;background:#173D32;color:white;padding:30px;box-shadow:0 25px 65px rgba(18,59,54,.19);position:relative;overflow:hidden}.finance-card:after{content:"";width:240px;height:240px;border:1px solid rgba(255,255,255,.12);border-radius:50%;position:absolute;right:-90px;top:-90px}.finance-card-top{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.12em;color:#D9EEE5}.status-dot{width:9px;height:9px;background:var(--accent);border-radius:50%}.finance-card-title{font-size:1.35rem;font-weight:750;max-width:230px;margin-top:24px;line-height:1.4}.finance-illustration{height:160px;position:relative}.coin{position:absolute;width:43px;height:43px;background:#D9EEE5;color:var(--primary);border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.1rem}.coin-one{left:12%;top:45px}.coin-two{left:25%;top:83px;background:#72C6A0}.coin-three{right:17%;top:30px;width:34px;height:34px}.plant{position:absolute;left:52%;bottom:0;width:100px;height:145px}.plant-stem{position:absolute;height:85px;width:3px;background:#A2D4B5;left:50%;bottom:38px}.leaf{position:absolute;width:38px;height:22px;background:#72C6A0;border-radius:100% 0 100% 0}.leaf-one{top:32px;left:7px;transform:rotate(-20deg)}.leaf-two{top:53px;right:4px;transform:rotate(85deg)}.leaf-three{top:8px;left:44px;transform:rotate(20deg)}.plant-pot{position:absolute;width:75px;height:43px;bottom:0;left:12px;background:#D9EEE5;border-radius:5px 5px 17px 17px}.finance-card-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;position:relative;z-index:1}.finance-card-bottom div{display:flex;flex-direction:column}.finance-card-bottom strong{font-size:.9rem}.finance-card-bottom span{font-size:.7rem;color:#C6DAD0}.floating-note{position:relative;inset:auto;width:max-content;max-width:100%;margin:16px 0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);z-index:2}.floating-note>div{min-width:0}.floating-note strong{color:var(--text);white-space:normal}.floating-note span{overflow-wrap:anywhere}.floating-note strong,.floating-note span{display:block;font-size:.78rem}.floating-note span{color:var(--text-secondary)}.note-icon{width:35px;height:35px;background:var(--accent-light);color:#B8E8CD;border-radius:10px;display:grid;place-items:center;font-weight:800}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:35px}.section-heading h2{margin-bottom:12px}.section-heading p{font-size:.95rem}.categories-section{background:var(--surface)}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.category-card{display:flex;flex-direction:column;align-items:flex-start;padding:25px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:transform .2s,box-shadow .2s}.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.category-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;font-size:1.5rem;font-weight:800;margin-bottom:20px}.icon-green{background:#203B30;color:#A8DFC0}.icon-blue{background:var(--blue-soft);color:#A8C9E5}.icon-orange{background:var(--orange-soft);color:#E1C18B}.icon-purple{background:var(--purple-soft);color:#C6B3E6}.category-card h3{margin-bottom:9px}.category-card p{font-size:.83rem;line-height:1.7;margin-bottom:18px}.category-arrow{margin-top:auto;color:var(--primary-light);font-size:.81rem;font-weight:750}
.search-box{max-width:680px;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);padding:7px 8px 7px 18px;border-radius:12px;margin-bottom:30px}.search-box>span{font-size:1.7rem;color:var(--text-secondary)}.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.9rem}.search-box button{background:var(--primary);color:white;border:0;border-radius:8px;padding:11px 18px;font-weight:700}.search-status{font-size:.82rem;margin-bottom:15px}.no-results{padding:25px;background:var(--surface-soft);border-radius:var(--radius)}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.article-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}.article-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.article-image{height:210px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.image-saving{background:linear-gradient(135deg,#173D32,#245C49)}.image-budget{background:linear-gradient(135deg,#1C3443,#294A5E)}.image-emergency{background:linear-gradient(135deg,#3B3220,#5A492B)}.image-symbol{color:#D7F0E1;font-size:4rem;font-weight:800;letter-spacing:-.08em}.article-label{position:absolute;left:16px;bottom:15px;background:rgba(11,20,18,.88);color:#D7F0E1;border-radius:5px;padding:5px 9px;font-size:.65rem;font-weight:800;letter-spacing:.05em}.article-body{padding:22px}.article-meta{display:flex;gap:8px;color:var(--text-secondary);font-size:.73rem;margin-bottom:12px}.article-body h3{margin-bottom:12px;line-height:1.45}.article-body h3 a:hover{color:var(--primary-light)}.article-body p{font-size:.85rem;line-height:1.75;margin-bottom:18px}.article-link{font-size:.81rem;font-weight:750;color:var(--primary-light)}
.tools-section{background:var(--surface-soft)}.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.tool-card{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:25px;transition:transform .2s,box-shadow .2s}.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.tool-icon{flex-shrink:0;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--accent-light);color:var(--primary);font-size:1.5rem;font-weight:800}.tool-card h3{margin-bottom:8px}.tool-card p{font-size:.84rem;margin-bottom:13px}.tool-card span{color:var(--primary-light);font-size:.8rem;font-weight:750}
.newsletter-card{position:relative;overflow:hidden;background:#173D32;color:white;border-radius:var(--radius-large);padding:55px;display:flex;justify-content:space-between;align-items:center;gap:30px}.newsletter-card .eyebrow{color:#A9DCC3}.newsletter-content{max-width:620px;position:relative;z-index:2}.newsletter-card h2{color:white;margin-bottom:15px}.newsletter-card p{color:#D5E4DD;font-size:.95rem}.newsletter-note{margin-top:15px;font-weight:700;font-size:.82rem!important}.newsletter-decoration{min-width:160px;height:150px;position:relative}.newsletter-decoration span{position:absolute;display:grid;place-items:center;width:65px;height:65px;border-radius:50%;background:#1D3C30;color:#B8E8CD;font-size:1.7rem;font-weight:800}.newsletter-decoration span:nth-child(1){top:5px;left:10px}.newsletter-decoration span:nth-child(2){top:65px;left:80px;background:#326D52;color:#EAF2ED}.newsletter-decoration span:nth-child(3){top:75px;left:0;width:38px;height:38px}
.ad-container{padding-top:15px;padding-bottom:35px}.ad-placeholder{width:100%;min-height:120px;border:1px dashed var(--border);background:var(--surface-soft);border-radius:8px;display:grid;place-items:center}.ad-placeholder span{color:var(--text-secondary);font-size:.68rem;letter-spacing:.12em}.trust-section{background:var(--surface)}.trust-content{display:grid;grid-template-columns:1fr 1fr;gap:30px 65px;align-items:center}.trust-content h2{max-width:470px}.trust-content p{line-height:1.9}.trust-content .btn{justify-self:start}
.site-footer{background:#102D35;color:#fff;padding:65px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:45px}.footer-brand .brand-name{color:white}.footer-brand .brand-logo{background:#1D3C30;color:#B8E8CD}.footer-description{color:#C0D0CA;max-width:290px;font-size:.84rem;margin-top:20px}.footer-column h3{color:white;font-size:.9rem;margin-bottom:20px;letter-spacing:0}.footer-column ul{display:flex;flex-direction:column;gap:11px}.footer-column a{color:#C0D0CA;font-size:.81rem}.footer-column a:hover{color:white}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;justify-content:space-between;gap:20px}.footer-bottom p{color:#A9BCB4;font-size:.75rem}

[hidden]{display:none!important}

/* Buscador desplegable de la cabecera */
.header-search-panel{position:absolute;top:calc(100% + 8px);right:max(calc((100% - var(--container))/2),24px);width:min(460px,calc(100vw - 32px));padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.38);z-index:1002}
.header-search-panel[hidden]{display:none!important}
.header-search-form{display:flex;align-items:center;gap:11px;padding:0 12px;height:48px;border:1px solid var(--border);border-radius:10px;background:var(--background)}
.header-search-form>svg{width:18px;height:18px;flex:0 0 18px;color:var(--text-secondary)}
.header-search-form input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:.9rem}
.header-search-form input::placeholder{color:var(--text-secondary)}
.header-search-close{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);font-size:1.5rem;line-height:1}
.header-search-close:hover{background:var(--surface-soft);color:var(--text)}
.header-search-status{margin:12px 2px 8px;font-size:.78rem;color:var(--text-secondary)}
.header-search-results{display:grid;gap:7px;max-height:min(48vh,360px);overflow-y:auto}
.header-search-result{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border:1px solid transparent;border-radius:10px;transition:background .18s,border-color .18s}
.header-search-result:hover,.header-search-result:focus-visible{background:var(--surface-soft);border-color:var(--border)}
.header-search-result strong{font-size:.86rem;line-height:1.35;color:var(--text)}
.header-search-result span{font-size:.74rem;line-height:1.45;color:var(--text-secondary)}
@media(max-width:760px){.header-search-panel{right:16px;width:min(460px,calc(100vw - 32px));padding:14px}}


/* MI BOLSILLO · Motion design sutil y optimizado */

/* Aparición escalonada del hero */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero [data-hero-step],
  .motion-ready .hero [data-hero-visual] {
    animation: hero-enter .68s cubic-bezier(.2,.7,.2,1) both;
  }

  .motion-ready .hero [data-hero-step="0"] { animation-delay: 0s; }
  .motion-ready .hero [data-hero-step="1"] { animation-delay: .10s; }
  .motion-ready .hero [data-hero-step="2"] { animation-delay: .20s; }
  .motion-ready .hero [data-hero-step="3"] { animation-delay: .30s; }
  .motion-ready .hero [data-hero-step="4"] { animation-delay: .40s; }
  .motion-ready .hero [data-hero-visual] { animation-delay: .24s; }

  @keyframes hero-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Fade-in + slide-up al entrar en pantalla */
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
      transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
  }

  .motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Cabecera: oscurecimiento ligero y elevación mínima al hacer scroll */
  .site-header {
    isolation: isolate;
  }

  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #07100E;
    opacity: 0;
    transition: opacity .38s ease;
  }

  .site-header > .header-inner {
    position: relative;
    z-index: 1;
    transition: transform .38s cubic-bezier(.2,.7,.2,1);
  }

  .site-header.is-scrolled::before {
    opacity: .28;
  }

  .site-header.is-scrolled > .header-inner {
    transform: translateY(-1px);
  }

  .site-header > .header-search-panel {
    z-index: 2;
  }

  /* Las microinteracciones animan únicamente transform y opacity. */
  .btn,
  .icon-button,
  .text-link,
  .article-link,
  .category-card,
  .article-card,
  .tool-card,
  .tool-directory-card,
  .related-card {
    transition:
      transform .32s cubic-bezier(.2,.7,.2,1),
      opacity .32s ease;
  }

  .category-card,
  .article-card,
  .tool-card,
  .tool-directory-card,
  .related-card {
    will-change: auto;
  }

  .article-image .image-symbol {
    transition: transform .48s cubic-bezier(.2,.7,.2,1), opacity .48s ease;
  }

  .icon-button:hover,
  .btn:hover {
    transform: translateY(-2px);
    opacity: .96;
  }

  .text-link:hover,
  .article-link:hover {
    transform: translateX(2px);
  }

  .category-card:hover,
  .article-card:hover,
  .tool-card:hover,
  .tool-directory-card:hover,
  .related-card:hover {
    transform: translateY(-4px);
    opacity: .98;
  }

  .article-card:hover .article-image .image-symbol {
    transform: scale(1.06);
  }
}

/* En dispositivos táctiles no forzamos elevaciones al tocar tarjetas. */
@media (hover: none), (pointer: coarse) {
  .category-card:hover,
  .article-card:hover,
  .tool-card:hover,
  .tool-directory-card:hover,
  .related-card:hover,
  .btn:hover,
  .icon-button:hover {
    transform: none;
  }
}

/* La accesibilidad tiene prioridad sobre los efectos visuales. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}