/* ==========================================================================
   Web publica de la boda
   La base es, literal, el CSS de la maqueta "sandra-y-kike-v4": tipografias,
   paleta, tratamiento de fotos y comportamiento de scroll son el diseño y no
   se sustituyen por equivalentes. Lo unico que cambia es que los siete colores
   y las dos tipografias entran como variables desde el panel (Ajustes), con
   los valores del diseño por defecto. Al final se añaden los bloques del CMS
   que la maqueta no traia, en el mismo idioma visual.
   ========================================================================== */

:root{
  --hueso:var(--papel,#F1EEE5); --esparto:var(--papel-2,#E3DBC8); --corcho:var(--ocre,#8F6F4E); --encina:var(--oliva,#3E4A38);
  --tierra:var(--tinta,#2C2721); --tierra-2:var(--tinta-suave,#7B7266);
  --hair:rgba(44,39,33,.15); --hair:color-mix(in srgb,var(--tierra) 15%,transparent);
  --encina-2:var(--bosque,#2C3527);
  --serif:var(--display,"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif);
  --sans:var(--texto,"Karla",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);
  --gutter:clamp(20px,5vw,72px); --max:1280px; --arch:999px 999px 0 0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--hueso);color:var(--tierra);font-family:var(--sans);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased;position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
main,nav,footer{position:relative;z-index:1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--corcho);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--tierra);color:var(--hueso);padding:8px 14px}
.skip:focus{left:var(--gutter)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* Photo treatment: warm film tone + tinted overlay */
.ph{background:var(--esparto);overflow:hidden;position:relative}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) sepia(.18) contrast(1.03)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(143,111,78,.22),rgba(62,74,56,.18));mix-blend-mode:multiply}

/* Type */
h2.title{font-family:var(--serif);font-weight:300;font-size:clamp(42px,5.2vw,72px);line-height:.98;letter-spacing:-.005em;max-width:14ch}
.lede{font-size:17px;line-height:1.6;max-width:46ch}
.muted{color:var(--tierra-2)}
.small{font-size:13px;line-height:1.5}
.kicker{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--corcho);margin-bottom:20px}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--corcho);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:currentColor}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);font-size:21px;font-style:italic;border:1px solid currentColor;border-radius:999px;padding:12px 26px 13px;transition:background .25s,color .25s}
.btn:hover{background:var(--tierra);color:var(--hueso);border-color:var(--tierra)}
.leaf{width:34px;height:auto;display:block;margin:0 auto;color:var(--corcho)}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter);transition:background .3s,box-shadow .3s,color .3s;color:var(--hueso)}
.nav.solid{background:color-mix(in srgb,var(--hueso) 94%,transparent);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--hair);color:var(--tierra)}
.mark{font-family:var(--serif);font-size:22px;letter-spacing:.02em}
.mark em{font-style:italic;margin:0 .12em}
.nav.solid .mark em,.footer .mark em{color:var(--corcho)}
.nav ul{display:flex;gap:32px;list-style:none;font-size:13.5px}
.nav ul a{position:relative;padding:4px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .25s}
.nav ul a:hover::after{right:0}
.nav .rsvp{font-family:var(--serif);font-style:italic;font-size:19px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.menu-btn{display:none;font-size:13.5px}
@media (max-width:900px){
  .nav ul{display:none}
  .nav.open{color:var(--tierra);background:var(--hueso)}
  .nav.open ul{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--hueso);flex-direction:column;gap:0;padding:6px var(--gutter) 24px;box-shadow:0 1px 0 var(--hair)}
  .nav.open ul li{border-top:1px solid var(--hair)}
  .nav.open ul a{display:block;padding:14px 0;font-size:17px}
  .menu-btn{display:block}
  .nav .rsvp{display:none}
}

/* ---------- Hero: full-bleed dehesa, names inside the photo ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:var(--hueso);overflow:hidden;padding:120px var(--gutter) 70px}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.04);transform:scale(1.04);transition:transform 3s cubic-bezier(.2,.7,.2,1),opacity 1.4s ease;opacity:0}
/* Golden-ochre treatment, applied to whatever photo is loaded:
   1) colour blend unifies the hue  2) multiply darkens with warm ochre  3) vertical gradient protects the text */
.hero .bg::before{content:"";position:absolute;inset:0;background:#B98E4E;mix-blend-mode:color;opacity:.85}
.hero .tint{position:absolute;inset:0;background:linear-gradient(165deg,rgba(150,108,48,.78) 0%,rgba(112,78,34,.82) 60%,rgba(84,58,26,.86) 100%);mix-blend-mode:multiply}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(58,40,18,.45) 0%,rgba(58,40,18,.18) 38%,rgba(58,40,18,.28) 68%,rgba(46,32,14,.72) 100%)}
.hero .stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;max-width:900px}
.hero .leaf{color:var(--hueso);opacity:.9;width:30px;margin-bottom:26px}
.hero .date{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.3;letter-spacing:.02em}
.hero .names{font-family:var(--serif);font-weight:300;font-size:clamp(66px,9.6vw,140px);line-height:1;letter-spacing:-.005em;margin:14px 0 18px;display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap;justify-content:center}
.hero .names em{font-style:italic;font-size:.62em;position:relative;top:-.05em}
.hero .where{font-size:14px;letter-spacing:.06em;opacity:.9}
.hero .rule{width:1px;height:46px;background:color-mix(in srgb,var(--hueso) 50%,transparent);margin:30px auto 24px}
.hero .count{display:flex;gap:clamp(18px,3vw,44px);font-family:var(--serif);justify-content:center}
.hero .count div{display:flex;flex-direction:column;align-items:center;line-height:1}
.hero .count b{font-weight:300;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.01em}
.hero .count span{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;margin-top:8px;opacity:.85}
.hero .actions{display:flex;gap:22px;align-items:center;margin-top:38px;flex-wrap:wrap;justify-content:center}
.hero .actions .link{font-size:13.5px;text-decoration-color:color-mix(in srgb,var(--hueso) 60%,transparent)}
.hero .btn:hover{background:var(--hueso);color:var(--tierra);border-color:var(--hueso)}
.hero .stack>*{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero.entra .bg img{opacity:1;transform:scale(1)}
/* La clase de entrada de la portada se llama "entra", no "in": en la maqueta se
   llamaba igual que la de los campos del formulario (.in) y la portada acababa
   heredando su padding, su borde y su tipografia. */
.hero.entra .stack>*{opacity:1;transform:none}
.hero.entra .stack>*:nth-child(1){transition-delay:.4s}
.hero.entra .stack>*:nth-child(2){transition-delay:.55s}
.hero.entra .stack>*:nth-child(3){transition-delay:.7s}
.hero.entra .stack>*:nth-child(4){transition-delay:.9s}
.hero.entra .stack>*:nth-child(5){transition-delay:1.05s}
.hero.entra .stack>*:nth-child(6){transition-delay:1.15s}
.hero.entra .stack>*:nth-child(7){transition-delay:1.3s}
@media (max-width:640px){.hero .names{font-size:clamp(52px,15vw,80px)}.hero .names em{display:block;width:100%;font-size:.5em;top:0}}

/* Sections */
section.block{padding-block:clamp(72px,10vw,150px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}}

/* Intro */
.intro{padding-block:clamp(90px,11vw,160px)}
.intro .grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center}
.intro .ph{aspect-ratio:3/4;border-radius:var(--arch);max-width:420px}
.intro p.big{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,50px);line-height:1.15;max-width:22ch}
.intro .sign{margin-top:32px;font-family:var(--serif);font-style:italic;font-size:24px}
.intro .cap{margin-top:14px;font-size:12.5px;color:var(--tierra-2)}
@media (max-width:900px){.intro .grid{grid-template-columns:1fr;gap:36px}.intro .ph{max-width:300px}}

