/* ===================================
   LAYOUT & POSITIONING UTILITIES
   =================================== */

/* ===================================
   VIEWPORT SECTIONS
   =================================== */

.full-viewport-section {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: white;
}

@media (max-width: 767px) {
  .full-viewport-section {
    height: auto;
    min-height: 80vh;
    padding: var(--spacing-xl) 0;
  }
}

.min-viewport-section {
  min-height: 90vh;
  position: relative;
}

@media (max-width: 767px) {
  .min-viewport-section {
    min-height: auto;
    padding: var(--spacing-xxl) 0;
  }
}

/* ===================================
   ABSOLUTE POSITIONING
   =================================== */

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.absolute-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Posicionamiento en esquinas */
.absolute-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.absolute-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.absolute-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.absolute-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ===================================
   COMPLEX OVERLAYS
   =================================== */

.overlay-blue-banner {
  position: absolute;
  left: -100vw;
  width: calc(100vw + 36%);
  background: var(--eden-blue);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 37px;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 767px) {
  .overlay-blue-banner {
    left: -50vw;
    width: calc(50vw + 50%);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

/* ===================================
   DECORATIVE ELEMENTS
   =================================== */

.decorative-asterisk {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 18vw;
  min-width: 160px;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .decorative-asterisk {
    width: 25vw;
    min-width: 120px;
  }
}

.decorative-asterisk img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}

/* ===================================
   VIEWPORT ELEMENTS
   =================================== */

.viewport-element {
  width: 18vw;
  min-width: 160px;
}

@media (max-width: 767px) {
  .viewport-element {
    width: 25vw;
    min-width: 120px;
  }
}

.viewport-element-large {
  width: 38vw;
  max-width: 540px;
}

@media (max-width: 767px) {
  .viewport-element-large {
    width: 50vw;
    max-width: 300px;
  }
}

/* ===================================
   CONTAINERS & WRAPPERS
   =================================== */

.section-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

@media (min-width: 768px) {
  .section-container {
    max-width: 1200px;
  }
}

.content-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  overflow: visible;
  z-index: 1;
}

.image-wrapper-responsive {
  position: relative;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: visible;
  z-index: 1;
}

@media (min-width: 768px) {
  .image-wrapper-responsive {
    width: 50%;
    max-width: 800px;
  }
}

/* ===================================
   TRANSFORMS & EFFECTS
   =================================== */

.transform-flip-x {
  transform: scaleX(-1);
}

.transform-flip-y {
  transform: scaleY(-1);
}

.transform-rotate-15 {
  transform: rotate(15deg);
}

.transform-rotate-minus-15 {
  transform: rotate(-15deg);
}

.transform-rotate-30 {
  transform: rotate(30deg);
}

.transform-rotate-minus-30 {
  transform: rotate(-30deg);
}

/* ===================================
   BACKGROUND STYLES
   =================================== */

.bg-image-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-image-fixed {
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .bg-image-fixed {
    background-attachment: scroll;
  }
}

.bg-overlay-dark {
  position: relative;
}

.bg-overlay-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.bg-overlay-dark > * {
  position: relative;
  z-index: 2;
}

/* ===================================
   SPECIAL LAYOUT PATTERNS
   =================================== */

/* Grid patterns específicos */
.grid-experiences-row-1 {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-experiences-row-1 {
    grid-template-columns: 2fr 2fr 1fr;
    gap: var(--spacing-lg);
  }
}

.grid-experiences-row-2 {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-experiences-row-2 {
    grid-template-columns: 2fr 1fr 2fr;
    gap: var(--spacing-lg);
  }
}

/* Flexbox patterns */
.flex-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
}

@media (min-width: 768px) {
  .flex-center-content {
    min-height: 300px;
  }
}

/* ===================================
   POSITIONING UTILITIES
   =================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Z-index utilities */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }