/* ============================================================
   YUREST HELP CENTER — Design System
   Built on Copenhagen 4.41 · v1.0
   ============================================================ */

:root{
  --yu-brand:#ff5a5f;
  --yu-brand-dark:#e8484d;
  --yu-brand-soft:#fff1f2;
  --yu-ink:#0f172a;
  --yu-ink-2:#334155;
  --yu-ink-3:#64748b;
  --yu-line:#e2e8f0;
  --yu-line-soft:#f1f5f9;
  --yu-bg:#ffffff;
  --yu-bg-2:#f8fafc;
  --yu-radius:12px;
  --yu-radius-lg:20px;
  --yu-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --yu-shadow:0 1px 3px rgba(15,23,42,.06),0 4px 20px rgba(15,23,42,.04);
  --yu-shadow-lg:0 4px 12px rgba(15,23,42,.08),0 20px 40px rgba(15,23,42,.06);
  --yu-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --yu-font-mono:"SF Mono",Menlo,Consolas,monospace;
}

/* RESET / BASE ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--yu-font);
  color:var(--yu-ink);
  background:var(--yu-bg);
  line-height:1.6;
  font-size:16px;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--yu-ink);text-decoration:none;transition:color .15s}
a:hover{color:var(--yu-brand)}
h1,h2,h3,h4{color:var(--yu-ink);letter-spacing:-.01em;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(28px,3.5vw,40px);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(22px,2.5vw,28px);font-weight:700}
h3{font-size:18px;font-weight:600}
p{margin:0 0 1em}
code{font-family:var(--yu-font-mono);font-size:.92em;background:var(--yu-bg-2);padding:2px 6px;border-radius:4px;color:var(--yu-ink)}

/* LAYOUT ------------------------------------------------------ */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-divider{display:none}

/* HEADER ------------------------------------------------------ */
.header{
  background:var(--yu-bg);
  border-bottom:1px solid var(--yu-line);
  padding:18px 0;
}
.header .nav-wrap,.header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.header .logo img{max-height:32px;display:block}
.user-nav a{font-size:14px;font-weight:500;color:var(--yu-ink-2);padding:8px 14px;border-radius:8px}
.user-nav a:hover{background:var(--yu-bg-2);color:var(--yu-ink)}

/* HERO -------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg,var(--yu-brand-soft) 0%,var(--yu-bg) 100%);
  padding:72px 0 56px;
  text-align:center;
  border-bottom:1px solid var(--yu-line-soft);
}
.hero h1{margin:0 0 12px;color:var(--yu-ink)}
.hero p.hero-sub{color:var(--yu-ink-3);font-size:18px;margin:0 0 36px;max-width:560px;margin-left:auto;margin-right:auto}
.hero .search{max-width:640px;margin:0 auto}
.hero .search input[type="search"]{
  width:100%;
  padding:18px 24px 18px 56px;
  border:1px solid var(--yu-line);
  border-radius:999px;
  font-size:16px;
  background:var(--yu-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3' stroke-linecap='round'/></svg>") 22px center/20px no-repeat;
  box-shadow:var(--yu-shadow);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.hero .search input[type="search"]:focus{border-color:var(--yu-brand);box-shadow:0 0 0 4px var(--yu-brand-soft)}

/* BREADCRUMBS & SUBNAV --------------------------------------- */
.sub-nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:24px}
.sub-nav .breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:14px;color:var(--yu-ink-3)}
.sub-nav .breadcrumbs li a{color:var(--yu-ink-3)}
.sub-nav .breadcrumbs li::after{content:"/";margin-left:8px;color:var(--yu-line)}
.sub-nav .breadcrumbs li:last-child::after{content:""}
.sub-nav .search-container{max-width:320px;flex:1;position:relative}
.sub-nav .search-container input[type="search"]{
  width:100%;padding:10px 14px 10px 38px;
  border:1px solid var(--yu-line);border-radius:8px;
  font-size:14px;background:var(--yu-bg);
}
.sub-nav .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--yu-ink-3)}

/* CARDS ------------------------------------------------------- */
.yu-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin:32px 0;
}
.yu-card{
  display:block;
  background:var(--yu-bg);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.yu-card:hover{transform:translateY(-2px);box-shadow:var(--yu-shadow);border-color:transparent}
.yu-card__icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--yu-brand-soft);color:var(--yu-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:16px;
}
.yu-card__title{font-size:17px;font-weight:600;margin:0 0 6px;color:var(--yu-ink)}
.yu-card__desc{font-size:14px;color:var(--yu-ink-3);margin:0}
.yu-card__count{font-size:12px;color:var(--yu-ink-3);font-weight:500;margin-top:12px;display:block}

/* SECTION HEADERS -------------------------------------------- */
.yu-section{padding:56px 0}
.yu-section--alt{background:var(--yu-bg-2)}
.yu-section__head{margin-bottom:32px;text-align:center}
.yu-section__head h2{margin:0 0 8px}
.yu-section__head p{color:var(--yu-ink-3);margin:0}

/* POPULAR ARTICLES LIST -------------------------------------- */
.yu-articles-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.yu-articles-list a{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:var(--yu-bg);
  border:1px solid var(--yu-line);
  border-radius:10px;
  font-size:15px;
  transition:all .15s;
}
.yu-articles-list a:hover{border-color:var(--yu-brand);background:var(--yu-brand-soft)}
.yu-articles-list a::before{content:"📄";font-size:18px;flex-shrink:0}

/* CTA BLOCK --------------------------------------------------- */
.yu-cta{
  background:var(--yu-ink);
  color:#fff;
  border-radius:var(--yu-radius-lg);
  padding:48px;
  text-align:center;
  margin:40px 0;
}
.yu-cta h2{color:#fff;margin:0 0 12px}
.yu-cta p{color:#cbd5e1;margin:0 0 24px}
.yu-cta .yu-btn{background:var(--yu-brand);color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;display:inline-block}
.yu-cta .yu-btn:hover{background:var(--yu-brand-dark);color:#fff}

/* ARTICLE PAGE ----------------------------------------------- */
.article-container{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:24px 0 80px}
.article-sidebar{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto}
.sidenav-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--yu-ink-3);font-weight:600;display:block;margin-bottom:12px}
.article-sidebar ul{list-style:none;padding:0;margin:0}
.article-sidebar li{margin:2px 0}
.sidenav-item{
  display:block;padding:8px 12px;border-radius:6px;
  font-size:14px;color:var(--yu-ink-2);line-height:1.4;
}
.sidenav-item:hover{background:var(--yu-bg-2);color:var(--yu-ink)}
.sidenav-item.current-article{background:var(--yu-brand-soft);color:var(--yu-brand);font-weight:600}

.article{max-width:780px}
.article-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--yu-line-soft)}
.article-title{margin:0 0 16px}
.article-author{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--yu-ink-3)}
.article-avatar img{width:32px;height:32px;border-radius:50%}
.meta-data{color:var(--yu-ink-3)}

/* article body typography */
.article-body{font-size:16px;line-height:1.75;color:var(--yu-ink-2)}
.article-body h2{margin-top:48px}
.article-body h3{margin-top:32px}
.article-body img{max-width:100%;border-radius:var(--yu-radius);border:1px solid var(--yu-line)}
.article-body ul,.article-body ol{padding-left:24px}
.article-body li{margin:6px 0}
.article-body blockquote{
  border-left:4px solid var(--yu-brand);
  background:var(--yu-brand-soft);
  padding:12px 20px;margin:20px 0;
  border-radius:0 8px 8px 0;
}

/* ARTICLE BODY COMPONENTS (yu-*) ---------------------------- */
.article-body .yu-meta{display:flex;gap:16px;flex-wrap:wrap;padding:14px 18px;background:var(--yu-bg-2);border:1px solid var(--yu-line);border-radius:10px;font-size:14px;color:var(--yu-ink-3);margin:0 0 28px}
.article-body .yu-meta span{display:inline-flex;align-items:center;gap:6px}

.article-body .yu-toc{background:var(--yu-bg);border:1px solid var(--yu-line);border-left:4px solid var(--yu-brand);border-radius:10px;padding:18px 22px;margin:0 0 36px}
.article-body .yu-toc h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--yu-ink-3)}
.article-body .yu-toc ol{margin:0;padding-left:22px}
.article-body .yu-toc a{color:var(--yu-ink);font-weight:500}
.article-body .yu-toc a:hover{color:var(--yu-brand)}