/* ---------- Recorrido: scroll-driven journey ---------- */
.prog{background:var(--esparto)}
.prog .hint{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--tierra-2);margin-top:14px}
.day-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:64px;padding-bottom:14px;border-bottom:1px solid var(--tierra);font-family:var(--serif);font-size:clamp(22px,2.1vw,28px)}
.day-head span:last-child{font-family:var(--sans);font-size:13.5px;color:var(--tierra-2)}
.journey{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);margin-top:24px;align-items:start}
.sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:1fr auto;align-items:center;padding:96px 0 40px}
.stage{position:relative;aspect-ratio:4/5;border-radius:var(--arch);width:min(100%,400px);max-height:calc(100svh - 230px);justify-self:start}
.stage img{position:absolute;inset:0;opacity:0;transition:opacity .8s ease,transform 1.4s ease;transform:scale(1.03)}
.stage img.show{opacity:1;transform:scale(1)}
.stage-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;width:min(100%,400px);margin-top:26px;border-top:1px solid var(--tierra);padding-top:14px}
.stage-meta .big-t{font-family:var(--serif);font-weight:300;font-size:clamp(44px,4.6vw,64px);line-height:.9;letter-spacing:-.02em;color:var(--corcho);transition:opacity .4s}
.stage-meta small{color:var(--tierra-2);font-size:13px}
.stage-meta .bar{flex:1;height:1px;background:var(--hair);position:relative;align-self:center;margin:0 4px}
.stage-meta .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--corcho);width:0;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.moments{list-style:none;position:relative;padding-left:34px}
.moments::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--hair)}
.moments .fill{position:absolute;left:4px;top:0;width:1px;height:0;background:var(--corcho);transition:height .6s cubic-bezier(.2,.7,.2,1)}
.step{position:relative;min-height:74svh;display:flex;flex-direction:column;justify-content:center;padding:14vh 0;opacity:.28;transition:opacity .6s ease;border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.step::before{content:"";position:absolute;left:-34px;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;border:1px solid var(--corcho);background:var(--esparto);transition:background .4s,transform .4s}
.step.on{opacity:1}
.step.on::before{background:var(--corcho);transform:scale(1.3)}
.step .t{font-family:var(--serif);font-size:clamp(22px,2vw,26px);color:var(--corcho)}
.step h3{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.6vw,66px);line-height:.98;letter-spacing:-.01em;margin-top:8px}
.step .w{color:var(--tierra-2);font-size:14px;margin-top:12px}
.step p.d{margin-top:22px;max-width:46ch;font-size:16.5px}
.step .m-img{display:none}
.pre{margin-top:40px;display:grid;grid-template-columns:110px 1fr;gap:clamp(18px,3vw,48px);border-top:1px solid var(--tierra);padding-top:34px}
.pre .t{font-family:var(--serif);font-style:italic;font-size:24px;padding-top:.1em}
.pre h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;margin-bottom:6px}
.pre p{max-width:52ch}
@media (max-width:900px){
  .journey{grid-template-columns:1fr;gap:0}
  .sticky{position:sticky;top:0;height:auto;padding:70px 0 14px;background:linear-gradient(var(--esparto) 78%,color-mix(in srgb,var(--esparto) 0%,transparent));z-index:2;display:block}
  .stage{aspect-ratio:16/10;width:100%;max-height:none;border-radius:0}
  .stage-meta{width:100%;margin-top:12px;padding-top:10px}
  .stage-meta .big-t{font-size:38px}
  .moments{padding-left:26px;margin-top:10px}
  .step{min-height:0;padding:44px 0}
  .step::before{left:-26px;top:58px}
  .step h3{font-size:36px}
  .pre{grid-template-columns:1fr;gap:6px}
}
/* Landscape band */
.band{padding:0}
.band .ph{height:clamp(300px,52vw,640px)}
.band figcaption{padding:14px var(--gutter) 0;font-size:12.5px;color:var(--tierra-2);text-align:right}

/* Nosotros: drag gallery */
.us .drag-hint{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--tierra-2);margin-top:14px}
.track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 20px;scrollbar-width:none;cursor:grab;user-select:none;margin-top:40px}
.track::-webkit-scrollbar{display:none}
.track.dragging{cursor:grabbing;scroll-snap-type:none}
.track .ph{flex:0 0 clamp(240px,30vw,380px);aspect-ratio:3/4;scroll-snap-align:start}
.track .ph:nth-child(odd){border-radius:var(--arch)}
.track .ph img{pointer-events:none}
.us .caption{margin-top:20px;font-size:13.5px;color:var(--tierra-2)}

