/* ============================================================
   MUSEO PAGE — estilos compartidos para las 4 páginas de museo
   Cada página define --museo-color con el color propio
============================================================ */

/* ── HERO ── */
.mp-hero {
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  background: var(--museo-bg, #04719a);
  padding-top: 80px;
}
.mp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.45;
  mix-blend-mode: luminosity;
}
.mp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.2) 100%
  );
}
.mp-hero__content {
  position: relative; z-index: 2;
  padding-top: 2rem;
  padding-bottom: 5rem;
}
.mp-hero__back {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.55); font-size: 12px; font-weight: 600;
  text-decoration: none; margin-bottom: 2rem;
  transition: color 0.18s; letter-spacing: 0.04em;
}
.mp-hero__back:hover { color: #fff; }
.mp-hero__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
}
.mp-hero__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900; color: #fff;
  line-height: 1.02; letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.mp-hero__meta {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  color: rgba(255,255,255,0.55);
  font-size: 13px; margin-bottom: 0.75rem;
}
.mp-hero__subtitle {
  font-size: 16px; color: rgba(255,255,255,0.65);
  line-height: 1.65; max-width: 580px; margin-bottom: 2rem;
}
.mp-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.mp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 13px;
  font-weight: 700; text-decoration: none;
  transition: all 0.2s ease; white-space: nowrap;
}
.mp-btn--primary { background: #04719a; color: #fff; }
.mp-btn--primary:hover { opacity: 0.88; transform: translateY(-2px); }
.mp-btn--outline {
  border: 2px solid rgba(255,255,255,0.45); color: #fff;
}
.mp-btn--outline:hover {
  border-color: #fff; background: rgba(255,255,255,0.1);
}

/* ── FACTS BAR ── */
.mp-facts {
  background: #1a1a1a;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mp-fact {
  padding: 22px 30px;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 4px;
}
.mp-fact:last-child { border-right: none; }
.mp-fact__num {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem; font-weight: 900;
  color: var(--museo-color, #04719a);
  line-height: 1;
}
.mp-fact__label {
  font-size: 11px; color: rgba(255,255,255,0.4);
  font-family: 'Poppins', sans-serif;
}

/* ── LEAD ── */
.mp-lead { background: #f7f3ee; padding: 5rem 0; }
.mp-lead__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.mp-lead__text-col {}
.mp-lead__accent {
  width: 40px; height: 3px;
  border-radius: 2px; margin-bottom: 1.5rem;
}
.mp-lead__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800; color: #1a1a1a;
  line-height: 1.2; margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}
.mp-lead__text {
  font-size: 15px; color: #555; line-height: 1.82;
}
.mp-lead__img-col {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.mp-lead__img-col img {
  width: 100%; height: auto; display: block;
}

/* ── SECTIONS ── */
.mp-sections { background: #fff; padding: 5rem 0; }
.mp-sections__header { margin-bottom: 3rem; }

.mp-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 0.5rem;
}
.mp-eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: currentColor; display: block; flex-shrink: 0;
}
.mp-sections__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900; color: #1a1a1a;
  letter-spacing: -0.02em;
}

.mp-sections__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(0,0,0,0.06);
  border-radius: 14px; overflow: hidden;
}
.mp-sections__grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.mp-section {
  background: #fff; padding: 2.5rem;
  transition: background 0.2s;
}
.mp-section:hover { background: #faf8f5; }

.mp-section__bar {
  width: 28px; height: 3px; border-radius: 2px;
  margin-bottom: 1rem;
}
.mp-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: #1a1a1a;
  margin-bottom: 0.75rem; line-height: 1.3;
}
.mp-section__text {
  font-size: 13.5px; color: #666; line-height: 1.78;
}

/* ── TOUR ── */
.mp-tour { background: #111; padding: 3.5rem 0; }
.mp-tour__inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.mp-tour__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
}
.mp-tour__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem; font-weight: 800; color: #fff;
}
.mp-tour__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 13px;
  font-weight: 700; text-decoration: none; color: #fff;
  transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
}
.mp-tour__btn:hover { opacity: 0.88; transform: translateY(-2px); }

/* ── PRECIOS ── */
.mp-precios { background: #f7f3ee; padding: 5rem 0; }
.mp-precios__header { margin-bottom: 2.5rem; }
.mp-precios__note {
  font-size: 13px; color: #888; margin-top: 0.5rem;
}

/* ── APP ── */
.mp-app { padding: 4rem 0; overflow: hidden; }
.mp-app__inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 3rem; align-items: center;
}
.mp-app__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.mp-app__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800; color: #fff; margin-bottom: 0.75rem;
}
.mp-app__text { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.65; }
.mp-app__img {
  width: 180px; height: auto;
  drop-shadow: 0 20px 40px rgba(0,0,0,0.3);
  display: block;
}

