/* ---------------------------------------------------
   Custom additions for Andres Inyelco personal portfolio
   Built on the Apolo theme's CSS (style.css, untouched).
   The interaction layer (fullPage.js / owl-carousel / arcticmodal)
   was dropped in favor of native CSS scroll-snap + small vanilla JS,
   since the bundled jQuery plugin stack threw runtime errors in
   testing. Everything below is layout/plumbing plus a typography
   pass; the theme's component structure stays intact.
--------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

main.apo-snap-container {
  display: block;
}

/* The theme normally makes the header sticky via a JS plugin
   (wt.jquery.nav) that was dropped along with the rest of the
   jQuery stack. Pin it with plain CSS instead. */
.apo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* The header nav is always white text (it sits transparent over the
     hero photo). Fauna/Colabora now have a light background, so give the
     header a permanent soft dark scrim to keep that white text legible
     everywhere, not just over photos. */
  background: rgba(10, 12, 14, 0.6);
}

.apo-text-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Typography: Bebas Neue for display titles ----------
   Swaps the theme's default Abril Fatface (serif) for a modern,
   condensed sans that matches Andres's more editorial, subtle style.
--------------------------------------------------------- */

.apo-photo-stream .fp-section .apo-section-title {
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 0.98;
}

.apo-photo-stream .fp-section .apo-section-title:not(:last-child) {
  margin-bottom: 18px;
}

/* Sobre mi: a full-sentence quote reads badly in a condensed display
   face at that size, keep it in the body sans instead, but weighted and
   sized to clearly outrank the eyebrow label and the facts line below it
   (on small screens all three were reading as the same visual weight). */
.apo-photo-stream .fp-section .apo-section-title.apo-section-title-small {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.4;
  max-width: 780px;
}

/* Fauna section head: same face, smaller and lighter than the hero */
.apo-photo-stream .fp-section .apo-section-title.apo-fp-head-title {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 1px;
}

/* Fauna grid card titles */
.apo-striped-photo-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 1.05;
}

.apo-striped-photo-title:not(:last-child) {
  margin-bottom: 14px;
}

/* ---------- Scroll-snap page sections (replaces fullPage.js) ---------- */

.fp-section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 70px 70px;
  box-sizing: border-box;
}

.fp-section .apo-section.apo-fp-layer {
  text-align: left;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.apo-fp-layer-wide {
  max-width: 880px;
}

.apo-fp-eyebrow {
  margin-bottom: 18px !important;
}

/* Plain subtitle line (About section facts) - explicitly NOT a button:
   no border, no background, just quiet supporting text. */
.apo-fp-subline {
  margin-top: 30px;
  font-family: 'Muli', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.62);
}

#inicio .apo-scroll-down-icon {
  display: block;
}

/* ---------- Sections with no background photo (Fauna grid host, Colabora)
   Andres asked to drop the heavy black slab here: a soft warm neutral
   reads calmer/more elegant, and separates these two "flat" sections
   visually from the photo-driven ones. ---------- */

.fp-section.apo-fp-no-bg {
  background-color: #F4F1EA;
  flex-direction: column;
  justify-content: center;
}

.fp-section.apo-fp-no-bg::after {
  content: none;
}

.fp-section.apo-fp-no-bg .apo-section.apo-fp-layer,
.fp-section.apo-fp-no-bg .apo-fp-section-head {
  text-align: center;
}

/* Only the Fauna head badge should be centered (its section is centered).
   Colabora is apo-fp-no-bg too but is left-aligned, and this ul is a flex
   row (justify-content, not text-align) so it was staying centered there
   even after the section's text-align flipped to left, throwing off the
   whole block's alignment. */
#fauna .apo-striped-photo-categories {
  justify-content: center;
}

.apo-fp-no-bg .apo-fp-eyebrow a,
.apo-fp-no-bg .apo-photo-stream-category {
  color: #8a8272;
}

.apo-fp-no-bg .apo-section-title {
  color: #211f1a;
}

.apo-fp-no-bg .apo-fp-eco-links a {
  color: #4a453b;
  border-bottom-color: rgba(33, 31, 26, 0.3);
}

.apo-fp-no-bg .apo-fp-eco-links a:hover {
  color: #211f1a;
  border-color: #211f1a;
}

