/* ════════════════════════════════════════════════════
   Álvaro & Rocío · 30 de abril de 2027
   Paleta tomada del dosier de Finca Villa María
   ════════════════════════════════════════════════════ */

:root{
  --hueso:#F5F1E8;
  --hueso-2:#EDE8DB;
  --papel:#FBF9F4;
  --tinta:#2E3A2F;
  --tinta-suave:#5A6A5B;
  --salvia:#CFDCB2;
  --olivo:#7C8B6A;
  --olivo-hondo:#5E6D50;
  --barro:#C08552;
  --barro-hondo:#A26C3E;

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --wrap-narrow:660px;
  --nav-h:60px;

  /* Unifica fotos de sitios muy distintos en una sola familia de color */
  --tono:sepia(.18) saturate(.82) contrast(1.02) brightness(1.02);
  --sombra:0 10px 30px rgba(46,58,47,.18), 0 2px 6px rgba(46,58,47,.1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--hueso);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--olivo-hondo);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--barro-hondo)}
:focus-visible{outline:2px solid var(--barro-hondo);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tinta);color:var(--hueso);padding:.7rem 1.1rem}
.skip:focus{left:8px;top:8px}

/* ─────────── Tipografía ─────────── */

h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.4vw,2.85rem);line-height:1.1;margin:0 0 .5em}
h3{font-family:var(--sans);font-weight:600;font-size:1.01rem;margin:1.7em 0 .3em}
h3:first-child{margin-top:0}
p{margin:0 0 1.1em;max-width:68ch}
p:last-child{margin-bottom:0}

.lead{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.4rem);font-weight:300;line-height:1.55;color:var(--tinta-suave);max-width:54ch;margin-bottom:2rem}
.prose p{color:var(--tinta-suave)}
.fine{font-size:.9rem;color:var(--tinta-suave);margin-top:1.4rem}
.center{text-align:center}
.center p,.center .lead{margin-inline:auto}

/* ─────────── Estructura ─────────── */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:32px}
.wrap--narrow{max-width:var(--wrap-narrow)}

.s{padding:clamp(3.5rem,8vw,6rem) 0}
.s--tint{background:var(--hueso-2)}
.s--dark{background:var(--olivo-hondo);color:#F3F1E7}
.s--dark h2{color:#fff}
.s--dark .sp__note{color:#DCE4CE}
.s--dark a{color:#fff}
.s--dark .sp__t::before{background:var(--salvia)}
.s--call{background:var(--salvia)}

.sp{display:grid;grid-template-columns:minmax(0,7.5fr) minmax(0,12fr);gap:clamp(2rem,5vw,4.5rem)}
.sp__t{position:sticky;top:calc(var(--nav-h) + 2.5rem);align-self:start;padding-top:.4rem}
.sp__t::before{content:"";display:block;width:36px;height:1px;background:var(--olivo);margin-bottom:1.5rem}
.sp__note{font-size:.97rem;color:var(--tinta-suave);max-width:34ch;margin:0}

@media (max-width:900px){
  .sp{grid-template-columns:1fr;gap:1.8rem}
  .sp__t{position:static}
}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
@media (max-width:820px){.duo{grid-template-columns:1fr;gap:3.5rem}}

/* ─────────── Cabecera ─────────── */

.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(245,241,232,.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease}
.nav.is-stuck{border-bottom-color:rgba(124,139,106,.28);box-shadow:0 1px 14px rgba(46,58,47,.06)}
.nav__inner{height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:32px;display:flex;align-items:center;gap:1.5rem}
.nav__mark{font-family:var(--serif);font-size:1.5rem;color:var(--tinta);text-decoration:none;letter-spacing:.04em}
.nav__mark span{color:var(--olivo);padding-inline:.06em}
.nav__links{display:flex;gap:1.7rem;margin-left:auto;font-size:.93rem}
.nav__links a{color:var(--tinta-suave);text-decoration:none}
.nav__links a:hover{color:var(--barro-hondo)}
.nav__cta{padding:.42rem 1rem;font-size:.88rem}

@media (max-width:720px){
  .wrap,.nav__inner{padding-inline:22px}
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
}

/* ─────────── Botones ─────────── */

.btn{display:inline-block;font-family:var(--sans);font-size:.95rem;font-weight:500;line-height:1.35;padding:.72rem 1.5rem;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn--solid{background:var(--barro);color:#fff;border-color:var(--barro)}
.btn--solid:hover{background:var(--barro-hondo);border-color:var(--barro-hondo);color:#fff}
.btn--ghost{background:transparent;color:var(--tinta);border-color:rgba(46,58,47,.3)}
.btn--ghost:hover{border-color:var(--tinta);color:var(--tinta);background:rgba(46,58,47,.04)}
.btn--lg{padding:.95rem 2.2rem;font-size:1.02rem}
.s--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.s--dark .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}

.acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.center .acts{justify-content:center}
.acts--wrap{margin-top:2rem}

/* ══════════════════════════════════════════
   TELÓN DE FONDO
   Dos fotos fijas que se funden al bajar y
   dan paso al color liso.
   ══════════════════════════════════════════ */

.telon{position:fixed;inset:0;z-index:-1;background:var(--hueso)}

.telon__capa{
  position:absolute;inset:0;
  background-size:cover;
  background-position:50% 30%;
  will-change:opacity;
}
.telon__capa--a{background-image:url("img/fondo-1.jpg");opacity:1}
.telon__capa--b{background-image:url("img/fondo-2.jpg");opacity:0}

/* Velo cálido: baja el contraste de la foto para que se lea el texto */
.telon__velo{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(245,241,232,.90) 0%,
      rgba(245,241,232,.74) 34%,
      rgba(245,241,232,.32) 58%,
      rgba(245,241,232,.20) 100%);
}

@media (max-width:820px){
  /* La foto entra entera por ancho y funde hacia el papel: nadie se recorta */
  .telon__capa{
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:center top;
  }
  .telon__capa--a{background-image:url("img/fondo-1-m.jpg")}
  .telon__capa--b{background-image:url("img/fondo-2-m.jpg")}
  /* La foto mide 96vw de alto (820x786): el velo la deja limpia y cierra debajo */
  .telon__velo{background:linear-gradient(180deg,
    rgba(245,241,232,.14) 0,
    rgba(245,241,232,.10) 58vw,
    rgba(245,241,232,.52) 82vw,
    rgba(245,241,232,.98) 96vw,
    rgba(245,241,232,1) 104vw)}
}

/* Todo lo que viene después del tramo con foto va sobre color liso */
.s{background:var(--hueso)}
.s--tint{background:var(--hueso-2)}
.s--dark{background:var(--olivo-hondo)}
.s--call{background:var(--salvia)}
.s--sobrefoto{background:transparent}

/* ══════════════════════════════════════════
   PORTADA
   ══════════════════════════════════════════ */

.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:clamp(2rem,7vh,4.5rem) 22px 4rem;
}

.hero__txt{max-width:720px}

.hero__over{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:.02em;
  color:var(--olivo-hondo);margin:0 0 .7rem;
}

/* Filete corto: separa el rótulo de los nombres */
.hero__txt::after{content:none}

.hero__names{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,8vw,4.8rem);
  line-height:1.02;margin:0;
  color:var(--tinta);
  text-shadow:0 1px 22px rgba(245,241,232,.9);
}
.hero__names .amp{font-style:italic;color:var(--olivo);font-size:.6em;padding-inline:.1em}

.hero__fecha{
  margin:1.3rem 0 .15rem;
  font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.5rem);
  letter-spacing:.03em;color:var(--tinta);
  text-shadow:0 1px 14px rgba(245,241,232,.9);
}
.hero__sede{
  margin:0;font-size:.92rem;letter-spacing:.02em;color:var(--tinta-suave);
  text-shadow:0 1px 14px rgba(245,241,232,.9);
}

.hero__acts{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}

/* — Cuenta atrás — */

.cd{margin-top:1.9rem}
.cd__g{display:flex;align-items:flex-start;justify-content:center;gap:.35rem}
.cd__u{display:flex;flex-direction:column;align-items:center;min-width:3.2rem}
.cd__n{
  font-family:var(--serif);font-size:clamp(1.7rem,4.6vw,2.3rem);line-height:1;
  color:var(--tinta);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 14px rgba(245,241,232,.9);
}
.cd__l{font-size:.68rem;letter-spacing:.1em;color:var(--tinta-suave);margin-top:.3rem}
.cd__s{font-family:var(--serif);font-size:clamp(1.3rem,3.4vw,1.8rem);color:var(--olivo);line-height:1.15}
.cd--fin .cd__g{display:none}
.cd__fin{font-family:var(--serif);font-size:1.7rem;color:var(--olivo-hondo);margin:0}

/* — Señal de bajar — */

.scroll{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:var(--tinta-suave);
}
.scroll__t{font-size:.74rem;letter-spacing:.12em}
.scroll__l{
  display:block;width:11px;height:11px;
  border-right:2px solid var(--olivo);
  border-bottom:2px solid var(--olivo);
  transform:rotate(45deg);
  margin-top:-1px;
}
.scroll:hover .scroll__l{border-color:var(--barro-hondo)}
.scroll{
  color:var(--tinta);
  background:rgba(245,241,232,.78);
  backdrop-filter:blur(6px);
  padding:.5rem 1.15rem .55rem;
  gap:.35rem;
  border-radius:999px;
  border:1px solid rgba(124,139,106,.28);
  transition:opacity .35s ease,background-color .18s ease;
}
.scroll.is-oculto{opacity:0;pointer-events:none}
.scroll:hover{color:var(--barro-hondo)}



@media (prefers-reduced-motion:no-preference){
  .scroll__l{animation:desliza 2.2s ease-in-out infinite}
}
@keyframes desliza{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.55}
  50%{transform:rotate(45deg) translate(3px,3px);opacity:1}
}

/* — Historia sobre la segunda foto — */

.s--sobrefoto .wrap{
  background:rgba(250,247,240,.72);
  backdrop-filter:blur(10px) saturate(.9);
  box-shadow:0 18px 50px rgba(46,58,47,.14);
  padding-block:clamp(2.2rem,5vw,3.4rem);
  border:1px solid rgba(124,139,106,.22);
}

/* ─────────── Galería ─────────── */

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2.2rem}
.gal__it{margin:0;overflow:hidden;line-height:0;font-size:0;background:none}
.gal__it img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:var(--tono);display:block}
@media (max-width:520px){.gal{grid-template-columns:repeat(3,1fr);gap:8px}}

/* ─────────── Línea de tiempo ─────────── */

.tl{list-style:none;margin:0;padding:0}
.tl__it{display:grid;grid-template-columns:74px 1fr;gap:0 1.6rem;position:relative;padding-bottom:2rem}
.tl__it::before{content:"";position:absolute;left:calc(74px + .8rem - 1px);top:.85rem;bottom:-.2rem;width:1px;background:rgba(124,139,106,.4)}
.tl__it--end::before{display:none}
.tl__it::after{content:"";position:absolute;left:calc(74px + .8rem - 4px);top:.6rem;width:7px;height:7px;border-radius:50%;background:var(--olivo)}
.tl__it--end::after{background:var(--barro)}
.tl__h{font-family:var(--serif);font-size:1.3rem;color:var(--olivo-hondo);text-align:right;font-variant-numeric:tabular-nums;line-height:1.25}
.tl__b h3{margin:0 0 .2em}
.tl__b p{margin:0;color:var(--tinta-suave);font-size:.95rem}

@media (max-width:520px){
  .tl__it{grid-template-columns:56px 1fr;gap:0 1.1rem}
  .tl__it::before{left:calc(56px + .55rem - 1px)}
  .tl__it::after{left:calc(56px + .55rem - 4px)}
  .tl__h{font-size:1.1rem}
}

/* ─────────── Tarjetas ─────────── */

.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--papel);border:1px solid rgba(124,139,106,.3);padding:1.7rem 1.6rem}
.card--wide{grid-column:1 / -1}
.card p{color:var(--tinta-suave);font-size:.95rem}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

.addr{font-family:var(--serif);font-size:1.3rem;line-height:1.5;font-weight:300;margin:0}

/* ─────────── Acordeón ─────────── */

.acc{border-top:1px solid rgba(124,139,106,.35)}
.acc:last-of-type{border-bottom:1px solid rgba(124,139,106,.35)}
.acc summary{list-style:none;cursor:pointer;padding:1.05rem 2.2rem 1.05rem 0;font-weight:500;font-size:1rem;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:.35rem;top:50%;width:9px;height:9px;border-right:1.5px solid var(--olivo);border-bottom:1.5px solid var(--olivo);transform:translateY(-70%) rotate(45deg);transition:transform .22s ease}
.acc[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.acc summary:hover{color:var(--barro-hondo)}
.acc__b{padding:0 0 1.3rem}
.acc__b p{color:var(--tinta-suave);font-size:.96rem}

/* ─────────── Consejos ─────────── */

.tips{margin:0;padding:0}
.tips p{margin:0;padding:.85rem 0 .85rem 1.5rem;border-top:1px solid rgba(255,255,255,.22);position:relative;color:#E4EAD8;font-size:.96rem}
.tips p::before{content:"";position:absolute;left:0;top:1.4rem;width:6px;height:6px;border-radius:50%;background:var(--salvia)}
.tips p:last-child{border-bottom:1px solid rgba(255,255,255,.22)}

/* ─────────── IBAN ─────────── */

.iban{margin-top:1.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.iban code{font-family:var(--sans);font-size:clamp(.92rem,3vw,1.1rem);letter-spacing:.05em;background:var(--papel);border:1px solid rgba(124,139,106,.45);padding:.85rem 1.1rem;display:block;width:100%;word-break:break-all}
.iban__ok{font-size:.9rem;color:var(--olivo-hondo)}

/* ─────────── Confirmar ─────────── */

.deadline{font-family:var(--serif);font-size:1.2rem;margin-bottom:.4rem}

/* ─────────── Pie ─────────── */

.ft{background:var(--tinta);color:#DDE3D6;text-align:center;padding:3.5rem 0}
.ft__names{font-family:var(--serif);font-size:1.9rem;font-weight:300;color:#fff;margin:0 0 .35rem}
.ft__date{font-size:.9rem;margin:0 0 1.2rem;color:#AEBBA4}
.ft__contact{font-size:.92rem;margin:0}
.ft a{color:#fff}
.ft p{margin-inline:auto}

/* ─────────── Aparición al hacer scroll ─────────── */

.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════ Ajustes de móvil · van al final para que no los pise nada ═══════ */

@media (max-width:820px){
  /* El texto de portada arranca debajo de la foto, no encima de las caras */
  .hero{padding:calc(96vw - var(--nav-h) + 1.2rem) 22px 5.5rem}
  .hero__over{margin-bottom:.4rem}
  .cd{margin-top:1.5rem}
  .hero__acts{margin-top:1.7rem}
  .scroll{bottom:1.6rem}
}