/*
Theme Name: JVSG Web
Theme URI: https://www.jvsg.es/
Description: Tema de la web de JVSG® 1931. Reproduce el prototipo aprobado (portada con fotografía a pantalla completa y fundido, panel lateral de navegación, páginas interiores sobre papel blanco). Los contenidos se editan desde Portada, Páginas y Datos del estudio (plugin JVSG Web Core).
Author: Alfonso Cobreros · Webmasterpro
Author URI: https://webmasterpro.me/
Template: hello-elementor
Version: 1.0.21
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: jvsg-web
*/

/* ==========================================================================
   JVSG® 1931 — Hoja de estilos (misma base que el prototipo)
   Sistema: papel blanco, tinta y una sola letra: Public Sans, con un único
   tamaño para todo el texto (--fs, 11 px: el de los antetítulos como «ESTUDIO»).
   Desde 1.0.9 no se usa EB Garamond; la jerarquía la marcan el peso, el color y el aire.
   Los valores ajustables desde el panel (tamaño del menú, transparencia y
   desenfoque del panel) llegan como variables en :root desde functions.php.
   ========================================================================== */

/* ---------- 1. Fuentes: ver assets/css/fonts.css ---------- */

/* ---------- 2. Tokens ---------- */
:root {
  --paper: #ffffff;
  --wash: #f5f5f3;
  --ink: #131211;
  --ink-2: #45423d;
  --ink-3: #767068;
  --rule: #e5e2dc;
  --rule-2: #cbc6bd;

  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);      /* sin serif desde 1.0.9; se mantiene porque JVSG Citas la lee */

  --fs: 11px;                /* tamaño único de todo el texto (el de «ESTUDIO») */
  --lh: 1.7;                 /* interlineado del texto a ese tamaño */
  --fs-text: 12px;           /* párrafos y titulares de las páginas: 1 px más que etiquetas, menú y pie (1.0.11–1.0.12) */

  --gutter: clamp(20px, 4vw, 60px);
  --header-h: 88px;
  --measure: 62ch;
  --wrap: 1044px;

  --logo-w: 160px;
  --drawer-w: min(364px, 86vw);
  --nav-size: 11px;          /* tamaño de las entradas del menú (ajustable en Portada) */
  --drawer-opacity: 0.1;     /* velo del panel sobre las fotos de portada (ajustable en Portada) */
  --drawer-blur: 0px;        /* desenfoque de la foto detrás del panel (ajustable en Portada) */
  --adminbar: 0px;

  --fade: 1800ms;            /* lo fija el JS desde la configuración */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-nav: 600ms var(--ease-inout);
}
@media (max-width: 767px) {
  :root { --header-h: 64px; --logo-w: 124px; }
}
/* Con la sesión iniciada, la barra de administración ocupa 32 px (46 px en pantallas estrechas) */
body.admin-bar { --adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --adminbar: 46px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-home { overflow: hidden; height: 100vh; height: 100svh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
/* Titulares: misma letra y mismo tamaño que el texto; se distinguen por el peso */
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); font-size: var(--fs-text); font-weight: 500; line-height: var(--lh); }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.visually-hidden, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: calc(12px + var(--adminbar)); left: 12px; z-index: 200; padding: 10px 14px;
  background: var(--ink); color: var(--paper); font-size: var(--fs); letter-spacing: 0.18em; text-transform: uppercase;
  transform: translateY(-200%); transition: transform 200ms;
}
.skip-link:focus { transform: none; }

/* Etiquetas pequeñas en mayúsculas (antetítulos, menú, pie) */
.eyebrow, .label {
  font-family: var(--sans); font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- 4. Cabecera: tres puntos ---------- */
.site-header {
  position: fixed; inset: var(--adminbar) 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--ink);
  transition: color var(--fade) var(--ease-out);
}
.site-header--paper { background: var(--paper); }
.site-header__left { justify-self: start; }
.site-header__right { justify-self: end; }

