/* ==========================================================
   Ana Andreu — Fotografía de bodas
   Hoja de estilos única. Todo lo editable está aquí arriba.
   ========================================================== */

:root{
  --ink:#F4F2EE;
  --ink-dim:rgba(244,242,238,.6);
  --ink-faint:rgba(244,242,238,.38);
  --ground:#0B0B0C;
  --ground-2:#121213;
  --hair:rgba(244,242,238,.18);
  --font-display:'Bodoni Moda', Didot, 'Times New Roman', serif;
  --font-body:'Jost', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --pad:clamp(18px,4vw,46px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance;}
p{margin:0;}
[hidden]{display:none !important;}
::selection{background:var(--ink);color:var(--ground);}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.wrap{max-width:1300px;margin:0 auto;padding-inline:var(--pad);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Marcador de foto (se borra al poner fotos reales) ---------- */
.ph{position:relative;overflow:hidden;background:#1a1a1c;}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ph--sunset{background:radial-gradient(120% 110% at 75% 15%,#F2B071 0%,#C4642A 30%,#5E2E1C 62%,#1B0F0A 100%);}
.ph--sea{background:radial-gradient(115% 120% at 25% 85%,#89C0B6 0%,#2F6960 38%,#153029 70%,#0A130F 100%);}
.ph--dusk{background:radial-gradient(130% 110% at 60% 100%,#9E8FAE 0%,#4C4159 38%,#231F2C 72%,#0D0B10 100%);}
.ph--skin{background:radial-gradient(110% 120% at 40% 20%,#F0D2BB 0%,#C8987B 35%,#6B4636 70%,#241611 100%);}
.ph--green{background:radial-gradient(120% 120% at 80% 80%,#B5C08A 0%,#65724A 38%,#2E3623 72%,#111409 100%);}
.ph--night{background:radial-gradient(120% 120% at 30% 10%,#7C8CA8 0%,#39435A 35%,#1B2130 70%,#090C12 100%);}
.ph--ash{background:radial-gradient(120% 120% at 65% 25%,#DCD3C6 0%,#9A8E7E 38%,#4B443A 74%,#1A1712 100%);}
.ph-tag{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.25);padding:5px 11px;pointer-events:none;white-space:nowrap;
}

/* ---------- Barra superior ---------- */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:26px var(--pad);
}
.topbar.is-solid{
  position:sticky;background:rgba(11,11,12,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);padding-block:18px;
}
.mark{
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.topnav{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);list-style:none;margin:0;padding:0;}
.topnav a{
  color:var(--ink);text-decoration:none;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.75;transition:opacity .2s;
}
.topnav a:hover{opacity:1;}
.lang{display:flex;gap:6px;align-items:center;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;}
.lang button{
  background:none;border:none;color:var(--ink-faint);cursor:pointer;padding:2px;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
}
.lang button[aria-current="true"]{color:var(--ink);}
.lang span{color:var(--ink-faint);}
.menu-btn{display:none;background:none;border:1px solid var(--hair);color:var(--ink);
  width:40px;height:40px;cursor:pointer;font-size:1rem;}

/* ---------- Portada ----------
   Por defecto: el vídeo ocupa toda la portada y el titular va encima.
   Con la clase --partida: en ordenador el vídeo pasa a una columna vertical
   y el titular se coloca al lado, sobre negro. */
.stagehero{position:relative;height:min(88vh,780px);overflow:hidden;background:var(--ground);}
.hero-media{position:absolute;inset:0;overflow:hidden;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.hero-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;
  width:70px;height:70px;border-radius:50%;cursor:pointer;
  background:rgba(11,11,12,.45);border:1px solid rgba(244,242,238,.55);color:var(--ink);
  font-size:1.3rem;line-height:1;backdrop-filter:blur(6px);transition:background .2s,transform .2s;
}
.hero-play:hover{background:rgba(11,11,12,.72);transform:translate(-50%,-50%) scale(1.05);}
.stagehero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 42%,transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 30%,transparent 46%,rgba(0,0,0,.85) 100%);
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:clamp(52px,9vw,96px);z-index:10;
  padding-inline:var(--pad);
}
.hero-copy h1{font-size:clamp(2.4rem,6.4vw,4.9rem);line-height:1.02;max-width:16ch;}
.hero-copy .sub{margin-top:18px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);}
.hero-copy .rule{display:none;}

/* --- Portada partida (solo en pantallas anchas) --- */
@media (min-width:881px){
  .stagehero--partida{
    display:grid;grid-template-columns:clamp(300px,34vw,500px) 1fr;
    align-items:center;gap:clamp(24px,4vw,72px);
    padding-inline:var(--pad);padding-top:clamp(78px,9vh,104px);
  }
  .stagehero--partida::after{display:none;}
  .stagehero--partida .hero-media{position:relative;inset:auto;height:100%;}
  /* El vídeo se funde con el negro por arriba y por abajo */
  .stagehero--partida .hero-media::after{
    content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
    background:linear-gradient(180deg,
      var(--ground) 0%,
      rgba(11,11,12,.55) 8%,
      transparent 22%,
      transparent 78%,
      rgba(11,11,12,.55) 92%,
      var(--ground) 100%);
  }
  .stagehero--partida .hero-copy{position:relative;left:auto;right:auto;bottom:auto;padding-inline:0;}
  .stagehero--partida .hero-copy h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:14ch;}
  .stagehero--partida .hero-copy .sub{margin-top:22px;}
  .stagehero--partida .hero-copy .rule{display:block;width:64px;height:1px;background:var(--hair);margin-top:30px;}
}

/* ---------- Secciones ---------- */
section{padding-block:clamp(64px,9vw,120px);}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:38px;}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);}
.sec-head span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);}

/* ---------- Mosaico de bodas (portada) ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.tile{position:relative;overflow:hidden;text-decoration:none;color:var(--ink);display:block;}
.tile .ph,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);}
.tile:hover .ph,.tile:hover img{transform:scale(1.045);}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 55%);pointer-events:none;}
.tile .meta{position:absolute;left:18px;bottom:16px;z-index:2;}
.tile .meta .names{font-family:var(--font-display);font-style:italic;font-size:1.25rem;display:block;}
.tile .meta .place{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,238,.7);}
/* Una pieza por boda; el tamaño depende de cuántas bodas haya */
.tile-w6{grid-column:span 6;aspect-ratio:16/9;}
.tile-w3{grid-column:span 3;aspect-ratio:4/3;}
.tile-w2{grid-column:span 2;aspect-ratio:4/5;}

/* ---------- Sobre mí ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:center;}
/* Sin retrato todavía: el texto ocupa una sola columna estrecha */
/* Con retrato: dos columnas, la foto marca el margen izquierdo */
.about--portrait{
  grid-template-columns:minmax(220px,360px) minmax(0,58ch);
  justify-content:center;align-items:start;gap:clamp(28px,5vw,64px);
}
.about--portrait .quote{font-size:clamp(1.5rem,3vw,2.15rem);max-width:none;margin-bottom:26px;}
.about--portrait p.body{max-width:none;}
.about--portrait p.body + p.body{margin-top:20px;}
.about--portrait .portrait{position:sticky;top:90px;aspect-ratio:2/3;}
.about .portrait{aspect-ratio:4/5;position:relative;overflow:hidden;}
.about .portrait img{width:100%;height:100%;object-fit:cover;}
.about .quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.3;margin-bottom:22px;}
.about p.body{color:var(--ink-dim);max-width:46ch;}
.about p.body + p.body{margin-top:16px;}

/* ---------- Contacto ---------- */
.contact{border-top:1px solid var(--hair);text-align:center;}
.contact h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:12px;}
.contact p.lead{color:var(--ink-dim);margin:0 auto 36px;max-width:46ch;}
.contact-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 30px;border:1px solid var(--hair);color:var(--ink);background:transparent;
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{border-color:var(--ink);}
.btn-solid{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.btn-solid:hover{background:transparent;color:var(--ink);}

/* ---------- Página de boda ---------- */
.wed-head{padding-block:clamp(52px,8vw,90px) clamp(28px,4vw,44px);}
.wed-head .kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:16px;}
.wed-head h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;}
.wed-head .meta{margin-top:20px;display:flex;gap:26px;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);}
.wed-intro{color:var(--ink-dim);max-width:56ch;margin-top:28px;}

