/* Ziruma Help Center theme — mismo look que ziruma.com (Shopify).
   Paleta y tipografías tomadas de ziruma.com el 22-oct-2026:
   navy #223F6E (títulos, footer), naranja #DC5F33 (CTA), crema #FBEDE7 (secciones),
   durazno #E7CDBE, texto #3A3A3A, gris #6B6B6B.
   Títulos: Bricolage Grotesque · Texto: Quicksand. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --zrm-navy: #223F6E;
  --zrm-orange: #DC5F33;
  --zrm-cream: #FBEDE7;
  --zrm-peach: #E7CDBE;
  --zrm-text: #3A3A3A;
  --zrm-muted: #6B6B6B;
  --zrm-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --zrm-body: 'Quicksand', system-ui, sans-serif;
}

/* Tipografía */
#portal, #portal input, #portal button, #portal select, body.font-default {
  font-family: var(--zrm-body) !important;
}
#portal { color: var(--zrm-text); font-size: 15px; }
#portal h1, #portal h2, #portal h3, #portal h4, #portal h5,
#portal .text-lg.font-semibold, #portal .text-xl.font-semibold {
  font-family: var(--zrm-head) !important;
  color: var(--zrm-navy) !important;
  letter-spacing: -0.01em;
}
#portal h1 { font-weight: 700 !important; }
#portal h2, #portal h3 { font-weight: 600 !important; }
#portal p, #portal li, #portal .text-slate-600, #portal .text-slate-700, #portal .text-slate-800 {
  color: var(--zrm-text);
}
#portal .text-slate-500, #portal .text-slate-400 { color: var(--zrm-muted) !important; }

/* Encabezado */
#portal header, #portal > main > header, #portal .sticky.top-0 {
  background: #fff !important;
  border-bottom: 1px solid var(--zrm-peach) !important;
  box-shadow: none !important;
}
#header-action-button { color: var(--zrm-navy) !important; font-weight: 600 !important; }
/* Logo navy de la tienda (el del portal es el negro) */
header nav a img { content: url('https://ziruma.com/cdn/shop/files/logo_ziruma_navy_260x.svg'); }

/* Hero crema como las secciones de la tienda */
#portal-bg { background: var(--zrm-cream) !important; box-shadow: none !important; }
#portal-bg-gradient { background: var(--zrm-cream) !important; background-image: none !important; }
#portal-bg h1 { font-size: clamp(32px, 4.5vw, 48px) !important; }

/* Buscador redondeado tipo píldora */
#search-wrap form > div {
  border-radius: 999px !important;
  border: 1.5px solid var(--zrm-peach) !important;
  box-shadow: none !important;
}
#search-wrap form > div:focus-within { border-color: var(--zrm-navy) !important; }
#search-wrap input { border: 0 !important; box-shadow: none !important; outline: none !important; }

/* Tarjetas de categoría y artículos destacados */
#portal .border-slate-100, #portal .border-slate-200,
#portal .rounded-lg.border, #portal .rounded-xl.border {
  border-color: var(--zrm-peach) !important;
}
#portal section .rounded-lg, #portal section .rounded-xl { border-radius: 16px !important; }

/* Enlaces */
#portal a:hover { color: var(--zrm-orange) !important; }
#portal article a, #portal .article-content a, #portal #cw-article-content a {
  color: var(--zrm-orange) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.recommended-pill { border-color: var(--zrm-peach) !important; color: var(--zrm-navy) !important; }

/* Cuerpo del artículo */
#cw-article-content, #portal article {
  font-family: var(--zrm-body) !important;
  color: var(--zrm-text) !important;
  line-height: 1.7;
}

/* La tienda no tiene modo oscuro: escondemos el selector de apariencia */
.appearance-menu, #toggle-appearance, [data-appearance-toggle] { display: none !important; }

/* Pie navy con link de vuelta a la tienda (lo agrega el parcial) */
.zrm-footer {
  background: var(--zrm-navy);
  color: #fff;
  font-family: var(--zrm-body);
  margin-top: 48px;
  padding: 32px 16px;
  text-align: center;
  font-size: 14px;
}
.zrm-footer a { color: #fff !important; font-weight: 600; text-decoration: none; margin: 0 12px; }
.zrm-footer a:hover { color: var(--zrm-peach) !important; }
.zrm-footer .zrm-cta {
  display: inline-block;
  background: var(--zrm-orange);
  border-radius: 999px;
  padding: 10px 24px;
  margin-bottom: 16px;
  font-weight: 700;
}