/* ============================================================
   joselaguna.com — main.css
   Metodología Sin Nassim · CSS centralizado
   Identidad: editorial oscura · Cormorant Garamond + Jost · oro
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────── */
:root{
  --white:#FAFAF8;
  --black:#0D0D0D;
  --gold:#C9A96E;
  --mid:#141414;
  --dark:#070707;
  --border:rgba(255,255,255,0.08);
  --text-soft:rgba(255,255,255,0.55);
  --text-faint:rgba(255,255,255,0.3);
  --serif:'Cormorant Garamond',serif;
  --sans:'Jost',sans-serif;
}

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:var(--sans);font-weight:300;overflow-x:hidden;line-height:1.6;}
img{display:block;max-width:100%;}
a{color:inherit;}

/* ── TIPOGRAFÍA BASE ───────────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;}
h1{font-size:clamp(3rem,6.5vw,6rem);line-height:.95;}
h2{font-size:clamp(2.1rem,3.8vw,3.6rem);line-height:1.08;}
h3{font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.2;}
h1 em,h2 em,h3 em{font-style:italic;color:var(--gold);}

.eyebrow{
  font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.6rem;display:flex;align-items:center;gap:.8rem;
}
.eyebrow::before{content:'';display:block;width:22px;height:1px;background:var(--gold);}
.eyebrow.centered{justify-content:center;}
.eyebrow.centered::before{display:none;}

/* ── BOTONES ───────────────────────────────────────────── */
.btn-primary{
  display:inline-block;font-family:var(--sans);font-size:.63rem;font-weight:300;
  letter-spacing:.3em;text-transform:uppercase;color:var(--black);background:var(--white);
  text-decoration:none;padding:.95rem 2.4rem;position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;background:var(--gold);
  transform:translateX(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.btn-primary:hover::before{transform:translateX(0);}
.btn-primary span{position:relative;z-index:1;}

.btn-ghost{
  display:inline-block;font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--text-faint);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:2px;transition:color .3s,border-color .3s;
}
.btn-ghost:hover{color:var(--gold);border-color:var(--gold);}

/* ── NAV ───────────────────────────────────────────────── */
#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  padding:1.6rem 3rem;display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(to bottom,rgba(13,13,13,.85),rgba(13,13,13,0));
  transition:background .4s,padding .4s;
}
#site-nav.scrolled{background:rgba(13,13,13,.96);padding:1rem 3rem;border-bottom:1px solid var(--border);}
.logo{display:flex;flex-direction:column;gap:.12rem;text-decoration:none;}
.logo-name{font-family:var(--serif);font-weight:400;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white);line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.logo-rule{width:100%;height:1px;background:var(--gold);opacity:.8;}
.logo-sub{font-weight:200;font-size:.46rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.65);line-height:1;}

.nav-links{list-style:none;display:flex;gap:2.6rem;align-items:center;}
.nav-links a{
  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.55);
  text-decoration:none;transition:color .3s;position:relative;padding-bottom:4px;
}
.nav-links a:hover{color:var(--white);}
.nav-links a.active{color:var(--gold);}
.nav-links a.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);}

.nav-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:6px;z-index:310;}
.nav-toggle span{display:block;width:26px;height:1px;background:var(--white);transition:transform .35s,opacity .35s;}
.nav-toggle.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

/* ── HERO HOME (slider) ────────────────────────────────── */
.hero{position:relative;width:100vw;height:100vh;overflow:hidden;}
.slides{position:absolute;inset:0;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);}
.slide.active{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.05);transition:transform 8s cubic-bezier(.4,0,.2,1);}
.slide.active img{transform:scale(1);}
.overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.6) 100%);z-index:1;}
.hero-content{position:absolute;bottom:4rem;left:4rem;z-index:2;animation:fadeUp 1.5s ease both .5s;max-width:680px;}
.hero-tag{font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:300;margin-bottom:.9rem;display:flex;align-items:center;gap:.8rem;}
.hero-tag::before{content:'';display:block;width:24px;height:1px;background:var(--gold);}
.hero h1{text-shadow:0 2px 20px rgba(0,0,0,.4);}
.hero-paths{display:flex;gap:1.6rem;margin-top:2rem;flex-wrap:wrap;}
.slide-counter{position:absolute;bottom:4.5rem;right:4rem;z-index:2;display:flex;align-items:center;gap:.8rem;}
.c-num{font-family:var(--serif);font-size:.85rem;font-weight:300;color:rgba(255,255,255,.5);letter-spacing:.1em;}
.c-num span{color:var(--white);}
.dots{display:flex;gap:6px;}
.dot{width:18px;height:1px;background:rgba(255,255,255,.3);transition:background .4s,width .4s;cursor:pointer;}
.dot.active{background:var(--gold);width:28px;}
.scroll-hint{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:.4;animation:fadeIn 2s ease both 1.5s;}
.scroll-hint span{font-size:.45rem;letter-spacing:.4em;text-transform:uppercase;}
.scroll-line{width:1px;height:35px;background:linear-gradient(to bottom,var(--white),transparent);animation:pulse 2s ease infinite;}

