/* The Joker House — Pagina individual de marca (description editorial) */
/* Se aplica a contenido HTML dentro de .jh-cat-seo__intro */
.jh-cat-seo__intro {
    --g:#b8860b; --g2:#d4af37; --tx:#1a1a1a; --soft:#8a8a8a;
    --ln:#ececec; --bg:#fafafa; --bg2:#f9f6ef;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--tx); line-height:1.7; font-size:16px;
    /* Sin max-width: hereda el ancho del contenedor de productos del theme */
}

/* === Intro hero del bloque description === */
.jh-brand-rich__intro {
    background:linear-gradient(145deg,var(--bg2),#fff);
    border:1px solid var(--ln); border-radius:18px;
    padding:32px 32px 26px; margin:8px 0 36px;
    position:relative; overflow:hidden;
}
.jh-brand-rich__intro::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--g),var(--g2));
}
.jh-brand-rich__intro p {
    font-size:17px; line-height:1.65; margin:0; color:var(--tx);
}
.jh-brand-rich__intro p strong {
    color:var(--g); font-weight:700;
}

/* === H2/H3 generales === */
.jh-cat-seo__intro h2 {
    font-size:clamp(22px,3vw,28px); font-weight:800;
    letter-spacing:-.02em; margin:48px 0 16px; color:var(--tx);
    position:relative; padding-bottom:12px;
}
.jh-cat-seo__intro h2::after {
    content:''; position:absolute; bottom:0; left:0;
    width:48px; height:3px; background:var(--g); border-radius:2px;
}
.jh-cat-seo__intro h3 {
    font-size:18px; font-weight:700; margin:24px 0 10px; color:var(--tx);
}
.jh-cat-seo__intro p {
    margin:0 0 16px; color:#2a2a2a;
}
.jh-cat-seo__intro ul {
    list-style:none; padding:0; margin:0 0 20px;
}
.jh-cat-seo__intro ul li {
    position:relative; padding:8px 0 8px 26px;
    border-bottom:1px solid #f5f5f5;
}
.jh-cat-seo__intro ul li:last-child { border-bottom:0; }
.jh-cat-seo__intro ul li::before {
    content:''; position:absolute; left:6px; top:18px;
    width:6px; height:6px; border-radius:50%; background:var(--g);
}
.jh-cat-seo__intro ul li strong {
    color:var(--tx); font-weight:700;
}

/* === Grid de gamas (cards) === */
.jh-brand-rich__gamas {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:14px; margin:8px 0 32px;
}
.jh-brand-rich__gama {
    background:#fff; border:1px solid var(--ln); border-radius:14px;
    padding:20px 18px 18px; transition:transform .18s,box-shadow .18s,border-color .18s;
}
.jh-brand-rich__gama:hover {
    transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.06);
    border-color:transparent;
}
.jh-brand-rich__gama h3 {
    margin:0 0 8px; font-size:16px; font-weight:800; color:var(--g);
    letter-spacing:-.01em;
}
.jh-brand-rich__gama p {
    margin:0; font-size:14px; line-height:1.55; color:#3a3a3a;
}
.jh-brand-rich__gama .jh-brand-rich__gama-level {
    display:inline-block; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em;
    background:var(--bg2); color:var(--g); padding:4px 10px;
    border-radius:999px; margin-top:10px;
}

/* === Guía cómo elegir (3 niveles) === */
.jh-brand-rich__guide {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px; margin:8px 0 32px;
}
.jh-brand-rich__guide-card {
    background:#fff; border:1px solid var(--ln); border-radius:14px;
    padding:22px 20px; text-align:left;
}
.jh-brand-rich__guide-card--beginner { border-left:4px solid #6ab04c; }
.jh-brand-rich__guide-card--inter    { border-left:4px solid #f0932b; }
.jh-brand-rich__guide-card--advanced { border-left:4px solid #c0392b; }
.jh-brand-rich__guide-card h3 {
    margin:0 0 6px; font-size:15px; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:var(--tx);
}
.jh-brand-rich__guide-card .jh-brand-rich__guide-rec {
    font-size:13px; color:var(--soft); margin:0 0 12px;
}
.jh-brand-rich__guide-card p { font-size:14.5px; margin:0; line-height:1.55; }

/* === FAQ píldoras desplegables === */
.jh-brand-rich__faq {
    display:flex; flex-direction:column; gap:10px; margin:8px 0 32px;
}
.jh-brand-rich__faq details {
    background:#fff; border:1px solid var(--ln); border-radius:14px;
    overflow:hidden; transition:border-color .15s,box-shadow .15s;
}
.jh-brand-rich__faq details[open] {
    border-color:var(--g); box-shadow:0 6px 18px rgba(184,134,11,.07);
}
.jh-brand-rich__faq summary {
    cursor:pointer; padding:16px 22px 16px 22px; font-weight:700; font-size:15.5px;
    color:var(--tx); display:flex; align-items:center; justify-content:space-between;
    list-style:none; user-select:none;
}
.jh-brand-rich__faq summary::-webkit-details-marker { display:none; }
.jh-brand-rich__faq summary::after {
    content:'+'; font-size:24px; font-weight:400; color:var(--g);
    line-height:1; transition:transform .2s; flex-shrink:0; margin-left:14px;
}
.jh-brand-rich__faq details[open] summary::after {
    content:'−';
}
.jh-brand-rich__faq summary:hover { background:var(--bg2); }
.jh-brand-rich__faq .jh-brand-rich__faq-body {
    padding:0 22px 18px; font-size:15px; line-height:1.65; color:#2a2a2a;
}
.jh-brand-rich__faq .jh-brand-rich__faq-body p:last-child { margin-bottom:0; }

/* === Vídeo embed responsive (individual) === */
.jh-brand-rich__video {
    position:relative; width:100%; padding-bottom:56.25%; /* 16:9 */
    margin:0; border-radius:14px; overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.1); background:#000;
}
.jh-brand-rich__video iframe {
    position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}
/* Grid de 2 vídeos en fila (responsive: apilan en mobile) */
.jh-brand-rich__videos {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:18px; margin:32px 0 36px;
}
@media (max-width:760px) {
    .jh-brand-rich__videos { grid-template-columns:1fr; gap:14px; }
}
/* === Vídeo facade (portada + play, carga iframe al click) === */
.jh-brand-rich__video--facade {
    background-size:cover; background-position:center; cursor:pointer;
    transition:box-shadow .2s, transform .2s;
}
.jh-brand-rich__video--facade::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
    transition:background .2s;
}
.jh-brand-rich__video--facade:hover {
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.jh-brand-rich__video-play {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:74px; height:52px; border:0; padding:0;
    background:rgba(0,0,0,.78); border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:2;
    transition:background .2s, transform .2s, box-shadow .2s;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.jh-brand-rich__video-play svg {
    width:26px; height:26px; color:#fff;
    margin-left:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.jh-brand-rich__video--facade:hover .jh-brand-rich__video-play {
    background:#ff0000;
    transform:translate(-50%,-50%) scale(1.08);
    box-shadow:0 6px 22px rgba(255,0,0,.4);
}
.jh-brand-rich__video--facade.is-playing::before { display:none; }
.jh-brand-rich__video--facade.is-playing .jh-brand-rich__video-play { display:none; }

/* === Responsive === */
@media (max-width:640px) {
    .jh-brand-rich__intro { padding:24px 22px 20px; }
    .jh-brand-rich__intro p { font-size:16px; }
    .jh-cat-seo__intro h2 { font-size:22px; margin-top:36px; }
    .jh-brand-rich__faq summary { font-size:15px; padding:14px 18px; }
}