:root{
  --topbar-h: 0px; /* JS lo calcula */
}
* {
  font-family: "Lora" !important;
  font-optical-sizing: auto;
}
/* Reset home vs auth */
body.kc-home-page,
body.kc-home-page .kc-main{
  margin:0 !important;
  padding:0 !important;
}

body.kc-home-page .kc-main{
  max-width:none !important;
  width:100% !important;
  display:block !important;
}

/* Hero: bajo header */
.kc-home-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background:#0b2017;

  height: calc(100dvh - var(--topbar-h));
  max-height: calc(100dvh - var(--topbar-h));
}

@supports not (height: 100dvh){
  .kc-home-hero{
    height: calc(100vh - var(--topbar-h));
    max-height: calc(100vh - var(--topbar-h));
  }
}

/* Fondo blur (rellena sin barras negras en móvil) */
.kc-home-blur{
  position:absolute;
  inset:-20px; /* un poco más grande para que no se vean bordes del blur */
  background:#0b2017;
  z-index:0;
}

/* Video principal */
.kc-home-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  background:#0b2017;
}

/* Click layer */
.kc-home-click{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  cursor:pointer;
}

/* ===== DESKTOP: full-bleed sin barras ===== */
@media (min-width: 769px){
  .kc-home-video{
    object-fit: cover;
    object-position: center;
  }

  /* blur no se necesita en desktop */
  .kc-home-blur{ display:none; }
}

/* ===== MOBILE: ver completo sin recorte + fondo blur ===== */
@media (max-width: 768px){
  .kc-home-video{
    object-fit: contain;       /* ✅ NO recorta */
    object-position: center;
  }

  /* En móvil, hacemos un "falso cover" borroso detrás */
  .kc-home-blur{
    /* Usamos el mismo video como “imagen” de fondo si no quieres JS extra:
       La forma más simple sin duplicar video es un degradado + blur “suave”.
       Pero si quieres blur REAL del video, te dejo opción B abajo. */
    background: radial-gradient(900px 550px at 50% 45%, rgba(15,61,38,.55), rgba(0,0,0,.92));
    filter: blur(18px);
    opacity: .9;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .kc-home-video{ display:none; }
  .kc-home-blur{
    display:block;
    background: radial-gradient(900px 550px at 50% 45%, rgba(15,61,38,.55), rgba(0,0,0,.90));
    filter:none;
    opacity:1;
  }
}