.burger {
  position: fixed; z-index: 130;
  top: calc((var(--header-h) - 44px) / 2 + var(--adminbar)); left: calc(var(--gutter) - 11px);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink);
  transition: color var(--fade) var(--ease-out);
}
.is-home.tone-light .burger { color: var(--paper); }
.burger__lines { position: relative; width: 22px; height: 14px; }
.burger__lines span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform 350ms var(--ease-inout), opacity 250ms;
}
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 6.25px; }
.burger__lines span:nth-child(3) { top: 12.5px; }
.nav-open .burger { color: var(--ink); transition-duration: 200ms; }
.nav-open .burger__lines span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.nav-open .burger__lines span:nth-child(2) { opacity: 0; }
.nav-open .burger__lines span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

.logo { display: block; width: var(--logo-w); color: inherit; }
.logo svg { width: 100%; height: auto; fill: currentColor; }

.header-link { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 0 12px 12px; }
.header-link::after { content: ""; display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.header-link:hover::after, .header-link:focus-visible::after { transform: scaleX(1); }

/* ---------- 5. Panel lateral (navegación) ---------- */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 110; background: rgba(19, 18, 17, 0.12);
  opacity: 0; visibility: hidden; transition: opacity var(--ease-nav), visibility 0s linear 600ms;
}
/* En portada la foto no se oscurece al abrir el menú */
.is-home .nav-backdrop { background: transparent; }
.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

.nav-drawer {
  position: fixed; top: var(--adminbar); bottom: 0; left: 0; z-index: 120;
  width: var(--drawer-w);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  /* Páginas interiores: papel casi opaco, para que el texto de la página no se cruce con el menú */
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--ink);
  transform: translateX(-100%);
  transition: transform var(--ease-nav), visibility 0s linear 600ms;
  visibility: hidden;
  overflow-y: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-page .nav-drawer { background: rgba(19, 18, 17, max(var(--drawer-opacity), 0.1)); }
}
/* Portada: panel casi transparente; la fotografía se ve detrás con nitidez.
   El velo y el color del texto siguen el tono de cada foto: texto oscuro sobre
   fotos claras y texto blanco sobre fotos oscuras. Sin sombras ni halos en el
   texto y sin filete en el borde del panel: letra limpia sobre la foto (1.0.8). */
.is-home .nav-drawer {
  background: rgba(255, 255, 255, var(--drawer-opacity));
  -webkit-backdrop-filter: blur(var(--drawer-blur));
  backdrop-filter: blur(var(--drawer-blur));
  color: var(--ink);
}
.is-home.tone-light .nav-drawer {
  background: rgba(19, 18, 17, var(--drawer-opacity));
  color: var(--paper);
}
/* El pie del panel (correo, sedes, legal) sigue el tono de la parte baja de la foto */
.is-home.tone-bottom-light .nav-foot { color: var(--paper); }
.is-home.tone-bottom-dark .nav-foot { color: var(--ink); }

/* Ajuste fino al abrir: color elegido midiendo la foto justo detrás de las palabras (nav.js).
   Sustituye al tono general de la foto cuando la parte izquierda es distinta del resto. */
.is-home.navtone-ink .nav-drawer { background: rgba(255, 255, 255, var(--drawer-opacity)); color: var(--ink); }
.is-home.navtone-paper .nav-drawer { background: rgba(19, 18, 17, var(--drawer-opacity)); color: var(--paper); }
.is-home.foottone-ink .nav-foot { color: var(--ink); }
.is-home.foottone-paper .nav-foot { color: var(--paper); }
/* Legal (abajo del todo): puede quedar sobre otra parte de la foto, así que se mide aparte */
.is-home.legaltone-ink .nav-legal { color: var(--ink); }
.is-home.legaltone-paper .nav-legal { color: var(--paper); }
/* Ni sombras en el texto ni línea en el borde derecho del panel, en ninguna página
   (las clases *-boost que añade nav.js ya no tienen efecto) */
.nav-drawer { box-shadow: none; border: 0; }
.nav-drawer, .nav-drawer * { text-shadow: none; }

