.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion{
  position: relative;
  padding-block: clamp(84px, 13vh, 168px);
}

.cab.wrap{ padding-block: clamp(20px, 3.2vh, 34px) 0; }

.mt-s{ margin-top: clamp(16px, 2.4vh, 26px); }
.mt-m{ margin-top: clamp(18px, 2.8vh, 32px); }

.seccion[data-escena="paper-2"]{ background: var(--paper-2); }
.seccion[data-escena="ink"]{
  background: var(--ink);
  color: var(--paper);
}
.seccion[data-escena="ink"] .eyebrow{ color: var(--orange); }
.seccion[data-escena="orange"]{
  background: var(--orange);
  color: var(--ink);
}
.seccion[data-escena="orange"] .eyebrow{ color: #3A1500; }

.seccion--muesca{
  --notch: clamp(26px, 4.4vw, 72px);
  margin-top: calc(var(--notch) * -1);
  padding-top: calc(var(--notch) + clamp(84px, 13vh, 168px));
  clip-path: polygon(
    0 0, 25% var(--notch), 50% 0, 75% var(--notch), 100% 0,
    100% 100%, 0 100%);
}

.titulo{
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.07;
  letter-spacing: -.004em;
  text-wrap: pretty;
}
.titulo--m{ font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1.1; }
.titulo em{ font-style: italic; color: var(--orange-txt); }
.seccion[data-escena="ink"] .titulo em{ color: var(--orange); }

.lede{
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--mute-paper);
  max-width: 44ch;
  text-wrap: pretty;
}
.seccion[data-escena="ink"] .lede{ color: var(--mute-ink); }
.seccion[data-escena="orange"] .lede{ color: #4A2000; }

.nota{
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mute-paper);
}
.seccion[data-escena="ink"] .nota{ color: var(--mute-ink); }
.seccion[data-escena="orange"] .nota{ color: #4A2000; }

.acciones{
  margin-top: clamp(30px, 5vh, 56px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  flex-wrap: wrap;
}

.seccion[data-escena="ink"] .btn{ background: var(--paper); color: var(--ink); }
.seccion[data-escena="orange"] .btn{ background: var(--ink); color: var(--paper); }

.enlace-baja{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--mute-paper);
  text-decoration: none;
  padding-block: 10px;
  transition: color .3s ease, gap .4s var(--ease);
}
.enlace-baja:hover{ color: var(--ink); gap: 15px; }
.enlace-baja i{ font-style: normal; color: var(--orange-sm); transition: transform .45s var(--ease); }
.enlace-baja:hover i{ transform: translateY(3px); }
.seccion[data-escena="ink"] .enlace-baja{ color: var(--mute-ink); }
.seccion[data-escena="ink"] .enlace-baja:hover{ color: var(--paper); }
.seccion[data-escena="ink"] .enlace-baja i{ color: var(--orange); }
.seccion[data-escena="orange"] .enlace-baja{ color: #4A2000; }
.seccion[data-escena="orange"] .enlace-baja:hover{ color: var(--ink); }

.hero{
  padding-block: clamp(56px, 9vh, 120px) clamp(72px, 12vh, 150px);
  min-height: min(76svh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__titulo{
  font-family: var(--serif);
  font-size: clamp(2.7rem, 7.4vw, 6.6rem);
  line-height: 1.04;
  letter-spacing: -.004em;
  margin-top: clamp(20px, 3vh, 36px);
}
.hero__titulo em{ font-style: italic; color: var(--orange-txt); }
.hero__lede{ margin-top: clamp(22px, 3.4vh, 40px); }

.cierre{ text-align: left; }
.cierre__titulo{
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -.004em;
  max-width: 16ch;
}
.cierre .acciones{ margin-top: clamp(28px, 4.6vh, 52px); }

.pie-web{
  --notch: clamp(16px, 2.6vw, 42px);
  background: var(--ink);
  color: var(--paper);
  margin-top: calc(var(--notch) * -1);
  padding-top: calc(var(--notch) + clamp(52px, 8vh, 88px));
  padding-bottom: 46px;
  clip-path: polygon(
    0 0, 25% var(--notch), 50% 0, 75% var(--notch), 100% 0,
    100% 100%, 0 100%);
}
.pie-web .area__pie{
  border-top: 1px solid var(--ink-3);
  color: var(--mute-ink);
}
.pie-web .area__pie a:hover{ color: var(--paper); }

@media (max-width: 899px){
  .seccion{ padding-block: clamp(64px, 9vh, 104px); }
  .hero{ min-height: 0; padding-block: clamp(34px, 6vh, 64px) clamp(52px, 8vh, 88px); }
}
@media (max-width: 560px){
  .btn{ width: 100%; justify-content: space-between; }
  .acciones{ gap: 14px; }
}