/* ============ Diccionario interactivo de trucos kendama — v3 visual ============ */

/* === Override layout: ANCHO COMPLETO en CMS #46 === */
body.cms-id-46 #left-column,
body.cms-id-46 #right-column,
body.cms-id-46 .left-column,
body.cms-id-46 .right-column,
body.cms-id-46 .sidebar,
body.cms-id-46 #sidebar,
body.cms-id-46 aside.col-left,
body.cms-id-46 aside.col-right { display:none !important; }
body.cms-id-46 .col-main,
body.cms-id-46 .col-center,
body.cms-id-46 #content-wrapper,
body.cms-id-46 .content-wrapper,
body.cms-id-46 #main,
body.cms-id-46 main { width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
body.cms-id-46 #wrapper > .container,
body.cms-id-46 #content { max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; }
body.cms-id-46 .jh-tricks { max-width:1800px; margin:0 auto; padding:0 20px; }
/* Quitar TODOS los marcos/backgrounds/cards del wrapper del CMS */
body.cms-id-46 #main,
body.cms-id-46 .page-cms,
body.cms-id-46 .page-content,
body.cms-id-46 .cms-block,
body.cms-id-46 .cms-page,
body.cms-id-46 .card,
body.cms-id-46 .card-body,
body.cms-id-46 .card-block,
body.cms-id-46 .page-wrapper,
body.cms-id-46 article.cms,
body.cms-id-46 section.cms {
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}
@media (max-width:760px) {
    body.cms-id-46 .jh-tricks { padding:0 8px !important; }
}
/* Ocultar el H1 que el theme genera automáticamente (lo sustituimos con el nuestro dentro) */
body.cms-id-46 .jh-legal-hero,
body.cms-id-46 .jh-legal-hero__title,
body.cms-id-46 header.jh-legal-hero { display:none !important; }
/* Ocultar TOC (índice automático) y sidebar del theme para CMS */
body.cms-id-46 .jh-legal-toc,
body.cms-id-46 aside.jh-legal-toc,
body.cms-id-46 .jh-legal-layout aside,
body.cms-id-46 [data-jh-legal-toc] { display:none !important; }
/* Si el theme tiene grid con TOC, fuerza el contenido a 1 columna */
body.cms-id-46 .jh-legal-layout,
body.cms-id-46 .jh-legal-article { display:block !important; grid-template-columns:1fr !important; max-width:100% !important; width:100% !important; }

.jh-tricks {
    --g:#b8860b; --g2:#d4af37; --tx:#1a1a1a; --soft:#8a8a8a;
    --ln:#ececec; --bg:#fafafa; --bg2:#f9f6ef;
    --c-cup:#27ae60; --c-spike:#e74c3c; --c-around:#3498db;
    --c-stall:#9b59b6; --c-balance:#e67e22; --c-trick:#16a085;
    --c-flip:#c0392b; --c-rotation:#1abc9c;
    --lvl-1:#2ecc71; --lvl-2:#f1c40f; --lvl-3:#e67e22; --lvl-4:#e74c3c;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--tx); line-height:1.55; font-size:15px;
}

/* === HERO COMPACTO (flex column forzado para que título y párrafo queden apilados) === */
.jh-tricks__hero {
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important;
    text-align:left; padding:28px 32px 22px;
    background:linear-gradient(145deg,var(--bg2),#fff);
    border-radius:14px; border:1px solid var(--ln);
    margin:8px 0 16px; position:relative; overflow:hidden;
}
.jh-tricks__hero > * { width:auto; max-width:100%; }
.jh-tricks__hero::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--g),var(--g2));
}
.jh-tricks__hero-badge {
    display:inline-block; font-size:11px; font-weight:800;
    letter-spacing:.16em; color:var(--g); text-transform:uppercase;
    border:1px solid var(--ln); border-radius:999px;
    padding:5px 14px; margin-bottom:10px; background:#fff;
}
.jh-tricks__hero h1 {
    font-size:clamp(28px,4vw,40px); font-weight:800;
    letter-spacing:-.02em; margin:0 0 8px; display:block !important;
}
.jh-tricks__hero p {
    color:var(--soft); font-size:15px; max-width:680px;
    margin:0; line-height:1.5; display:block !important;
}

