/* ── RESET & ROOT ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --amber: #C17D3C;
  --al: #E8A95A;
  --dark: #0E0905;
  --dark2: #1A0F06;
  --cream: #FAF0E0;
  --cream2: #F5EDD8;
  --border: #D4B896;
  --brown: #3D1F08;
}
html { scroll-behavior: smooth; }
body { font-family: 'Raleway', sans-serif; background: var(--dark); overflow-x: hidden; color: var(--cream); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 3rem;
  transition: background .4s, border-color .4s;
  border-bottom: .5px solid transparent;
}
nav.scrolled {
  background: rgba(14,9,5,.96);
  border-bottom-color: rgba(193,125,60,.18);
  backdrop-filter: blur(14px);
}
.logo { text-decoration: none; line-height: 1; }
.logo-top { font-family: 'Pinyon Script', cursive; font-size: 30px; color: var(--al); display: block; line-height: 1; }
.logo-bot { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 11px; letter-spacing: .28em; color: var(--cream); text-transform: uppercase; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a { font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: rgba(250,240,224,.45); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--al); }
.nav-cta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 9px 22px; border: .5px solid var(--amber); color: var(--amber); text-decoration: none; transition: all .25s; }
.nav-cta:hover { background: var(--amber); color: var(--cream); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { display: block; width: 26px; height: 1.5px; background: var(--cream); transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(14,9,5,.98); z-index: 299;
  flex-direction: column; align-items: center; justify-content: center; gap: 2.8rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: rgba(250,240,224,.55); text-decoration: none; transition: color .2s; }
.mobile-menu a:hover { color: var(--al); }
.mobile-menu .mcta { padding: 12px 36px; border: .5px solid var(--amber); color: var(--amber); }
.mobile-logo { font-family: 'Pinyon Script', cursive; font-size: 48px; color: var(--al); margin-bottom: 1rem; }

/* ── HERO ── */
.hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: var(--dark2); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; filter: sepia(14%) saturate(1.1) brightness(.88); }
.hero-slide.active img { animation: kenBurns 10s ease forwards; }
@keyframes kenBurns { 0% { transform: scale(1.07); } 100% { transform: scale(1.0); } }
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(14,9,5,.55) 100%); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,9,5,.15) 0%, rgba(14,9,5,.72) 100%); }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 1.2rem; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: rgba(250,240,224,.75); margin-bottom: 2rem; font-weight: 300; font-family: 'Playfair Display', serif; }
.hero-eyebrow-line { flex: 0 0 40px; height: 1px; background: var(--al); opacity: .6; }
.hero-t1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(46px,8vw,88px); line-height: .95; color: var(--cream); }
.hero-t2 { font-family: 'Pinyon Script', cursive; font-size: clamp(54px,9.5vw,112px); color: var(--al); line-height: 1.05; display: block; margin-top: .1em; }
.hero-sub { font-size: 13px; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: rgba(250,240,224,.42); margin-top: 1.8rem; margin-bottom: 3rem; }
.hero-btn { font-size: 11px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; padding: 14px 42px; background: transparent; color: var(--cream); text-decoration: none; border: .5px solid rgba(250,240,224,.38); transition: all .3s; }
.hero-btn:hover { border-color: var(--amber); background: var(--amber); }

/* floating words — ref imagen 1 */

.hero-dots { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.hero-dot { width: 28px; height: 1.5px; background: rgba(250,240,224,.2); border: none; cursor: pointer; padding: 0; transition: all .4s; }
.hero-dot.active { background: var(--al); width: 46px; }
.hero-scroll { position: absolute; bottom: 2.5rem; right: 3rem; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(250,240,224,.3); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, rgba(250,240,224,.3), transparent); animation: sline 2.2s infinite; }
@keyframes sline { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ── GALLERY SLIDESHOW ── */
.gallery-sec { background: var(--dark); position: relative; overflow: hidden; height: 88vh; min-height: 500px; }
.gal-slide { display: none; position: absolute; inset: 0; }
.gal-slide.active { display: block; }
.gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(10%) saturate(1.1) brightness(.88); animation: galZoom 8s ease forwards; }
@keyframes galZoom { 0%{transform:scale(1.04);} 100%{transform:scale(1.0);} }
.gal-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 4rem 6vw; background: linear-gradient(to top, rgba(14,9,5,.88) 0%, transparent 100%); animation: fadeUp .7s ease forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.gal-cap-t1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(28px,4vw,52px); color: var(--cream); line-height: 1.0; }
.gal-cap-t2 { font-family: 'Pinyon Script', cursive; font-size: clamp(38px,5.5vw,72px); color: var(--al); line-height: 1.0; display: block; }
.gal-nav { position: absolute; bottom: 2.5rem; right: 4rem; z-index: 3; display: flex; gap: 10px; align-items: center; }
.gal-arrow { background: none; border: .5px solid rgba(250,240,224,.28); color: rgba(250,240,224,.55); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; font-size: 18px; }
.gal-arrow:hover { border-color: var(--amber); color: var(--al); }