.apo-fp-no-bg .apo-fp-footer-line,
.apo-fp-no-bg .apo-fp-footer-line a {
  color: #8a8272;
}

.apo-fp-no-bg .apo-fp-footer-line a:hover {
  color: #211f1a;
}

.apo-fp-no-bg .apo-btn {
  color: #211f1a;
}

.apo-fp-section-head {
  max-width: 720px;
  margin: 0 auto 44px;
}

/* ---------- Fauna: static responsive grid using the theme's own
   .apo-striped-photo component (its owl-carousel mode was dropped) ---------- */

/* Andres pointed out that with the photos flush against each other, the
   grid reads as one solid dark mass sitting on the new light background
   ("galeria encapsulada por el fondo negro"). A visible gap lets the
   cream background show as grout between tiles, breaking that up into
   individual framed photos instead of one dark block. */
.apo-striped-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.apo-striped-photos .apo-striped-photo {
  min-height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}

.apo-striped-photo::before {
  background-color: rgba(0, 0, 0, 0.18);
}

/* ---------- Closing / collaboration section ---------- */

.fp-section.apo-fp-closing {
  text-align: left;
}

.fp-section.apo-fp-closing .apo-section.apo-fp-layer {
  text-align: left;
}

.fp-section.apo-fp-closing .apo-section-title {
  max-width: 780px;
}

.apo-fp-eco-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 46px;
}

.apo-fp-eco-links a {
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  color: #cfd6da;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  width: fit-content;
}

.apo-fp-eco-links a:hover {
  color: #fff;
  border-color: #fff;
}

.apo-fp-footer-line {
  display: flex;
  gap: 20px;
  margin-top: 56px;
  font-family: 'Muli', sans-serif;
  font-size: 12px;
  color: #7c868c;
  letter-spacing: 0.5px;
}

.apo-fp-footer-line a {
  color: #7c868c;
  text-decoration: underline;
}

.apo-fp-footer-line a:hover {
  color: #fff;
}

/* ---------- Off-canvas nav overlay (replaces arcticmodal) ---------- */

.apo-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 12, 14, 0.97);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

.apo-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.apo-nav-overlay-inner {
  display: flex;
  gap: 100px;
  flex-wrap: wrap;
}

.apo-nav-overlay .apo-fullscreen-nav-title {
  color: #7c868c;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.apo-nav-overlay .apo-fullscreen-nav-pages {
  list-style: none;
  margin: 0;
  padding: 0;
}

.apo-nav-overlay .apo-fullscreen-nav-pages li:not(:last-child) {
  margin-bottom: 16px;
}

.apo-nav-overlay .apo-fullscreen-nav-pages a {
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 26px;
  color: #fff;
}

.apo-nav-overlay .apo-fullscreen-nav-pages a:hover {
  color: #c4402a;
}

.apo-close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  background: none;
  border: none;
  color: #fff;
  font-family: 'Muli', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Section dot navigation (replaces fullPage.js #fp-nav) ---------- */

.apo-dot-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.apo-dot-nav a {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(140, 130, 110, 0.6);
  transition: background 0.2s ease, transform 0.2s ease;
}

.apo-dot-nav a.is-active {
  background: #c4402a;
  border-color: #c4402a;
  transform: scale(1.3);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .fp-section {
    padding: 140px 48px 60px;
  }
}

@media (max-width: 991px) {
  .apo-striped-photos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /* Below this width the theme's own CSS stacks the inline nav full-width
     instead of hiding it (that used to be a JS plugin's job). Rely on the
     hamburger + off-canvas overlay instead. */
  .apo-header-component-middle {
    display: none !important;
  }
  .apo-header-section {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .apo-header-component-first,
  .apo-header-component-last {
    width: auto !important;
  }
}

@media (max-width: 767px) {
  .apo-dot-nav {
    display: none;
  }
  .fp-section {
    padding: 130px 26px 50px;
  }
  .apo-striped-photos {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .apo-striped-photos .apo-striped-photo {
    min-height: 280px;
  }
  .apo-nav-overlay-inner {
    gap: 50px;
  }
  .apo-fp-footer-line {
    flex-direction: column;
    gap: 6px;
  }
}