/* Cómo llegar: tabs */
.venue h2.title{max-width:none}
.venue address{font-style:normal;font-family:var(--serif);font-size:clamp(22px,2.1vw,28px);line-height:1.25;margin-top:18px;max-width:26ch}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--tierra);flex-wrap:wrap}
.tabs button{padding:0 0 12px;font-size:14px;color:var(--tierra-2);position:relative;margin-bottom:-1px}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--tierra);transform:scaleX(0);transition:transform .3s}
.tabs button[aria-selected=true]{color:var(--tierra)}
.tabs button[aria-selected=true]::after{transform:scaleX(1)}
.panel{display:none;padding-top:28px}
.panel.on{display:block;animation:open .35s ease}
.panel .tag{display:block;font-size:13px;color:var(--corcho);margin-bottom:14px}
.panel h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.05;margin-bottom:12px}
.panel p{max-width:46ch}
.panel .link{display:inline-block;margin-top:18px;font-size:13.5px}
.venue .place-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:end;margin-top:72px}
.venue .place-grid .ph{aspect-ratio:5/4}
.venue .place-grid .ph.tall{aspect-ratio:3/4;border-radius:var(--arch);max-width:360px;justify-self:end}
.cols{display:grid;grid-template-columns:1fr 1fr;margin-top:72px;border-top:1px solid var(--tierra)}
.cols>div{padding:30px clamp(18px,3vw,48px) 6px 0;border-right:1px solid var(--hair)}
.cols>div+div{padding-left:clamp(18px,3vw,48px);border-right:0;padding-right:0}
.cols h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:10px;line-height:1.05}
.cols .tag{display:block;font-size:13px;color:var(--corcho);margin-bottom:22px}
.cols p{max-width:40ch}
@media (max-width:900px){.venue .place-grid{grid-template-columns:1fr;gap:18px}.venue .place-grid .ph.tall{justify-self:start;max-width:260px}}
@media (max-width:760px){.cols{grid-template-columns:1fr;border-top:0}.cols>div,.cols>div+div{padding:24px 0;border-right:0;border-top:1px solid var(--hair)}}

/* Dormir */
.sleep{background:var(--esparto)}
.hotels{margin-top:56px;border-top:1px solid var(--tierra)}
.hotel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);gap:clamp(18px,3vw,48px);padding:30px 0;border-bottom:1px solid var(--hair);align-items:start}
.hotel h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.5vw,34px);line-height:1.05}
.hotel h3 small{display:block;font-family:var(--sans);font-size:13.5px;color:var(--tierra-2);margin-top:8px}
.hotel p{max-width:44ch}
.hotel .price{text-align:right;font-family:var(--serif);font-size:24px;line-height:1.2}
.hotel .price small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--tierra-2);margin-top:4px}
@media (max-width:760px){.hotel{grid-template-columns:1fr;gap:10px}.hotel .price{text-align:left;font-size:22px}}