/* ── SPLIT QUOTE — ref imagen 2 ── */
.split-quote { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.sq-photo { position: relative; overflow: hidden; }
.sq-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(20%) saturate(.9) brightness(.75); transition: transform 1s; }
.sq-photo:hover img { transform: scale(1.04); }
.sq-photo-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(48px,7vw,96px); color: rgba(250,240,224,.18); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.sq-text { background: var(--dark); display: flex; align-items: center; justify-content: center; padding: 5rem 4rem; position: relative; }
.sq-corner { position: absolute; width: 28px; height: 28px; border-color: rgba(193,125,60,.2); border-style: solid; border-width: 0; }
.sq-corner.tl { top: 2rem; left: 2rem; border-top-width: 1px; border-left-width: 1px; }
.sq-corner.tr { top: 2rem; right: 2rem; border-top-width: 1px; border-right-width: 1px; }
.sq-corner.bl { bottom: 2rem; left: 2rem; border-bottom-width: 1px; border-left-width: 1px; }
.sq-corner.br { bottom: 2rem; right: 2rem; border-bottom-width: 1px; border-right-width: 1px; }
.sq-inner { max-width: 420px; width: 100%; }
.sq-open { font-family: 'Playfair Display', serif; font-size: 60px; color: rgba(232,169,90,.12); line-height: .6; display: block; margin-bottom: .5rem; }
.sq-quote { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(22px,2.8vw,36px); color: var(--cream); line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; }
.sq-quote em { font-style: italic; font-weight: 700; color: var(--amber); }
.sq-sub { font-size: 13px; font-weight: 300; color: rgba(250,240,224,.42); margin-top: 1.5rem; line-height: 1.8; }
.sq-line { width: 36px; height: 1.5px; background: var(--amber); margin: 1.5rem 0; }

/* ── FULLSCREEN PHOTO + CORNER TEXT — ref imagen 5 ── */
.fullphoto { position: relative; height: 85vh; min-height: 480px; overflow: hidden; }
.fullphoto img { width: 100%; height: 100%; object-fit: cover; filter: sepia(8%) saturate(1.0) brightness(.82); transition: transform 1.2s; }
.fullphoto:hover img { transform: scale(1.03); }
.fullphoto-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,9,5,.6) 0%, transparent 50%); }
.fullphoto-text { position: absolute; bottom: 3rem; left: 5rem; max-width: 420px; z-index: 2; }
.fullphoto-text .pt { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(11px,1.2vw,14px); letter-spacing: .22em; text-transform: uppercase; color: rgba(250,240,224,.45); margin-bottom: .5rem; display: block; }
.fullphoto-text .big { font-family: 'Pinyon Script', cursive; font-size: clamp(52px,7vw,90px); color: var(--al); line-height: 1.0; display: block; }

/* ── VERTICAL SLIDESHOW — opción D ── */
.vert-sec { background: var(--dark); position: relative; overflow: hidden; }
.vert-slides { position: relative; }
.vert-slide { display: none; position: relative; min-height: 90vh; }
.vert-slide.active { display: flex; align-items: stretch; }
.vert-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) sepia(15%) brightness(.8); animation: vertZoom 9s ease forwards; }
@keyframes vertZoom { 0%{transform:scale(1.06);} 100%{transform:scale(1.0);} }
.vert-overlay { position: absolute; inset: 0; background: rgba(14,9,5,.45); }
.vert-caption { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; padding: 4rem 2rem; }
.vert-t1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(38px,6vw,80px); color: var(--cream); line-height: .95; }
.vert-t2 { font-family: 'Pinyon Script', cursive; font-size: clamp(54px,8.5vw,116px); color: var(--al); line-height: 1.0; display: block; margin-top: .1em; }
.vert-dots { display: flex; justify-content: center; gap: 10px; margin-top: 3rem; }
.vert-dot { width: 28px; height: 1.5px; background: rgba(250,240,224,.2); border: none; cursor: pointer; padding: 0; transition: all .4s; }
.vert-dot.active { background: var(--al); width: 44px; }

