/* =========================================================
   MONEY & KIDS · Full d'estil de marca (font única de veritat)
   ---------------------------------------------------------
   Aquí es defineixen els colors i tipografies de la marca UN
   SOL COP. Totes les pàgines fan servir aquestes variables
   (var(--g), var(--y)...). Si algun dia vols canviar el verd
   o el groc de la marca, es canvia NOMÉS aquí i s'actualitza
   a tota la web.
   ========================================================= */
:root{
  /* Colors de marca */
  --g:#1a6b2f;    /* verd principal */
  --y:#ffcc00;    /* groc principal */
  --yd:#dbb100;   /* groc fosc (hover) */
  --bk:#000;      /* negre */
  --wh:#fff;      /* blanc */
  --cr:#fffdf0;   /* crema (fons) */

  /* Colors de suport (targetes del Mètode 4P) */
  --p1:#b4565e;
  --p2:#6bb27a;
  --p3:#fcd3cf;
  --p4:#f8e2a8;

  /* Tipografies */
  --font-title:'Atma',cursive;
  --font-body:'Nunito',sans-serif;
}

/* ============================================================
   BARRA DE NAVEGACIÓN UNIFICADA (mk-topbar)
   Misma barra en TODAS las páginas.
   Menú móvil (hamburguesa) hecho solo con CSS, sin JavaScript.
   ============================================================ */
.mk-topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 20px;
  background:var(--g); color:var(--wh);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.mk-topbar__logo{display:flex; align-items:center; flex:0 0 auto;}
.mk-topbar__logo img{height:38px; object-fit:contain; display:block;}
.mk-topbar__links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:22px;
}
.mk-topbar__links a{
  color:var(--wh); text-decoration:none;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  white-space:nowrap; transition:color .15s;
}
.mk-topbar__links a:hover{color:var(--y);}
.mk-topbar__check{display:none;}          /* casilla oculta que abre/cierra el menú */
.mk-topbar__burger{
  display:none;                            /* oculto en escritorio */
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; cursor:pointer; border-radius:8px;
}
.mk-topbar__burger span{
  display:block; width:100%; height:3px; border-radius:3px;
  background:var(--wh); transition:.2s;
}

/* ---- Móvil: menú desplegable ---- */
@media(max-width:820px){
  .mk-topbar__burger{display:flex;}
  .mk-topbar__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--g);
    max-height:0; overflow:hidden;
    box-shadow:0 8px 12px rgba(0,0,0,.2);
    transition:max-height .25s ease;
  }
  .mk-topbar__links li{border-top:1px solid rgba(255,255,255,.15);}
  .mk-topbar__links a{display:block; padding:14px 20px; font-size:1rem;}
  .mk-topbar__links a:hover{background:rgba(0,0,0,.15); color:var(--y);}
  .mk-topbar__check:checked ~ .mk-topbar__links{max-height:80vh;}
  .mk-topbar__check:checked ~ .mk-topbar__burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .mk-topbar__check:checked ~ .mk-topbar__burger span:nth-child(2){opacity:0;}
  .mk-topbar__check:checked ~ .mk-topbar__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

/* ============================================================
   PIE DE PÁGINA UNIFICADO (mk-footer)
   Mismo pie en TODAS las páginas.
   ============================================================ */
