/* Centro de ayuda (ayuda.whatsmarketing.es) con el diseño de la web y del blog de WhatsMarketing (2026-10-14).
   Se inyecta sobre el portal de ayuda sin tocar su código: tokens, tipografía, portadas con emoji por categoría,
   tarjetas con realce al pasar el cursor, cabecera y buscador con vidrio esmerilado, transiciones entre páginas. */
:root{
  --bg:#FDFCFB;--surface:#FFFFFF;--surface-alt:#FBF3F8;--surface-hover:#FEF6FA;
  --border:#EEE3EB;--border-hover:#EFC1DC;
  --text:#241E22;--text-secondary:#4C4650;--text-tertiary:#8A8189;
  --primary:#C81591;--primary-hover:#AD0F7A;--primary-tint:#FBE6F2;
  --secondary:#F37648;--secondary-tint:#FDEBE3;--success:#1F9D6B;
  --font-body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-headline:'Space Grotesk','Rubik',system-ui,sans-serif;
  --sombra:0 18px 40px rgba(43,42,41,.1);
}
/* transición entre páginas: fundido cruzado y elementos compartidos (portada con emoji y título) */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
  *{transition-duration:.001ms !important;}
}

html{scroll-behavior:smooth;}
body,#portal{font-family:var(--font-body);color:var(--text);}
#portal main{background:var(--bg) !important;}
#portal h1,#portal h2,#portal h3,#portal h4{font-family:var(--font-headline);letter-spacing:-.01em;color:var(--text);text-wrap:balance;}
#portal a{color:inherit;}