/* FAQ */
.faq .list{border-top:1px solid var(--tierra);margin-top:8px}
details{border-bottom:1px solid var(--hair)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--serif);font-size:clamp(22px,2.1vw,28px);line-height:1.15}
summary::-webkit-details-marker{display:none}
summary .plus{position:relative;width:14px;height:14px;flex:none}
summary .plus::before,summary .plus::after{content:"";position:absolute;background:var(--corcho);left:0;top:6.5px;width:14px;height:1px;transition:transform .25s}
summary .plus::after{transform:rotate(90deg)}
details[open] summary .plus::after{transform:rotate(0)}
details .body{padding:0 0 26px;max-width:58ch}
details[open] .body{animation:open .35s ease}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* RSVP */
.rsvp-block{background:var(--encina);color:var(--hueso)}
.rsvp-block .kicker{color:color-mix(in srgb,var(--hueso) 55%,transparent)}
.rsvp-block .lede{color:color-mix(in srgb,var(--hueso) 82%,transparent)}
.rsvp-block .muted{color:color-mix(in srgb,var(--hueso) 55%,transparent)}
.rsvp-block .btn{margin-top:30px}
.rsvp-block .btn:hover{background:var(--hueso);color:var(--encina);border-color:var(--hueso)}
form{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
fieldset{border:0}
label,.lbl{font-size:12.5px;color:color-mix(in srgb,var(--hueso) 62%,transparent)}
.in{background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--hueso) 38%,transparent);color:var(--hueso);font:inherit;font-size:16px;padding:8px 0;border-radius:0;width:100%;transition:border-color .2s}
.in::placeholder{color:color-mix(in srgb,var(--hueso) 32%,transparent)}
.in:focus{outline:0;border-bottom-color:var(--hueso)}
select.in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--hueso) 50%),linear-gradient(135deg,var(--hueso) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:24px}
select.in option{color:var(--tierra)}
textarea.in{resize:vertical;min-height:72px}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices span{display:inline-block;padding:9px 16px;border:1px solid color-mix(in srgb,var(--hueso) 40%,transparent);border-radius:999px;font-size:14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.choices input:checked+span{background:var(--hueso);color:var(--encina);border-color:var(--hueso)}
.choices input:focus-visible+span{outline:1.5px solid var(--hueso);outline-offset:3px}
.stepper{display:inline-flex;align-items:center;gap:22px;border-bottom:1px solid color-mix(in srgb,var(--hueso) 38%,transparent);padding:4px 0}
.stepper button{width:30px;height:30px;font-size:20px;line-height:1;color:var(--hueso)}
.stepper output{font-family:var(--serif);font-size:26px;min-width:1.2ch;text-align:center}
.guest{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;padding-top:26px;border-top:1px solid color-mix(in srgb,var(--hueso) 22%,transparent)}
.guest .who{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:24px;margin-bottom:-8px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.submit{grid-column:1/-1;justify-self:start;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:22px;border:1px solid var(--hueso);border-radius:999px;padding:12px 26px 13px;transition:background .25s,color .25s}
.submit:hover{background:var(--hueso);color:var(--encina)}
.thanks{display:none;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1.15;max-width:22ch}
form.done{display:none}
form.done+.thanks{display:block}
.privacy{margin-top:28px;font-size:12.5px;color:color-mix(in srgb,var(--hueso) 50%,transparent)}
#form-anchor{scroll-margin-top:90px}
@media (max-width:760px){form,.guest{grid-template-columns:1fr;gap:28px}}

.footer{padding:56px var(--gutter) 34px;text-align:center;font-size:12.5px;color:var(--tierra-2)}
.footer .mark{color:var(--tierra);display:inline-block;margin:18px 0 12px}
.footer p{line-height:1.8}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .bg img,.hero .stack>*,.stage img{transition:none;opacity:1;transform:none}
  *{animation:none!important}
}
/* ==========================================================================
   Piezas que el CMS necesita y la maqueta no traia
   Mismo idioma que el resto: lineas de 1px, sin tarjetas, sin sombras y
   sin mas radios que los 999px de pastillas, botones y arcos.
   ========================================================================== */

/* La portada: la caja del contenido se ciñe al ancho disponible para que un
   texto largo (la fecha escrita con letra) parta en dos lineas en el movil en
   vez de salirse por los lados. */
.hero .stack{width:100%}

/* Texto largo de los campos de tipo parrafo */
.prosa{max-width:58ch}
.prosa p+p{margin-top:1em}
h2.title em,.big em,.names em,.cita p em{font-style:italic}

/* Bloques centrados (cuenta atras suelta, cierre, regalos) */
.centro{text-align:center;display:flex;flex-direction:column;align-items:center}
.centro>*+*{margin-top:22px}
.centro .lede{margin-inline:auto}
.estrecho{max-width:56ch;margin-inline:auto;text-align:center}
.estrecho>*+*{margin-top:22px}

/* Etiqueta pequeña en corcho (el diseño solo la trae dentro de Como llegar) */
.tag{display:block;font-size:13px;color:var(--corcho);margin-bottom:14px}

/* El aviso en cursiva de la galeria, igual que el del recorrido */
.us .hint{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--tierra-2);margin-top:14px}

/* Hueco de las fotos que todavia no se han subido */
.ph--vacia::before{
  content:"Aún sin foto";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--corcho);
}
.hoja-vacia{
  display:grid;place-items:center;min-height:220px;background:var(--fondo);
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--corcho);
}

/* Recorrido: dias sin foto y apunte final */
.journey--sola{grid-template-columns:1fr}
.journey--sola .step{min-height:0;padding:44px 0}
.pre .w{color:var(--tierra-2);font-size:14px;margin-bottom:10px}

/* Como llegar: en movil las pestañas se arrastran de lado. El degradado y la
   flecha de la derecha avisan de que hay mas y se apagan al llegar al final.
   En escritorio no cambia nada: el envoltorio es transparente y el aviso no
   se pinta. */
