/* Remy · bar de aperitivos
   Brand palette (from REMY_визуальный стиль.pdf):
   terracota #bd6942 · areia #fcefd3 · blue fantastic #2c3b4d · burning flame #ffb162
   Terracota is the main background; blue is kept as a minor accent. */

:root {
  --blue: #2c3b4d;
  --blue-deep: #233040;
  --areia: #fcefd3;
  --areia-soft: #f6e5c3;
  --terracota: #bd6942;      /* decorative + large type */
  --terracota-ink: #a3532f;  /* small text & buttons (4.8:1 on areia) */
  --terracota-dark: #8a4527;
  --on-terracota: var(--areia);
  --flame: #ffb162;
  --muted: #5a6472;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--terracota);
  color: var(--blue);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem;
  background: var(--areia); color: var(--blue);
  font: 600 .8rem/1 var(--sans);
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--areia);
  outline-offset: 3px;
  border-radius: 2px;
}
.paper :focus-visible, .postcard :focus-visible { outline-color: var(--terracota-ink); }

/* ---------- Type helpers ---------- */

.eyebrow {
  margin: 0 0 1.25rem;
  font: 600 .72rem/1.4 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--areia);
}
.eyebrow--terracota { color: var(--terracota-ink); }
.eyebrow--blue { color: var(--blue); }

.section-title {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  color: var(--blue);
  text-wrap: balance;
}

.script {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.25;
  position: relative;
  display: inline-block;
  padding-bottom: .35em;
}
/* hand-drawn underline, like the logo's descriptor */
.script::after {
  content: "";
  position: absolute;
  left: 4%; right: 0; bottom: .1em;
  height: 1px;
  background: currentColor;
  opacity: .7;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--terracota-ink); color: var(--areia); }
.btn--primary:hover { background: var(--terracota-dark); }

.hero .btn--primary { background: var(--areia); color: var(--blue); }
.hero .btn--primary:hover { background: var(--blue); color: var(--areia); }

/* blue accent: outline in brand blue, cream label; fills blue on hover */
.btn--ghost { border: 1.5px solid var(--blue); color: var(--areia); }
.btn--ghost:hover { background: var(--blue); color: var(--areia); border-color: var(--blue); }

.btn--outline { border-color: var(--blue); color: var(--blue); text-transform: none; letter-spacing: .06em; font-size: .85rem; }
.btn--outline:hover { background: var(--blue); color: var(--areia); }

/* ---------- Concave “postcard” corners ---------- */

.postcard-frame {
  --r: 18px;
  overflow: hidden;
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom right / 51% 51% no-repeat;
          mask:
    radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom right / 51% 51% no-repeat;
}
.postcard-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--areia);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(189, 105, 66, .95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(252, 239, 211, .22);
}
/* phones & small tablets: pinned too, but once scrolled a quieter bar - muted, see-through terracotta
   with blur and a soft shadow instead of the bright orange one */
@media (max-width: 819.98px) {
  .site-header.is-scrolled {
    background: rgba(122, 58, 32, .84);
    box-shadow: 0 1px 0 rgba(252, 239, 211, .14), 0 4px 18px rgba(30, 15, 8, .16);
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: max(.9rem, env(safe-area-inset-top)) var(--gutter) .9rem;
}
.site-header__brand {
  display: block;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled .site-header__brand { opacity: 1; transform: none; pointer-events: auto; }
.site-header__brand img { width: clamp(112px, 14vw, 150px); height: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2rem); }
.site-nav__link {
  position: relative;
  padding: .6rem 0;
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav__link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: .3rem;
  height: 1px; background: var(--areia);
  transition: right .35s var(--ease);
}
.site-nav__link:hover::after { right: 0; }
.site-nav__link--hide-sm { display: none; }
@media (min-width: 640px) { .site-nav__link--hide-sm { display: inline; } }
.site-nav__icon {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-right: -10px;
  border-radius: 50%;
  transition: color .3s;
}
.site-nav__icon:hover { color: var(--blue); }
/* Instagram + WhatsApp side by side, a little closer to each other than to the flags */
.site-nav__social { display: flex; align-items: center; }
.site-nav__social .site-nav__icon:first-child { margin-right: -6px; }

/* Language switch (Spain / USA flags) after the Instagram and WhatsApp icons; the current language is fully opaque */
.lang-switch { display: flex; align-items: center; margin-right: -5px; }
.lang-switch__btn {
  display: inline-grid; place-items: center;
  width: 31px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  opacity: .55;
  transition: opacity .3s;
}
.lang-switch__btn:hover, .lang-switch__btn[aria-pressed="true"] { opacity: 1; }
.lang-switch__btn svg { display: block; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(30, 15, 8, .35); }
.lang-switch__sep { font: 400 .8rem/1 var(--sans); opacity: .7; }

/* phones: the whole menu doesn't fit on one line, so two compact rows -
   logo on the left with Instagram, WhatsApp + flags on the right, then La casa · Visitanos · Carta centred below.
   The top padding keeps everything below the iPhone notch / status bar. */
@media (max-width: 639.98px) {
  .site-header__inner {
    position: relative;
    display: block;
    padding: max(.3rem, env(safe-area-inset-top)) var(--gutter) .25rem;
  }
  .site-header__brand {
    position: absolute;
    left: var(--gutter);
    top: calc(max(.3rem, env(safe-area-inset-top)) + 13px);   /* centred on the 40px icon row */
  }
  .site-header__brand img { width: 84px; }
  .site-nav { flex-wrap: wrap; justify-content: center; column-gap: clamp(1.25rem, 7vw, 2.25rem); row-gap: 0; }
  .site-nav::before { content: ""; order: 2; flex-basis: 100%; height: 0; }   /* line break */
  .site-nav__link { order: 3; padding: .4rem 0 .55rem; font-size: .66rem; letter-spacing: .2em; }
  .site-nav__link::after { bottom: .25rem; }
  .site-nav__link--hide-sm { display: inline; }
  .site-nav__social { order: 1; margin-left: auto; }
  .site-nav__icon { height: 40px; }
  .lang-switch { order: 1; margin-left: -.6rem; }
  .lang-switch__btn { height: 40px; }
  html { scroll-padding-top: calc(4.75rem + env(safe-area-inset-top)); }   /* section links land below the bar */
}
/* English chosen earlier: hide only the translatable text for the instant i18n.js needs to swap it.
   Never the whole page: on iPhone a hidden video is not allowed to start on its own. */
.i18n-wait body [data-i18n] { visibility: hidden; }

/* ---------- Hero ---------- */
/* Full-width video at the top, fading into the terracotta page; content stacked and centred below. */

.hero {
  position: relative;
  background: var(--terracota);
  color: var(--areia);
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: relative;
  width: 100%;
  height: 68vh;
  height: 68svh;
  min-height: 380px;
  max-height: 760px;
  background: var(--terracota);
}
.hero__video, .hero__fallback, .hero__fallback img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* The video is always fully visible to the browser (mobile Safari refuses to start a video that is
   hidden or transparent). The first frame (picture) lies on top of it until frames are really moving,
   so if a browser refuses autoplay (e.g. iPhone Low Power Mode) its big play button is never seen. */
.hero__video { pointer-events: none; }
.hero__fallback { pointer-events: none; }
.hero__video.is-playing + .hero__fallback {
  opacity: 0;
  transition: opacity .35s ease;   /* fade out only once frames are really moving; back instantly if not */
}
/* Safari only, when it refused to start the video (iPhone Low Power Mode): the same MP4 shown as an
   animated image (Safari plays MP4 in <img> like a GIF), over the first frame, faded in once loaded.
   No button and no browser controls in any case. */
.hero__imgvideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.hero__imgvideo.is-ready { opacity: 1; }
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}
.no-video .hero__video { display: none; }

/* soft fade: darker at the top for the menu, melting into exact terracotta at the bottom — no hard edge */
.hero__media::after {
  content: "";
  position: absolute; inset: 0 0 -2px; /* overlap the edge by 2px so no sub-pixel line shows */
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(40, 22, 14, .45) 0%,
      rgba(40, 22, 14, 0) 22%,
      rgba(189, 105, 66, 0) 50%,
      rgba(189, 105, 66, .35) 66%,
      rgba(189, 105, 66, .8) 82%,
      var(--terracota) 97%);
}

/* stamp in the upper-right corner, clear of the bartender in the centre */
.hero__stamp {
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top) + 6.5rem);
  right: max(.5rem, calc(var(--gutter) * .5));
  width: clamp(88px, 22vw, 150px); height: auto;
  filter: drop-shadow(0 0 10px rgba(30, 15, 8, .45));
  /* rotates in place: only the angle changes, position stays fixed */
  animation: stamp-spin 48s linear infinite;
  will-change: transform;
}
@keyframes stamp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: -3.5rem auto 0;   /* tuck slightly into the faded bottom of the video */
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
}
/* blue accent: the label sits on a small brand-blue tag (cream on blue ≈ 10:1),
   since blue text directly on terracotta is only 2.86:1 */
