:root{
  --bg:#050505;
  --bg-soft:#0b0b0d;
  --panel:#111116;
  --text:#f8f8f8;
  --muted:#a6a6ad;
  --pink:#E5007D;
  --line:rgba(255,255,255,.10);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 78% 8%, rgba(229,0,125,.15), transparent 22rem),
    radial-gradient(circle at 8% 42%, rgba(229,0,125,.08), transparent 28rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button,a{font:inherit}
.topbar{
  position:sticky;top:0;z-index:50;
  width:min(calc(100% - 32px),var(--max));
  margin:14px auto 0;
  padding:12px 14px 12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(8,8,10,.78);
  border:1px solid var(--line);
  border-radius:22px;
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:10px}
.heart-mark{display:inline-block;width:1em;height:1em;object-fit:contain;flex-shrink:0;vertical-align:middle;font-size:26px;line-height:1}
.heart-mark.mini{font-size:17px}
.heart-mark.giant{
  font-size: 160px;
  display: block;
  margin: 0 auto 18px;
}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font-size:15px}
.brand-copy small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.18em;margin-top:4px}
.nav{display:flex;gap:26px;font-size:13px;color:#d7d7db}
.nav a:hover{color:white}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;
  border-radius:999px;background:var(--pink);color:white;
  font-weight:700;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 40px rgba(229,0,125,.22);
}
.btn-small{min-height:40px;padding:0 18px;font-size:13px}
.btn-large{min-height:58px;padding:0 30px}
.text-link{font-size:14px;color:#fff;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px}
.section{width:min(calc(100% - 40px),var(--max));margin:0 auto;padding:110px 0}
.eyebrow{color:var(--pink);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.hero{
  min-height:90vh;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:72px;
  padding-top:90px;
}
.hero h1,.section h2{
  margin:.25em 0;
  font-size:clamp(3.2rem,7vw,6.6rem);
  line-height:.94;letter-spacing:-.055em;
}
.hero h1 span{font-family:"Playfair Display",serif;font-style:italic;font-weight:600;color:#fff}
.hero-text{max-width:620px;color:#c4c4ca;font-size:19px}
.hero-actions{display:flex;align-items:center;gap:22px;margin-top:32px}
.microcopy{margin-top:22px;color:#777780;font-size:12px}
.hero-visual{position:relative;min-height:650px;display:grid;place-items:center}
.ambient-glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(229,0,125,.28),rgba(229,0,125,.04) 45%,transparent 70%);
  filter:blur(20px);
}
.phone-shell{
  position:relative;z-index:2;width:320px;height:640px;border-radius:48px;
  padding:10px;background:#17171b;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 65px rgba(229,0,125,.12);
}
.phone-notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:110px;height:27px;border-radius:20px;background:#020203;z-index:4}
.phone-screen{
  width:100%;height:100%;overflow:hidden;border-radius:39px;
  background:linear-gradient(180deg,#101014,#070709);
  padding:18px;
  display:flex;flex-direction:column;
}
.phone-status{display:flex;justify-content:space-between;font-size:10px;color:#c8c8ce;padding:3px 4px 15px}
.app-brand-line{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-top:8px}
.main-moment-photo{
  margin-top:18px;flex:1;min-height:390px;border-radius:28px;
  background:url("assets/landing/06_Hero_Te_Extrano_Mira_Este_Atardecer.png") center / cover no-repeat;
}
.moment-message{padding:16px 4px 11px}
.moment-message small{display:block;color:var(--pink);font-size:9px;text-transform:uppercase;letter-spacing:.16em}
.moment-message strong{font-size:15px;display:block;margin-top:4px}
.phone-nav{display:flex;justify-content:space-around;align-items:center;padding:12px 0 4px;color:#787881}
.phone-nav .active{color:white;background:var(--pink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.moment-orbit{
  position:absolute;z-index:3;padding:10px 12px;border-radius:18px;
  background:rgba(16,16,20,.86);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);box-shadow:0 16px 50px rgba(0,0,0,.35);
}
.moment-orbit p{margin:7px 0 0;font-size:11px;max-width:145px}
.moment-orbit-a{left:0;top:135px;transform:rotate(-6deg)}
.moment-orbit-b{right:-6px;bottom:125px;transform:rotate(4deg)}
.mini-photo{display:block;width:150px;height:95px;border-radius:12px}
.mini-photo.beach{background:url("assets/landing/07_Hero_Amor_Mira_Este_Lugar.png") center / cover no-repeat}
.mini-photo.home{background:url("assets/landing/08_Hero_Ya_Llegue_A_Casa.png") center / cover no-repeat}
.narrow{max-width:800px}
.section-heading h2{font-size:clamp(2.6rem,5vw,5rem)}
.section-heading p{color:var(--muted);font-size:18px;max-width:700px}
.moments-grid{
  margin-top:56px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
}
.moment-card{
  grid-column:span 4;min-height:430px;background:var(--panel);
  border:1px solid var(--line);border-radius:28px;overflow:hidden;
}
.moment-card.tall{grid-column:span 5;min-height:560px}
.moment-card.wide{grid-column:span 7}
.moment-card.together{grid-column:span 5}
.photo-placeholder{height:calc(100% - 86px);min-height:330px}
.commute{background-image:url("assets/landing/01_Paradero_Ya_Casi_Llego.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.home-arrival{background-image:url("assets/landing/02_Amor_Ya_Llegue_A_Casa.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.family{background-image:url("assets/landing/03_Mira_Como_Estan_Los_Ninos_Jugando.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.beach-view{background-image:url("assets/landing/04_Mira_Donde_Estoy_Me_Encantaria_Que_Estuvieras_Aqui.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.couple{background-image:url("assets/landing/05_Moments_Que_Se_Convierten_En_Recuerdos_Juntos.png");background-position:center;background-size:cover;background-repeat:no-repeat}
.moment-caption{display:flex;gap:16px;align-items:flex-start;padding:20px}
.moment-caption span{color:var(--pink);font-size:11px;font-weight:700}
.moment-caption p{margin:0;font-size:15px}
.manifesto{
  text-align:center;padding:160px 0;
}
.manifesto h2{max-width:920px;margin:20px auto;font-size:clamp(3rem,6vw,6rem)}
.manifesto h2 span{color:var(--pink)}
.statement{font-family:"Playfair Display",serif;font-style:italic;font-size:24px;color:#c6c6cd}
.widget-section,.memories-section,.private-section,.blog-preview{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.widget-copy h2,.memories-copy h2,.private-section h2,.blog-preview h2{
  font-size:clamp(2.8rem,5vw,5.2rem)
}
.widget-copy p,.memories-copy p,.blog-preview p{color:var(--muted);font-size:17px}
.accent-line{border-left:2px solid var(--pink);padding-left:18px;color:#fff!important}
.video-placeholder{
  background:linear-gradient(145deg,#0f0f12,#17131a);
  border:1px solid var(--line);border-radius:30px;padding:18px;
}
.video-frame{
  min-height:500px;border-radius:22px;display:grid;place-items:center;position:relative;
  background:
    radial-gradient(circle at 50% 40%,rgba(229,0,125,.16),transparent 35%),
    linear-gradient(160deg,#15151b,#08080a);
}
.widget-card{
  width:270px;border-radius:26px;background:#09090b;border:1px solid rgba(255,255,255,.12);
  overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.5)
}
.widget-photo{height:220px;background:url("assets/landing/09_Widget_Ya_Llegue.png") center top / cover no-repeat}
.widget-meta{padding:16px}
.widget-meta span{display:block;color:var(--pink);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.widget-meta strong{font-size:14px}
.play-button{
  position:absolute;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:rgba(0,0,0,.55);color:white
}
.video-placeholder > p{text-align:center;color:#6f6f77;font-size:11px;margin:13px 0 0}
.memories-visual{position:relative;min-height:560px}
.memory{
  position:absolute;width:310px;height:390px;border-radius:28px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.45)
}
.memory-1{left:4%;top:12%;transform:rotate(-9deg);background:url("assets/landing/10_Gallery_Recuerdo_Cotidiano.png") center / cover no-repeat}
.memory-2{left:32%;top:4%;transform:rotate(4deg);background:url("assets/landing/11_Gallery_Recuerdo_Juntos_Abrazo_Intimo_Junto_A_La_Ventana.png") center top / cover no-repeat}
.memory-3{left:45%;top:25%;transform:rotate(10deg);background:url("assets/landing/12_Gallery_Recuerdo_Viaje.png") 70% center / cover no-repeat}
.private-section{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.private-points p{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);color:#d3d3d8}
.private-points span{color:var(--pink);font-size:11px}
.final-cta{text-align:center;padding:160px 0}
.final-cta h2{max-width:900px;margin:20px auto}
.final-cta p{color:var(--muted);font-size:18px;max-width:650px;margin:0 auto 30px}
.final-cta small{display:block;color:#65656d;margin-top:18px}
.blog-preview{
  padding-top:80px;padding-bottom:140px;border-top:1px solid var(--line)
}
.footer{
  width:min(calc(100% - 40px),var(--max));margin:0 auto 95px;
  padding:32px 0;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);color:#85858d;font-size:12px;
}
.footer-links{display:flex;gap:24px}
.sticky-download{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  width:min(calc(100% - 28px),720px);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:10px 12px 10px 18px;border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,12,.84);backdrop-filter:blur(20px);border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.55)
}
.sticky-download div{display:flex;flex-direction:column}
.sticky-download strong{font-size:13px}
.sticky-download span{font-size:10px;color:#8b8b93}

@media (max-width: 900px){
  .nav{display:none}
  .topbar > .btn{display:none}
  .hero,.widget-section,.memories-section,.private-section,.blog-preview{
    grid-template-columns:1fr;gap:48px
  }
  .hero{padding-top:70px}
  .hero-visual{min-height:600px}
  .moment-orbit-a{left:3%;top:110px}
  .moment-orbit-b{right:2%;bottom:90px}
  .moments-grid{grid-template-columns:1fr}
  .moment-card,.moment-card.tall,.moment-card.wide,.moment-card.together{grid-column:auto;min-height:430px}
  .memories-visual{order:2;min-height:470px}
  .memories-copy{order:1}
  .memory{width:240px;height:320px}
  .section{padding:80px 0}
}
@media (max-width: 620px){
  .section{width:min(calc(100% - 28px),var(--max))}
  .topbar{width:calc(100% - 20px);margin-top:8px}
  .hero{min-height:auto;padding-top:52px}
  .hero h1{font-size:clamp(3.15rem,16vw,5rem)}
  .hero-text{font-size:16px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .hero-visual{min-height:560px}
  .phone-shell{width:272px;height:560px}
  .main-moment-photo{min-height:320px}
  .moment-orbit{display:none}
  .section-heading h2,.widget-copy h2,.memories-copy h2,.private-section h2,.blog-preview h2{
    font-size:clamp(2.6rem,12vw,4rem)
  }
  .manifesto{padding:110px 0}
  .manifesto h2{font-size:clamp(2.8rem,13vw,4.6rem)}
  .statement{font-size:20px}
  .video-frame{min-height:430px}
  .memories-visual{min-height:400px}
  .memory{width:205px;height:280px}
  .memory-1{left:0}
  .memory-2{left:23%}
  .memory-3{left:39%}
  .sticky-download{bottom:10px;border-radius:18px}
  .sticky-download span{display:none}
  .footer{padding-bottom:60px;gap:20px;align-items:flex-start;flex-direction:column}
  
.section{
  padding: 52px 0;
}

.hero{
  padding-top: 36px;
}

.manifesto{
  padding: 64px 0;
}

.final-cta{
  padding: 80px 0;
}

.widget-section,
.memories-section,
.private-section,
.blog-preview{
  gap: 28px;
}

.moments-intro{
  padding-bottom: 44px;
}

.widget-section{
  padding-top: 56px;
  padding-bottom: 56px;
}

.memories-section{
  padding-top: 56px;
  padding-bottom: 56px;
}

.private-section{
  padding-top: 60px;
  padding-bottom: 60px;
}

.hero-visual{
  min-height: 500px;
}

.memories-visual{
  min-height: 330px;
}

.video-frame{
  min-height: 360px;
}
.final-cta{
  padding-top: 48px;
  padding-bottom: 64px;
}

.final-cta .heart-mark.giant{
  font-size: 170px;
  margin-bottom: 14px;
}

.final-cta .eyebrow{
  margin-top: 0;
}

.private-section{
  padding-bottom: 36px;
}}