/* Inicio: la misma escena de lluvia, encuadrada a la derecha de la portada. */
body[data-view="inicio"]::before {
  background-color: #080808;
  background-size: 78% auto;
  background-position: right center;
}

#inicio .home-impact {
  --edge: clamp(22px, 5.5vw, 112px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--nav-height, 80px) + clamp(30px, 5vh, 75px)) var(--edge) 0;
}

#inicio .hero-shade {
  background: linear-gradient(90deg, #080808 6%, #080808 20%, rgba(8,8,8,.94) 25%, rgba(8,8,8,.53) 39%, transparent 62%),
              linear-gradient(0deg, #080808 0%, transparent 23%);
}

#inicio .hero-atmosphere { animation: none; }
#inicio .hero-copy { width: min(48vw, 800px); }
#inicio .hero-brandline {
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 5px;
  font: 750 clamp(.7rem, .8vw, .88rem)/1.45 var(--sans, Arial, sans-serif);
  letter-spacing: .11em;
  margin-bottom: clamp(20px, 3vh, 40px);
}
#inicio .hero-brandline span { color: #ccc7c4; font-size: inherit; letter-spacing: .045em; }
#inicio .hero-brandline::before { width: clamp(28px, 3.5vw, 65px); }

#inicio .hero h1 {
  font: 800 clamp(66px, 7.25vw, 144px)/.86 var(--display, "Arial Narrow", Arial, sans-serif);
  letter-spacing: -.048em;
  margin: 0 0 clamp(20px, 3.8vh, 42px);
}
#inicio .hero h1 .motion-line:first-child {
  margin: 0 0 .35em;
  font-size: .44em;
  line-height: 1;
  letter-spacing: -.025em;
}
#inicio .hero h1 .motion-line:nth-child(2) { padding-block: .08em; }
#inicio .hero h1 em { color: #faf6f1; text-shadow: none; }
#inicio .hero h1 em span { display: block; color: #ff3532; }
#inicio .hero-copy > p {
  max-width: min(37vw, 50ch);
  font: 450 clamp(.97rem, 1.08vw, 1.18rem)/1.6 var(--sans, Arial, sans-serif);
}
#inicio .hero-actions { margin-top: clamp(18px, 3vh, 34px); }
#inicio .hero-actions .cta { border-radius: 4px; min-height: 46px; }

#inicio .home-impact__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: clamp(22px, 4vh, 55px);
  padding-block: 18px;
  border-top: 1px solid rgba(255,255,255,.3);
}
#inicio .home-impact__footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 8%;
  height: 3px;
  background: var(--red);
}
#inicio .hero-meta { width: auto; border: 0; margin: 0; padding: 0; }
#inicio .hero-meta b { font: 750 1.1rem/1 var(--display, Arial, sans-serif); }
#inicio .hero-meta span { font-size: .68rem; letter-spacing: .07em; }
#inicio .hero-scroll {
  position: static;
  margin: 0;
  min-height: 44px;
  font-size: .75rem;
  letter-spacing: .045em;
  animation: none;
}
#inicio .hero-scroll::after { display: none; }
#inicio .hero-scroll b {
  display: grid;
  place-items: center;
  height: 36px;
  width: 36px;
  border: 1px solid #98625f;
  border-radius: 50%;
  font-size: 1.1rem;
}

/* La segunda escena utiliza la línea de tiempo de scroll existente. */
#inicio .home-story { background: #111110; }
#inicio .home-story__pin { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
#inicio .home-story__headline,
#inicio .home-explore__title {
  font-family: var(--display, "Arial Narrow", Arial, sans-serif);
  font-size: clamp(42px, 4.5vw, 88px);
  letter-spacing: -.045em;
  line-height: .98;
}
#inicio .home-story__line { white-space: normal; }
#inicio .home-story__description,
#inicio .home-explore__description { font-size: clamp(1rem, 1.15vw, 1.22rem); line-height: 1.65; }
#inicio .home-story__values { font-size: .74rem; }
#inicio .home-story__eyebrow,
#inicio .home-story__continue { font-size: .75rem; }
#inicio .home-story__visual,
#inicio .home-explore__visual {
  padding: 0;
  border: 0;
  box-shadow: none;
}
#inicio .home-story__visual figcaption,
#inicio .home-explore__visual figcaption {
  left: 14px;
  right: auto;
  bottom: 14px;
  padding: 7px 10px;
  background: #121211e0;
  color: #fff;
  font-size: .74rem;
}
#inicio .home-explore {
  background: #080808;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-top: 1px solid #393633;
}
#inicio .home-explore__links { grid-template-columns: 1fr; gap: 0; }
#inicio .home-explore__links a {
  padding-inline: 0;
  border-bottom: 0;
  font: 700 clamp(1.18rem, 1.5vw, 1.65rem)/1.2 var(--display, Arial, sans-serif);
  letter-spacing: .015em;
}
#inicio .home-explore__links a:is(:hover,:focus-visible) { padding-inline: .6rem; }