/* ── BIG SCRIPT OVERLAY — ref imagen 4 ── */
.bigscript { position: relative; overflow: hidden; height: 85vh; min-height: 480px; }
.bigscript img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(60%) brightness(.7); }
.bigscript-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,9,5,.55) 0%, transparent 60%); }
.bigscript-text { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; z-index: 2; pointer-events: none; padding: 0 3vw 2vw; }
.bigscript-text span { font-family: 'Pinyon Script', cursive; font-size: clamp(80px,14vw,200px); color: rgba(250,240,224,.88); line-height: .85; display: block; white-space: nowrap; }

/* ── VIDEOS ── */
.videos-sec { position: relative; padding: 7rem 2rem; overflow: hidden; }
.vid-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.vid-bg-wrap img { width: 100%; height: 100%; object-fit: cover; filter: sepia(20%) saturate(.7) brightness(.22); }
.vid-bg-overlay { position: absolute; inset: 0; background: rgba(14,9,5,.68); }
.videos-in { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.videos-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 4px; margin-top: 3rem; }
.vid-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #150C04; cursor: pointer; }
.vid-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: background .3s; }
.vid-thumb:hover .vid-inner { background: #2A1A0A; }
.vid-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.vid-play i { font-size: 42px; color: var(--al); transition: transform .3s; }
.vid-thumb:hover .vid-play i { transform: scale(1.14); }
.vid-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(250,240,224,.4); }
.yt-link { display: block; text-align: center; margin-top: 2.5rem; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); text-decoration: none; }
.yt-link:hover { color: var(--al); }

/* ── ABOUT — ref imagen 2 split ── */


















.a-eyebrow { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--amber); margin-bottom: .8rem; font-weight: 300; }
.a-t1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(28px,3.5vw,44px); color: var(--cream); line-height: .95; }
.a-t2 { font-family: 'Pinyon Script', cursive; font-size: clamp(40px,5vw,62px); color: var(--amber); line-height: .9; display: block; }
.a-div { width: 36px; height: 1.5px; background: var(--amber); margin: 1.5rem 0 2rem; }
.a-text { font-size: 14px; font-weight: 300; line-height: 1.9; color: rgba(250,240,224,.5); margin-bottom: 1.2rem; }
.social-bar { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.soc-link { display: flex; align-items: center; gap: 7px; color: rgba(250,240,224,.35); text-decoration: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 300; transition: color .2s; padding: 7px 12px; border: .5px solid rgba(250,240,224,.08); }
.soc-link i { font-size: 17px; }
.soc-link:hover { color: var(--al); border-color: rgba(193,125,60,.35); }

/* ── SERVICES ── */
.services-sec { background: var(--dark); padding: 7rem 2rem; }
.services-in { max-width: 1100px; margin: 0 auto; }
.s-eyebrow { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--amber); margin-bottom: .8rem; font-weight: 300; }
.s-t1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(30px,4vw,50px); color: var(--cream); line-height: .95; }
.s-t2 { font-family: 'Pinyon Script', cursive; font-size: clamp(42px,5.5vw,68px); color: var(--al); line-height: .9; display: inline; }
.s-t1-dark { color: var(--brown); }
.s-t2-dark { color: var(--amber); }
.divider { width: 36px; height: 1.5px; background: var(--amber); margin: 1.5rem 0 3rem; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1.5rem; }
.svc-card { padding: 2.5rem 2rem; border: .5px solid var(--border); background: rgba(255,255,255,.03); transition: transform .3s, background .3s; }
.svc-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.05); }
.svc-icon { font-size: 28px; color: var(--amber); margin-bottom: 1.5rem; }
.svc-nt1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; color: var(--cream); }
.svc-nt2 { font-family: 'Pinyon Script', cursive; font-size: 30px; color: var(--al); line-height: .9; }
.svc-desc { font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(250,240,224,.42); margin-top: .8rem; }