/* === FILTROS sticky === */
.jh-tricks__filters {
    position:sticky; top:0; z-index:30;
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border:1px solid var(--ln); border-radius:12px;
    padding:14px 16px; margin:0 0 20px;
    box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.jh-tricks__search {
    position:relative; margin-bottom:12px;
}
.jh-tricks__search svg {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--soft);
}
.jh-tricks__search input {
    width:100%; border:1px solid var(--ln); border-radius:999px;
    padding:10px 16px 10px 40px; font-size:14px; font-family:inherit;
    background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
    box-sizing:border-box;
}
.jh-tricks__search input:focus {
    border-color:var(--g); box-shadow:0 0 0 3px rgba(184,134,11,.1);
}
.jh-tricks__filterrow {
    display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center;
    margin-bottom:6px;
}
.jh-tricks__filterlabel {
    font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:.1em; color:var(--soft); margin-right:2px;
}
.jh-tricks__chip {
    display:inline-flex; align-items:center; gap:5px;
    border:1px solid var(--ln); background:#fff;
    border-radius:999px; padding:6px 12px;
    font-size:12px; font-weight:700; color:var(--tx);
    cursor:pointer; transition:all .15s; user-select:none; font-family:inherit;
}
.jh-tricks__chip:hover { border-color:var(--g); }
.jh-tricks__chip.is-active { background:var(--tx); color:#fff; border-color:var(--tx); }
.jh-tricks__chip-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.jh-tricks__counter {
    font-size:12px; color:var(--soft); padding-top:8px;
    border-top:1px solid var(--ln); margin-top:4px;
}
.jh-tricks__counter strong { color:var(--tx); font-weight:800; }

/* === GRID DE CARDS estilo app: PÍLDORA HORIZONTAL amplia, 2 por fila === */
.jh-tricks__grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
    margin-bottom:32px;
}
@media (max-width:900px) {
    .jh-tricks__grid { grid-template-columns:1fr; }
}
.jh-tricks__card {
    position:relative;
    background:#fff; border:1px solid var(--ln);
    border-radius:14px; overflow:hidden; cursor:pointer;
    display:flex; flex-direction:row;
    min-height:200px;
    opacity:0; transform:translateY(8px);
    animation:jh-tricks-in .35s ease forwards;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
@media (max-width:520px) {
    .jh-tricks__card { flex-direction:column; min-height:auto; }
}
@keyframes jh-tricks-in { to { opacity:1; transform:translateY(0); } }
.jh-tricks__card:hover {
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    border-color:transparent;
}
.jh-tricks__card.is-hidden { display:none; }

/* THUMB a la IZQUIERDA, 55% del ancho (más ancho ahora) */
.jh-tricks__card-thumbwrap {
    position:relative; flex:0 0 55%; align-self:stretch;
    background-color:#000; overflow:hidden;
    min-height:200px;
}
@media (max-width:520px) {
    .jh-tricks__card-thumbwrap { flex:0 0 auto; aspect-ratio:16/9; width:100%; min-height:auto; }
}
.jh-tricks__card-thumb {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transition:transform .4s ease;
}
.jh-tricks__card:hover .jh-tricks__card-thumb { transform:scale(1.05); }
.jh-tricks__card-thumb-gradient {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.4) 100%);
    pointer-events:none;
}

/* Badges sobre el thumb */
.jh-tricks__card-num {
    position:absolute; top:10px; left:10px; z-index:2;
    background:rgba(0,0,0,.7); color:#fff;
    font-weight:800; font-size:11.5px;
    padding:4px 9px; border-radius:999px;
    backdrop-filter:blur(4px);
    letter-spacing:.04em;
}
.jh-tricks__card-cat {
    position:absolute; top:10px; right:10px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,.95); color:var(--tx);
    padding:4px 10px; border-radius:999px;
    font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:.06em; backdrop-filter:blur(4px);
}
.jh-tricks__card-cat-dot { width:7px; height:7px; border-radius:50%; }

/* Play centrado */
.jh-tricks__card-play {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:58px; height:42px; z-index:2;
    background:rgba(255,0,0,.92); border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 22px rgba(0,0,0,.4);
    transition:transform .25s, background .25s;
    pointer-events:none;
}
.jh-tricks__card:hover .jh-tricks__card-play {
    transform:translate(-50%,-50%) scale(1.12);
    background:rgba(255,0,0,1);
}
.jh-tricks__card-play svg {
    width:22px; height:22px; color:#fff; margin-left:3px;
}

