:root{
  --bg:#fbf7f4;
  --ink:#1f1b1a;

  --accent:#e08f82;
  --accentSoft:rgba(224,143,130,.12);

  /* “exceptions” card style (Dear + RSVP only) */
  --cardBg: rgba(255,255,255,.86);
  --cardBd: rgba(0,0,0,.08);

  --serif:"Bodoni Moda", ui-serif, Georgia, "Times New Roman", serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: var(--sans);
  background:#efefef;
  color:var(--ink);
  overflow:hidden; /* scroll is inside .phone-frame */
}

.phone-frame{
  width:min(420px, 100%);
  height:100vh;
  margin:0 auto;
  background:var(--bg);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  border-left:1px solid rgba(0,0,0,.06);
  border-right:1px solid rgba(0,0,0,.06);
  position:relative;

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  scrollbar-width:none;
  -ms-overflow-style:none;
}
.phone-frame::-webkit-scrollbar{ display:none; }

.bg-blobs{
  position:absolute;
  inset:-240px;
  pointer-events:none;
  background:
    radial-gradient(circle at 40% 10%, rgba(224,143,130,0.10), transparent 60%),
    radial-gradient(circle at 70% 45%, rgba(224,143,130,0.08), transparent 62%),
    radial-gradient(circle at 45% 92%, rgba(0,0,0,0.04), transparent 65%);
  z-index:0;

  /* motion */
  animation: blobsMove 14s ease-in-out infinite;
  transform-origin: center;
  opacity: .95;
}
@keyframes blobsMove{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-14px, 10px, 0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* ============================= */
/* TOPBAR                        */
/* ============================= */

.topbar{
  position:sticky;
  top:14px;
  z-index:50;
  display:flex;
  justify-content:flex-end;
  padding:0 14px;
  background:transparent;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(255,255,255,.36);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.lang{ padding:6px; }
.lang-btn{
  border:none;
  cursor:pointer;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:transparent;
  color:var(--ink);
}
.lang-btn.is-active{ background:var(--accentSoft); }

/* ============================= */
/* INTRO                         */
/* ============================= */

.intro{
  position:relative;
  z-index:1;
  min-height: calc(100vh - 20px);
  display:grid;
  place-items:center;
  padding: 18px 14px 26px;
  cursor:pointer; /* click anywhere */
}

.heartBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

.heartWrap{
  width:min(320px, 82vw);
  aspect-ratio: 9 / 12;
  display:grid;
  place-items:center;
}

.heartSvg{
  width: min(280px, 70vw);
  height:auto;
  display:block;
  transform-origin:center;
  animation: heartFloat 3.6s ease-in-out infinite;
}

@keyframes heartFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

.heartBtn:hover .heartSvg{ animation-duration: 3.1s; }
.heartBtn:active .heartSvg{ transform: scale(0.985); }

.heartText{
  font-family: var(--serif);
  font-size: 84px;
  font-weight: 600;
  letter-spacing: 3px;
  fill: rgba(255,255,255,.96);
  paint-order: stroke;
  stroke: rgba(0,0,0,.10);
  stroke-width: 2px;
}

/* particles */
.particles{ position:absolute; inset:0; pointer-events:none; z-index:50; }
.p{
  position:absolute;
  font-size: 18px;
  will-change: transform, opacity;
  user-select:none;
  pointer-events:none;
  opacity:.85;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

.intro.is-leaving{
  transition: opacity .55s ease, transform .55s ease;
  opacity:0;
  transform: translateY(-10px);
}

/* ============================= */
/* CONTENT                        */
/* ============================= */

.content{ display:none; position:relative; z-index:1; }
.content.is-visible{ display:block; animation: fadeIn .65s ease both; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(14px);} to{opacity:1; transform: translateY(0);} }

/* ============================= */
/* HERO                           */
/* ============================= */

.hero{
  position:relative;
  min-height: 86vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.18));
  z-index:1;
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 70%;
  transform: scale(1.08);
  transition: transform 2.6s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.hero-center{
  position:relative;
  z-index:2;
  width:min(380px, 92vw);
  text-align:center;
  color:#fff;
  padding: 80px 14px 70px;
  transform: translateY(-190px);
}

.hero-kicker{
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity:.92;
  margin-bottom: 16px;
}

.hero-names{
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
}

.hero-date{
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 2px;
  opacity: .92;
}

/* Hero elegant reveal animation */
.hero-kicker, .hero-names, .hero-date{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(.22,1,.36,1),
    filter 1.1s ease;
  will-change: transform, opacity, filter;
}
.hero-kicker{ transition-delay: .08s; }
.hero-names{ transition-delay: .18s; }
.hero-date{ transition-delay: .32s; }

.hero.is-revealed .hero-bg{ transform: scale(1.02); }
.hero.is-revealed .hero-kicker,
.hero.is-revealed .hero-names,
.hero.is-revealed .hero-date{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .hero-bg,
  .hero-kicker, .hero-names, .hero-date{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}

/* Buttons */
.btn{
  border-radius:999px;
  padding:12px 16px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
  user-select:none;
}
.btn:hover{ transform:scale(1.02); }
.btn:active{ transform:scale(.98); }
.btn.solid{ background:var(--accent); color:#fff; }
.btn-full{ width:100%; display:flex; justify-content:center; align-items:center; gap:10px; }

/* ============================= */
/* PAGE / TYPO SYSTEM             */
/* ============================= */

.page{
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: 26px 16px 64px;
}

.section{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 54px;
  padding-bottom: 34px;
  position: relative;
}

.section::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(240px, 70%);
  height: 1px;
  background: rgba(0,0,0,.10);
}

#dear.section::after,
#rsvp.section::after{ display:none; }

.section-title{
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 8px;
  font-size: 18px;
  margin: 0 0 14px;
  color: rgba(0,0,0,.78);
  text-align: center;
}

.section-body{
  margin:0;
  font-size: 14px;
  line-height:1.75;
  color: rgba(0,0,0,.70);
  text-align: center;
}

.detail-muted{
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(0,0,0,.52);
}

/* ============================= */
/* EXCEPCIONES: Dear + RSVP cards */
/* ============================= */

#dear.section,
#rsvp.section{
  background: var(--cardBg);
  border: 1px solid var(--cardBd);
  border-radius: 0px;
  padding: 18px;
  margin-top: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
}

#dear .section-title,
#rsvp .section-title{
  text-align: center;
  letter-spacing: 5px;
}

