:root{
  /* Paleta */
  --bg: #f2e6df;
  --ink: #4c5662;
  --muted: #7f8894;
  --shadow: 0 10px 30px rgba(0,0,0,.06);

  --brand-font: 'Cinzel', serif;
  --ui-font: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Compensa el margen transparente del PNG del logo.
     Más negativo = texto más pegado al logo. */
  --logo-gap: clamp(-240px, -14vw, -64px);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui-font); -webkit-font-smoothing:antialiased; line-height:1.6;
}

/* H1 accesible (oculto visualmente) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Imágenes fluidas */
img{ max-width:100%; height:auto; display:block; }

/* ===== Hero ===== */
.hero{
  min-height: calc(100dvh - 80px);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.wrap{
  width:100%; max-width:1100px;
  padding: clamp(12px, 4vw, 48px);
  text-align:center;
}

/* Marca de agua */
.hero::before{
  content:"L";
  position:absolute; inset:auto -10vw -20vh -10vw;
  font-family:var(--brand-font);
  font-size:min(70vw, 900px);
  line-height:.8; color:#000; opacity:.05;
  transform:rotate(-6deg) translateY(8%);
  pointer-events:none; user-select:none;
}

/* Marca */
.brand{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; text-decoration:none;
  margin-bottom:0;
}
.brand__logo{
  width: clamp(320px, 88vw, 720px);
  height:auto;
  margin-bottom: var(--logo-gap);  /* <<< acorta el hueco bajo el logo */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.05));
}

/* Texto principal */
.lead{
  margin:.1rem auto 1.05rem;        /* pegado al logo */
  color:var(--muted);
  max-width:60ch;
  font-size:clamp(14px, 1.7vw, 18px);
}

/* CTA */
.cta{
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
  margin: .75rem 0 1rem;
}
.btn{
  display:inline-block; padding:.9rem 1.3rem; border-radius:999px;
  background:var(--ink); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:var(--shadow); transition:transform .15s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); opacity:.95 }
.btn.outline{
  background:transparent; color:var(--ink);
  border:2px solid rgba(76,86,98,.2);
  border:2px solid color-mix(in srgb, var(--ink) 20%, #fff);
}

/* Nota */
.note{ color:var(--muted); font-size:.95rem; }

/* Footer */
.foot{
  height:80px; display:grid; place-items:center;
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, #fff);
  background:linear-gradient(to top, rgba(0,0,0,.02), rgba(0,0,0,0));
}
.foot small{ color: color-mix(in srgb, var(--ink) 70%, #000); }

/* Responsivo */
@media (max-width:360px){
  :root{ --logo-gap: clamp(-120px, -12vw, -40px); }
  .brand__logo{ width:92vw; }
  .cta .btn{ padding:.8rem 1.1rem; }
}
@media (min-width:1200px){
  :root{ --logo-gap: -260px; }       /* más pegado en desktop ancho */
}