.metodo-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));
}

.metodo {
  --z: var(--p-z-ancho);

  --p-metodo-hueco-frase: calc(44px * var(--z));
  --p-metodo-sube: calc(40px * var(--z));
  background: var(--p-metodo-fondo);
  padding-top: clamp(72px, 14vh, 190px);
  padding-bottom: max(24px, calc(clamp(84px, 16vh, 220px) - var(--p-metodo-hueco-frase)));
}

.metodo-tira {
  list-style: none;
  margin: clamp(40px, 8vh, 110px) 0 0;
  padding: 0;

  align-items: start;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(20px * var(--z));
  gap: round(calc(20px * var(--z)), 1px);
  padding-bottom: var(--p-metodo-hueco-frase);
  padding-bottom: round(var(--p-metodo-hueco-frase), 1px);
}

.metodo-tira--acordeon {
  display: flex;
  container-type: inline-size;

  align-items: flex-start;
}
.metodo-tira--acordeon .metodo-ficha {
  flex: var(--g, 1) 1 0;
  min-width: 0;
  transition: flex-grow .5s cubic-bezier(.22, .8, .24, 1);
}

.metodo-tira--acordeon .metodo-ficha:hover:not(.activa) .metodo-marco,
.metodo-tira--acordeon .metodo-ficha:hover:not(.activa) .metodo-eti,
.metodo-tira--acordeon .metodo-ficha:hover:not(.activa) .metodo-titulo { translate: 0 0 }
.metodo-tira--acordeon .metodo-ficha:hover:not(.activa) .metodo-frase { opacity: 0; translate: 0 6px }

.metodo-tira--acordeon .metodo-ficha.activa .metodo-marco,
.metodo-tira--acordeon .metodo-ficha.activa .metodo-eti,
.metodo-tira--acordeon .metodo-ficha.activa .metodo-titulo { translate: 0 0 }
.metodo-tira--acordeon .metodo-ficha.activa .metodo-frase { translate: 0 0 }
.metodo-tira--acordeon .metodo-marco {
  aspect-ratio: auto;
  height: calc((100cqw - 5 * 20px * var(--z)) / 6 * 1.5);
}
@media (prefers-reduced-motion: reduce) {
  .metodo-tira--acordeon .metodo-ficha { transition: none }
}

.metodo-ficha {
  display: flex;
  flex-direction: column;

  position: relative;
  --e: clamp(0, calc((var(--fila-p, 1) - var(--r, 0)) * 1.9), 1);
  --s: calc(1 - (1 - var(--e)) * (1 - var(--e)));
  opacity: var(--e);
  transform: translateY(calc((1 - var(--s)) * 70px * var(--z)));
  transform: translateY(round(calc((1 - var(--s)) * 70px * var(--z)), 1px));
}

.metodo-marco {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--p-radio-foto);
  background: var(--p-metodo-caja-claro);
}

.metodo-marco,
.metodo-eti,
.metodo-titulo {
  translate: 0 0;
  transition: translate .42s var(--p-ease-tela);
}

.metodo-ficha:hover .metodo-marco,
.metodo-ficha:hover .metodo-eti,
.metodo-ficha:hover .metodo-titulo,
.metodo-ficha.activa .metodo-marco,
.metodo-ficha.activa .metodo-eti,
.metodo-ficha.activa .metodo-titulo,
.metodo-ficha:focus-within .metodo-marco,
.metodo-ficha:focus-within .metodo-eti,
.metodo-ficha:focus-within .metodo-titulo {
  translate: 0 calc(-1 * var(--p-metodo-sube));
  translate: 0 round(calc(-1 * var(--p-metodo-sube)), 1px);
}

.metodo-frase {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: calc(6px * var(--z));
  margin-top: round(calc(6px * var(--z)), 1px);

  font-size: max(14px, calc(clamp(15px, 1.1vw, 17px) * var(--z)));
  font-size: max(14px, round(calc(clamp(15px, 1.1vw, 17px) * var(--z)), 1px));
  font-weight: var(--p-peso-medio);
  line-height: 1.5;
  color: var(--p-metodo-eti-tinta);
  opacity: 0;
  translate: 0 6px;
  pointer-events: none;
  transition: opacity .26s var(--p-ease-suave), translate .42s var(--p-ease-tela);
}

.metodo-ficha:hover .metodo-frase,
.metodo-ficha.activa .metodo-frase,
.metodo-ficha:focus-within .metodo-frase {
  opacity: 1;
  translate: 0 calc(-1 * var(--p-metodo-sube));
  translate: 0 round(calc(-1 * var(--p-metodo-sube)), 1px);
}

.metodo-foto {

  filter: sepia(.14) saturate(1.06) brightness(1.02);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.metodo-eti {
  margin-top: calc(20px * var(--z));
  margin-top: round(calc(20px * var(--z)), 1px);
  font-family: var(--p-font-ui);
  font-size: calc(17px * var(--z));
  font-size: round(calc(17px * var(--z)), 1px);
  font-weight: var(--p-peso-medio);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-metodo-eti-tinta);
}

.metodo-num {
  font-variant-numeric: tabular-nums;
}

.metodo-titulo {
  margin-top: calc(10px * var(--z));
  margin-top: round(calc(10px * var(--z)), 1px);

  font-size: max(17px, calc(clamp(19px, 1.45vw, 26px) * var(--z)));
  font-size: max(17px, round(calc(clamp(19px, 1.45vw, 26px) * var(--z)), 1px));
  font-weight: var(--p-peso-claro);
  line-height: 1.3;
  color: var(--p-ink);
  text-wrap: balance;
}

@media (max-width: 1180px) {
  .metodo-tira {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24px * var(--z));
    gap: round(calc(24px * var(--z)), 1px);
  }

  .metodo-eti { font-size: 13px }
  .metodo-titulo { font-size: 19px }
}

@media (max-width: 700px) {

  .metodo {
    --z: 1;
    --p-metodo-hueco-frase: 0px;
    padding-bottom: clamp(84px, 16vh, 220px);
  }
  .metodo-tira {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .metodo-eti { font-size: 12px }
  .metodo-titulo { font-size: 17px }
}

@media (prefers-reduced-motion: reduce) {
  .metodo-ficha {
    opacity: 1;
    transform: none;
  }
  .metodo-marco { transition: outline-color .2s ease }
  .metodo-ficha:hover .metodo-marco,
  .metodo-ficha:focus-within .metodo-marco { translate: 0 0 }
}