/* Con el menú abierto, la barra de posición y los controles de la portada se retiran */
.nav-open .stage-ui { opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms; }

.nav-open .nav-drawer { transform: none; visibility: visible; transition-delay: 0s; }
.nav-drawer .eyebrow { margin: 0 0 22px; }
.nav-drawer .eyebrow, .nav-foot, .nav-foot .label { color: inherit; }
.nav-list { list-style: none; margin: 0; padding: 0; }
/* Entradas con la misma letra que «Menú» y «Blog»: Public Sans, mayúsculas espaciadas */
.nav-list a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--nav-size); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3;
  opacity: 0; transform: translateX(-12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.nav-list a:hover, .nav-list a:focus-visible, .nav-list a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.nav-list a[aria-current="page"]:not(:hover) { text-decoration-color: rgba(128, 128, 128, 0.7); }
.nav-list a .ext { font-size: var(--fs); margin-left: 8px; opacity: 0.55; }
.nav-open .nav-list a { opacity: 1; transform: none; }
.nav-open .nav-list li:nth-child(1) a { transition-delay: 120ms; }
.nav-open .nav-list li:nth-child(2) a { transition-delay: 160ms; }
.nav-open .nav-list li:nth-child(3) a { transition-delay: 200ms; }
.nav-open .nav-list li:nth-child(4) a { transition-delay: 240ms; }
.nav-open .nav-list li:nth-child(5) a { transition-delay: 280ms; }
.nav-open .nav-list li:nth-child(6) a { transition-delay: 320ms; }
.nav-open .nav-list li:nth-child(7) a { transition-delay: 360ms; }
.nav-open .nav-list li:nth-child(8) a { transition-delay: 400ms; }
.nav-foot { font-size: var(--fs); font-weight: 400; line-height: var(--lh); }
.nav-foot .label { display: block; margin-top: 2px; }
.nav-legal { display: flex; flex-wrap: wrap; gap: 2px 16px; list-style: none; margin: 14px 0 0; padding: 0; }
.nav-legal a { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.nav-legal a:hover, .nav-legal a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .nav-list a { min-height: 44px; }
}

/* Con el panel abierto en pantallas estrechas, el logotipo (que queda detrás del panel) se desvanece */
.logo { transition: opacity 300ms var(--ease-out); }
@media (max-width: 899px) { .nav-open .logo { opacity: 0; } }

/* ---------- 6. Portada: escenario fotográfico ---------- */
.stage {
  position: fixed; inset: 0; z-index: 1;
  height: 100vh; height: 100svh;
  background: #e9e9e7;
  overflow: hidden;
}
.stage__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) var(--ease-out); will-change: opacity; }
.stage__slide.is-visible { opacity: 1; }
.stage__slide picture, .stage__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Punto de interés de cada foto (en vertical se usa su recorte propio, ya centrado) */
@media (orientation: landscape) { .stage__slide img { object-position: var(--pos, 50% 50%); } }
.stage--kenburns .stage__slide.is-active img { animation: kenburns var(--kb-duration, 12000ms) linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }

/* Degradados localizados según el tono de la interfaz */
.stage__shade { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity var(--fade) var(--ease-out), height var(--fade) var(--ease-out); }
.stage__shade--top { top: 0; height: 22vh; }
.stage__shade--bottom { bottom: 0; height: 32vh; }
.has-caption .stage__shade--bottom { height: 42vh; }
.tone-light .stage__shade--top { background: linear-gradient(rgba(19, 18, 17, 0.42), rgba(19, 18, 17, 0)); }
.tone-light .stage__shade--bottom { background: linear-gradient(to top, rgba(19, 18, 17, 0.55), rgba(19, 18, 17, 0.25) 45%, rgba(19, 18, 17, 0)); }
.tone-dark .stage__shade--top { background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); }
.tone-dark .stage__shade--bottom { background: linear-gradient(to top, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0)); }
/* Tono independiente para la banda inferior (opcional por foto) */
.tone-bottom-light .stage__shade--bottom { background: linear-gradient(to top, rgba(19, 18, 17, 0.55), rgba(19, 18, 17, 0.25) 45%, rgba(19, 18, 17, 0)); }
.tone-bottom-dark .stage__shade--bottom { background: linear-gradient(to top, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0)); }

