.pilares-cuerpo {
  max-width: none;
  padding-inline: max(24px, calc((100% - var(--p-ancho-papel)) / 2));
  padding-inline: max(24px, round(calc((100% - var(--p-ancho-papel)) / 2), 1px));
}

.pilares-frase {

  background:
    linear-gradient(to bottom, var(--p-pilares-fondo-plano) 0%, var(--p-pilares-fondo-plano) 6%, transparent 40%),
    var(--p-pilares-fondo);
  color: var(--p-pilares-tinta);

  padding-top: clamp(72px, 12.5vh, 150px);
  padding-bottom: clamp(72px, 12.5vh, 150px);
}

section[data-fondo].pilares.pilares + section[data-fondo].metodo.metodo {
  padding-top: clamp(28px, 3.5vh, 48px);
}
.pilares {
  background: var(--p-papel-secciones);
  color: var(--p-ink);
  padding-top: clamp(64px, 11vh, 120px);
  padding-bottom: clamp(64px, 11vh, 120px);
}

.pilares-entrada {

  container-type: inline-size;
  --e: clamp(0, calc(var(--fila-p, 1) * 2.4), 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 40px));
  transform: translateY(round(calc((1 - var(--e)) * 40px), 1px));
}

.pilares-titular {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--p-pilares-entrada-titulo);
  font-weight: var(--p-peso-fino);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.pilares-linea-1 { color: var(--p-pilares-tinta) }
.pilares-linea-2 { color: #7c7a78 }

.pilares-entrada--dos {
  display: grid;

  grid-template-columns: minmax(0, 1.12fr) 1px minmax(0, 1fr);
  column-gap: clamp(40px, 5.8vw, 112px);
  align-items: center;
}
.pilares-entrada--dos .pilares-titular { font-size: clamp(30px, 3.3vw, 64px) }

.pilares-izq .pilares-manifiesto {
  margin-top: clamp(18px, 3vh, 30px);
  max-width: none;
  font-size: clamp(15px, 1vw, 18px);
  text-wrap: balance;
}

.pilares-raya {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(to bottom,
              transparent 0%,
              color-mix(in oklab, var(--p-oro) 75%, transparent) 30%,
              color-mix(in oklab, var(--p-oro) 75%, transparent) 70%,
              transparent 100%);
}

.pilares-der { align-self: center }
.pilares-cejo {
  margin-bottom: clamp(18px, 3vh, 32px);
  font-family: var(--p-font-ui);
  font-size: 12px;
  font-weight: var(--p-peso-medio);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-oro);
}

.pilares-transforma {
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: var(--p-peso-claro);
  line-height: 1.45;
  letter-spacing: -.005em;
  color: color-mix(in oklab, var(--p-pilares-tinta) 80%, transparent);
  text-wrap: pretty;
}

.pilares-transforma .linea { display: block }

@media (max-width: 860px) {
  .pilares-entrada--dos {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 6vw, 44px);
  }
  .pilares-entrada--dos .pilares-titular { font-size: clamp(30px, 7.5vw, 48px) }

  .pilares-entrada--dos .pilares-linea-1 { text-wrap: balance }
  .pilares-raya {
    width: auto;
    height: 1px;
    background: linear-gradient(to right,
                transparent 0%,
                color-mix(in oklab, var(--p-oro) 75%, transparent) 20%,
                color-mix(in oklab, var(--p-oro) 75%, transparent) 80%,
                transparent 100%);
  }
}

.pilares-queda {
  color: var(--p-oro);

  white-space: nowrap;
}

.pilares-manifiesto {
  margin-top: clamp(16px, 3vh, 30px);
  max-width: 68ch;
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: var(--p-peso-claro);
  line-height: 1.6;
  color: var(--p-pilares-tinta-2);
}

.pilares-tira {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 44px);
  align-items: start;
}

.pilar {
  --e: clamp(0, calc((var(--fila-p, 1) - var(--r, 0)) * 1.7), 1);
  --s: calc(1 - (1 - var(--e)) * (1 - var(--e)));
  opacity: var(--e);
}

.pilar:nth-child(2) { margin-top: var(--p-pilar-escalon); --r: .05 }
.pilar:nth-child(3) { margin-top: calc(var(--p-pilar-escalon) * 2); --r: .10 }

.pilar-marco {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--p-radio-foto);
  background: var(--p-metodo-caja-claro);
  translate: 0 calc((1 - var(--s)) * var(--p-pilar-entra));
  translate: 0 round(calc((1 - var(--s)) * var(--p-pilar-entra)), 1px);
}

.pilar-foto {
  position: absolute;
  inset: -6% 0;
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  translate: 0 calc(var(--fila-desliz, 0) * var(--p-pilar-deriva));
}

.pilar-foto--collage {
  inset: 0;
  height: 100%;
  translate: none;
}

.pilar-foto.pilar-franja {

  --f: clamp(0, calc((var(--fila-p, 1) - var(--r, 0) - var(--k, 0) * .16) * 2), 1);
  --fs: calc(1 - (1 - var(--f)) * (1 - var(--f)));
  opacity: var(--f);
  translate: 0 calc((1 - var(--fs)) * 28%);
}
.pilar-franja--2a { clip-path: polygon(0 0, 100% 0, 100% 55.24%, 0 44.76%) }
.pilar-franja--2b { clip-path: polygon(0 44.76%, 100% 55.24%, 100% 100%, 0 100%) }
.pilar-franja--3a { clip-path: polygon(0 0, 100% 0, 100% 28.06%, 0 38.55%) }
.pilar-franja--3b { clip-path: polygon(0 38.55%, 100% 28.06%, 100% 61.37%, 0 71.86%) }
.pilar-franja--3c { clip-path: polygon(0 71.86%, 100% 61.37%, 100% 100%, 0 100%) }

.pilar-texto {
  position: relative;
  margin-top: clamp(18px, 2.6vh, 30px);
  padding-top: clamp(16px, 2.4vh, 26px);

  translate: 0 calc((1 - var(--s)) * 26px);
  translate: 0 round(calc((1 - var(--s)) * 26px), 1px);
}

.pilar-texto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #DEDED9;
  transform: scaleX(var(--s));
  transform-origin: left;
}

.pilar-eti {
  font-family: var(--p-font-ui);
  font-size: clamp(12px, .8vw, 13px);
  font-weight: var(--p-peso-medio);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--p-metodo-eti-tinta);
}

.pilar-titulo {
  margin-top: clamp(10px, 1.6vh, 16px);
  font-size: clamp(22px, 1.9vw, 34px);
  font-weight: var(--p-peso-fino);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--p-ink);
  text-wrap: balance;
}

.pilar-frase {
  margin-top: clamp(10px, 1.6vh, 16px);
  font-size: clamp(15px, .95vw, 17px);
  font-weight: var(--p-peso-claro);
  line-height: 1.55;
  color: var(--p-areas-eti);
}

@media (max-width: 1100px) {
  .pilar:nth-child(2),
  .pilar:nth-child(3) { margin-top: 0 }
}

@media (max-width: 860px) {
  .pilares-tira {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 32px);
  }
}

@media (max-width: 560px) {
  .pilares-tira { grid-template-columns: minmax(0, 1fr) }
}

@media (prefers-reduced-motion: reduce) {
  .pilares-entrada,
  .pilar { opacity: 1; transform: none }
  .pilar-marco,
  .pilar-foto,
  .pilar-foto.pilar-franja,
  .pilar-texto { translate: 0 0 }
  .pilar-foto.pilar-franja { opacity: 1 }
  .pilar-texto::before { transform: none }
}