/* Landing Page – Campestre Americano (CSS limpio) */
/* =================================================
   1) Tokens y base
   2) Background
   3) Navbar + botón
   4) Hero
   5) Carrusel
   6) CTA v2 + Form
   7) Footer
   8) Responsive
   ================================================= */

/* ========== 1) TOKENS Y BASE ========== */
@font-face {
  font-family: 'MiFuente';
  src: url('../assets/hk-grotesk.light.otf') format('woff2'),
       url('../assets/hk-grotesk.light.otf') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root{
  /* Paleta */
  --navy-blue: #353f79;
  --dark-navy: #192159;
  --gold: #a8916d;
  --light-gold: #c4ab85;
  --white: #ffffff;
  --light-blue: #2d3f5f;

  /* Layout */
  --nav-h: 88px;
  /* Escalable: no supera el alto del header en ningún viewport */
  --nav-logo-h: 84px;

  /* Hero logo (mantengo tus valores base) */
  --hero-logo-min: 340px;
  --hero-logo-ideal: 58vw;
  --hero-logo-max: 460px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:rgba(168,145,109,.3); color:var(--white); }
::-moz-selection{ background:rgba(168,145,109,.3); color:var(--white); }

/* ========== 2) BACKGROUND ========== */
.background-overlay{
   position: fixed; inset: 0; z-index: -1; background: #b1a74a;
}
.background-overlay::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,145,109,.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168,145,109,.03) 0%, transparent 50%);
}

/* ========== 3) NAVBAR + BOTÓN ========== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  z-index: 1000;
  background: rgba(255, 255, 255); 
 
  
}
.navbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.9), rgba(255,255,255,0.3));
}
.navbar .logo img{
  height:var(--nav-logo-h);
  max-height: calc(var(--nav-h) - 12px); /* cinturón y tirantes */
  width:auto; display:block;
}
.btn-mural{
  background:transparent;
  border:1.5px solid rgba(168,145,109,.6);
  color:var(--dark-navy);
  padding:11px 28px; border-radius:25px;
  font-size:14px; font-weight:400; letter-spacing:.3px;
  cursor:pointer; transition:all .3s ease;
  display:flex; align-items:center; gap:8px; font-family:inherit;
}
.btn-mural:hover{
  background:rgba(168,145,109,.15);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.dropdown-icon{ font-size:10px; opacity:.8; }

/* ========== 4) HERO ========== */
.hero-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* en lugar de center */
  text-align: center;
  padding: calc(var(--nav-h)) 20px 0; /* margen desde arriba */
  position: relative;
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-top: 5vh; 
}
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

.hero-emblem {
  margin-top: 100px;
  max-width: min(100%, 520px);
  height: auto;
}

/* ==== Textos del hero – responsivo fino ==== */
.hero-title{
  /* “Años” */
  font-size: clamp(40px, 5.4vw, 84px);
  font-weight:300; color:var(--white);
  margin:10px 0 20px;
  letter-spacing: clamp(4px, 0.6vw, 10px);
}
.hero-subtitle{
  /* “Construyendo” */
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight:300; color:var(--white);
  margin-bottom:8px;
  letter-spacing: clamp(3px, 0.5vw, 8px);
}
.hero-emphasis{
  /* “SUEÑOS” */
  font-size: clamp(44px, 6.2vw, 104px);
  font-weight:700; color:var(--light-gold);
  letter-spacing: clamp(6px, 1vw, 14px);
  margin-bottom:22px;
  text-shadow:0 2px 20px rgba(196,171,133,.25);
}
.hero-tagline {
  margin-top: 50px;
  font-size: clamp(14px, 1.8vw, 22px);
  width: min(85%, 1000px);
  color: rgb(255, 255, 255);
  font-family:miFuente;
  
  font-weight: bolder;
  letter-spacing: clamp(2px, 0.35vw, 6px);
  line-height: 1.5;
  
  text-align: center;

}

.scroll-indicator{
  position:absolute; bottom:50px; left:50%; transform:translateX(-50%);
  background:transparent; border:1.5px solid rgba(168,145,109,.4);
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s ease; animation:bounce 2.5s infinite ease-in-out;
}
.scroll-indicator:hover{ background:rgba(168,145,109,.1); border-color:var(--gold); }
.arrow-down{ font-size:20px; color:var(--gold); }
@keyframes bounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(-8px); }
}

