/* Layout: one-page mobile-first. Tokens = Figma "Specs · Responsive". Breakpoints min-width 768 / 1024 / 1440 / 1920.
   Single deliberate look (paleta de la boda), no dark theme. */
:root{
  color-scheme: light;
  --burdeos:#73141e; --blanco:#fbfaf9; --gris:#eeeeee; --rosa:#d7a59d; --clavel:#d39a8f;
  --texto:#565656; --texto-2:#434343; --texto-3:#4c4c4c; --linea:#f2e6e4; --btn:#ececec;
  --serif:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Escala tipográfica (mobile 390) */
  --fs-40:40px; --fs-32:32px; --fs-24:24px; --fs-20:20px; --fs-18:18px; --fs-16:16px; --fs-14:14px; --fs-12:12px; --fs-10:10px;
  /* Espaciado */
  --m:16px;          /* margen lateral */
  --sp:1;            /* multiplicador gaps internos */
  --py:40px;         /* padding vertical de sección */
  --hero-h:679px;
  --car:1;           /* escala carrusel */
  --icon:1;          /* escala iconos */
  --booth:318px;     /* ancho fotomatón */
  --tl-text:265px;   /* ancho texto timeline */
  --swatch:48px;
  --venue-img:430px;
  --carn:1;
  --k:1;            /* escala intro (= escala del display 40) */
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width:768px){:root{
  --k:1.3;
  --fs-40:52px; --fs-32:42px; --fs-24:28px; --fs-20:24px; --fs-18:20px; --fs-16:17px; --fs-14:15px; --fs-12:13px; --fs-10:11px;
  --m:40px; --sp:1.2; --py:64px; --hero-h:1000px; --car:1.25; --icon:1.15; --booth:318px; --tl-text:290px; --swatch:56px; --venue-img:430px; --carn:1.2;
}}
@media (min-width:1024px){:root{
  --k:1.4;
  --fs-40:56px; --fs-32:44px; --fs-24:32px; --fs-20:26px; --fs-18:20px; --fs-16:18px; --fs-14:16px; --fs-12:13px; --fs-10:11px;
  --m:48px; --sp:1.3; --py:80px; --hero-h:720px; --car:1.35; --icon:1.2; --booth:413px; --tl-text:320px; --swatch:56px; --venue-img:440px; --carn:1.4;
}}
@media (min-width:1440px){:root{
  --k:1.7;
  --fs-40:68px; --fs-32:54px; --fs-24:36px; --fs-20:30px; --fs-18:22px; --fs-16:20px; --fs-14:18px; --fs-12:14px; --fs-10:12px;
  --m:80px; --sp:1.5; --py:112px; --hero-h:900px; --car:1.6; --icon:1.3; --booth:540px; --tl-text:380px; --swatch:64px; --venue-img:560px; --carn:1.8;
}}
@media (min-width:1920px){:root{
  --k:2;
  --fs-40:80px; --fs-32:64px; --fs-24:42px; --fs-20:34px; --fs-18:24px; --fs-16:22px; --fs-14:19px; --fs-12:15px; --fs-10:13px;
  --m:160px; --sp:1.75; --py:128px; --hero-h:1080px; --car:2; --icon:1.45; --booth:636px; --tl-text:440px; --swatch:72px; --venue-img:660px; --carn:2.1;
}}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--burdeos);font-family:var(--sans);font-size:var(--fs-14);line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
a{color:inherit}
em{font-style:italic}
.serif{font-family:var(--serif);letter-spacing:-.03em;text-transform:uppercase;font-weight:400}
.serif em{font-style:italic}
.wrap{padding-inline:max(var(--m), calc((100% - 1600px) / 2))}
.section{padding-block:var(--py)}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px;border-radius:2px}

/* Clavel: máscara para poder colorearlo por contexto */
.clavel{display:inline-block;background:var(--clavel);-webkit-mask:url(../assets/img/clavel.png?v=90fab7c7) center/contain no-repeat;mask:url(../assets/img/clavel.png?v=90fab7c7) center/contain no-repeat;aspect-ratio:220/393;flex:none}