.article-body .yu-etapa{margin:48px 0 32px;padding-top:24px;border-top:2px solid var(--yu-line-soft)}
.article-body .yu-chip{display:inline-block;background:var(--yu-brand);color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.article-body .yu-chip.is-muted{background:var(--yu-ink-3)}

.article-body .yu-step{display:grid;grid-template-columns:44px 1fr;gap:16px;margin:22px 0}
.article-body .yu-step-num{width:36px;height:36px;border-radius:50%;background:var(--yu-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.article-body .yu-step-body p{margin:0 0 10px}

.article-body .yu-fig{margin:18px 0;text-align:center}
.article-body .yu-fig img{max-width:100%;border-radius:var(--yu-radius);border:1px solid var(--yu-line);box-shadow:var(--yu-shadow-sm)}
.article-body .yu-fig figcaption{font-size:13px;color:var(--yu-ink-3);font-style:italic;margin-top:8px}

.article-body .yu-callout{display:flex;gap:14px;padding:14px 18px;border-radius:10px;margin:18px 0;border:1px solid}
.article-body .yu-callout__icon{font-size:20px;line-height:1.2;flex-shrink:0}
.article-body .yu-callout__body{flex:1;font-size:15px}
.article-body .yu-callout__body strong{display:block;margin-bottom:2px}
.article-body .yu-callout.is-warning{background:#fffbeb;border-color:#fde68a;color:#78350f}
.article-body .yu-callout.is-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.article-body .yu-callout.is-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.article-body .yu-callout.is-danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}

.article-body .yu-creds{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:16px 18px;font-family:var(--yu-font-mono);font-size:14px;margin:14px 0}
.article-body .yu-creds div{display:flex;justify-content:space-between;padding:4px 0}
.article-body .yu-creds span:first-child{color:#94a3b8}
.article-body .yu-creds span:last-child{color:#fff;font-weight:600;user-select:all}

.article-body .yu-next{display:flex;justify-content:flex-end;margin-top:28px}
.article-body .yu-next a{display:inline-flex;align-items:center;gap:8px;background:var(--yu-ink);color:#fff;padding:10px 18px;border-radius:8px;font-weight:500;font-size:14px}
.article-body .yu-next a:hover{background:var(--yu-brand);color:#fff}

.article-body .yu-faq{background:var(--yu-bg-2);border:1px solid var(--yu-line);border-radius:10px;padding:14px 18px;margin:10px 0}
.article-body .yu-faq summary{cursor:pointer;font-weight:600;color:var(--yu-ink);list-style:none}
.article-body .yu-faq summary::-webkit-details-marker{display:none}
.article-body .yu-faq summary::before{content:"▸ ";color:var(--yu-brand);font-weight:bold}
.article-body .yu-faq[open] summary::before{content:"▾ "}
.article-body .yu-faq[open] summary{margin-bottom:10px}

/* ARTICLE FOOTER --------------------------------------------- */
.article-votes{
  background:var(--yu-bg-2);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:24px;text-align:center;margin:48px 0 24px;
}
.article-votes-question{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--yu-ink)}
.article-vote{padding:8px 20px;border-radius:8px;border:1px solid var(--yu-line);background:var(--yu-bg);cursor:pointer;font-size:14px;font-weight:500;margin:0 4px}
.article-vote:hover{border-color:var(--yu-brand);color:var(--yu-brand)}
.article-vote.button-primary{background:var(--yu-brand);border-color:var(--yu-brand);color:#fff}

/* FOOTER ------------------------------------------------------ */
.footer{background:var(--yu-ink);color:#cbd5e1;padding:48px 0 32px;margin-top:80px}
.footer a{color:#cbd5e1;font-size:14px}
.footer a:hover{color:#fff}
.footer h4{color:#fff;font-size:14px;font-weight:600;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em}
.footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding-bottom:32px;border-bottom:1px solid #334155}
.footer .footer-bottom{padding-top:24px;font-size:13px;color:#94a3b8;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

/* RESPONSIVE -------------------------------------------------- */
@media (max-width:900px){
  .article-container{grid-template-columns:1fr;gap:24px}
  .article-sidebar{position:static;max-height:none}
  .hero{padding:48px 0 40px}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .sub-nav{flex-direction:column;align-items:stretch}
  .article-body .yu-step{grid-template-columns:36px 1fr;gap:12px}
}
/* ============================================================
   HEADER (yu-header) — overrides y nuevo diseño
   ============================================================ */

.skip-navigation{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-navigation:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;padding:8px 16px;z-index:9999;border-radius:6px}

.yu-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--yu-line);
}
.yu-header__inner{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px;
}
.yu-header__logo{flex-shrink:0;display:flex;align-items:center}
.yu-header__logo img{max-height:32px;display:block;width:auto}

.yu-header__nav{flex:1}
.yu-header__nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.yu-header__nav a{
  display:inline-block;padding:8px 14px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--yu-ink-2);
}
.yu-header__nav a:hover{background:var(--yu-bg-2);color:var(--yu-ink)}

.yu-header__actions{display:flex;align-items:center;gap:10px}

/* Ask AI pill */
.yu-ask-ai{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--yu-brand) 0%,#ff8a5f 100%);
  color:#fff !important;font-size:13px;font-weight:600;
  box-shadow:0 2px 8px rgba(255,90,95,.25);
  transition:transform .15s,box-shadow .15s;
}
.yu-ask-ai:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,90,95,.35);color:#fff !important}
.yu-ask-ai svg{flex-shrink:0}

/* Sign-in link */
.yu-header__signin{
  padding:8px 16px;border-radius:8px;
  background:var(--yu-ink);color:#fff !important;
  font-size:14px;font-weight:500;
}
.yu-header__signin:hover{background:var(--yu-brand);color:#fff !important}

/* User dropdown */
.yu-user{position:relative}
.yu-user__btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--yu-line);
  padding:4px 10px 4px 4px;border-radius:999px;cursor:pointer;
}
.yu-user__btn:hover{border-color:var(--yu-brand)}
.yu-user__avatar{width:28px;height:28px;border-radius:50%}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;background:#fff;
  border:1px solid var(--yu-line);border-radius:10px;
  box-shadow:var(--yu-shadow-lg);
  padding:6px;display:none;z-index:60;
}
.dropdown-menu.is-open,.dropdown.is-open .dropdown-menu{display:block}
.dropdown-menu a,.dropdown-menu button{
  display:block;width:100%;text-align:left;
  padding:8px 12px;border-radius:6px;
  font-size:14px;color:var(--yu-ink-2);
  background:none;border:none;cursor:pointer;
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--yu-bg-2);color:var(--yu-ink)}
.dropdown-menu .separator{height:1px;background:var(--yu-line);margin:6px 0}
.dropdown-chevron-icon{transition:transform .2s}
.dropdown[aria-expanded="true"] .dropdown-chevron-icon,
.dropdown.is-open .dropdown-chevron-icon{transform:rotate(180deg)}

/* Mobile toggle */
.yu-header__mobile-toggle{
  display:none;background:none;border:none;
  padding:8px;border-radius:8px;cursor:pointer;color:var(--yu-ink);
}
.yu-header__mobile-toggle:hover{background:var(--yu-bg-2)}

/* Mobile nav */
.yu-mobile-nav{
  display:none;
  background:#fff;border-top:1px solid var(--yu-line);
  padding:16px 24px;
}
.yu-mobile-nav[aria-expanded="true"]{display:block}
.yu-mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.yu-mobile-nav a{
  display:block;padding:12px 14px;border-radius:8px;
  font-size:15px;color:var(--yu-ink-2);
}
.yu-mobile-nav a:hover{background:var(--yu-bg-2);color:var(--yu-ink)}
.yu-mobile-nav__divider{height:1px;background:var(--yu-line);margin:8px 0}
.yu-mobile-nav__user{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;font-weight:600;
}
.yu-mobile-nav__avatar{width:32px;height:32px;border-radius:50%}
.yu-ask-ai--mobile{margin:8px 0}

@media (max-width:768px){
  .yu-header__nav,.yu-header__actions .yu-ask-ai,
  .yu-header__signin,.yu-user{display:none}
  .yu-header__mobile-toggle{display:flex}
  .yu-header__actions{margin-left:auto}
}

/* ============================================================
   FOOTER (yu-footer)
   ============================================================ */

.yu-footer{
  background:var(--yu-ink);color:#cbd5e1;
  padding:56px 0 24px;margin-top:96px;
}
.yu-footer__inner{max-width:1200px;margin:0 auto;padding:0 24px}
.yu-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:40px;
  border-bottom:1px solid #1e293b;
}
.yu-footer__brand p{color:#94a3b8;font-size:14px;line-height:1.6;max-width:280px}
.yu-footer__logo{max-height:32px;margin-bottom:16px;display:block;filter:brightness(0) invert(1)}
.yu-footer h4{
  color:#fff;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 16px;
}
.yu-footer ul{list-style:none;padding:0;margin:0}
.yu-footer ul li{margin:8px 0}
.yu-footer a{color:#cbd5e1;font-size:14px;transition:color .15s}
.yu-footer a:hover{color:#fff}

.yu-footer__lang .dropdown-toggle{
  background:#1e293b;color:#cbd5e1;border:1px solid #334155;
  padding:8px 14px;border-radius:8px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;cursor:pointer;
}
.yu-footer__lang .dropdown-toggle:hover{background:#334155;color:#fff}
.yu-footer__lang .dropdown-menu{background:#1e293b;border-color:#334155}
.yu-footer__lang .dropdown-menu a{color:#cbd5e1}
.yu-footer__lang .dropdown-menu a:hover{background:#334155;color:#fff}

.yu-footer__bottom{padding-top:24px;font-size:13px;color:#64748b;text-align:center}
.yu-footer__bottom p{margin:0}

@media (max-width:768px){
  .yu-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:480px){
  .yu-footer__grid{grid-template-columns:1fr}
}

/* ============================================================
   Cleanup: hide old Copenhagen classes we replaced
   ============================================================ */
.header{display:none !important}  /* old header.hbs el header viejo, por si queda algún rastro */
.footer{display:none !important}  /* old footer */
.nav-wrapper-desktop,.nav-wrapper-mobile{display:none !important}
.menu-list-mobile{display:none !important}
.user-nav-list{display:none !important}
/* Search del hero — esconder el botón "x" feo */
.hero .search button[type="reset"],
.hero .search .clear-button,
.hero form[role="search"] button:not([type="submit"]){
  display:none !important;
}

/* Cards: que se centren cuando hay un número impar */
.yu-card-grid{justify-content:center}
.yu-card{max-width:380px}

/* CTA: ajustar margen inferior para no chocar con chat widget */
.yu-section:last-of-type{padding-bottom:32px}

/* Logo del header: asegurar tamaño visible */
.yu-header__logo img{height:32px !important;width:auto !important;max-height:none}

/* Mejora del card icon: ya no es solo emoji, queda más sólido */
.yu-card__icon{
  background:linear-gradient(135deg,var(--yu-brand-soft) 0%,#ffe4e6 100%);
  font-size:24px;
}
/* ============================================================
   BREADCRUMBS (yu-breadcrumbs)
   ============================================================ */
.yu-breadcrumbs{
  padding:20px 0 0;
}
.yu-breadcrumbs ol,
.yu-breadcrumbs ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:13px;color:var(--yu-ink-3);
}
.yu-breadcrumbs li{display:flex;align-items:center;gap:8px}
.yu-breadcrumbs li::after{content:"/";color:var(--yu-line);margin-left:8px}
.yu-breadcrumbs li:last-child::after{display:none}
.yu-breadcrumbs a{color:var(--yu-ink-3);font-weight:500}
.yu-breadcrumbs a:hover{color:var(--yu-brand)}
.yu-breadcrumbs li:last-child{color:var(--yu-ink);font-weight:500}

/* ============================================================
   PAGE HEAD (yu-pagehead) — usado en category & section pages
   ============================================================ */
.yu-pagehead{
  background:linear-gradient(180deg,var(--yu-brand-soft) 0%,var(--yu-bg) 100%);
  padding:32px 0 48px;
  border-bottom:1px solid var(--yu-line-soft);
  text-align:center;
}
.yu-pagehead .yu-chip{
  background:#fff;color:var(--yu-brand);
  border:1px solid var(--yu-brand);
  margin-bottom:14px;
}
.yu-pagehead h1{margin:0 0 12px;color:var(--yu-ink)}
.yu-pagehead__desc{
  color:var(--yu-ink-3);font-size:17px;
  max-width:600px;margin:0 auto 28px;
}
.yu-pagehead__search{max-width:520px;margin:0 auto}
.yu-pagehead__search input[type="search"]{
  width:100%;padding:14px 20px 14px 48px;
  border:1px solid var(--yu-line);border-radius:999px;
  font-size:15px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3' stroke-linecap='round'/></svg>") 18px center/18px no-repeat;
  box-shadow:var(--yu-shadow-sm);outline:none;
}
.yu-pagehead__search input[type="search"]:focus{
  border-color:var(--yu-brand);
  box-shadow:0 0 0 4px var(--yu-brand-soft);
}

/* ============================================================
   SECTION CARDS (category page)
   ============================================================ */
.yu-section-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.yu-section-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.yu-section-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--yu-shadow);
  border-color:transparent;
}
.yu-section-card__head{
  display:flex;gap:14px;align-items:flex-start;
  margin-bottom:16px;
}
.yu-section-card__icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:var(--yu-brand-soft);color:var(--yu-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.yu-section-card__title{
  font-size:17px;font-weight:600;
  margin:0 0 4px;color:var(--yu-ink);
}
.yu-section-card__desc{
  font-size:14px;color:var(--yu-ink-3);margin:0;
}
.yu-section-card__list{
  list-style:none;padding:0;margin:0 0 12px;
  border-top:1px solid var(--yu-line-soft);
  padding-top:14px;
}
.yu-section-card__list li{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;font-size:14px;color:var(--yu-ink-2);
}
.yu-section-card__list li span{font-size:13px;opacity:.6}
.yu-section-card__more{
  font-size:13px;font-weight:600;
  color:var(--yu-brand);
  margin-top:auto;
}

/* ============================================================
   ARTICLE CARDS (section page)
   ============================================================ */
.yu-article-grid{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
}
.yu-article-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:22px;height:100%;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.yu-article-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--yu-shadow);
  border-color:var(--yu-brand);
}
.yu-article-card__badge{
  display:inline-block;
  background:var(--yu-brand-soft);color:var(--yu-brand);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;
  margin-bottom:10px;align-self:flex-start;
}
.yu-article-card__title{
  font-size:16px;font-weight:600;
  margin:0 0 12px;color:var(--yu-ink);line-height:1.4;
}
.yu-article-card__meta{
  display:flex;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--yu-ink-3);
  margin-bottom:14px;
}
.yu-article-card__more{
  font-size:13px;font-weight:600;
  color:var(--yu-brand);
  margin-top:auto;
}
.yu-tag{
  font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--yu-bg-2);color:var(--yu-ink-2);
  font-weight:500;
}
.yu-tag--internal{background:#fef3c7;color:#92400e}

/* ============================================================
   CTA — variante suave
   ============================================================ */
.yu-cta--soft{
  background:var(--yu-brand-soft);
  color:var(--yu-ink);
  border:1px solid var(--yu-brand);
  border-radius:var(--yu-radius-lg);
  padding:40px;text-align:center;
}
.yu-cta--soft h2{color:var(--yu-ink);margin:0 0 10px}
.yu-cta--soft p{color:var(--yu-ink-2);margin:0 0 20px}
.yu-cta--soft .yu-btn{
  background:var(--yu-brand);color:#fff;
  padding:11px 22px;border-radius:8px;
  font-weight:600;display:inline-block;
}
.yu-cta--soft .yu-btn:hover{background:var(--yu-brand-dark);color:#fff}

/* ============================================================
   EMPTY STATE & PAGINATION
   ============================================================ */
.yu-empty{
  text-align:center;padding:60px 20px;
  color:var(--yu-ink-3);
  background:var(--yu-bg-2);
  border-radius:var(--yu-radius);
}
.yu-pagination{
  margin-top:32px;display:flex;justify-content:center;
}
.yu-pagination a,.yu-pagination span{
  display:inline-block;padding:8px 14px;margin:0 2px;
  border-radius:8px;font-size:14px;color:var(--yu-ink-2);
  border:1px solid var(--yu-line);background:#fff;
}
.yu-pagination a:hover{border-color:var(--yu-brand);color:var(--yu-brand)}
.yu-pagination .is-current,.yu-pagination .current{
  background:var(--yu-ink);color:#fff;border-color:var(--yu-ink);
}
/* ============================================================
   ARTICLE LAYOUT
   ============================================================ */

.yu-article-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:48px;
  padding:24px 0 80px;
  align-items:start;
}

/* Sidebar */
.yu-article-sidebar{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto}
.yu-article-sidebar__inner{padding:4px}
.yu-article-sidebar__title{
  font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--yu-ink-3);
  font-weight:600;display:block;margin-bottom:12px;padding:0 12px;
}
.yu-article-sidebar__list{list-style:none;padding:0;margin:0}
.yu-article-sidebar__list li{margin:2px 0}
.yu-article-sidebar__item{
  display:block;padding:10px 12px;
  border-radius:8px;
  font-size:14px;color:var(--yu-ink-2);
  line-height:1.4;
  border-left:2px solid transparent;
}
.yu-article-sidebar__item:hover{
  background:var(--yu-bg-2);color:var(--yu-ink);
}
.yu-article-sidebar__item.is-current{
  background:var(--yu-brand-soft);
  color:var(--yu-brand);
  font-weight:600;
  border-left-color:var(--yu-brand);
}
.yu-article-sidebar__more{
  display:inline-block;
  margin:14px 12px;
  font-size:13px;
  color:var(--yu-brand);
  font-weight:500;
}

/* Article column */
.yu-article{max-width:780px;width:100%}

.yu-article__header{
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--yu-line-soft);
}
.yu-article__title{
  margin:0 0 20px;
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-.02em;line-height:1.2;
}
.yu-article__lock{font-size:.6em;margin-left:8px}

.yu-article__meta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.yu-article__author{display:flex;gap:12px;align-items:center}
.yu-article__avatar{
  width:40px;height:40px;border-radius:50%;
  border:2px solid var(--yu-line);
}
.yu-article__author-name{
  font-size:14px;font-weight:600;color:var(--yu-ink);
}
.yu-article__author-name a{color:var(--yu-ink)}
.yu-article__author-name a:hover{color:var(--yu-brand)}
.yu-article__meta-line{font-size:13px;color:var(--yu-ink-3)}

.yu-article__subscribe{margin-left:auto}

/* Body typography — IMPORTANT, overrides para mejor lectura */
.article-body{
  font-size:16px;line-height:1.75;color:var(--yu-ink-2);
}
.article-body h2{
  font-size:24px;margin-top:48px;margin-bottom:16px;
  color:var(--yu-ink);
}
.article-body h3{
  font-size:19px;margin-top:32px;margin-bottom:12px;
  color:var(--yu-ink);
}
.article-body p{margin:0 0 1.2em}
.article-body a{color:var(--yu-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body a:hover{color:var(--yu-brand-dark)}
.article-body ul,.article-body ol{padding-left:28px;margin:1em 0}
.article-body li{margin:8px 0}
.article-body img{
  max-width:100%;border-radius:var(--yu-radius);
  border:1px solid var(--yu-line);
  box-shadow:var(--yu-shadow-sm);
  margin:20px 0;
}
.article-body blockquote{
  border-left:4px solid var(--yu-brand);
  background:var(--yu-brand-soft);
  padding:14px 22px;margin:24px 0;
  border-radius:0 8px 8px 0;color:var(--yu-ink);
}
.article-body code{
  background:var(--yu-bg-2);padding:2px 6px;
  border-radius:4px;font-size:.92em;
  border:1px solid var(--yu-line-soft);
}
.article-body pre{
  background:var(--yu-ink);color:#e2e8f0;
  padding:18px;border-radius:10px;
  overflow-x:auto;font-family:var(--yu-font-mono);font-size:14px;
}
.article-body pre code{
  background:none;border:none;padding:0;color:inherit;
}

/* Tags */
.yu-article__tags{
  margin:32px 0;padding:16px 0;
  border-top:1px solid var(--yu-line-soft);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.yu-article__tags-label{
  font-size:13px;color:var(--yu-ink-3);font-weight:600;margin-right:4px;
}
.yu-article__tags ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.yu-article__tags li a{
  display:inline-block;padding:4px 12px;border-radius:999px;
  background:var(--yu-bg-2);color:var(--yu-ink-2);
  font-size:13px;font-weight:500;
  border:1px solid var(--yu-line);
}
.yu-article__tags li a:hover{
  background:var(--yu-brand-soft);color:var(--yu-brand);
  border-color:var(--yu-brand);
}

/* Attachments */
.yu-article__attachments{
  margin:32px 0;padding:20px;
  background:var(--yu-bg-2);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
}
.yu-article__attachments h2{
  font-size:15px;margin:0 0 12px;color:var(--yu-ink);
}
.yu-article__attachments ul{list-style:none;padding:0;margin:0}
.yu-article__attachments li{margin:6px 0}
.yu-article__attachments a{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:#fff;
  border:1px solid var(--yu-line);border-radius:8px;
  font-size:14px;color:var(--yu-ink);
}
.yu-article__attachments a:hover{border-color:var(--yu-brand)}
.yu-attachment__meta{font-size:12px;color:var(--yu-ink-3)}

/* Article footer */
.yu-article__footer{margin-top:48px}

.yu-votes{
  background:var(--yu-bg-2);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:28px;text-align:center;
  margin-bottom:24px;
}
.yu-votes__question{
  font-size:17px;font-weight:600;margin:0 0 18px;color:var(--yu-ink);
}
.yu-votes__controls{display:inline-flex;gap:10px}
.yu-vote{
  padding:10px 22px;border-radius:8px;
  border:1px solid var(--yu-line);background:#fff;
  cursor:pointer;font-size:14px;font-weight:500;
  color:var(--yu-ink-2);transition:all .15s;
}
.yu-vote:hover{
  border-color:var(--yu-brand);color:var(--yu-brand);
  transform:translateY(-1px);
}
.yu-vote.is-selected{
  background:var(--yu-brand);
  border-color:var(--yu-brand);color:#fff;
}
.yu-votes__count{
  display:block;margin-top:12px;
  font-size:13px;color:var(--yu-ink-3);
}

.yu-article__actions{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;gap:16px;flex-wrap:wrap;
}
.yu-article__totop{
  font-size:14px;color:var(--yu-ink-3);font-weight:500;
}
.yu-article__totop:hover{color:var(--yu-brand)}

.yu-article__callout{margin:24px 0}

/* Related articles */
.yu-article__related{
  margin:48px 0;padding-top:32px;
  border-top:1px solid var(--yu-line-soft);
}
.yu-article__related h2,
.yu-article__related h3{
  font-size:18px;margin:0 0 16px;color:var(--yu-ink);
}
.yu-article__related ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;
}
.yu-article__related li a{
  display:block;padding:14px 18px;
  background:#fff;border:1px solid var(--yu-line);
  border-radius:10px;font-size:14px;color:var(--yu-ink);
}
.yu-article__related li a:hover{
  border-color:var(--yu-brand);background:var(--yu-brand-soft);
}

/* Comments */
.yu-comments{margin-top:64px;padding-top:32px;border-top:2px solid var(--yu-line-soft)}
.yu-comments__head{margin-bottom:24px}
.yu-comments__head h2{font-size:20px;margin:0 0 4px;color:var(--yu-ink)}
.yu-comments__head p{font-size:14px;color:var(--yu-ink-3);margin:0}
.yu-comments__list{list-style:none;padding:0;margin:0}
.yu-comment{
  display:flex;gap:14px;padding:20px 0;
  border-bottom:1px solid var(--yu-line-soft);
}
.yu-comment__avatar img{width:40px;height:40px;border-radius:50%}
.yu-comment__body{flex:1;min-width:0}
.yu-comment__head{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px;
}
.yu-comment__head strong{font-size:14px;color:var(--yu-ink);font-weight:600}
.yu-comment__date{font-size:12px;color:var(--yu-ink-3)}
.yu-comment__content{font-size:14px;color:var(--yu-ink-2);line-height:1.6}
.yu-comments__empty{
  text-align:center;padding:32px;color:var(--yu-ink-3);
  background:var(--yu-bg-2);border-radius:var(--yu-radius);
}
.yu-comment-form{
  margin-top:32px;padding:24px;
  background:var(--yu-bg-2);
  border-radius:var(--yu-radius);
}
.yu-comment-form h3{
  font-size:15px;margin:0 0 14px;color:var(--yu-ink);
}
.yu-comment-form__actions{margin-top:14px;display:flex;justify-content:flex-end}
.yu-comment-form .yu-btn{
  display:inline-block;background:var(--yu-ink);color:#fff;
  padding:10px 20px;border-radius:8px;border:none;cursor:pointer;
  font-size:14px;font-weight:600;
}
.yu-comment-form .yu-btn:hover{background:var(--yu-brand)}

/* Responsive */
@media (max-width:900px){
  .yu-article-layout{grid-template-columns:1fr;gap:24px}
  .yu-article-sidebar{
    position:static;max-height:none;
    background:var(--yu-bg-2);
    border-radius:var(--yu-radius);
    padding:16px;
  }
}
/* Fix: ocultar el botón "x" residual del search debajo del input */
.search button[type="reset"],
form[role="search"] > button:last-child,
.search [aria-label*="lear"]{display:none !important}

/* Fix: header — forzar visibilidad del logo */
.yu-header__logo{display:inline-flex !important;align-items:center;min-width:40px}
.yu-header__logo img{height:32px !important;width:auto !important;display:block}
/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.yu-pagehead--search h1{font-size:clamp(22px,2.5vw,28px)}
.yu-search__count{
  font-size:14px;color:var(--yu-ink-3);margin-top:16px;
}

.yu-search-layout{max-width:840px}

.yu-search__list{
  display:flex;flex-direction:column;gap:16px;
}
.yu-search-result{
  background:#fff;
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:22px 26px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.yu-search-result:hover{
  border-color:var(--yu-brand);
  box-shadow:var(--yu-shadow);
  transform:translateY(-1px);
}
.yu-search-result__meta{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12px;color:var(--yu-ink-3);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  margin-bottom:8px;
}
.yu-search-result__meta a{color:var(--yu-ink-3)}
.yu-search-result__meta a:hover{color:var(--yu-brand)}
.yu-search-result__title{
  font-size:18px;margin:0 0 8px;
}
.yu-search-result__title a{color:var(--yu-ink);font-weight:600}
.yu-search-result__title a:hover{color:var(--yu-brand)}
.yu-search-result__body{
  font-size:14px;color:var(--yu-ink-2);
  margin:0 0 14px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yu-search-result__footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;
  border-top:1px solid var(--yu-line-soft);
  font-size:13px;
}
.yu-search-result__cta{color:var(--yu-brand);font-weight:600}
.yu-search-result__votes{color:var(--yu-ink-3)}
.yu-search-result em{
  background:var(--yu-brand-soft);
  color:var(--yu-brand-dark);
  font-style:normal;font-weight:600;
  padding:1px 4px;border-radius:3px;
}

.yu-search__empty{
  text-align:center;
  padding:60px 20px;
  background:var(--yu-bg-2);
  border-radius:var(--yu-radius-lg);
}
.yu-search__empty-icon{font-size:48px;margin-bottom:16px;opacity:.6}
.yu-search__empty h2{font-size:22px;margin:0 0 8px;color:var(--yu-ink)}
.yu-search__empty p{color:var(--yu-ink-3);margin:0 0 24px}
.yu-search__empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.yu-btn{
  display:inline-block;background:var(--yu-brand);color:#fff !important;
  padding:11px 22px;border-radius:8px;font-weight:600;font-size:14px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .15s,transform .15s;
}
.yu-btn:hover{background:var(--yu-brand-dark);color:#fff !important;transform:translateY(-1px)}
.yu-btn--secondary{
  background:#fff;color:var(--yu-ink) !important;border:1px solid var(--yu-line);
}
.yu-btn--secondary:hover{
  background:var(--yu-bg-2);color:var(--yu-ink) !important;border-color:var(--yu-ink);
}
.yu-search-result__type{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--yu-bg-2);
  color:var(--yu-ink-3);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-left:8px;
}
/* ============================================================
   ARTICLE LAYOUT — 3 columnas (sidebar + article + TOC)
   ============================================================ */

.yu-article-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 220px;
  gap:40px;
  padding:24px 0 80px;
  align-items:start;
}

/* Si la sidebar de sección está oculta (setting), expandir */
.yu-article-layout:not(:has(.yu-article-sidebar)){
  grid-template-columns:minmax(0,1fr) 220px;
}

/* TOC */
.yu-article-toc{
  position:sticky;top:90px;
  align-self:start;
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  padding:4px;
}
.yu-article-toc__title{
  display:block;
  font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--yu-ink-3);
  font-weight:600;margin-bottom:12px;padding:0 12px;
}
.yu-article-toc__list{list-style:none;padding:0;margin:0;border-left:2px solid var(--yu-line-soft)}
.yu-article-toc__list li{margin:0}
.yu-article-toc__list a{
  display:block;
  padding:6px 14px;
  font-size:13px;line-height:1.4;
  color:var(--yu-ink-3);
  border-left:2px solid transparent;
  margin-left:-2px;
  transition:color .15s,border-color .15s;
}
.yu-article-toc__list a:hover{color:var(--yu-ink)}
.yu-article-toc__list a.is-active{
  color:var(--yu-brand);
  font-weight:600;
  border-left-color:var(--yu-brand);
}
.yu-article-toc__list a.is-h3{padding-left:26px;font-size:12.5px}

/* Cuando el TOC está vacío (artículo sin H2), ocultarlo */
.yu-article-toc:empty,
.yu-article-toc__inner:not(:has(li)){display:none}

/* Anchor offset para que el header sticky no tape los headings */
.article-body h2,
.article-body h3{scroll-margin-top:90px}

/* Heading hover — botón copiar enlace */
.article-body h2,
.article-body h3{position:relative}
.article-body h2 .yu-heading-anchor,
.article-body h3 .yu-heading-anchor{
  position:absolute;left:-28px;top:50%;transform:translateY(-50%);
  opacity:0;text-decoration:none;color:var(--yu-ink-3);
  font-size:18px;transition:opacity .15s,color .15s;
}
.article-body h2:hover .yu-heading-anchor,
.article-body h3:hover .yu-heading-anchor{opacity:1}
.yu-heading-anchor:hover{color:var(--yu-brand) !important}
.yu-heading-anchor.is-copied::after{
  content:" ✓ copiado";
  font-size:12px;color:var(--yu-brand);font-weight:600;
}

/* Responsive */
@media (max-width:1100px){
  .yu-article-layout{
    grid-template-columns:240px minmax(0,1fr);
  }
  .yu-article-toc{
    grid-column:1 / -1;
    position:static;max-height:none;
    background:var(--yu-bg-2);
    border-radius:var(--yu-radius);
    padding:16px 20px;margin-bottom:24px;
    order:-1; /* TOC arriba en tablet */
  }
  .yu-article-toc__list{border-left:none}
  .yu-article-toc__list a{border-left:none;padding-left:0}
  .yu-article-toc__list a.is-h3{padding-left:14px}
}
@media (max-width:900px){
  .yu-article-layout{grid-template-columns:1fr;gap:20px}
  .yu-article-sidebar{
    position:static;max-height:none;
    background:var(--yu-bg-2);border-radius:var(--yu-radius);padding:16px;
  }
}
/* Categorías en layout 2+3 en desktop */
@media (min-width: 1024px) {
  .yu-cat-grid > .yu-cat-card:nth-child(1),
  .yu-cat-grid > .yu-cat-card:nth-child(2) {
    grid-column: span 3;
  }
  .yu-cat-grid > .yu-cat-card:nth-child(3),
  .yu-cat-grid > .yu-cat-card:nth-child(4),
  .yu-cat-grid > .yu-cat-card:nth-child(5) {
    grid-column: span 2;
  }
}
/* ============================================================
   DROPDOWN MENUS sobre fondo oscuro (header y footer)
   ============================================================ */
header .dropdown-menu,
footer .dropdown-menu {
  background: #191c1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
header .dropdown-menu a,
header .dropdown-menu button,
header .dropdown-menu [role="menuitem"],
footer .dropdown-menu a,
footer .dropdown-menu button,
footer .dropdown-menu [role="menuitem"] {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}
header .dropdown-menu a:hover,
header .dropdown-menu button:hover,
header .dropdown-menu [role="menuitem"]:hover,
footer .dropdown-menu a:hover,
footer .dropdown-menu button:hover,
footer .dropdown-menu [role="menuitem"]:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
header .dropdown-menu .separator,
footer .dropdown-menu .separator,
header .dropdown-menu .h-px,
footer .dropdown-menu .h-px {
  background: rgba(255, 255, 255, 0.1) !important;
}
/* ============================================================
   YUREST HELP CENTER — Design System
   Built on Copenhagen 4.41 · v1.0
   ============================================================ */

:root{
  --yu-brand:#ff5a5f;
  --yu-brand-dark:#e8484d;
  --yu-brand-soft:#fff1f2;
  --yu-ink:#0f172a;
  --yu-ink-2:#334155;
  --yu-ink-3:#64748b;
  --yu-line:#e2e8f0;
  --yu-line-soft:#f1f5f9;
  --yu-bg:#ffffff;
  --yu-bg-2:#f8fafc;
  --yu-radius:12px;
  --yu-radius-lg:20px;
  --yu-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --yu-shadow:0 1px 3px rgba(15,23,42,.06),0 4px 20px rgba(15,23,42,.04);
  --yu-shadow-lg:0 4px 12px rgba(15,23,42,.08),0 20px 40px rgba(15,23,42,.06);
  --yu-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --yu-font-mono:"SF Mono",Menlo,Consolas,monospace;
}

/* RESET / BASE ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--yu-font);
  color:var(--yu-ink);
  background:var(--yu-bg);
  line-height:1.6;
  font-size:16px;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--yu-ink);text-decoration:none;transition:color .15s}
a:hover{color:var(--yu-brand)}
h1,h2,h3,h4{color:var(--yu-ink);letter-spacing:-.01em;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(28px,3.5vw,40px);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(22px,2.5vw,28px);font-weight:700}
h3{font-size:18px;font-weight:600}
p{margin:0 0 1em}
code{font-family:var(--yu-font-mono);font-size:.92em;background:var(--yu-bg-2);padding:2px 6px;border-radius:4px;color:var(--yu-ink)}

/* LAYOUT ------------------------------------------------------ */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-divider{display:none}

/* HEADER ------------------------------------------------------ */
.header{
  background:var(--yu-bg);
  border-bottom:1px solid var(--yu-line);
  padding:18px 0;
}
.header .nav-wrap,.header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.header .logo img{max-height:32px;display:block}
.user-nav a{font-size:14px;font-weight:500;color:var(--yu-ink-2);padding:8px 14px;border-radius:8px}
.user-nav a:hover{background:var(--yu-bg-2);color:var(--yu-ink)}

/* HERO -------------------------------------------------------- */
.hero{
  background:linear-gradient(180deg,var(--yu-brand-soft) 0%,var(--yu-bg) 100%);
  padding:72px 0 56px;
  text-align:center;
  border-bottom:1px solid var(--yu-line-soft);
}
.hero h1{margin:0 0 12px;color:var(--yu-ink)}
.hero p.hero-sub{color:var(--yu-ink-3);font-size:18px;margin:0 0 36px;max-width:560px;margin-left:auto;margin-right:auto}
.hero .search{max-width:640px;margin:0 auto}
.hero .search input[type="search"]{
  width:100%;
  padding:18px 24px 18px 56px;
  border:1px solid var(--yu-line);
  border-radius:999px;
  font-size:16px;
  background:var(--yu-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3' stroke-linecap='round'/></svg>") 22px center/20px no-repeat;
  box-shadow:var(--yu-shadow);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.hero .search input[type="search"]:focus{border-color:var(--yu-brand);box-shadow:0 0 0 4px var(--yu-brand-soft)}

/* BREADCRUMBS & SUBNAV --------------------------------------- */
.sub-nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:24px}
.sub-nav .breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:14px;color:var(--yu-ink-3)}
.sub-nav .breadcrumbs li a{color:var(--yu-ink-3)}
.sub-nav .breadcrumbs li::after{content:"/";margin-left:8px;color:var(--yu-line)}
.sub-nav .breadcrumbs li:last-child::after{content:""}
.sub-nav .search-container{max-width:320px;flex:1;position:relative}
.sub-nav .search-container input[type="search"]{
  width:100%;padding:10px 14px 10px 38px;
  border:1px solid var(--yu-line);border-radius:8px;
  font-size:14px;background:var(--yu-bg);
}
.sub-nav .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--yu-ink-3)}

/* CARDS ------------------------------------------------------- */
.yu-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin:32px 0;
}
.yu-card{
  display:block;
  background:var(--yu-bg);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.yu-card:hover{transform:translateY(-2px);box-shadow:var(--yu-shadow);border-color:transparent}
.yu-card__icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--yu-brand-soft);color:var(--yu-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:16px;
}
.yu-card__title{font-size:17px;font-weight:600;margin:0 0 6px;color:var(--yu-ink)}
.yu-card__desc{font-size:14px;color:var(--yu-ink-3);margin:0}
.yu-card__count{font-size:12px;color:var(--yu-ink-3);font-weight:500;margin-top:12px;display:block}

/* SECTION HEADERS -------------------------------------------- */
.yu-section{padding:56px 0}
.yu-section--alt{background:var(--yu-bg-2)}
.yu-section__head{margin-bottom:32px;text-align:center}
.yu-section__head h2{margin:0 0 8px}
.yu-section__head p{color:var(--yu-ink-3);margin:0}

/* POPULAR ARTICLES LIST -------------------------------------- */
.yu-articles-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.yu-articles-list a{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:var(--yu-bg);
  border:1px solid var(--yu-line);
  border-radius:10px;
  font-size:15px;
  transition:all .15s;
}
.yu-articles-list a:hover{border-color:var(--yu-brand);background:var(--yu-brand-soft)}
.yu-articles-list a::before{content:"📄";font-size:18px;flex-shrink:0}

/* CTA BLOCK --------------------------------------------------- */
.yu-cta{
  background:var(--yu-ink);
  color:#fff;
  border-radius:var(--yu-radius-lg);
  padding:48px;
  text-align:center;
  margin:40px 0;
}
.yu-cta h2{color:#fff;margin:0 0 12px}
.yu-cta p{color:#cbd5e1;margin:0 0 24px}
.yu-cta .yu-btn{background:var(--yu-brand);color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;display:inline-block}
.yu-cta .yu-btn:hover{background:var(--yu-brand-dark);color:#fff}

/* ARTICLE PAGE ----------------------------------------------- */
.article-container{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:24px 0 80px}
.article-sidebar{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto}
.sidenav-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--yu-ink-3);font-weight:600;display:block;margin-bottom:12px}
.article-sidebar ul{list-style:none;padding:0;margin:0}
.article-sidebar li{margin:2px 0}
.sidenav-item{
  display:block;padding:8px 12px;border-radius:6px;
  font-size:14px;color:var(--yu-ink-2);line-height:1.4;
}
.sidenav-item:hover{background:var(--yu-bg-2);color:var(--yu-ink)}
.sidenav-item.current-article{background:var(--yu-brand-soft);color:var(--yu-brand);font-weight:600}

.article{max-width:780px}
.article-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--yu-line-soft)}
.article-title{margin:0 0 16px}
.article-author{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--yu-ink-3)}
.article-avatar img{width:32px;height:32px;border-radius:50%}
.meta-data{color:var(--yu-ink-3)}

/* article body typography */
.article-body{font-size:16px;line-height:1.75;color:var(--yu-ink-2)}
.article-body h2{margin-top:48px}
.article-body h3{margin-top:32px}
.article-body img{max-width:100%;border-radius:var(--yu-radius);border:1px solid var(--yu-line)}
.article-body ul,.article-body ol{padding-left:24px}
.article-body li{margin:6px 0}
.article-body blockquote{
  border-left:4px solid var(--yu-brand);
  background:var(--yu-brand-soft);
  padding:12px 20px;margin:20px 0;
  border-radius:0 8px 8px 0;
}

/* ARTICLE BODY COMPONENTS (yu-*) ---------------------------- */
.article-body .yu-meta{display:flex;gap:16px;flex-wrap:wrap;padding:14px 18px;background:var(--yu-bg-2);border:1px solid var(--yu-line);border-radius:10px;font-size:14px;color:var(--yu-ink-3);margin:0 0 28px}
.article-body .yu-meta span{display:inline-flex;align-items:center;gap:6px}

.article-body .yu-toc{background:var(--yu-bg);border:1px solid var(--yu-line);border-left:4px solid var(--yu-brand);border-radius:10px;padding:18px 22px;margin:0 0 36px}
.article-body .yu-toc h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--yu-ink-3)}
.article-body .yu-toc ol{margin:0;padding-left:22px}
.article-body .yu-toc a{color:var(--yu-ink);font-weight:500}
.article-body .yu-toc a:hover{color:var(--yu-brand)}

