/* VSD Home — cargado por el plugin. No pegar style en Elementor */
/* Blindaje: la home NO debe quedar oculta por CSS del hub de herramientas */
#contenidoVSD[data-vsd-hub-mode="catalog"],
#contenidoVSD.wrapper{
    position:relative;
    margin-top:0 !important;
    z-index:auto !important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
}

.card,
.card:visited,
.card:hover,
.card:active{
    color:#2a2118;
    text-decoration:none;
}

.card h2{
    color:#2a2118;
    margin:0;
    font-size:24px;
    font-weight:700;
}

.card p{
    color:#5c4e3f;
}

.card .abrir{
    color:#17120c;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:'Quicksand',sans-serif;
    background-color:#0c0907;
    /* El bosque va en ::before fixed (seguro en iOS/móvil; no usa background-attachment) */
    background-image:none;
}

/*
 * Bosque SOLO Programa.
 * Fuente de verdad: #vsd-identidad[data-programa="1"] (lo pinta el shortcode PHP).
 * También body.vsd-home-bosque / data-vsd-home-skin por si el boot llega antes.
 */
body::before{
    content:none !important;
    display:none !important;
    background:none !important;
    background-image:none !important;
}

body:has(#vsd-identidad[data-programa="1"])::before,
html[data-vsd-home-skin="programa"] body::before,
body.vsd-home-bosque::before{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    /* Por encima del bg de html/body; el contenido va a z-index mayor */
    z-index:0 !important;
    pointer-events:none !important;
    background-color:#0c0907 !important;
    background-image:
        linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.48)),
        url("https://programavivesindolor.com/wp-content/uploads/fondo-1.png") !important;
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    -webkit-background-size:cover !important;
    transform:translate3d(0,0,0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

/* Elementor/Kadence tapaban el bosque con fondos opacos (hub.css pone z-index:2). */
body:has(#vsd-identidad[data-programa="1"]),
body.vsd-home-bosque,
html[data-vsd-home-skin="programa"] body{
    background-color:transparent !important;
    background-image:none !important;
}
body:has(#vsd-identidad[data-programa="1"]) .elementor,
body:has(#vsd-identidad[data-programa="1"]) .elementor-section,
body:has(#vsd-identidad[data-programa="1"]) .elementor-element,
body:has(#vsd-identidad[data-programa="1"]) .elementor-widget-wrap,
body:has(#vsd-identidad[data-programa="1"]) .elementor-container,
body:has(#vsd-identidad[data-programa="1"]) #page,
body:has(#vsd-identidad[data-programa="1"]) #wrapper,
body:has(#vsd-identidad[data-programa="1"]) .site,
body:has(#vsd-identidad[data-programa="1"]) .entry-content,
body:has(#vsd-identidad[data-programa="1"]) .entry-content-wrap,
body.vsd-home-bosque .elementor,
body.vsd-home-bosque .elementor-section,
body.vsd-home-bosque .elementor-element,
body.vsd-home-bosque .elementor-widget-wrap,
body.vsd-home-bosque #page,
body.vsd-home-bosque .site{
    background-color:transparent !important;
    background-image:none !important;
}

.wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:20px;
}

/* Membresía: panel opaco. Programa: deja ver el bosque. */
#contenidoVSD[data-vsd-hub-mode="catalog"],
#contenidoVSD.wrapper{
    background:#0c0907 !important;
    padding-top:20px;
    position:relative;
    z-index:2;
}
body:has(#vsd-identidad[data-programa="1"]) #contenidoVSD[data-vsd-hub-mode="catalog"],
body:has(#vsd-identidad[data-programa="1"]) #contenidoVSD.wrapper,
html[data-vsd-home-skin="programa"] #contenidoVSD[data-vsd-hub-mode="catalog"],
html[data-vsd-home-skin="programa"] #contenidoVSD.wrapper,
body.vsd-home-bosque #contenidoVSD[data-vsd-hub-mode="catalog"],
body.vsd-home-bosque #contenidoVSD.wrapper{
    background:rgba(12,9,7,.55) !important;
}

@media (hover:hover) and (pointer:fine) and (min-width:1025px){
    #contenidoVSD[data-vsd-hub-mode="catalog"],
    #contenidoVSD.wrapper{
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
    }
}

.panel{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:42px 36px 40px;
    border-radius:28px;
    background:transparent;
}

.titulo{
    text-align:center;
    color:white;
    font-size:40px;
    font-weight:700;
    margin-bottom:10px;
}

.titulo img{
    display:block;
    width:min(180px,56vw);
    height:auto;
    margin:0 auto;
    filter:brightness(1.15);
}

.subtitulo{
    text-align:center;
    color:#bbbbbb;
    margin-bottom:42px;
    font-size:16px;
}

#contenidoVSD .titulo,
#contenidoVSD .subtitulo,
#contenidoVSD img[src*="VIVE-SIN-DOLOR-LOGO-PETIT"]{
    display:none !important;
}

.vsd-volver-comunidad{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:760px;
    margin:0 auto 14px;
    padding:9px 14px;
    box-sizing:border-box;
    position:relative;
    overflow:visible;
    text-decoration:none;
    font-family:Quicksand,system-ui,sans-serif;
    color:#f2e6cf;
    background:linear-gradient(165deg,#1f1a15 0%,#14110e 55%,#101010 100%);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    transition:border-color .18s ease, background .18s ease;
}
.vsd-volver-comunidad:hover,
.vsd-volver-comunidad:focus-visible{
    border-color:rgba(226,179,90,.55);
    background:linear-gradient(165deg,#262019 0%,#181410 100%);
    color:#fff;
    transform:none;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.vsd-volver-comunidad-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
}
.vsd-volver-comunidad-ico img{
    width:28px;
    height:28px;
    object-fit:contain;
    display:block;
}
.vsd-volver-comunidad-copy,
.vsd-volver-comunidad-kicker{
    display:none;
}
.vsd-volver-comunidad-label{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
    color:#f2e6cf;
}
.vsd-volver-comunidad-go{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 22px;
    width:22px;
    height:22px;
    font-size:16px;
    font-weight:700;
    color:#e2b35a;
    line-height:1;
}
.vsd-volver-comunidad-go svg{
    display:block;
    width:14px;
    height:14px;
}
@media (max-width: 720px){
    .vsd-volver-comunidad{
        padding:8px 12px;
        gap:8px;
        border-radius:18px;
    }
    .vsd-volver-comunidad-label{
        font-size:13px;
    }
}

.grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;
    margin-top:28px;
    align-items:stretch;

}

#vsd-ir-slack,
#vsd-ir-slack.is-fallback{
    display:none !important;
    max-width:760px;
    margin:36px auto 0;
    text-align:center;
}

#vsd-ir-slack a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    padding:12px 22px;
    border-radius:14px;
    background:#5C8A32;
    color:#fff !important;
    font-weight:800;
    font-size:16px;
    text-decoration:none !important;
    border:1px solid rgba(220,235,160,.32);
    box-shadow:0 8px 24px rgba(70,110,30,.45);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
    position:relative;
}

#vsd-ir-slack a svg,
#vsd-ir-slack a img,
#vsd-ir-slack a .vsd-comunidad-ico,
#contenidoVSD #vsd-ir-slack a img{
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    flex:0 0 auto !important;
    display:block !important;
    object-fit:contain !important;
}

#vsd-ir-slack a:hover{
    transform:translateY(-2px);
    background:#4A7028;
    box-shadow:0 12px 28px rgba(55,85,22,.52);
}

#vsd-ir-slack .vsd-slack-hint{
    margin:10px 0 0;
    color:#bbbbbb;
    font-size:13px;
}

#vsd-ir-slack a#vsd-ir-rocket-app,
#vsd-ir-rocket-app,
#vsd-install-rocket-app,
a[href*="go.rocket.chat"],
a[href*="rocketchat://"]{
    display:none !important;
}

@media (max-width:900px){
    #vsd-ir-slack{
        margin-top:28px;
    }
    #vsd-ir-slack a{
        width:100%;
        max-width:420px;
        font-size:15px;
    }
}

.card{

    text-decoration:none;

    background:#e8dcc8;

    border-radius:24px;

    padding:35px;

    color:#2a2118;

    transition:.25s;

    border:1px solid rgba(74,53,35,.16);

    box-shadow:0 10px 28px rgba(0,0,0,.22);

    display:flex;

    flex-direction:column;

    height:100%;

    box-sizing:border-box;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#d7a565;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

    background:#efe3cf;

}

/* Slot fijo: título y botón Entrar quedan a la misma altura en todas las cards */
.card .card-icon-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    width:110px;
    height:110px;
    margin:0 auto 28px;
    flex-shrink:0;
}

.card img,
.card .card-icon-slot img{

    width:110px;

    height:110px;

    object-fit:contain;

    display:block;

    margin:0 auto 28px;

    flex-shrink:0;

}

.card .card-icon-slot img{
    margin:0;
}

/* Mismo hueco que Archivador; scale solo rellena el padding del PNG (no mueve layout) */
#card-herramientas img.card-icon--rutina,
.card img.card-icon--rutina{
    width:110px;
    height:110px;
    margin:0;
    transform:scale(1.2);
}

.card h2{

    text-align:center;

    margin:0;

    font-size:24px;

    line-height:1.25;

    min-height:30px;

    flex-shrink:0;

}

.card p{

    color:#5c4e3f;

    line-height:1.5;

    text-align:center;

    margin:18px 0 30px;

    flex:1 1 auto;

}

#card-sesiones-home p.vsd-sesiones-restantes.is-ok{
    color:#2e7d32;
    font-weight:700;
}

.abrir,
.card .abrir{

    display:flex;

    justify-content:center;

    align-items:center;

    height:48px;

    border-radius:14px;

    background:#d7a565;

    color:#17120c;

    font-weight:700;

    transition:.2s;

    margin-top:auto;

    width:100%;

    flex-shrink:0;

    box-sizing:border-box;

}

.rambo-cta{
    display:none;
    max-width:760px;
    margin:0 auto 30px;
    padding:24px;
    border:1px solid rgba(215,165,101,.45);
    border-radius:20px;
    text-align:center;
    background:#1d2028;
}

.rambo-cta h2{
    margin:0 0 10px;
    color:#fff;
    font-size:24px;
}

.rambo-cta p{
    margin:0 0 18px;
    color:#c7c7c7;
}

.rambo-cta button{
    border:0;
    border-radius:12px;
    padding:13px 20px;
    background:#d7a565;
    color:#111;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

/* Solo exalumno / mensajes especiales (la ficha RPG es [vsd_identidad]) */
.mi-espacio-estado{
    max-width:760px;
    margin:0 auto 22px;
    padding:20px;
    border-radius:18px;
    text-align:center;
    background:#1d2028;
    border:1px solid rgba(255,255,255,.1);
}
.mi-espacio-estado[hidden]{display:none !important}
.mi-espacio-estado h2{
    margin:0 0 8px;
    color:#fff;
    font-size:22px;
}
.mi-espacio-estado p{
    margin:0;
    color:#c7c7c7;
}

.comunidad-cta{
    display:none;
    max-width:760px;
    margin:0 auto 30px;
    text-align:center;
}

.comunidad-cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:12px 20px;
    border-radius:12px;
    background:#d7a565;
    color:#111;
    font-weight:700;
    text-decoration:none;
}

#vsdPasaporteWrapper .texto-panel{
    max-width:680px;
    margin:0 auto 14px;
    padding:0;
    background:transparent;
    color:#3d2e1f !important;
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.55);
}
@media (max-width:768px){
    #vsdPasaporteWrapper .texto-panel{
        font-size:16px !important;
        margin-bottom:12px;
    }
}

