*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080808}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:#fff}
a{color:inherit;text-decoration:none}

.hero,.bod-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% center;
  filter:brightness(1.025) contrast(1.02);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.07),rgba(0,0,0,.02) 48%,rgba(0,0,0,.34)),
    linear-gradient(to right,rgba(0,0,0,.24),rgba(0,0,0,.01) 56%);
}
.brand{
  position:absolute;
  top:max(24px,env(safe-area-inset-top));
  left:max(28px,env(safe-area-inset-left));
  z-index:3;
  font-size:clamp(18px,1.85vw,27px);
  font-weight:650;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

/* En escritorio dejamos el menú en la zona izquierda para no tapar a las personas. */
.main-menu{
  position:absolute;
  z-index:4;
  left:max(28px,env(safe-area-inset-left));
  bottom:max(32px,calc(env(safe-area-inset-bottom) + 22px));
  display:flex;
  gap:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,10,12,.44);
  backdrop-filter:blur(12px);
  border-radius:16px;
}
.menu-link{
  min-width:164px;
  min-height:62px;
  padding:10px 16px;
  border-radius:11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  transition:background .2s ease,transform .2s ease;
}
.menu-title{font-size:18px;font-weight:700;letter-spacing:.04em}
.menu-subtitle{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-2px);
  font-size:12px;
  color:rgba(255,255,255,.80);
  transition:max-height .22s ease,opacity .22s ease,transform .22s ease;
  white-space:nowrap;
}
.menu-link:hover,.menu-link:focus-visible{
  background:rgba(255,255,255,.14);
  transform:translateY(-2px);
  outline:none;
}
.menu-link:hover .menu-subtitle,.menu-link:focus-visible .menu-subtitle{
  max-height:22px;
  opacity:1;
  transform:none;
}

/* BOD: la imagen del vehículo es PNG transparente, así que funciona mejor como elemento central,
   no como fondo de pantalla. */
.bod-hero{
  background:#050505;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bod-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 54%,rgba(255,255,255,.08),transparent 36%),
    linear-gradient(to bottom,#090909 0%,#050505 55%,#010101 100%);
}
.bod-copy{
  position:absolute;
  z-index:3;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,92vw);
  text-align:center;
}
.bod-kicker{
  font-size:clamp(14px,1.4vw,21px);
  letter-spacing:.5em;
  margin-bottom:8px;
  opacity:.66;
}
.bod-copy h1{
  margin:0;
  font-weight:500;
  font-size:clamp(46px,7.8vw,122px);
  line-height:.92;
  letter-spacing:-.04em;
}
.bod-translation{
  margin:16px 0 0;
  font-size:clamp(17px,1.8vw,28px);
  font-weight:400;
  letter-spacing:.015em;
  color:rgba(255,255,255,.82);
  text-shadow:0 2px 16px rgba(0,0,0,.75);
}
.camper-wrap{
  position:absolute;
  z-index:2;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  width:min(86vw,1450px);
  display:flex;
  justify-content:center;
}
.camper-image{
  display:block;
  width:100%;
  height:auto;
  max-height:58vh;
  object-fit:contain;
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.65));
}
.bod-quote{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:max(38px,calc(env(safe-area-inset-bottom) + 24px));
  transform:translateX(-50%);
  width:min(980px,88vw);
  text-align:center;
}
.bod-quote p{
  margin:0;
  font-size:clamp(18px,2.2vw,31px);
  line-height:1.25;
  text-shadow:0 2px 20px rgba(0,0,0,.9);
}
.close-button{
  position:absolute;
  z-index:6;
  top:max(18px,env(safe-area-inset-top));
  right:max(20px,env(safe-area-inset-right));
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
  font-size:33px;
  font-weight:300;
  line-height:1;
  transition:background .2s ease,transform .2s ease;
}
.close-button:hover,.close-button:focus-visible{
  background:rgba(255,255,255,.15);
  transform:scale(1.04);
  outline:none;
}

@media (hover:none){
  .menu-subtitle{max-height:20px;opacity:.78;transform:none}
}
@media (max-width:760px){
  .hero-image{object-position:57% center}
  .brand{
    left:18px;
    top:max(18px,env(safe-area-inset-top));
    font-size:17px;
    letter-spacing:.08em;
  }
  .main-menu{
    width:calc(100% - 28px);
    left:14px;
    right:14px;
    bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));
    flex-direction:column;
    gap:4px;
    padding:7px;
  }
  .menu-link{
    width:100%;
    min-width:0;
    min-height:50px;
    flex-direction:row;
    justify-content:space-between;
    padding:9px 14px;
  }
  .menu-title{font-size:17px}
  .menu-subtitle{
    max-height:20px;
    opacity:.75;
    transform:none;
    white-space:normal;
    text-align:right;
  }

  .bod-copy{top:8%;width:92vw}
  .bod-copy h1{font-size:clamp(42px,14vw,76px)}
  .bod-translation{margin-top:10px;font-size:16px}
  .bod-kicker{font-size:13px}
  .camper-wrap{
    top:51%;
    width:96vw;
  }
  .camper-image{max-height:50vh}
  .bod-quote{
    width:90vw;
    bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));
  }
  .bod-quote p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}