/**
 * Flor de Pacifico Presentation - STRICT ISOLATION CSS
 * Uses containment and scoping to prevent any CSS leakage
 */

/* ROOT ISOLATION CONTAINER */
.fdp-shell {
  all: revert !important;
  box-sizing: border-box !important;

  /* CSS Containment - prevents external styles from affecting this widget */
  contain: layout style paint !important;

  /* CSS Variables (safe to use, don't pollute global scope) */
  --fdp-transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fdp-transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fdp-transition-fast: cubic-bezier(0.4, 0, 0.2, 1);
  --fdp-transition-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fdp-transition-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --fdp-bg: #071410;
  --fdp-bg-soft: #0d211b;
  --fdp-panel: rgba(13, 33, 27, 0.84);
  --fdp-panel-solid: #10251f;
  --fdp-text: #f7f1e6;
  --fdp-muted: #c9d6cb;
  --fdp-ocean: #65c5c4;
  --fdp-sky: #bce7e4;
  --fdp-sun: #dcae5b;
  --fdp-clay: #b86745;
  --fdp-forest: #164436;
  --fdp-line: rgba(247, 241, 230, 0.16);
  --fdp-glass: rgba(5, 19, 16, 0.56);
  --fdp-glass-strong: rgba(5, 19, 16, 0.68);
  --fdp-glass-line: rgba(101, 197, 196, 0.24);
  --fdp-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);

  /* Base Styles */
  background: #071410 !important;
  color: var(--fdp-text) !important;
  isolation: isolate !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ========== CHILD RESET - Minimal but effective ========== */

.fdp-shell * {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Allow specific elements to have their display properties */
.fdp-shell img,
.fdp-shell video,
.fdp-shell canvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border: none !important;
}

.fdp-shell a {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.fdp-shell button {
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========== COMPONENT STYLES ========== */

.fdp-tour-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #071410 !important;
}

.fdp-tour-bg__sequence,
.fdp-tour-bg__wash {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.fdp-tour-bg__sequence {
  object-fit: cover !important;
  object-position: center !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
}

.fdp-tour-bg__wash {
  background: radial-gradient(circle at 50% 42%, rgba(101, 197, 196, 0.1), transparent 38rem),
              linear-gradient(90deg, rgba(7, 20, 16, 0.18) 0%, rgba(7, 20, 16, 0.08) 42%, rgba(7, 20, 16, 0.02) 100%),
              linear-gradient(0deg, rgba(7, 20, 16, 0.34) 0%, rgba(7, 20, 16, 0.1) 42%, rgba(7, 20, 16, 0.02) 100%) !important;
  pointer-events: none !important;
}

/* Progress Bar */
.fdp-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 12px rgba(101, 197, 196, 0.12) !important;
}

.fdp-progress__bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, #65c5c4 0%, #dcae5b 50%, #b86745 100%) !important;
  transform-origin: left !important;
  box-shadow: 0 0 20px rgba(101, 197, 196, 0.4) !important;
}

/* Header/Navigation */
.fdp-site-header {
  position: fixed !important;
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100% - 2rem) !important;
  padding: 0.36rem !important;
  background: rgba(5, 19, 16, 0.38) !important;
  border: 1px solid rgba(247, 241, 230, 0.18) !important;
  border-radius: 999px !important;
  z-index: 9999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) !important;
  backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: background 300ms var(--fdp-transition-smooth), border-color 300ms var(--fdp-transition-smooth) !important;
}

.fdp-site-header--scrolled {
  background: rgba(7, 20, 16, 0.68) !important;
  border-color: rgba(101, 197, 196, 0.08) !important;
}

.fdp-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.fdp-nav a {
  display: inline-block !important;
  padding: 0.58rem 0.9rem !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 280ms var(--fdp-transition-ease-out) !important;
  letter-spacing: 0 !important;
}

.fdp-nav a::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(101, 197, 196, 0.1), transparent) !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  transition: opacity 300ms var(--fdp-transition-smooth) !important;
  pointer-events: none !important;
}

.fdp-nav a:hover,
.fdp-nav a:focus-visible {
  background: rgba(101, 197, 196, 0.12) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(101, 197, 196, 0.12) !important;
}

.fdp-nav a:hover::before {
  opacity: 1 !important;
}

/* ========== MAIN CONTENT ========== */

main {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

.fdp-section {
  display: grid !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(5.5rem, 8vw, 8rem) 2rem !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.42) !important;
}