.hero .eyebrow {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .45em .8em .4em 1.08em; /* extra left padding balances the letter-spacing */
  background: var(--blue);
  color: var(--areia);
  border-radius: 2px;
}
.hero__title { margin: 0 0 1.25rem; }
.hero__title img { width: min(82vw, 440px); height: auto; margin-inline: auto; }
.hero__tagline {
  max-width: 17em;
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.6vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: .005em;
  text-wrap: balance;
  color: var(--areia);
}
.hero__lead {
  max-width: 38ch;
  margin-bottom: 1.9rem;
  font-size: clamp(1.2rem, 2.2vw, 1.32rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--areia);
}
.hero__actions { justify-content: center; }
.hero__hours {
  margin: 0;
  font: 600 .74rem/1.9 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--areia);
}

/* Laptop / desktop: the complete hero fits the first screen. The video fills the screen and fades
   into terracotta; the content sits in that transition. Sizes scale with viewport height (vh). */
@media (min-width: 960px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    height: auto; min-height: 0; max-height: none;
  }
  .hero__video, .hero__fallback, .hero__fallback img, .hero__imgvideo { object-position: 50% 62%; }
  .hero__media::after {
    background:
      linear-gradient(180deg,
        rgba(40, 22, 14, .45) 0%,
        rgba(40, 22, 14, 0) 16%,
        rgba(189, 105, 66, 0) 30%,
        rgba(189, 105, 66, .5) 42%,
        rgba(189, 105, 66, .88) 52%,
        var(--terracota) 62%);
  }
  .hero__stamp {
    top: calc(7.25rem + 5vh);
    right: max(1.5rem, calc((100vw - var(--max)) / 2 - 3.75rem));
    width: clamp(110px, 18vh, 150px);
  }
  .hero__content {
    margin: 0 auto;
    max-width: 760px;
    padding-bottom: clamp(1.5rem, 4.5vh, 3.5rem);
  }
  .hero .eyebrow { margin-bottom: clamp(.7rem, 1.8vh, 1.3rem); }
  .hero__title { margin-bottom: clamp(.4rem, 1.2vh, 1rem); }
  .hero__title img { width: auto; height: clamp(84px, 14vh, 134px); }
  .hero__tagline {
    max-width: none;
    margin-bottom: clamp(.5rem, 1.4vh, 1rem);
    font-size: clamp(1.5rem, 3.5vh, 2.3rem);
  }
  .hero__lead {
    max-width: 54ch;
    margin-bottom: clamp(1rem, 2.6vh, 1.75rem);
    font-size: clamp(1.08rem, 2.3vh, 1.3rem);
    line-height: 1.5;
  }
  .hero__actions { margin-bottom: clamp(.9rem, 2.4vh, 1.5rem); }
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.6rem; }

/* Phones: the whole hero text (label, logo, tagline, intro, buttons, hours) fits the first screen.
   A shorter video whose faded terracotta end the text starts in, tighter spacing inside the block and
   the two buttons side by side (they wrap onto two lines only on very narrow screens). Type sizes unchanged. */
@media (max-width: 639.98px) {
  .hero__media { height: 50vh; height: 50svh; min-height: 330px; }
  .hero__content { margin-top: -5.25rem; padding-bottom: 3rem; }
  .hero .eyebrow { margin-bottom: .85rem; }
  .hero__title { margin-bottom: .7rem; }
  .hero__title img { width: min(72vw, 440px); }
  .hero__tagline { margin-bottom: .6rem; }
  .hero__lead { margin-bottom: 1.15rem; line-height: 1.45; }
  .hero__actions { gap: .6rem; margin-bottom: 1.1rem; }
  .hero__actions .btn { padding-inline: .9rem; letter-spacing: .16em; }
}

/* ---------- La casa ---------- */

