/*
Theme Name: Into The Hikes
Theme URI: https://intothehikes.com
Description: Custom theme for Into The Hikes
Author: Into The Hikes
Version: 1.1
*/

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

:root {
  --bg:        #060d06;
  --bg2:       #091509;
  --bg3:       #0b1b0b;
  --surface:   #0e200e;
  --accent:    #E05A1C;
  --accent2:   #4a8c2a;
  --text:      #e6ede0;
  --dim:       rgba(230,237,224,0.45);
  --dim2:      rgba(230,237,224,0.18);
  --border:    rgba(255,255,255,0.06);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── NAVBAR ── */
.ith-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.70) 0%, transparent 100%);
  transition: background 0.3s;
}
.ith-nav.scrolled {
  background: rgba(6,13,6,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Logo circular — recorta el fondo blanco del PNG */
.ith-nav-logo-wrap {
  width: 52px; height: 52px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.10);
}
.ith-nav-logo { width: 100%; height: 100%; object-fit: cover; display: block; }

.ith-nav-links { display: flex; gap: 36px; list-style: none; }
.ith-nav-links a {
  color: rgba(230,237,224,0.75); text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  transition: color 0.2s;
}
.ith-nav-links a:hover { color: var(--accent); }

/* ── HERO — 3 VIDEO PANELS ── */
.ith-hero {
  height: 100vh; width: 100%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Panels container */
.ith-hero-panels {
  position: absolute; inset: 0;
  display: flex; gap: 3px;
}
.ith-hero-panel {
  height: 100%; position: relative; overflow: hidden; flex-shrink: 0;
}
.ith-hero-panel-1 { width: 55%; background: linear-gradient(160deg, #0a2010 0%, #0d2a14 50%, #061508 100%); }
.ith-hero-panel-2 { width: 20%; background: linear-gradient(160deg, #06141a 0%, #081c20 100%); }
.ith-hero-panel-3 { width: 25%; background: linear-gradient(160deg, #1a1208 0%, #0e0c06 100%); }

/* Placeholder text (se esconde cuando hay video) */
.ith-panel-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.ith-panel-placeholder span {
  font-size: 9px; letter-spacing: 3px; color: rgba(255,255,255,0.08);
  text-transform: uppercase;
}

.ith-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ith-panel-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.42);
}

/* Gradient central para legibilidad del texto */
.ith-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 55%, rgba(0,0,0,0.58) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 70%, rgba(6,13,6,0.7) 100%);
  pointer-events: none;
}

/* Contenido hero */
.ith-hero-content {
  position: relative; z-index: 2; text-align: center;
}
.ith-hero h1 {
  font-size: clamp(52px, 8.5vw, 108px);
  font-weight: 900; line-height: 0.88; letter-spacing: -4px;
  text-transform: uppercase; margin-bottom: 20px;
}
.ith-hero h1 .accent { color: var(--accent); }

.ith-hero-tagline {
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 300; letter-spacing: 8px;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 12px;
}
.ith-hero-sub {
  font-size: 10px; letter-spacing: 5px; color: var(--dim2);
  text-transform: uppercase; margin-bottom: 48px;
}

.ith-btn {
  display: inline-block; border: 1px solid rgba(255,255,255,0.25);
  color: var(--text); text-decoration: none; font-size: 10px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase; padding: 16px 44px;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.ith-btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(224,90,28,0.18); transform: scaleX(0);
  transform-origin: left; transition: transform 0.3s;
}
.ith-btn:hover::before { transform: scaleX(1); }
.ith-btn:hover { border-color: var(--accent); }

.ith-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 3px; color: var(--dim2);
  text-transform: uppercase; z-index: 2; animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,100%{ transform: translateX(-50%) translateY(0) }
  50%{ transform: translateX(-50%) translateY(6px) }
}

/* ── 3 BLOCKS ── */
.ith-blocks { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ith-block {
  position: relative; overflow: hidden; min-height: 520px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px; cursor: pointer; text-decoration: none; color: var(--text);
}
.ith-block-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 0.7s ease;
}
.ith-block-1 .ith-block-bg { background: linear-gradient(155deg, #081a08 0%, #0d240d 50%, #071208 100%); }
.ith-block-2 .ith-block-bg { background: linear-gradient(155deg, #071420 0%, #091c28 50%, #061018 100%); }
.ith-block-3 .ith-block-bg { background: linear-gradient(155deg, #1a0e06 0%, #1f1208 50%, #120a04 100%); }
.ith-block::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  transition: opacity 0.4s;
}
.ith-block:hover .ith-block-bg { transform: scale(1.07); }
.ith-block:hover::after { opacity: 0.65; }
.ith-block-content { position: relative; z-index: 2; }
.ith-block-tag {
  display: block; font-size: 9px; letter-spacing: 5px; color: var(--accent);
  text-transform: uppercase; font-weight: 700; margin-bottom: 12px;
}
.ith-block h2 {
  font-size: clamp(26px, 2.5vw, 40px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -1px; line-height: 1; margin-bottom: 10px;
}
.ith-block p { font-size: 13px; color: var(--dim); line-height: 1.6; margin-bottom: 22px; }
.ith-block-arrow {
  font-size: 10px; letter-spacing: 3px; font-weight: 700;
  text-transform: uppercase; color: var(--dim2);
  border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 3px;
  display: inline-block; transition: all 0.2s;
}
.ith-block:hover .ith-block-arrow { color: var(--accent); border-color: var(--accent); }
.ith-block-num {
  position: absolute; top: 32px; right: 32px; z-index: 2;
  font-size: 80px; font-weight: 900; color: rgba(255,255,255,0.04);
  line-height: 1; letter-spacing: -4px;
}

/* ── QUOTE ── */
.ith-quote {
  padding: 110px 48px; text-align: center;
  background: linear-gradient(160deg, #091509 0%, #0b1c0b 50%, #060d06 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.ith-quote::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(74,140,42,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.ith-quote blockquote {
  font-size: clamp(30px, 4.5vw, 64px); font-weight: 900;
  line-height: 1.05; letter-spacing: -2px; text-transform: uppercase;
  max-width: 1000px; margin: 0 auto 28px; position: relative;
}
.ith-quote blockquote em { color: var(--accent); font-style: normal; }
.ith-quote-attr {
  font-size: 10px; letter-spacing: 5px; color: var(--dim2);
  text-transform: uppercase; position: relative;
}

/* ── LATEST EXPERIENCES ── */
.ith-latest { background: var(--bg2); padding: 80px 48px 100px; }
.ith-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px;
}
.ith-section-label {
  font-size: 10px; letter-spacing: 5px; color: var(--dim2);
  text-transform: uppercase; font-weight: 600;
}
.ith-section-link {
  font-size: 10px; letter-spacing: 3px; color: var(--accent);
  text-decoration: none; text-transform: uppercase; font-weight: 700;
  transition: opacity 0.2s;
}
.ith-section-link:hover { opacity: 0.7; }
.ith-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ith-card {
  position: relative; overflow: hidden;
  aspect-ratio: 2/3; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; text-decoration: none; color: var(--text);
}
.ith-card-placeholder {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
}
.ith-card-1 .ith-card-placeholder { background: linear-gradient(155deg, #0a1f0a, #071508); }
.ith-card-2 .ith-card-placeholder { background: linear-gradient(155deg, #081820, #060f18); }
.ith-card-3 .ith-card-placeholder { background: linear-gradient(155deg, #1a1008, #100a06); }
.ith-card-placeholder span {
  font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,0.08);
  text-transform: uppercase;
}
.ith-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 55%);
}
.ith-card-content { position: relative; z-index: 2; }
.ith-card-tag {
  display: block; font-size: 9px; letter-spacing: 4px; color: var(--accent);
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
}
.ith-card h4 { font-size: 22px; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.ith-card p { font-size: 12px; color: var(--dim); line-height: 1.5; }

/* ── SHOP BANNER ── */
.ith-shop-banner {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 400px;
}
.ith-shop-panel {
  position: relative; overflow: hidden; padding: 60px 48px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: var(--text);
}
.ith-shop-panel-bg { position: absolute; inset: 0; z-index: 0; transition: transform 0.6s; }
.ith-shop-panel:hover .ith-shop-panel-bg { transform: scale(1.05); }
.ith-shop-panel-1 .ith-shop-panel-bg { background: linear-gradient(135deg, #071f07, #0a2a0a); }
.ith-shop-panel-2 .ith-shop-panel-bg { background: linear-gradient(135deg, #1a0e06, #200c04); }
.ith-shop-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
}
.ith-shop-panel-content { position: relative; z-index: 2; }
.ith-shop-panel-tag {
  display: block; font-size: 9px; letter-spacing: 5px; color: var(--accent);
  text-transform: uppercase; font-weight: 700; margin-bottom: 14px;
}
.ith-shop-panel h3 {
  font-size: clamp(28px, 3vw, 48px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -1px; margin-bottom: 12px;
}
.ith-shop-panel p { font-size: 13px; color: var(--dim); margin-bottom: 24px; }

/* ── FOOTER ── */
.ith-footer {
  background: #040a04; padding: 64px 48px; text-align: center;
  border-top: 1px solid var(--border);
}
.ith-footer-logo-wrap {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 28px; opacity: 0.65;
  border: 1px solid rgba(255,255,255,0.08);
}
.ith-footer-logo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ith-footer-links { display: flex; gap: 32px; justify-content: center; margin-bottom: 32px; }
.ith-footer-links a {
  font-size: 10px; letter-spacing: 3px; color: var(--dim2);
  text-decoration: none; text-transform: uppercase; font-weight: 600;
  transition: color 0.2s;
}
.ith-footer-links a:hover { color: var(--accent); }
.ith-footer-copy {
  font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.12);
  text-transform: uppercase;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ith-blocks, .ith-shop-banner { grid-template-columns: 1fr; }
  .ith-cards { grid-template-columns: 1fr; }
  .ith-nav { padding: 16px 20px; }
  .ith-nav-links { display: none; }
  .ith-hero h1 { letter-spacing: -2px; }
  .ith-latest, .ith-quote { padding-left: 20px; padding-right: 20px; }
  .ith-hero-panel-1 { width: 60%; }
  .ith-hero-panel-2 { width: 20%; }
  .ith-hero-panel-3 { width: 20%; }
}