/* CONTENIDO debajo del thumb */
.jh-tricks__card-content {
    padding:14px 16px 16px;
    display:flex; flex-direction:column; gap:8px; flex:1;
}
.jh-tricks__card-name {
    margin:0; font-size:17px; font-weight:800;
    letter-spacing:-.01em; line-height:1.2; color:var(--tx);
}
.jh-tricks__card-meta {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    font-size:11.5px;
}
.jh-tricks__card-difficulty {
    display:flex; gap:3px;
}
.jh-tricks__card-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--ln);
}
.jh-tricks__card-dot.is-filled.is-lvl-1 { background:var(--lvl-1); }
.jh-tricks__card-dot.is-filled.is-lvl-2 { background:var(--lvl-2); }
.jh-tricks__card-dot.is-filled.is-lvl-3 { background:var(--lvl-3); }
.jh-tricks__card-dot.is-filled.is-lvl-4 { background:var(--lvl-4); }
.jh-tricks__card-level {
    font-weight:700; color:var(--soft);
}
.jh-tricks__card-desc {
    font-size:13.5px; line-height:1.5; color:#4a4a4a;
    margin:4px 0 0; flex:1;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
}
.jh-tricks__card-cta {
    display:inline-flex; align-items:center; gap:6px;
    color:var(--g); font-weight:700; font-size:12.5px;
    margin-top:6px;
}
.jh-tricks__card-cta svg { width:13px; height:13px; }
.jh-tricks__card:hover .jh-tricks__card-cta { color:var(--tx); }

.jh-tricks__empty {
    text-align:center; padding:60px 24px; color:var(--soft);
    background:#fff; border:1px dashed var(--ln); border-radius:12px;
    grid-column:1/-1;
}