.tabs-mas{display:none}
@media (max-width:900px){
  /* La columna del movil no debe estirarse con su contenido, o la lista de
     pestañas empujaria la pagina en vez de desplazarse dentro de su caja. */
  .split{grid-template-columns:minmax(0,1fr)}
  .tabs-wrap{position:relative;border-bottom:1px solid var(--tierra)}
  .tabs{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;border-bottom:0;gap:26px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;margin-bottom:0;flex:0 0 auto}
  .tabs button::after{bottom:0}
  .tabs-mas{
    display:flex;align-items:center;justify-content:flex-end;pointer-events:none;
    position:absolute;top:0;bottom:1px;right:0;width:86px;padding-bottom:12px;
    color:var(--corcho);transition:opacity .35s;
    background:linear-gradient(to right,color-mix(in srgb,var(--hueso) 0%,transparent),var(--hueso) 46%);
  }
  .tabs-mas svg{opacity:.6}
  .tabs-wrap.fin .tabs-mas{opacity:0}
}

/* Como llegar: varias fichas dentro de la misma pestaña */
.ficha+.ficha{margin-top:26px;padding-top:24px;border-top:1px solid var(--hair)}
.cols .ficha+.ficha{margin-top:24px}
.venue address .small{display:block;margin-top:10px}

/* Donde dormir: sin columna de precio a la derecha (la distancia y el precio
   van juntos bajo el nombre), y los enlaces de telefono y reserva debajo. */
.hotel{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.hotel .links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13.5px}
@media (max-width:760px){.hotel{grid-template-columns:1fr}}

/* Peluqueria y maquillaje: rejilla de fichas breves bajo la cabecera, con la
   misma linea superior que "donde dormir" y los datos de contacto al pie. */
.salones{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(24px,4vw,64px);margin-top:56px;border-top:1px solid var(--tierra)}
.salon{padding:30px 0;border-bottom:1px solid var(--hair)}
.salon h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.05}
.salon h3 small{display:block;font-family:var(--sans);font-size:13.5px;color:var(--tierra-2);margin-top:8px}
.salon p{margin-top:14px;max-width:40ch}
.salon .links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13.5px}
.belleza .nota{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--tierra-2);margin-top:26px}
@media (max-width:760px){.salon{padding:24px 0}}

/* ---------- Color alterno de los bloques ----------
   Papel y esparto se van turnando para que dos bloques seguidos nunca
   compartan fondo y se vea donde acaba uno y empieza el otro. El reparto lo
   hace shared/render.js, que marca cada bloque con su tono. Cada bloque
   guarda ademas su color en --fondo, porque hay piezas sueltas que tienen
   que ir del mismo: el punto del recorrido, la escena fija del movil y el
   hueco de una foto que todavia no esta. */
:root{--fondo:var(--hueso)}
.tono-a{--fondo:var(--hueso);background-color:var(--fondo)}
.tono-b{--fondo:var(--esparto);background-color:var(--fondo)}
.step::before{background:var(--fondo)}

/* Cabecera de seccion: antetitulo, titulo y debajo la entradilla, todo en la
   misma columna. Antes la entradilla iba en una segunda columna a la derecha
   y quedaba descolgada del titulo. */
.cabeza .lede{margin-top:clamp(20px,2.2vw,30px)}
.cabeza .hint{margin-top:12px}
.cabeza .paleta,.cabeza .prosa{margin-top:24px}

/* Donde dormir: los sitios con acuerdo llevan la etiqueta en color sobre el
   nombre y una linea a la izquierda que los separa del resto. */
.hotel h3 .acuerdo{display:flex;align-items:center;gap:9px;font-size:clamp(16px,1.5vw,18px);font-style:italic;line-height:1.2;color:var(--corcho);margin-bottom:12px}
.hotel h3 .acuerdo .leaf{width:14px;height:19px;margin:0;flex:0 0 auto}
.hotel--acuerdo{
  --sangria:clamp(18px,2.2vw,32px);
  background:color-mix(in srgb,var(--corcho) 6%,transparent);
  padding-inline:var(--sangria);margin-inline:calc(var(--sangria) * -1);
}

/* Portada: un punto menos alta y con algo menos de aire dentro, para que no
   sobre tanto antes de la primera seccion. */
.hero{min-height:90svh;padding-top:110px;padding-bottom:64px}
.hero .rule{height:38px;margin:24px auto 20px}
.hero .actions{margin-top:30px}

