/* SONAR Clases 1.2.0 — estilos compartidos. Los valores de cada tarjeta viven en variables CSS inline validadas. */
.sonar-class-card,
.sonar-class-only-button{font-family:inherit}

.sonar-class-card{position:relative;display:flex;isolation:isolate;width:100%;padding:0;border:var(--sonar-border-width,0) var(--sonar-border-style,solid) var(--sonar-border-color,#dfe6e8);border-radius:var(--sonar-radius,20px);overflow:hidden;background:var(--sonar-card-bg,#19232c);color:var(--sonar-title-color,#fff);cursor:pointer;text-align:center;box-shadow:var(--sonar-shadow,0 14px 32px #12202b24);transition:transform .2s ease,box-shadow .2s ease;background-color .2s ease;box-sizing:border-box}
.sonar-class-card:hover{transform:translateY(var(--sonar-hover-lift,-4px));box-shadow:var(--sonar-shadow-hover,0 20px 38px #12202b24)}
.sonar-class-card:focus-visible,.sonar-class-only-button:focus-visible{outline:3px solid #078b55;outline-offset:5px}

.sonar-size-fixed{height:var(--sonar-height,390px)}
.sonar-size-wide{aspect-ratio:16/9;height:auto}
.sonar-size-square{aspect-ratio:1/1;height:auto}
.sonar-size-portrait{aspect-ratio:3/4;height:auto}

.sonar-class-photo,.sonar-class-placeholder,.sonar-class-shade{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sonar-class-photo{object-fit:cover;object-position:var(--sonar-image-position,center center)}
.sonar-class-placeholder{background:radial-gradient(ellipse at 25% 10%,#327a75,transparent 70%),linear-gradient(145deg,#21353b,#111c26)}
.sonar-class-shade{background:linear-gradient(var(--sonar-overlay-angle,180deg),var(--sonar-overlay-start,rgba(0,0,0,0)) 20%,var(--sonar-overlay-mid,rgba(0,0,0,.13)) 38%,var(--sonar-overlay-end,rgba(0,0,0,.73)) 100%)}

.sonar-class-play{position:relative;z-index:2;display:grid;place-items:center;width:var(--sonar-play-size,68px);height:var(--sonar-play-size,68px);border-radius:var(--sonar-play-radius,50px);background:var(--sonar-play-bg,#f5090a);color:var(--sonar-play-color,#fff);border:var(--sonar-play-border-width,0) solid var(--sonar-play-border,#fff);box-shadow:0 4px 15px #0002;flex:none;box-sizing:border-box;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.sonar-class-card:hover .sonar-class-play,.sonar-class-only-button:hover .sonar-class-play{background:var(--sonar-play-hover-bg,#f5090a);color:var(--sonar-play-hover-color,#fff);border-color:var(--sonar-play-hover-border,#fff)}
.sonar-class-play-icon{display:grid;place-items:center;width:var(--sonar-play-icon,38px);height:var(--sonar-play-icon,38px);font-size:var(--sonar-play-icon,38px);line-height:1;color:inherit}
.sonar-class-play-icon svg{display:block;width:100%;height:100%}.sonar-class-play-icon i{display:block;color:inherit;font-size:inherit;line-height:1}

.sonar-class-title{position:relative;z-index:2;display:block;width:100%;font-family:var(--sonar-title-font,inherit);font-size:var(--sonar-title-d,28px);font-weight:var(--sonar-title-weight,800);font-style:var(--sonar-title-style,normal);line-height:var(--sonar-title-line,1.2);letter-spacing:var(--sonar-title-spacing,0);text-align:var(--sonar-title-align,center);overflow-wrap:anywhere;color:var(--sonar-title-color,#fff)}

/* Portada: reproduce exactamente la estructura visual histórica por defecto. */
.sonar-layout-overlay{display:block}
.sonar-layout-overlay .sonar-class-content{position:relative;z-index:1;display:flex;width:100%;height:100%;padding:var(--sonar-pad-top,28px) var(--sonar-pad-right,18px) var(--sonar-pad-bottom,38px) var(--sonar-pad-left,18px);flex-direction:column;gap:26px;box-sizing:border-box}
.sonar-layout-overlay.sonar-content-vertical-top .sonar-class-content{justify-content:flex-start}
.sonar-layout-overlay.sonar-content-vertical-center .sonar-class-content{justify-content:center}
.sonar-layout-overlay.sonar-content-vertical-bottom .sonar-class-content{justify-content:flex-end}
.sonar-layout-overlay .sonar-class-title{text-shadow:0 2px 5px #0005}
/*
 * En portada el PLAY queda anclado a la tarjeta, no al alto del título.
 * El hueco invisible mantiene intacta la composición del texto de 1.1.0,
 * pero una, dos o más líneas ya no desplazan verticalmente el botón.
 */
.sonar-layout-overlay .sonar-class-play{position:absolute;z-index:3}
.sonar-layout-overlay .sonar-class-play-space{display:block;width:var(--sonar-play-size,68px);height:var(--sonar-play-size,68px);flex:none;visibility:hidden;pointer-events:none}
.sonar-layout-overlay.sonar-play-align-left .sonar-class-play{left:var(--sonar-pad-left,18px);right:auto}
.sonar-layout-overlay.sonar-play-align-center .sonar-class-play{left:50%;right:auto;transform:translateX(-50%)}
.sonar-layout-overlay.sonar-play-align-right .sonar-class-play{right:var(--sonar-pad-right,18px);left:auto}
.sonar-layout-overlay.sonar-play-vertical-top .sonar-class-play{top:var(--sonar-pad-top,28px);bottom:auto}
.sonar-layout-overlay.sonar-play-vertical-center .sonar-class-play{top:50%;bottom:auto}
.sonar-layout-overlay.sonar-play-vertical-bottom .sonar-class-play{bottom:var(--sonar-pad-bottom,38px);top:auto}
.sonar-layout-overlay.sonar-play-align-center.sonar-play-vertical-center .sonar-class-play{transform:translate(-50%,-50%)}
.sonar-layout-overlay:not(.sonar-play-align-center).sonar-play-vertical-center .sonar-class-play{transform:translateY(-50%)}

/* Imagen arriba, texto debajo. */
.sonar-layout-below{flex-direction:column;height:auto;aspect-ratio:auto}
.sonar-layout-below.sonar-size-fixed{height:var(--sonar-height,390px)}
.sonar-class-media{position:relative;isolation:isolate;display:block;overflow:hidden;flex:none;background:var(--sonar-card-bg,#19232c)}
.sonar-layout-below.sonar-size-fixed .sonar-class-media{flex:1;min-height:0}
.sonar-layout-below.sonar-size-wide .sonar-class-media{aspect-ratio:16/9}
.sonar-layout-below.sonar-size-square .sonar-class-media{aspect-ratio:1/1}
.sonar-layout-below.sonar-size-portrait .sonar-class-media{aspect-ratio:3/4}
.sonar-class-textbox{position:relative;z-index:1;display:flex;flex:none;align-items:center;width:100%;padding:var(--sonar-pad-top,28px) var(--sonar-pad-right,18px) var(--sonar-pad-bottom,38px) var(--sonar-pad-left,18px);background:var(--sonar-card-bg,#19232c);box-sizing:border-box}
.sonar-layout-below .sonar-class-title{text-shadow:none}

/* Horizontal: imagen + texto. En móvil se convierte automáticamente en vertical. */
.sonar-layout-horizontal{flex-direction:row;height:auto;aspect-ratio:auto;text-align:left}
.sonar-layout-horizontal.sonar-size-fixed{height:var(--sonar-height,390px)}
.sonar-layout-horizontal .sonar-class-media{width:var(--sonar-media-width,48%);height:100%;min-height:220px}
.sonar-layout-horizontal.sonar-size-wide .sonar-class-media{aspect-ratio:16/9;height:auto}
.sonar-layout-horizontal.sonar-size-square .sonar-class-media{aspect-ratio:1/1;height:auto}
.sonar-layout-horizontal.sonar-size-portrait .sonar-class-media{aspect-ratio:3/4;height:auto}
.sonar-layout-horizontal .sonar-class-textbox{flex:1;align-items:center;min-width:0}
.sonar-layout-horizontal .sonar-class-title{text-shadow:none}
.sonar-layout-below.sonar-title-hidden .sonar-class-media,.sonar-layout-horizontal.sonar-title-hidden .sonar-class-media{width:100%;flex:1}

/* Posición del PLAY dentro de las zonas de imagen de los diseños below/horizontal. */
.sonar-layout-below .sonar-class-play,.sonar-layout-horizontal .sonar-class-play{position:absolute;z-index:3}
.sonar-layout-below.sonar-play-align-left .sonar-class-play,.sonar-layout-horizontal.sonar-play-align-left .sonar-class-play{left:var(--sonar-pad-left,18px);right:auto}
.sonar-layout-below.sonar-play-align-center .sonar-class-play,.sonar-layout-horizontal.sonar-play-align-center .sonar-class-play{left:50%;right:auto;transform:translateX(-50%)}
.sonar-layout-below.sonar-play-align-right .sonar-class-play,.sonar-layout-horizontal.sonar-play-align-right .sonar-class-play{right:var(--sonar-pad-right,18px);left:auto}
.sonar-layout-below.sonar-play-vertical-top .sonar-class-play,.sonar-layout-horizontal.sonar-play-vertical-top .sonar-class-play{top:var(--sonar-pad-top,28px);bottom:auto}
.sonar-layout-below.sonar-play-vertical-center .sonar-class-play,.sonar-layout-horizontal.sonar-play-vertical-center .sonar-class-play{top:50%;bottom:auto}
.sonar-layout-below.sonar-play-vertical-bottom .sonar-class-play,.sonar-layout-horizontal.sonar-play-vertical-bottom .sonar-class-play{bottom:var(--sonar-pad-bottom,38px);top:auto}
.sonar-layout-below.sonar-play-align-center.sonar-play-vertical-center .sonar-class-play,.sonar-layout-horizontal.sonar-play-align-center.sonar-play-vertical-center .sonar-class-play{transform:translate(-50%,-50%)}
.sonar-layout-below:not(.sonar-play-align-center).sonar-play-vertical-center .sonar-class-play,.sonar-layout-horizontal:not(.sonar-play-align-center).sonar-play-vertical-center .sonar-class-play{transform:translateY(-50%)}

/* Solo botón: sin tarjeta, fondo, título ni sombra. */
.sonar-class-only-wrap{display:block;width:100%;line-height:0}
.sonar-class-only-wrap.sonar-play-align-left{text-align:left}.sonar-class-only-wrap.sonar-play-align-center{text-align:center}.sonar-class-only-wrap.sonar-play-align-right{text-align:right}
.sonar-class-only-button{display:inline-grid;place-items:center;padding:0;margin:0;border:0;background:transparent;cursor:pointer;line-height:0;border-radius:var(--sonar-play-radius,50px)}
.sonar-class-only-button .sonar-class-play{display:grid}
.sonar-class-only-button:hover .sonar-class-play{transform:scale(1.04)}

/* Modal protegido. */
.sonar-class-dialog{padding:0;border:0;border-radius:18px;width:min(1000px,calc(100vw - 32px));max-width:1000px;max-height:calc(100dvh - 32px);background:#fff;color:#18262d;box-shadow:0 24px 90px #0007;font-family:system-ui,sans-serif}
/* v1.3.7: en navegadores modernos el modal aprovecha pantallas grandes (hasta 1600 px)
   sin exceder la altura disponible para un vídeo 16:9 + cabecera. La declaración
   anterior queda como fallback para navegadores sin min()/dvh modernos. */
.sonar-class-dialog.sonar-dialog-player{width:min(1600px,calc(100vw - 32px),calc(177.7778dvh - 200px));max-width:1600px}
.sonar-class-dialog::backdrop{background:#07131ddb;backdrop-filter:blur(5px)}
.sonar-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid #e5e9eb}
.sonar-dialog-header h2{margin:0;font:700 20px/1.35 system-ui,sans-serif;color:#18262d}
.sonar-dialog-close{display:grid;place-items:center;flex:none;border:0;border-radius:50%;width:38px;height:38px;background:#eef2f3;color:#263c47;font-size:28px;line-height:1;cursor:pointer}
.sonar-dialog-close:focus-visible,.sonar-action:focus-visible{outline:3px solid #148653;outline-offset:3px}
.sonar-dialog-body{min-height:180px}.sonar-video{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.sonar-dialog-message{max-width:680px;margin:auto;padding:60px 30px;text-align:center}.sonar-dialog-message p{font-size:19px;line-height:1.65;margin:18px 0 26px}.sonar-lock-label{display:inline-block;color:#08784b;font-size:12px;font-weight:800;letter-spacing:.1em;background:#edf8f1;padding:8px 12px;border-radius:30px}.sonar-dialog-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.sonar-action{padding:12px 22px;border-radius:8px;text-decoration:none!important;font-weight:700;line-height:1.5}.sonar-action.primary{background:#078349;color:#fff}.sonar-action.secondary{border:1px solid #cbd5da;color:#243e48;background:#fff}.sonar-loading{padding:55px 25px}.sonar-loading p{color:#56717b}

/* Catálogo del componente. El número de columnas aquí no afecta a SP Page Builder. */
.sonar-catalog{max-width:1440px;margin:20px auto 60px}.sonar-catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.sonar-search{display:flex;align-items:center;gap:10px;margin:28px 0;flex-wrap:wrap}.sonar-search input{padding:10px;border:1px solid #b9c9cb;border-radius:6px}.sonar-search button{padding:10px 20px;border:0;border-radius:6px;background:#078349;color:white}.sonar-pages{display:flex;justify-content:space-between;gap:20px;margin-top:30px}

@media(max-width:991px){
  .sonar-class-title{font-size:var(--sonar-title-t,var(--sonar-title-d,28px))}
  .sonar-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .sonar-class-title{font-size:var(--sonar-title-m,var(--sonar-title-d,28px))}
  .sonar-layout-horizontal,.sonar-layout-horizontal.sonar-size-fixed{flex-direction:column;height:auto}
  .sonar-layout-horizontal .sonar-class-media{width:100%;height:auto;aspect-ratio:16/9;min-height:0}
  .sonar-layout-horizontal .sonar-class-textbox{width:100%}
  .sonar-dialog-header{padding:14px}.sonar-dialog-header h2{font-size:17px}.sonar-dialog-message{padding:32px 20px}.sonar-dialog-message p{font-size:17px}
}
@media(max-width:550px){.sonar-catalog-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sonar-class-card,.sonar-class-play{transition:none}.sonar-class-card:hover{transform:none}.sonar-class-only-button:hover .sonar-class-play{transform:none}}

/* SONAR Clases 1.3.0 — reproductor multivídeo y marca de agua dinámica. */
.sonar-player-shell{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.sonar-player-shell .sonar-video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;background:#000}
.sonar-player-shell:fullscreen,.sonar-player-shell:-webkit-full-screen{width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.sonar-player-shell:fullscreen .sonar-video,.sonar-player-shell:-webkit-full-screen .sonar-video{width:100%;height:100%;object-fit:contain}
.sonar-video-watermark{position:absolute;z-index:8;display:flex;flex-direction:column;gap:2px;max-width:min(78%,620px);padding:7px 10px;border-radius:7px;background:rgba(0,0,0,.18);color:var(--sonar-wm-color,#078349);font-family:system-ui,sans-serif;font-size:var(--sonar-wm-size,16px);font-weight:700;line-height:1.25;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.9);opacity:var(--sonar-wm-opacity,.55);pointer-events:none;user-select:none;transition:top .5s ease,left .5s ease,right .5s ease,bottom .5s ease,transform .5s ease}
.sonar-video-watermark span{display:block;overflow-wrap:anywhere}
.sonar-video-watermark[data-position="tl"]{top:5%;left:4%;right:auto;bottom:auto;transform:none}
.sonar-video-watermark[data-position="tc"]{top:5%;left:50%;right:auto;bottom:auto;transform:translateX(-50%)}
.sonar-video-watermark[data-position="tr"]{top:5%;right:4%;left:auto;bottom:auto;transform:none}
.sonar-video-watermark[data-position="ml"]{top:50%;left:4%;right:auto;bottom:auto;transform:translateY(-50%)}
.sonar-video-watermark[data-position="mc"]{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
.sonar-video-watermark[data-position="mr"]{top:50%;right:4%;left:auto;bottom:auto;transform:translateY(-50%)}
.sonar-video-watermark[data-position="bl"]{bottom:5%;left:4%;right:auto;top:auto;transform:none}
.sonar-video-watermark[data-position="bc"]{bottom:5%;left:50%;right:auto;top:auto;transform:translateX(-50%)}
.sonar-video-watermark[data-position="br"]{bottom:5%;right:4%;left:auto;top:auto;transform:none}
.sonar-player-fullscreen{position:absolute;z-index:12;right:12px;bottom:12px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:8px;background:rgba(0,0,0,.58);color:#fff;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(3px)}
.sonar-player-fullscreen:hover,.sonar-player-fullscreen:focus-visible{background:rgba(0,0,0,.82);outline:2px solid #fff;outline-offset:2px}
@media(max-width:600px){.sonar-video-watermark{max-width:82%;padding:5px 7px;font-size:min(var(--sonar-wm-size,16px),13px)}.sonar-player-fullscreen{right:8px;bottom:8px;width:36px;height:36px;font-size:21px}}

/* SONAR Player 2.0 — FWDEVPlayer gestiona íntegramente los controles de YouTube. */
/* Beta 8: only the SONAR YouTube dialog is draggable. All other player engines unaffected. */
.sonar-dialog-brand{display:flex;min-width:0;align-items:center;gap:14px;flex:1}
.sonar-dialog-brand h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sonar-dialog-logo{display:block;flex:none;max-width:118px;max-height:40px;width:auto;height:auto;object-fit:contain}
.sonar-dialog-logo[hidden]{display:none!important}
.sonar-class-dialog.sonar-dialog-youtube .sonar-dialog-header{cursor:grab;user-select:none;touch-action:none}
.sonar-class-dialog.sonar-dialog-youtube .sonar-dialog-header:active{cursor:grabbing}
.sonar-class-dialog.sonar-dialog-youtube .sonar-dialog-close{cursor:pointer;touch-action:auto}
.sonar-class-dialog.sonar-dialog-youtube.sonar-dialog-dragged{max-height:calc(100dvh - 12px)}
@media (max-width:720px),(pointer:coarse){
  .sonar-class-dialog.sonar-dialog-youtube .sonar-dialog-header{cursor:default;touch-action:auto}
  .sonar-dialog-logo{max-width:84px;max-height:29px}
  .sonar-dialog-brand{gap:8px}
}

@media (min-width:721px) and (pointer:fine){
  .sonar-class-dialog.sonar-dialog-player.sonar-dialog-youtube{
    width:min(1400px,calc(100vw - 96px),calc(177.7778dvh - 200px));
  }
}


/* SONAR Player 2.0 — FWDEVPlayer compartido con SONAR LMS */
.sonar-provider-youtube.sonar-player-shell:has(.sonar-lms-player-mount){overflow:hidden}
.sonar-lms-player-mount{position:absolute;inset:0;width:100%;height:100%;background:#000}
.sonar-lms-player-holder{position:relative;width:100%;height:100%;min-height:160px}
.sonar-lms-pending{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;background:#0c1915;color:#f3fff6;font:600 15px/1.4 system-ui,sans-serif}
@media(max-width:600px){.sonar-lms-pending{font-size:13px;padding:12px;text-align:center}}

/* Evita que la marca de agua cubra la barra de reproducción del LMS. */
.sonar-provider-youtube .sonar-video-watermark[data-position="bl"],
.sonar-provider-youtube .sonar-video-watermark[data-position="bc"],
.sonar-provider-youtube .sonar-video-watermark[data-position="br"]{bottom:84px}
@media(max-width:600px){
 .sonar-provider-youtube .sonar-video-watermark[data-position="bl"],
 .sonar-provider-youtube .sonar-video-watermark[data-position="bc"],
 .sonar-provider-youtube .sonar-video-watermark[data-position="br"]{bottom:75px}
}


/* FWDUVP · SONAR Classes 2.1: loaded only after access/OTP. */
.sonar-uvp-holder{width:100%;max-width:100%;min-width:0}
.sonar-uvp-pending{padding:20px;color:#fff;text-align:center;background:#101820}
.sonar-provider-youtube{position:relative;min-width:0}


/* SONAR Clases 2.1.0 Beta 4 — La ventana y FWDUVP comparten geometría.
   El motor nunca debe quedar limitado a 1170px dentro de una ventana de 1400px. */
.sonar-class-dialog.sonar-dialog-player.sonar-dialog-youtube.sonar-uvp-active{
  width:min(var(--sonar-uvp-max-width,1170px),calc(100vw - 96px),calc(177.7778dvh - 200px));
  max-width:calc(100vw - 32px);
}
.sonar-class-dialog.sonar-uvp-active .sonar-provider-youtube.sonar-player-shell{
  aspect-ratio:var(--sonar-uvp-aspect,16 / 9);
}
.sonar-class-dialog.sonar-uvp-active .sonar-player-shell:fullscreen,
.sonar-class-dialog.sonar-uvp-active .sonar-player-shell:-webkit-full-screen{
  aspect-ratio:auto;
}
@media (max-width:720px),(pointer:coarse){
  .sonar-class-dialog.sonar-dialog-player.sonar-dialog-youtube.sonar-uvp-active{
    width:min(var(--sonar-uvp-max-width,1170px),calc(100vw - 32px));
  }
}


/* SONAR Clases 2.1.0 Beta 5 — Marca de agua dentro de la capa fullscreen FWDUVP.
   FWDUVP entra en pantalla completa con .fwduvp, no con .sonar-player-shell. */
.fwduvp > .sonar-video-watermark.sonar-uvp-watermark {
  position:absolute;
  z-index:2147483647;
  pointer-events:none;
  user-select:none;
}
.fwduvp:fullscreen > .sonar-video-watermark.sonar-uvp-watermark,
.fwduvp:-webkit-full-screen > .sonar-video-watermark.sonar-uvp-watermark {
  z-index:2147483647;
}