.paper {
  position: relative;
  background-color: var(--areia);
  /* subtle paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.casa { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4.5rem, 9vw, 7rem); overflow-x: clip; }
.casa__intro {
  display: grid;
  gap: 3rem;
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}
.casa__text p { max-width: 36ch; }
.casa__script {
  max-width: 22em;
  margin-top: 1rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  line-height: 1.25;
  text-wrap: balance;
  color: var(--blue);
}
.casa__figure { position: relative; margin: 0; }
.casa__figure .postcard-frame { --r: 22px; aspect-ratio: 918 / 772; }
/* cream stamp kept fully inside the photo, top-left over the blurred bar lights, clear of the cocktail */
.casa__stamp {
  position: absolute;
  left: clamp(.75rem, 2.5vw, 1.5rem); top: clamp(.75rem, 2.5vw, 1.5rem);
  width: clamp(92px, 13vw, 140px); height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 0 8px rgba(30, 15, 8, .45));
}
/* phones: a little lower, onto the dark wall left of the bread, so no bokeh light runs through "REMY"
   (below 360px the stamp is too large for that spot and keeps the corner position) */
@media (min-width: 360px) and (max-width: 819.98px) {
  .casa__stamp { left: 5%; top: 19%; }
}

@media (min-width: 860px) {
  .casa__intro { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 7vw, 6rem); }
}

.cards {
  display: grid;
  gap: 2.75rem;
  margin: 0 auto;
  list-style: none;
}
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
}
.card { margin: 0; }
.card__img { aspect-ratio: 4 / 5; margin-bottom: 1.25rem; background: var(--areia-soft); }
.card__img img { transition: transform 1.2s var(--ease); }
.card:hover .card__img img { transform: scale(1.04); }
.card__title {
  margin: 0 0 .5rem;
  font: 600 .8rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota-ink);
}
.card p { margin: 0; font-size: 1.15rem; line-height: 1.55; max-width: 32ch; }

/* ---------- Visitanos ---------- */

.visit {
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  background: var(--terracota);
}

/* reverse side of a simple postcard: straight corners, thin inner frame, soft paper and shadow */
.postcard {
  position: relative;
  display: grid;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.75rem);
  background-color: var(--areia);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--blue);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(60, 25, 10, .18),
    0 22px 44px -22px rgba(60, 25, 10, .5);
}
.postcard::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(189, 105, 66, .45);
  border-radius: 2px;
  pointer-events: none;
}

.postcard__left { padding-bottom: 2.25rem; border-bottom: 1px solid rgba(44, 59, 77, .2); }
.postcard .section-title { padding-right: 84px; }
/* same clean italic serif feel as "Bar de Aperitivos" */
.postcard__script {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  line-height: 1.25;
  color: var(--terracota-ink);
}
.postcard__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.postcard__right { position: relative; padding-top: 2.25rem; }
.postcard__stamp {
  position: absolute;
  top: clamp(3.6rem, 12vw, 4.5rem);
  right: clamp(1.5rem, 6vw, 3rem);
  width: 76px; height: auto;
  transform: rotate(8deg);
  mix-blend-mode: multiply;
}
.postcard__stamp img { display: block; width: 100%; height: auto; }

/* Worn, faded-ink look for every round stamp (hero, La casa, Visitanos): uneven ink, pinholes and
   rubbed-off gaps of different sizes are baked into the *-patina.png images; here only a slightly softer opacity. No mask, blur or clipping, so
   shape, size, position, rotation, animation, shadows and the wavy lines are untouched. */
.hero__stamp, .casa__stamp { opacity: .82; }   /* cream ink over the video / photo */
.postcard__stamp { opacity: .80; }             /* terracotta ink multiplied into the paper (incl. wavy lines) */
/* postmark wavy lines, drawn in the stamp's terracotta and line weight; they end at the stamp's outer
   ring on the lower-left, clear of the circular lettering ("BAR DE") */
.postcard__waves {
  position: absolute;
  top: 56%;
  right: 100%;   /* phones: the line ends just touch the outer ring */
  width: 72%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--terracota);
  stroke-width: 2.1;
  stroke-linecap: round;
}