/* ── HERO INTERIOR (páginas) ───────────────────────────── */
.page-hero{position:relative;width:100vw;height:72vh;min-height:480px;overflow:hidden;}
.page-hero img{width:100%;height:100%;object-fit:cover;object-position:center;}
.page-hero .overlay{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.7) 100%);}
.page-hero-content{position:absolute;bottom:3.5rem;left:4rem;z-index:2;max-width:680px;animation:fadeUp 1.4s ease both .3s;}
.page-hero-content h1{text-shadow:0 2px 20px rgba(0,0,0,.45);}
.page-hero-content .lead{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:rgba(255,255,255,.7);margin-top:1.2rem;line-height:1.7;}

/* ── SECCIONES GENÉRICAS ───────────────────────────────── */
section{position:relative;}
.section{padding:8rem 4rem;}
.section-mid{background:var(--mid);}
.section-black{background:var(--black);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center;}
.split.top{align-items:start;}
.narrow{max-width:760px;margin:0 auto;}
.center{text-align:center;}

.phil-quote{
  font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--text-soft);
  line-height:1.85;border-left:1px solid var(--gold);padding-left:1.5rem;margin:2rem 0 2.6rem;
}
.phil-statement{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);font-weight:300;line-height:1.55;color:var(--text-soft);margin-bottom:2.6rem;}
.phil-statement strong{color:var(--white);font-weight:400;}
.body-text{color:var(--text-soft);font-size:.95rem;line-height:1.9;margin-bottom:1.4rem;}
.body-text:last-child{margin-bottom:0;}

.location-tag{display:inline-flex;align-items:center;gap:.7rem;font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;color:var(--text-faint);border:1px solid rgba(255,255,255,.1);padding:.6rem 1.2rem;}
.location-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

.section-head{max-width:620px;margin:0 auto 4.5rem;text-align:center;}
.section-head .eyebrow{justify-content:center;}
.section-head .eyebrow::before{display:none;}
.section-head p{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--text-faint);line-height:1.7;margin-top:1rem;}

/* ── GALERÍA MOSAICO ───────────────────────────────────── */
/* ── GALERÍA JOY ZAMORA — proporción áurea, scroll vertical ── */
.gallery{
  background: var(--black);
  padding: 7rem 0 5rem;
  display: block;
}
.gallery-jl{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.jl-row{
  display: flex;
  align-items: flex-start;
  margin-bottom: 88px;
}
.jl-row:last-child { margin-bottom: 0; }
.jl-row.r-right    { justify-content: flex-end; }
.jl-row.r-center   { justify-content: center; }
.jl-row.r-spread   { justify-content: space-between; align-items: flex-end; }
.jl-row.r-right-in { justify-content: flex-end; padding-right: 10%; }
.gi{
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #1a1412;
  display: block;
  grid-row: unset;
  grid-column: unset;
}
.gi img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.4,0,.2,1), filter .5s;
  filter: brightness(.88);
}
.gi:hover img{ transform: scale(1.04); filter: brightness(1); }
.gi.sz-portrait-lg { width: 38%; aspect-ratio: 1 / 1.618; }
.gi.sz-land-lg     { width: 56%; aspect-ratio: 1.618 / 1; }
.gi.sz-portrait-sm { width: 27%; aspect-ratio: 1 / 1.618; }
.gi.sz-square      { width: 40%; aspect-ratio: 1 / 1;     }
.gi.sz-land-sm     { width: 33%; aspect-ratio: 1.618 / 1; }
.gi.sz-portrait-md { width: 44%; aspect-ratio: 1 / 1.618; }
.gi.sz-land-xl     { width: 63%; aspect-ratio: 1.618 / 1; }

