:root{
  --azul:#07182f;
  --cyan:#00bde8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--azul);}
body{margin:0;background:var(--azul);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;color:#fff;}

.slide{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--azul);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}

.frame{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--azul);
}

.frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.portada .frame > img{
  width:100vw;
  height:100vh;
  object-fit:cover;
}

.hotspot,
.hotspot-slide{
  position:absolute;
  display:block;
  z-index:20;
  text-indent:-9999px;
  overflow:hidden;
}

/* Portada exacta aprobada por el usuario. Coordenadas relativas sobre la imagen 16:9. */
.hotspot-contacto{
  right:3.2%;
  bottom:4.2%;
  width:10.5%;
  height:6.5%;
  border-radius:999px;
}

.hotspot-flecha{
  left:42.1%;
  bottom:3.1%;
  width:5.2%;
  height:8.2%;
  border-radius:50%;
}

.nav-arrow{
  position:absolute;
  left:50%;
  bottom:3.2%;
  transform:translateX(-50%);
  z-index:30;
  width:56px;
  height:56px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  text-decoration:none;
  font-size:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  backdrop-filter:blur(6px);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-arrow:hover{background:var(--cyan);color:var(--azul);transform:translateX(-50%) scale(1.08);}

/* Hotspots de navegación sobre slides PNG */
.hotspot-utilities{left:2.5%;top:27.5%;width:46%;height:52%;}
.hotspot-usuarios{left:51.5%;top:27.5%;width:46%;height:52%;}
.hotspot-email{left:23%;top:66%;width:54%;height:10%;}
.hotspot-web{left:30%;top:75%;width:40%;height:8%;}

@media(max-width:800px){
  html{scroll-snap-type:y proximity;}
  .nav-arrow{width:44px;height:44px;font-size:28px;bottom:2.5%;}
  .frame > img{object-fit:cover;}
  
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .nav-arrow{transition:none;}
}