.postcard__lines { margin: 0; }
.postcard__line {
  padding: 1.1rem 0 1.3rem;
  border-bottom: 1px solid rgba(44, 59, 77, .28);
}
.postcard__line:last-child { border-bottom: 0; }
.postcard__line dt {
  margin-bottom: .45rem;
  font: 600 .68rem/1.4 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--terracota-ink);
}
.postcard__line dd { margin: 0; font-size: 1.45rem; line-height: 1.35; }
.postcard__hours { font-size: 1.9rem; font-weight: 500; letter-spacing: .02em; }
.postcard__note {
  display: block;
  margin-top: .4rem;
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-link { display: inline-block; text-decoration: none; }
.map-link__cta {
  display: block;
  width: fit-content;
  margin-top: .55rem;
  font: 600 .7rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .3s, letter-spacing .3s var(--ease);
}
.map-link:hover .map-link__cta { color: var(--blue); letter-spacing: .24em; }

@media (min-width: 820px) {
  .postcard { grid-template-columns: 1.05fr 1fr; }
  .postcard__left {
    padding: 1rem clamp(2rem, 4vw, 3.5rem) 1rem 0;
    border-bottom: 0;
    border-right: 1px solid rgba(44, 59, 77, .25);
    display: flex; flex-direction: column; justify-content: center;
  }
  .postcard__right { padding: 6.5rem 0 0 clamp(2rem, 4vw, 3.5rem); }
  .postcard__stamp { top: clamp(2rem, 4vw, 3rem); width: 128px; }
  .postcard__waves { width: 96%; right: 97.5%; }
  .postcard .section-title { padding-right: 0; }
}

/* ---------- Encuentros (events) ---------- */
/* cream paper like La casa; the list reads like the lines on the Visitanos postcard */

.encuentros { padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.encuentros__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}
.encuentros__lead {
  max-width: 38ch;
  margin: 0 0 2rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--blue);
}
.encuentros__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
/* the quieter second link: small caps, underlined, like "Abrir en el mapa" */
.encuentros__menu {
  font: 600 .7rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--terracota-ink);
  border-bottom: 1px solid currentColor;
  padding: .55rem 0 2px;
  transition: color .3s, letter-spacing .3s var(--ease);
}
.encuentros__menu:hover { color: var(--blue); letter-spacing: .24em; }
.encuentros__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(44, 59, 77, .28);
}
.encuentros__list li {
  position: relative;
  padding: 1.15rem 0 1.25rem 1.6rem;
  border-bottom: 1px solid rgba(44, 59, 77, .28);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--blue);
}
/* small terracotta dot, like the dots beside REMY in the logo */
.encuentros__list li::before {
  content: "";
  position: absolute;
  left: .2rem; top: 1.85rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracota);
}
@media (min-width: 860px) {
  .encuentros__inner { grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 7vw, 6rem); }
}

/* ---------- "Cotizá tu evento" dialog ---------- */
/* the reverse of a Remy postcard: cream paper, thin terracotta inner frame, blue type */

.btn--line { border: 1.5px solid var(--terracota-ink); color: var(--terracota-ink); background: transparent; }
.btn--line:hover { background: var(--terracota-ink); color: var(--areia); }

.quote {
  width: min(580px, calc(100% - 24px));
  max-width: none;
  max-height: min(calc(100vh - 24px), 900px);
  max-height: min(calc(100dvh - 24px), 900px);
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: var(--blue);
  background-color: var(--areia);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 2px rgba(60, 25, 10, .2), 0 30px 60px -20px rgba(30, 12, 5, .55);
  overflow: hidden;
}
.quote[open] { display: flex; flex-direction: column; animation: quote-in .28s var(--ease); }
@keyframes quote-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quote::backdrop { background: rgba(30, 18, 12, .58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.quote::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(189, 105, 66, .45);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.quote-open { scroll-behavior: auto; }
/* the close button sits in its own strip above the scrolling content: always visible, never over a field */
.quote__top {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 18px 18px 0;
}
.quote__close {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(44, 59, 77, .35);
  border-radius: 50%;
  background: rgba(252, 239, 211, .94);
  color: var(--blue);
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.quote__close:hover { background: var(--blue); color: var(--areia); }
.quote__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: .25rem clamp(1.5rem, 6vw, 3rem) clamp(1.75rem, 5vw, 2.5rem);
}
.quote__title {
  margin: 0 0 .75rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--blue);
}
.quote__intro { margin: 0 0 1.75rem; font-size: 1.15rem; line-height: 1.5; }

.quote__field { margin: 0 0 1.35rem; padding: 0; border: 0; min-width: 0; }
.quote__label {
  display: block;
  margin: 0 0 .55rem;
  padding: 0;
  font: 600 .68rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota-ink);
}
.quote__req { color: var(--terracota); }
.quote__input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: .6rem .8rem;
  border: 1px solid rgba(44, 59, 77, .32);
  border-radius: 2px;
  background: rgba(255, 255, 255, .5);
  color: var(--blue);
  font: 500 1.1rem/1.3 var(--serif);   /* ≥ 16px: iPhone does not zoom into the field */
}
.quote__input:focus { outline: 2px solid var(--terracota-ink); outline-offset: 1px; border-color: transparent; }
.quote__input[aria-invalid="true"] { border-color: var(--terracota-dark); background: rgba(189, 105, 66, .08); }
.quote__input--short { max-width: 10rem; }
/* Safari's contact AutoFill button (person icon + arrow) inside the name field: not wanted there.
   Own rule: browsers that don't know this pseudo-element ignore only this rule. */
#q-name::-webkit-contacts-auto-fill-button { display: none !important; visibility: hidden; pointer-events: none; }
/* time fields are typed as HH:MM (24 h); the small clock keeps the look of the browser's time field */
.quote__input--time {
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3b4d' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 16px 16px;
  font-variant-numeric: tabular-nums;
}
.quote__textarea { min-height: 6rem; resize: vertical; }
.quote__error {
  margin: .45rem 0 0;
  font: 500 .8rem/1.4 var(--sans);
  color: var(--terracota-dark);
}
.quote__row { display: grid; gap: 0 1.25rem; }
.quote__times { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.quote__time span {
  display: block;
  margin-bottom: .3rem;
  font: 500 .72rem/1.3 var(--sans);
  letter-spacing: .06em;
  color: var(--muted);
}

/* options as small pills; the real radio/checkbox stays in place for keyboards and screen readers */
.quote__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid rgba(44, 59, 77, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  font: 500 .82rem/1.2 var(--sans);
  letter-spacing: .03em;
  color: var(--blue);
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--areia); }
.chip input:focus-visible + span { outline: 2px solid var(--terracota-ink); outline-offset: 2px; }

.quote__help { margin: .4rem 0 0; font: 500 .78rem/1.4 var(--sans); color: var(--muted); }
.quote__submit { width: 100%; margin-top: .5rem; }

.quote__submit[disabled] { opacity: .7; cursor: progress; transform: none; }
/* shown when the request could not be sent; the answers stay in the form */
.quote__alert {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--terracota-dark);
  background: rgba(189, 105, 66, .1);
  font-size: 1.05rem;
  line-height: 1.45;
}
.quote__alert:focus { outline: none; }
.quote__alert p { margin: 0; }
/* hidden trap field for bots: off screen, never announced */
.quote__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* short confirmation in the section after a successful request: a calm sage green that sits well with
   the terracotta and the cream paper — see-through light green background, dark green text,
   a thin green frame and a green accent on the left */
.encuentros__thanks {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  max-width: 34rem;
  border: 1px solid rgba(74, 110, 72, .32);
  border-left: 3px solid #4f7a4b;
  border-radius: 2px;
  background: rgba(96, 140, 90, .14);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.45;
  color: #2f4d2c;
}

@media (min-width: 560px) {
  .quote__row { grid-template-columns: 1fr 1.25fr; }
}
@media (prefers-reduced-motion: reduce) {
  .quote[open] { animation: none; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 3.5rem 0 calc(2.5rem + env(safe-area-inset-bottom));
  background: var(--terracota);
  border-top: 1px solid rgba(252, 239, 211, .3);
  color: var(--areia);
  text-align: center;
}
.site-footer__inner { display: grid; justify-items: center; gap: .25rem; }
.site-footer__logo { width: 170px; height: auto; margin-bottom: 1.5rem; opacity: .95; }
.site-footer__meta {
  margin: 0 0 .9rem;
  font: 500 .74rem/1.9 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-footer__meta a { text-decoration: none; border-bottom: 1px solid rgba(252, 239, 211, .7); padding: .5rem 0 .1rem; }
.site-footer__meta a:hover { color: var(--blue); border-color: var(--blue); }
.site-footer__small { margin: 1rem 0 0; font: 400 .7rem/1.6 var(--sans); letter-spacing: .04em; }

/* ---------- Motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .08s; }
.hero .reveal:nth-child(3) { transition-delay: .16s; }
.hero .reveal:nth-child(4) { transition-delay: .24s; }
.hero .reveal:nth-child(5) { transition-delay: .32s; }
.hero .reveal:nth-child(6) { transition-delay: .4s; }
.cards .reveal:nth-child(2) { transition-delay: .12s; }
.cards .reveal:nth-child(3) { transition-delay: .24s; }



@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__stamp { animation: none; }
  /* still frame from the hero video instead of motion */
  .hero__video { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}