.article-body .yu-etapa{margin:48px 0 32px;padding-top:24px;border-top:2px solid var(--yu-line-soft)}
.article-body .yu-chip{display:inline-block;background:var(--yu-brand);color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.article-body .yu-chip.is-muted{background:var(--yu-ink-3)}

.article-body .yu-step{display:grid;grid-template-columns:44px 1fr;gap:16px;margin:22px 0}
.article-body .yu-step-num{width:36px;height:36px;border-radius:50%;background:var(--yu-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.article-body .yu-step-body p{margin:0 0 10px}

.article-body .yu-fig{margin:18px 0;text-align:center}
.article-body .yu-fig img{max-width:100%;border-radius:var(--yu-radius);border:1px solid var(--yu-line);box-shadow:var(--yu-shadow-sm)}
.article-body .yu-fig figcaption{font-size:13px;color:var(--yu-ink-3);font-style:italic;margin-top:8px}

.article-body .yu-callout{display:flex;gap:14px;padding:14px 18px;border-radius:10px;margin:18px 0;border:1px solid}
.article-body .yu-callout__icon{font-size:20px;line-height:1.2;flex-shrink:0}
.article-body .yu-callout__body{flex:1;font-size:15px}
.article-body .yu-callout__body strong{display:block;margin-bottom:2px}
.article-body .yu-callout.is-warning{background:#fffbeb;border-color:#fde68a;color:#78350f}
.article-body .yu-callout.is-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.article-body .yu-callout.is-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.article-body .yu-callout.is-danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}

.article-body .yu-creds{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:16px 18px;font-family:var(--yu-font-mono);font-size:14px;margin:14px 0}
.article-body .yu-creds div{display:flex;justify-content:space-between;padding:4px 0}
.article-body .yu-creds span:first-child{color:#94a3b8}
.article-body .yu-creds span:last-child{color:#fff;font-weight:600;user-select:all}

.article-body .yu-next{display:flex;justify-content:flex-end;margin-top:28px}
.article-body .yu-next a{display:inline-flex;align-items:center;gap:8px;background:var(--yu-ink);color:#fff;padding:10px 18px;border-radius:8px;font-weight:500;font-size:14px}
.article-body .yu-next a:hover{background:var(--yu-brand);color:#fff}

.article-body .yu-faq{background:var(--yu-bg-2);border:1px solid var(--yu-line);border-radius:10px;padding:14px 18px;margin:10px 0}
.article-body .yu-faq summary{cursor:pointer;font-weight:600;color:var(--yu-ink);list-style:none}
.article-body .yu-faq summary::-webkit-details-marker{display:none}
.article-body .yu-faq summary::before{content:"▸ ";color:var(--yu-brand);font-weight:bold}
.article-body .yu-faq[open] summary::before{content:"▾ "}
.article-body .yu-faq[open] summary{margin-bottom:10px}

/* ARTICLE FOOTER --------------------------------------------- */
.article-votes{
  background:var(--yu-bg-2);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:24px;text-align:center;margin:48px 0 24px;
}
.article-votes-question{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--yu-ink)}
.article-vote{padding:8px 20px;border-radius:8px;border:1px solid var(--yu-line);background:var(--yu-bg);cursor:pointer;font-size:14px;font-weight:500;margin:0 4px}
.article-vote:hover{border-color:var(--yu-brand);color:var(--yu-brand)}
.article-vote.button-primary{background:var(--yu-brand);border-color:var(--yu-brand);color:#fff}

/* FOOTER ------------------------------------------------------ */
.footer{background:var(--yu-ink);color:#cbd5e1;padding:48px 0 32px;margin-top:80px}
.footer a{color:#cbd5e1;font-size:14px}
.footer a:hover{color:#fff}
.footer h4{color:#fff;font-size:14px;font-weight:600;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em}
.footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding-bottom:32px;border-bottom:1px solid #334155}
.footer .footer-bottom{padding-top:24px;font-size:13px;color:#94a3b8;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

/* RESPONSIVE -------------------------------------------------- */
@media (max-width:900px){
  .article-container{grid-template-columns:1fr;gap:24px}
  .article-sidebar{position:static;max-height:none}
  .hero{padding:48px 0 40px}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .sub-nav{flex-direction:column;align-items:stretch}
  .article-body .yu-step{grid-template-columns:36px 1fr;gap:12px}
}
/* ============================================================
   HEADER (yu-header) — overrides y nuevo diseño
   ============================================================ */

.skip-navigation{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-navigation:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;padding:8px 16px;z-index:9999;border-radius:6px}

.yu-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--yu-line);
}
.yu-header__inner{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px;
}
.yu-header__logo{flex-shrink:0;display:flex;align-items:center}
.yu-header__logo img{max-height:32px;display:block;width:auto}

.yu-header__nav{flex:1}
.yu-header__nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.yu-header__nav a{
  display:inline-block;padding:8px 14px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--yu-ink-2);
}
.yu-header__nav a:hover{background:var(--yu-bg-2);color:var(--yu-ink)}

.yu-header__actions{display:flex;align-items:center;gap:10px}

/* Ask AI pill */
.yu-ask-ai{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--yu-brand) 0%,#ff8a5f 100%);
  color:#fff !important;font-size:13px;font-weight:600;
  box-shadow:0 2px 8px rgba(255,90,95,.25);
  transition:transform .15s,box-shadow .15s;
}
.yu-ask-ai:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,90,95,.35);color:#fff !important}
.yu-ask-ai svg{flex-shrink:0}

/* Sign-in link */
.yu-header__signin{
  padding:8px 16px;border-radius:8px;
  background:var(--yu-ink);color:#fff !important;
  font-size:14px;font-weight:500;
}
.yu-header__signin:hover{background:var(--yu-brand);color:#fff !important}

/* User dropdown */
.yu-user{position:relative}
.yu-user__btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--yu-line);
  padding:4px 10px 4px 4px;border-radius:999px;cursor:pointer;
}
.yu-user__btn:hover{border-color:var(--yu-brand)}
.yu-user__avatar{width:28px;height:28px;border-radius:50%}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;background:#fff;
  border:1px solid var(--yu-line);border-radius:10px;
  box-shadow:var(--yu-shadow-lg);
  padding:6px;display:none;z-index:60;
}
.dropdown-menu.is-open,.dropdown.is-open .dropdown-menu{display:block}
.dropdown-menu a,.dropdown-menu button{
  display:block;width:100%;text-align:left;
  padding:8px 12px;border-radius:6px;
  font-size:14px;color:var(--yu-ink-2);
  background:none;border:none;cursor:pointer;
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--yu-bg-2);color:var(--yu-ink)}
.dropdown-menu .separator{height:1px;background:var(--yu-line);margin:6px 0}
.dropdown-chevron-icon{transition:transform .2s}
.dropdown[aria-expanded="true"] .dropdown-chevron-icon,
.dropdown.is-open .dropdown-chevron-icon{transform:rotate(180deg)}

/* Mobile toggle */
.yu-header__mobile-toggle{
  display:none;background:none;border:none;
  padding:8px;border-radius:8px;cursor:pointer;color:var(--yu-ink);
}
.yu-header__mobile-toggle:hover{background:var(--yu-bg-2)}

/* Mobile nav */
.yu-mobile-nav{
  display:none;
  background:#fff;border-top:1px solid var(--yu-line);
  padding:16px 24px;
}
.yu-mobile-nav[aria-expanded="true"]{display:block}
.yu-mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.yu-mobile-nav a{
  display:block;padding:12px 14px;border-radius:8px;
  font-size:15px;color:var(--yu-ink-2);
}
.yu-mobile-nav a:hover{background:var(--yu-bg-2);color:var(--yu-ink)}
.yu-mobile-nav__divider{height:1px;background:var(--yu-line);margin:8px 0}
.yu-mobile-nav__user{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;font-weight:600;
}
.yu-mobile-nav__avatar{width:32px;height:32px;border-radius:50%}
.yu-ask-ai--mobile{margin:8px 0}

@media (max-width:768px){
  .yu-header__nav,.yu-header__actions .yu-ask-ai,
  .yu-header__signin,.yu-user{display:none}
  .yu-header__mobile-toggle{display:flex}
  .yu-header__actions{margin-left:auto}
}

/* ============================================================
   FOOTER (yu-footer)
   ============================================================ */

.yu-footer{
  background:var(--yu-ink);color:#cbd5e1;
  padding:56px 0 24px;margin-top:96px;
}
.yu-footer__inner{max-width:1200px;margin:0 auto;padding:0 24px}
.yu-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:40px;
  border-bottom:1px solid #1e293b;
}
.yu-footer__brand p{color:#94a3b8;font-size:14px;line-height:1.6;max-width:280px}
.yu-footer__logo{max-height:32px;margin-bottom:16px;display:block;filter:brightness(0) invert(1)}
.yu-footer h4{
  color:#fff;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 16px;
}
.yu-footer ul{list-style:none;padding:0;margin:0}
.yu-footer ul li{margin:8px 0}
.yu-footer a{color:#cbd5e1;font-size:14px;transition:color .15s}
.yu-footer a:hover{color:#fff}

.yu-footer__lang .dropdown-toggle{
  background:#1e293b;color:#cbd5e1;border:1px solid #334155;
  padding:8px 14px;border-radius:8px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;cursor:pointer;
}
.yu-footer__lang .dropdown-toggle:hover{background:#334155;color:#fff}
.yu-footer__lang .dropdown-menu{background:#1e293b;border-color:#334155}
.yu-footer__lang .dropdown-menu a{color:#cbd5e1}
.yu-footer__lang .dropdown-menu a:hover{background:#334155;color:#fff}

.yu-footer__bottom{padding-top:24px;font-size:13px;color:#64748b;text-align:center}
.yu-footer__bottom p{margin:0}

@media (max-width:768px){
  .yu-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:480px){
  .yu-footer__grid{grid-template-columns:1fr}
}

/* ============================================================
   Cleanup: hide old Copenhagen classes we replaced
   ============================================================ */
.header{display:none !important}  /* old header.hbs el header viejo, por si queda algún rastro */
.footer{display:none !important}  /* old footer */
.nav-wrapper-desktop,.nav-wrapper-mobile{display:none !important}
.menu-list-mobile{display:none !important}
.user-nav-list{display:none !important}
/* Search del hero — esconder el botón "x" feo */
.hero .search button[type="reset"],
.hero .search .clear-button,
.hero form[role="search"] button:not([type="submit"]){
  display:none !important;
}

/* Cards: que se centren cuando hay un número impar */
.yu-card-grid{justify-content:center}
.yu-card{max-width:380px}

/* CTA: ajustar margen inferior para no chocar con chat widget */
.yu-section:last-of-type{padding-bottom:32px}

/* Logo del header: asegurar tamaño visible */
.yu-header__logo img{height:32px !important;width:auto !important;max-height:none}

/* Mejora del card icon: ya no es solo emoji, queda más sólido */
.yu-card__icon{
  background:linear-gradient(135deg,var(--yu-brand-soft) 0%,#ffe4e6 100%);
  font-size:24px;
}
/* ============================================================
   BREADCRUMBS (yu-breadcrumbs)
   ============================================================ */
.yu-breadcrumbs{
  padding:20px 0 0;
}
.yu-breadcrumbs ol,
.yu-breadcrumbs ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:13px;color:var(--yu-ink-3);
}
.yu-breadcrumbs li{display:flex;align-items:center;gap:8px}
.yu-breadcrumbs li::after{content:"/";color:var(--yu-line);margin-left:8px}
.yu-breadcrumbs li:last-child::after{display:none}
.yu-breadcrumbs a{color:var(--yu-ink-3);font-weight:500}
.yu-breadcrumbs a:hover{color:var(--yu-brand)}
.yu-breadcrumbs li:last-child{color:var(--yu-ink);font-weight:500}

/* ============================================================
   PAGE HEAD (yu-pagehead) — usado en category & section pages
   ============================================================ */
.yu-pagehead{
  background:linear-gradient(180deg,var(--yu-brand-soft) 0%,var(--yu-bg) 100%);
  padding:32px 0 48px;
  border-bottom:1px solid var(--yu-line-soft);
  text-align:center;
}
.yu-pagehead .yu-chip{
  background:#fff;color:var(--yu-brand);
  border:1px solid var(--yu-brand);
  margin-bottom:14px;
}
.yu-pagehead h1{margin:0 0 12px;color:var(--yu-ink)}
.yu-pagehead__desc{
  color:var(--yu-ink-3);font-size:17px;
  max-width:600px;margin:0 auto 28px;
}
.yu-pagehead__search{max-width:520px;margin:0 auto}
.yu-pagehead__search input[type="search"]{
  width:100%;padding:14px 20px 14px 48px;
  border:1px solid var(--yu-line);border-radius:999px;
  font-size:15px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3' stroke-linecap='round'/></svg>") 18px center/18px no-repeat;
  box-shadow:var(--yu-shadow-sm);outline:none;
}
.yu-pagehead__search input[type="search"]:focus{
  border-color:var(--yu-brand);
  box-shadow:0 0 0 4px var(--yu-brand-soft);
}

/* ============================================================
   SECTION CARDS (category page)
   ============================================================ */
.yu-section-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.yu-section-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.yu-section-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--yu-shadow);
  border-color:transparent;
}
.yu-section-card__head{
  display:flex;gap:14px;align-items:flex-start;
  margin-bottom:16px;
}
.yu-section-card__icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:var(--yu-brand-soft);color:var(--yu-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.yu-section-card__title{
  font-size:17px;font-weight:600;
  margin:0 0 4px;color:var(--yu-ink);
}
.yu-section-card__desc{
  font-size:14px;color:var(--yu-ink-3);margin:0;
}
.yu-section-card__list{
  list-style:none;padding:0;margin:0 0 12px;
  border-top:1px solid var(--yu-line-soft);
  padding-top:14px;
}
.yu-section-card__list li{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;font-size:14px;color:var(--yu-ink-2);
}
.yu-section-card__list li span{font-size:13px;opacity:.6}
.yu-section-card__more{
  font-size:13px;font-weight:600;
  color:var(--yu-brand);
  margin-top:auto;
}

/* ============================================================
   ARTICLE CARDS (section page)
   ============================================================ */
.yu-article-grid{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
}
.yu-article-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:22px;height:100%;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.yu-article-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--yu-shadow);
  border-color:var(--yu-brand);
}
.yu-article-card__badge{
  display:inline-block;
  background:var(--yu-brand-soft);color:var(--yu-brand);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;
  margin-bottom:10px;align-self:flex-start;
}
.yu-article-card__title{
  font-size:16px;font-weight:600;
  margin:0 0 12px;color:var(--yu-ink);line-height:1.4;
}
.yu-article-card__meta{
  display:flex;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--yu-ink-3);
  margin-bottom:14px;
}
.yu-article-card__more{
  font-size:13px;font-weight:600;
  color:var(--yu-brand);
  margin-top:auto;
}
.yu-tag{
  font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--yu-bg-2);color:var(--yu-ink-2);
  font-weight:500;
}
.yu-tag--internal{background:#fef3c7;color:#92400e}

/* ============================================================
   CTA — variante suave
   ============================================================ */
.yu-cta--soft{
  background:var(--yu-brand-soft);
  color:var(--yu-ink);
  border:1px solid var(--yu-brand);
  border-radius:var(--yu-radius-lg);
  padding:40px;text-align:center;
}
.yu-cta--soft h2{color:var(--yu-ink);margin:0 0 10px}
.yu-cta--soft p{color:var(--yu-ink-2);margin:0 0 20px}
.yu-cta--soft .yu-btn{
  background:var(--yu-brand);color:#fff;
  padding:11px 22px;border-radius:8px;
  font-weight:600;display:inline-block;
}
.yu-cta--soft .yu-btn:hover{background:var(--yu-brand-dark);color:#fff}

/* ============================================================
   EMPTY STATE & PAGINATION
   ============================================================ */
.yu-empty{
  text-align:center;padding:60px 20px;
  color:var(--yu-ink-3);
  background:var(--yu-bg-2);
  border-radius:var(--yu-radius);
}
.yu-pagination{
  margin-top:32px;display:flex;justify-content:center;
}
.yu-pagination a,.yu-pagination span{
  display:inline-block;padding:8px 14px;margin:0 2px;
  border-radius:8px;font-size:14px;color:var(--yu-ink-2);
  border:1px solid var(--yu-line);background:#fff;
}
.yu-pagination a:hover{border-color:var(--yu-brand);color:var(--yu-brand)}
.yu-pagination .is-current,.yu-pagination .current{
  background:var(--yu-ink);color:#fff;border-color:var(--yu-ink);
}
/* ============================================================
   ARTICLE LAYOUT
   ============================================================ */

.yu-article-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:48px;
  padding:24px 0 80px;
  align-items:start;
}

/* Sidebar */
.yu-article-sidebar{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto}
.yu-article-sidebar__inner{padding:4px}
.yu-article-sidebar__title{
  font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--yu-ink-3);
  font-weight:600;display:block;margin-bottom:12px;padding:0 12px;
}
.yu-article-sidebar__list{list-style:none;padding:0;margin:0}
.yu-article-sidebar__list li{margin:2px 0}
.yu-article-sidebar__item{
  display:block;padding:10px 12px;
  border-radius:8px;
  font-size:14px;color:var(--yu-ink-2);
  line-height:1.4;
  border-left:2px solid transparent;
}
.yu-article-sidebar__item:hover{
  background:var(--yu-bg-2);color:var(--yu-ink);
}
.yu-article-sidebar__item.is-current{
  background:var(--yu-brand-soft);
  color:var(--yu-brand);
  font-weight:600;
  border-left-color:var(--yu-brand);
}
.yu-article-sidebar__more{
  display:inline-block;
  margin:14px 12px;
  font-size:13px;
  color:var(--yu-brand);
  font-weight:500;
}

/* Article column */
.yu-article{max-width:780px;width:100%}

.yu-article__header{
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--yu-line-soft);
}
.yu-article__title{
  margin:0 0 20px;
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-.02em;line-height:1.2;
}
.yu-article__lock{font-size:.6em;margin-left:8px}

.yu-article__meta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.yu-article__author{display:flex;gap:12px;align-items:center}
.yu-article__avatar{
  width:40px;height:40px;border-radius:50%;
  border:2px solid var(--yu-line);
}
.yu-article__author-name{
  font-size:14px;font-weight:600;color:var(--yu-ink);
}
.yu-article__author-name a{color:var(--yu-ink)}
.yu-article__author-name a:hover{color:var(--yu-brand)}
.yu-article__meta-line{font-size:13px;color:var(--yu-ink-3)}

.yu-article__subscribe{margin-left:auto}

/* Body typography — IMPORTANT, overrides para mejor lectura */
.article-body{
  font-size:16px;line-height:1.75;color:var(--yu-ink-2);
}
.article-body h2{
  font-size:24px;margin-top:48px;margin-bottom:16px;
  color:var(--yu-ink);
}
.article-body h3{
  font-size:19px;margin-top:32px;margin-bottom:12px;
  color:var(--yu-ink);
}
.article-body p{margin:0 0 1.2em}
.article-body a{color:var(--yu-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body a:hover{color:var(--yu-brand-dark)}
.article-body ul,.article-body ol{padding-left:28px;margin:1em 0}
.article-body li{margin:8px 0}
.article-body img{
  max-width:100%;border-radius:var(--yu-radius);
  border:1px solid var(--yu-line);
  box-shadow:var(--yu-shadow-sm);
  margin:20px 0;
}
.article-body blockquote{
  border-left:4px solid var(--yu-brand);
  background:var(--yu-brand-soft);
  padding:14px 22px;margin:24px 0;
  border-radius:0 8px 8px 0;color:var(--yu-ink);
}
.article-body code{
  background:var(--yu-bg-2);padding:2px 6px;
  border-radius:4px;font-size:.92em;
  border:1px solid var(--yu-line-soft);
}
.article-body pre{
  background:var(--yu-ink);color:#e2e8f0;
  padding:18px;border-radius:10px;
  overflow-x:auto;font-family:var(--yu-font-mono);font-size:14px;
}
.article-body pre code{
  background:none;border:none;padding:0;color:inherit;
}

/* Tags */
.yu-article__tags{
  margin:32px 0;padding:16px 0;
  border-top:1px solid var(--yu-line-soft);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.yu-article__tags-label{
  font-size:13px;color:var(--yu-ink-3);font-weight:600;margin-right:4px;
}
.yu-article__tags ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.yu-article__tags li a{
  display:inline-block;padding:4px 12px;border-radius:999px;
  background:var(--yu-bg-2);color:var(--yu-ink-2);
  font-size:13px;font-weight:500;
  border:1px solid var(--yu-line);
}
.yu-article__tags li a:hover{
  background:var(--yu-brand-soft);color:var(--yu-brand);
  border-color:var(--yu-brand);
}

/* Attachments */
.yu-article__attachments{
  margin:32px 0;padding:20px;
  background:var(--yu-bg-2);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
}
.yu-article__attachments h2{
  font-size:15px;margin:0 0 12px;color:var(--yu-ink);
}
.yu-article__attachments ul{list-style:none;padding:0;margin:0}
.yu-article__attachments li{margin:6px 0}
.yu-article__attachments a{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:#fff;
  border:1px solid var(--yu-line);border-radius:8px;
  font-size:14px;color:var(--yu-ink);
}
.yu-article__attachments a:hover{border-color:var(--yu-brand)}
.yu-attachment__meta{font-size:12px;color:var(--yu-ink-3)}

/* Article footer */
.yu-article__footer{margin-top:48px}

.yu-votes{
  background:var(--yu-bg-2);
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:28px;text-align:center;
  margin-bottom:24px;
}
.yu-votes__question{
  font-size:17px;font-weight:600;margin:0 0 18px;color:var(--yu-ink);
}
.yu-votes__controls{display:inline-flex;gap:10px}
.yu-vote{
  padding:10px 22px;border-radius:8px;
  border:1px solid var(--yu-line);background:#fff;
  cursor:pointer;font-size:14px;font-weight:500;
  color:var(--yu-ink-2);transition:all .15s;
}
.yu-vote:hover{
  border-color:var(--yu-brand);color:var(--yu-brand);
  transform:translateY(-1px);
}
.yu-vote.is-selected{
  background:var(--yu-brand);
  border-color:var(--yu-brand);color:#fff;
}
.yu-votes__count{
  display:block;margin-top:12px;
  font-size:13px;color:var(--yu-ink-3);
}

.yu-article__actions{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;gap:16px;flex-wrap:wrap;
}
.yu-article__totop{
  font-size:14px;color:var(--yu-ink-3);font-weight:500;
}
.yu-article__totop:hover{color:var(--yu-brand)}

.yu-article__callout{margin:24px 0}

/* Related articles */
.yu-article__related{
  margin:48px 0;padding-top:32px;
  border-top:1px solid var(--yu-line-soft);
}
.yu-article__related h2,
.yu-article__related h3{
  font-size:18px;margin:0 0 16px;color:var(--yu-ink);
}
.yu-article__related ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;
}
.yu-article__related li a{
  display:block;padding:14px 18px;
  background:#fff;border:1px solid var(--yu-line);
  border-radius:10px;font-size:14px;color:var(--yu-ink);
}
.yu-article__related li a:hover{
  border-color:var(--yu-brand);background:var(--yu-brand-soft);
}

/* Comments */
.yu-comments{margin-top:64px;padding-top:32px;border-top:2px solid var(--yu-line-soft)}
.yu-comments__head{margin-bottom:24px}
.yu-comments__head h2{font-size:20px;margin:0 0 4px;color:var(--yu-ink)}
.yu-comments__head p{font-size:14px;color:var(--yu-ink-3);margin:0}
.yu-comments__list{list-style:none;padding:0;margin:0}
.yu-comment{
  display:flex;gap:14px;padding:20px 0;
  border-bottom:1px solid var(--yu-line-soft);
}
.yu-comment__avatar img{width:40px;height:40px;border-radius:50%}
.yu-comment__body{flex:1;min-width:0}
.yu-comment__head{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px;
}
.yu-comment__head strong{font-size:14px;color:var(--yu-ink);font-weight:600}
.yu-comment__date{font-size:12px;color:var(--yu-ink-3)}
.yu-comment__content{font-size:14px;color:var(--yu-ink-2);line-height:1.6}
.yu-comments__empty{
  text-align:center;padding:32px;color:var(--yu-ink-3);
  background:var(--yu-bg-2);border-radius:var(--yu-radius);
}
.yu-comment-form{
  margin-top:32px;padding:24px;
  background:var(--yu-bg-2);
  border-radius:var(--yu-radius);
}
.yu-comment-form h3{
  font-size:15px;margin:0 0 14px;color:var(--yu-ink);
}
.yu-comment-form__actions{margin-top:14px;display:flex;justify-content:flex-end}
.yu-comment-form .yu-btn{
  display:inline-block;background:var(--yu-ink);color:#fff;
  padding:10px 20px;border-radius:8px;border:none;cursor:pointer;
  font-size:14px;font-weight:600;
}
.yu-comment-form .yu-btn:hover{background:var(--yu-brand)}

/* Responsive */
@media (max-width:900px){
  .yu-article-layout{grid-template-columns:1fr;gap:24px}
  .yu-article-sidebar{
    position:static;max-height:none;
    background:var(--yu-bg-2);
    border-radius:var(--yu-radius);
    padding:16px;
  }
}
/* Fix: ocultar el botón "x" residual del search debajo del input */
.search button[type="reset"],
form[role="search"] > button:last-child,
.search [aria-label*="lear"]{display:none !important}

/* Fix: header — forzar visibilidad del logo */
.yu-header__logo{display:inline-flex !important;align-items:center;min-width:40px}
.yu-header__logo img{height:32px !important;width:auto !important;display:block}
/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.yu-pagehead--search h1{font-size:clamp(22px,2.5vw,28px)}
.yu-search__count{
  font-size:14px;color:var(--yu-ink-3);margin-top:16px;
}

.yu-search-layout{max-width:840px}

.yu-search__list{
  display:flex;flex-direction:column;gap:16px;
}
.yu-search-result{
  background:#fff;
  border:1px solid var(--yu-line);
  border-radius:var(--yu-radius);
  padding:22px 26px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.yu-search-result:hover{
  border-color:var(--yu-brand);
  box-shadow:var(--yu-shadow);
  transform:translateY(-1px);
}
.yu-search-result__meta{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12px;color:var(--yu-ink-3);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  margin-bottom:8px;
}
.yu-search-result__meta a{color:var(--yu-ink-3)}
.yu-search-result__meta a:hover{color:var(--yu-brand)}
.yu-search-result__title{
  font-size:18px;margin:0 0 8px;
}
.yu-search-result__title a{color:var(--yu-ink);font-weight:600}
.yu-search-result__title a:hover{color:var(--yu-brand)}
.yu-search-result__body{
  font-size:14px;color:var(--yu-ink-2);
  margin:0 0 14px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yu-search-result__footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;
  border-top:1px solid var(--yu-line-soft);
  font-size:13px;
}
.yu-search-result__cta{color:var(--yu-brand);font-weight:600}
.yu-search-result__votes{color:var(--yu-ink-3)}
.yu-search-result em{
  background:var(--yu-brand-soft);
  color:var(--yu-brand-dark);
  font-style:normal;font-weight:600;
  padding:1px 4px;border-radius:3px;
}

.yu-search__empty{
  text-align:center;
  padding:60px 20px;
  background:var(--yu-bg-2);
  border-radius:var(--yu-radius-lg);
}
.yu-search__empty-icon{font-size:48px;margin-bottom:16px;opacity:.6}
.yu-search__empty h2{font-size:22px;margin:0 0 8px;color:var(--yu-ink)}
.yu-search__empty p{color:var(--yu-ink-3);margin:0 0 24px}
.yu-search__empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.yu-btn{
  display:inline-block;background:var(--yu-brand);color:#fff !important;
  padding:11px 22px;border-radius:8px;font-weight:600;font-size:14px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .15s,transform .15s;
}
.yu-btn:hover{background:var(--yu-brand-dark);color:#fff !important;transform:translateY(-1px)}
.yu-btn--secondary{
  background:#fff;color:var(--yu-ink) !important;border:1px solid var(--yu-line);
}
.yu-btn--secondary:hover{
  background:var(--yu-bg-2);color:var(--yu-ink) !important;border-color:var(--yu-ink);
}
.yu-search-result__type{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--yu-bg-2);
  color:var(--yu-ink-3);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-left:8px;
}
/* ============================================================
   ARTICLE LAYOUT — 3 columnas (sidebar + article + TOC)
   ============================================================ */

.yu-article-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 220px;
  gap:40px;
  padding:24px 0 80px;
  align-items:start;
}

/* Si la sidebar de sección está oculta (setting), expandir */
.yu-article-layout:not(:has(.yu-article-sidebar)){
  grid-template-columns:minmax(0,1fr) 220px;
}

/* TOC */
.yu-article-toc{
  position:sticky;top:90px;
  align-self:start;
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  padding:4px;
}
.yu-article-toc__title{
  display:block;
  font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--yu-ink-3);
  font-weight:600;margin-bottom:12px;padding:0 12px;
}
.yu-article-toc__list{list-style:none;padding:0;margin:0;border-left:2px solid var(--yu-line-soft)}
.yu-article-toc__list li{margin:0}
.yu-article-toc__list a{
  display:block;
  padding:6px 14px;
  font-size:13px;line-height:1.4;
  color:var(--yu-ink-3);
  border-left:2px solid transparent;
  margin-left:-2px;
  transition:color .15s,border-color .15s;
}
.yu-article-toc__list a:hover{color:var(--yu-ink)}
.yu-article-toc__list a.is-active{
  color:var(--yu-brand);
  font-weight:600;
  border-left-color:var(--yu-brand);
}
.yu-article-toc__list a.is-h3{padding-left:26px;font-size:12.5px}

/* Cuando el TOC está vacío (artículo sin H2), ocultarlo */
.yu-article-toc:empty,
.yu-article-toc__inner:not(:has(li)){display:none}

/* Anchor offset para que el header sticky no tape los headings */
.article-body h2,
.article-body h3{scroll-margin-top:90px}

/* Heading hover — botón copiar enlace */
.article-body h2,
.article-body h3{position:relative}
.article-body h2 .yu-heading-anchor,
.article-body h3 .yu-heading-anchor{
  position:absolute;left:-28px;top:50%;transform:translateY(-50%);
  opacity:0;text-decoration:none;color:var(--yu-ink-3);
  font-size:18px;transition:opacity .15s,color .15s;
}
.article-body h2:hover .yu-heading-anchor,
.article-body h3:hover .yu-heading-anchor{opacity:1}
.yu-heading-anchor:hover{color:var(--yu-brand) !important}
.yu-heading-anchor.is-copied::after{
  content:" ✓ copiado";
  font-size:12px;color:var(--yu-brand);font-weight:600;
}

/* Responsive */
@media (max-width:1100px){
  .yu-article-layout{
    grid-template-columns:240px minmax(0,1fr);
  }
  .yu-article-toc{
    grid-column:1 / -1;
    position:static;max-height:none;
    background:var(--yu-bg-2);
    border-radius:var(--yu-radius);
    padding:16px 20px;margin-bottom:24px;
    order:-1; /* TOC arriba en tablet */
  }
  .yu-article-toc__list{border-left:none}
  .yu-article-toc__list a{border-left:none;padding-left:0}
  .yu-article-toc__list a.is-h3{padding-left:14px}
}
@media (max-width:900px){
  .yu-article-layout{grid-template-columns:1fr;gap:20px}
  .yu-article-sidebar{
    position:static;max-height:none;
    background:var(--yu-bg-2);border-radius:var(--yu-radius);padding:16px;
  }
}
/* Categorías en layout 2+3 en desktop */
@media (min-width: 1024px) {
  .yu-cat-grid > .yu-cat-card:nth-child(1),
  .yu-cat-grid > .yu-cat-card:nth-child(2) {
    grid-column: span 3;
  }
  .yu-cat-grid > .yu-cat-card:nth-child(3),
  .yu-cat-grid > .yu-cat-card:nth-child(4),
  .yu-cat-grid > .yu-cat-card:nth-child(5) {
    grid-column: span 2;
  }
}
/* ============================================================
   DROPDOWN MENUS sobre fondo oscuro (header y footer)
   ============================================================ */
header .dropdown-menu,
footer .dropdown-menu {
  background: #191c1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
header .dropdown-menu a,
header .dropdown-menu button,
header .dropdown-menu [role="menuitem"],
footer .dropdown-menu a,
footer .dropdown-menu button,
footer .dropdown-menu [role="menuitem"] {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}
header .dropdown-menu a:hover,
header .dropdown-menu button:hover,
header .dropdown-menu [role="menuitem"]:hover,
footer .dropdown-menu a:hover,
footer .dropdown-menu button:hover,
footer .dropdown-menu [role="menuitem"]:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
header .dropdown-menu .separator,
footer .dropdown-menu .separator,
header .dropdown-menu .h-px,
footer .dropdown-menu .h-px {
  background: rgba(255, 255, 255, 0.1) !important;
}
/* ============================================================
   Override: links dentro del header oscuro
   Mantienen el color del padre (text-white) en hover
   ============================================================ */
header a:hover,
header a:focus {
  color: inherit !important;
}

/* Asegurar que las transiciones sean suaves en bg solamente */
header a {
  transition: background-color 0.15s, opacity 0.15s, color 0.15s;
}
/* Evitar que Zendesk pinte coral los links dentro del listado */
.yi-row a, .yi-action { color:inherit !important; text-decoration:none !important; }
.yi-action { color:#191c1e !important; }
.yi-action:hover { color:#ffffff !important; }

/* Asegurar que el icono del botón de cierre del modal hereda color */
.yi-mclose .material-symbols-outlined { color:inherit !important; }

/* Cards del listado: ningún link interno debe pintarse de coral */
.yi-name, .yi-desc { color:inherit !important; }

/* Botón de copiar plantilla en el modal */
.yi-tpl-copy { color:#cbd5e1 !important; }
.yi-tpl-copy:hover { color:#ffffff !important; }
.yi-tpl-copy.copied { color:#ffffff !important; }
/* ============================================================
   Fix: chips de cabecera (sección/búsqueda) — alineados al
   estilo Material 3 + brand identity oficial Yurest 2026
   ============================================================ */
.yu-pagehead .yu-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: rgba(249, 90, 92, 0.15) !important;
  color: #F95A5C !important;
  border: none !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  margin-bottom: 14px !important;
}

/* Actualizar CSS vars antiguas al coral oficial para que cualquier
   componente yu-* heredado quede coherente con el resto del site */
:root {
  --yu-brand: #F95A5C;
  --yu-brand-dark: #e84848;
  --yu-brand-soft: rgba(249, 90, 92, 0.12);
}