/* ============================= */
/* SCHEDULE                       */
/* ============================= */

#schedule.section{
  margin-top: 44px;
  padding-bottom: 40px;
}

#schedule .section-title{
  font-size: 24px;
  letter-spacing: 14px;
  margin: 0 0 32px;
  color: rgba(0,0,0,.86);
  position: relative;
}
#schedule .section-title::after{
  content:"";
  display:block;
  width: 42px;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(224,143,130,.55);
}

#schedule .program{
  position: relative;
  display: grid;
  gap: 54px;
  padding: 10px 0 18px;
  justify-items: center;
  text-align: center;
}

#schedule .program::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.10),
    rgba(0,0,0,.38),
    rgba(0,0,0,.10)
  );
  z-index: 0;
}

#schedule .program-item{
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 14px;
}

#schedule .program-item::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -16px;
  bottom: -16px;
  width: min(360px, 96%);
  background: var(--bg);
  border-radius: 22px;
  z-index: 0;
}

#schedule .program-time,
#schedule .program-dot,
#schedule .program-text{
  position: relative;
  z-index: 1;
}

#schedule .program-dot.is-heart{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border-radius: 999px;
  box-shadow: 0 0 0 12px var(--bg);
  padding: 2px;
  margin: 10px 0 6px;
}

#schedule .program-heart{
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

#schedule .program-heart path{
  fill: rgba(224,143,130,.10);
  stroke: rgba(224,143,130,.88);
  stroke-width: 1.85;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-miterlimit: 2;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.10));
}

#schedule .program-item:hover .program-heart{
  transform: scale(1.06);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}