/* ========== 5) CARRUSEL (unificado) ========== */
.memorable-moments{
  min-height:100vh;
  padding:100px 20px;
  background:#ffffff; /* >>> fondo fuera del carrusel en blanco */
}
.moments-container{ max-width:1200px; margin:0 auto; }
.moments-title{
  font-size:clamp(56px,5.5vw,54px); font-weight:300; text-align:center;
  margin-bottom:12px; color:#b1a74a; /* >>> legible sobre blanco */
  letter-spacing:2px; position:relative; z-index:1;
  font-weight: bold;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.moments-subtitle{
  font-size:clamp(16px,1.8vw,19px); text-align:center; color:#b1a74a; /* >>> contraste medio */
  max-width:760px; margin:0 auto 34px; line-height:1.7; font-weight:300;
}

.carousel-wrapper{
  position:relative; max-width:min(1200px,92vw); margin:24px auto 0;
}
.carousel-container{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(168,145,109,.15); /* borde suave */
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  background:#0a2342; /* >>> carrusel se queda oscuro */
}
.carousel-container:focus{
  outline:2px solid rgba(255,255,255,.4);
  outline-offset:4px;
}

.carousel-slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.02);
  transition:opacity .6s ease, transform .6s ease; pointer-events:none;
}
.carousel-slide.active{ opacity:1; transform:scale(1); pointer-events:auto; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.carousel-overlay{
  position:absolute; inset:auto 0 0 0; padding:18px 20px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 46%, rgba(0,0,0,.75));
  color:#fff; /* >>> texto claro dentro del carrusel oscuro */
}
.carousel-text-main{
  margin:0 0 6px; font-size:clamp(18px,2.4vw,28px); font-weight:700; letter-spacing:.2px;
  color:#fff;
}
.carousel-text-sub{
  margin:0; color:rgba(255,255,255,.85); font-size:clamp(13px,1.7vw,16px);
}

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.08); color:#fff;
  display:grid; place-items:center; font-size:1.4rem;
  cursor:pointer; z-index:2; backdrop-filter:blur(6px);
  transition:background .2s ease;
}
.carousel-btn.prev{ left:14px; }
.carousel-btn.next{ right:14px; }
.carousel-btn:hover{ background:rgba(255,255,255,.14); }

.carousel-indicators{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
/* Soporta lo que genere tu JS: .indicator, .dot o buttons genéricos */
.carousel-indicators button,
.carousel-indicators .indicator,
.carousel-indicators .dot{
  width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.85);
  cursor:pointer; transition:transform .2s, background .2s, border-color .2s;
}
.carousel-indicators button:hover,
.carousel-indicators .indicator:hover,
.carousel-indicators .dot:hover{ transform:scale(1.15); }
.carousel-indicators .active{ background:var(--light-gold); border-color:var(--light-gold); }

/* ========== 6) CTA v2 + FORM (encapsulado) ========== */
.cta-v2{ padding:56px 0; }
.cta-v2 .container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.section-title{ font-size:70px; margin:0 0 6px; letter-spacing:2px; text-align:center; font-family: miFuente; font-weight: bold;}
.section-description{ margin:0 0 22px; color:rgba(255,255,255,.75); text-align:center; max-width:1000px; margin-inline:auto;font-size: 30px;  font-family: miFuente;}

.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cta-card{
  position:relative; overflow:hidden; border-radius:16px;
  padding:18px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change:transform;
}
.cta-card:hover{ border-color:rgba(255,255,255,.18); box-shadow:0 12px 36px rgba(0,0,0,.32); }
.cta-card .card-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px 220px at var(--mx,50%) var(--my,50%), rgba(196,171,133,.20), transparent 55%);
  mix-blend-mode:screen;
}

.card-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.card-icon{ width:28px; height:28px; color: var(--dark-navy); }
.card-title{ margin:0; font-size:clamp(18px,2.4vw,22px); letter-spacing:.2px; color:var(--dark-navy); }
.card-sub{ margin:4px 0 0; color:rgba(255,255,255,.75); font-size:.95rem; }

