/* =========================================================
   CEMEXICANO VOCES · HOME DINÁMICA · v0.3.4
   Se integra con las clases visuales ya usadas en Divi.
   ========================================================= */

.cem-voces-home__notice{
  padding:16px 18px;
  color:#213868;
  background:#fff8e5;
  border:1px solid #f0d98a;
  border-radius:10px;
  font-size:14px;
  line-height:1.5;
}

/* PRINCIPAL */
.cem-voces-home-principal{width:100%}

.cem-voces-home-principal .cem-home-voces__video{
  position:relative;
  width:100%;
  min-height:0;
  aspect-ratio:16/9;
  display:block;
  overflow:hidden;
  padding:0;
  border:0;
  color:#fff !important;
  background:#081d40;
  border-radius:20px;
  text-decoration:none !important;
  text-align:left;
  font:inherit;
  cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.16);
  transition:transform .25s ease,box-shadow .25s ease;
}


.cem-voces-home-principal .cem-voces-home-principal__iframe{
  position:absolute;
  inset:0;
  z-index:10;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.cem-voces-home-principal .cem-home-voces__video.is-playing{
  transform:none !important;
  cursor:default;
}

.cem-voces-home-principal .cem-home-voces__video.is-playing > :not(.cem-voces-home-principal__iframe){
  visibility:hidden;
}

.cem-voces-home-principal .cem-home-voces__video:hover{
  transform:translateY(-4px);
  box-shadow:0 25px 55px rgba(0,0,0,.22);
}

.cem-voces-home-principal .cem-home-voces__video-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .55s ease;
}

.cem-voces-home-principal .cem-home-voces__video:hover .cem-home-voces__video-image{transform:scale(1.025)}

.cem-voces-home-principal .cem-home-voces__video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,20,43,.05) 20%,rgba(7,20,43,.20) 52%,rgba(7,20,43,.88) 100%);
}

.cem-voces-home-principal .cem-home-voces__badge{
  position:absolute;
  top:22px;
  left:24px;
  z-index:3;
  padding:9px 14px;
  color:#fff;
  background:var(--cem-red,#dd0b21);
  border-radius:7px;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  box-shadow:0 8px 20px rgba(221,11,33,.20);
}

.cem-voces-home-principal .cem-home-voces__play{
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  width:78px;
  height:78px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  color:var(--cem-red,#dd0b21);
  background:#fff;
  border-radius:50%;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:transform .22s ease,box-shadow .22s ease;
}

.cem-voces-home-principal .cem-home-voces__play svg{
  width:30px;
  height:30px;
  display:block;
  margin-left:4px;
}

.cem-voces-home-principal .cem-home-voces__video:hover .cem-home-voces__play{
  transform:translate(-50%,-50%) scale(1.07);
}

.cem-voces-home-principal .cem-home-voces__video-info{
  position:absolute;
  left:28px;
  right:28px;
  bottom:27px;
  z-index:3;
  display:block;
}

.cem-voces-home-principal .cem-home-voces__video-program{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:11px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  opacity:.80;
}

.cem-voces-home-principal .cem-home-voces__video-title{
  display:block;
  max-width:760px;
  color:#fff !important;
  font-size:24px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.2px;
}

.cem-voces-home-principal__meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
  color:rgba(255,255,255,.82);
  font-size:12px;
  line-height:1.4;
}

/* RECIENTES */
.cem-voces-home-recientes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.cem-voces-home-recientes .cem-home-featured__video-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid #e2e7ee;
  border-radius:15px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.cem-voces-home-recientes .cem-home-featured__video-card:hover{
  transform:translateY(-4px);
  border-color:rgba(33,56,104,.18);
  box-shadow:0 14px 30px rgba(22,48,89,.09);
}

.cem-voces-home-recientes__media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  display:block;
  padding:0;
  overflow:hidden;
  background:#101f3f;
  text-decoration:none !important;
}

.cem-voces-home-recientes__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .4s ease;
}

.cem-voces-home-recientes__media:hover img{transform:scale(1.035)}

.cem-voces-home-recientes .cem-home-featured__video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,22,47,.04),rgba(8,22,47,.38));
}

.cem-voces-home-recientes .cem-home-featured__play{
  position:absolute;
  top:50%;
  left:50%;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:50%;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .22s ease;
}

