/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

/* ── Intermediate tokens: tablet + laptop pequeño + pantallas bajas ── */
@media (max-width: 1200px) and (min-width: 769px), (max-height: 750px) and (min-width: 769px) {
  :root {
    --text-menu:  28px;
    --text-small: 20px;
    --lh-small:   28px;

    --padm:     22px;
    --padb:     26px;
    --padh:     55px;

    --icons-size: 48px;
    --header-h:   70px;

    --pad2: 18px;
  }
}

/* ── Intermediate layout: 769px–1199px ── */
@media (min-width: 769px) and (max-width: 1199px) {

  .slider-description {
    width: 60vw;
  }

  .slide--framed-2 .slide-frame-2 {
    height: min(650px, 65vh);
    justify-content: center;
  }

  /* section--split mantiene layout desktop */
  .section--split {
    height: var(--section-h);
    min-height: unset;
  }

  .mapa-inner {
    right: -8%;
  }

}

/* ── Pantallas apaisadas (≥ ~16:9): ocultar título del mapa ── */
@media (min-aspect-ratio: 16/9) {
  .mapa-uluwatu {
    display: none;
  }
}

/* ── ≤960px: ajustes generales (tablet + móvil) ── */
@media (max-width: 960px) {

  .site-header svg {
    width: 100%;
    height: 100%;
  }

  /* ── Header ── */
  .site-header {
    padding: var(--pad);
  }

  .site-header--default {
    grid-template-columns: 1fr 1fr;
  }
  .site-header--default .nav-title  { display: none; }
  .site-header--default .nav-suites { grid-column: 2; }
  .site-header--default .nav-book   { grid-column: 2; }

  /* ── Sin cambio de color — siempre marrón ── */
  body.slide-is-full .site-header a               { color: var(--marron); }
  body.slide-is-full .nav-lunas-icon svg path     { fill:  var(--marron); }
  body.slide-is-split-color .site-header a        { color: var(--marron); }
  body.slide-is-split-color .nav-lunas-icon svg path { fill: var(--marron); }
  body.slide-is-split-color .slider-title,
  body.slide-is-split-color .slider-description,
  body.slide-is-split-color .slider-arrow         { color: var(--marron); }
  body.slide-is-split .site-header                { mix-blend-mode: normal; }
  body.slide-is-split .nav-lunas-icon svg         { mix-blend-mode: normal; }
  body.slide-is-split .slider-header,
  body.slide-is-split .slider-description,
  body.slide-is-split .slider-arrow               { mix-blend-mode: normal; }

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

  .slider-title {
    padding-top: var(--header-h);
  }

  /* ── Hero ── */
  .hero-lang {
    left: calc(var(--pad) + var(--icons-size) + 12px);
    bottom: var(--pad);
  }

  /* ── Slider ── */
  .slider-header {
    top: var(--pad);
  }

  .slider-description {
    bottom: var(--pad);
    width: 90vw;
  }

  .slider-arrow {
    padding: 0 var(--pad);
  }

  /* Full slide: imagen con padding */
  .slide--full .slide-bg {
    inset: var(--header-h) var(--pad);
    width:  calc(100% - var(--pad) * 2);
    height: calc(100% - var(--header-h) * 2);
  }

  /* Framed — 1 imagen */
  .slide--framed .slide-frame {
    width: 90vw;
  }

  /* Split image mobile (section--split-image) */
  .section--split-image {
    position: relative;
    overflow: hidden;
  }

  .section--split-image img,
  .section--split-image video {
    position: absolute;
    inset: var(--header-h) var(--pad);
    width:  calc(100% - var(--pad) * 2);
    height: calc(100% - var(--header-h) * 2);
    object-fit: cover;
  }

  /* Split content mobile */
  .section--split-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padm) var(--pad);
  }

  /* Caption: título + descripción */
  .slide-caption {
    flex-shrink: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--pad);
  }

  /* ── Mapa: ocultar marcadores del sur en tablet también ── */
  .mapa-pin--south {
    display: none;
  }

  /* ── Story ── */
  .section--story {
    padding: var(--padm) var(--pad);
    justify-content: center;
  }

  /* ── Centered text ── */
  .section--centered-text {
    padding: var(--padm) var(--pad);
    gap: var(--padh);
  }

  .section--centered-text .t-small,
  .section--centered-text > div {
    gap: var(--padh);
  }

  /* ── Page content ── */
  .page-content {
    padding: calc(var(--padm) * 3) var(--pad) var(--header-h);
  }

}