/* ── PRICING ── */
.pricing-sec { background: var(--dark2); padding: 7rem 2rem; }
.pricing-in { max-width: 1100px; margin: 0 auto; }
.p-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.5px; margin-top: 3rem; background: rgba(193,125,60,.12); }
.p-card { padding: 3rem 2rem; background: var(--dark2); position: relative; }
.p-card.feat { background: #221408; }
.p-badge { display: inline-block; background: var(--amber); color: var(--cream); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 16px; margin-bottom: 1.5rem; }
.p-nt1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 22px; color: var(--cream); }
.p-nt2 { font-family: 'Pinyon Script', cursive; font-size: 32px; color: var(--al); line-height: .9; }
.p-price { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 38px; color: var(--al); display: block; margin: 1.5rem 0 .3rem; }
.p-sub { font-size: 12px; color: rgba(250,240,224,.28); margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: .5px solid rgba(193,125,60,.12); }
.p-feats { list-style: none; margin-bottom: 2.5rem; }
.p-feats li { font-size: 13px; font-weight: 300; color: rgba(250,240,224,.45); padding: 8px 0; display: flex; align-items: center; gap: 10px; border-bottom: .5px solid rgba(255,255,255,.04); }
.p-feats i { color: var(--amber); font-size: 14px; flex-shrink: 0; }
.p-btn { display: block; text-align: center; padding: 13px; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; border: .5px solid rgba(193,125,60,.3); color: var(--amber); cursor: pointer; transition: all .25s; background: transparent; width: 100%; }
.p-btn:hover, .p-card.feat .p-btn { background: var(--amber); border-color: var(--amber); color: var(--cream); }

/* ── CONTACT ── */
.contact-sec { background: var(--dark); padding: 7rem 2rem; }
.contact-in { max-width: 680px; margin: 0 auto; text-align: center; }
.cf { margin-top: 3rem; text-align: left; display: flex; flex-direction: column; gap: 1.2rem; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cf-g { display: flex; flex-direction: column; gap: 6px; }
.cf-g label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(193,125,60,.6); font-weight: 300; }
.cf-g input, .cf-g select, .cf-g textarea { padding: 12px 16px; font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 300; border: .5px solid rgba(193,125,60,.2); background: rgba(255,255,255,.03); color: var(--cream); outline: none; border-radius: 0; -webkit-appearance: none; transition: border-color .2s; }
.cf-g input:focus, .cf-g select:focus, .cf-g textarea:focus { border-color: var(--amber); }
.cf-g select option { background: var(--dark2); }
.cf-g textarea { resize: vertical; min-height: 120px; }
.cf-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }
.wa-btn { display: flex; align-items: center; gap: 10px; padding: 13px 26px; background: rgba(193,125,60,.1); border: .5px solid rgba(193,125,60,.3); color: var(--al); text-decoration: none; font-size: 12px; letter-spacing: .12em; font-weight: 400; transition: all .25s; }
.wa-btn:hover { background: var(--amber); color: var(--cream); border-color: var(--amber); }
.wa-btn i { font-size: 18px; }
.submit-btn { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; padding: 14px 36px; background: var(--amber); color: var(--cream); border: none; cursor: pointer; transition: background .2s; }
.submit-btn:hover { background: #A56530; }

/* ── FOOTER ── */
footer { background: var(--dark2); padding: 3rem 2rem; text-align: center; border-top: .5px solid rgba(193,125,60,.1); }
.f-logo-s { font-family: 'Pinyon Script', cursive; font-size: 38px; color: var(--al); display: block; line-height: 1; }
.f-logo-b { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 11px; letter-spacing: .28em; color: rgba(250,240,224,.5); text-transform: uppercase; }
.f-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; list-style: none; margin: 1.5rem 0; }
.f-links a { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,240,224,.25); text-decoration: none; transition: color .2s; font-weight: 300; }
.f-links a:hover { color: var(--al); }
.f-social { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.f-social a { color: rgba(250,240,224,.25); font-size: 22px; text-decoration: none; transition: color .2s; }
.f-social a:hover { color: var(--al); }
.f-copy { font-size: 11px; color: rgba(250,240,224,.16); letter-spacing: .1em; font-weight: 300; }

/* ── FLOATING WA ── */
.wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 400; width: 52px; height: 52px; background: var(--amber); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .3s; }
.wa-float i { font-size: 26px; color: var(--cream); }
.wa-float:hover { background: var(--al); transform: scale(1.08); }
.wa-float-label { position: absolute; right: 62px; background: rgba(14,9,5,.94); color: var(--cream); font-size: 11px; letter-spacing: .12em; padding: 6px 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s; border: .5px solid rgba(193,125,60,.3); }
.wa-float:hover .wa-float-label { opacity: 1; }