/* Botón / CTA */
.cta{display:inline-flex;align-items:center;gap:8px;padding:16px;border-radius:4px;text-decoration:none;font-family:var(--serif);font-style:italic;font-weight:600;font-size:var(--fs-16);line-height:1;letter-spacing:-.01em;border:0;cursor:pointer;background:none;color:inherit}
.cta svg{width:calc(23px * var(--icon));height:auto;flex:none;transition:transform .45s var(--ease)}
.cta:hover svg,.cta:focus-visible svg{transform:translateX(6px)}
.cta--light{color:var(--blanco)}
.cta--solid{background:var(--btn);color:var(--burdeos);box-shadow:0 4px 14px rgba(0,0,0,.12);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.cta--solid:hover{box-shadow:0 8px 22px rgba(0,0,0,.16);transform:translateY(-1px)}

/* ---------- HERO ---------- */
.hero{position:relative;height:min(var(--hero-h), 100svh);min-height:560px;overflow:hidden;color:var(--blanco);background:#5b6f86}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform-origin:60% 60%}
.hero__content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:80px var(--m) 24px}
.hero__brand{display:flex;flex-direction:column;align-items:center;gap:calc(40px * var(--sp))}
.date{display:flex;align-items:flex-start;gap:calc(23px * var(--sp));font-size:var(--fs-24);line-height:1.375;font-variant-numeric:tabular-nums}
.date__unit{display:flex;flex-direction:column;align-items:center;min-width:1.8em}
.date__unit small{font-size:var(--fs-10);line-height:1.4;letter-spacing:.02em}
.date__dot{width:4px;height:4px;border-radius:50%;background:currentColor;margin-top:.75em}
.date__brace{font-weight:300}
.names{display:flex;align-items:center;gap:8px;font-size:var(--fs-40);line-height:.68;color:var(--blanco)}
.names .clavel{width:calc(20px * var(--icon) * 1.1);background:var(--blanco);transform:rotate(-15deg)}
@media (min-width:768px){ .hero__content{padding-top:120px;padding-bottom:56px} }
@media (min-width:1024px){
  .hero__img{object-position:50% 50%}
  .hero__content{align-items:flex-start;justify-content:center;gap:var(--hero-gap,96px);padding:0 0 0 max(var(--m), calc((100% - 1600px) / 2))}
  .hero__group{display:flex;flex-direction:column;align-items:center;gap:calc(72px * var(--sp))}
}
@media (max-width:1023.98px){ .hero__group{display:contents} }

/* ---------- INTRO + CARRUSEL ---------- */
.intro{background:var(--burdeos);color:var(--blanco);padding-block:var(--py);display:flex;flex-direction:column;gap:calc(72px * var(--sp))}
.intro__text{display:flex;flex-direction:column;gap:calc(16px * var(--sp))}
.intro h2{font-size:var(--fs-24);line-height:1.125;max-width:11em;text-wrap:balance}
.intro p{font-size:var(--fs-14);max-width:19em}
@media (min-width:1024px){.intro__text{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.car{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.car.is-dragging{cursor:grabbing}
.car::-webkit-scrollbar{display:none}
/* Espaciado = Figma (8 · escala carrusel · escala de espaciado): 8 / 12,5 / 13,5 / 19,2 / 28 px */
.car__track{display:flex;align-items:center;gap:calc(8px * var(--car) * var(--sp));width:max-content;will-change:transform}
.car__item{flex:none;overflow:hidden}
.car__item img{pointer-events:none}
.car__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.car__item:hover img{transform:scale(1.04)}
.c1{width:calc(126px*var(--car));height:calc(225px*var(--car))}
.c2{width:calc(225px*var(--car));height:calc(323px*var(--car))}
.c3{width:calc(225px*var(--car));height:calc(253px*var(--car))}
.c4{width:calc(156px*var(--car));height:calc(278px*var(--car))}
.c5{width:calc(225px*var(--car));height:calc(225px*var(--car))}

/* ---------- LUGAR ---------- */
.venue{background:var(--gris);display:flex;flex-direction:column;gap:calc(40px * var(--sp))}
.venue__head{display:flex;flex-direction:column;align-items:center;gap:calc(16px * var(--sp));text-align:center}
.venue__head .clavel{width:calc(22px * var(--icon))}
.venue__head h2{font-size:var(--fs-20);line-height:1.25;max-width:16em;text-wrap:balance}
.card{background:var(--burdeos);color:var(--blanco);padding:calc(40px*var(--sp)) calc(16px*var(--sp))}
.card__in{display:flex;flex-direction:column;gap:calc(29px * var(--sp))}
.card__img{width:100%;height:var(--venue-img);object-fit:cover}
@media (max-width:767.98px){.card__img{height:auto;aspect-ratio:326/430}}
.card__img{object-position:50% 34%}@media (min-width:1024px){.card__img{object-position:50% 0%}}@media (min-width:1440px){.card__img{object-position:50% 42%}}@media (min-width:1920px){.card__img{object-position:50% 33%}}
.card__info{display:flex;flex-direction:column;gap:calc(16px * var(--sp))}
@media (min-width:768px) and (max-width:1023.98px){
  .card{padding:48px 19px}
  .card__in{flex-direction:row;align-items:center;gap:35px}
  .card__img{flex:1 1 0;min-width:0;height:auto;aspect-ratio:308/203}
  .card__info{flex:1 1 0;min-width:0}
}
.card__info h3{font-size:var(--fs-20);line-height:1.2}
.card__info address{font-style:normal;font-size:var(--fs-14);line-height:1.45;max-width:17em}
.maplink{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-14);text-underline-offset:3px;margin-top:calc(16px * var(--sp))}
.maplink svg{width:calc(16px*var(--icon));height:calc(16px*var(--icon))}
.maplink:hover{text-decoration-thickness:2px}
@media (min-width:1024px){
  .card{padding:calc(48px*var(--sp)/1.3)}
  .card__in{flex-direction:row;align-items:center;gap:calc(64px*var(--sp)/1.3)}
  .card__img{width:58%;flex:none}
}

/* ---------- CUENTA ATRÁS ---------- */
.count{background:var(--gris);padding-bottom:calc(40px*var(--sp))}
.count__title{overflow:hidden;padding-block:calc(24px*var(--sp))}
.count__track{display:flex;gap:1.2em;width:max-content;animation:marquee 18s linear infinite}
.count__title h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-32);line-height:1.25;letter-spacing:-.03em;white-space:nowrap}
.count__title h2 em{font-weight:600}
.count__nums{display:flex;justify-content:center;gap:calc(28px*var(--sp));white-space:nowrap;font-size:var(--fs-20);line-height:1.35;font-variant-numeric:tabular-nums;padding-inline:var(--m)}
.count__nums span{color:rgba(215,165,157,.24)}
.count__nums b{font-weight:400}
@keyframes marquee{to{transform:translateX(calc(-50% - .6em))}}
@media (min-width:768px){.count__track{animation:none;margin-inline:auto}.count__track [aria-hidden]{display:none}}

/* ---------- PROGRAMA (timeline) ---------- */
.prog{background:var(--gris);display:flex;flex-direction:column;align-items:center;gap:calc(56px*var(--sp))}
.tl{position:relative;list-style:none;margin:0;padding:0 0 0 32px;display:flex;flex-direction:column;gap:calc(72px*var(--sp));width:100%}
.tl__rail,.tl__fill{position:absolute;left:calc(32px + 6px);width:1px;top:var(--rail-top,10px);height:var(--rail-h,0px);background:rgba(115,20,30,.18)}
.tl__fill{background:var(--burdeos);transform-origin:top;transform:scaleY(var(--p,1))}
.tl li{display:grid;grid-template-columns:calc(13px*var(--icon)) var(--tl-text);column-gap:calc(16px*var(--sp));position:relative}
.tl__dot{width:calc(13px*var(--icon));height:calc(13px*var(--icon));border-radius:50%;border:1px solid var(--burdeos);background:var(--gris);margin-top:.2em;position:relative;z-index:1;transition:background .4s var(--ease),transform .4s var(--ease)}
.tl li.is-on .tl__dot,.tl__dot--solid{background:var(--burdeos)}
.tl h3{font-family:var(--serif);font-weight:700;font-size:var(--fs-16);line-height:1.25;letter-spacing:-.03em}
.tl h3 em{font-weight:700}
.tl p{font-size:var(--fs-14);line-height:1.4;margin-top:8px}
.route{display:inline-flex;align-items:center;gap:8px}
.route svg{width:calc(23px*var(--icon));height:auto}
.booth{width:var(--booth);max-width:100%;align-self:flex-end;margin-bottom:-130px;position:relative;z-index:2;will-change:transform}
@media (min-width:768px){
  .prog{flex-direction:row;justify-content:center;align-items:center;gap:var(--two-gap,32px)}
  .tl{width:auto;padding-left:0}
  .tl__rail,.tl__fill{left:calc(6.5px*var(--icon))}
  .booth{align-self:center;margin-bottom:0}
}
@media (min-width:1024px){:root{--two-gap:96px}}
@media (min-width:1440px){:root{--two-gap:160px}}
@media (min-width:1920px){:root{--two-gap:240px}}

/* ---------- TRAYECTO ---------- */
.ride{background:var(--blanco);padding-top:122px;display:flex;flex-direction:column;gap:calc(40px*var(--sp))}
.ride h2{font-size:var(--fs-20);line-height:1.25;max-width:17em}
.ride__list{display:flex;flex-direction:column;gap:calc(32px*var(--sp))}
.ride__item{display:grid;grid-template-columns:calc(25px*var(--icon)) 1fr;column-gap:8px}
.ride__dash{height:1px;background:var(--burdeos);margin-top:.75em;width:100%}
.ride__item h3{font-size:var(--fs-18);font-weight:400;line-height:1.4}
.ride__item p{color:var(--texto);font-size:var(--fs-14);line-height:1.45;margin-top:calc(8px*var(--sp));max-width:23em}
.ride__meta{display:flex;align-items:center;gap:24px;margin-top:calc(16px*var(--sp));flex-wrap:wrap}
.ride__meta[hidden]{display:none}
.lines{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-12);color:var(--texto-2)}
.metro{display:inline-grid;place-items:center;width:calc(24px*var(--icon));height:calc(24px*var(--icon));border-radius:4px;font-size:calc(14px*var(--icon));font-weight:700}
.metro--3{background:#ffd43b;color:#1d1d1b}
.metro--6{background:#8a8b8d;color:#fff}
.ride .maplink{margin-top:0;color:var(--burdeos)}
@media (min-width:768px){
  .ride{padding-top:var(--py)}
  .ride__list{display:grid;grid-template-columns:1fr 1fr;gap:32px}
}
@media (min-width:1024px){.ride__list{gap:calc(64px*var(--sp))}}

/* ---------- OUTFIT ---------- */
.outfit{position:relative;overflow:hidden;background:var(--burdeos);color:var(--blanco);display:flex;flex-direction:column;gap:calc(40px*var(--sp))}
.outfit__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:calc(16px*var(--sp))}
.outfit h2{font-family:var(--serif);font-style:italic;font-weight:700;font-size:var(--fs-32);line-height:1.25;letter-spacing:-.03em}
.outfit__lead{font-weight:700;font-size:var(--fs-16);line-height:1.4;max-width:16em}
.outfit__text p:last-child{font-size:var(--fs-14);line-height:1.45;max-width:18.5em}
.outfit__deco{position:absolute;width:calc(134px*var(--carn));background:rgba(251,250,249,.13);top:30px;right:calc(-55px*var(--carn));transform-origin:50% 90%;animation:sway 7s ease-in-out infinite alternate}
.swatches{position:relative;z-index:1;background:rgba(255,255,255,.05);padding:calc(24px*var(--sp)) 0;display:flex;flex-direction:column;gap:calc(24px*var(--sp))}
.swatches ul{list-style:none;margin:0;padding:0 calc(24px*var(--sp));display:flex;justify-content:space-between}
.swatches li{display:flex;flex-direction:column;align-items:center;gap:8px;width:calc(var(--swatch)*1.6);font-size:var(--fs-10);text-align:center}
.sw{width:var(--swatch);height:var(--swatch);border-radius:50%;position:relative;overflow:hidden;transition:transform .4s var(--ease)}
.sw::after{content:"";position:absolute;left:50%;top:-10%;width:2px;height:120%;background:rgba(255,146,148,.7);transform:translateX(-50%) rotate(38deg);transform-origin:center}
.swatches li:hover .sw{transform:scale(1.08)}
.swatches p{font-weight:700;font-size:var(--fs-14);text-align:center;line-height:1.4;padding-inline:var(--m)}
@keyframes sway{from{transform:rotate(-17deg)}to{transform:rotate(-11deg)}}
@media (min-width:1024px){
  .outfit{flex-direction:row;align-items:center;gap:calc(var(--two-gap)/2)}
  .outfit__text,.swatches{flex:1 1 0;min-width:0}
  .outfit__deco{right:auto;left:calc(50% - var(--two-gap)/4 - 134px*var(--carn)*.55);top:calc(20px*var(--py)/40px)}
}

/* ---------- RSVP ---------- */
.rsvp{position:relative;background:var(--gris);min-height:789px;display:flex;flex-direction:column}
.rsvp__pic{position:absolute;inset:0;overflow:hidden}
/* Encuadre = imageTransform de Figma: ancho visible (--rs-w) y desplazamiento (--rs-x / --rs-y) */
.rsvp__img{position:absolute;left:0;top:0;width:calc(100% / var(--rs-w));height:auto;min-height:calc(100% / (1 - var(--rs-y)));object-fit:cover;max-width:none;transform:translate(calc(var(--rs-x) * -100%),calc(var(--rs-y) * -100%))}
.rsvp::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--gris) 30%,rgba(238,238,238,0) 48.2%)}
.rsvp__text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(40px*var(--sp));padding:56px var(--m) 56px}
.rsvp h2{line-height:1.1;text-wrap:balance}
.rsvp__intro{font-weight:500;font-size:var(--fs-16);line-height:1.4;max-width:16.5em;margin-top:calc(16px*var(--sp))}
.rsvp__go{display:flex;flex-direction:column;align-items:center;gap:calc(16px*var(--sp))}
.rsvp small{font-size:var(--fs-12);color:var(--texto-3)}
.rsvp small b{font-weight:600}
@media (min-width:768px){.rsvp{min-height:1180px}.rsvp::before{background:linear-gradient(180deg,var(--gris) 15.9%,rgba(238,238,238,0) 41.7%)}}
:root{--fs-rsvp:40px;--gift-ratio:.6;--rs-w:.709;--rs-x:.146;--rs-y:.002}
@media (min-width:768px){:root{--fs-rsvp:52px;--gift-ratio:.41;--rs-w:.673;--rs-x:.163;--rs-y:.232}.rsvp__text{padding-top:80px}}
@media (min-width:1024px){:root{--fs-rsvp:40px;--gift-ratio:0;--rs-pic:41.1%;--rs-w:.394;--rs-x:.304;--rs-y:.452}}
@media (min-width:1440px){:root{--fs-rsvp:64px;--rs-pic:41.3%;--rs-w:.383;--rs-x:.308;--rs-y:.469}}
@media (min-width:1920px){:root{--fs-rsvp:64px;--rs-pic:44.8%;--rs-w:.498;--rs-x:.251;--rs-y:.464}}
.rsvp h2{font-size:var(--fs-rsvp)}
.rsvp__text{position:static}
.rsvp__text > :not(.gift){position:relative;z-index:2}
.rsvp__main{display:flex;flex-direction:column;align-items:center;gap:calc(40px*var(--sp))}
@media (min-width:1024px){
  .rsvp{flex-direction:row;min-height:var(--hero-h);height:auto}
  .rsvp::before{display:none}
  .rsvp__pic{flex:0 0 var(--rs-pic);position:relative;inset:auto;overflow:hidden}
  .rsvp__text{flex:1 1 0;min-width:0;position:relative;justify-content:space-between;gap:52px;padding:48px 48px 48px 24px}
  .rsvp__main{gap:40px;padding-bottom:64px}
}
@media (min-width:1440px){
  .rsvp__text{justify-content:center;gap:60px;padding:48px 80px 48px 32px}
  .rsvp__main{gap:60px;padding-bottom:0}
}
@media (min-width:1920px){
  .rsvp__text{justify-content:space-between;gap:70px;padding:128px 160px 128px 40px}
  .rsvp__main{gap:70px}
}