#schedule .program-title{
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: 10.8px;
  letter-spacing: 3.2px;
  font-weight: 800;
  color: rgba(0,0,0,.74);
  margin: 0;
}

#schedule .program-note{
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(0,0,0,.50);
  max-width: 40ch;
}

@media (max-width: 380px){
  #schedule .program-note{ display:none; }
  #schedule .section-title{ letter-spacing: 12px; font-size: 22px; }
  #schedule .program-timeText{ font-size: 44px; }
  #schedule .program-item::before{ width: 94%; }
}

/* ============================= */
/* DRESS / GIFTS / PLACE          */
/* ============================= */

.dress-code{
  width: 100%;
  height: auto;
  display:block;
  margin-top: 6px;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

#gifts .detail-muted{
  margin-top: 12px;
}

#place.stack-card{
  border: 1px solid rgba(0,0,0,.22);
  padding: 22px 18px 30px;
}
#place .section-title{ margin-bottom: 10px; }
#place #placeAddr{
  text-align: center;
  font-size: 13px;
  color: rgba(0,0,0,.62);
}

.place-description{
  margin-top: 12px;
  margin-bottom: 18px;
  text-align: center;
}

.map-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin: 0 auto;
  width: min(320px, 100%);
  padding: 12px 14px;

  background: transparent;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 10px;

  text-decoration:none;
  color: var(--ink);
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s ease, border-color .18s ease;
}

.map-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.45);
}

.map-card__top{ display:none; }
.map-card__cta{
  margin:0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 0;
}

/* ============================= */
/* RSVP FORM                      */
/* ============================= */

.form{ margin-top: 12px; display:grid; gap: 14px; }

.fieldset{ border:none; padding:0; margin:0; display:grid; gap: 6px; }

.legend{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
  margin-bottom: 10px;
}

.choice{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 0;
  border:none;
  background:transparent;
  cursor:pointer;
  user-select:none;
}
.choice input{ position:absolute; opacity:0; pointer-events:none; }

.choice .mark{
  width:18px;
  height:18px;
  border-radius: 999px;
  border:2px solid rgba(0,0,0,.22);
  display:inline-block;
  position:relative;
  flex: 0 0 auto;
}

.choice-text{
  font-size: 14px;
  color: rgba(0,0,0,.80);
  line-height: 1.3;
}

.choice:not(.is-check) input:checked + .mark::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius: inherit;
  background: var(--accent);
}

.choice.is-check .mark{
  position:relative;
  width:18px;
  height:18px;
  border-radius:6px;
  border:2px solid rgba(0,0,0,.22);
  background:transparent;
  transition: border-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.choice.is-check .checkSvg{
  position:absolute;
  inset:-2px;
  width:22px;
  height:22px;
  opacity:0;
  transition: opacity .18s ease;
}
.choice.is-check .checkPath{
  fill:none;
  stroke: var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .28s ease;
}
.choice.is-check input:checked + .mark{
  border-color: transparent;
  transform: scale(1.02);
}
.choice.is-check input:checked + .mark .checkSvg{ opacity:1; }
.choice.is-check input:checked + .mark .checkPath{ stroke-dashoffset: 0; }

.line-field{
  position: relative;
  margin-top: 14px;
  padding-top: 14px;
  margin-bottom: 22px;
}

.line-field input{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding: 10px 0 8px 0;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color .25s ease;
}
.line-field input:focus{
  border-bottom-color: var(--accent);
}

.line-field label{
  position: absolute;
  left: 0;
  top: 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(0,0,0,.55);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .18s ease, color .18s ease, top .18s ease;
}

.line-field input:focus + label,
.line-field input:not(:placeholder-shown) + label{
  top: 2px;
  transform: scale(0.82);
  color: rgba(0,0,0,.72);
}
.line-field input:focus + label{
  color: var(--ink);
}

.form .fieldset + .fieldset{ margin-top: 18px; }

.spinner{
  width:16px;
  height:16px;
  border-radius:99px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,0);
  display:none;
}
#rsvpSubmit.is-loading .spinner{
  display:inline-block;
  animation: spin .85s linear infinite;
}
#rsvpSubmit.is-loading #rsvpSubmitText{ opacity:.92; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============================= */
/* TOAST                          */
/* ============================= */

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999;
  max-width: min(360px, calc(100vw - 28px));

  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-visible{
  opacity:1;
  transform: translateX(-50%) translateY(-6px);
}