.mk-footer{ background:var(--bk); color:var(--wh); padding:44px 20px; margin-top:64px; }
.mk-footer__inner{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.mk-footer__logo{ font-family:var(--font-title); font-size:1.7rem; line-height:1; }
.mk-footer__logo span{ color:var(--y); }
.mk-footer__tagline{ font-family:var(--font-body); opacity:.85; max-width:520px; }
.mk-footer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.mk-footer__links a{ color:var(--wh); text-decoration:none; font-family:var(--font-body); font-weight:700; font-size:.9rem; }
.mk-footer__links a:hover{ color:var(--y); }
.mk-footer__redes{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.mk-footer__redes a{ background:var(--y); color:var(--bk); text-decoration:none; font-family:var(--font-body); font-weight:700; font-size:.85rem; padding:8px 15px; border-radius:20px; transition:background .15s; }
.mk-footer__redes a:hover{ background:var(--yd); }
.mk-footer__copy{ font-size:.8rem; opacity:.7; margin-top:6px; }

/* ============================================================
   FICHA DE PRODUCTO (páginas individuales de recomendaciones)
   + preguntas desplegables (FAQ) estilo Nina Sisena
   ============================================================ */
.ficha-wrap{ max-width:820px; margin:0 auto; padding:24px 20px 40px; }
.ficha-breadcrumb{ font-family:var(--font-body); font-size:.85rem; margin:6px 0 20px; }
.ficha-breadcrumb a{ color:var(--g); text-decoration:none; font-weight:700; }
.ficha-breadcrumb a:hover{ text-decoration:underline; }
.ficha-breadcrumb span{ opacity:.6; }
.ficha-top{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; }
.ficha-cover{ flex:0 0 220px; max-width:220px; margin:0 auto; }
.ficha-cover img{ width:100%; height:auto; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.15); display:block; }
.ficha-info{ flex:1 1 320px; }
.ficha-cat{ display:inline-block; background:var(--y); color:var(--bk); font-family:var(--font-body); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; padding:5px 12px; border-radius:20px; }
.ficha-title{ font-family:var(--font-title); color:var(--g); font-size:1.9rem; line-height:1.15; margin:12px 0 14px; }
.ficha-metarow{ font-family:var(--font-body); font-size:.98rem; color:var(--bk); margin:5px 0; }
.ficha-metarow b{ color:var(--g); }
.mk-btn-buy{ display:inline-block; margin-top:16px; background:var(--g); color:var(--wh); font-family:var(--font-body); font-weight:800; font-size:1rem; text-decoration:none; padding:13px 26px; border-radius:30px; box-shadow:0 5px 0 #0f4a20; transition:transform .1s, box-shadow .1s; }
.mk-btn-buy:hover{ transform:translateY(2px); box-shadow:0 3px 0 #0f4a20; }
.ficha-body{ font-family:var(--font-body); color:#2b2b2b; margin-top:34px; }
.ficha-body .lead{ font-size:1.18rem; line-height:1.6; color:var(--bk); font-weight:600; }
.ficha-body h2{ font-family:var(--font-title); color:var(--g); font-size:1.35rem; margin:30px 0 10px; }
.ficha-body p{ font-size:1.05rem; line-height:1.7; margin:0 0 14px; }
.ficha-body ul.ideas{ list-style:none; padding:0; margin:8px 0 14px; }
.ficha-body ul.ideas li{ position:relative; padding:7px 0 7px 30px; font-size:1.05rem; line-height:1.5; border-bottom:1px solid #eee; }
.ficha-body ul.ideas li::before{ content:'💡'; position:absolute; left:0; top:6px; }
.ficha-final-cta{ text-align:center; background:var(--cr); border:2px dashed var(--y); border-radius:16px; padding:26px 20px; margin:34px 0 0; }
.ficha-final-cta p{ font-family:var(--font-body); font-weight:700; margin:0 0 14px; }

/* --- Preguntas desplegables --- */
.faq{ display:flex; flex-direction:column; gap:12px; margin:12px 0 0; }
.faq-item{ background:var(--cr); border:1px solid #e6e0c8; border-radius:12px; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:15px 18px; font-family:var(--font-title); font-weight:600; font-size:1.08rem; color:var(--g); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.6rem; color:var(--y); line-height:1; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item summary:hover{ background:#f3eeda; }
.faq-item .faq-answer{ padding:0 18px 16px; }
.faq-item .faq-answer p{ margin:6px 0 0; font-size:1.02rem; line-height:1.65; color:#3a3a3a; }

@media(max-width:560px){ .ficha-title{ font-size:1.55rem; } .ficha-cover{ flex-basis:180px; } }

/* ============================================================
   HUB DE RECOMENDACIONES (índice con tarjetas por categoría)
   ============================================================ */
.rec-hero{ background:var(--g); color:var(--wh); padding:44px 20px; text-align:center; }
.rec-hero h1{ font-family:var(--font-title); font-size:2rem; margin:0 0 10px; }
.rec-hero p{ font-family:var(--font-body); max-width:660px; margin:0 auto; opacity:.92; line-height:1.6; }
.rec-wrap{ max-width:1000px; margin:0 auto; padding:26px 20px 50px; }
.rec-cat-title{ font-family:var(--font-title); color:var(--g); font-size:1.5rem; margin:34px 0 14px; scroll-margin-top:80px; }
.rec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:20px; }
.rec-card{ display:flex; flex-direction:column; background:var(--wh); border:1px solid #eee; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 3px 10px rgba(0,0,0,.06); transition:transform .12s, box-shadow .12s; }
.rec-card:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.rec-card__imgwrap{ background:var(--cr); padding:16px; display:flex; align-items:center; justify-content:center; height:180px; }
.rec-card__imgwrap img{ max-height:100%; max-width:100%; width:auto; border-radius:6px; }
.rec-card__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.rec-card__badge{ font-family:var(--font-body); font-size:.72rem; font-weight:800; color:var(--g); text-transform:uppercase; letter-spacing:.4px; }
.rec-card__title{ font-family:var(--font-title); color:var(--bk); font-size:1.05rem; line-height:1.2; }
.rec-card__age{ font-family:var(--font-body); font-size:.85rem; color:#666; }
.rec-card__link{ margin-top:auto; padding-top:6px; font-family:var(--font-body); font-weight:800; color:var(--g); font-size:.9rem; }

/* ============================================================
   ÍNDICE DEL BLOG (listado de artículos)
   ============================================================ */
.bloglist-hero{ background:var(--g); color:var(--wh); padding:44px 20px; text-align:center; }
.bloglist-hero h1{ font-family:var(--font-title); font-size:2rem; margin:0 0 10px; }
.bloglist-hero p{ font-family:var(--font-body); max-width:620px; margin:0 auto; opacity:.92; line-height:1.6; }
.bloglist-wrap{ max-width:820px; margin:0 auto; padding:26px 20px 50px; display:flex; flex-direction:column; gap:18px; }
.post-card{ display:block; background:var(--wh); border:1px solid #eee; border-radius:14px; padding:22px 24px; text-decoration:none; color:inherit; box-shadow:0 3px 10px rgba(0,0,0,.06); transition:transform .12s, box-shadow .12s; }
.post-card:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.post-card__cat{ font-family:var(--font-body); font-size:.75rem; font-weight:800; color:var(--g); text-transform:uppercase; letter-spacing:.4px; }
.post-card__title{ font-family:var(--font-title); color:var(--bk); font-size:1.25rem; line-height:1.2; margin:6px 0 8px; }
.post-card__meta{ font-family:var(--font-body); font-size:.82rem; color:#888; margin-bottom:8px; }
.post-card__excerpt{ font-family:var(--font-body); font-size:1rem; line-height:1.6; color:#3a3a3a; margin:0; }
.post-card__more{ display:inline-block; margin-top:10px; font-family:var(--font-body); font-weight:800; color:var(--g); }

/* Logo allargat: encongir una mica al mòbil per no amuntegar amb el botó de menú */
@media(max-width:480px){ .mk-topbar__logo img{ height:30px; } }

/* Logo (imagen) en el pie de página */
.mk-footer__logo-img{ height:48px; width:auto; display:block; }
@media(max-width:480px){ .mk-footer__logo-img{ height:38px; } }