/* ========================================
   Reformas Roberto Salazar — styles.css
   ======================================== */

:root {
  --charcoal: #2B2D31;
  --charcoal-2: #1D1E21;
  --amber: #E8792E;
  --amber-dark: #C6631E;
  --cream: #FAFAF9;
  --gray-warm: #6B6D72;
  --line: #E7E5E2;
  --white: #FFFFFF;
  --shadow: 0 20px 50px rgba(43,45,49,0.12);
  --radius: 10px;
  --ff-head: 'Poppins', sans-serif;
  --ff-body: 'Inter', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--ff-head); font-weight:700; color: var(--charcoal); line-height:1.12; }

/* ---------- progress bar ---------- */
.progress-bar {
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: var(--amber); z-index: 999; transition: width .1s linear;
}

/* ---------- reveal animation (defensive: always visible by default) ---------- */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.js-hidden {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.js-visible {
  opacity: 1;
  transform: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items:center; justify-content:center;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--ff-body); font-weight:600; font-size:15px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--amber); color: var(--white); }
.btn-primary:hover { background: var(--amber-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(232,121,46,0.35); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,0.7); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,0.4); color: var(--white); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index: 200;
  background: rgba(250,250,249,0);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 20px 0;
}
.site-header.scrolled {
  background: rgba(250,250,249,0.96);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 12px 0;
  backdrop-filter: blur(8px);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-icon { width:38px; height:38px; }
.brand-text { font-family: var(--ff-head); font-weight:600; font-size:11px; letter-spacing:1px; color: var(--charcoal); line-height:1.3; }
.brand-text strong { font-weight:800; }
.site-header:not(.scrolled) .brand-text { color: var(--white); }
.site-header:not(.scrolled) .brand-icon { filter: brightness(0) invert(1); }

.main-nav { display:flex; gap:32px; }
.main-nav a { font-size:14.5px; font-weight:500; color: var(--charcoal); position:relative; padding: 4px 0; }
.site-header:not(.scrolled) .main-nav a { color: var(--white); }
.main-nav a::after {
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--amber);
  transition: width .25s ease;
}
.main-nav a:hover::after { width:100%; }

.header-cta { display:flex; align-items:center; gap:20px; }
.phone-link { font-weight:600; font-size:14.5px; color: var(--charcoal); }
.site-header:not(.scrolled) .phone-link { color: var(--white); }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { width:24px; height:2px; background: var(--charcoal); transition: background .3s; }
.site-header:not(.scrolled) .nav-toggle span { background: var(--white); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; display:flex; align-items:center;
  overflow:hidden;
}
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(29,30,33,0.55) 0%, rgba(29,30,33,0.68) 55%, rgba(29,30,33,0.85) 100%);
}
.hero-content { position:relative; z-index:2; padding-top: 110px; padding-bottom: 90px; }
.kicker {
  font-family: var(--ff-head); font-weight:600; font-size:13px; letter-spacing:3px;
  color: var(--amber); text-transform:uppercase; margin-bottom:20px;
}
.hero h1 { font-size: clamp(40px, 6vw, 74px); color: var(--white); margin-bottom:26px; }
.hero-sub { font-size:18px; color: rgba(255,255,255,0.85); max-width:560px; margin-bottom:40px; }
.hero-actions { display:flex; gap:18px; flex-wrap:wrap; }