/* ── RESPONSIVE ── */
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-scroll,
.split-quote { grid-template-columns: 1fr; }
  .sq-photo { min-height: 50vw; }
  .sq-text { padding: 3.5rem 2rem; }
  
  
  
  .fullphoto-text { left: 2rem; bottom: 2rem; }
  .cf-row { grid-template-columns: 1fr; }
  .p-grid { gap: 1rem; background: transparent; }
  .gal-nav { right: 1.5rem; bottom: 1.5rem; }
  .bigscript-text span { font-size: clamp(60px,12vw,100px); }
}
  .hero-t2 { font-size: clamp(44px,12vw,66px); }
  .cf-footer { flex-direction: column; align-items: stretch; }
  .wa-btn, .submit-btn { width: 100%; justify-content: center; text-align: center; }
  .social-bar { gap: .6rem; }
  .wa-float { bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; }
  .vert-t1 { font-size: clamp(32px,8vw,52px); }
  .vert-t2 { font-size: clamp(44px,11vw,72px); }
  .bigscript-text span { font-size: clamp(48px,13vw,80px); }
}




/* ── PROGRESS BARS — created fully in JS, never in HTML ── */
.gal-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--amber);
  z-index: 4;
  width: 0%;
  pointer-events: none;
}
.vert-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--amber);
  z-index: 4;
  width: 0%;
  pointer-events: none;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger children inside revealed sections */
.reveal.visible .svc-card:nth-child(1) { transition-delay: .1s; }
.reveal.visible .svc-card:nth-child(2) { transition-delay: .22s; }
.reveal.visible .svc-card:nth-child(3) { transition-delay: .34s; }
.reveal.visible .p-card:nth-child(1)   { transition-delay: .08s; }
.reveal.visible .p-card:nth-child(2)   { transition-delay: .2s; }
.reveal.visible .p-card:nth-child(3)   { transition-delay: .32s; }

/* ── PROGRESS RAIL ── */
.progress-rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(193,125,60,.08);
  z-index: 500;
  pointer-events: none;
}
.progress-fill {
  position: absolute;
  top: 0; left: 0;
  width: 2px;
  height: 0%;
  background: linear-gradient(to bottom, transparent, rgba(193,125,60,.6), rgba(232,169,90,.8));
  transition: height .15s ease;
}

/* ensure progress bars are clipped inside their containers */
#galSlides { position: relative; width: 100%; height: 100%; }
#vertSlides { position: relative; width: 100%; }

/* ── MANIFESTO — invitación de boda ── */
.manifesto {
  background: #110A04;
  padding: 5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56vw;
  max-height: 100vh;
  position: relative;
}
.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(193,125,60,.05) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(193,125,60,.04) 0%, transparent 55%);
  pointer-events: none;
}
.manifesto-frame {
  position: relative;
  max-width: 960px;
  width: 100%;
  padding: 4rem 6rem;
  border: .5px solid rgba(193,125,60,.18);
}
/* corner ornaments */
.mf-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(193,125,60,.55);
  border-style: solid;
  border-width: 0;
}
.mf-tl { top: -1px;  left: -1px;  border-top-width: 1.5px; border-left-width: 1.5px; }
.mf-tr { top: -1px;  right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.mf-bl { bottom: -1px; left: -1px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.mf-br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* top & bottom decorative lines */
.mf-deco-top,
.mf-deco-bot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-bottom: 3rem;
}
.mf-deco-bot { margin-top: 3rem; margin-bottom: 0; }
.mf-deco-top::before, .mf-deco-top::after,
.mf-deco-bot::before, .mf-deco-bot::after {
  content: '';
  flex: 1;
  height: .5px;
  background: rgba(193,125,60,.25);
}
.mf-deco-top::before { content: '✦'; flex: 0; font-size: 10px; color: rgba(193,125,60,.4); }
.mf-deco-top::after  { content: ''; flex: 1; height: .5px; background: rgba(193,125,60,.25); }
.mf-deco-bot::before { content: ''; flex: 1; height: .5px; background: rgba(193,125,60,.25); }
.mf-deco-bot::after  { content: '✦'; flex: 0; font-size: 10px; color: rgba(193,125,60,.4); }

.manifesto-inner { text-align: center; }
.mf-eyebrow {
  font-size: 10px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2rem;
  font-weight: 300;
}
.mf-title { margin-bottom: .5rem; }
.mf-t1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(28px,4vw,48px);
  color: var(--cream);
  line-height: 1.0;
  display: block;
  letter-spacing: -.01em;
}
.mf-t2 {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(40px,6vw,72px);
  color: var(--al);
  line-height: 1.05;
  display: block;
  margin-top: .1em;
}
.mf-rule {
  width: 36px;
  height: 1px;
  background: rgba(193,125,60,.4);
  margin: 2rem auto;
}
.mf-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.95;
  color: rgba(250,240,224,.5);
  max-width: 500px;
  margin: 0 auto 1.2rem;
  letter-spacing: .02em;
}
.mf-signature {
  font-family: 'Pinyon Script', cursive;
  font-size: 52px;
  color: rgba(193,125,60,.35);
  line-height: 1;
  margin-top: 1rem;
}

  .mf-t1 { font-size: clamp(24px,7vw,36px); }
  .mf-t2 { font-size: clamp(34px,9vw,52px); }
}