/* ---------- FAQ ---------- */
.faq{background:var(--blanco);display:flex;flex-direction:column;align-items:center;gap:calc(40px*var(--sp))}
.faq h2{font-size:var(--fs-20);line-height:1.25;text-align:center;max-width:13em}
.faq__list{width:100%;display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item:last-child{border-bottom:0}
.faq__q{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:calc(12px*var(--sp));cursor:pointer;font-size:var(--fs-16);line-height:1.4;color:var(--burdeos)}
.faq__q:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
.faq__q span{max-width:17em}
.faq__q svg{width:calc(16px*var(--icon));height:calc(16px*var(--icon));flex:none;transition:transform .45s var(--ease)}
.faq__q[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__a > div{overflow:hidden}
.faq__a p{color:var(--texto);font-size:var(--fs-14);line-height:1.45;max-width:42em}
.faq__a p + p{margin-top:1em}
.faq__a p:last-child{padding-bottom:calc(16px*var(--sp))}
.faq__a .light{font-weight:300}
.faq__a b{font-weight:700}
.faq__q[aria-expanded="true"] + .faq__a{grid-template-rows:1fr}
@media (min-width:1024px){
  .faq{flex-direction:row;align-items:flex-start;gap:var(--two-gap)}
  .faq h2{text-align:left;flex:0 0 33%;max-width:none}
  .faq h2 span{display:block;max-width:13em}
  .faq__list{flex:1}
  .faq__q span{max-width:none}
}

/* ---------- CIERRE ---------- */
.thanks{background:var(--gris);display:flex;flex-direction:column;align-items:center;gap:calc(32px*var(--sp));text-align:center}
.thanks h2{font-family:var(--serif);font-weight:500;font-size:var(--fs-24);line-height:1.25;text-transform:uppercase;max-width:15em;text-wrap:balance}
.thanks h2 em{font-weight:500}
.thanks .clavel{width:calc(22px*var(--icon));transform:rotate(-15deg)}
.thanks p{font-size:var(--fs-14);line-height:1.4}
.bar{height:calc(32px*var(--sp));background:var(--burdeos)}
@media (min-width:1024px){.thanks h2{max-width:none}}

/* ---------- Animaciones de entrada ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.hero__img{animation:heroZoom 2.8s var(--ease) both}
.hero .h-in{animation:fadeUp 1.1s var(--ease) both;animation-delay:var(--d,0s)}
html.intro-run .hero__img,html.intro-run .hero .h-in{animation-play-state:paused}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- CUENTAS BANCARIAS (tarjeta flotante sobre RSVP/FAQ) ---------- */
:root{--gift-w:auto;--gift-out:140px;--gift-in:90px}
@media (min-width:768px){:root{--gift-w:560px}}
@media (min-width:1024px){:root{--gift-w:448px}}
@media (min-width:1440px){:root{--gift-w:560px}}
@media (min-width:1920px){:root{--gift-w:640px}}
.gift{position:absolute;z-index:3;bottom:0;left:var(--m);right:var(--m);transform:translateY(60%);background:var(--blanco);border-radius:8px;box-shadow:0 8px 14px rgba(0,0,0,.05);padding:calc(24px*var(--sp)) 12px;display:flex;flex-direction:column;align-items:center;gap:calc(24px*var(--sp));text-align:center;color:var(--texto-3)}
.gift__intro{font-weight:500;font-size:var(--fs-14);line-height:1.4;max-width:24em}
.gift__body{width:100%;display:flex;flex-direction:column;gap:calc(24px*var(--sp))}
.gift__accts{display:flex;justify-content:space-around;align-items:center;gap:12px}
@media (min-width:768px){.gift__accts{justify-content:space-between;gap:calc(24px*var(--sp))}}
.gift__acct{display:flex;flex-direction:column;align-items:center;gap:8px}
.gift__acct h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:var(--fs-16);line-height:.8;color:#a27872}
.iban{all:unset;cursor:pointer;font-weight:500;font-size:var(--fs-14);line-height:1.35;color:var(--burdeos);font-variant-numeric:tabular-nums;border-radius:2px;position:relative;white-space:nowrap}
.iban:hover{text-decoration:underline;text-underline-offset:3px}
.iban:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
.iban__ok{position:absolute;left:50%;top:-1.7em;transform:translate(-50%,4px);font-size:11px;font-weight:600;color:var(--blanco);background:var(--burdeos);padding:3px 8px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.iban.copied .iban__ok{opacity:1;transform:translate(-50%,0)}
.gift__sep{width:1px;height:calc(34px*var(--icon));background:#c8c8c8;flex:none}
.gift__concept{font-size:var(--fs-12);line-height:1.35}
.gift__concept b{font-weight:700}
.gift__intro .nowrap{white-space:nowrap}
.faq{padding-top:calc(var(--py) + var(--gift-out) + 8px*var(--sp))}
@media (min-width:768px){.gift{left:50%;right:auto;width:var(--gift-w);transform:translate(-50%,41%);padding-inline:calc(24px*var(--sp))}}
@media (min-width:1024px){
  .gift{position:relative;z-index:2;left:auto;right:auto;bottom:auto;transform:none;width:100%;padding:24px 31px;gap:25px}
  .gift__body,.gift__accts{gap:31px}
  .faq{padding-top:var(--py)}
}
@media (min-width:1440px){.gift{width:560px;padding:36px;gap:36px}.gift__body,.gift__accts{gap:36px}}
@media (min-width:1920px){.gift{width:640px;padding:42px;gap:42px}.gift__body,.gift__accts{gap:42px}}


/* ---------- INTRO (carga, comportamiento medusmo.com · Figma 13:128) ----------
   Estado inicial: panel claro (#fbfaf9), clavel arriba a la izquierda (30%) y "IVÁN & LETI" abajo a la izquierda.
   1) Aparecen (200 ms).
   2) 1,6 s: clavel y nombres bajan y salen por su máscara.
   3) 1,8 s: el panel se recoge hacia arriba descubriendo el hero; 1 s después se recoge el desenfoque y los textos
      del hero (fecha, nombres, CTA) suben desde su máscara: la animación inversa a la de salida.
   Curva: cubic-bezier(.75,0,.25,1). */
.splash{position:fixed;inset:0;z-index:100;display:none;pointer-events:auto;animation:introSafety 0s 9s forwards}
html.intro-run{overflow:hidden}
html.intro-run .splash,.splash.lifting{display:block}
.hmask{overflow:hidden;padding:.35em .2em .3em;margin:-.35em -.2em -.3em;display:flex;justify-content:inherit}
html.intro-hero .hero .h-in{animation:none!important;opacity:1}
.ld__blur{position:absolute;inset:0;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);background:rgba(251,250,249,.08)}
.ld__panel{position:absolute;inset:0;background:var(--blanco);overflow:hidden;will-change:clip-path}
.ld__mask{position:absolute;overflow:hidden}
.ld__flor-m{left:calc(61px*var(--k) - 30px*var(--k));top:0;width:calc(152px*var(--k));height:calc(214px*var(--k) + env(safe-area-inset-top,0px))}
.ld__flor{position:absolute;left:calc(30px*var(--k));top:calc(36px*var(--k) + env(safe-area-inset-top,0px));width:calc(92px*var(--k));aspect-ratio:220/393;background:#b5443f;opacity:.3;transform:rotate(-15deg);transform-origin:50% 100%}
.ld__text{left:var(--ld-m);bottom:calc(40px + env(safe-area-inset-bottom,0px));padding:.3em .1em .15em;color:var(--burdeos);font-family:var(--serif);text-transform:uppercase;letter-spacing:-.03em;line-height:.77;white-space:nowrap}
.ld__text > span{display:flex;align-items:center;gap:calc(16px*var(--k));font-size:calc(48px*var(--k))}
.ld__text em{font-style:italic}
.ld__text .amp{font-size:calc(32px*var(--k));font-style:italic;text-transform:none}
:root{--ld-m:24px}
@media (min-width:1024px){:root{--ld-m:var(--m)}}
.intro__skip{all:unset;position:absolute;z-index:3;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));cursor:pointer;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#a27872;padding:8px;opacity:.75}
.intro__skip:hover,.intro__skip:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px}
@keyframes introSafety{to{visibility:hidden}}


/* ---------- RSVP: ampliación anclada al scroll ----------
   Sin animación (reducir movimiento / pantallas muy bajas) el módulo se ve exactamente como en Figma.
   Con animación, la sección completa (foto, textos, botón y cuentas) se fija a pantalla completa:
   1) la foto crece desde una ventana recortada hasta llenar la pantalla,
   2) en desktop la foto se recoloca en su columna y aparece el panel de texto; en mobile/tablet entra el degradado,
   3) aparecen textos/botón y después la tarjeta de cuentas. Luego el scroll continúa. */
.rsvp__fit{display:contents}
html.js-pin{--gift-ratio:0}
html.rsvp-lock{overscroll-behavior:none}
html.rsvp-lock body{overscroll-behavior:none}
.js-pin .rsvp-pin{height:calc(100svh + var(--pin-dist,30svh));background:var(--blanco)}
.js-pin .rsvp{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden;will-change:clip-path}
.js-pin .rsvp .rv{opacity:1;transform:none;transition:none}
.js-pin .rsvp::before{opacity:var(--g,1)}
.js-pin .rsvp__img{scale:var(--s,1)}
.js-pin .rsvp__text{flex:1 1 auto;min-height:0;padding-bottom:24px}
.js-pin .rsvp__fit{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1 1 auto;width:100%;min-height:0;gap:calc(32px*var(--sp));zoom:var(--fit,1)}
.js-pin .rsvp__main{opacity:var(--c1,1);transform:translateY(calc((1 - var(--c1,1)) * 28px))}
.js-pin .rsvp__go{opacity:var(--c2,1);transform:translateY(calc((1 - var(--c2,1)) * 20px))}
.js-pin .gift{position:relative;z-index:2;left:auto;right:auto;bottom:auto;transform:translateY(calc((1 - var(--c3,1)) * 24px));opacity:var(--c3,1);width:100%;margin-inline:auto}
.js-pin .faq{padding-top:var(--py)}
@media (min-width:768px){.js-pin .gift{width:var(--gift-w)}}
@media (min-width:1024px){
  :root{--pin-dist:30svh}
  .js-pin .rsvp__pic{position:absolute;z-index:3;left:0;top:0;bottom:0;width:calc(var(--rs-pic) + (100% - var(--rs-pic)) * (1 - var(--k2,1)))}
  .js-pin .rsvp__img{inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 72%;transform:none;transform-origin:50% 67%}
  .js-pin .rsvp__text{margin-left:var(--rs-pic);padding-bottom:48px}
  .js-pin .rsvp__fit{justify-content:space-between;gap:calc(40px*var(--sp))}
  .js-pin .gift{width:100%}
}
@media (min-width:1440px){
  .js-pin .rsvp__text{padding-top:48px;padding-bottom:48px}
  .js-pin .rsvp__fit{justify-content:center;gap:60px}
  .js-pin .gift{width:560px}
}
@media (min-width:1920px){
  .js-pin .rsvp__text{padding-top:96px;padding-bottom:96px}
  .js-pin .rsvp__fit{justify-content:space-between;gap:70px}
  .js-pin .gift{width:640px}
}


/* Ajuste del módulo RSVP en modo animado: tipografías y espacios compactados para que todo el
   módulo quepa en una pantalla, con margen superior/inferior que respeta las zonas seguras */
.js-pin .rsvp{--rt:30px;--ri:14px;--rc:15px;--rd:12px;--gi:13px;--gn:15px;--gb:13px;--gc:11.5px}
.js-pin .rsvp__img{will-change:transform;translate:var(--tx,0%) 0}
@media (max-width:1023.98px){.js-pin .rsvp__img{transform:translate(calc(var(--rs-x) * -100%),var(--rs-ty,calc(var(--rs-y) * -100%)))}}
.js-pin .rsvp h2{font-size:var(--rt);line-height:1.08}
.js-pin .rsvp__intro{font-size:var(--ri);line-height:1.4;max-width:21em;margin-top:12px}
.js-pin .rsvp__main{gap:20px;padding-bottom:0}
.js-pin .rsvp__go{gap:10px}
.js-pin .rsvp__go .cta{font-size:var(--rc);padding:13px 16px}
.js-pin .rsvp small{font-size:var(--rd)}
.js-pin .rsvp__text{padding:calc(env(safe-area-inset-top,0px) + 76px) 16px calc(env(safe-area-inset-bottom,0px) + 20px)}
.js-pin .rsvp__fit{justify-content:space-between;gap:24px}
.js-pin .gift{padding:18px 14px;gap:14px}
.js-pin .gift__body{gap:14px}
.js-pin .gift__accts{gap:10px}
.js-pin .gift__intro{font-size:var(--gi)}
.js-pin .gift__acct{gap:6px}
.js-pin .gift__acct h3{font-size:var(--gn)}
.js-pin .iban{font-size:var(--gb)}
.js-pin .gift__concept{font-size:var(--gc)}
.js-pin .gift__sep{height:30px}
@media (min-width:768px){
  .js-pin .rsvp{--rt:44px;--ri:16px;--rc:16px;--rd:13px;--gi:14px;--gn:16px;--gb:14px;--gc:12px}
  .js-pin .rsvp__text{padding:calc(env(safe-area-inset-top,0px) + 104px) 40px calc(env(safe-area-inset-bottom,0px) + 32px)}
  .js-pin .rsvp__main{gap:28px}
  .js-pin .gift{width:560px;padding:24px;gap:18px}
  .js-pin .gift__body{gap:18px}
  .js-pin .gift__accts{gap:24px}
}
@media (min-width:1024px){
  .js-pin .rsvp{--rt:36px;--ri:16px;--rc:16px;--rd:12px;--gi:14px;--gn:16px;--gb:14px;--gc:12px}
  .js-pin .rsvp__text{padding:56px 48px}
  .js-pin .rsvp__fit{justify-content:center;gap:48px}
  .js-pin .rsvp__main{gap:28px}
  .js-pin .gift{width:100%;max-width:531px;padding:24px 28px;gap:18px}
}
@media (min-width:1440px){
  .js-pin .rsvp{--rt:48px;--ri:18px;--rc:18px;--rd:13px;--gi:15px;--gn:18px;--gb:16px;--gc:13px}
  .js-pin .rsvp__text{padding:64px 72px}
  .js-pin .rsvp__fit{gap:56px}
  .js-pin .rsvp__main{gap:32px}
  .js-pin .gift{max-width:560px;padding:32px;gap:22px}
  .js-pin .gift__body{gap:22px}
  .js-pin .gift__accts{gap:32px}
}
@media (min-width:1920px){
  .js-pin .rsvp{--rt:60px;--ri:20px;--rc:20px;--rd:14px;--gi:17px;--gn:20px;--gb:18px;--gc:14px}
  .js-pin .rsvp__text{padding:80px 96px}
  .js-pin .rsvp__fit{gap:64px}
  .js-pin .rsvp__main{gap:40px}
  .js-pin .gift{max-width:640px;padding:36px;gap:26px}
  .js-pin .gift__body{gap:26px}
}


/* Cuentas bancarias con IBAN reales (Figma): en mobile cada cuenta en una fila (nombre + IBAN) separadas por una línea;
   desde 768 dos columnas. El IBAN va a 14 px en todos los tamaños para que quepa completo. */
.iban{font-size:14px}
html.js-pin .iban{font-size:14px}
@media (max-width:767.98px){
  .gift,html.js-pin .gift{gap:16px}
  .gift__body,html.js-pin .gift__body{gap:16px}
}
/* filas apiladas: siempre en mobile y, en cualquier tamaño, si los dos IBAN no caben uno al lado del otro */
@media (max-width:767.98px){.gift{--stack:1}}
.gift.is-stack .gift__accts,html.js-pin .gift.is-stack .gift__accts{flex-direction:column;gap:8px;justify-content:center}
.gift.is-stack .gift__acct,html.js-pin .gift.is-stack .gift__acct{flex-direction:row;align-items:center;gap:16px}
.gift.is-stack .gift__acct h3{line-height:1}
.gift.is-stack .gift__sep,html.js-pin .gift.is-stack .gift__sep{width:100%;height:1px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}