#vsdRamboSolicitud{
    display:none;
    max-width:360px;
    margin:0 auto 20px;
    text-align:center;
}

#vsdRamboSolicitud p{
    margin:0 0 12px;
    color:#2f2116 !important;
    font-weight:700;
}

#vsdRamboSolicitud button{
    width:100%;
    min-height:48px;
    border:1px solid #2f2116;
    border-radius:12px;
    background:#2f2116;
    color:#fff;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

#vsdRamboSolicitud button:disabled{
    cursor:default;
    opacity:.72;
}

.comunidad-oferta{
    padding:28px;
    border:1px solid rgba(215,165,101,.45);
    border-radius:20px;
    background:#1d2028;
    color:#fff;
    text-align:left;
}

.comunidad-oferta h3{
    margin:0 0 8px;
    color:#fff;
    font-size:24px;
    text-align:center;
}

.comunidad-oferta-intro{
    margin:0 0 20px;
    color:#d7d7d7;
    line-height:1.5;
    text-align:center;
}

.comunidad-beneficios{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 18px;
    margin:0 0 24px;
    padding:0;
    list-style:none;
}

.comunidad-beneficios li{
    color:#ececec;
    font-size:14px;
    line-height:1.45;
}

.comunidad-beneficios strong{
    color:#d7a565;
}