.card-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.btn-cta{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border-radius:12px; padding:10px 14px; font-weight:600; text-decoration:none;
  border:1px solid rgba(255,255,255); background:rgba(255,255,255,.04); color:#fff;
  transition:background .2s, border-color .2s, transform .15s ease;
}
.btn-cta:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }
.btn-cta:active{ transform:translateY(1px); }
.btn-cta.primary{
  border-color: white;
  background:linear-gradient(180deg, rgba(196,171,133,.16), rgba(196,171,133,.10));
}


.single-preview{ position:relative; overflow:hidden; border-radius:12px; border:1px solid #192159; background:rgba(255,255,255,.03); }
.single-preview img{ width:100%; height:460px; object-fit:cover; display:block; }

.cta-v2 #card-share{
  --f-bg: rgba(255,255,255,.06);
  --f-bg-hover: rgba(255,255,255,.10);
  --f-border: rgba(255,255,255,.20);
  --f-border-focus: #796bc9;
  --f-ring: rgba(201,151,107,.35);
  --f-text: #fff;
  --f-muted: rgba(255,255,255,.75);
  --f-err: #ff6b6b;
  --f-ok: #32d296;
}
.cta-v2 #card-share .share-form{
  display:grid; gap:14px; margin:12px auto 0; width:min(780px,100%); padding:12px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.03)); border-radius:16px;
}
@media (min-width:768px){
  .cta-v2 #card-share .share-form{
    grid-template-columns:repeat(12, minmax(0,1fr));
    gap:16px 18px; padding:16px 18px; align-items:start;
  }
  .cta-v2 #card-share .share-form .field:nth-of-type(1){ grid-column:span 6; }
  .cta-v2 #card-share .share-form .field:nth-of-type(2){ grid-column:span 6; }
  .cta-v2 #card-share .share-form .field:nth-of-type(3),
  .cta-v2 #card-share .share-form .consent,
  .cta-v2 #card-share .share-form .card-actions,
  .cta-v2 #card-share .share-form #form-feedback{ grid-column:1 / -1; }
}
.cta-v2 #card-share .share-form .field{ display:grid; gap:6px; }
.cta-v2 #card-share .share-form label{ color:var(--f-muted); font-size:.92rem; letter-spacing:.2px; }
.cta-v2 #card-share .share-form input[type="text"],
.cta-v2 #card-share .share-form input[type="email"],
.cta-v2 #card-share .share-form textarea{
  width:100%; color:var(--f-text);
  background:var(--f-bg); border:1px solid var(--f-border); border-radius:12px;
  padding:12px 14px; outline:none;
  transition:border-color .2s, background-color .2s, box-shadow .2s, transform .06s;
  box-shadow:0 0 0 0 transparent; min-height:44px;
}
.cta-v2 #card-share .share-form input::placeholder,
.cta-v2 #card-share .share-form textarea::placeholder{ color:rgba(255,255,255,.45); }
.cta-v2 #card-share .share-form input:hover,
.cta-v2 #card-share .share-form textarea:hover{
  background:var(--f-bg-hover); border-color:rgba(255,255,255,.28);
}
.cta-v2 #card-share .share-form input:focus-visible,
.cta-v2 #card-share .share-form textarea:focus-visible{
  border-color:var(--f-border-focus); box-shadow:0 0 0 6px var(--f-ring);
}
.cta-v2 #card-share .share-form textarea{ min-height:140px; resize:vertical; }
.cta-v2 #card-share .share-form .consent{
  display:grid; grid-template-columns:20px 1fr; align-items:start; gap:10px; padding-top:6px;
}
.cta-v2 #card-share .share-form .consent input[type="checkbox"]{
  margin-top:4px; width:18px; height:18px; accent-color:var(--f-border-focus);
}
.cta-v2 #card-share .share-form .btn-cta.primary{
  background:linear-gradient(180deg, white, white);
  color:#0B2E59; border:1px solid #0B2E59; border-radius:12px; padding:12px 16px;
  font-weight:700; letter-spacing:.2px; box-shadow:0 8px 22px rgba(201,151,107,.28);
}
.cta-v2 #card-share .share-form .btn-cta.primary[disabled]{ opacity:.7; cursor:progress; }
.cta-v2 #card-share .share-form .btn-cta.ghost{
  background:var(--f-bg); color:var(--f-text); border:1px dashed var(--f-border); border-radius:12px; padding:11px 14px;
}
.cta-v2 #card-share .share-form .hint{ color:rgba(255,255,255,.5); font-size:.82rem; }
.cta-v2 #card-share .share-form #form-feedback{
  margin-top:4px; font-size:.95rem; padding:10px 12px; border-radius:10px;
  background:var(--f-bg); border:1px solid var(--f-border); color:var(--f-text);
}
.cta-v2 #card-share .share-form #form-feedback.ok{
  border-color:rgba(50,210,150,.6); background:rgba(50,210,150,.12);
}
.cta-v2 #card-share .share-form #form-feedback.err{
  border-color:rgba(107, 142, 255, 0.6); background:rgba(255,107,107,.12);
}
.cta-v2 #card-share .share-form .hp{
  position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;
}

