/*
  By Cristina Portero · identidad
  Paleta: Ivory, Sand, Taupe, Mocha, Ink y Sage. Tipografías: Playfair Display (titulares) y Montserrat (texto).
  Lenguaje: editorial y fino. Sin esquinas redondeadas, líneas de 1px, etiquetas en versalitas espaciadas.
*/
:root {
  --ivory: #f7f3ed;
  --sand: #e2d5c5;
  --taupe: #b6a18c;
  --mocha: #756658;
  --ink: #292724;
  --sage: #899080;

  --line: rgba(41, 39, 36, .14);
  --line-light: rgba(247, 243, 237, .22);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --wrap: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 300 15px/1.8 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--sand); }
:focus-visible { outline: 1px solid var(--mocha); outline-offset: 4px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

/* Tipografía */
.label {
  margin: 0 0 22px; font: 400 10.5px/1.6 var(--sans);
  letter-spacing: .32em; text-transform: uppercase; color: var(--mocha);
}
.title {
  margin: 0; font: 400 clamp(2.4rem, 5.2vw, 4.4rem)/1.04 var(--serif);
  letter-spacing: -.01em;
}
.title em, .title i { display: block; font-style: italic; }
.lead { font-size: 15.5px; max-width: 52ch; color: var(--ink); }
.muted { color: var(--mocha); }

/* Enlaces y botones */
.link {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 0;
  font: 400 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; cursor: pointer;
  background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit;
}
.link .arrow { transition: transform .4s var(--ease); }
.link:hover .arrow { transform: translateX(5px); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 34px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 400 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn.light { border-color: var(--ivory); color: var(--ivory); }
.btn.light:hover { background: var(--ivory); color: var(--ink); }

/* Navegación */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ivory);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav.solid { background: rgba(247, 243, 237, .94); color: var(--ink); border-color: var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { text-decoration: none; font: 400 15px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.brand i { text-transform: none; letter-spacing: 0; font-size: 14px; margin-right: 6px; }
.nav ul { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; }
.nav ul a { text-decoration: none; font: 400 10.5px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; opacity: .85; transition: opacity .3s; }
.nav ul a:hover, .nav ul a[aria-current] { opacity: 1; }
.nav ul a[aria-current] { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.menu-btn { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 10px 0; font: 400 10.5px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; }

.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.menu.open { opacity: 1; visibility: visible; }
.menu a { display: block; text-decoration: none; font: 400 2.4rem/1.5 var(--serif); }
.menu a:nth-child(even) { font-style: italic; }
.menu .close { position: absolute; top: 26px; right: var(--gutter); }
.menu .small { margin-top: 40px; font: 400 10.5px/2 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); }

@media (max-width: 900px) {
  .nav ul { display: none; }
  .menu-btn { display: block; }
}

/* Aparición suave al hacer scroll */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

/* Pie */
footer { background: var(--ink); color: var(--ivory); padding: clamp(80px, 12vw, 140px) 0 36px; }
.foot-cta { display: block; text-decoration: none; font: 400 clamp(2rem, 5vw, 4rem)/1.05 var(--serif); margin-bottom: 70px; }
.foot-cta i { display: block; color: var(--taupe); }
.foot-cta .arrow { display: inline-block; font-family: var(--sans); font-weight: 200; transition: transform .5s var(--ease); }
.foot-cta:hover .arrow { transform: translateX(14px); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; padding: 28px 0; border-top: 1px solid var(--line-light); }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 30px; }
.foot-row nav a, .foot-legal { text-decoration: none; font: 400 10.5px/1.8 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.foot-row nav a { opacity: .8; } .foot-row nav a:hover { opacity: 1; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--taupe); letter-spacing: .18em; padding-top: 22px; border-top: 1px solid var(--line-light); }
.foot-legal p { margin: 0; }
.foot-legal a { color: var(--ivory); text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rise { opacity: 1; transform: none; }
}