.comunidad-planes{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.comunidad-cta .comunidad-plan{
    min-height:76px;
    flex-direction:column;
    gap:3px;
    text-align:center;
}

.comunidad-plan span{
    font-size:13px;
    font-weight:400;
}

.comunidad-plan-anual{
    background:#fff !important;
    color:#111 !important;
}

@media(max-width:600px){
    .comunidad-beneficios,
    .comunidad-planes{
        grid-template-columns:1fr;
    }
}

.exalumno-opciones{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    text-align:left;
}

.exalumno-opcion{
    padding:24px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:18px;
    background:#1d2028;
    color:#fff;
}

.exalumno-opcion h3{
    margin:0 0 8px;
    color:#fff;
    font-size:20px;
}

.exalumno-opcion p{
    margin:0 0 18px;
    color:#d7d7d7;
    line-height:1.5;
}

.renovacion-precio{
    display:grid;
    gap:7px;
    margin:0 0 18px;
    padding:14px;
    border-radius:12px;
    background:#292d38;
}

.renovacion-precio-linea{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#e7e7e7;
    font-size:14px;
}

.renovacion-precio-linea.descuento{
    color:#d7a565;
}

.renovacion-precio-linea.total{
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:17px;
    font-weight:700;
}

.exalumno-opcion button{
    width:100%;
    min-height:50px;
    border:0;
    border-radius:12px;
    background:#d7a565;
    color:#111;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.vsd-planes-modal{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:2147483000 !important;
    display:none;
    align-items:center;
    justify-content:center;
    padding:max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
    background:rgba(0,0,0,.78);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
    margin:0 !important;
    transform:none !important;
}

.vsd-planes-modal.abierto{
    display:flex !important;
}

html.vsd-planes-modal-open,
html.vsd-planes-modal-open body{
    overflow:hidden !important;
}

.vsd-planes-modal-contenido{
    position:relative;
    width:min(100%,520px);
    max-height:min(90vh, 90dvh);
    overflow:auto;
    margin:auto;
    padding:34px 28px 28px;
    border:1px solid #d7a565;
    border-radius:18px;
    background:#1d2028;
    color:#fff;
    text-align:center;
    flex-shrink:0;
}

.vsd-planes-modal-contenido h2{
    margin:0 0 8px;
    color:#fff;
}

.vsd-planes-modal-contenido p{
    margin:0 0 20px;
    color:#d7d7d7;
    line-height:1.5;
}

.vsd-modal-cerrar{
    position:absolute;
    top:12px;
    right:14px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.vsd-planes-modal .comunidad-plan{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:78px;
    padding:12px 16px;
    gap:3px;
    border:1px solid #d7a565;
    border-radius:12px;
    background:#d7a565;
    color:#111 !important;
    font-weight:700;
    text-decoration:none;
}

.vsd-planes-modal .comunidad-plan span{
    color:#111 !important;
    font-size:13px;
    font-weight:400;
}

.vsd-planes-modal .comunidad-plan-anual{
    border-color:#fff;
    background:#fff !important;
}

.vsd-beneficio-comunidad{
    width:100%;
    margin-top:12px;
    padding:13px;
    border:1px solid #d7a565;
    border-radius:12px;
    background:#292d38;
    color:#fff;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

@media(max-width:700px){
    .exalumno-opciones{
        grid-template-columns:1fr;
    }
}

.pasaporte-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    padding:24px 16px;
    background:rgba(0,0,0,.8);
}

.pasaporte-modal.open{
    display:flex;
}

.pasaporte-modal-close{
    display:block;
    position:absolute;
    top:20px;
    left:20px;
    border:0;
    padding:8px 0;
    background:transparent;
    color:#d7a565;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.pasaporte-modal #vsdPasaporteWrapper{
    width:min(92vw,760px);
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    margin:0;
}

/* Popup sello: overlay full-screen centrado (sin tocar position del body) */
#vsdPopupSello.is-open{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:fixed !important;
    inset:0 !important;
    z-index:2147483646 !important;
    transform:none !important;
    margin:0 !important;
}

#vsdPopupSello .vsdPopupSelloContenido{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:min(100%,540px) !important;
    max-height:min(88dvh, 88vh) !important;
    overflow-y:auto !important;
    scrollbar-width:none;
    box-sizing:border-box !important;
    margin:0 auto !important;
}
#vsdPopupSello .vsdPopupSelloContenido::-webkit-scrollbar{
    display:none;
}