/* Empresa: titular y entradilla, reportaje fotográfico, después el índice de valores. */
#empresa { background: #111210; color: #f7f4ec; }
#empresa .about-masthead,
#empresa .about-layout,
#empresa .about-principles { display: grid; gap: clamp(22px, 5vw, 92px); }
#empresa .about-masthead {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  padding-bottom: clamp(26px, 4vw, 76px);
}
#empresa .about-masthead h2 {
  font: 750 clamp(2.7rem, 4.7vw, 5.8rem)/.98 var(--display, "Arial Narrow", Arial, sans-serif);
  text-transform: none;
  letter-spacing: -.052em;
  max-width: 17ch;
  margin-top: 20px;
}
#empresa .about-masthead h2 span { display: block; color: #c2bcb6; }
#empresa .about-standfirst {
  border-inline-start: 2px solid var(--red);
  padding-inline-start: clamp(16px, 2vw, 30px);
  font: 500 clamp(1rem, 1.35vw, 1.45rem)/1.55 var(--sans, Arial, sans-serif);
}
#empresa .about-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
#empresa .about-visual {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#empresa .about-visual::before, #empresa .about-visual::after { content: none; }
#empresa .about-visual img { height: auto; width: 100%; border-radius: 0; aspect-ratio: auto; }
#empresa .about-visual figcaption {
  margin-top: 10px;
  color: #c3c1ba;
  font-size: .78rem;
  letter-spacing: .015em;
}
#empresa .about-copy > p,
#empresa .about-indicator span,
#empresa .value-card p { font-size: clamp(.96rem, 1.02vw, 1.1rem); line-height: 1.6; color: #d7d3ce; }
#empresa .about-copy > p:first-child { margin-top: 0; }
#empresa .about-indicator strong { font-size: .87rem; }
#empresa .about-principles {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  border-top: 1px solid #605954;
  margin-top: clamp(40px, 6vw, 100px);
  padding-top: clamp(20px, 3vw, 45px);
  row-gap: 24px;
}
#empresa .about-principles h3 {
  font: 700 clamp(1.9rem, 3vw, 4.25rem)/1.02 var(--display, Arial, sans-serif);
  letter-spacing: -.04em;
}
#empresa .about-values { display: block; margin: 0; }
#empresa .value-card {
  min-height: 0;
  padding: 0 0 16px;
  border: 0;
  border-top: 1px solid #5d5854;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#empresa .value-card summary {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: baseline;
  padding: 15px 2px 0;
}
#empresa .value-card strong { font: 650 clamp(1.25rem, 2.0vw, 2.1rem)/1.14 var(--display, Arial, sans-serif); }
#empresa .value-card summary span { font: 650 .8rem/1 var(--sans, Arial, sans-serif); }
#empresa .value-card::before { content: none; }
#empresa .value-card p { margin: .65rem 0 0 42px; padding: 0; max-width: 55ch; }
#empresa .about-indicator b { font-family: var(--display, Arial, sans-serif); }
#empresa .about-actions { grid-column: 2; margin-top: 0; }

@media(max-width: 800px) {
  body[data-view="inicio"]::before {
    background-size: 100% auto;
    background-position: center var(--nav-height, 68px);
  }
  #inicio .home-impact {
    grid-template-rows: auto auto;
    align-content: end;
    padding-top: calc(var(--nav-height, 68px) + 45vw);
  }
  #inicio .hero-shade {
    background: linear-gradient(180deg, transparent calc(var(--nav-height, 68px) + 32vw), rgba(8,8,8,.6) calc(var(--nav-height, 68px) + 45vw), #080808 calc(var(--nav-height, 68px) + 56vw));
  }
  #inicio .hero-copy { width: 100%; }
  #inicio .hero-brandline { margin-bottom: 13px; }
  #inicio .hero h1 { font-size: clamp(52px, 10.2vw, 82px); margin-bottom: 15px; }
  #inicio .hero h1 .motion-line:first-child { font-size: min(.56em, 5.9vw); }
  #inicio .hero h1 em span { display: inline-block; }
  #inicio .hero-copy > p { max-width: 53ch; line-height: 1.55; }
  #inicio .hero-actions { flex-direction: row; margin-top: 16px; gap: 8px; }
  #inicio .hero-actions .cta { width: auto; padding-inline: 16px; }
  #inicio .home-impact__footer { margin-top: 22px; gap: 10px; padding-block: 15px; }
  #inicio .hero-meta { gap: 8px; }
  #inicio .hero-meta > div { padding-inline: 6px; }
  #inicio .hero-meta span { font-size: .65rem; letter-spacing: .01em; text-transform: none; }
  #inicio .hero-scroll { white-space: nowrap; width: 44px; justify-content: center; }
  #inicio .hero-scroll span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #inicio .home-story { min-height: auto; }
  #inicio .home-story__pin,
  #inicio .home-explore { position: relative; min-height: auto; grid-template-columns: 1fr; gap: 28px; padding: 64px var(--edge, 6vw); }
  #inicio .home-story__visual { justify-self: stretch; width: 100%; }
  #empresa .about-masthead,
  #empresa .about-layout,
  #empresa .about-principles { grid-template-columns: 1fr; }
  #empresa .about-actions { grid-column: 1; }
  #empresa .about-masthead h2 { max-width: 20ch; }
}

@supports (animation-timeline: view()) {
  @media(min-width: 801px) and (prefers-reduced-motion: no-preference) {
    #inicio .home-story__copy,
    #inicio .home-story__headline,
    #inicio .home-story__description,
    #inicio .home-story__values,
    #inicio .home-story__continue { animation: none; }
    #inicio .home-story__visual {
      animation: story-open-frame linear both;
      animation-timeline: --home-story;
      animation-range: entry 10% contain 80%;
    }
    @keyframes story-open-frame {
      from { clip-path: inset(8% 15% 8% 7%); transform: translateX(4%) scale(.96); }
      to { clip-path: inset(0); transform: translateX(0) scale(1); }
    }
  }
}