/* ── TICKER BAND ── */
.ticker-sec {
  background: #0E0905;
  border-top: .5px solid rgba(193,125,60,.15);
  border-bottom: .5px solid rgba(193,125,60,.15);
  overflow: hidden;
  padding: 1.6rem 0;
}
.ticker-wrap { overflow: hidden; }
.ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: tickerMove 22s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 2rem;
}
.tk-script {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(24px, 3vw, 36px);
  color: rgba(232,169,90,.65);
  line-height: 1;
}
.tk-serif {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250,240,224,.25);
}
.tk-dot {
  width: 5px;
  height: 5px;
  background: rgba(193,125,60,.35);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── FILMS SECTION ── */
.films-sec {
  background: var(--dark);
}
.films-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.films-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.films-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,9,5,.7) 0%, rgba(14,9,5,.2) 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .4s;
  z-index: 2;
}
.films-overlay.hidden { opacity: 0; pointer-events: none; }
.films-play-btn {
  width: 72px;
  height: 72px;
  border: 1.5px solid rgba(250,240,224,.55);
  background: rgba(14,9,5,.4);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
  backdrop-filter: blur(4px);
  margin-bottom: 2rem;
}
.films-play-btn i { font-size: 28px; }
.films-play-btn:hover {
  background: var(--amber);
  border-color: var(--amber);
  transform: scale(1.08);
}
.films-overlay-text { text-align: center; }
.films-eyebrow {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--al);
  margin-bottom: .8rem;
  font-weight: 300;
}
.films-t1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(24px, 3.5vw, 44px);
  color: var(--cream);
  display: block;
  line-height: 1.0;
}
.films-t2 {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(34px, 5vw, 64px);
  color: var(--al);
  display: block;
  line-height: 1.0;
}

/* custom video controls */
.films-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(14,9,5,.85) 0%, transparent 100%);
  z-index: 3;
  opacity: 0;
  transition: opacity .3s;
}
.films-video-wrap:hover .films-controls { opacity: 1; }
.films-progress-wrap {
  width: 100%;
  height: 3px;
  background: rgba(250,240,224,.2);
  cursor: pointer;
  margin-bottom: .8rem;
  position: relative;
}
.films-progress-fill {
  height: 100%;
  background: var(--amber);
  width: 0%;
  transition: width .1s linear;
  pointer-events: none;
}
.films-ctrl-row {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.films-ctrl-btn {
  background: none;
  border: none;
  color: rgba(250,240,224,.7);
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  transition: color .2s;
  display: flex;
  align-items: center;
}
.films-ctrl-btn:hover { color: var(--al); }
.films-time {
  font-size: 12px;
  color: rgba(250,240,224,.5);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  letter-spacing: .06em;
  flex: 1;
}
.films-footer {
  padding: 3rem 2rem;
  text-align: center;
  border-top: .5px solid rgba(193,125,60,.12);
}
.films-footer-text {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250,240,224,.4);
  letter-spacing: .08em;
  margin-bottom: 1.2rem;
}
.films-yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: .5px solid rgba(193,125,60,.35);
  color: var(--al);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  transition: all .25s;
}
.films-yt-btn i { font-size: 20px; }
.films-yt-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--cream); }
.films-coming {
  font-size: 11px;
  color: rgba(250,240,224,.2);
  letter-spacing: .14em;
  margin-top: .8rem;
  font-style: italic;
}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (max 900px)
   ═══════════════════════════════════════ */