/* Color de la interfaz sobre la foto */
.is-home .site-header { color: var(--ink); }
.is-home.tone-light .site-header { color: var(--paper); }
.stage-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; color: var(--ink); transition: color var(--fade) var(--ease-out), opacity 400ms var(--ease-out); padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom)); }
.tone-light .stage-ui { color: var(--paper); }
.tone-bottom-light .stage-ui { color: var(--paper); }
.tone-bottom-dark .stage-ui { color: var(--ink); }

.stage-ui__bar { display: flex; align-items: center; gap: 24px; }
.progress { flex: 1; position: relative; height: 2px; background: transparent; opacity: 0.9; }
.progress::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.22; }
.progress__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n, 10)); background: currentColor; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 900ms var(--ease-out); }
.counter { font-size: var(--fs); letter-spacing: 0.18em; font-variant-numeric: tabular-nums; opacity: 0.85; min-width: 5.5ch; text-align: right; }

.controls { display: flex; gap: 2px; margin-right: -12px; }
.ctrl { width: 44px; height: 44px; display: grid; place-items: center; opacity: 0.85; transition: opacity 200ms; }
.ctrl:hover, .ctrl:focus-visible { opacity: 1; }
.ctrl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ctrl .icon-play { display: none; }
.is-paused .ctrl .icon-pause { display: none; }
.is-paused .ctrl .icon-play { display: block; }

/* Texto sobre cada foto (se escribe en Portada; vacío = sin texto) */
.caption { margin: 0 0 18px; min-height: 1em; max-width: 100%; transition: opacity var(--fade) var(--ease-out); }
.caption.is-fading { opacity: 0; }
.caption__text, .caption__small { margin: 0; }
.caption__text:empty, .caption__small:empty { display: none; }
.caption--editorial .caption__text {
  font-family: var(--sans); font-weight: 500; font-size: var(--fs); line-height: var(--lh);
  max-width: 46ch; text-wrap: balance;
}
.caption--editorial .caption__small { margin-top: 10px; }
.caption--discreet .caption__text { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.92; }
.caption--discreet .caption__small { margin-top: 6px; }
.caption__small { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.tone-light .caption--editorial .caption__text, .tone-bottom-light .caption--editorial .caption__text { text-shadow: 0 1px 14px rgba(19, 18, 17, 0.28); }
.tone-bottom-dark .caption--editorial .caption__text { text-shadow: none; }

.stage-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 767px) {
  .stage-ui__bar { gap: 14px; }
  .counter { display: none; }
  .caption { margin-bottom: 12px; }
}

/* ---------- 7. Páginas interiores (papel) ---------- */
main.page { padding: calc(var(--header-h) + clamp(40px, 8vw, 96px)) var(--gutter) clamp(64px, 10vw, 140px); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.page__head { max-width: 34em; }
.page__head .eyebrow { margin: 0 0 22px; }
h1.title { font-family: var(--sans); font-weight: 500; font-size: var(--fs-text); line-height: var(--lh); letter-spacing: 0; margin: 0 0 24px; }
.lede { font-size: var(--fs-text); font-weight: 400; line-height: var(--lh); color: var(--ink-2); margin: 0; max-width: var(--measure); }

.section { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 24px clamp(24px, 6vw, 96px); align-items: start; }
.section > h2 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-text); line-height: var(--lh); margin: 0; }
.section > h2 .eyebrow { display: block; margin-bottom: 14px; }
.section__body { max-width: var(--measure); font-size: var(--fs-text); }
.section__body p { margin: 0 0 1.1em; }
.section__body p:last-child { margin-bottom: 0; }
.section__body p a:not(.header-link):not(.text-cta) { text-decoration: underline; text-underline-offset: 4px; }
/* Enlace final de una sección (p. ej. «Reservar una conversación») */
.text-cta { display: inline-block; font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3; padding: 10px 0 6px; border-bottom: 1px solid currentColor; transition: color 200ms, border-color 200ms; }
.text-cta:hover, .text-cta:focus-visible { color: var(--ink-2); border-color: var(--rule-2); }
.section__cta { margin-top: 1.4em !important; }
.section__body strong { font-weight: 600; }
@media (max-width: 767px) { .section { grid-template-columns: 1fr; gap: 18px; } }