/* ========== 7) FOOTER (estilo exacto) ========== */
.cca-footer{
  background: white;
  padding:28px 16px 26px; text-align:center; color:rgba(255,255,255,.92); line-height:1.2;
}
.cca-footer .admin-link{
  display:inline-block; color:rgba(255,255,255,.5); text-decoration:none; font-size:13px;
  padding:9px 20px; border:1px solid rgba(168,145,109,.25); border-radius:20px; margin-bottom:25px;
  transition:all .3s ease; letter-spacing:.5px;
}
.cca-footer .admin-link:hover{
  color:var(--gold); border-color:rgba(168,145,109,.5); background:rgba(168,145,109,.05);
}
.cca-footer .footer-social{
  display:flex; justify-content:center; align-items:center; gap:22px; margin-bottom:14px;
}
.cca-footer .social-link{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  color:#192159; opacity:.95; transition:transform .2s ease, opacity .2s ease;
}
.cca-footer .social-link svg{ width:20px; height:20px; display:block; }
.cca-footer .social-link:hover{ transform:translateY(-1px); opacity:1; }

.cca-footer .footer-links{
  display:flex; justify-content:center; flex-wrap:wrap;
  margin:0 auto 10px; max-width:1100px;
}
.cca-footer .footer-links span{
  position:relative; padding:0 14px; font-size:14px; text-decoration:none;
  color:#192159; white-space:nowrap;
}
.cca-footer .footer-links a{
  position:relative; padding:0 14px; font-size:14px; text-decoration:none;
  color:#192159; white-space:nowrap;
}
.cca-footer .footer-links a:hover{ text-decoration:underline; }


.cca-footer .footer-meta{
  display:grid; gap:6px; place-items:center; color:#192159;
}
.cca-footer .footer-meta .footer-line{ font-size:13px; }