/* Recorrido: la foto del momento no lleva el tratamiento calido del resto de
   fotos (por eso su figura no tiene .ph). Son ilustraciones sobre papel, asi
   que el blanco del papel se funde con el fondo con `multiply` y los cuatro
   bordes se difuminan: la ilustracion parece pintada sobre la pagina y no
   pegada encima. El fondo de .stage tiene que ser el mismo de la seccion,
   porque es contra el que se funde el blanco. */
.stage{
  --alto-escena:calc(100svh - 230px);
  /* Ancho del difuminado. Va en pixeles y no en %, para que se apague igual
     por los cuatro lados: en % el lado largo se difuminaria mas que el corto. */
  --fundido:calc(var(--alto-escena) * .07);
  /* La curva del difuminado. Una rampa recta deja una linea visible donde
     empieza, asi que se suaviza por los dos extremos (una ese, no una cuesta). */
  --velo:
    rgb(0 0 0/0) 0,
    rgb(0 0 0/.04) calc(var(--fundido) * .15),
    rgb(0 0 0/.18) calc(var(--fundido) * .32),
    rgb(0 0 0/.42) calc(var(--fundido) * .5),
    rgb(0 0 0/.7) calc(var(--fundido) * .68),
    rgb(0 0 0/.92) calc(var(--fundido) * .85),
    #000 var(--fundido),
    #000 calc(100% - var(--fundido)),
    rgb(0 0 0/.92) calc(100% - var(--fundido) * .85),
    rgb(0 0 0/.7) calc(100% - var(--fundido) * .68),
    rgb(0 0 0/.42) calc(100% - var(--fundido) * .5),
    rgb(0 0 0/.18) calc(100% - var(--fundido) * .32),
    rgb(0 0 0/.04) calc(100% - var(--fundido) * .15),
    rgb(0 0 0/0) 100%;
  background:var(--fondo);border-radius:0;overflow:visible;
  aspect-ratio:2/3;width:min(100%,400px,calc(var(--alto-escena) * 2 / 3));max-height:none;
}
.stage img{
  width:100%;height:100%;object-fit:contain;filter:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,var(--velo)),linear-gradient(to bottom,var(--velo));
  mask-image:linear-gradient(to right,var(--velo)),linear-gradient(to bottom,var(--velo));
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* En movil la ilustracion manda: ocupa casi dos tercios de la pantalla y se
   centra, con el ancho atado al alto para que nunca sobre caja a los lados
   (si sobrara, el difuminado caeria fuera de la ilustracion y no se veria). */
@media (max-width:900px){
  .stage{--alto-escena:58svh;width:min(100%,calc(var(--alto-escena) * 2 / 3));margin-inline:auto}
  /* El borde de arriba se difumina, asi que la ilustracion puede empezar por
     debajo del menu: lo que queda tapado ya estaba practicamente apagado. */
  .sticky{padding:56px 0 10px}
  .stage-meta{margin-top:8px;padding-top:8px}
}

/* Recorrido en movil: el bloque fijo va sobre fondo solido y se desvanece justo
   debajo. En la maqueta el degradado terminaba al 78% de su alto y el momento
   que pasaba por detras se leia a traves de la hora y del contador. */
@media (max-width:900px){
  .sticky{background:var(--fondo)}
  .sticky::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:38px;pointer-events:none;
    background:linear-gradient(var(--fondo),color-mix(in srgb,var(--fondo) 0%,transparent));
  }
}

/* Nuestra historia */
.hitos{list-style:none;margin-top:56px;border-top:1px solid var(--tierra)}
.hito{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);padding:38px 0;border-bottom:1px solid var(--hair);align-items:center}
.hito h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin-bottom:10px}
.hito p{max-width:46ch}
.hito .ph{aspect-ratio:4/3;border-radius:var(--arch)}
@media (max-width:760px){.hito{grid-template-columns:1fr;gap:18px}}

/* Ceremonia y celebracion */
.lugares{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,64px);margin-top:56px}
.lugar .ph{aspect-ratio:4/5;border-radius:var(--arch);margin-bottom:22px}
.lugar h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.05;margin-bottom:8px}
.lugar .w{color:var(--tierra-2);font-size:14px;margin-bottom:10px}
.lugar p+p{margin-top:8px}
.lugar .link{display:inline-block;margin-top:16px;font-size:13.5px}