.quote { font-family: var(--sans); font-size: var(--fs-text); line-height: var(--lh); font-weight: 500; margin: 0; color: var(--ink); max-width: var(--measure); }
.quote cite { display: block; margin-top: 16px; font-family: var(--sans); font-style: normal; font-size: var(--fs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

.values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.values li { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows--after { margin-top: 32px; }
.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 8px clamp(24px, 6vw, 96px); padding: 22px 0; border-bottom: 1px solid var(--rule); }
.rows h3 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-text); line-height: var(--lh); margin: 0; }
.rows .items { margin: 0; font-size: var(--fs-text); color: var(--ink-2); line-height: var(--lh); }
@media (max-width: 767px) { .rows > li { grid-template-columns: 1fr; gap: 6px; } }

.note { font-size: var(--fs); color: var(--ink-3); border-left: 2px solid var(--rule-2); padding-left: 14px; margin: 0 0 32px; }
.pending { display: inline-block; font-size: var(--fs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--rule-2); padding: 3px 8px; vertical-align: middle; }

.contact dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 32px; }
.contact dt { font-size: var(--fs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.contact dd { margin: 0; font-size: var(--fs-text); font-weight: 400; line-height: var(--lh); }
.contact dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .contact dl { grid-template-columns: 1fr; gap: 4px 0; } .contact dd { margin-bottom: 14px; } }

/* ---------- 7b. Página de reservas (plugin JVSG Citas) ----------
   El plugin trae sus propios tamaños (de 11 a 34 px) y titulares en serif.
   Aquí se igualan al resto de la web: Public Sans y un único tamaño (--fs).
   El plugin carga su hoja después que el tema; el id del widget da a estas
   reglas prioridad sin recurrir a !important. */
#jvsg-citas { --jc-serif: var(--sans); font-size: var(--fs); line-height: var(--lh); }
#jvsg-citas * { font-size: inherit; }
#jvsg-citas :is(.jc-title, .jc-h, .jc-h2) { font-size: var(--fs-text); font-weight: 500; line-height: var(--lh); letter-spacing: 0; }
#jvsg-citas :is(.jc-btn, .jc-slot-next, .jc-summary dt) { letter-spacing: 0.18em; }

/* iPhone y iPad: Safari amplía la página al tocar un campo con letra de menos
   de 16 px. Solo ahí, y solo en los campos de formulario, se mantienen 16 px. */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, #jvsg-citas :is(input, select, textarea) { font-size: 16px; }
}

/* ---------- 8. Pie ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 40px var(--gutter) max(36px, env(safe-area-inset-bottom)); font-size: var(--fs); line-height: var(--lh); color: var(--ink-2); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(24px, 6vw, 96px); align-items: end; }
.footer-brand p { margin: 0; }
.footer-name { font-size: var(--fs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px !important; }
.footer-areas { font-weight: 400; max-width: 46em; }
.footer-places { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px !important; }
.footer-mail { margin-top: 6px !important; }
.footer-mail a:hover, .footer-mail a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.footer-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-nav, .footer-social { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.footer-nav a, .footer-social a { font-size: var(--fs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.footer-nav a:hover, .footer-social a:hover, .footer-nav a:focus-visible, .footer-social a:focus-visible { color: var(--ink); }
@media (max-width: 767px) {
  .site-footer .wrap { grid-template-columns: 1fr; }
  .footer-side { align-items: flex-start; }
}

/* ---------- 8b. Fondo fotográfico en todos los apartados (1.0.10) ----------
   Las páginas interiores van sobre la foto del mar a pantalla completa, fija,
   sin velo ni oscurecido: igual que en la portada (1.0.14). Cabecera sin fondo.
   (Texto original de 1.0.10:) Las páginas interiores van sobre la foto del mar, fija
   mientras se lee. Un velo azul noche uniforme (más denso en la franja clara
   del horizonte) garantiza contraste con el texto en blanco: al menos 4,5:1
   sobre la zona más clara de la foto, también a 11 px.
   La página de reservas mantiene su ficha blanca con texto oscuro. */