#vsdPopupSello #popupSelloTitulo,
#vsdPopupSello #popupSelloDescripcion,
#vsdPopupSello #popupMensaje{
    color:#24180f !important;
}

#vsdPopupSello #popupSelloTitulo{
    font-weight:800 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
}

#vsdPopupSello #popupSelloDescripcion{
    line-height:1.5;
    font-weight:600;
    text-shadow:0 1px 0 rgba(255,255,255,.28);
}

#vsdPopupSello #popupMotivo{
    width:100%;
    min-height:72px;
    max-height:72px;
    margin:10px 0 12px;
    padding:10px 12px;
    border:1px solid rgba(36,24,15,.28);
    border-radius:12px;
    background:rgba(255,255,255,.82);
    color:#24180f;
    font:inherit;
    font-weight:600;
    box-sizing:border-box;
}

.card:hover .abrir{

    background:#c99a52;

    color:#17120c;

}

.card.bloqueado{
    position:relative;
    opacity:.6;
    filter:grayscale(100%);
    cursor:default;
    pointer-events:none;
}

/* Admin: sigue viéndose bloqueada, pero se puede pulsar */
.card.bloqueado.bloqueado--admin-ok{
    pointer-events:auto;
    cursor:pointer;
}

/* Beta programa: jugable y marcada como beta */
.card.bloqueado.bloqueado--beta-ok{
    pointer-events:auto;
    cursor:pointer;
    opacity:1;
    filter:none;
}
.card.bloqueado.bloqueado--beta-ok::after{
    content:"BETA programa";
    background:#1d2a22;
    color:#d7e7c8;
    border:1px solid rgba(180,210,150,.35);
}
/* .abrir de beta se define más abajo (después de .card.bloqueado .abrir) */

