/* ===== Estilos originales ===== */
.oembed_container { display:inline-block; height:100%; position:relative; width:100%; }
.iframe_wrapper { height:0; padding-bottom:56.25%; padding-top:25px; position:relative; }
.oembed_container_iframe { height:100%; left:0; margin:0 auto; position:absolute; right:0; top:0; width:100%; }
.oembed_custom-thumbnail,
.oembed_custom-thumbnail:hover,
.oembed_custom-thumbnail:focus,
.oembed_custom-thumbnail:active {
  align-items:center; 
  appearance:none; 
  background-color:transparent;
  background-position:center center; 
  background-repeat:no-repeat; 
  background-size:cover;
  border-radius:0; 
  border:none; 
  display:flex; 
  height:100%; 
  justify-content:center;
  left:0; margin:0; padding:0; position:absolute; top:0; width:100%; z-index:1; cursor:pointer; transform: none !important;
}
.oembed_custom-thumbnail_icon { align-items:center; cursor:pointer; display:flex; justify-content:center; width:100%; }
.oembed_custom-thumbnail_icon svg { display:block; height:auto; width:12%; }
_:-ms-fullscreen, :root .oembed_custom-thumbnail_icon svg { max-width:none; }
.oembed_custom-thumbnail--hide { display:none; }

.embed_container { display:inline-block; height:100%; position:relative; width:100%; }
.embed_container iframe { left:0; max-height:100%; max-width:100%; position:absolute; right:0; top:0; }
.oembed-info { height:1px; left:-10000px; overflow:hidden; position:absolute; top:auto; width:1px; }

/* Placeholder (igual) */
:not(.hs-inline-edit) .hs-video-placeholder { display:none; }
.hs-inline-edit .hs-video-placeholder { background:#f5f8fa !important; border:1px dashed #516f90 !important; display:block !important; font-size:14px !important; margin:2px 1px !important; outline:1px dashed #fff !important; text-align:center !important; }
.hs-video-placeholder > * { box-sizing:border-box !important; display:block !important; margin:1px !important; padding:12px !important; width:calc(100% - 2px) !important; }
p.hs-video-placeholder__title { color:#7c98b6 !important; font-family:'Helvetica Neue','Helvetica',Arial,sans-serif !important; font-size:14px !important; font-style:italic !important; font-weight:700 !important; line-height:initial !important; margin-bottom:10px !important; margin-top:0 !important; padding:0 !important; text-shadow:0 -1px 0 hsla(0,0%,100%,.5) !important; }
p.hs-video-placeholder__description { color:#7c98b6 !important; font-family:'Helvetica Neue','Helvetica',Arial,sans-serif !important; font-style:italic !important; font-weight:400 !important; line-height:1.6 !important; margin:0 !important; text-shadow:0 -1px 0 hsla(0,0%,100%,.5) !important; }

/* ===== Modal (nuevo) ===== */
.hs-video-modal[aria-hidden="true"] { display:none; }
.hs-video-modal[aria-hidden="false"] {
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
}
.hs-video-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.hs-video-modal__dialog {
  position:relative; width:min(92vw, 100%); max-width:960px; margin:0 16px;
  background:#000; border-radius:12px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.35);
}
.hs-video-modal__content { width:100%; aspect-ratio:16/9; background:#000; }
.hs-video-modal__content iframe { width:100%; height:100%; display:block; border:0; }
.hs-video-modal__close {
  position:absolute; top:8px; right:8px; width:44px; height:44px;
  display:grid; place-items:center; border:0; border-radius:8px;
  background:rgba(0,0,0,.55); color:#fff; font-size:28px; line-height:1; cursor:pointer;
}
.hs-video-modal__close:hover { background:rgba(0,0,0,.7); }

/* Evitar scroll del body cuando hay modal abierto */
body.hs-video-open { overflow:hidden; }
/* ---------- Forzar formato cuadrado del thumbnail ---------- */
.oembed_container {
  /* el alto se calcula con aspect-ratio; puedes cambiar 1/1 por 16/9 si quisieras */
  aspect-ratio: var(--thumb-ratio, 1/1);
  height: auto; /* asegura que el alto lo resuelva el navegador */
}

/* ---------- Oscurecer el thumbnail (overlay) ---------- */
/* Mantiene el botón en absolute (el valor ya está declarado antes).
   Solo añadimos la máscara con ::after. */
.oembed_custom-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;          /* no bloquea el click */
  opacity: 1;
}
.oembed_custom-thumbnail:hover::after,
.oembed_custom-thumbnail:focus::after {
  opacity: .6;                   /* más oscuro en hover/focus */
}

/* Asegura que el ícono Play quede por encima del overlay */
.oembed_custom-thumbnail_icon {
  position: relative;
  z-index: 1;
}


/* Asegura que el ícono Play quede por encima del overlay */
.oembed_custom-thumbnail_icon {
  position: relative;
  z-index: 1;
}

/* Enlace secundario bajo el thumbnail */
.hs-video-helper {
  margin: 8px 0 0;      /* separa del bloque */
  text-align: center;   /* centrado */
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -70px;
}
.hs-video-open-link {
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}
.hs-video-open-link:hover,
.hs-video-open-link:focus {
  text-decoration-thickness: 2px;
  outline: none;
}
/* --- Asegurar bloque visible en mobile --- */
@media (max-width: 767px) {
  .oembed_container { display: block; width: 100%; }
}

/* --- Fallback si el navegador NO soporta aspect-ratio --- */
@supports not (aspect-ratio: 1 / 1) {
  /* Reservamos altura con el hack del padding */
  .oembed_container {
    position: relative;        /* ya lo tiene, redundante pero seguro */
    height: auto;
  }
  .oembed_container::before {
    content: "";
    display: block;
    padding-top: 100%;         /* 1:1 (cuadrado) como pediste */
  }
  /* El botón sigue ocupando todo el contenedor */
  .oembed_custom-thumbnail {
    position: absolute;        /* asegura que no se “caiga” al flujo */
    inset: 0;
  }
}

/* --- Por si algún estilo de tema “empuja” el layout en hover --- */
.oembed_custom-thumbnail,
.oembed_custom-thumbnail:hover,
.oembed_custom-thumbnail:focus {
  transform: none !important;
}

/* --- Overlay (oscurecedor) sin interferir el click --- */
.oembed_custom-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  opacity: 1;
}
.oembed_custom-thumbnail:hover::after,
.oembed_custom-thumbnail:focus::after {
  opacity: .6;
}

@media (max-width: 1080px) {

  .oembed_custom-thumbnail,
  .oembed_custom-thumbnail:hover,
  .oembed_custom-thumbnail:focus,
  .oembed_custom-thumbnail:active {
    position: relative;
  }

}