.fdp-section::before,
.fdp-section::after {
  content: '' !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(101, 197, 196, 0.2), transparent) !important;
  opacity: 0.5 !important;
}

.fdp-section::before {
  top: -1px !important;
}

.fdp-section::after {
  bottom: -1px !important;
}

/* ========== TYPOGRAPHY ========== */

.fdp-shell h1,
.fdp-shell h2,
.fdp-shell h3 {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
}

.fdp-shell h1 {
  font-size: 5.7rem !important;
  line-height: 0.92 !important;
  margin-bottom: 1.2rem !important;
}

.fdp-shell h2 {
  font-size: clamp(2rem, 4vw, 3.75rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 0 !important;
}

.fdp-shell h3 {
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.8rem !important;
}

.fdp-shell p {
  color: var(--fdp-muted) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
}

/* ========== GLASS CONTAINERS ========== */

.fdp-glass-container {
  background: var(--fdp-glass) !important;
  border: 1px solid var(--fdp-glass-line) !important;
  border-radius: 24px !important;
  padding: 1.6rem !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 32px rgba(101, 197, 196, 0.12) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) brightness(1.08) !important;
  backdrop-filter: blur(32px) saturate(1.4) brightness(1.08) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 450ms var(--fdp-transition-smooth) !important;
}

.fdp-glass-container > * {
  position: relative !important;
  z-index: 1 !important;
}

.fdp-glass-container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 50%, rgba(101, 197, 196, 0.12), transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(220, 174, 91, 0.06), transparent 45%),
              linear-gradient(135deg, rgba(101, 197, 196, 0.04), transparent) !important;
  border-radius: 24px !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.fdp-glass-container:hover {
  border-color: rgba(101, 197, 196, 0.28) !important;
  background: rgba(13, 33, 27, 0.36) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 40px rgba(101, 197, 196, 0.14) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.5) brightness(1.12) !important;
  backdrop-filter: blur(36px) saturate(1.5) brightness(1.12) !important;
}

/* ========== KICKER LABELS ========== */

.fdp-kicker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.72rem 1rem !important;
  background: rgba(5, 19, 16, 0.5) !important;
  border: 1px solid rgba(247, 241, 230, 0.22) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
  backdrop-filter: blur(22px) saturate(1.3) !important;
  -webkit-text-fill-color: #fff !important;
  width: fit-content !important;
}

.fdp-kicker strong {
  color: #fff !important;
  font-weight: 800 !important;
}

.fdp-kicker::after {
  display: none !important;
}

/* ========== BUTTONS ========== */

.fdp-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.9rem 1.8rem !important;
  min-height: 3.2rem !important;
  border: 1px solid var(--fdp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  transition: transform 280ms var(--fdp-transition-ease-out), border-color 300ms var(--fdp-transition-smooth), background 300ms var(--fdp-transition-smooth), box-shadow 300ms var(--fdp-transition-smooth) !important;
  text-align: center !important;
  max-width: 100% !important;
}

.fdp-button:hover,
.fdp-button:focus-visible {
  outline: 0 !important;
  transform: translateY(-2px) !important;
}