/* Popup temporal · aviso beta Antivirus en Home */
.vsd-av-beta-home{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.72);
    box-sizing:border-box;
}
.vsd-av-beta-home.is-open,
#vsd-av-beta-home.is-open{
    display:flex !important;
}
.vsd-av-beta-home[hidden]{ display:none !important; }
html.vsd-av-beta-home-open,
html.vsd-av-beta-home-open body{
    overflow:hidden;
}
.vsd-av-beta-home__card{
    width:min(440px, 100%);
    padding:26px 22px 20px;
    border-radius:16px;
    background:#14120f;
    border:1px solid rgba(255,255,255,.12);
    color:#f5f1ea;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.vsd-av-beta-home__tag{
    margin:0 0 10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#c9b27a;
}
.vsd-av-beta-home__card h2,
#vsd-av-beta-home-title{
    margin:0 0 12px;
    font-size:clamp(22px, 4vw, 28px);
    font-weight:700;
    line-height:1.15;
    color:#fff !important;
}
.vsd-av-beta-home__p{
    margin:0 0 10px;
    font-size:15px;
    line-height:1.45;
    color:rgba(245,241,234,.82);
}
.vsd-av-beta-home__actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}
.vsd-av-beta-home__btn{
    appearance:none;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.06);
    color:#f5f1ea;
    border-radius:10px;
    padding:12px 16px;
    font:650 14px/1 system-ui, sans-serif;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
}
.vsd-av-beta-home__btn--main{
    background:#c99a52;
    border-color:#c99a52;
    color:#17120c;
    flex:1 1 160px;
}
.vsd-av-beta-home__btn:hover{
    filter:brightness(1.06);
}

.card.bloqueado::after{
    content:"🔒 Próximamente";
    position:absolute;
    top:18px;
    right:18px;
    background:#d7a565;
    color:#111;
    font-weight:700;
    font-size:13px;
    padding:6px 12px;
    border-radius:999px;
}

.card.bloqueado .abrir{
    background:#555;
    color:#ddd;
}

.card.bloqueado:hover{
    transform:none;
    border-color:rgba(74,53,35,.16);
    box-shadow:0 10px 28px rgba(0,0,0,.22);
    background:#e8dcc8;
}

/* Beta / admin jugable: mismo hover que el resto de cards */
.card.bloqueado.bloqueado--beta-ok .abrir,
.card.bloqueado.bloqueado--admin-ok .abrir{
    background:#d7a565;
    color:#17120c;
}
.card.bloqueado.bloqueado--beta-ok:hover,
.card.bloqueado.bloqueado--admin-ok:hover{
    transform:translateY(-8px);
    border-color:#d7a565;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    background:#efe3cf;
}
.card.bloqueado.bloqueado--beta-ok:hover .abrir,
.card.bloqueado.bloqueado--admin-ok:hover .abrir{
    background:#c99a52;
    color:#17120c;
}

@media(max-width:900px){

.grid{
    grid-template-columns:1fr;
}

.panel{
    padding:30px;
}

.titulo{
    font-size:30px;
}

.titulo img{
    width:min(120px,40vw);
}

}

/*
 * Home mobile layout: the old 20px wrapper plus 30px panel padding left
 * content only ~260px wide on a 360px device. Keep the page gutter in one
 * place (the wrapper) so every Home block can use the same usable width.
 */
@media (max-width:720px){
    html:has(#contenidoVSD[data-vsd-hub-mode="catalog"]),
    body:has(#contenidoVSD[data-vsd-hub-mode="catalog"]){
        overflow-x:clip;
    }

    #contenidoVSD.wrapper{
        width:100%;
        min-width:0;
        padding:12px;
        overflow-x:clip;
    }

    #contenidoVSD .panel{
        width:100%;
        min-width:0;
        margin:0;
        padding:28px 0 32px;
    }

    #contenidoVSD .panel > *,
    #contenidoVSD .grid,
    #contenidoVSD .grid > *,
    #contenidoVSD .comunidad-cta,
    #contenidoVSD .mi-espacio-estado,
    #contenidoVSD #vsd-ir-slack,
    #contenidoVSD #vsdPasaporteWrapper,
    #contenidoVSD #inf-home-entry,
    #contenidoVSD #vsd-identidad{
        min-width:0;
        max-width:100%;
        width:100%;
        box-sizing:border-box;
    }

    #contenidoVSD .subtitulo{
        margin-bottom:32px;
        padding-inline:4px;
    }

    #contenidoVSD .grid{
        gap:16px;
        margin-top:20px;
    }

    #contenidoVSD .card{
        width:100%;
        padding:26px 20px;
    }

    /* Slack is a primary Home block, not a 420px desktop-sized button. */
    #contenidoVSD #vsd-ir-slack{
        width:100%;
        max-width:none;
        margin-top:24px;
    }

    #contenidoVSD #vsd-ir-slack a{
        width:100%;
        max-width:none;
    }

    #contenidoVSD .mi-espacio-estado,
    #contenidoVSD .comunidad-cta,
    #contenidoVSD .rambo-cta{
        width:100%;
        max-width:none;
    }

    #contenidoVSD .comunidad-oferta,
    #contenidoVSD .exalumno-opcion{
        padding:20px 16px;
    }

    #contenidoVSD .renovacion-precio-linea{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    #contenidoVSD img,
    #contenidoVSD canvas{
        max-width:100%;
    }

    #vsd-slack-onboarding,
    #vsd-genero-onboarding{
        width:100%;
        min-width:0;
        padding:24px 0 32px;
    }

    .vsd-slack-onboarding-card,
    .vsd-genero-onboarding-card{
        width:100% !important;
        max-width:none !important;
        min-width:0;
        padding:24px 16px !important;
    }
}

#contenidoVSD.vsd-slack-onboarding-activo .panel{
    display:none!important;
}

#vsd-slack-onboarding{
    display:none;
    min-height:70vh;
    padding:36px 18px;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
}

.vsd-slack-onboarding-card{
    width:min(100%,560px);
    padding:34px;
    border:1px solid rgba(215,165,101,.5);
    border-radius:22px;
    background:#161616;
    color:#fff;
    box-shadow:0 16px 48px rgba(0,0,0,.2);
    text-align:center;
}