.wed-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding-bottom:clamp(50px,7vw,90px);}
.shot{position:relative;overflow:hidden;border:none;padding:0;background:none;cursor:zoom-in;}
.shot .ph,.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.shot:hover .ph,.shot:hover img{transform:scale(1.04);}
.w-full{grid-column:span 6;aspect-ratio:16/9;}
.w-half{grid-column:span 3;aspect-ratio:4/3;}
.w-third{grid-column:span 2;aspect-ratio:3/4;}
.w-two-thirds{grid-column:span 4;aspect-ratio:16/10;}
/* Vertical que acompaña a una foto ancha: se estira hasta igualar su altura */
.w-fit{grid-column:span 2;}

.wed-foot{border-top:1px solid var(--hair);display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;padding-block:clamp(38px,5vw,60px);}
.wed-foot .next{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);
  text-decoration:none;}
.wed-foot .next small{display:block;font-family:var(--font-body);font-style:normal;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;}

/* ---------- Pie ---------- */
footer.site{border-top:1px solid var(--hair);padding-block:28px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
footer.site a{color:inherit;text-decoration:none;}
footer.site a:hover{color:var(--ink);}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(6,6,7,.97);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:5vh 5vw;}
.lightbox .frame{width:min(94vw,1100px);max-height:76vh;aspect-ratio:3/2;position:relative;}
.lightbox .frame .ph,.lightbox .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.lightbox .lb-cap{color:var(--ink-dim);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;}
.lightbox .lb-close{position:absolute;top:18px;right:22px;background:none;border:1px solid var(--hair);
  color:var(--ink);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.05rem;}
.lightbox .lb-close:hover{background:var(--ink);color:var(--ground);}
.lightbox .lb-nav{display:flex;gap:14px;}
.lightbox .lb-nav button{background:none;border:1px solid var(--hair);color:var(--ink);
  width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1rem;}
.lightbox .lb-nav button:hover{background:var(--ink);color:var(--ground);}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .topnav{
    position:fixed;inset:0;z-index:60;background:rgba(11,11,12,.98);
    flex-direction:column;align-items:center;justify-content:center;gap:30px;
  }
  .topnav[hidden]{display:none !important;}
  .topnav a{font-size:.9rem;}
  .menu-btn{display:block;z-index:70;position:relative;}
  .mosaic{grid-template-columns:1fr;}
  .tile-w6,.tile-w3,.tile-w2{grid-column:span 1;aspect-ratio:4/3;}
  .about{grid-template-columns:1fr;}
  .about .portrait{max-width:320px;}
  .wed-gallery{grid-template-columns:repeat(2,1fr);}
  .w-full,.w-two-thirds{grid-column:span 2;aspect-ratio:16/10;}
  .w-half{grid-column:span 2;aspect-ratio:4/3;}
  .w-third,.w-fit{grid-column:span 1;aspect-ratio:3/4;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}