/* =========================
   IndexSolar - YouTube Video Card (v1.1)
   - Portada + play por IMAGEN (normal/hover)
   - Play rectangular con borde configurable (CSS vars)
   - Sin borde de contorno del video (por defecto)
   ========================= */

.ix-video{
  /* Video card */
  --ix-radius: 24px;
  --ix-shadow: 0 14px 40px rgba(0,0,0,0.06);

  /* Play button (RECTANGULAR) */
  --ix-play-w: clamp(120px, 12vw, 180px);
  --ix-play-h: clamp(52px, 5.2vw, 72px);
  --ix-play-radius: 18px;

  --ix-play-border-w: 3px;
  --ix-play-border-color: rgba(94,163,59,0.45);

  /* Play images (se llenan por JS desde data-play / data-play-hover) */
  --ix-play-img: none;
  --ix-play-img-hover: none;

  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--ix-radius);
  overflow: hidden;

  background: #ffffff;
  border: none;
  box-shadow: var(--ix-shadow);

  background-size: cover;
  background-position: center;
}

.ix-video::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(29,43,83,0.35), rgba(29,43,83,0.10), rgba(29,43,83,0.00));
  pointer-events:none;
}

.ix-video__btn{
  position:absolute;
  inset:0;
  border:0;
  background: transparent;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
}

.ix-video__play{
  width: var(--ix-play-w);
  height: var(--ix-play-h);
  border-radius: var(--ix-play-radius);
  border: var(--ix-play-border-w) solid var(--ix-play-border-color);
  background-color: rgba(234,244,227,1);
  background-image: var(--ix-play-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  box-shadow: 0 18px 44px rgba(0,0,0,0.1);
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.ix-video__play:hover,
.ix-video__btn:focus-visible .ix-video__play{
  transform: scale(1.06); /* ZOOM (sin salto) */
  box-shadow: 0 26px 64px rgba(0,0,0,1);
  background-color: rgba(94,163,59,1);
  background-image: var(--ix-play-img-hover);
  border-color: rgba(94,163,59,0.75);
}

.ix-video__meta{
  position:absolute;
  left: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 26px);
  z-index: 2;
  color: #fff;
  display: grid;
  gap: 8px;
}

.ix-video__tag{
  display:inline-block;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  backdrop-filter: blur(8px);
}

.ix-video__title{
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -0.02em;
  text-shadow: 0 10px 26px rgba(0,0,0,0.25);
}

.ix-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index: 3;
}