/* Cuenta atras suelta */
.clock .count{display:flex;gap:clamp(18px,3vw,44px);font-family:var(--serif);justify-content:center}
.clock .count div{display:flex;flex-direction:column;align-items:center;line-height:1}
.clock .count b{font-weight:300;font-size:clamp(32px,3.2vw,44px);color:var(--corcho)}
.clock .count span{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;margin-top:8px;color:var(--tierra-2)}

/* Vestimenta */
.dress .ph{aspect-ratio:4/3;border-radius:var(--arch);margin-top:28px}
.paleta{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin-top:28px;font-size:13.5px}
.paleta li{display:flex;align-items:center;gap:10px}
.muestra{width:26px;height:26px;border-radius:999px;display:block;box-shadow:inset 0 0 0 1px var(--hair)}

/* Regalos */
.iban{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-family:var(--serif);font-size:24px}
.iban button{font-family:var(--sans);font-size:13.5px}

/* Contacto */
.contactos{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,64px);margin-top:48px;border-top:1px solid var(--tierra);padding-top:34px}
.contactos li{display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:14px}
.contactos h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05}

/* Frase suelta */
.cita{padding-block:clamp(80px,11vw,160px);background:var(--esparto);text-align:center;background-size:cover;background-position:center}
.cita--foto{color:var(--hueso);position:relative}
.cita--foto::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--encina-2) 72%,transparent)}
.cita .wrap{position:relative}
.cita p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(30px,4vw,54px);line-height:1.1;max-width:20ch;margin-inline:auto}
.cita cite{display:block;margin-top:22px;font-style:normal;font-size:13px;color:var(--tierra-2)}
.cita--foto cite{color:color-mix(in srgb,var(--hueso) 82%,transparent)}

/* Cierre */
.cierre{background:var(--esparto);text-align:center}

/* Galeria en mosaico y visor a pantalla completa */
.mosaico{display:grid;gap:18px;margin-top:40px}
.mosaico.cols-2{grid-template-columns:repeat(2,1fr)}
.mosaico.cols-3{grid-template-columns:repeat(3,1fr)}
.mosaico.cols-4{grid-template-columns:repeat(4,1fr)}
.mosaico button{aspect-ratio:4/5;padding:0;display:block;width:100%}
.mosaico button:nth-child(odd){border-radius:var(--arch)}
@media (max-width:760px){.mosaico.cols-3,.mosaico.cols-4{grid-template-columns:repeat(2,1fr)}}
.visor{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--encina-2) 97%,transparent);display:grid;place-items:center;padding:3rem 1rem}
.visor[hidden]{display:none}
.visor img{max-width:min(92vw,1200px);max-height:86vh;object-fit:contain}
.visor button{position:absolute;color:var(--hueso);font-size:2.6rem;line-height:1;padding:.5rem 1rem;opacity:.75}
.visor button:hover{opacity:1}
.visor__cerrar{top:.5rem;right:1rem;font-size:2.4rem}
.visor__ant{left:.5rem;top:50%;transform:translateY(-50%)}
.visor__sig{right:.5rem;top:50%;transform:translateY(-50%)}

/* Confirmar: separaciones que en la maqueta iban en el propio HTML */
.rsvp-block .lede{margin-top:28px}
.rsvp-block .lede+.small{margin-top:14px}

/* Formulario: partes que dependen de la configuracion del bloque */
[data-solo-si],[data-invitados]{display:contents}
[data-solo-si][hidden],[data-invitados][hidden]{display:none}
.field[hidden]{display:none}
.in[aria-invalid=true]{border-bottom-color:var(--hueso)}
.form-msg{grid-column:1/-1;font-size:12.5px;color:color-mix(in srgb,var(--hueso) 62%,transparent)}
.form-msg.err{color:var(--hueso);font-family:var(--serif);font-style:italic;font-size:19px}
.submit[disabled]{opacity:.55;cursor:default}
.thanks span{display:block;font-family:var(--sans);font-size:15.5px;line-height:1.6;margin-top:22px;color:color-mix(in srgb,var(--hueso) 82%,transparent)}
.cerrado{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,34px);line-height:1.2;max-width:24ch}
.cerrado p+p{margin-top:.6em}

@media (prefers-reduced-motion:reduce){
  .stage img{transition:none}
}