/* cabecera: vidrio esmerilado, logo de WhatsMarketing, sin conmutador de tema */
#portal header.sticky{background:rgba(255,255,255,.72) !important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border);box-shadow:none !important;}
#portal header nav{max-width:1120px !important;}
#portal header a.flex.items-center{gap:14px;}
#portal header .wmh-logo{height:44px;width:auto;display:block;flex-shrink:0;}
#portal header a.flex.items-center span{font-family:var(--font-headline);font-weight:700;font-size:1.02rem;color:var(--text) !important;}
#portal header .wmh-sep{width:1px;height:28px;background:var(--border);}
/* idioma y tema: pastillas con el estilo de la web */
#portal #header-action-button{gap:10px;}
#portal #header-action-button > div{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-secondary);transition:border-color .18s ease,background-color .18s ease;}
#portal #header-action-button > div:hover{border-color:var(--border-hover);background:var(--surface-alt);}
#portal #header-action-button svg{stroke:currentColor;}
#portal select.wmh-idioma{font:inherit;font-size:.85rem;font-weight:500;color:var(--text);background:transparent;border:0;outline:none;cursor:pointer;padding-right:2px;}
#portal #toggle-appearance{min-width:0 !important;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-secondary);transition:border-color .18s ease,background-color .18s ease;}
#portal #toggle-appearance:hover{border-color:var(--border-hover);background:var(--surface-alt);}
#portal #toggle-appearance .theme-button span{font-size:.85rem;font-weight:500;color:var(--text);}
#portal #appearance-dropdown{top:44px !important;width:150px !important;border-radius:14px !important;border:1px solid var(--border) !important;background:var(--surface) !important;box-shadow:var(--sombra) !important;overflow:hidden;padding:4px;}
#portal #appearance-dropdown button{border:0 !important;border-radius:10px;padding:8px 10px !important;color:var(--text) !important;background:transparent !important;}
#portal #appearance-dropdown button:hover{background:var(--surface-alt) !important;color:var(--primary) !important;}
#portal #appearance-dropdown button span.text-xs{font-size:.85rem;font-weight:500;}
#portal #appearance-dropdown .check-mark-icon{color:var(--primary);}
#portal .mobile-theme-button span{font:inherit;}
#portal header .wmh-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--primary);color:#fff !important;font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .18s ease,transform .18s ease;}
#portal header .wmh-cta:hover{background:var(--primary-hover);transform:translateY(-1px);}
@media (max-width:640px){#portal header .wmh-logo{height:34px;} #portal header .wmh-cta{display:none;}}

/* portada: degradado de la web, título grande, buscador de vidrio */
#portal #portal-bg{background:linear-gradient(180deg,var(--surface-alt) 0%,var(--bg) 100%) !important;box-shadow:none !important;}
#portal #portal-bg-gradient{background:none !important;padding-top:40px !important;padding-bottom:28px !important;}
#portal #portal-bg-gradient > div{max-width:1120px !important;}
#portal #portal-bg-gradient > div > span.text-sm.font-semibold{display:inline-flex;align-items:center;gap:7px;color:var(--primary) !important;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
#portal #portal-bg-gradient > div > span.text-sm.font-semibold::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success);}
#portal #portal-bg-gradient .text-sm.font-semibold:not(a){color:var(--text-secondary);}
#portal #portal-bg-gradient h1{font-size:clamp(1.9rem,4vw,2.9rem) !important;line-height:1.08 !important;margin:10px 0 8px;}
#portal #portal-bg-gradient h1 em{font-style:normal;color:var(--primary);}
#portal #portal-bg-gradient p{color:var(--text-secondary) !important;font-size:1.05rem !important;max-width:60ch;}
#portal #search-wrap{margin-top:10px;}
#portal #search-wrap div.flex.items-center.border{height:56px !important;border-radius:18px !important;border:1.5px solid var(--border) !important;background:rgba(255,255,255,.86) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(43,42,41,.06);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
#portal #search-wrap div.flex.items-center.border svg{color:var(--text-tertiary);}
#portal #search-wrap div.flex.items-center.border:focus-within{border-color:var(--primary) !important;box-shadow:0 0 0 4px var(--primary-tint),0 14px 34px rgba(200,21,145,.12);transform:translateY(-1px);}
#portal #search-wrap input{font:inherit;font-size:1rem;background:transparent !important;color:var(--text) !important;}
#portal #search-wrap input::placeholder{color:var(--text-tertiary);}
#portal #search-wrap .relative > div:not(.flex){border-radius:16px;border:1px solid var(--border);box-shadow:var(--sombra);}

/* portada con emoji (el mismo recurso que las tarjetas del blog) */
.wmh-cover{display:flex;align-items:center;justify-content:center;height:118px;border-radius:16px;font-size:2.6rem;line-height:1;background:linear-gradient(135deg,var(--surface-alt),var(--primary-tint));margin-bottom:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.wmh-cover[data-tema="api"]{background:linear-gradient(135deg,#FBE6F2,#FDEBE3);}
.wmh-cover[data-tema="campanas"]{background:linear-gradient(135deg,#FDEBE3,#FFF6E8);}
.wmh-cover[data-tema="cobranzas"]{background:linear-gradient(135deg,#FBE6F2,#EFE3FA);}
.wmh-cover[data-tema="comparativa"]{background:linear-gradient(135deg,#E8F1FD,#FBE6F2);}
.wmh-cover[data-tema="atencion"]{background:linear-gradient(135deg,#E3F6EC,#E8F1FD);}
.wmh-cover--hero{width:96px;height:96px;font-size:3rem;margin:0 0 18px;border-radius:24px;box-shadow:0 14px 30px rgba(43,42,41,.1);}
.wmh-emoji{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;font-size:1.1rem;flex-shrink:0;background:var(--surface-alt);margin-right:12px;}

/* tarjetas de categoría (portada) y de artículo (categoría), con realce y desenfoque de las vecinas */
#portal .max-w-5xl{max-width:1120px !important;}
#portal #category-block,#portal .wmh-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px 22px 22px;box-shadow:0 1px 2px rgba(43,42,41,.04);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease,filter .25s ease,opacity .25s ease;}
#portal #category-block{gap:12px !important;height:auto !important;}
#portal #category-block:hover,#portal .wmh-card:hover{transform:translateY(-4px) scale(1.012);border-color:var(--border-hover);box-shadow:var(--sombra);}
#portal #category-block:hover .wmh-cover{transform:scale(1.06);}
#portal .grid:has(#category-block:hover) #category-block:not(:hover),#portal .grid:has(.wmh-card:hover) .wmh-card:not(:hover){filter:blur(1.2px);opacity:.72;}
#portal #category-block h4,#portal #category-block h3{font-size:1.12rem;margin:0;}
#portal #category-block > div:first-of-type a{text-decoration:none;}
#portal #category-block p{color:var(--text-secondary);font-size:.92rem;line-height:1.5;}
#portal #category-block a[href*="/articles/"]{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 -12px;border-radius:12px;font-size:.93rem;color:var(--text);text-decoration:none;transition:background-color .18s ease,color .18s ease,transform .18s ease;}
#portal #category-block a[href*="/articles/"]:hover{background:var(--surface-hover);color:var(--primary);transform:translateX(3px);}
#portal #category-block a[href*="/articles/"] svg{margin-left:auto;opacity:.5;}
#portal #category-block a[href*="/categories/"].text-sm,#portal a.wmh-verlos{font-weight:600;color:var(--primary) !important;}
/* destacados */
#portal .wmh-destacados{background:var(--surface);border:1px solid var(--border) !important;border-radius:20px !important;padding:22px 22px 16px !important;margin-bottom:8px;box-shadow:0 1px 2px rgba(43,42,41,.04);}
#portal .wmh-destacados h3,#portal .wmh-destacados h4{font-size:1.1rem;}
#portal .wmh-destacados a[href*="/articles/"]{display:flex;align-items:center;padding:8px 10px;margin:0 -10px;border-radius:12px;text-decoration:none;color:var(--text);transition:background-color .18s ease,color .18s ease,transform .18s ease;}
#portal .wmh-destacados a[href*="/articles/"]:hover{background:var(--surface-hover);color:var(--primary);transform:translateX(3px);}
#portal .wmh-destacados a[href*="/articles/"] #category-item{flex:1;}

/* página de categoría: tarjetas de artículo */
#portal .wmh-card{display:block;text-decoration:none;color:var(--text);margin-bottom:14px;}
#portal .wmh-card h3,#portal .wmh-card h4{font-size:1.05rem;margin-bottom:6px;}
#portal .wmh-card p{color:var(--text-secondary);font-size:.92rem;line-height:1.5;}
#portal .wmh-card .wmh-fecha{display:block;margin-top:10px;font-size:.78rem;color:var(--text-tertiary);}

/* artículo */
#portal #cw-article-content{font-size:1.02rem;line-height:1.7;color:var(--text);}
#portal #cw-article-content h2,#portal #cw-article-content h3{font-family:var(--font-headline);margin-top:1.8em;}
#portal #cw-article-content a:not(.permalink){color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
#portal #cw-article-content img{border-radius:16px;box-shadow:var(--sombra);}
#portal #cw-article-content code{background:var(--surface-alt);border-radius:6px;padding:2px 6px;}
#portal #cw-article-content blockquote{border-left:3px solid var(--primary);background:var(--surface-alt);padding:12px 16px;border-radius:0 12px 12px 0;}
#portal #cw-hc-toc nav{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;position:sticky;top:96px;}
#portal #cw-hc-toc a{color:var(--text-secondary);font-size:.86rem;transition:color .15s ease;}
#portal #cw-hc-toc a:hover{color:var(--primary);}
#portal #portal-bg-gradient .text-sm a{color:var(--text-tertiary) !important;}
#portal #portal-bg-gradient .text-sm a:hover{color:var(--primary) !important;}

/* pie: sin el icono del proveedor, con la autoría de ShoutAd */
#portal footer img.w-4{display:none !important;}
#portal footer{border-top:1px solid var(--border);margin-top:40px;color:var(--text-tertiary);}
#portal footer p{color:var(--text-tertiary) !important;font-size:.82rem;}
#portal footer a{color:var(--text-secondary);text-decoration:none;font-weight:600;}
#portal footer a:hover{color:var(--primary);}

/* tema oscuro (lo elige el visitante con el conmutador del portal o su sistema; el portal pone html.dark) */
html.dark{
  --bg:#16121A;--surface:#1F1A24;--surface-alt:#2A2230;--surface-hover:#2F2536;
  --border:#352C3B;--border-hover:#6B3A5C;
  --text:#F4EEF2;--text-secondary:#C9BFC7;--text-tertiary:#8F8490;
  --primary:#F06AC2;--primary-hover:#F58AD0;--primary-tint:#3D1F33;
  --sombra:0 18px 40px rgba(0,0,0,.45);
}
html.dark #portal main{background:var(--bg) !important;}
html.dark #portal header.sticky{background:rgba(22,18,26,.78) !important;}
html.dark #portal #portal-bg{background:linear-gradient(180deg,#221A27 0%,var(--bg) 100%) !important;}
html.dark #portal #search-wrap div.flex.items-center.border{background:rgba(31,26,36,.9) !important;box-shadow:0 10px 30px rgba(0,0,0,.3);}
html.dark .wmh-cover,html.dark .wmh-cover[data-tema]{background:linear-gradient(135deg,#2A2230,#3D1F33);}
html.dark .wmh-cover[data-tema="campanas"]{background:linear-gradient(135deg,#3A2A22,#3D1F33);}
html.dark .wmh-cover[data-tema="cobranzas"]{background:linear-gradient(135deg,#3D1F33,#2C2240);}
html.dark .wmh-cover[data-tema="comparativa"]{background:linear-gradient(135deg,#1F2A3D,#3D1F33);}
html.dark .wmh-cover[data-tema="atencion"]{background:linear-gradient(135deg,#1F3A2E,#1F2A3D);}
html.dark #portal #category-block,html.dark #portal .wmh-card,html.dark #portal .wmh-destacados{background:var(--surface);border-color:var(--border);}
html.dark #portal #category-block h3,html.dark #portal #category-block span,html.dark #portal .wmh-card h3,html.dark #portal .wmh-card span,html.dark #portal .wmh-destacados a,html.dark #portal .wmh-destacados h3,html.dark #portal .wmh-destacados h4{color:var(--text);}
html.dark #portal #category-block p,html.dark #portal #category-block > div:first-of-type span,html.dark #portal .wmh-card p{color:var(--text-secondary);}
html.dark #portal #category-block a[href*="/articles/"]{color:var(--text);}
html.dark #portal #category-block a[href*="/articles/"]:hover,html.dark #portal .wmh-destacados a[href*="/articles/"]:hover{color:var(--primary);}
html.dark #portal #cw-article-content,html.dark #portal #cw-article-content h2,html.dark #portal #cw-article-content h3,html.dark #portal #cw-article-content li,html.dark #portal #cw-article-content p{color:var(--text);}
html.dark #portal #cw-article-content code,html.dark #portal #cw-article-content blockquote{background:var(--surface-alt);color:var(--text);}
html.dark #portal #cw-hc-toc nav{background:var(--surface);}
html.dark #portal #portal-bg-gradient .text-sm.font-semibold:not(a){color:var(--text-secondary);}
html.dark #portal header a.flex.items-center span{color:var(--text) !important;}
html.dark #portal .wmh-emoji{background:var(--surface-alt);}
html.dark #portal footer{border-color:var(--border);}