/* ============================= */
/* SMALL SCREEN TWEAKS            */
/* ============================= */

@media (max-width: 380px){
  .heartSvg{ width: min(250px, 72vw); }
  .heartText{ font-size: 74px; }
  .hero-names{ font-size: 40px; }
}

#place::after { display: none !important; }

/* cards stack */
.stack-card{
  border: 1px solid rgba(0,0,0,.22);
  padding: 22px 18px 26px;
  background: transparent;
}
.stack-card + .stack-card{ margin-top: 18px; }
.stack-card img{ width:100%; height:auto; display:block; }

.snap-slide{
  margin-top: 54px;
  padding: 22px 16px 26px;
}
.snap-slide::after{ display:none !important; }

/* RSVP look */
#rsvp {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.22) !important;
  box-shadow: none !important;
}
#rsvpSubmit {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ============================= */
/* FLOAT STEP SCROLL BUTTON      */
/* ============================= */

.scroll-next-wrap{
  position: fixed;
  z-index: 80;
  pointer-events: none;
  left: 0; top: 0;
  width: 0; height: 0;

  opacity: 0;
  transition: opacity .4s ease;
}
.scroll-next-wrap.is-visible{ opacity: 1; }

.scroll-next{
  position: absolute;
  right: 18px;
  bottom: 18px;

  pointer-events: auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  font-size: 20px;
  color: #fff;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.scroll-next:hover{ transform: scale(1.08); }
.scroll-next:active{ transform: scale(.95); }

/* pulse when visible */
.scroll-next-wrap.is-visible .scroll-next{
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}

/* ============================= */
/* REVEAL ON SCROLL (SAFE)       */
/* ONLY inside #content          */
/* ============================= */

#content .section,
#content .hero{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,1,.36,1),
    filter .9s ease;
  will-change: transform, opacity, filter;
}

#content .section.is-inview,
#content .hero.is-inview{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* stagger on inner blocks */
#content .section.is-inview .stack-card,
#content .section.is-inview .program-item{
  animation: popIn .7s cubic-bezier(.22,1,.36,1) both;
}
#content .section.is-inview .stack-card:nth-child(1),
#content .section.is-inview .program-item:nth-child(1){ animation-delay: .05s; }
#content .section.is-inview .stack-card:nth-child(2),
#content .section.is-inview .program-item:nth-child(2){ animation-delay: .12s; }
#content .section.is-inview .stack-card:nth-child(3),
#content .section.is-inview .program-item:nth-child(3){ animation-delay: .19s; }
#content .section.is-inview .program-item:nth-child(4){ animation-delay: .26s; }

@keyframes popIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* micro interactions */
.stack-card,
#rsvp.section,
#dear.section{
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              border-color .25s ease,
              background .25s ease,
              box-shadow .25s ease;
  will-change: transform;
}
.stack-card:hover,
#rsvp.section:hover,
#dear.section:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.30);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.stack-card:active,
#rsvp.section:active,
#dear.section:active{
  transform: translateY(0) scale(.995);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}



/* ============================= */
/* FIX: NO SE CORTAN SECCIONES   */
/* Snap SOLO en .snap-slide      */
/* ============================= */

/* 1) El contenedor puede mantener snap, pero sin forzarlo en TODO */
.phone-frame{
  scroll-snap-type: y proximity;   /* suave, no agresivo */
  scroll-padding-top: 86px;        /* compensa la topbar sticky */
}

/* 2) NO snappear secciones normales (como #schedule) */
.page > .section{
  scroll-snap-align: none !important;
}

/* 3) Snappear SOLO “slides” (las pantallas que tú definiste) */
.page > .snap-slide{
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* 4) Extra: cuando haces scroll a una sección (o un foco), no queda “tapada” */
.section,
.snap-slide{
  scroll-margin-top: 86px;
}