:root{
  --gold:#d79a17;
  --gold-light:#f1bd46;
  --green:#2f791d;
  --ink:#47351f;
  --white:#fff;
  --max:1500px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:var(--white);background:#24170f}
a{text-decoration:none;color:inherit}
.page-shell{position:relative;width:100%;height:100vh;overflow:hidden}

/* ========================= HEADER ========================= */
.site-header{
  position:absolute;z-index:20;top:0;left:0;right:0;height:108px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;
  padding:18px 4.5%;
  background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,0));
}
.brand{display:flex;align-items:center;min-width:0;width:min(360px,100%)}
.brand-logo{display:block;width:clamp(220px,20vw,350px);height:auto;max-height:78px;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.32))}
.main-nav{display:flex;gap:40px;align-self:center}
.main-nav a{position:relative;padding:18px 0 12px;font-size:16px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;opacity:.94}
.main-nav a:after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:3px;background:var(--gold-light);transform:translateX(-50%);transition:.25s ease}
.main-nav a:hover:after,.main-nav a.active:after{width:55px}
.socials{justify-self:end;display:flex;gap:20px}
.socials a{width:40px;height:40px;border:1.5px solid rgba(255,255,255,.9);border-radius:50%;display:grid;place-items:center;transition:.2s ease}
.socials a:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
.socials svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7}
.socials svg path:first-child{fill:#fff;stroke:none}
.socials .play{fill:#fff;stroke:none}

/* ========================= FONDO PRINCIPAL ========================= */
.landing-page,.hero{width:100%;height:100%;}
.hero{position:relative;overflow:hidden;background:url("assets/hero-background.jpg") center center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.hero.use-video .hero-video{display:block}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,16,.28) 0%,transparent 28%,rgba(25,12,3,.05) 55%,rgba(0,0,0,.36) 100%)}
.hero-content{position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;display:flex;align-items:flex-end;width:100%;max-width:var(--max);margin:auto;padding:0 7% 29vh}
.hero-copy{max-width:560px;text-shadow:0 3px 15px rgba(0,0,0,.65)}
.eyebrow{display:inline-block;padding:8px 14px;border:1px solid rgba(255,255,255,.65);background:rgba(65,35,13,.3);font-size:12px;letter-spacing:2px;font-weight:800}
.hero h1{font-family:Inter,serif;font-size:clamp(34px,4vw,62px);line-height:.98;margin:18px 0 12px}
.hero h1 span{color:#ffd16a}
.hero p{font-size:18px;max-width:480px;line-height:1.5;margin:0}

/* ========================= PERGAMINO SUPERPUESTO ========================= */
.parchment-overlay{
  position:absolute;z-index:8;left:0;right:0;bottom:0;
  height:auto;min-height:235px;max-height:360px;
  pointer-events:none;
}
.parchment-image{
  position:absolute;z-index:0;left:0;bottom:0;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;display:block;
  filter:drop-shadow(0 -4px 7px rgba(38,20,5,.30));
}
/* Todo el contenido está por encima de la textura, no dentro de un rectángulo. */
.info-content{position:absolute;z-index:2;inset:0;padding:clamp(42px,4.4vh,60px) 7% 12px;pointer-events:none}
.info-grid{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.info-item{display:flex;align-items:center;gap:15px;min-height:58px;padding:2px 26px;border-right:1px solid rgba(84,54,22,.35);color:var(--ink)}
.info-item:last-child{border-right:0}
.info-icon{width:43px;height:43px;flex:none}
.info-icon svg{width:100%;height:100%;fill:none;stroke:#b77b14;stroke-width:1.8}
.label{display:block;font-size:12px;font-weight:800;margin-bottom:4px}
.info-item strong{display:block;font-size:19px;line-height:1.15}

.actions{display:flex;justify-content:center;align-items:center;gap:52px;margin:9px auto 0;pointer-events:auto}
.btn{min-width:300px;padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:13px;border-radius:9px;font-size:15px;font-weight:900;box-shadow:0 5px 9px rgba(55,32,8,.35),inset 0 1px rgba(255,255,255,.45);transition:.2s ease}
.btn svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2}
.btn-location{background:linear-gradient(#f3b928,#d8900c);color:#4b3517;border:1px solid #bc7b08}
.btn-location svg{stroke:#4b3517}
.btn-whatsapp{background:linear-gradient(#359126,#27731c);border:1px solid #1c5b15}
.btn:hover{transform:translateY(-3px);filter:brightness(1.06)}

@media(max-width:1100px){
  .main-nav{gap:24px}
  .site-header{padding-left:3%;padding-right:3%}
  .info-content{padding-left:4%;padding-right:4%}
  .info-item{padding-left:14px;padding-right:14px;gap:10px}
  .info-item strong{font-size:16px}
  .btn{min-width:260px}
  .actions{gap:25px}
}

@media(max-width:900px){
  html,body{overflow-x:hidden;overflow-y:auto;height:auto}
  .page-shell{height:auto;min-height:100vh;overflow:visible}
  .site-header{position:absolute;height:auto;grid-template-columns:1fr auto;padding:14px 5%;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
  .main-nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:20px;overflow:auto}
  .main-nav a{font-size:12px;padding-top:12px}
  .socials{gap:8px}
  .socials a{width:34px;height:34px}
  .brand-logo{width:clamp(190px,34vw,300px);max-height:62px}
  .hero{height:100vh;min-height:720px}
  .hero-content{padding:0 7% 330px}
  .hero h1{font-size:45px}
  .parchment-overlay{height:330px;min-height:0;max-height:none}
  .info-content{padding:48px 7% 12px}
  .info-grid{grid-template-columns:1fr}
  .info-item{border-right:0;border-bottom:1px solid rgba(84,54,22,.3);padding:8px 4px;min-height:47px}
  .info-item:last-child{border-bottom:0}
  .actions{gap:12px;flex-wrap:wrap;margin-top:7px}
  .btn{min-width:240px;padding:11px 18px;font-size:13px}
}