@media (max-width: 900px) {

  /* NAV */
  nav { padding: 1rem 1.5rem; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-scroll { display: none; }

  /* HERO */
  .hero-t1 { font-size: clamp(40px,8vw,64px); }
  .hero-t2 { font-size: clamp(50px,10vw,80px); }

  /* GALLERY */
  .gal-nav { right: 1.2rem; bottom: 1.2rem; }
  .gal-cap-t1 { font-size: clamp(22px,4vw,36px); }
  .gal-cap-t2 { font-size: clamp(30px,5.5vw,52px); }

  /* SPLIT QUOTE */
  .split-quote { grid-template-columns: 1fr; }
  .sq-photo { min-height: 55vw; }
  .sq-text { padding: 3rem 2rem; }
  .sq-quote { font-size: clamp(18px,3.5vw,28px); }

  /* BIGSCRIPT */
  .bigscript-text span { font-size: clamp(52px,11vw,90px); }

  /* ABOUT */
  
  
  

  /* SERVICES */
  .svc-grid { grid-template-columns: 1fr 1fr; }

  /* PRICING */
  .p-grid { gap: 1rem; background: transparent; }

  /* CONTACT */
  .cf-row { grid-template-columns: 1fr; }

  /* FILMS */
  .films-footer { padding: 2rem 1.5rem; }

  /* TICKER */
  .tk-script { font-size: clamp(20px,4vw,28px); }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (max 600px)
   ═══════════════════════════════════════ */
@media (max-width: 600px) {
  /* split-quote corners stay inside on mobile */
  .sq-corner.tl { top: 1rem; left: 1rem; }
  .sq-corner.tr { top: 1rem; right: 1rem; }
  .sq-corner.bl { bottom: 1rem; left: 1rem; }
  .sq-corner.br { bottom: 1rem; right: 1rem; }
  .sq-text { padding: 2.5rem 1.5rem; }
  .sq-inner { max-width: 100%; }
  /* about corners on mobile */
  
  
  
  

  /* HERO */
  .hero-t1 { font-size: clamp(32px,9vw,48px); }
  .hero-t2 { font-size: clamp(40px,11vw,60px); }
  .hero-eyebrow { font-size: 11px; gap: .6rem; }
  .hero-eyebrow-line { flex: 0 0 20px; }
  .hero-sub { font-size: 11px; letter-spacing: .18em; }
  .hero-btn { padding: 12px 28px; font-size: 10px; }
  .hero-dots { bottom: 1.5rem; }

  /* GALLERY */
  .gallery-sec { height: 70vh; min-height: 300px; }
  .gal-nav { right: 1rem; bottom: 1rem; gap: 6px; }
  .gal-arrow { width: 34px; height: 34px; font-size: 15px; }
  .gal-caption { padding: 2.5rem 1.5rem; }
  .gal-cap-t1 { font-size: clamp(18px,5vw,28px); }
  .gal-cap-t2 { font-size: clamp(26px,7vw,42px); }

  /* SPLIT QUOTE */
  .sq-photo { min-height: 50vw; }
  .sq-quote { font-size: clamp(16px,4.5vw,24px); }
  .sq-open { font-size: 44px; }

  /* BIGSCRIPT */
  .bigscript { height: 50vh; min-height: 220px; }
  .bigscript-text span { font-size: clamp(38px,12vw,70px); }
  .bigscript-text { padding: 0 1rem 1rem; }

  /* TICKER */
  .ticker-sec { padding: 1.2rem 0; }
  .tk-script { font-size: clamp(18px,5vw,24px); }
  .ticker-item { gap: 1rem; padding: 0 1.2rem; }
  .tk-dot { width: 4px; height: 4px; }

  /* FILMS VIDEO */
  .films-video-wrap { aspect-ratio: 16/9; }
  .films-play-btn { width: 56px; height: 56px; }
  .films-play-btn i { font-size: 22px; }
  .films-t1 { font-size: clamp(18px,5vw,28px); }
  .films-t2 { font-size: clamp(26px,7vw,42px); }
  .films-footer { padding: 1.8rem 1.2rem; }
  .films-footer-text { font-size: 13px; }
  .films-yt-btn { padding: 10px 20px; font-size: 11px; }
  .films-time { font-size: 11px; }

  /* ABOUT */
  
  .a-t1 { font-size: clamp(24px,7vw,36px); }
  .a-t2 { font-size: clamp(34px,9vw,52px); }
  
  
  .social-bar { gap: .5rem; flex-wrap: wrap; }
  .soc-link { font-size: 10px; padding: 6px 10px; }

  /* SERVICES */
  .svc-grid { grid-template-columns: 1fr; }
  .services-sec { padding: 4rem 1.5rem; }

  /* PRICING */
  .pricing-sec { padding: 4rem 1.2rem; }
  .p-card { padding: 2rem 1.5rem; }
  .p-price { font-size: 32px; }

  /* CONTACT */
  .contact-sec { padding: 4rem 1.2rem; }
  .contact-in { max-width: 100%; }
  .cf-footer { flex-direction: column; align-items: stretch; gap: .8rem; }
  .wa-btn, .submit-btn { width: 100%; justify-content: center; text-align: center; }
  .wa-btn { padding: 13px 20px; }

  /* FLOATING WA */
  .wa-float { bottom: 1.2rem; right: 1.2rem; width: 46px; height: 46px; }
  .wa-float i { font-size: 22px; }
  .wa-float-label { display: none; }

  /* FOOTER */
  footer { padding: 2.5rem 1.2rem; }
  .f-links { gap: 1.2rem; }
  .f-social { gap: 1rem; }

  /* PROGRESS RAIL */
  .progress-rail { display: none; }

  /* MANIFESTO (legacy if still present) */
  .manifesto-frame { padding: 2.5rem 1.5rem; }

  /* SECTION TITLES general */
  .s-t1 { font-size: clamp(26px,7vw,38px); }
  .s-t2 { font-size: clamp(36px,9vw,52px); }
  .s-eyebrow { font-size: 10px; letter-spacing: .26em; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 380px)
   ═══════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-t1 { font-size: 28px; }
  .hero-t2 { font-size: 36px; }
  .gal-cap-t1 { font-size: 16px; }
  .gal-cap-t2 { font-size: 22px; }
  .films-t1 { font-size: 16px; }
  .films-t2 { font-size: 22px; }
  .logo-top { font-size: 24px; }
  .logo-bot { font-size: 9px; letter-spacing: .18em; }
  .tk-script { font-size: 16px; }
}







/* ── ABOUT — foto lateral con disolución ── */
.about-sec {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark2);
}

/* foto izquierda */
.about-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 52%;
  height: 100%;
  z-index: 0;
}
.about-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: sepia(12%) saturate(1.1) brightness(.8);
}