.vsd-slack-onboarding-icon{font-size:40px}
.vsd-slack-onboarding-kicker{margin:12px 0 6px;color:#d7a565;font-size:12px;font-weight:800;letter-spacing:.09em}
.vsd-slack-onboarding-card h2{margin:0 0 14px;font-size:28px;color:#fff!important}
.vsd-slack-onboarding-card p{color:#e4e4e4!important;line-height:1.55}
.vsd-slack-onboarding-email{margin:22px 0 10px;padding:15px;border-radius:12px;background:#fff;color:#171717}
.vsd-slack-onboarding-email span{display:block;font-size:13px}
.vsd-slack-onboarding-email strong{display:block;overflow-wrap:anywhere;font-size:17px;margin:6px 0 10px}
.vsd-slack-onboarding-copiar{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #ddd;
  background:#f4f4f4;
  color:#171717;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.vsd-slack-onboarding-copiar:hover{background:#ececec}
.vsd-slack-onboarding-note{font-size:13px}
.vsd-slack-onboarding-pasos{
  margin:18px 0 8px;
  padding:0 0 0 1.2em;
  text-align:left;
  color:#e4e4e4;
  font-size:14px;
  line-height:1.55;
}
.vsd-slack-onboarding-pasos li{margin:0 0 8px}
#vsd-slack-onboarding-join,
#vsd-slack-onboarding-confirmar{
  display:flex;
  width:100%;
  min-height:50px;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-radius:10px;
  font:inherit;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
#vsd-slack-onboarding-join{
  margin-top:18px;
  background:#4A154B;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
#vsd-slack-onboarding-join:hover{background:#611f69;color:#fff}
#vsd-slack-onboarding-confirmar{
  margin-top:10px;
  border:1px solid #fff;
  background:transparent;
  color:#fff;
}
#vsd-slack-onboarding-confirmar:disabled{cursor:not-allowed;opacity:.45}
#vsd-slack-onboarding-status{min-height:22px;margin:14px 0 0;font-size:14px;color:#d7a565!important}

#vsd-genero-onboarding{
    display:none;
    position:fixed;
    inset:0;
    z-index:2147483000;
    min-height:100vh;
    min-height:100dvh;
    padding:28px 14px 40px;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    overflow:auto;
    background:rgba(8,6,4,.82);
}
#contenidoVSD.vsd-genero-onboarding-activo .panel{
    display:none!important;
}
#contenidoVSD.vsd-genero-onboarding-activo #vsd-genero-onboarding{
    display:flex!important;
}
.vsd-genero-onboarding-card{
    width:min(100%,720px)!important;
    max-width:720px;
    padding:28px 22px 26px!important;
}
.vsd-genero-onboarding-card h2{
    font-size:clamp(22px,4.2vw,28px)!important;
}
.vsd-genero-onboarding-card > p{
    max-width:34rem;
    margin-left:auto;
    margin-right:auto;
}
.vsd-genero-opciones{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:26px;
    align-items:end;
    max-width:22rem;
    margin-left:auto;
    margin-right:auto;
}
.vsd-genero-opt[data-genero="no_binario"],
.vsd-id-pronombre-opt[data-genero="no_binario"]{
    display:none !important;
}
.vsd-genero-opt{
    appearance:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100%;
    margin:0;
    padding:10px 8px 12px;
    box-sizing:border-box;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:#161616;
    color:#fff;
    font:inherit;
    cursor:pointer;
    transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.vsd-genero-opt:hover,
.vsd-genero-opt:focus{
    background:#1c1c1c;
    border-color:rgba(226,179,90,.75);
    outline:none;
    transform:translateY(-3px);
}
.vsd-genero-opt:hover .vsd-genero-opt-frame,
.vsd-genero-opt:focus .vsd-genero-opt-frame{
    border-color:rgba(226,179,90,.55);
}
/* Caps en CSS-px ≤ ~asset/2 para no estirar el PNG 309px en pantallas retina */
.vsd-genero-opt-frame{
    display:block;
    width:100%;
    max-width:148px;
    border-radius:12px;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.12);
}
.vsd-genero-opt-frame img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center center;
    image-rendering:auto;
}
.vsd-genero-opt-label{
    font-size:15px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:lowercase;
    color:#e2b35a;
}
.vsd-genero-opt:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}
#vsd-genero-onboarding-status{
    min-height:22px;
    margin:16px 0 0;
    font-size:14px;
    color:#d7d7d7;
}

/* —— Onboarding foto + sync Slack —— */
#vsd-foto-onboarding{
    display:none;
    position:fixed;
    inset:0;
    z-index:2147483000;
    min-height:100vh;
    min-height:100dvh;
    padding:28px 14px 40px;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    overflow:auto;
    background:rgba(8,6,4,.82);
}
#contenidoVSD.vsd-foto-onboarding-activo .panel{
    display:none!important;
}
.vsd-foto-onboarding-card{
    width:min(100%,440px)!important;
    max-width:440px;
    text-align:center;
}
.vsd-foto-onboarding-lead{
    max-width:28rem;
    margin-left:auto;
    margin-right:auto;
}
.vsd-foto-onboarding-preview-wrap{
    width:148px;
    height:148px;
    margin:22px auto 18px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(226,179,90,.55);
    background:#1a1510;
    display:flex;
    align-items:center;
    justify-content:center;
}
.vsd-foto-onboarding-preview{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.vsd-foto-onboarding-placeholder{
    font-size:13px;
    font-weight:700;
    color:rgba(255,255,255,.45);
    padding:12px;
}
.vsd-foto-onboarding-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
}
.vsd-foto-onboarding-btn{
    appearance:none;
    width:100%;
    min-height:48px;
    border-radius:12px;
    border:none;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    padding:12px 16px;
}
.vsd-foto-onboarding-btn--primary{
    background:#e2b35a;
    color:#1a1510;
}
.vsd-foto-onboarding-btn--primary:hover{
    background:#f0c56e;
}
.vsd-foto-onboarding-btn--slack{
    background:#611f69;
    color:#fff;
}
.vsd-foto-onboarding-btn--slack:hover{
    background:#7a2a84;
}
.vsd-foto-onboarding-btn--skip{
    background:transparent;
    color:rgba(242,235,224,.75);
    border:1px solid rgba(255,255,255,.22);
}
.vsd-foto-onboarding-btn--skip:hover{
    color:#fff;
    border-color:rgba(255,255,255,.4);
}
.vsd-foto-onboarding-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}
#vsd-foto-onboarding-status{
    min-height:22px;
    margin:14px 0 0;
    font-size:14px;
    color:#d7a565!important;
}