/* ── CONTACT STRIP ── */
.mp-contact-strip { padding: 3rem 0; }
.mp-contact-strip__inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.mp-contact-strip__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem; font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.mp-contact-strip__sub {
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.mp-contact-strip__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px;
  background: #fff; font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  transition: opacity 0.2s;
}
.mp-contact-strip__btn:hover { opacity: 0.9; }

/* ── PUNTOS TURÍSTICOS (Árboles) ── */
.mp-puntos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.mp-punto {
  background: #fff;
  border-radius: 14px;
  padding: 1.75rem;
  border: 1px solid rgba(0,0,0,0.07);
  transition: box-shadow 0.25s, transform 0.25s;
}
.mp-punto:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  transform: translateY(-3px);
}
.mp-punto__name {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem; font-weight: 700; color: #1a1a1a;
  margin-bottom: 4px;
}
.mp-punto__addr {
  font-size: 11px; color: #aaa; margin-bottom: 0.75rem;
}
.mp-punto__desc {
  font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 1rem;
}
.mp-punto__link {
  font-size: 12px; font-weight: 700; text-decoration: none;
  letter-spacing: 0.05em; transition: opacity 0.15s;
}
.mp-punto__link:hover { opacity: 0.75; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .mp-facts { grid-template-columns: repeat(2, 1fr); }
  .mp-lead__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .mp-sections__grid { grid-template-columns: 1fr; }
  .mp-sections__grid--3 { grid-template-columns: 1fr; }
  .mp-app__inner { grid-template-columns: 1fr; }
  .mp-app__img { display: none; }
  .mp-puntos__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mp-hero { min-height: 75vh; }
  .mp-hero__content { padding-bottom: 3rem; }
  .mp-facts { grid-template-columns: repeat(2, 1fr); }
  .mp-section { padding: 1.75rem; }
  .mp-tour__inner { flex-direction: column; align-items: flex-start; }
  .mp-contact-strip__inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================
   MUSEO HERO — CINEMATIC ENTRANCE (Etapa 6 · ítem 2)
   Valores per spec:
   - blur 20px → 0, scale 1.05 → 1, opacity 0 → 0.45 (1.4s)
   - breathing scale 1 ↔ 1.015 cada 8s
   - stagger 100ms entre items (eyebrow → título → meta →
     subtitle → botones; back link queda siempre visible)
   - mouse parallax 1° con lerp 0.15 (en js/immersive.js)
   - opacity end 0.45 (preserva el mix-blend luminosity
     con --museo-bg existente)
   ============================================= */

@property --mph-scale   { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --mph-blur    { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mph-opacity { syntax: '<number>'; inherits: false; initial-value: 0.45; }

.mp-hero__img {
  --mph-scale: 1;
  --mph-blur: 0px;
  --mph-opacity: 0.45;
  --mph-rx: 0deg;
  --mph-ry: 0deg;

  transform:
    perspective(1200px)
    rotateX(var(--mph-rx))
    rotateY(var(--mph-ry))
    scale(var(--mph-scale));
  filter:  blur(var(--mph-blur));
  opacity: var(--mph-opacity);

  will-change: transform, filter, opacity;
  backface-visibility: hidden;

  animation:
    mphEnter   1.4s var(--ease-out-expo) forwards,
    mphBreathe 8s   ease-in-out          infinite 1.4s;
}

@keyframes mphEnter {
  from { --mph-scale: 1.05; --mph-blur: 20px; --mph-opacity: 0; }
  to   { --mph-scale: 1;    --mph-blur: 0px;  --mph-opacity: 0.45; }
}

@keyframes mphBreathe {
  0%, 100% { --mph-scale: 1; }
  50%      { --mph-scale: 1.015; }
}

/* Stagger: eyebrow → título → meta → subtitle → botones.
   100ms entre cada uno, arranca a 0.7s (50% del entrance
   de la imagen). Back link queda fuera del stagger. */
.mp-hero__eyebrow,
.mp-hero__title,
.mp-hero__meta,
.mp-hero__subtitle,
.mp-hero__actions {
  opacity: 0;
  transform: translateY(28px);
  animation: mphContentEnter 0.6s var(--ease-out-expo) forwards;
}
.mp-hero__eyebrow  { animation-delay: 0.70s; }
.mp-hero__title    { animation-delay: 0.80s; }
.mp-hero__meta     { animation-delay: 0.90s; }
.mp-hero__subtitle { animation-delay: 1.00s; }
.mp-hero__actions  { animation-delay: 1.10s; }

@keyframes mphContentEnter {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: fade instantáneo, sin scale/blur/parallax */
@media (prefers-reduced-motion: reduce) {
  .mp-hero__img {
    animation: mphEnterReduced 0.4s ease-out forwards;
    transform: none !important;
    filter:    none !important;
  }
  @keyframes mphEnterReduced {
    from { opacity: 0; }
    to   { opacity: 0.45; }
  }
  .mp-hero__eyebrow,
  .mp-hero__title,
  .mp-hero__meta,
  .mp-hero__subtitle,
  .mp-hero__actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
}