/* Styles propres à la page d'accueil (Inicio) uniquement.
   Le header, footer et les tokens partagés sont dans base.css */

.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  /* Photo passée via la custom property --hero-img (inline, voir HTML) —
     jamais background-image directement : un background-image inline
     écraserait TOUT le raccourci `background` ci-dessous (gradient inclus)
     et ferait retomber position/size/repeat sur leurs valeurs par défaut
     (0% 0% / auto / repeat), ce qui répète la photo en mosaïque au lieu de
     la couvrir, et fait disparaître le dégradé de lisibilité. */
  background-image:
    linear-gradient(180deg, rgba(9,30,46,0.62) 0%, rgba(9,30,46,0.4) 35%, rgba(8,24,36,0.75) 70%, rgba(6,17,26,0.94) 100%),
    var(--hero-img);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  color:#F7F4EC; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; width:100%; padding:0 40px 0; max-width:1180px; margin:0 auto; padding-bottom:96px; }
.hero .eyebrow{ color:#9FD1E8; margin-bottom:22px; display:flex; align-items:center; gap:12px; text-shadow:0 2px 10px rgba(0,0,0,0.55); }
.hero .eyebrow::before{ content:""; width:26px; height:1px; background:#9FD1E8; display:inline-block; }
.hero h1{ font-size:clamp(48px, 8vw, 108px); max-width:920px; color:#FBF9F4; text-shadow:0 4px 18px rgba(0,0,0,0.5); }
.hero h1 em{ font-style:normal; color:var(--glacier-bright); }
.hero-sub{ max-width:520px; margin-top:26px; font-size:17px; color:#DCE7EA; font-weight:400; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.stat-row{ display:flex; flex-wrap:wrap; gap:0; margin-top:56px; border-top:1px solid var(--line-light); padding-top:22px; }
.stat{ flex:1 1 160px; padding-right:28px; }
.stat .num{ font-family:'IBM Plex Mono', monospace; font-size:26px; font-weight:600; color:#F7F4EC; }
.stat .lbl{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#9FB6BF; margin-top:6px; }

/* ===== EXPERIENCES GRID ===== */
.experiences{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.exp-card{ display:block; position:relative; background:var(--ink); aspect-ratio:3/4; overflow:hidden; }
.exp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.05); transition:transform .5s ease; }
.exp-card:hover img{ transform:scale(1.06); }
.exp-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,20,16,0.05) 0%, rgba(9,16,13,0.85) 100%); z-index:1; }
.exp-card-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; color:#F7F4EC; }
.exp-index{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--glacier-bright); margin-bottom:10px; display:block; }
.exp-card-content h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; font-size:26px; line-height:1; }
.exp-card-content p{ font-size:12.5px; color:#CFDAD1; margin-top:8px; max-width:190px; }

/* ===== ROUTE CARDS (Huayhuash) ===== */
.routes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.route-card{ background:var(--stone-light); border:1px solid var(--line); }
.route-photo{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.route-photo img{ width:100%; height:100%; object-fit:cover; }
.route-tag{ position:absolute; top:14px; left:14px; background:var(--glacier-deep); color:#DCEEF7; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 10px; }
.route-body{ padding:26px 24px 24px; display:flex; flex-direction:column; }
.route-body h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; font-size:25px; color:var(--ink); margin-bottom:18px; }
.route-stats{ display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:16px; margin-bottom:20px; }
.route-stats div .num{ font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:600; color:var(--ink); display:block; white-space:nowrap; }
.route-stats div .lbl{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:#7A8078; white-space:nowrap; }
.route-link{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--eco-deep); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--eco-deep); padding-bottom:2px; align-self:flex-start; }
.route-body p{ font-size:13.5px; color:#4B564F; margin-bottom:20px; }

/* ===== ABOUT BAND ===== */
.about-band{ background:var(--glacier-deep); color:#EAF3F7; }
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.about-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo::after{ content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.25); outline:10px solid var(--glacier-deep); outline-offset:-10px; }
.about-band .eyebrow{ color:var(--glacier-bright); margin-bottom:18px; }
.about-band h2{ font-size:clamp(30px, 3.6vw, 46px); margin-bottom:22px; color:#F7F4EC; }
.about-band p{ color:#C6DCE4; font-size:15.5px; max-width:480px; margin-bottom:16px; }
.about-facts{ display:flex; gap:34px; margin-top:30px; flex-wrap:wrap; }
.about-facts div .num{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:38px; color:#F7F4EC; line-height:1; }
.about-facts div .lbl{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#8FB4C4; margin-top:6px; }

/* ===== GALLERY ===== */
.gallery{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:220px 220px; gap:2px; }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery a:nth-child(1){ grid-row:1 / 3; }

@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .experiences{ grid-template-columns:1fr 1fr; }
  .routes{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; }
  .gallery a:nth-child(1){ grid-row:auto; grid-column:1 / 3; }
  .hero-inner{ padding-left:22px; padding-right:22px; }
}
@media (max-width: 620px){
  .routes{ grid-template-columns:1fr; }
  .experiences{ grid-template-columns:1fr; }
}