/* Reset y tipos */
* { margin:0; padding:0; box-sizing:border-box; }
body, html { height:100%; font-family: Arial, sans-serif; }

/* Video de fondo */
.video-background {
  position: relative;
  height: 80vh;
  overflow: hidden;
}
#bg-video {
  position: absolute;
  top:50%; left:50%;
  min-width:100%; min-height:100%;
  transform: translate(-50%, -50%);
}
.overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding-top: 30vh;
}
.btn {
  display: inline-block;
  background: #e50914;
  color: white;
  padding: 1em 2em;
  margin-top: 1em;
  text-decoration: none;
  border-radius: 4px;
}

/* Navegación */
header { position: absolute; top:0; width:100%; z-index:5;}
nav {
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(0,0,0,0.5); padding:10px 20px;
}
.logo { font-size:1.2em; color:white; text-decoration:none;}
.menu { list-style:none; display:flex; }
.menu li { margin-left:20px; }
.menu a, .user-actions a { color:white; text-decoration:none; }

/* Secciones */
main { padding:40px 20px; }
#garantias .cards { display:flex; gap:20px; margin-top:20px;}
.card { background:#f5f5f5; padding:20px; border-radius:8px; flex:1; }
#contacto form { max-width:400px; margin:auto; display:flex; flex-direction:column; gap:15px;}
#contacto input[type="text"], #contacto input[type="tel"] { padding:8px; width:100%; border:1px solid #ccc; border-radius:4px; }

/* Footer */
footer {
  background:#222; color:white; padding:20px;
  text-align:center; margin-top:40px;
}
footer ul { list-style:none; display:flex; justify-content:center; gap:15px; margin-top:10px;}
footer a { color:white; text-decoration:none; }

/* Header fijo */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

/* Barra de navegación */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 40px;
}

/* Logo izquierdo justificado a la izquierda */
.logo-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}

/* Logo centrado (MasterChef) */
.logo-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* Botones a la derecha */
.user-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.logo-img {
  height: 120px;
  width: auto;
  object-fit: contain;
}

.user-actions a {
  color: white;
  text-decoration: none;
  font-size: 14px;
}