/* ═══════════════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════════════ */

:root {
  --beige:  #F2F0EC;
  --marron: #472317;
  --gris:   #ECECEC;
  --blanco: #ffffff;

  --font-base: 'HAL Timezone', Georgia, serif;

  --text-menu:  38px;
  --lh-menu:    1;

  --text-small: 28px;
  --lh-small:   38px;

  --text-arrow: 70px;
  --lh-arrow:   16px;

  --section-h:  100dvh;

  --pad:   20px;
  --pad2:  25px;
  --padm:  30px;
  --padb:  35px;
  --padh:  75px;

  --icons-size: 65px;
  --z-header:   100;
}


/* ═══════════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════════ */

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

html,
body {
  height: 100%;
  overflow: hidden;
}

#site-scroll {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

html:has(body.page-template-default) #site-scroll {
  scroll-snap-type: none;
  overflow-y: auto;
}

body {
  background-color: var(--beige);
  color: var(--marron);
  font-family: var(--font-base);
  font-size: var(--text-menu);
  line-height: var(--lh-menu);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFÍA
═══════════════════════════════════════════════════════════════ */

.t-menu  { font-size: var(--text-menu);  line-height: var(--lh-menu); }
.t-small { font-size: var(--text-small); line-height: var(--lh-small); }
.t-arrow { font-size: var(--text-arrow); line-height: var(--lh-arrow); }


/* ═══════════════════════════════════════════════════════════════
   SECCIONES FULLPAGE
═══════════════════════════════════════════════════════════════ */

.section {
  height: var(--section-h);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER — fixed, grid 4 esquinas
═══════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  inset: 0;
  z-index: var(--z-header);
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: var(--padm) var(--padb);
}

.site-header > * { pointer-events: all; }

.site-header a,
.nav-lunas-icon svg path {
  color: var(--marron);
  transition: color 0.5s ease;
}

.nav-lunas-icon svg path {
  fill: var(--marron);
  transition: fill 0.5s ease;
}

body.slide-is-full .site-header a  { color: var(--beige); }
body.slide-is-full .nav-lunas-icon svg path { fill: var(--beige); }

/* Split fase 1: solo color, con transition suave */
body.slide-is-split-color .site-header a           { color: #ABCDD5; }
body.slide-is-split-color .nav-lunas-icon svg path  { fill: #ABCDD5; }
body.slide-is-split-color .slider-title,
body.slide-is-split-color .slider-description,
body.slide-is-split-color .slider-arrow            { color: #ABCDD5; }

/* Split fase 2: blend mode (sin flash, el color ya está en #ABCDD5) */
body.slide-is-split .site-header {
  mix-blend-mode: exclusion;
  isolation: auto;
}
body.slide-is-split .nav-lunas-icon svg { mix-blend-mode: exclusion; }
body.slide-is-split .slider-header      { mix-blend-mode: exclusion; }
body.slide-is-split .slider-description,
body.slide-is-split .slider-arrow       { mix-blend-mode: exclusion; }


/* Esquinas — home y prehome */
.nav-lunatica   { grid-column:1; grid-row:1; align-self:start; justify-self:start; }
.nav-suites     { grid-column:2; grid-row:1; align-self:start; justify-self:end; }
.nav-lunas-icon { grid-column:1; grid-row:2; align-self:end; justify-self:start;
                  display:block; width:var(--icons-size); height:var(--icons-size); }

.nav-lunas-icon svg {
  width:  var(--icons-size) !important;
  height: var(--icons-size) !important;
}
.nav-book       { grid-column:2; grid-row:2; align-self:end; justify-self:end;
                  text-decoration:underline; text-underline-offset:6px; }

/* Header default — 3 columnas con título centrado */
.site-header--default {
  grid-template-columns: 1fr auto 1fr;
}
.site-header--default .nav-lunatica { grid-column:1; grid-row:1; }
.site-header--default .nav-title    { grid-column:2; grid-row:1; align-self:start; justify-self:center; pointer-events:none; }
.site-header--default .nav-suites   { grid-column:3; grid-row:1; align-self:start; justify-self:end; }
.site-header--default .nav-lunas-icon { grid-column:1; grid-row:2; }
.site-header--default .nav-book       { grid-column:3; grid-row:2; }

/* Franjas de fondo en default: franja arriba (row 1) + abajo (row 2) */
.page-template-default .site-header--default::before,
.page-template-default .site-header--default::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  background: var(--beige);
  z-index: -1;
  pointer-events: none;
}
.page-template-default .site-header--default::before {
  top: 0;
  height: var(--header-h);
}
.page-template-default .site-header--default::after {
  bottom: 0;
  height: var(--header-h);
}

/* ── Lang en el hero ─────────────────────────────────────────── */

.hero-lang {
  position: absolute;
  bottom: var(--padm);
  left: calc(var(--padb) + var(--icons-size) + 16px);
  z-index: 10;
}

.hero-lang ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-lang a { color: var(--marron); }
.hero-lang .wpml-ls-flag { display: none; }


/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */

.section--hero {
  background-color: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-moon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}


/* ═══════════════════════════════════════════════════════════════
   FULLSCREEN
═══════════════════════════════════════════════════════════════ */

.section--fullscreen .fullscreen-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   SLIDER
═══════════════════════════════════════════════════════════════ */

.section--slider {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slider-title,
.slider-description,
.slider-arrow {
  color: var(--marron);
  transition: color 0.5s ease;
}

.section--slider.is-full .slider-title,
.section--slider.is-full .slider-description,
.section--slider.is-full .slider-arrow {
  color: var(--beige);
}

.slider-header {
  position: absolute;
  top: var(--padm);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

.slider-description {
  position: absolute;
  bottom: var(--pad);
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 80vw);
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

.slider-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slider-swiper .swiper-wrapper { height: 100%; }

.slider-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--padb);
  user-select: none;
}

.slider-arrow.prev { left: 0; }
.slider-arrow.next { right: 0; }

/* Framed — 1 imagen */
.slide--framed .slide-frame {
  width: min(760px, 63vw);
  aspect-ratio: 1097 / 689;
  overflow: hidden;
}

.slide--framed .slide-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Framed — 2 imágenes */
.slide--framed-2 .slide-frame-2 {
  display: flex;
  gap: var(--pad2);
  height: min(689px, 72vh);
}

.slide--framed-2 .slide-frame-2 .img-wrap {
  width: min(459px, 38vw);
  overflow: hidden;
}

.slide--framed-2 .slide-frame-2 .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full */
.slide--full .slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   OUR SUITES
═══════════════════════════════════════════════════════════════ */

.section--suites-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pad2) * 2);
  padding: 60px 40px;
}