/* ========== 8) RESPONSIVE ========== */
@media (max-width:900px){
  .cta-grid{ grid-template-columns:1fr; }
  .single-preview img{ height:220px; }
}
@media (max-width:768px){
  .navbar{ padding:0 25px; }
  .btn-mural{ padding:9px 20px; font-size:13px; }
  .scroll-indicator{ bottom:35px; }
}
@media (max-width:720px){
  .carousel-container{ aspect-ratio:4/3; border-radius:14px; }
  .carousel-btn{ width:38px; height:38px; }
}
@media (max-width:640px){
  :root{
    --nav-h: 80px;
    /* Escalable en móviles también, sin romper el header */
    --nav-logo-h: clamp(36px, 7vh, 56px);

    --hero-logo-min: 300px;
    --hero-logo-ideal: 82vw;
    --hero-logo-max: 540px;
  }
  .cca-footer .footer-links{ max-width:90vw; }
  .cca-footer .footer-links a{ padding:6px 10px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-section{ -webkit-mask-image:none; mask-image:none; }
  .hero-content, .carousel-slide{ transition:none; }
  .cta-card{ transition: box-shadow .2s, border-color .2s; }
}

/* Mejora tipográfica en pantallas grandes */
@media (min-width: 1200px){
  :root{
    --hero-logo-ideal: 30vw; /* tu ajuste previo del logo hero */
    --hero-logo-max: 700px;  /* 1200–1599px */
  }
  .hero-title{    font-size: clamp(64px, 5vw, 96px); }
  .hero-subtitle{ font-size: clamp(48px, 4.2vw, 76px); }
  .hero-emphasis{ font-size: clamp(72px, 6vw, 120px); }
}
@media (min-width: 1600px){
  :root{
    --hero-logo-ideal: 54vw; /* tu ajuste previo del logo hero */
    --hero-logo-max: 980px;  /* monitores grandes */
  }
  .hero-title{    font-size: clamp(72px, 4.2vw, 110px); }
  .hero-subtitle{ font-size: clamp(56px, 3.8vw, 90px); }
  .hero-emphasis{ font-size: clamp(84px, 5.2vw, 140px); }
}

/* Microajuste para móviles muy pequeños (opcional) */
@media (max-width: 400px){
  .hero-title{ letter-spacing: 3px; }
  .hero-subtitle{ letter-spacing: 2px; }
  .hero-emphasis{ letter-spacing: 5px; }
  .hero-tagline{ letter-spacing: 2px; }
}


/* === OVERRIDE: Logo del navbar fijo a 84px en todos los tamaños === */
:root{
  --nav-h: 86px;      /* Header un poco más alto para alojar 84px cómodos */
  --nav-logo-h: 84px; /* Alto exacto del logo */
}

.navbar .logo img{
  height: var(--nav-logo-h);
  max-height: calc(var(--nav-h) - 6px); /* 6px de aire arriba/abajo */
}

/* En móviles también, sin clamps que lo achiquen */
@media (max-width: 640px){
  :root{
    --nav-h: 96px;
    --nav-logo-h: 84px;
  }
}


/* === OVERRIDE: solo tamaño del logo del navbar === */
.navbar .logo img{
  height: 154px !important;     /* tamaño objetivo del logo */
  width: auto;
  max-height: none !important; /* quita el límite que lo achicaba */
  object-fit: contain;
}

/* Fuerza 84px también en móviles */
@media (max-width: 640px){
  .navbar .logo img{
    height: 124px !important;
    max-height: none !important;
  }
}

/* === Fondo geométrico abstracto y minimalista (debajo del carrusel) === */
.memorable-moments{
  position: relative;
  background: #fff;             /* fondo blanco que ya usas */
  isolation: isolate;           /* que nada se mezcle con el contenido */
  --ink: 115 177 15;            /* #73b10f en RGB */
  --arc: .12;                   /* opacidad arcos */
  --line: .06;                  /* opacidad líneas diagonales */
  --dot: .10;                   /* opacidad puntos */
  --gap: 88px;                  /* separación entre líneas; súbela/bájala para densidad */
}

/* Capa A: arcos finos desde las 4 esquinas (conic-gradients) */
.memorable-moments::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background:
    conic-gradient(from -10deg at 0% 0%,
      rgba(var(--ink) / var(--arc)) 0 7deg, transparent 7deg 360deg),
    conic-gradient(from 190deg at 100% 0%,
      rgba(var(--ink) / var(--arc)) 0 8deg, transparent 8deg 360deg),
    conic-gradient(from  80deg at 0% 100%,
      rgba(var(--ink) / var(--arc)) 0 9deg, transparent 9deg 360deg),
    conic-gradient(from 280deg at 100% 100%,
      rgba(var(--ink) / var(--arc)) 0 6deg, transparent 6deg 360deg);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* Capa B: líneas diagonales muy espaciadas + algunos nodos puntuales */
.memorable-moments::after{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background:
    /* líneas diagonales minimalistas */
    repeating-linear-gradient(32deg,
      rgba(var(--ink) / var(--line)) 0 1px,
      transparent 1px var(--gap)
    ),
    /* puntos dispersos (pocos y sutiles) */
    radial-gradient(circle at 12% 22%, rgba(var(--ink) / var(--dot)) 0 2px, transparent 2.2px),
    radial-gradient(circle at 82% 28%, rgba(var(--ink) / var(--dot)) 0 2px, transparent 2.2px),
    radial-gradient(circle at 18% 78%, rgba(var(--ink) / calc(var(--dot) - .03)) 0 1.5px, transparent 2.1px),
    radial-gradient(circle at 72% 82%, rgba(var(--ink) / var(--dot)) 0 1.8px, transparent 2.2px);
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  mix-blend-mode: multiply;
}

/* Asegura que el carrusel y textos queden por encima del fondo */
.memorable-moments .moments-container,
.memorable-moments .carousel-wrapper{
  position: relative;
  z-index: 1;
}