@media (max-width:640px){
    .vsd-genero-onboarding-card{
        padding:22px 14px 20px!important;
        border-radius:18px!important;
    }
    .vsd-genero-opciones{
        gap:8px;
        margin-top:20px;
    }
    .vsd-genero-opt{
        padding:8px 4px 10px;
        border-radius:14px;
        gap:8px;
    }
    .vsd-genero-opt-frame{
        max-width:120px; /* no 100%: en móvil ancho de columna > asset/DPR → pixelado */
        border-radius:10px;
    }
    .vsd-genero-opt-label{
        font-size:13px;
        letter-spacing:.06em;
    }
}

@media (max-width:380px){
    .vsd-genero-opciones{
        gap:6px;
    }
    .vsd-genero-opt-label{
        font-size:12px;
    }
}

/* Campamento → Infiltrados: menos hueco debajo del panel (PC) */
#contenidoVSD #vsd-campamento-home .panel-campamento,
#contenidoVSD[data-vsd-hub-mode="catalog"] #vsd-campamento-home .panel-campamento{
    margin-bottom:24px !important;
}

/* Infiltrados Home: sin margen superior */
#contenidoVSD #inf-home-entry,
#contenidoVSD #inf-home-entry:not([hidden]),
#inf-home-entry:not([hidden]){
    display:block !important;
    max-width:760px;
    width:100%;
    margin:0 auto 14px !important;
    padding:0 !important;
    padding-top:0 !important;
    text-align:center;
    box-sizing:border-box;
}

#contenidoVSD.inf-home-no-rambo #vsd-ir-slack,
body.inf-home-no-rambo #vsd-ir-slack{
    margin-top:12px !important;
}

#contenidoVSD.inf-home-has-rambo #vsd-ir-slack,
body.inf-home-has-rambo #vsd-ir-slack{
    margin-top:24px !important;
}

#contenidoVSD.inf-home-has-rambo #vsd-ir-slack,
body.inf-home-has-rambo #vsd-ir-slack{
    margin-top:24px !important;
}

@media (max-width:900px){
    #contenidoVSD #inf-home-entry:not([hidden]),
    #inf-home-entry:not([hidden]){
        margin:10px auto 12px !important;
    }
    #contenidoVSD.inf-home-no-rambo #vsd-ir-slack,
    body.inf-home-no-rambo #vsd-ir-slack{
        margin-top:10px !important;
    }
}

/* Popup terapeutas (Sesiones individuales en Home) */
#vsd-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    padding:20px;
    backdrop-filter:blur(6px);
}
#vsd-popup{
    position:relative;
    width:100%;
    max-width:950px;
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:22px;
    padding:28px;
    padding-top:44px;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}
#vsd-popup .popup-header{
    text-align:center;
    margin:0 0 24px;
    padding:0 44px;
}
#vsd-popup .popup-header h2{
    margin:0;
    color:#111;
    font-size:26px;
    font-weight:700;
    line-height:1.25;
}
#popup-sesiones-status{
    margin:10px 0 0;
    font-size:15px;
    font-weight:700;
}
#popup-sesiones-status.is-ok{color:#2e7d32}
#popup-sesiones-status.is-empty{color:#64748b}
#cerrar-popup{
    appearance:none;
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    box-sizing:border-box;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    border:1px solid #1a1a1a;
    border-radius:10px;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    color:#fff;
}
#cerrar-popup:hover,
#cerrar-popup:focus{
    background:#2a2a2a;
    color:#fff;
    border-color:#111;
    outline:none;
}
#popup-terapeutas{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:20px;
}
.popup-terapeuta{
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:22px;
    background:#111827;
    text-align:center;
}
.terapeuta-foto{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:0 auto 14px;
    border:2px solid #f3f4f6;
}
.popup-terapeuta h3{
    margin:0 0 16px;
    color:#fff;
    font-size:18px;
}
.popup-terapeuta a{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:10px;
    padding:12px 14px;
    border-radius:10px;
    text-decoration:none;
    background:#cbd5e1;
    color:#0f172a;
    font-size:13px;
    font-weight:600;
}
.popup-terapeuta .pack{
    background:#334155;
    color:#e2e8f0;
    border:1px solid rgba(255,255,255,.08);
}
.loading-terapeutas{
    grid-column:1 / -1;
    text-align:center;
    font-weight:700;
    color:#111;
    padding:40px 0;
    font-size:16px;
}
@media (max-width:640px){
    #vsd-popup{padding:20px;padding-top:48px;border-radius:18px}
    #vsd-popup .popup-header{padding:0 40px;margin:0 0 18px}
    #vsd-popup .popup-header h2{font-size:22px}
    #cerrar-popup{top:10px;right:10px}
    #popup-terapeutas{grid-template-columns:1fr}
}