/* ==========================================================================
   La Escondida – estilos
   1. Fuentes  2. Variables  3. Base  4. Componentes  5. Secciones
   ========================================================================== */

/* 1. FUENTES ------------------------------------------------------------- */
@font-face { font-family: "Perfectly Nineties"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Perfectly Nineties/PerfectlyNineties-Regular.otf") format("opentype"); }
@font-face { font-family: "Perfectly Nineties"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/Perfectly Nineties/PerfectlyNineties-RegularItalic.otf") format("opentype"); }
@font-face { font-family: "Perfectly Nineties"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("../fonts/Perfectly Nineties/PerfectlyNineties-SemiboldItalic.otf") format("opentype"); }
@font-face { font-family: "BN Axel Grotesk"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/bnaxelgrotesk-bold.otf") format("opentype"); }
@font-face { font-family: "TT Norms Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/TTNormsPro-Regular.otf") format("opentype"); }
@font-face { font-family: "TT Norms Pro"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/TTNormsPro-Italic.otf") format("opentype"); }
@font-face { 
  font-family: "HoofLineBlackOblW00 Rg"; 
  font-weight: 400; 
  font-display: swap;
  src: url("../fonts/HoofLineBlackOblW00-Rg.woff2") format("opentype"), 
  src: url("../fonts/HoofLineBlackOblW00-Rg.woff") format("opentype"); 
}

/* 2. VARIABLES ----------------------------------------------------------- */
:root {
  --color-cream: #f4eddd;
  --color-brand: #71152c;
  --color-brand-dark: #5f0d27;
  --color-dark: #1b1816;
  --color-text: #3a2a2a;
  --color-light: #fff;

  --font-serif: "Perfectly Nineties", Georgia, serif;
  /* --font-serif: "TT Norms Pro", system-ui, -apple-system, "Segoe UI", sans-serif; */
  --font-bold: "BN Axel Grotesk", "Arial Narrow", Arial, sans-serif;
  --font-body: "TT Norms Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "HoofLineBlackOblW00 Rg", Georgia, serif;

  --space-section: clamp(3.5rem, 8vw, 7rem);
  --header-h: 72px;
}

/* 3. BASE ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-cream); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: var(--color-light); padding: .5rem 1rem; }

.t-bold  { font-family: var(--font-bold); font-weight: 700; }
.t-serif { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.625rem); }

.display-title {
  font-size: clamp(1.9rem, 4.4vw, 3.75rem);
  line-height: clamp(1.6rem, 3.65vw, 3.125rem);
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0;
}
.display-title span { display: inline; }
.display-title--light { color: var(--color-cream); }
.display-title--brand { color: var(--color-brand); }

.script-label { font-family: var(--font-label); color: var(--color-brand); }
.script-title { font-family: var(--font-serif); font-weight: 600; color: var(--color-brand); }
.script-label { font-size: clamp(1.1rem, 2vw, 2.5rem); margin-bottom: .5rem; }
.script-label--light { color: var(--color-cream); }
.script-title { font-size: 1.9rem; font-style: italic; font-weight: 400; margin-bottom: 20px; }

.text-body-sm { font-size: .95rem; line-height: 1.55; margin-bottom: 1rem; }
.text-body { font-size: 1.313rem; line-height: 1.563rem; margin-bottom: 1rem; }

.section { padding-block: var(--space-section); }
.section--cream { background: var(--color-cream); }
.section--brand { background: var(--color-brand); color: var(--color-cream); }

/* 4. COMPONENTES --------------------------------------------------------- */
.btn { font-family: var(--font-body); font-size: 0.9rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: .85rem 1.9rem; transition: background-color .25s, color .25s, border-color .25s; }
.btn-brand { background: var(--color-brand); border: 1px solid var(--color-brand); color: var(--color-cream); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-light); }
.btn-sm { padding: .5rem 1.1rem; }
.btn-outline-light-brand { border: 1px solid var(--color-cream); color: var(--color-cream); background: transparent; }
.btn-outline-light-brand:hover, .btn-outline-light-brand:focus-visible { background: var(--color-cream); color: var(--color-brand); }
.btn-outline-brand { border: 1px solid var(--color-brand); color: var(--color-brand); background: transparent; }
.btn-outline-brand:hover, .btn-outline-brand:focus-visible { background: var(--color-brand); color: var(--color-light); }

.media { margin: 0; overflow: hidden; }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 1030;  transition: background-color .3s; }
.site-header.is-scrolled { background: rgba(27, 24, 22, .92); backdrop-filter: blur(6px); }
.site-header__bar { height: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
/* .site-header__logo { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); } */
.site-header__logo img { width: 220px; height: auto; display: block; }
.site-header__toggle { background: none; border: 0; padding: 0; width: 43px; display: flex; flex-direction: column; gap: 12px; }
.site-header__toggle span { display: block; height: 2px; background: var(--color-cream); transition: width .25s }
.site-header__toggle span:nth-child(1) { width: 50%; }
.site-header__toggle span:nth-child(2) { width: 100%; }
.site-header__toggle span:nth-child(3) { width: 70%; }
.site-header__toggle:hover span:nth-child(1) { width: 100%; }
.site-header__toggle:hover span:nth-child(3) { width: 100%; }

.menu-offcanvas { background: var(--color-dark); color: var(--color-light); }
.menu-offcanvas__list { list-style: none; margin: 0; padding: 0; }
.menu-offcanvas__list a { display: block; padding: .9rem 0; text-decoration: none; font-family: var(--font-body); font-size: 1.7rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-offcanvas__list a:hover { color: #e6b7c4; }

/* 5. SECCIONES ----------------------------------------------------------- */
/* Hero */
.hero { position: relative; min-height: min(100svh, 810px); display: flex; align-items: flex-end; color: var(--color-light); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.2) 40%, rgba(0,0,0,.65)); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__content { padding-block: 6rem 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 992px) { .hero__content { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.hero__title { font-size: clamp(2.2rem, 6vw, 5.625rem); line-height: clamp(2.4rem, 6.5vw, 4.625rem); text-transform: uppercase; max-width: 10em; margin: 0; }
.hero__title span { display: inline; }

/* Nosotros */
.about .media--wide img { aspect-ratio: 16 / 10; }
.about__lower { margin-top: 1.5rem; }
.about .col-lg-6:first-child .media img { aspect-ratio: 4 / 5; }

/* Pilares */
/* .pillars .media img { aspect-ratio: 1 / 1; } */
.pillars__lower .media img { width: auto; margin-left: auto; }
.pillars .text-body-sm { opacity: .92; }

/* Ambiente */
.ambience { position: relative; isolation: isolate; color: var(--color-light); padding-block: clamp(5rem, 12vw, 10rem); }
.ambience::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15, 10, 8, .6); }
.ambience__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ambience__text { max-width: 32rem; margin: 1.5rem auto 0; font-size: 1.313rem; line-height: 1.563rem; color: var(--color-cream); }

/* Cortes y postres */
.menu-preview .media img { aspect-ratio: 4 / 3; }

/* Eventos */
.events__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.events .col-lg-8 .media img { aspect-ratio: 1 / 1; }
.events .row.g-3 .media img { aspect-ratio: 1 / 1; }
.audiences { margin-top: clamp(3rem, 7vw, 5rem); }
.audience { padding: 0 1.25rem; display: flex; flex-direction: column; justify-content: space-between; }
.audience img { display: block; height: 40px; width: auto; margin-bottom: 1rem; }
@media (min-width: 992px) { .audience + .audience { border-left: 1px solid var(--color-brand); } }
@media (max-width: 991.98px) { .audience { border-top: 1px solid rgba(123, 18, 51, .25); } }

/* Reservas */
.booking { position: relative; isolation: isolate; padding: 124px 0 0; color: var(--color-light); }
/* .booking::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 17, 15, .82); } */
/* .booking__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } */
.booking__box { position: relative; border: 1px solid var(--color-cream); padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); }
.booking__info { margin: 40px 0; font-size: 1.313rem; line-height: 1.563rem; color: var(--color-cream); }
.booking__info a { text-decoration: none; word-break: break-word; }
.booking__info a:hover { border-color: #fff; }

/* Footer */
.site-footer { color: rgba(255,255,255,.75); padding: 120px 0; }
.site-footer__inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
.site-footer__inner img { width: 261px; height: auto; }
.site-footer__copy { margin: 0; font-size: .75rem; color: var(--color-cream); }
@media (min-width: 768px) { .site-footer__copy {  } }

/* Menú: botón de idioma */
.menu-offcanvas__lang { display: inline-block; margin-top: 2rem; color: var(--color-light); background-color: var(--color-brand); font-size: .8rem; letter-spacing: .12em; text-decoration: none; padding: .5rem 1.25rem; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; }
.menu-offcanvas__lang:hover, .menu-offcanvas__lang:focus-visible { background: var(--color-light); color: var(--color-brand); }