/* ═══════════════════════════════════════════════
   INTRO · Sobre → carta que se abre a pantalla completa
   Usa las variables de :root definidas en index.html
   ═══════════════════════════════════════════════ */

.env-overlay {
  position: fixed; inset: 0;
  z-index: 2147483647;
  background: #FBF5F7;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.env-overlay::before {            /* mismo fondo que la web */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(251,245,247,0.90), rgba(251,245,247,0.90)),
    url('../bg-travel-light.png') repeat 0 0 / 420px auto;
}
.env-overlay.env-hidden { display: none !important; }

.env-scene {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3.2rem;
}

/* ── Sobre ── */
.env-wrap {
  position: relative;
  width: clamp(280px, 72vw, 460px);
  filter: drop-shadow(0 18px 40px rgba(90,30,50,0.28)) drop-shadow(0 2px 6px rgba(90,30,50,0.18));
  animation: envIn 1s cubic-bezier(.2,.7,.2,1) both, envFloat 4s 1s ease-in-out infinite;
  will-change: transform;
}
.env-wrap.env-opening { animation: none; }

.env-body {
  position: relative;
  width: 100%; aspect-ratio: 360 / 232;
  background: #F1E6DC;
  border-radius: 4px;
  border: 1px solid rgba(129,1,51,0.22);
  perspective: 900px;
}
.env-interior {
  position: absolute; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #4A1626 0%, #622232 100%);
  border-radius: 3px;
}
.env-pocket {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none; border-radius: 3px; overflow: hidden;
}

/* ── Carta ── */
.env-card {
  position: absolute; z-index: 1;
  left: 6%; right: 6%; top: 8%; bottom: 8%;
  container-type: size;
  background: #FBF5F7;
  box-shadow: 0 2px 14px rgba(0,0,0,0.28);
  overflow: hidden;
  will-change: transform;
}
.env-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(251,245,247,0.92), rgba(251,245,247,0.92)),
    url('../bg-travel-light.png') repeat 0 0 / 420px auto;
}
.card-frame {
  position: absolute; inset: 4cqmin;
  border: 1px solid rgba(129,1,51,0.28);
}
.card-frame::after {
  content: ''; position: absolute; inset: 1.4cqmin;
  border: 0.5px solid rgba(129,1,51,0.18);
}
.card-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--garnet);
  font-family: 'Cormorant Garamond', serif;
}
.card-eyebrow {
  font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 2.6cqmin; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 3.5cqmin; padding-left: 0.32em;
}
.card-mono {
  width: 34cqmin; height: 34cqmin; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 4px 28px rgba(129,1,51,0.10), 0 1px 6px rgba(129,1,51,0.06);
  font-size: 12cqmin; font-weight: 300; letter-spacing: 0.06em; line-height: 1;
  margin-bottom: 4cqmin;
}
.card-mono i { font-style: normal; color: var(--amber); }
.card-names {
  font-size: 8cqmin; font-style: italic; font-weight: 300;
  color: var(--text); letter-spacing: 0.04em; line-height: 1.1;
  margin-bottom: 2.2cqmin;
}
.card-date {
  font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 3cqmin; letter-spacing: 0.24em; color: var(--text-soft);
  padding-left: 0.24em;
}

/* ── Solapa (cara exterior + cara interior) ── */
.env-flap {
  position: absolute; top: -1px; left: -1px; right: -1px; height: 65.5%;
  z-index: 3;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.env-flap > svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.env-flap .flap-back { transform: rotateY(180deg); }

/* ── Sello de lacre ── */
.wax-seal {
  position: absolute; bottom: -42px; left: 50%;
  width: clamp(72px, 11.5vw, 98px); height: clamp(72px, 11.5vw, 98px);
  margin-left: calc(clamp(72px, 11.5vw, 98px) / -2);
  z-index: 5;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,0.32));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  animation: sealPulse 2.6s 1.2s ease-in-out infinite;
  transition: scale 0.3s ease;
}
.env-wrap:hover .wax-seal { scale: 1.08; }
.wax-shard {
  position: fixed; z-index: 30; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #B5485F, #43101D 75%);
  pointer-events: none;
}

/* ── Texto guía ── */
.env-tap-hint {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(129,1,51,0.55);
  animation: envFadeUp 0.9s 0.9s both;
}

@keyframes envIn {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes envFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes envFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sealPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .env-wrap, .wax-seal, .env-tap-hint { animation: none; }
}