/* ── ≤768px: móvil (solo teléfonos) ── */
@media (max-width: 768px) {

  /* ── Tokens móvil ── */
  :root {
    --text-menu:  23px;
    --lh-menu:    1;

    --text-small: 15px;
    --lh-small:   21px;

    --text-arrow: 40px;

    --pad:      20px;
    --pad2:     25px;
    --padm:     33px;
    --padb:     33px;
    --padh:     50px;

    --icons-size: 30px;
    --header-h:   60px;
  }

  /* ── Slider: flechas ocultas, bullets visibles ── */
  .slider-arrow { display: none; }

  .slider-description {
    width: 90vw;
  }

  /* Framed-2 — side-by-side adaptado */
  .slide--framed-2 .slide-frame-2 {
    height: min(400px, 55vh);
    gap: var(--pad);
    padding: var(--pad);
    width: 100%;
  }

  .slide-frame img {
    object-fit: contain;
  }

  .slide--framed-2 .slide-frame {
    width: 44vw;
  }

  /* Framed en mobile = imagen con padding */
  .swiper-slide.slide--framed {
    display: block;
    position: relative;
  }

  .swiper-slide.slide--full img,
  .swiper-slide.slide--framed .slide-frame {
    position: absolute;
    inset: calc(var(--header-h) + var(--padb) * 2) var(--pad);
    width:  calc(100% - var(--pad) * 2);
    height: calc((100% - var(--header-h) * 2) - (var(--padb) * 4));
    aspect-ratio: unset;
  }

  /* Primer slide con caption */
  .swiper-slide.slide--with-caption {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--header-h) var(--pad) var(--pad);
    gap: var(--padm);
  }

  .swiper-slide.slide--with-caption .slide-bg {
    position: relative !important;
    inset: unset !important;
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
  }

  .swiper-slide.slide--with-caption .slide-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    aspect-ratio: unset;
  }

  .swiper-slide.slide--with-caption .slide-frame-2 {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .swiper-slide.slide--with-caption .slide-frame-2 .slide-frame {
    height: 100%;
    width: 44vw;
    flex: unset;
  }

  .swiper-slide.slide--with-caption img {
    max-height: 30vh;
    margin: 0 auto;
  }

  /* Bullets */
  .swiper-pagination {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--pad) + var(--header-h)) !important;
    text-align: center;
    z-index: 10;
  }

  .swiper-pagination-bullet {
    display: inline-block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--marron);
    opacity: 1;
    margin: 0 2.5px;
    vertical-align: middle;
  }

  .swiper-pagination-bullet-active {
    width: 4px;
    height: 4px;
  }

  /* ── Our Suites ── */
  .section--suites-overview {
    padding: var(--padm) var(--pad);
    gap: var(--padh);
    justify-content: center;
  }

  .suites-grid {
    flex-direction: column;
    align-items: center;
    gap: var(--padh);
    width: 100%;
  }

  .suite-card {
    width: 100%;
    gap: 0px;
  }

  .suite-card__image { display: none; }

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

  .suites-moons {
    display: flex;
    gap: var(--pad);
    justify-content: center;
    align-items: center;
  }

  .suites-moon {
    height: 50px;
    width: auto;
    mix-blend-mode: multiply;
  }

  .mobile-underline {
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  /* ── Mapa ── */
  .mapa-uluwatu {
    color: var(--marron);
    height: 50%;
  }

  .mapa-pin {
    width: 12px;
    height: 12px;
  }

  .mapa-dot {
    width: 12px;
    height: 12px;
  }

  .mapa-inner {
    width: auto;
    max-width: unset;
    top: 50%;
    right: auto;
    left: -8%;
    transform: translateY(-50%);
  }

  /* ── Our Story ── */
  .story-top {
    gap: var(--pad);
    text-align: center;
    align-items: center;
  }

  .story-row--top {
  padding:0 2%;
  }

  .story-moons {
    align-items: center;
    flex: none;
  }

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

  .story-row .story-moon:nth-child(2) {
    display: none;
  }

  .story-moon {
    height: clamp(50px, 12dvh, 160px);
  }

  /* ── Split image/video (solo ≤768px) ── */
  .section--split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "img" "content";
    height: auto;
    min-height: 100dvh;
  }

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

  .split-image {
    padding: var(--padm) var(--pad) var(--pad);
  }

  .section--split.split--reversed .split-image {
    padding: var(--padm) var(--pad) var(--pad);
  }

  .split-content {
    padding: var(--pad) var(--pad) var(--padm);
    gap: var(--padm);
  }

  /* ── Prehome ── */
  .prehome {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

}