.interior {
  position: fixed;
  inset: 0;
  z-index: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  background-color: #f6f2ea;
  background-image: url("../assets/derived/fondo-interior-iching.png.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.interior__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.interior__wash,
.interior__haze,
.interior__range--far,
.interior__range--mid,
.interior__range--near,
.interior__mist--back,
.interior__mist--front,
.interior__veil {
  display: none;
}

.interior__wash {
  background: linear-gradient(
    180deg,
    #f8f5ef 0%,
    #f6f2ea 38%,
    #f5f1e8 72%,
    #f7f4ee 100%
  );
}

.interior__haze {
  background:
    radial-gradient(
      ellipse 90% 55% at 50% 18%,
      rgba(255, 252, 247, 0.72) 0%,
      rgba(255, 252, 247, 0) 70%
    ),
    radial-gradient(
      ellipse 80% 50% at 8% 62%,
      rgba(245, 240, 232, 0.45) 0%,
      rgba(245, 240, 232, 0) 68%
    ),
    radial-gradient(
      ellipse 70% 48% at 92% 58%,
      rgba(247, 243, 236, 0.4) 0%,
      rgba(247, 243, 236, 0) 70%
    );
}

.interior__range {
  top: auto;
  height: 58%;
  bottom: 8%;
}

.interior__range--far {
  height: 52%;
  bottom: 22%;
  left: -12%;
  right: -12%;
  width: auto;
  background: #c5bdb2;
  opacity: 0.42;
  filter: blur(14px);
  clip-path: polygon(
    0% 100%,
    0% 64%,
    7% 60%,
    13% 68%,
    21% 52%,
    28% 61%,
    36% 46%,
    44% 58%,
    52% 42%,
    61% 55%,
    70% 48%,
    78% 62%,
    86% 50%,
    93% 64%,
    100% 58%,
    100% 100%
  );
}

.interior__range--mid {
  height: 48%;
  bottom: 10%;
  left: -14%;
  right: -10%;
  width: auto;
  background: #b7aea3;
  opacity: 0.55;
  filter: blur(8px);
  clip-path: polygon(
    0% 100%,
    0% 72%,
    9% 66%,
    16% 74%,
    24% 58%,
    33% 70%,
    42% 54%,
    51% 68%,
    60% 60%,
    69% 72%,
    77% 56%,
    85% 69%,
    93% 63%,
    100% 74%,
    100% 100%
  );
}

.interior__range--near {
  height: 40%;
  bottom: -4%;
  left: -16%;
  right: -16%;
  width: auto;
  background: #a89f93;
  opacity: 0.64;
  filter: blur(5px);
  clip-path: polygon(
    0% 100%,
    0% 78%,
    11% 74%,
    18% 82%,
    27% 70%,
    38% 80%,
    48% 68%,
    58% 79%,
    68% 72%,
    79% 82%,
    88% 76%,
    100% 84%,
    100% 100%
  );
}

.interior__mist--back {
  background:
    linear-gradient(
      180deg,
      rgba(246, 242, 234, 0) 28%,
      rgba(246, 242, 234, 0.12) 52%,
      rgba(247, 244, 238, 0.18) 78%,
      rgba(247, 244, 238, 0.08) 100%
    ),
    radial-gradient(
      ellipse 100% 40% at 50% 58%,
      rgba(255, 253, 249, 0.18) 0%,
      rgba(255, 253, 249, 0) 72%
    );
}

.interior__mist--front {
  background:
    radial-gradient(
      ellipse 95% 38% at 40% 70%,
      rgba(255, 252, 247, 0.16) 0%,
      rgba(255, 252, 247, 0) 70%
    ),
    radial-gradient(
      ellipse 80% 34% at 70% 76%,
      rgba(246, 242, 234, 0.14) 0%,
      rgba(246, 242, 234, 0) 68%
    );
}

.interior__veil {
  background: linear-gradient(
    180deg,
    rgba(248, 245, 239, 0.1) 0%,
    rgba(246, 242, 234, 0.04) 42%,
    rgba(247, 244, 238, 0.08) 78%,
    rgba(248, 245, 239, 0.14) 100%
  );
}

.interior__school-logo {
  position: absolute;
  top: 2.4rem;
  left: 4.5vw;
  z-index: 1;
  display: block;
  width: 160px;
  height: auto;
}

.interior__windows {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  padding: 6.5rem 4.5vw 5rem;
  box-sizing: border-box;
}

.interior__window {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(15.25rem, 20vw);
  height: min(32.5rem, 64vh);
  margin: 0;
  padding: 1.65rem 1.45rem 1.5rem;
  box-sizing: border-box;
  pointer-events: auto;
}

.interior__window-glass,
.interior__window-liquid {
  position: absolute;
  inset: 0;
  border-radius: 0.72rem;
  pointer-events: none;
}

.interior__window-glass {
  z-index: 0;
  background: rgba(255, 252, 247, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 252, 247, 0.42),
    0 10px 28px rgba(42, 36, 28, 0.055);
  -webkit-backdrop-filter: blur(11px) saturate(1.04);
  backdrop-filter: blur(11px) saturate(1.04);
}

.interior__window-liquid {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  background-image: url("../assets/derived/fondo-interior-iching.png.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: url("#interior-liquid-filter");
}

.interior__window.is-liquid .interior__window-liquid {
  opacity: 0.58;
}

.interior__window-num,
.interior__window-title,
.interior__window-kicker,
.interior__window-copy {
  position: relative;
  z-index: 2;
}

.interior__window-num,
.interior__window-title,
.interior__window-kicker {
  margin: 0;
  font-family: Montserrat, "Segoe UI", sans-serif;
}

.interior__liquid-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .interior__window-liquid {
    display: none;
  }

  .interior__window-btn,
  .interior__window-btn-arrow {
    transition: none;
  }
}

.interior__window-num {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(90, 83, 74, 0.72);
}

.interior__window-title {
  margin-top: 1.85rem;
  max-width: 11.5rem;
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #2a251f;
}

.interior__window-kicker {
  margin-top: 0.95rem;
  max-width: 11.75rem;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(90, 83, 74, 0.78);
}

.interior__window-copy {
  margin: 0.85rem 0 0;
  max-width: 11.75rem;
  font-family: Montserrat, "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(42, 37, 31, 0.7);
}

.interior__window-btn {
  position: absolute;
  left: 50%;
  top: 72%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  width: max-content;
  min-height: 2.7rem;
  height: 2.7rem;
  margin: 0;
  padding: 0 1.15rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 0.32rem;
  background: rgba(255, 252, 247, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(42, 37, 31, 0.05),
    0 8px 18px rgba(42, 36, 28, 0.07);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  backdrop-filter: blur(8px) saturate(1.04);
  font-family: Montserrat, "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2a251f;
  cursor: pointer;
  appearance: none;
  transform: translateX(-50%);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.interior__window-btn-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}

.interior__window-btn:hover {
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(42, 37, 31, 0.05),
    0 10px 22px rgba(42, 36, 28, 0.1);
  transform: translateX(-50%) translateY(-2px);
}

.interior__window-btn:hover .interior__window-btn-arrow {
  transform: translateX(3px);
}

.interior__window-btn:focus {
  outline: none;
}

.interior__window-btn:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(42, 37, 31, 0.05),
    0 8px 18px rgba(42, 36, 28, 0.07),
    0 0 0 2px rgba(255, 252, 247, 0.9),
    0 0 0 3px rgba(42, 37, 31, 0.38);
}

.interior__blog {
  position: absolute;
  left: 4.5vw;
  bottom: 2.15rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

a.interior__blog:hover,
a.interior__blog:focus-visible {
  opacity: 0.88;
  outline: none;
}

.interior__blog-mark {
  position: relative;
  display: block;
  width: 4.35rem;
  height: 4.35rem;
  flex: 0 0 4.35rem;
}

.interior__blog-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 130%;
  height: 130%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.interior__blog-word {
  position: absolute;
  right: -0.35rem;
  top: 50%;
  margin: 0;
  font-family: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
  font-size: 1.62rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: #221e1a;
  transform: translateY(-52%);
}

.interior__blog-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: 0.55rem;
  border: 1px solid rgba(42, 37, 31, 0.34);
  border-radius: 50%;
  font-size: 0.78rem;
  line-height: 1;
  color: #1f1b17;
}

.interior__blog-sep {
  display: block;
  width: 1px;
  height: 2.35rem;
  margin: 0 0.15rem 0 0.28rem;
  background: rgba(122, 110, 94, 0.58);
}

.interior__blog-kicker {
  font-family: Montserrat, "Segoe UI", sans-serif;
  font-size: 0.52rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(58, 52, 46, 0.9);
}

@media (max-width: 720px) {
  .interior {
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }

  .interior__windows {
    position: relative;
    inset: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.15rem;
    width: 100%;
    padding: 13.5rem 6vw 1.1rem;
  }

  .interior__window {
    width: min(19rem, 84%);
    height: auto;
    min-height: 0;
    padding-bottom: 4.55rem;
  }

  .interior__window-title,
  .interior__window-kicker,
  .interior__window-copy {
    max-width: 100%;
  }

  .interior__window-btn {
    top: auto;
    bottom: 1.35rem;
  }

  .interior__blog {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 0.85rem 6vw 2.35rem;
  }
}