.fullscreen-section {
  background: radial-gradient(circle at 70% 30%, #f7f5ef 0%, #e3e0d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Sutil textura de papel o grano */
.fullscreen-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-repeat: repeat;
}

/* CONTENEDOR DEL VIDEO */
.video-wrapper {
  padding: 64px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* VIDEO PANTALLA COMPLETA */
.fullscreen-video {
  width: 100%;
  height: 95dvh;
  border-radius: 48px 32px 56px 28px;
  object-fit: cover;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: #cfccc0;
  box-shadow:
    0 20px 35px -12px rgba(0, 0, 0, 0.25),
    0 1px 0 0 rgba(255, 255, 240, 0.6) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
  backdrop-filter: blur(0px);
  border: 1px solid rgba(230, 225, 210, 0.5);
  filter: saturate(0.98) contrast(1.02);
}

.video-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
  .video-wrapper {
    padding: 48px;
  }

  .video-overlay {
    border-radius: 36px 24px 42px 22px;
  }

  .fullscreen-video {
    border-radius: 36px 24px 42px 22px;
    height: auto;
    max-height: 80dvh;
    aspect-ratio: 16 / 9;
  }
}

/* Móviles grandes (600px - 768px) */
@media (max-width: 768px) {
  .video-wrapper {
    padding: 32px;
  }

  .video-overlay {
    border-radius: 28px 20px 32px 18px;
  }

  .fullscreen-video {
    border-radius: 28px 20px 32px 18px;
    height: auto;
    max-height: 70dvh;
    aspect-ratio: 16 / 9;
  }
}

/* Móviles pequeños (hasta 600px) */
@media (max-width: 600px) {
  .video-wrapper {
    padding: 20px;
  }

  .video-overlay {
    border-radius: 24px 16px 28px 14px;
  }

  .fullscreen-video {
    border-radius: 24px 16px 28px 14px;
    height: auto;
    max-height: 60dvh;
    aspect-ratio: 16 / 9;
    box-shadow:
      0 18px 28px -10px rgba(0, 0, 0, 0.3),
      0 1px 0 0 rgba(255, 255, 240, 0.5) inset;
  }

  .fullscreen-video:hover {
    transform: scale(1.006) translateY(-2px);
    box-shadow:
      0 22px 32px -12px rgba(0, 0, 0, 0.38),
      0 1px 0 0 rgba(255, 255, 240, 0.7) inset;
  }
}

/* Móviles muy pequeños (hasta 480px) */
@media (max-width: 480px) {
  .video-wrapper {
    padding: 16px;
  }

  .video-overlay {
    border-radius: 20px 14px 24px 12px;
  }

  .fullscreen-video {
    border-radius: 20px 14px 24px 12px;
    height: 75dvh;
  }
}

/* Orientación horizontal en móviles */
@media (max-width: 768px) and (orientation: landscape) {

  .video-overlay {
    border-radius: 28px 18px 32px 16px;
  }

  .fullscreen-video {
    max-height: 85dvh;
    border-radius: 28px 18px 32px 16px;
  }
}

/* Pantallas grandes (1440px y superiores) */
@media (min-width: 1440px) {
  .video-wrapper {
    padding: 80px;
  }

  .fullscreen-video {
    border-radius: 64px 44px 72px 38px;
    box-shadow:
      0 35px 55px -18px rgba(0, 0, 0, 0.35),
      0 2px 0 0 rgba(255, 255, 245, 0.7) inset,
      0 -1px 0 0 rgba(0, 0, 0, 0.03) inset;
  }
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.5) 75%,
      rgba(0, 0, 0, 0.8) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.05) 20%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.2) 80%,
      rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(135deg,
      rgba(218, 165, 32, 0.08) 0%,
      rgba(255, 215, 0, 0.03) 30%,
      rgba(0, 0, 0, 0) 70%);
}

.video-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0) 70%);
  border-radius: 16px;
  pointer-events: none;
  box-shadow:
    0 30px 45px -18px rgba(0, 0, 0, 0.4),
    0 4px 12px -4px rgba(0, 0, 0, 0.2),
    0 1px 0 0 rgba(255, 255, 240, 0.8) inset;
}