.suites-grid {
  display: flex;
  gap: var(--pad2);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
}

.suite-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.suite-card--linked { cursor: pointer; }

.suite-card__image {
  width: 396px;
  max-width: 100%;
  aspect-ratio: 396 / 256;
  background: #140F0E;
  overflow: hidden;
  position: relative;
}

.suite-card__luna {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}

.suite-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.suite-card--linked:hover .suite-card__cover { opacity: 0; }

.suite-card__name { text-align: center; }
.suite-card__sub  { text-align: center; margin-top: -12px; }

/* Lunas mobile — ocultas en desktop */
.suites-moons { display: none; }

/* Bullets Swiper — ocultos en desktop */
.swiper-pagination { display: none; }



/* ═══════════════════════════════════════════════════════════════
   MAPA
═══════════════════════════════════════════════════════════════ */

.section--mapa {
  overflow: hidden;
}

/* Contenedor anclado top-right, aspect-ratio fijo */
.mapa-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100dvh * 1729 / 1117);
  max-width: 100%;
  aspect-ratio: 300 / 194;
}

.mapa-dot-test {
  position: absolute;
  width: 16px;
  height: 16px;
  background: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.mapa-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* Línea SVG overlay */
.mapa-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Uluwatu — centrado en la sección */
.mapa-uluwatu {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-align: center;
  color: var(--beige);
  pointer-events: none;
}

/* Pin = wrapper posicionado en el dot exacto */
.mapa-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
  width: var(--pad2);
  height: var(--pad2);
}

/* El dot siempre centrado */
.mapa-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #F2F0EC;
}

/* Label — absoluto, no afecta al dot */
.mapa-label {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  background: transparent;
}

.mapa-marker--ul .mapa-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Label a la izquierda del dot */
.mapa-pin--left .mapa-label {
  left: 0;
  transform: translate(calc(-100% - 10px), -50%);
}

/* Label a la derecha del dot */
.mapa-pin--right .mapa-label {
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
}

/* Labels solo texto */
.mapa-text-only {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  background: transparent;
}


/* ═══════════════════════════════════════════════════════════════
   SPLIT — imagen + texto (5fr : 7fr)
   Modificador: .split--reversed  →  texto izq, imagen der
═══════════════════════════════════════════════════════════════ */

.section--split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-areas: "img content";
  max-width: 1400px;
  margin: 0 auto;
}

.section--split.split--reversed {
  grid-template-columns: 7fr 5fr;
  grid-template-areas: "content img";
}

.split-image {
  grid-area: img;
  padding: calc(100% / 5);
}

.section--split.split--reversed .split-image {
  padding: calc(100% / 5);
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.split-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 40px;
  padding: 80px 80px 80px 0;
}

