:root{
  --rojo:#E01F26;
  --tinta:#111417;
  --blanco:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--blanco);
  background:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

.page{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(32px,7vw,72px) 24px;overflow:hidden;
}
.page__bg{position:absolute;inset:0;z-index:-2}
.page__bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.page::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,13,16,.82) 0%,rgba(10,13,16,.62) 45%,rgba(10,13,16,.86) 100%);
}

.wrap{
  width:100%;max-width:640px;text-align:center;
  animation:sube .8s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wrap{animation:none}}

.logo{
  width:clamp(180px,26vw,250px);height:auto;margin:0 auto clamp(26px,4vw,38px);
  background:var(--blanco);padding:14px 16px;border-radius:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
}

.eyebrow{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rojo);margin-bottom:10px;
}

h1{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(2.6rem,8vw,4.4rem);line-height:1.02;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 18px;
}
h1::after{
  content:"";display:block;width:74px;height:4px;background:var(--rojo);
  margin:20px auto 0;border-radius:2px;
}

.lead{
  font-size:clamp(1rem,2.2vw,1.12rem);line-height:1.65;
  color:rgba(255,255,255,.86);margin:0 auto clamp(30px,4.5vw,40px);max-width:44ch;
}

.mail{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 28px;border-radius:999px;
  background:var(--rojo);color:var(--blanco);
  font-weight:600;font-size:clamp(.95rem,2.3vw,1.05rem);text-decoration:none;
  box-shadow:0 12px 30px rgba(224,31,38,.38);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  word-break:break-word;
}
.mail svg{width:20px;height:20px;flex:none}
.mail:hover,.mail:focus-visible{
  background:#c4161c;transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(224,31,38,.5);
}
.mail:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:3px}

@media (max-width:420px){
  .mail{padding:14px 20px;gap:9px}
}