body.is-page {
  --veil: 8, 20, 32;
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.9);
  --ink-3: rgba(255, 255, 255, 0.8);
  --rule: rgba(255, 255, 255, 0.2);
  --rule-2: rgba(255, 255, 255, 0.42);
  background: #13293a;
  color: var(--ink);
}
body.is-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    #13293a url("assets/img/fondo-mar-2400.webp") center 50% / cover no-repeat;
}
@media (orientation: landscape) and (max-width: 900px) {
  body.is-page::before { background-image: url("assets/img/fondo-mar-1200.webp"); }
}
@media (orientation: portrait) {
  body.is-page::before { background-image: url("assets/img/fondo-mar-movil.webp"); }
}
body.is-page ::selection { background: rgba(255, 255, 255, 0.85); color: #131211; }
/* Cabecera: transparente, con un velo leve y desenfoque para que el texto que sube por detrás no se cruce con el logotipo */
.is-page .site-header--paper { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Panel del menú en interiores: cristal oscuro en lugar de papel blanco */
/* Panel del menú en interiores: el mismo que en la portada (1.0.13). Al abrirlo,
   el contenido de la página se desvanece y queda solo la foto del mar, de modo
   que el panel casi transparente (velo y desenfoque de Portada) se ve igual. */
.is-page .nav-drawer {
  background: rgba(19, 18, 17, var(--drawer-opacity));
  -webkit-backdrop-filter: blur(var(--drawer-blur)); backdrop-filter: blur(var(--drawer-blur));
  color: #ffffff;
}
.is-page.nav-open .burger { color: #ffffff; }
.is-page main, .is-page .site-footer { transition: opacity 500ms var(--ease-out), visibility 0s linear 0s; }
.is-page.nav-open main, .is-page.nav-open .site-footer { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms; }
.is-page .site-header--paper { transition: background-color 400ms var(--ease-out); }
.is-page.nav-open .site-header--paper { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
}
.is-page .nav-backdrop { background: transparent; }
/* 8b-bis. Reservas sobre la foto (1.0.16): bloque transparente, sin ficha blanca.
   Velo muy ligero y difuminado detrás del widget: --jc-veil (0 = sin velo, .07 = actual, .3 = marcado) y piezas de cristal oscuro.
   Solo en pantalla: al imprimir se mantiene el aspecto de papel del plugin. */
@media screen {
#jvsg-citas{
  --ink:#fff;--ink-2:rgba(255,255,255,.96);--ink-3:rgba(255,255,255,.9);
  --rule:rgba(255,255,255,.28);--rule-2:rgba(255,255,255,.62);--paper:rgb(var(--veil));
  --jc-veil:.07;--jc-glass:transparent;--jc-open:transparent;--jc-wash:transparent;--jc-danger:#ffd0c7;
  position:relative;isolation:isolate;color:#fff;
}
#jvsg-citas::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-90px calc(var(--gutter) * -1);
  background:rgba(var(--veil),var(--jc-veil));
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent),linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent),linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask-composite:intersect;
}
#jvsg-citas .jc-card{background:transparent;border:0}
#jvsg-citas .jc-grid th{color:#fff;font-weight:600}
#jvsg-citas :is(.jc-times-h,.jc-month-label,.jc-h,.jc-tz label){font-weight:600}
#jvsg-citas .jc-slot-time{font-weight:700}
#jvsg-citas .jc-day[aria-disabled="true"]{opacity:.8}
#jvsg-citas .jc-day.is-open{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
#jvsg-citas .jc-day.is-open:hover{box-shadow:inset 0 0 0 1px #fff}
#jvsg-citas .jc-day.is-selected,#jvsg-citas .jc-day.is-selected:hover{box-shadow:none}
#jvsg-citas .jc-slot-time{background:var(--jc-glass);box-shadow:inset 0 0 0 1px var(--jc-rule-2);color:#fff}
#jvsg-citas .jc-slot-time:hover{box-shadow:inset 0 0 0 1.5px #fff}
#jvsg-citas .jc-slot.is-selected .jc-slot-time{background:#fff;color:var(--jc-paper);box-shadow:none}
#jvsg-citas .jc-slot-next:hover,#jvsg-citas .jc-btn:hover{background:rgba(255,255,255,.86);color:var(--jc-paper)}
#jvsg-citas .jc-btn.is-busy::after{border-color:rgba(var(--veil),.25);border-top-color:rgb(var(--veil))}
#jvsg-citas .jc-btn--danger:hover{background:#ffe0da}
#jvsg-citas .jc-tz select{background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");color:#fff}
#jvsg-citas .jc-tz select option,#jvsg-citas .jc-tz select optgroup{color:#131211;background:#fff}
#jvsg-citas .jc-field input[type="text"],#jvsg-citas .jc-field input[type="email"],#jvsg-citas .jc-field textarea{background:var(--jc-glass);color:#fff;border-color:var(--jc-rule-2)}
#jvsg-citas .jc-field input::placeholder,#jvsg-citas .jc-field textarea::placeholder{color:rgba(255,255,255,.72)}
#jvsg-citas .jc-field input:hover,#jvsg-citas .jc-field textarea:hover{border-color:rgba(255,255,255,.9)}
#jvsg-citas .jc-field input:focus,#jvsg-citas .jc-field textarea:focus{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#jvsg-citas .jc-field.has-error input,#jvsg-citas .jc-field.has-error textarea{border-color:var(--jc-danger)}
#jvsg-citas .jc-field input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:inset 0 0 0 100px rgb(var(--veil))}
#jvsg-citas .jc-notice{background:transparent;color:#fff}
#jvsg-citas .jc-btn-ghost,#jvsg-citas .jc-back{background:var(--jc-glass)}
}

/* ---------- 8c. Cabecera que se desplaza con la página y botón «Volver arriba» (1.0.15) ----------
   En interiores la cabecera (hamburguesa, logotipo y BLOG) ya no queda fija:
   se va con el texto al bajar y no se solapa con él. Para volver al menú,
   el botón «Volver arriba» aparece abajo a la derecha tras bajar más de media
   pantalla. En la portada no hay botón (una sola pantalla, sin desplazamiento). */
.is-page .site-header, .is-page .burger { position: absolute; }
.to-top {
  position: fixed; z-index: 95; right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom));
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; color: #ffffff;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s linear 300ms, border-color 200ms;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover, .to-top:focus-visible { border-color: #ffffff; }
.to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-open .to-top { opacity: 0; visibility: hidden; }
@media print { .to-top { display: none !important; } }

/* ---------- 9. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage__slide { transition-duration: 300ms; }
  .stage--kenburns .stage__slide.is-active img { animation: none; }
  .nav-drawer, .nav-backdrop, .nav-list a, .burger__lines span, .progress__fill, .header-link::after, .text-cta { transition-duration: 1ms; transition-delay: 0s; }
  .site-header, .stage-ui, .stage__shade, .caption { transition-duration: 300ms; }
}

/* ---------- 10. Impresión ---------- */
@media print {
  .site-header, .nav-drawer, .nav-backdrop, .stage-ui, .skip-link, .burger { display: none !important; }
  body.is-page { --ink: #131211; --ink-2: #45423d; --ink-3: #767068; --rule: #e5e2dc; background: #fff; }
  body.is-page::before { display: none; }
  main.page { padding-top: 0; }
}