@font-face { font-family: 'Josefin Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/josefin-sans-300.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/josefin-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 500; font-style: italic; font-display: swap; src: url('../fonts/playfair-display-500-italic.woff2') format('woff2'); }

:root {
  --bg: #f4c6d6;
  --olive: #2e3322;
  --olive-soft: #4f5838;
  --olive-btn: #3c4629;
  --on-olive: #f8e7ec;
  --paper: #fbe7ee;
  --font-head: 'Josefin Sans', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-wm: 'Playfair Display', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--olive); font: 400 1rem/1.6 var(--font-body); }
img, video, canvas { display: block; max-width: 100%; }

h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 300; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; }

/* logotipo "banhada": siempre en minúsculas */
.wm { font-family: var(--font-wm); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }

.btn {
  display: inline-block; padding: .8em 1.6em; border: 0; border-radius: 999px;
  background: var(--olive-btn); color: var(--on-olive);
  font: 600 .9rem/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
/* botón de WhatsApp: logo oficial (glifo) a la izquierda; blanco sobre verde oscuro, verde oficial sobre claro */
.btn--wa, .btn--ico { display: inline-flex; align-items: center; gap: .55em; }
.btn--wa img, .btn--ico img { width: 1.35em; height: 1.35em; flex: none; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
/* "Elli Studio" es la marca y manda; "banhada" acompaña, más pequeña y más suave. Va con el logotipo (transparente, js: media/logo/elli-logo*.png) */
a.nav__brand { color: inherit; text-decoration: none; } /* en la portada la marca también es un enlace */
.nav__logo { flex: none; width: auto; height: clamp(2.2rem, 3.3vw, 3rem); }
.nav__brand { display: flex; align-items: center; gap: .6rem; font: 400 clamp(1.15rem, 4.9vw, 1.5rem)/1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.nav__brand .wm { font-size: .78em; margin-left: .45em; letter-spacing: 0; color: var(--olive-soft); }
/* celular: el botón se salía de la pantalla (terminaba en 418 px con pantallas de 360-414). Marca apilada y botón más compacto */
@media (max-width: 30rem) {
  /* el logo ya dice «elli»: se ve el logo con «banhada», y «Elli Studio» queda para lectores de pantalla */
  .nav .nav__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__logo { height: 2.3rem; }
  .nav__brand .wm { margin-left: 0; font-size: .95rem; line-height: 1; }
  .nav .btn { font-size: .86rem; padding: .72em 1.1em; white-space: nowrap; }
}
@media (max-width: 22rem) { .nav .btn { font-size: .8rem; padding-inline: .85em; } }

/* ---- Hoja de reserva (calendario del CRM): sube desde abajo; en pantallas anchas queda centrada ---- */
html.con-reserva { overflow: hidden; }
dialog.reserva {
  width: min(100%, 36rem); max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0;
  background: var(--bg); color: var(--olive); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px rgb(46 51 34 / .3); overflow: hidden;
}
dialog.reserva[open] { display: flex; flex-direction: column; animation: sube .38s cubic-bezier(.16, 1, .3, 1); }
dialog.reserva::backdrop { background: rgb(46 51 34 / .5); }
@keyframes sube { from { transform: translateY(100%); } }
.reserva__grab { flex: none; width: 2.6rem; height: .3rem; border-radius: 9px; background: var(--olive); opacity: .3; margin: .7rem auto .4rem; }
.reserva__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .2rem 1.1rem .7rem; }
.reserva__head h2 { font-size: 1.2rem; }
.reserva__x {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--olive); background: var(--paper); color: var(--olive);
  font: 400 1.3rem/1 var(--font-body); padding: 0 0 .1rem; cursor: pointer;
}
.reserva__x:focus-visible, .reserva__pie a:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.reserva__scroll { overflow-y: auto; padding: 0 1rem 1.2rem; overscroll-behavior: contain; }
.reserva__marco { display: block; width: 100%; min-height: 26rem; border: 0; border-radius: 16px; }
.reserva__pie { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin: .9rem 0 0; font: 400 .8rem/1.4 var(--font-body); color: var(--olive-soft); }
.reserva__pie a { color: inherit; text-underline-offset: .2em; }
@media (min-width: 48rem) { dialog.reserva { margin: auto; border-radius: 28px; max-height: 90vh; } }
@media (prefers-reduced-motion: reduce) { dialog.reserva[open] { animation: none; } }