/* === MODAL grande — DEFENSIVO: nunca bloquea clics si no está abierto === */
.jh-tricks__modal {
    position:fixed; inset:0; z-index:9999;
    display:none !important;
    pointer-events:none !important;
    align-items:center; justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.85); backdrop-filter:blur(8px);
    opacity:0; transition:opacity .2s;
}
.jh-tricks__modal.is-open {
    display:flex !important;
    pointer-events:auto !important;
    opacity:1;
}
/* (regla movida arriba con !important) */
.jh-tricks__modal-content {
    background:#fff; border-radius:18px; overflow:hidden;
    max-width:1100px; width:100%; max-height:92vh;
    display:flex; flex-direction:column;
    transform:scale(.96); transition:transform .25s;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.jh-tricks__modal.is-open .jh-tricks__modal-content { transform:scale(1); }
.jh-tricks__modal-head {
    padding:16px 22px; border-bottom:1px solid var(--ln);
    display:flex; justify-content:space-between; align-items:center;
    gap:14px; flex-shrink:0;
}
.jh-tricks__modal-head h2 {
    margin:0; font-size:20px; font-weight:800; letter-spacing:-.01em;
    color:var(--tx);
}
.jh-tricks__modal-head-meta {
    display:flex; gap:8px; align-items:center; font-size:12px;
    color:var(--soft); font-weight:600; margin-top:3px; flex-wrap:wrap;
}
.jh-tricks__modal-head-cat {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--bg2); padding:3px 9px; border-radius:999px;
    color:var(--tx); font-weight:700;
}
.jh-tricks__modal-head-cat-dot { width:7px; height:7px; border-radius:50%; }
.jh-tricks__modal-close {
    background:var(--bg2); border:0; cursor:pointer;
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--tx); transition:background .15s, transform .15s;
    flex-shrink:0;
}
.jh-tricks__modal-close:hover { background:var(--g); color:#fff; transform:rotate(90deg); }
.jh-tricks__modal-close svg { width:18px; height:18px; }
.jh-tricks__modal-body {
    display:grid; grid-template-columns:1.4fr 1fr;
    overflow:auto; flex:1;
}
.jh-tricks__modal-video {
    position:relative; background:#000;
    aspect-ratio:16/9; align-self:start;
    border-radius:12px;
    overflow:hidden;
    margin:14px 0 0 18px;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.jh-tricks__modal-video iframe {
    position:absolute; inset:0; width:100%; height:100%; border:0;
    border-radius:12px;
}
.jh-tricks__modal-video-attribution { margin:8px 0 0 18px; border-radius:0 0 10px 10px; }
@media (max-width:760px) {
    .jh-tricks__modal-video { margin:10px 10px 0; }
    .jh-tricks__modal-video-attribution { margin:8px 10px 0; }
}
.jh-tricks__modal-video-attribution {
    padding:8px 14px; font-size:11.5px; color:var(--soft);
    text-align:center; background:#fafafa; border-top:1px solid var(--ln);
}
.jh-tricks__modal-video-attribution a {
    color:var(--g); font-weight:700; text-decoration:none;
}
.jh-tricks__modal-video-attribution a:hover { text-decoration:underline; }
.jh-tricks__modal-info {
    padding:22px 26px; overflow-y:auto;
}
.jh-tricks__modal-info h3 {
    font-size:11.5px; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; color:var(--g);
    margin:14px 0 4px;
}
.jh-tricks__modal-info h3:first-child { margin-top:0; }
.jh-tricks__modal-info p, .jh-tricks__modal-info ul {
    font-size:14.5px; line-height:1.6; color:#2a2a2a; margin:0 0 4px;
}
.jh-tricks__modal-info ul { padding-left:18px; }
.jh-tricks__modal-info li { margin-bottom:3px; }

/* === SEO al final === */
.jh-tricks__seo {
    margin-top:40px; padding-top:28px;
    border-top:2px solid var(--ln);
}
.jh-tricks__seo h2 {
    font-size:clamp(20px,2.5vw,26px); font-weight:800;
    letter-spacing:-.01em; margin:28px 0 10px;
    position:relative; padding-bottom:10px;
}
.jh-tricks__seo h2::after {
    content:''; position:absolute; bottom:0; left:0;
    width:42px; height:3px; background:var(--g); border-radius:2px;
}
.jh-tricks__seo h2:first-child { margin-top:0; }
.jh-tricks__seo p { font-size:15px; line-height:1.65; margin:0 0 12px; color:#2a2a2a; }
.jh-tricks__seo a { color:var(--g); font-weight:700; }

/* === GRUPOS por nivel === */
.jh-tricks__group {
    margin-bottom:36px;
    transition:opacity .3s;
}
.jh-tricks__group.is-empty { display:none; }
.jh-tricks__group-header {
    margin:0 0 14px;
    padding:0;
}
.jh-tricks__group-title {
    display:flex; align-items:center; gap:12px;
    font-size:clamp(22px,2.5vw,28px); font-weight:800;
    letter-spacing:-.02em; margin:0 0 8px; color:var(--tx);
}
.jh-tricks__group-title-icon {
    width:14px; height:14px; border-radius:50%;
    flex-shrink:0;
}
.jh-tricks__group-title-icon.is-lvl-1 { background:var(--lvl-1); }
.jh-tricks__group-title-icon.is-lvl-2 { background:var(--lvl-2); }
.jh-tricks__group-title-icon.is-lvl-3 { background:var(--lvl-4); }
.jh-tricks__group-intro {
    font-size:15px; line-height:1.55; color:#4a4a4a;
    margin:0 0 16px; max-width:900px;
}

/* === FAQs con píldoras bonitas (override del details básico) === */
body.cms-id-46 .jh-brand-rich__faq {
    display:flex; flex-direction:column; gap:10px;
    margin:18px 0 8px;
}
body.cms-id-46 .jh-brand-rich__faq details {
    background:#fff; border:1px solid var(--ln); border-radius:14px;
    overflow:hidden;
    transition:border-color .2s, box-shadow .2s, background .2s;
}
body.cms-id-46 .jh-brand-rich__faq details:hover {
    border-color:var(--g); box-shadow:0 4px 14px rgba(184,134,11,.08);
}
body.cms-id-46 .jh-brand-rich__faq details[open] {
    background:linear-gradient(145deg,var(--bg2),#fff);
    border-color:var(--g);
    box-shadow:0 6px 20px rgba(184,134,11,.12);
}
body.cms-id-46 .jh-brand-rich__faq summary {
    padding:16px 22px; cursor:pointer;
    font-weight:700; font-size:15.5px; color:var(--tx);
    list-style:none; display:flex; align-items:center; gap:14px;
    user-select:none; line-height:1.4;
}
body.cms-id-46 .jh-brand-rich__faq summary::-webkit-details-marker { display:none; }
body.cms-id-46 .jh-brand-rich__faq summary::before {
    content:''; flex-shrink:0;
    width:28px; height:28px; border-radius:50%;
    background:var(--bg2); position:relative;
    transition:background .2s, transform .25s;
}
body.cms-id-46 .jh-brand-rich__faq summary::after {
    content:''; position:absolute; left:33px;
    width:12px; height:2px; background:var(--g);
    box-shadow:0 0 0 0 transparent;
}
body.cms-id-46 .jh-brand-rich__faq summary {
    position:relative;
}
body.cms-id-46 .jh-brand-rich__faq summary {
    background-image:
        linear-gradient(90deg, transparent 0, transparent 100%);
}
body.cms-id-46 .jh-brand-rich__faq details summary {
    position:relative;
}
body.cms-id-46 .jh-brand-rich__faq details summary::before {
    content:'+'; display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:var(--bg2); color:var(--g);
    font-size:22px; font-weight:400; line-height:1;
    transition:transform .25s, background .25s, color .25s;
}
body.cms-id-46 .jh-brand-rich__faq details summary::after { display:none !important; }
body.cms-id-46 .jh-brand-rich__faq details[open] summary::before {
    content:'−'; background:var(--g); color:#fff;
    transform:rotate(0deg);
}
body.cms-id-46 .jh-brand-rich__faq .jh-brand-rich__faq-body {
    padding:0 22px 18px 70px;
    font-size:14.5px; line-height:1.65; color:#2a2a2a;
    animation:jh-faq-in .25s ease;
}
@keyframes jh-faq-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
body.cms-id-46 .jh-brand-rich__faq .jh-brand-rich__faq-body p { margin:0; }

/* === Responsive Mobile === */
@media (max-width:760px) {
    /* Mobile: padding mínimo */
    body.cms-id-46 #content { padding:0 !important; }
    body.cms-id-46 .jh-tricks { padding:0 8px !important; }
    .jh-tricks { font-size:14px; }

    /* HERO compacto */
    .jh-tricks__hero { padding:18px 14px 12px; border-radius:10px; margin:4px 0 12px; }
    .jh-tricks__hero h1 { font-size:24px; }
    .jh-tricks__hero p { font-size:13px; }

    /* FILTROS mobile: chips scroll horizontal */
    .jh-tricks__filters { padding:10px; border-radius:10px; margin-bottom:14px; }
    .jh-tricks__search input { font-size:13px; padding:9px 14px 9px 38px; }
    .jh-tricks__filterrow {
        flex-wrap:nowrap; overflow-x:auto;
        scrollbar-width:none; -webkit-overflow-scrolling:touch;
        margin-bottom:6px; padding-bottom:4px;
    }
    .jh-tricks__filterrow::-webkit-scrollbar { display:none; }
    .jh-tricks__filterlabel { flex-shrink:0; }
    .jh-tricks__chip { flex-shrink:0; white-space:nowrap; font-size:11.5px; padding:5px 10px; }
    .jh-tricks__counter { font-size:11px; padding-top:6px; }

    /* GRID 1 columna en mobile */
    .jh-tricks__grid { grid-template-columns:1fr !important; gap:12px; }

    /* CARDS: video ARRIBA + texto DEBAJO */
    .jh-tricks__card {
        flex-direction:column !important;
        min-height:auto !important;
        border-radius:10px;
    }
    .jh-tricks__card-thumbwrap {
        flex:0 0 auto !important;
        width:100% !important;
        aspect-ratio:16/9 !important;
        min-height:auto !important;
    }
    .jh-tricks__card-content { padding:12px 14px 14px; }
    .jh-tricks__card-name { font-size:16px; }
    .jh-tricks__card-desc { font-size:13px; -webkit-line-clamp:4; }

    /* Modal mobile */
    .jh-tricks__modal { padding:8px; }
    .jh-tricks__modal-content { max-height:96vh; border-radius:12px; }
    .jh-tricks__modal-head { padding:12px 16px; }
    .jh-tricks__modal-head h2 { font-size:17px; }
    .jh-tricks__modal-body { grid-template-columns:1fr; }
    .jh-tricks__modal-info { padding:14px 16px; }

    /* FAQ mobile más compacto */
    body.cms-id-46 .jh-brand-rich__faq summary { padding:13px 16px; font-size:14px; gap:10px; }
    body.cms-id-46 .jh-brand-rich__faq details summary::before { width:26px; height:26px; font-size:18px; }
    body.cms-id-46 .jh-brand-rich__faq .jh-brand-rich__faq-body { padding:0 16px 14px 52px; font-size:13.5px; }
}