.fdp-button--primary {
  background: linear-gradient(135deg, var(--fdp-sun), #f2d897) !important;
  color: #0b1713 !important;
  border: 1px solid rgba(242, 216, 151, 0.4) !important;
  box-shadow: 0 4px 20px rgba(220, 174, 91, 0.24) !important;
}

.fdp-button--primary:hover {
  box-shadow: 0 12px 40px rgba(220, 174, 91, 0.36) !important;
}

.fdp-button--ghost {
  background: rgba(101, 197, 196, 0.12) !important;
  color: var(--fdp-text) !important;
  border: 1px solid rgba(101, 197, 196, 0.24) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

.fdp-button--ghost:hover {
  background: rgba(101, 197, 196, 0.18) !important;
  border-color: rgba(101, 197, 196, 0.36) !important;
  box-shadow: 0 8px 28px rgba(101, 197, 196, 0.16) !important;
}

/* ========== FRAMES & IMAGES ========== */

.fdp-frame {
  border: 1px solid rgba(101, 197, 196, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 24px rgba(101, 197, 196, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 480ms var(--fdp-transition-smooth) !important;
}

.fdp-frame:hover {
  border-color: rgba(101, 197, 196, 0.24) !important;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.32), 0 0 40px rgba(101, 197, 196, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.fdp-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

picture,
figure {
  display: contents !important;
}

figure {
  margin: 0 !important;
}

figcaption {
  display: block !important;
  position: absolute !important;
  bottom: 0.75rem !important;
  left: 0.75rem !important;
  right: 0.75rem !important;
  padding: 0.72rem 0.9rem !important;
  background: rgba(7, 20, 16, 0.44) !important;
  border: 1px solid rgba(247, 241, 230, 0.13) !important;
  border-radius: 16px !important;
  color: var(--fdp-text) !important;
  font-weight: 800 !important;
  text-align: center !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

/* ========== LAYOUT SECTIONS ========== */

.fdp-section__intro {
  display: grid !important;
  gap: 0.8rem !important;
  max-width: 100% !important;
  align-self: start !important;
}

.fdp-overview {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr) !important;
  min-height: auto !important;
  padding-top: clamp(3rem, 5vw, 5rem) !important;
}

.fdp-overview__grid {
  display: grid !important;
  gap: 1.3rem !important;
  grid-template-columns: 1fr !important;
  max-width: none !important;
  padding: 0 !important;
}

/* ========== GALLERY ========== */

.fdp-gallery__grid {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-flow: dense !important;
  padding: 0 !important;
  max-width: none !important;
}

.fdp-gallery__item {
  aspect-ratio: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(101, 197, 196, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 20px rgba(101, 197, 196, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  cursor: zoom-in !important;
  transition: all 500ms var(--fdp-transition-smooth) !important;
  margin: 0 !important;
}

.fdp-gallery__item:hover {
  transform: scale(1.04) translateY(-2px) !important;
  border-color: rgba(101, 197, 196, 0.18) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32), 0 0 32px rgba(101, 197, 196, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.fdp-gallery__item--wide {
  grid-column: span 2 !important;
  aspect-ratio: 2 / 1 !important;
}

.fdp-gallery__item--tall {
  grid-row: span 2 !important;
}

.fdp-gallery__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.04) !important;
}

/* ========== LIGHTBOX ========== */

.fdp-lightbox {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 5rem 2rem 2rem !important;
  background: rgba(4, 10, 8, 0.88) !important;
  z-index: 1100 !important;
  -webkit-backdrop-filter: blur(22px) !important;
  backdrop-filter: blur(22px) !important;
}

.fdp-lightbox[hidden] {
  display: none !important;
}

.fdp-lightbox__figure {
  max-width: min(1180px, 100%) !important;
  max-height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.fdp-lightbox__figure img {
  max-height: calc(100vh - 9rem) !important;
  object-fit: contain !important;
  border: 1px solid rgba(247, 241, 230, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52) !important;
  width: 100% !important;
}

.fdp-lightbox__close,
.fdp-lightbox__nav {
  position: static !important;
  padding: 0.72rem 0.9rem !important;
  min-height: 2.75rem !important;
  background: rgba(13, 33, 27, 0.48) !important;
  border: 1px solid rgba(101, 197, 196, 0.2) !important;
  border-radius: 16px !important;
  color: var(--fdp-text) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.fdp-lightbox__close {
  position: fixed !important;
  right: 1rem !important;
  top: 1rem !important;
}

.fdp-lightbox__count {
  position: fixed !important;
  bottom: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(247, 241, 230, 0.86) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

body.fdp-lightbox-open {
  overflow: hidden !important;
}

/* ========== ANIMATIONS & REVEAL ========== */

[data-fdp-reveal],
[data-fdp-image-reveal] {
  will-change: transform, opacity, clip-path !important;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1180px) {
  .fdp-overview {
    grid-template-columns: 1fr !important;
  }

  .fdp-gallery__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .fdp-site-header {
    max-width: calc(100% - 1rem) !important;
    top: 1rem !important;
    width: calc(100% - 1rem) !important;
  }

  .fdp-nav {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  .fdp-nav::-webkit-scrollbar {
    display: none !important;
  }

  .fdp-nav a {
    flex: 0 0 auto !important;
    font-size: 0.73rem !important;
    padding: 0.52rem 0.62rem !important;
  }

  .fdp-section {
    padding: 5rem 1rem !important;
  }

  .fdp-gallery__grid {
    grid-template-columns: 1fr !important;
  }

  .fdp-gallery__item,
  .fdp-gallery__item--wide,
  .fdp-gallery__item--tall {
    aspect-ratio: 4 / 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fdp-shell {
    scroll-behavior: auto !important;
  }

  .fdp-shell *,
  .fdp-shell *::before,
  .fdp-shell *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  [data-fdp-reveal],
  [data-fdp-image-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}