/* disolución de derecha de la foto hacia el fondo oscuro */
.about-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 75%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 30%,
    rgba(26,15,6,.6) 55%,
    rgba(26,15,6,.95) 72%,
    var(--dark2) 100%
  );
}

/* oscurecer un poco la foto */
.about-bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,9,5,.1) 0%, rgba(14,9,5,.3) 100%);
}

/* texto derecha */
.about-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 5rem 5rem 5rem 0;
}
.about-inner {
  max-width: 440px;
  margin-right: 4rem;
}
.a-eyebrow {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .8rem;
  font-weight: 300;
}
.a-t1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(28px,3.5vw,44px);
  color: var(--cream);
  line-height: .95;
  display: block;
}
.a-t2 {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(40px,5vw,62px);
  color: var(--al);
  line-height: .95;
  display: block;
}
.a-div {
  width: 36px;
  height: 1.5px;
  background: var(--amber);
  margin: 1.5rem 0 2rem;
}
.a-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(250,240,224,.58);
  margin-bottom: 1.2rem;
}
.social-bar {
  display: flex;
  gap: .8rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.soc-link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(250,240,224,.42);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 300;
  transition: color .2s;
  padding: 7px 12px;
  border: .5px solid rgba(250,240,224,.1);
}
.soc-link i { font-size: 17px; }
.soc-link:hover { color: var(--al); border-color: rgba(193,125,60,.35); }

/* ── ABOUT RESPONSIVE ── */
@media (max-width: 900px) {
  .about-sec { min-height: 85vh; }
  .about-bg-img { width: 60%; }
  .about-overlay { width: 85%; }
  .about-content { padding: 3rem 2.5rem 3rem 0; }
  .about-inner { margin-right: 1.5rem; max-width: 360px; }
}

@media (max-width: 600px) {
  /* en móvil: foto de fondo completa, texto abajo */
  .about-sec { min-height: 100vh; align-items: flex-end; }
  .about-bg-img { width: 100%; }
  .about-overlay {
    width: 100%;
    background: linear-gradient(
      to top,
      rgba(14,9,5,.97) 0%,
      rgba(14,9,5,.72) 45%,
      rgba(14,9,5,.15) 100%
    );
  }
  .about-content {
    padding: 2.5rem 1.5rem;
    justify-content: flex-start;
  }
  .about-inner { max-width: 100%; margin-right: 0; }
  .a-text { font-size: 14px; }
  .social-bar { gap: .5rem; }
  .soc-link { font-size: 10px; padding: 6px 10px; }
}