.scroll-cue {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue span {
  width:1px; height:40px; background: rgba(255,255,255,0.5);
  position:relative; overflow:hidden;
}
.scroll-cue span::after {
  content:''; position:absolute; top:-40px; left:0; width:100%; height:40px; background: var(--amber);
  animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue { 0%{top:-40px;} 60%{top:40px;} 100%{top:40px;} }
.scroll-cue p { font-size:11px; letter-spacing:2px; color: rgba(255,255,255,0.65); text-transform:uppercase; }

/* ---------- intro strip ---------- */
.intro-strip { padding: 90px 0; border-bottom: 1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:60px; align-items:center; }
.intro-lead { font-family: var(--ff-head); font-size: clamp(22px,2.6vw,30px); font-weight:500; color: var(--charcoal); line-height:1.4; }
.intro-stats { display:flex; flex-direction:column; gap:26px; border-left: 2px solid var(--amber); padding-left:28px; }
.stat { display:flex; align-items:flex-start; gap:12px; }
.stat-icon {
  flex: none; width:32px; height:32px; border-radius:50%; margin-top:2px;
  background: var(--amber); color: var(--white);
  display:flex; align-items:center; justify-content:center;
}
.stat-icon svg { width:16px; height:16px; }
.stat-text { display:flex; flex-direction:column; }
.stat-num { display:block; font-family: var(--ff-head); font-weight:800; font-size:28px; color: var(--charcoal); }
.stat-label { display:block; font-size:14px; color: var(--gray-warm); margin-top:4px; }

/* ---------- sections generic ---------- */
section { padding: 110px 0; }
.section-kicker {
  font-family: var(--ff-head); font-weight:600; font-size:13px; letter-spacing:3px;
  color: var(--amber); text-transform:uppercase; margin-bottom:14px;
}
.section-title { font-size: clamp(30px,4vw,44px); margin-bottom:18px; }
.section-lead { font-size:16.5px; color: var(--gray-warm); max-width:640px; margin-bottom:50px; }

/* ---------- services ---------- */
.services { background: var(--white); }
.services-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; margin-top:50px; }
.service-card {
  background: var(--cream); border-radius: var(--radius); padding: 40px 32px;
  border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.service-icon {
  width:56px; height:56px; border-radius:50%; background: var(--charcoal); color: var(--amber);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
}
.service-icon svg { width:26px; height:26px; }
.service-card h3 { font-size:19px; margin-bottom:10px; }
.service-card p { font-size:14.5px; color: var(--gray-warm); }
@media (min-width: 981px) {
  .service-card:last-child { grid-column: 2 / 3; }
}

/* ---------- transformation banner ---------- */
.transform-banner {
  position: relative; min-height: 62vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.transform-media { position:absolute; inset:0; background: var(--charcoal-2); }
.transform-media img { width:100%; height:100%; object-fit:cover; }
.transform-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(29,30,33,0.5) 0%, rgba(29,30,33,0.78) 100%);
}
.transform-content { position:relative; z-index:2; max-width:640px; margin:0 auto; }
.transform-content .section-kicker { color: var(--amber); }
.transform-content .section-title { color: var(--white); margin-bottom:16px; }
.transform-content p { color: rgba(255,255,255,0.85); font-size:16.5px; }

/* ---------- work / gallery ---------- */
.work { background: var(--cream); }
.work-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.work-item {
  position:relative; aspect-ratio: 1 / 1; overflow:hidden; border-radius: 8px;
  border:none; padding:0; cursor:pointer; background: var(--line);
}
.work-item img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.work-item:hover img { transform: scale(1.08); }
.work-item::after {
  content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:32px; color:#fff; background: rgba(43,45,49,0); opacity:0; transition: all .3s ease;
}
.work-item:hover::after { background: rgba(43,45,49,0.35); opacity:1; }

/* ---------- process ---------- */
.process { background: var(--white); }
.process-layout { display:grid; grid-template-columns: 1.6fr 1fr; gap:50px; align-items:start; margin-top:50px; }
.process-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:32px; }
.process-num { font-family: var(--ff-head); font-weight:800; font-size:34px; color: var(--line); display:block; margin-bottom:16px; }
.process-step h3 { font-size:18px; margin-bottom:10px; }
.process-step p { font-size:14.5px; color: var(--gray-warm); }
.process-media { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--line); aspect-ratio: 4/5; }
.process-media img, .process-media video { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- coverage ---------- */
.coverage { background: var(--charcoal); padding: 100px 0; }
.coverage-inner { display:grid; grid-template-columns: 1fr 1.5fr 1fr; gap:44px; align-items:center; }
.coverage-media { border-radius: var(--radius); overflow:hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.35); background: rgba(255,255,255,0.05); aspect-ratio: 3/4; }
.coverage-media img { width:100%; height:100%; object-fit:cover; display:block; }
.coverage-text { max-width:640px; text-align:center; margin:0 auto; }
.coverage-text .section-kicker { color: var(--amber); }
.coverage-text .section-title { color: var(--white); }
.coverage-text p { color: rgba(255,255,255,0.75); font-size:16.5px; margin-bottom:36px; }

/* ---------- footer ---------- */
.site-footer { position:relative; color: var(--white); overflow:hidden; }
.footer-media { position:absolute; inset:0; }
.footer-media img { width:100%; height:100%; object-fit:cover; }
.footer-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(29,30,33,0.88) 0%, rgba(20,21,23,0.96) 100%); }
.footer-content { position:relative; z-index:2; padding: 110px 0 40px; }
.footer-main { text-align:center; max-width:600px; margin: 0 auto 80px; }
.footer-main h2 { color: var(--white); font-size: clamp(28px,3.6vw,40px); margin-bottom:16px; }
.footer-main p { color: rgba(255,255,255,0.75); font-size:16px; margin-bottom:34px; }
.footer-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-logo { width: 220px; margin-bottom:16px; }
.footer-col p { color: rgba(255,255,255,0.65); font-size:14px; }
.footer-col-title { font-family: var(--ff-head); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color: var(--amber); margin-bottom:14px; }
.footer-col a { display:block; color: rgba(255,255,255,0.8); font-size:14.5px; margin-bottom:10px; transition: color .2s; }
.footer-col a:hover { color: var(--amber); }
.social-link { display:flex !important; align-items:center; gap:10px; }
.social-icon {
  flex:none; width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.social-icon svg { width:15px; height:15px; }
.social-link:hover .social-icon { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.footer-bottom { padding-top:26px; text-align:center; }
.footer-bottom p { font-size:13px; color: rgba(255,255,255,0.5); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset:0; z-index: 999; background: rgba(20,21,23,0.94);
  display:none; align-items:center; justify-content:center; padding: 40px;
}
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:86vh; border-radius:6px; object-fit:contain; }
.lightbox-close {
  position:absolute; top:26px; right:32px; background:none; border:none; color:#fff;
  font-size:38px; line-height:1; cursor:pointer; font-weight:300;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .main-nav, .header-cta { display:none; }
  .nav-toggle { display:flex; }
  .intro-grid { grid-template-columns: 1fr; gap:36px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:last-child { grid-column: 1 / 3; max-width: 380px; margin: 0 auto; }
  .process-layout { grid-template-columns: 1fr; gap:36px; }
  .process-media { order:-1; aspect-ratio: 16/9; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage-inner { grid-template-columns: 1fr; }
  .coverage-media { display:none; }
  .footer-grid { grid-template-columns: 1fr; gap:32px; }
  .footer-logo { margin: 0 auto 16px; }
  .footer-col { text-align:center; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  section { padding: 76px 0; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap:28px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap:10px; }
}

/* mobile nav drawer */
.main-nav.mobile-open {
  display:flex; flex-direction:column; position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
  background: var(--charcoal); padding: 100px 36px; gap:28px; z-index:150;
  box-shadow: -10px 0 40px rgba(0,0,0,0.3);
}
.main-nav.mobile-open a { color: var(--white); font-size:18px; }