.cem-voces-home-recientes__media:hover .cem-home-featured__play{transform:translate(-50%,-50%) scale(1.08)}

.cem-voces-home-recientes .cem-home-featured__play > span{
  width:0;
  height:0;
  margin-left:3px;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--cem-red,#dd0b21);
}

.cem-voces-home-recientes .cem-home-featured__video-content{
  flex:1;
  padding:17px 17px 19px;
}

.cem-voces-home-recientes .cem-home-featured__video-tag{
  display:block;
  margin-bottom:7px;
  color:var(--cem-red,#dd0b21);
  font-size:10px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.cem-voces-home-recientes .cem-home-featured__video-content h3{
  margin:0 !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

.cem-voces-home-recientes .cem-home-featured__video-content h3 a{
  color:var(--cem-blue,#213868) !important;
  text-decoration:none !important;
}

.cem-voces-home-recientes__meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:10px;
  color:#7b8798;
  font-size:11px;
  line-height:1.35;
}

@media(max-width:800px){
  .cem-voces-home-recientes{grid-template-columns:1fr}
}

@media(max-width:600px){
  .cem-voces-home-principal .cem-home-voces__video{min-height:0;aspect-ratio:16/9;border-radius:16px}
  .cem-voces-home-principal .cem-home-voces__badge{top:17px;left:17px}
  .cem-voces-home-principal .cem-home-voces__play{width:66px;height:66px}
  .cem-voces-home-principal .cem-home-voces__video-info{left:20px;right:20px;bottom:21px}
  .cem-voces-home-principal .cem-home-voces__video-title{font-size:20px}
}


/* =========================================================
   REPRODUCTOR HOME + MINI REPRODUCTOR FLOTANTE · v0.3.6
   El iframe vive siempre en un host directo de <body>.
   No se vuelve a insertar ni se cambia de padre, por lo que
   YouTube conserva el punto exacto de reproducción.
   ========================================================= */

.cem-voces-home-principal__player-host{
  position:absolute !important;
  z-index:2147482999 !important;
  overflow:hidden;
  visibility:hidden;
  border-radius:20px;
  background:#000;
  box-shadow:0 20px 50px rgba(0,0,0,.16);
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  isolation:isolate;
}

.cem-voces-home-principal__player-host.is-ready{
  visibility:visible;
}

.cem-voces-home-principal__player-host .cem-voces-home-principal__iframe{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:#000 !important;
}

.cem-voces-home-principal__player-host.is-floating{
  position:fixed !important;
  left:auto !important;
  top:auto !important;
  right:24px !important;
  bottom:24px !important;
  width:min(420px,34vw) !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  z-index:2147483000 !important;
  border-radius:14px !important;
  box-shadow:0 18px 48px rgba(0,0,0,.34) !important;
}

.cem-voces-home-principal__floating-controls{
  position:fixed;
  right:24px;
  bottom:calc(24px + min(420px,34vw) * .5625 + 10px);
  z-index:2147483001 !important;
  display:none;
  align-items:center;
  gap:6px;
}

.cem-voces-home-principal__floating-controls.is-visible{
  display:flex;
}

.cem-voces-home-principal__floating-return,
.cem-voces-home-principal__floating-close{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  color:#fff;
  background:rgba(8,22,47,.92);
  font:700 19px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.cem-voces-home-principal__floating-return:hover,
.cem-voces-home-principal__floating-close:hover{
  background:#dd0b21;
}

@media(max-width:900px){
  .cem-voces-home-principal__player-host.is-floating{
    width:min(380px,46vw) !important;
  }

  .cem-voces-home-principal__floating-controls{
    right:24px;
    bottom:calc(24px + min(380px,46vw) * .5625 + 10px);
  }
}

@media(max-width:600px){
  .cem-voces-home-principal__player-host{
    border-radius:16px;
  }

  .cem-voces-home-principal__player-host.is-floating{
    right:14px !important;
    bottom:14px !important;
    width:calc(100vw - 28px) !important;
    max-width:380px !important;
    border-radius:12px !important;
  }

  .cem-voces-home-principal__floating-controls{
    right:14px;
    bottom:calc(14px + min(380px, calc(100vw - 28px)) * .5625 + 10px);
  }
}