/* Galería uniforme (3 columnas) */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#111;}
.gallery-grid .gi{aspect-ratio:4/5;}

/* Placeholder editorial para fotos pendientes */
.gi.placeholder{background:linear-gradient(135deg,#161616,#0c0c0c);display:flex;align-items:center;justify-content:center;}
.gi.placeholder span{
  font-size:.52rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(201,169,110,.5);
  text-align:center;padding:1.5rem;line-height:2;border:1px solid rgba(201,169,110,.18);
}

/* ── TARJETAS DE SERVICIO (Familias / Bodas) ───────────── */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;}
.service-card{
  background:var(--dark);padding:3.2rem 2.8rem;border:1px solid var(--border);
  transition:background .4s,transform .4s;position:relative;
}
.service-card:hover{background:#0f0f0f;transform:translateY(-3px);}
.service-card .num{font-family:var(--serif);font-size:1rem;color:var(--gold);letter-spacing:.1em;margin-bottom:1.4rem;display:block;}
.service-card h3{margin-bottom:1rem;}
.service-card p{color:var(--text-faint);font-size:.9rem;line-height:1.85;}

/* ── DOS CAMINOS (home: bodas / familias) ──────────────── */
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.path-card{position:relative;overflow:hidden;min-height:62vh;display:flex;align-items:flex-end;text-decoration:none;}
.path-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);transition:transform 1s cubic-bezier(.4,0,.2,1),filter .5s;}
.path-card:hover img{transform:scale(1.06);filter:brightness(.7);}
.path-card.placeholder{background:linear-gradient(135deg,#181818,#0b0b0b);}
.path-card-content{position:relative;z-index:2;padding:3.5rem;width:100%;}
.path-card .eyebrow{margin-bottom:.9rem;}
.path-card h2{margin-bottom:.8rem;}
.path-card p{color:rgba(255,255,255,.65);font-size:.92rem;line-height:1.8;margin-bottom:1.6rem;max-width:420px;}
.path-link{font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--gold);padding-bottom:3px;}

/* ── FAQ ───────────────────────────────────────────────── */
.faq-grid{max-width:860px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;background:none;border:none;color:var(--white);font-family:var(--sans);
  font-weight:300;font-size:.9rem;letter-spacing:.02em;text-align:left;padding:1.8rem 0;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:color .3s;gap:1rem;
}
.faq-q:hover,.faq-item.open .faq-q{color:var(--gold);}
.faq-icon{width:20px;height:20px;flex-shrink:0;position:relative;}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:currentColor;transition:transform .4s,opacity .3s;}
.faq-icon::before{width:14px;height:1px;top:50%;left:3px;transform:translateY(-50%);}
.faq-icon::after{width:1px;height:14px;top:3px;left:50%;transform:translateX(-50%);}
.faq-item.open .faq-icon::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-a{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--text-faint);line-height:1.8;max-height:0;overflow:hidden;transition:max-height .5s ease,padding .4s;padding:0;}
.faq-item.open .faq-a{max-height:320px;padding-bottom:1.8rem;}

/* ── RESEÑAS ───────────────────────────────────────────── */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.review-card{background:var(--dark);padding:2.8rem 2.4rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:1.4rem;}
.review-stars{color:var(--gold);font-size:.7rem;letter-spacing:.3em;}
.review-text{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--text-soft);line-height:1.75;flex:1;}
.review-author{font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-faint);}
.review-author strong{color:var(--gold);font-weight:400;}

/* ── CTA BANDA ─────────────────────────────────────────── */
.cta-band{background:var(--mid);padding:7rem 4rem;text-align:center;}
.cta-band h2{margin-bottom:1.4rem;}
.cta-band p{font-family:var(--serif);font-size:1.1rem;font-style:italic;color:var(--text-faint);max-width:520px;margin:0 auto 2.6rem;line-height:1.7;}

/* ── CONTACTO / FORMULARIO ─────────────────────────────── */
.contact-details{display:flex;flex-direction:column;gap:1.2rem;margin-top:2.5rem;}
.contact-detail{display:flex;align-items:center;gap:1rem;}
.cdl{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);width:70px;flex-shrink:0;}
.contact-detail a,.contact-detail span{font-family:var(--serif);font-size:1rem;color:var(--text-soft);text-decoration:none;transition:color .3s;}
.contact-detail a:hover{color:var(--white);}
.contact-desc{font-family:var(--serif);font-size:1.1rem;font-style:italic;color:var(--text-faint);line-height:1.8;}

