/**
 * Estilos base (fuera de utilidades Tailwind CDN).
 */
html {
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: #2f3e37;
  color: #fff;
  border-radius: 2px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 2px solid #e2cfb4;
  outline-offset: 2px;
}

/* Altura hero si el navegador no entiende dvh en min() */
#hero-principal {
  min-height: 88vh;
}
@supports (height: 100dvh) {
  #hero-principal {
    min-height: min(92dvh, 880px);
  }
}

.text-balance {
  text-wrap: balance;
}

/* Crédito del sitio (pie de página; no fijo junto al FAB) */
.site-credit {
  letter-spacing: 0.01em;
}

/* Marca de agua “Dubi Secret Spa” sobre fotos (no aplica a <img> directo: va en figure o wrapper). */
.photo-watermark {
  position: relative;
  overflow: hidden;
}

/* z-index base; la posición la fija cada caso (absolute en resultados, flujo normal en logos). */
.photo-watermark > img {
  z-index: 0;
}

.photo-watermark::after {
  content: 'Dubi Secret Spa';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(0.45rem, 2.8vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  pointer-events: none;
  max-width: 90%;
  text-align: center;
}

.photo-watermark figcaption {
  z-index: 3;
}

/* Logo: misma marca, más pequeña sobre el pictograma */
.photo-watermark--logo {
  container-type: size;
}

.photo-watermark--logo::after {
  font-size: clamp(4px, 2.2cqh, 9px);
  letter-spacing: 0.1em;
  transform: translate(-50%, -50%) rotate(-14deg) scale(0.92);
}

.photo-watermark--logo-on-light::after {
  color: rgba(47, 62, 55, 0.26);
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 1px 1px rgba(255, 255, 255, 0.7);
}

.photo-watermark--logo-on-dark::after {
  color: rgba(255, 255, 255, 0.42);
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Marco editorial — sección Nuestra identidad (Dubi.png) */
.identidad-foto-stack {
  isolation: isolate;
}

.identidad-foto-stack__sombra {
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgba(47, 62, 55, 0.14), rgba(138, 123, 81, 0.08));
  filter: blur(20px);
  transform: translateY(12px) scale(0.92);
  opacity: 0.55;
}

.identidad-foto-stack__respaldo {
  border-radius: 1.35rem;
  border: 1px solid rgba(138, 123, 81, 0.28);
  background: linear-gradient(160deg, rgba(226, 207, 180, 0.55) 0%, rgba(255, 255, 255, 0.65) 45%, rgba(226, 207, 180, 0.2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.identidad-foto-stack__marco {
  border-radius: 1.2rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f4 100%);
  box-shadow:
    0 32px 64px -24px rgba(47, 62, 55, 0.3),
    0 12px 28px -16px rgba(47, 62, 55, 0.12),
    0 0 0 1px rgba(138, 123, 81, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.identidad-foto-stack__mat {
  border-radius: 0.95rem;
  background: linear-gradient(180deg, rgba(250, 250, 249, 0.95) 0%, rgba(255, 255, 255, 1) 55%, rgba(245, 245, 244, 0.9) 100%);
  box-shadow: inset 0 0 48px rgba(226, 207, 180, 0.12);
}

.identidad-foto-stack__img {
  filter: saturate(1.03) contrast(1.02);
}

/* Vídeo hero: marca discreta, esquina inferior izquierda (no compite con el titular) */
.hero-image-watermark::after {
  content: 'Dubi Secret Spa';
  position: absolute;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: none;
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(0.5rem, 1.35vw, 0.625rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
}