.section--split.split--reversed .split-content {
  padding: 80px 0 80px 80px;
}


/* ═══════════════════════════════════════════════════════════════
   SLIDE LAYOUTS — unificados (section, swiper-slide)
   Clases: slide--full | slide--framed | slide--framed-2 | slide--split
═══════════════════════════════════════════════════════════════ */

/* Slide como section (photo-slide standalone) */
.section.slide--full,
.section.slide--framed,
.section.slide--framed-2,
.section.slide--split {
  overflow: hidden;
}

/* Dentro de swiper: ocupar todo el slide */
.swiper-slide.slide--full,
.swiper-slide.slide--framed,
.swiper-slide.slide--framed-2,
.swiper-slide.slide--split {
  width: 100%;
  height: 100%;
}

/* Split en swiper: override del flex del .slider-swiper .swiper-slide */
.slider-swiper .swiper-slide.slide--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── Full ────────────────────────────────────────────────────── */
.slide--full .slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Framed — 1 imagen ───────────────────────────────────────── */
.slide--framed {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide--framed .slide-frame {
  width: min(760px, 63vw);
  aspect-ratio: 1097 / 689;
  overflow: hidden;
}

/* ── Framed — 2 imágenes ─────────────────────────────────────── */
.slide--framed-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide--framed-2 .slide-frame-2 {
  display: flex;
  gap: var(--pad2);
  height: min(689px, 72vh);
}

.slide--framed-2 .slide-frame {
  width: min(459px, 38vw);
  height: 100%;
  overflow: hidden;
}

.slide-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Split — 2 columnas ──────────────────────────────────────── */
/* Split como section: 100dvh */
.section.slide--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100dvh;
}

/* Split dentro de swiper: 100% del slide */
.swiper-slide.slide--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.split-col {
  position: relative;
  overflow: hidden;
  height: 100dvh;
  min-height: 0;
}

.split-col--full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-col--framed {
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-col--framed img {
  width: 100%;
  height: 100%;
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
}


/* ═══════════════════════════════════════════════════════════════
   OUR STORY
═══════════════════════════════════════════════════════════════ */

.section--story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--padm) 80px;
  overflow: hidden;
}

.story-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.story-moons {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 0;
}

/* Fila superior: luna izquierda y luna derecha separadas */
.story-row--top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 2% 0 15%;
}

/* Fila inferior: ambas lunas a la izquierda */
.story-row--bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3vw;
  padding: 0 2%;
}

.story-moon {
  height: clamp(60px, 22dvh, 320px);
  width: auto;
  mix-blend-mode: multiply;
}

.story-caption {
  text-align: center;
}

.story-bottom {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   CENTERED TEXT
═══════════════════════════════════════════════════════════════ */

.section--centered-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padh);
  padding: 80px;
}

.section--centered-text .t-small,
.section--centered-text > div {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--padh);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer-links {
  display: flex;
  gap: 32px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE CONTENT (páginas por defecto)
═══════════════════════════════════════════════════════════════ */

.page-content {
  max-width: 850px;
  margin: 0 auto;
  padding: calc(var(--padm) * 5) var(--padb) calc(var(--padm) * 3);
}

.page-content__inner h1,
.page-content__inner h2,
.page-content__inner h3 {
  text-align: center;
  margin-bottom: 1em;
  font-weight: 400;
  font-size: var(--text-small);
  line-height: var(--lh-small);
}

.page-content__inner p  { margin-bottom: 0.75em; }
.page-content__inner ol,
.page-content__inner ul { padding-left: 1.4em; margin-bottom: 1em; }
.page-content__inner li { margin-bottom: 0.4em; }

/* ── post-content: espaciado entre bloques de body copy ── */
.post-content p,
.post-content h2,
.post-content h3,
.post-content ul,
.post-content ol,
.post-content blockquote {
  margin-bottom: var(--lh-small);
}

.post-content *:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PREHOME
═══════════════════════════════════════════════════════════════ */

.prehome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100dvh;
  overflow: hidden;
}

.prehome-col {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.prehome-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prehome-label {
  position: relative;
  z-index: 1;
  color: var(--blanco);
  pointer-events: none;
}

/* Header sobre prehome — todo blanco, solo book clicable */
.page-template-template-prehome .site-header a,
.page-template-template-prehome .site-header span {
  color: var(--blanco);
  pointer-events: none;
}

.page-template-template-prehome .site-header .nav-book {
  pointer-events: auto;
}

.page-template-template-prehome .nav-lunas-icon svg path {
  fill: var(--blanco);
}

.page-template-template-prehome .nav-suites {
  display: none;
}