.form-group{margin-bottom:1.4rem;}
.form-group label{display:block;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;}
.form-group input,.form-group textarea,.form-group select{
  width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--white);
  font-family:var(--sans);font-weight:300;font-size:.88rem;padding:.85rem 1rem;outline:none;
  transition:border-color .3s;-webkit-appearance:none;border-radius:0;
}
.form-group select{cursor:pointer;}
.form-group option{background:var(--mid);color:var(--white);}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.2);}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--gold);}
.form-group textarea{height:130px;resize:none;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.btn-submit{
  width:100%;font-family:var(--sans);font-size:.63rem;font-weight:300;letter-spacing:.3em;
  text-transform:uppercase;color:var(--black);background:var(--white);border:none;padding:1.1rem;
  cursor:pointer;position:relative;overflow:hidden;margin-top:.5rem;
}
.btn-submit::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);}
.btn-submit:hover::before{transform:translateX(0);}
.btn-submit span{position:relative;z-index:1;}
.form-notice{font-size:.52rem;letter-spacing:.1em;color:rgba(255,255,255,.2);margin-top:.8rem;}
.form-success{display:none;text-align:center;padding:3rem 1rem;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.15rem;line-height:1.7;}
.form-error{display:none;color:#d98c8c;font-size:.78rem;margin-top:.8rem;letter-spacing:.05em;}

/* ── FOOTER ────────────────────────────────────────────── */
#site-footer{background:var(--dark);border-top:1px solid var(--border);}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;padding:4.5rem 4rem 3.5rem;}
.footer-logo{font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white);}
.footer-logo-rule{display:block;width:38px;height:1px;background:var(--gold);margin:.5rem 0 1rem;}
.footer-tagline{color:var(--text-faint);font-size:.85rem;line-height:1.8;max-width:300px;}
.footer-label{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem;}
.footer-col a,.footer-static{display:block;color:var(--text-soft);text-decoration:none;font-size:.82rem;margin-bottom:.7rem;transition:color .3s;letter-spacing:.02em;}
.footer-col a:hover{color:var(--gold);}
.footer-base{display:flex;justify-content:space-between;align-items:center;padding:1.8rem 4rem;border-top:1px solid var(--border);}
.footer-copy{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);}

/* ── ANIMACIONES ───────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pulse{0%,100%{opacity:.4;transform:scaleY(1);}50%{opacity:1;transform:scaleY(1.3);}}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .9s ease,transform .9s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1100px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:2.5rem;}
}
@media(max-width:900px){
  #site-nav{padding:1.3rem 1.5rem;}
  #site-nav.scrolled{padding:1rem 1.5rem;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;inset:0;background:rgba(10,10,10,.98);flex-direction:column;
    justify-content:center;gap:2.4rem;transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:.95rem;letter-spacing:.2em;}

  .hero-content{bottom:3rem;left:1.5rem;right:1.5rem;}
  .hero-paths{gap:1rem;}
  .slide-counter{right:1.5rem;bottom:3.5rem;}
  .page-hero{height:60vh;min-height:380px;}
  .page-hero-content{left:1.5rem;right:1.5rem;bottom:2.5rem;}

  .section{padding:4.5rem 1.5rem;}
  .split{grid-template-columns:1fr;gap:3rem;}
  .cta-band{padding:4.5rem 1.5rem;}

  .gallery{ padding: 4rem 0 3rem; }
  .gallery-jl{ padding: 0 5vw; }
  .jl-row{ margin-bottom: 52px; }
  .jl-row.r-right-in{ padding-right: 0; }
  .gi.sz-portrait-lg,.gi.sz-portrait-md{ width: 60%; }
  .gi.sz-land-lg,.gi.sz-land-xl{ width: 88%; }
  .gi.sz-portrait-sm{ width: 46%; }
  .gi.sz-square{ width: 64%; }
  .gi.sz-land-sm{ width: 54%; }
  .service-grid{grid-template-columns:1fr;}
  .paths-grid{grid-template-columns:1fr;}
  .path-card{min-height:52vh;}
  .path-card-content{padding:2.2rem;}
  .reviews-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}

  .footer-inner{grid-template-columns:1fr;gap:2.2rem;padding:3.5rem 1.5rem 2.5rem;}
  .footer-base{flex-direction:column;gap:1rem;text-align:center;padding:1.8rem 1.5rem;}
}