/* ==========================================================
   PUBLIMPACTO · VISUAL MARKETING · PORTFOLIO FULLSCREEN
   LOTE 208
   ----------------------------------------------------------
   Motor adaptado del componente 03 · Casos reales:
   sticky + scroll discreto + navegación manual.
   Cada slide conserva una estructura HTML independiente.
   ========================================================== */

.pi-vm-v2 #contenido > #portfolio.vm-portfolio-scroll-section[data-chapter] {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  background: #fff;
  overflow: visible !important;
  display: block !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
}

.pi-vm-v2 #portfolio > .vm-portfolio-stage {
  width: 100%;
  max-width: none;
  margin: 0;
}

.pi-vm-v2 .vm-portfolio-stage {
  position: relative;
  z-index: 1;
  background: #fff;
}

.pi-vm-v2 .vm-portfolio-slider {
  --vm-portfolio-safe-right: clamp(92px, 7.3vw, 120px);
  --vm-portfolio-gutter: clamp(38px, 3.1vw, 50px);
  --vm-portfolio-top: clamp(92px, 10vh, 118px);
  --vm-portfolio-bottom: clamp(18px, 2.4vh, 28px);
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
  background: #fff;
  color: #111;
}

.pi-vm-v2 .vm-portfolio-viewport {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.pi-vm-v2 .vm-portfolio-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.pi-vm-v2 .vm-portfolio-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  padding:
    var(--vm-portfolio-top)
    var(--vm-portfolio-safe-right)
    0
    var(--vm-portfolio-gutter);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(4vw, 0, 0);
  transition:
    opacity .34s ease,
    transform .48s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .48s;
}

.pi-vm-v2 .vm-portfolio-slide.is-before {
  transform: translate3d(-4vw, 0, 0);
}

.pi-vm-v2 .vm-portfolio-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.pi-vm-v2 .vm-portfolio-slidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 42px;
  padding-bottom: clamp(18px, 2.4vh, 28px);
  border-bottom: 1px solid rgba(0,0,0,.16);
  color: rgba(17,17,17,.60);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-portfolio-slidebar > span:first-child {
  color: #111;
}

.pi-vm-v2 .vm-portfolio-slidebar > span:first-child strong {
  margin-right: .4rem;
  color: var(--pi-brand-live-color, #e3063b);
}

.pi-vm-v2 .vm-portfolio-slidebar > span:last-child {
  justify-self: end;
  text-align: right;
}

.pi-vm-v2 .vm-portfolio-slidebar__center {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.pi-vm-v2 .vm-portfolio-slidebar__center::before,
.pi-vm-v2 .vm-portfolio-slidebar__center::after {
  content: "";
  width: 48px;
  height: 1px;
  background: rgba(0,0,0,.24);
}

.pi-vm-v2 .vm-portfolio-content {
  min-height: 0;
  padding: clamp(28px, 4vh, 50px) 0 clamp(20px, 2.6vh, 32px);
}

.pi-vm-v2 .vm-portfolio-content--concept {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(38px, 4vw, 68px);
  align-items: center;
}

.pi-vm-v2 .vm-portfolio-copy {
  min-width: 0;
  align-self: center;
  justify-self: stretch;
  text-align: left !important;
}

.pi-vm-v2 .vm-portfolio-overline {
  margin: 0 0 18px;
  text-align: left !important;
  color: rgba(17,17,17,.56);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-portfolio-copy h2 {
  margin: 0;
  width: 100%;
  max-width: none;
  color: #111;
  text-align: left !important;
  font-size: clamp(38px, 3.15vw, 54px);
  font-weight: 430;
  letter-spacing: -.045em;
  line-height: .98;
}

.pi-vm-v2 .vm-portfolio-copy h2 > span {
  display: block;
}

.pi-vm-v2 .vm-portfolio-copy h2 .vm-portfolio-accent {
  color: var(--pi-brand-live-color, #e3063b);
}

.pi-vm-v2 .vm-portfolio-copy-rule {
  width: 36px;
  height: 1px;
  margin: clamp(24px, 3vh, 34px) 0;
  background: #111;
}

.pi-vm-v2 .vm-portfolio-copy h3 {
  margin: 0 0 20px;
  max-width: 22ch;
  text-align: left !important;
  color: #111;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.pi-vm-v2 .vm-portfolio-copy p {
  max-width: 46ch;
  margin: 0;
  text-align: left !important;
  color: #55504c;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.58;
  text-wrap: pretty;
}

.pi-vm-v2 .vm-portfolio-copy p + p {
  margin-top: 14px;
}

.pi-vm-v2 .vm-portfolio-keywords {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(0,0,0,.14);
  list-style: none;
  color: rgba(17,17,17,.62);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-portfolio-keywords li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pi-vm-v2 .vm-portfolio-keywords li:not(:last-child)::after {
  content: "";
  width: 20px;
  height: 1px;
  background: rgba(0,0,0,.24);
}

.pi-vm-v2 .vm-portfolio-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.pi-vm-v2 .vm-portfolio-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100dvh - 270px);
  object-fit: contain;
  object-position: center;
}

/* Slides todavía no desarrollados: mantienen el motor y la escala. */
.pi-vm-v2 .vm-portfolio-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding-bottom: 8vh;
}

.pi-vm-v2 .vm-portfolio-placeholder p {
  margin: 0 0 18px;
  color: var(--pi-brand-live-color, #e3063b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
}

.pi-vm-v2 .vm-portfolio-placeholder h2 {
  margin: 0 0 18px;
  color: #111;
  font-size: clamp(50px, 7vw, 104px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .94;
}

.pi-vm-v2 .vm-portfolio-placeholder span {
  color: #777;
  font-size: 14px;
}

/* ----------------------------------------------------------
   NAVEGACIÓN INFERIOR
   ---------------------------------------------------------- */
.pi-vm-v2 .vm-portfolio-nav {
  position: absolute;
  z-index: 12;
  right: var(--vm-portfolio-safe-right);
  bottom: var(--vm-portfolio-bottom);
  left: var(--vm-portfolio-gutter);
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 44px;
  align-items: stretch;
  gap: 12px;
  min-height: 64px;
  border-top: 1px solid rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.96);
}

.pi-vm-v2 .vm-portfolio-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.pi-vm-v2 .vm-portfolio-arrow:disabled {
  opacity: .24;
  cursor: default;
}

.pi-vm-v2 .vm-portfolio-dots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  min-width: 0;
}

.pi-vm-v2 .vm-portfolio-dots button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid rgba(0,0,0,.12);
  background: transparent;
  color: #858585;
  text-align: left;
  cursor: pointer;
}

.pi-vm-v2 .vm-portfolio-dots button:last-child {
  border-right: 1px solid rgba(0,0,0,.12);
}

.pi-vm-v2 .vm-portfolio-dots button::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 2px;
  background: var(--pi-brand-live-color, #e3063b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.pi-vm-v2 .vm-portfolio-dots button span {
  font-size: 15px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.pi-vm-v2 .vm-portfolio-dots button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-vm-v2 .vm-portfolio-dots button.is-active {
  color: #111;
}

.pi-vm-v2 .vm-portfolio-dots button.is-active span {
  color: var(--pi-brand-live-color, #e3063b);
}

.pi-vm-v2 .vm-portfolio-dots button.is-active::after {
  transform: scaleX(1);
}

.pi-vm-v2 .vm-portfolio-arrow:focus-visible,
.pi-vm-v2 .vm-portfolio-dots button:focus-visible,
.pi-vm-v2 .vm-portfolio-slider:focus-visible {
  outline: 2px solid var(--pi-brand-live-color, #e3063b);
  outline-offset: 3px;
}

.pi-vm-v2 .vm-portfolio-counter {
  position: absolute;
  right: var(--vm-portfolio-safe-right);
  bottom: calc(var(--vm-portfolio-bottom) + 74px);
  display: flex;
  gap: 5px;
  align-items: baseline;
  color: rgba(17,17,17,.48);
  font-size: 10px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.pi-vm-v2 .vm-portfolio-counter strong {
  color: #111;
  font-size: 11px;
}

/* ----------------------------------------------------------
   MODO SCROLL · DESKTOP / TABLET >=768
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  .pi-vm-v2 #contenido > #portfolio.vm-portfolio-scroll-section.is-scroll-driven[data-chapter] {
    overflow: visible !important;
  }

  .pi-vm-v2 #contenido > #portfolio.vm-portfolio-scroll-section.is-scroll-driven[data-chapter] > .vm-portfolio-stage {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    align-self: auto !important;
  }

  .pi-vm-v2 #portfolio.vm-portfolio-scroll-section.is-scroll-driven .vm-portfolio-slider,
  .pi-vm-v2 #portfolio.vm-portfolio-scroll-section.is-scroll-driven .vm-portfolio-viewport,
  .pi-vm-v2 #portfolio.vm-portfolio-scroll-section.is-scroll-driven .vm-portfolio-track {
    height: 100%;
  }
}

/* ----------------------------------------------------------
   LAPTOP / TABLET HORIZONTAL
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-portfolio-slider {
    --vm-portfolio-safe-right: clamp(98px, 9.4vw, 124px);
    --vm-portfolio-gutter: clamp(72px, 7.5vw, 94px);
    --vm-portfolio-top: clamp(86px, 9vh, 104px);
  }

  .pi-vm-v2 .vm-portfolio-content--concept {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 34px;
  }

  .pi-vm-v2 .vm-portfolio-copy h2 {
    font-size: clamp(36px, 4.1vw, 50px);
  }

  .pi-vm-v2 .vm-portfolio-copy h3 {
    font-size: clamp(22px, 2.7vw, 29px);
  }

  .pi-vm-v2 .vm-portfolio-slidebar__center::before,
  .pi-vm-v2 .vm-portfolio-slidebar__center::after {
    width: 28px;
  }

  .pi-vm-v2 .vm-portfolio-dots button {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 0 9px;
  }

  .pi-vm-v2 .vm-portfolio-dots button strong {
    font-size: 9px;
  }
}

/* ----------------------------------------------------------
   MÓVIL · flujo natural, slider manual horizontal
   ---------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card__media--threshold img {
    width: 72%;
    padding-left: 12px;
  }

  .pi-vm-v2 .vm-art-threshold-copy {
    width: min(52%, 230px);
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 #portfolio.vm-portfolio-scroll-section {
    min-height: 0 !important;
    height: auto !important;
  }

  .pi-vm-v2 .vm-portfolio-stage {
    min-height: 0;
  }

  .pi-vm-v2 .vm-portfolio-slider {
    --vm-portfolio-safe-right: 20px;
    --vm-portfolio-gutter: 20px;
    --vm-portfolio-top: 72px;
    --vm-portfolio-bottom: 20px;
    height: auto;
    padding-bottom: 104px;
  }

  .pi-vm-v2 .vm-portfolio-viewport,
  .pi-vm-v2 .vm-portfolio-track {
    height: auto;
    overflow: visible;
  }

  .pi-vm-v2 .vm-portfolio-slide {
    display: none;
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    padding:
      var(--vm-portfolio-top)
      var(--vm-portfolio-gutter)
      28px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .pi-vm-v2 .vm-portfolio-slide.is-active {
    display: grid;
  }

  .pi-vm-v2 .vm-portfolio-slidebar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 18px;
  }

  .pi-vm-v2 .vm-portfolio-slidebar__center {
    display: none;
  }

  .pi-vm-v2 .vm-portfolio-slidebar > span:last-child {
    justify-self: start;
    text-align: left;
  }

  .pi-vm-v2 .vm-portfolio-content {
    padding: 28px 0 0;
  }

  .pi-vm-v2 .vm-portfolio-content--concept {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pi-vm-v2 .vm-portfolio-copy h2 {
    max-width: none;
    font-size: clamp(38px, 11vw, 52px);
  }

  .pi-vm-v2 .vm-portfolio-copy h3 {
    font-size: 27px;
  }

  .pi-vm-v2 .vm-portfolio-copy p {
    max-width: none;
    font-size: 14px;
    line-height: 1.62;
  }

  .pi-vm-v2 .vm-portfolio-visual {
    order: 2;
    height: auto;
    overflow: visible;
  }

  .pi-vm-v2 .vm-portfolio-visual img {
    height: auto;
    max-height: none;
  }

  .pi-vm-v2 .vm-portfolio-nav {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    grid-template-columns: 40px minmax(0,1fr) 40px;
    min-height: 58px;
  }

  .pi-vm-v2 .vm-portfolio-dots {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pi-vm-v2 .vm-portfolio-dots::-webkit-scrollbar {
    display: none;
  }

  .pi-vm-v2 .vm-portfolio-dots button {
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border-left: 1px solid rgba(0,0,0,.12);
    text-align: center;
  }

  .pi-vm-v2 .vm-portfolio-dots button strong {
    display: none;
  }

  .pi-vm-v2 .vm-portfolio-dots button span {
    font-size: 13px;
  }

  .pi-vm-v2 .vm-portfolio-counter {
    display: none;
  }

  .pi-vm-v2 .vm-portfolio-placeholder {
    min-height: 55vh;
    padding: 0;
  }

  .pi-vm-v2 .vm-portfolio-placeholder h2 {
    font-size: clamp(42px, 12vw, 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-vm-v2 .vm-portfolio-slide,
  .pi-vm-v2 .vm-portfolio-dots button::after {
    transition: none !important;
  }
}

/* LOTE 205 · escritorio ancho · márgenes solicitados */
@media (min-width: 1280px) {
  .pi-vm-v2 .vm-portfolio-slider {
    --vm-portfolio-gutter: 146px;
    --vm-portfolio-safe-right: 158px;
  }
}

/* LOTE 206 · safe area izquierda + flecha anterior */
@media (min-width: 768px) {
  .pi-vm-v2 .vm-portfolio-arrow--prev {
    margin-left: 14px;
  }
}

@media (min-width: 1280px) {
  .pi-vm-v2 .vm-portfolio-arrow--prev {
    margin-left: 18px;
  }
}

/* ==========================================================
   LOTE 209 · SLIDE 01 · PULIDO EDITORIAL
   ----------------------------------------------------------
   - menos densidad de copy
   - elimina keywords redundantes inferiores
   - bloque principal 28px más arriba en escritorio
   - imagen 4:3 gana un 6% de presencia
   ========================================================== */
@media (min-width: 1200px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    transform: translateY(-28px);
  }

  .pi-vm-v2 #portfolio .vm-portfolio-visual {
    overflow: visible;
  }

  .pi-vm-v2 #portfolio .vm-portfolio-visual img {
    width: 106%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    transform: translateY(-18px);
  }

  .pi-vm-v2 #portfolio .vm-portfolio-visual img {
    width: 103%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    transform: none;
  }

  .pi-vm-v2 #portfolio .vm-portfolio-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }
}

/* ==========================================================
   LOTE 212 · SLIDE 02 · DIRECCIÓN DE ARTE · EL UMBRAL
   ----------------------------------------------------------
   Refinado editorial según feedback del cliente.
   Fondo blanco, jerarquía limpia y multicard más intelectual.
   ========================================================== */

.pi-vm-v2 .vm-portfolio-slide--artdirection {
  --vm-art-line: rgba(0,0,0,.14);
  --vm-art-soft: #f6f6f3;
}

.pi-vm-v2 .vm-portfolio-content--artdirection {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: clamp(16px, 2vh, 24px);
  min-height: 0;
  padding: clamp(18px, 2.4vh, 28px) 0 calc(var(--vm-portfolio-bottom) + 84px);
}

.pi-vm-v2 .vm-artdirection-intro {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  align-items: end;
}

.pi-vm-v2 .vm-artdirection-intro__title,
.pi-vm-v2 .vm-artdirection-intro__copy {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pi-vm-v2 .vm-artdirection-intro__title {
  grid-column: 1 / span 2;
}

.pi-vm-v2 .vm-artdirection-intro__copy {
  grid-column: 5 / span 2;
}

.pi-vm-v2 .vm-artdirection-kicker {
  width: 100%;
  margin: 0;
  text-align: center;
  color: rgba(17,17,17,.58);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-artdirection-intro__copy h2 {
  width: 100%;
  margin: 0;
  text-align: center;
  color: rgba(17,17,17,.72);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .11em;
  font-weight: 600;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-artdirection-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(0,1fr));
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.pi-vm-v2 .vm-art-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--vm-art-line);
  background: #fff;
  color: #111;
}

.pi-vm-v2 .vm-art-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  padding: clamp(16px, 1.55vw, 24px);
  text-align: left;
}

.pi-vm-v2 .vm-art-card__content--centered {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pi-vm-v2 .vm-art-card__content--centered .vm-art-card__index {
  position: absolute;
  top: clamp(16px, 1.55vw, 24px);
  left: clamp(16px, 1.55vw, 24px);
  margin: 0;
  text-align: left;
}

.pi-vm-v2 .vm-art-card__index {
  display: block;
  margin: 0 0 14px;
  width: 100%;
  text-align: left;
  color: rgba(17,17,17,.50);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-art-card h3 {
  margin: auto 0 8px;
  color: inherit;
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 520;
}

.pi-vm-v2 .vm-art-card p {
  margin: 0;
  color: rgba(17,17,17,.68);
  font-size: 11px;
  line-height: 1.48;
  text-wrap: pretty;
}

.pi-vm-v2 .vm-art-card__lead {
  margin: auto 0 10px !important;
  color: #111 !important;
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.022em;
  font-weight: 500;
}

.pi-vm-v2 .vm-art-card__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.pi-vm-v2 .vm-art-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pi-vm-v2 .vm-art-card--universe {
  grid-column: span 2;
}

.pi-vm-v2 .vm-art-card--universe .vm-art-card__content {
  background: #fff;
}

.pi-vm-v2 .vm-art-card--universe h3 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 30px);
}

.pi-vm-v2 .vm-art-card--surreal {
  grid-column: span 1;
}

.pi-vm-v2 .vm-art-card--surreal .vm-art-card__content {
  justify-content: flex-start;
}

.pi-vm-v2 .vm-art-card--surreal h3 {
  margin-top: 2px;
  margin-bottom: 12px;
}

.pi-vm-v2 .vm-art-card--surreal p {
  font-size: 11px;
  line-height: 1.56;
}

.pi-vm-v2 .vm-art-card--color {
  grid-column: span 1;
}

.pi-vm-v2 .vm-art-card--color .vm-art-card__content {
  justify-content: flex-start;
}

.pi-vm-v2 .vm-art-card--color h3 {
  margin-top: 2px;
  margin-bottom: 12px;
}

.pi-vm-v2 .vm-art-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
  height: 64px;
  margin: auto 0 12px;
  border: 1px solid rgba(0,0,0,.10);
}

.pi-vm-v2 .vm-art-swatch {
  display: block;
  min-width: 0;
}

.pi-vm-v2 .vm-art-swatch--magenta { background:#e6005a; }
.pi-vm-v2 .vm-art-swatch--blue    { background:#009fe3; }
.pi-vm-v2 .vm-art-swatch--green   { background:#1aa53b; }
.pi-vm-v2 .vm-art-swatch--yellow  { background:#f3b400; }
.pi-vm-v2 .vm-art-swatch--black   { background:#111; }

.pi-vm-v2 .vm-art-card--character {
  grid-column: span 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  background: #fff;
}

.pi-vm-v2 .vm-art-card__character-title {
  padding: clamp(16px, 1.55vw, 24px) clamp(16px, 1.55vw, 24px) 8px;
}

.pi-vm-v2 .vm-art-card__character-title .vm-art-card__index {
  margin: 0;
}

.pi-vm-v2 .vm-art-card--character .vm-art-card__media {
  min-height: 0;
  background: #fff;
}

.pi-vm-v2 .vm-art-card__media--character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0 10px 8px;
  box-sizing: border-box;
}

.pi-vm-v2 .vm-art-card--material {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  align-items: stretch;
}

.pi-vm-v2 .vm-art-card--material .vm-art-card__content {
  justify-content: center;
}

.pi-vm-v2 .vm-art-card--material {
  grid-column: span 2;
}

.pi-vm-v2 .vm-art-card__media--material {
  background: #fff;
  display: grid;
  place-items: center;
}

.pi-vm-v2 .vm-art-card__media--material img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  padding: 8px 10px 8px 0;
  box-sizing: border-box;
}

.pi-vm-v2 .vm-art-card--impact {
  grid-column: span 2;
}

.pi-vm-v2 .vm-art-card__impact-title {
  margin: 0 !important;
  color: #111 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: .95 !important;
  letter-spacing: -.05em;
}

.pi-vm-v2 .vm-art-card__impact-title span,
.pi-vm-v2 .vm-art-card__impact-title strong {
  display: block;
}

.pi-vm-v2 .vm-art-card__impact-title span {
  font-weight: 320;
}

.pi-vm-v2 .vm-art-card__impact-title strong {
  margin-top: 3px;
  color: var(--pi-brand-live-color, #e3063b);
  font-weight: 650;
}

.pi-vm-v2 .vm-art-card--threshold {
  grid-column: span 2;
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
}

.pi-vm-v2 .vm-art-card__media--threshold {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.pi-vm-v2 .vm-art-card__media--threshold img {
  display: block;
  width: 76%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  padding: 12px 0 12px 18px;
  box-sizing: border-box;
}

.pi-vm-v2 .vm-art-card__content--threshold {
  position: relative;
  z-index: 2;
  min-height: 100%;
  padding: clamp(16px, 1.55vw, 24px);
  pointer-events: none;
}

.pi-vm-v2 .vm-art-card__content--threshold .vm-art-card__index {
  margin: 0;
}

.pi-vm-v2 .vm-art-threshold-copy {
  margin-top: auto;
  width: min(48%, 260px);
  padding: 10px 12px 10px 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.94) 68%,
    rgba(255,255,255,0) 100%
  );
}

.pi-vm-v2 .vm-art-threshold-copy h3 {
  margin: 0 0 8px;
}

.pi-vm-v2 .vm-art-threshold-copy p {
  max-width: 31ch;
}

@media (min-width: 900px) and (max-height: 820px) {
  .pi-vm-v2 .vm-portfolio-content--artdirection {
    gap: 10px;
    padding-top: 12px;
  }

  .pi-vm-v2 .vm-artdirection-intro__copy h2 {
    font-size: 12px;
  }

  .pi-vm-v2 .vm-art-card__content {
    padding: 14px;
  }

  .pi-vm-v2 .vm-art-card__index {
    font-size: 7px;
  }

  .pi-vm-v2 .vm-art-card h3 {
    font-size: 18px;
  }

  .pi-vm-v2 .vm-art-card p {
    font-size: 10px;
    line-height: 1.38;
  }

  .pi-vm-v2 .vm-art-card__lead {
    font-size: 14px !important;
  }

  .pi-vm-v2 .vm-art-swatches {
    height: 46px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-artdirection-intro {
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 8px;
  }

  .pi-vm-v2 .vm-artdirection-kicker {
    font-size: 10px;
  }

  .pi-vm-v2 .vm-artdirection-intro__copy h2 {
    font-size: 10px;
    letter-spacing: .11em;
    font-weight: 600;
    text-transform: uppercase;
  }

  .pi-vm-v2 .vm-artdirection-board {
    gap: 8px;
  }

  .pi-vm-v2 .vm-art-card__content {
    padding: 12px;
  }

  .pi-vm-v2 .vm-art-card__index {
    font-size: 7px;
  }

  .pi-vm-v2 .vm-art-card h3 {
    font-size: 17px;
  }

  .pi-vm-v2 .vm-art-card p {
    font-size: 9px;
    line-height: 1.38;
  }

  .pi-vm-v2 .vm-art-card__lead {
    font-size: 13px !important;
  }

  .pi-vm-v2 .vm-art-swatches {
    height: 36px;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-portfolio-content--artdirection {
    display: block;
    padding: 26px 0 12px;
  }

  .pi-vm-v2 .vm-artdirection-intro {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }

  .pi-vm-v2 .vm-artdirection-intro__title,
  .pi-vm-v2 .vm-artdirection-intro__copy {
    grid-column: auto;
    justify-content: flex-start;
    text-align: left;
  }

  .pi-vm-v2 .vm-artdirection-kicker,
  .pi-vm-v2 .vm-artdirection-intro__copy h2 {
    text-align: left;
  }

  .pi-vm-v2 .vm-artdirection-kicker {
    font-size: 11px;
  }

  .pi-vm-v2 .vm-artdirection-intro__copy h2 {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .11em;
    font-weight: 600;
    text-transform: uppercase;
  }

  .pi-vm-v2 .vm-artdirection-board {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
    overflow: visible;
  }

  .pi-vm-v2 .vm-art-card,
  .pi-vm-v2 .vm-art-card--universe,
  .pi-vm-v2 .vm-art-card--surreal,
  .pi-vm-v2 .vm-art-card--color,
  .pi-vm-v2 .vm-art-card--character,
  .pi-vm-v2 .vm-art-card--material,
  .pi-vm-v2 .vm-art-card--impact,
  .pi-vm-v2 .vm-art-card--threshold {
    grid-column: auto;
    min-height: 220px;
  }

  .pi-vm-v2 .vm-art-card__content {
    padding: 20px;
  }

  .pi-vm-v2 .vm-art-card__content--centered .vm-art-card__index {
    top: 20px;
    left: 20px;
  }

  .pi-vm-v2 .vm-art-card h3 {
    font-size: 26px;
  }

  .pi-vm-v2 .vm-art-card p {
    font-size: 14px;
    line-height: 1.55;
  }

  .pi-vm-v2 .vm-art-card__lead {
    font-size: 20px !important;
  }

  .pi-vm-v2 .vm-art-swatches {
    height: 52px;
  }

  .pi-vm-v2 .vm-art-card--material {
    grid-template-columns: 1fr;
  }

  .pi-vm-v2 .vm-art-card--threshold {
    min-height: 310px;
  }

  .pi-vm-v2 .vm-art-card--character {
    grid-template-rows: auto auto;
  }

  .pi-vm-v2 .vm-art-card__media--threshold img {
    width: 84%;
    height: 100%;
    object-position: left center;
    padding: 18px 0 18px 14px;
  }

  .pi-vm-v2 .vm-art-threshold-copy {
    width: min(66%, 280px);
    padding-right: 20px;
  }

  .pi-vm-v2 .vm-art-card__media--character img {
    height: auto;
    max-height: none;
    padding: 0 14px 16px;
  }

  .pi-vm-v2 .vm-art-card__media--material {
    min-height: 220px;
  }


}


/* ==========================================================
   LOTE 222 · REPARACIÓN SEGURA · UMBRAL
   ----------------------------------------------------------
   IMPORTANTE:
   Este override parte del LOTE 220 válido. No reescribe el
   motor del portfolio ni la retícula del slide 02.
   ========================================================== */

/* Desktop: imagen a la derecha + copy superpuesto a la izquierda,
   sin ninguna capa blanca debajo del texto. */
.pi-vm-v2 .vm-art-card--threshold .vm-art-card__media--threshold img {
  width: 78%;
  height: 100%;
  margin: 0 0 0 auto;
  object-fit: contain;
  object-position: right center;
  padding: 12px 18px 12px 0;
  box-sizing: border-box;
}

.pi-vm-v2 .vm-art-card--threshold .vm-art-card__content--threshold {
  align-items: flex-start;
  text-align: left;
}

.pi-vm-v2 .vm-art-card--threshold .vm-art-threshold-copy {
  width: min(40%, 230px);
  margin-top: auto;
  padding: 0;
  background: transparent !important;
  text-align: left;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--threshold .vm-art-card__media--threshold img {
    width: 76%;
    margin-left: auto;
    object-position: right center;
    padding: 12px 12px 12px 0;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-threshold-copy {
    width: min(44%, 220px);
    background: transparent !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--threshold .vm-art-card__media--threshold img {
    width: 88%;
    height: 100%;
    margin-left: auto;
    object-position: right center;
    padding: 18px 14px 18px 0;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-threshold-copy {
    width: min(60%, 260px);
    padding: 0;
    background: transparent !important;
  }
}

/* ==========================================================
   LOTE 223 · MATERIA COMO MINI-HERO + COPY SURREALISMO
   ----------------------------------------------------------
   MATERIA adopta la misma sensación visual que INTENCIÓN:
   imagen de fondo / hero, alineada a la derecha y copy
   superpuesto a la izquierda, sin capas blancas.
   ========================================================== */

.pi-vm-v2 .vm-art-card--material {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
}

.pi-vm-v2 .vm-art-card--material .vm-art-card__media--material {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  display: block;
}

.pi-vm-v2 .vm-art-card--material .vm-art-card__media--material img {
  display: block;
  width: 78%;
  height: 100%;
  margin: 0 0 0 auto;
  object-fit: contain;
  object-position: right center;
  padding: 12px 18px 12px 0;
  box-sizing: border-box;
  transform: none;
}

.pi-vm-v2 .vm-art-card--material .vm-art-card__content--material {
  position: relative;
  z-index: 2;
  min-height: 100%;
  padding: clamp(16px, 1.55vw, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  pointer-events: none;
  background: transparent;
}

.pi-vm-v2 .vm-art-card--material .vm-art-card__content--material .vm-art-card__index {
  margin: 0;
}

.pi-vm-v2 .vm-art-card--material .vm-art-material-copy {
  width: min(40%, 230px);
  margin-top: auto;
  padding: 0;
  background: transparent;
  text-align: left;
}

.pi-vm-v2 .vm-art-card--material .vm-art-material-copy h3 {
  margin: 0 0 8px;
}

.pi-vm-v2 .vm-art-card--material .vm-art-material-copy p {
  max-width: 31ch;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-card__media--material img {
    width: 76%;
    margin-left: auto;
    object-position: right center;
    padding: 12px 12px 12px 0;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-material-copy {
    width: min(44%, 220px);
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--material {
    min-height: 310px;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-card__media--material {
    min-height: 0;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-card__media--material img {
    width: 88%;
    height: 100%;
    margin-left: auto;
    object-position: right center;
    padding: 18px 14px 18px 0;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-material-copy {
    width: min(60%, 260px);
    padding: 0;
  }
}

/* ==========================================================
   LOTE 224 · REVEAL EDITORIAL · MATERIA + INTENCIÓN
   ----------------------------------------------------------
   Escritorio:
   - imagen protagonista
   - título inferior visible
   - hover / focus: la capa sube
   - mouseleave: vuelve a bajar

   Touch / tablet / móvil:
   - apertura por botón
   - la clase .is-revealed la controla JS
   ========================================================== */

.pi-vm-v2 .vm-art-reveal-card {
  --vm-art-reveal-top: 38px;
  --vm-art-reveal-tab: 58px;
  position: relative;
  display: block !important;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.pi-vm-v2 .vm-art-reveal-card__eyebrow {
  position: absolute;
  top: clamp(16px, 1.55vw, 24px);
  left: clamp(16px, 1.55vw, 24px);
  z-index: 5;
  width: auto;
  margin: 0;
  pointer-events: none;
}

.pi-vm-v2 .vm-art-reveal-card__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background: #fff;
}

.pi-vm-v2 .vm-art-reveal-card__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  object-fit: contain !important;
  transform: none !important;
}

/* MATERIA: pieza principal más centrada, ligeramente desplazada a la derecha. */
.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
  object-position: 62% 48% !important;
  padding: 24px 18px 46px 48px !important;
}

/* INTENCIÓN: boceto frontal alineado a la derecha. */
.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
  object-position: right center !important;
  padding: 20px 18px 44px 82px !important;
}

.pi-vm-v2 .vm-art-reveal-panel {
  position: absolute;
  top: var(--vm-art-reveal-top);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255,255,255,.985);
  border-top: 1px solid rgba(0,0,0,.14);
  transform: translateY(calc(100% - var(--vm-art-reveal-tab)));
  transition:
    transform .42s cubic-bezier(.22,.72,.18,1),
    box-shadow .42s ease;
  will-change: transform;
}

.pi-vm-v2 .vm-art-reveal-trigger {
  flex: 0 0 var(--vm-art-reveal-tab);
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 0 clamp(16px,1.55vw,24px);
  border: 0;
  background: transparent;
  color: #111;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.pi-vm-v2 .vm-art-reveal-trigger__title {
  min-width: 0;
  font-size: clamp(19px, 1.5vw, 25px);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.pi-vm-v2 .vm-art-reveal-trigger__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  justify-self: end;
  color: #111;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .3s ease;
}

.pi-vm-v2 .vm-art-reveal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding:
    clamp(12px,1.2vw,18px)
    clamp(16px,1.55vw,24px)
    clamp(18px,1.7vw,26px);
  overflow: auto;
  scrollbar-width: thin;
}

.pi-vm-v2 .vm-art-reveal-body p {
  max-width: 42ch;
  margin: 0;
  color: rgba(17,17,17,.72);
  font-size: clamp(12px, .88vw, 14px);
  line-height: 1.58;
  text-wrap: pretty;
}

.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-panel,
.pi-vm-v2 .vm-art-reveal-card:focus-within .vm-art-reveal-panel {
  transform: translateY(0);
  box-shadow: 0 -14px 34px rgba(0,0,0,.035);
}

.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-trigger__arrow,
.pi-vm-v2 .vm-art-reveal-card:focus-within .vm-art-reveal-trigger__arrow {
  transform: rotate(180deg);
}

/* Hover solo donde existe un puntero real y preciso. */
@media (hover:hover) and (pointer:fine) {
  .pi-vm-v2 .vm-art-reveal-card:hover .vm-art-reveal-panel {
    transform: translateY(0);
    box-shadow: 0 -14px 34px rgba(0,0,0,.035);
  }

  .pi-vm-v2 .vm-art-reveal-card:hover .vm-art-reveal-trigger__arrow {
    transform: rotate(180deg);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-reveal-card {
    --vm-art-reveal-top: 32px;
    --vm-art-reveal-tab: 52px;
  }

  .pi-vm-v2 .vm-art-reveal-trigger__title {
    font-size: 17px;
  }

  .pi-vm-v2 .vm-art-reveal-body p {
    font-size: 11px;
    line-height: 1.5;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    padding: 20px 12px 40px 36px !important;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    padding: 18px 12px 40px 56px !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-reveal-card {
    --vm-art-reveal-top: 40px;
    --vm-art-reveal-tab: 58px;
    min-height: 340px !important;
  }

  .pi-vm-v2 .vm-art-reveal-card__eyebrow {
    top: 18px;
    left: 20px;
  }

  .pi-vm-v2 .vm-art-reveal-trigger {
    padding: 0 20px;
  }

  .pi-vm-v2 .vm-art-reveal-trigger__title {
    font-size: 24px;
  }

  .pi-vm-v2 .vm-art-reveal-body {
    padding: 16px 20px 24px;
  }

  .pi-vm-v2 .vm-art-reveal-body p {
    max-width: none;
    font-size: 14px;
    line-height: 1.58;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img,
  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    padding: 34px 14px 52px 14px !important;
    object-position: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-vm-v2 .vm-art-reveal-panel,
  .pi-vm-v2 .vm-art-reveal-trigger__arrow {
    transition: none !important;
  }
}

/* ==========================================================
   LOTE 225 · REVEAL EDITORIAL · PULIDO VISUAL
   ----------------------------------------------------------
   - títulos inferiores más sutiles
   - imágenes más grandes y protagonistas
   - barra y panel con mayor translucidez
   - imagen visible detrás del panel
   - copy siempre alineado a la izquierda
   ========================================================== */

.pi-vm-v2 .vm-art-reveal-card {
  --vm-art-reveal-tab: 48px;
}

/* Panel translúcido tanto cerrado como desplegado. */
.pi-vm-v2 .vm-art-reveal-panel {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Perfil inferior más fino/editorial. */
.pi-vm-v2 .vm-art-reveal-trigger {
  grid-template-columns: minmax(0,1fr) 24px;
  gap: 10px;
  padding: 0 clamp(14px,1.25vw,20px);
}

.pi-vm-v2 .vm-art-reveal-trigger__title {
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 520;
}

.pi-vm-v2 .vm-art-reveal-trigger__arrow {
  width: 24px;
  height: 24px;
  font-size: 18px;
}

/* Textos del panel: siempre a la izquierda. */
.pi-vm-v2 .vm-art-reveal-body {
  text-align: left !important;
}

.pi-vm-v2 .vm-art-reveal-body p {
  width: 100%;
  max-width: 42ch;
  margin-right: auto;
  margin-left: 0;
  text-align: left !important;
}

/* Las imágenes ocupan más superficie y continúan por detrás
   de la barra translúcida inferior. */
.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
  object-position: 58% 50% !important;
  padding: 8px 2px 0 12px !important;
  transform: scale(1.16) !important;
  transform-origin: 58% 52%;
}

.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
  object-position: 70% 50% !important;
  padding: 6px 4px 0 18px !important;
  transform: scale(1.14) !important;
  transform-origin: 70% 50%;
}

/* El panel abierto conserva transparencia: la imagen sigue respirando. */
.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-panel,
.pi-vm-v2 .vm-art-reveal-card:focus-within .vm-art-reveal-panel {
  background: rgba(255,255,255,.86);
}

@media (hover:hover) and (pointer:fine) {
  .pi-vm-v2 .vm-art-reveal-card:hover .vm-art-reveal-panel {
    background: rgba(255,255,255,.86);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-reveal-card {
    --vm-art-reveal-tab: 46px;
  }

  .pi-vm-v2 .vm-art-reveal-trigger__title {
    font-size: 15px;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    padding: 8px 2px 0 10px !important;
    transform: scale(1.14) !important;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    padding: 6px 4px 0 12px !important;
    transform: scale(1.12) !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-reveal-card {
    --vm-art-reveal-tab: 52px;
  }

  .pi-vm-v2 .vm-art-reveal-trigger__title {
    font-size: 20px;
  }

  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img,
  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    padding: 16px 8px 0 8px !important;
    object-position: center !important;
    transform: scale(1.10) !important;
    transform-origin: center;
  }

  .pi-vm-v2 .vm-art-reveal-body p {
    max-width: none;
  }
}

/* ==========================================================
   LOTE 226 · AJUSTE FINO REVEAL
   ----------------------------------------------------------
   CERRADO:
   - barra inferior más translúcida

   ABIERTO:
   - mantiene la opacidad del Lote 225

   MATERIA:
   - menos expansión
   - más aire superior e inferior
   - las piezas no tocan los límites del card
   ========================================================== */

/* Estado cerrado: deja leer mejor la imagen que pasa por detrás. */
.pi-vm-v2 .vm-art-reveal-panel {
  background: rgba(255,255,255,.67);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Estado abierto: recupera la legibilidad aprobada del Lote 225. */
.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-panel,
.pi-vm-v2 .vm-art-reveal-card:focus-within .vm-art-reveal-panel {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

@media (hover:hover) and (pointer:fine) {
  .pi-vm-v2 .vm-art-reveal-card:hover .vm-art-reveal-panel {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* MATERIA · devuelve respiración a los bloques.
   Umbral se mantiene exactamente como estaba en Lote 225. */
.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
  object-position: 58% 50% !important;
  padding: 22px 16px 54px 28px !important;
  transform: scale(1.04) !important;
  transform-origin: 58% 50%;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    padding: 18px 12px 50px 22px !important;
    transform: scale(1.03) !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    padding: 24px 14px 58px 14px !important;
    object-position: center !important;
    transform: scale(1.02) !important;
    transform-origin: center;
  }
}

/* ==========================================================
   LOTE 227 · AJUSTE FINO ESCALA MATERIA / UMBRAL
   ----------------------------------------------------------
   - MATERIA: aumentar presencia aprox. +15%
   - UMBRAL: reducir aprox. -10% y añadir padding-top
   ========================================================== */

/* MATERIA · gana presencia pero mantiene aire y lectura del panel. */
.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
  object-position: 58% 54% !important;
  padding: 12px 10px 44px 18px !important;
  transform: scale(1.12) !important;
  transform-origin: 58% 54%;
}

/* UMBRAL · baja un poco de escala y se separa del borde superior. */
.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
  object-position: 74% 58% !important;
  padding: 20px 10px 40px 10px !important;
  transform: scale(0.92) !important;
  transform-origin: 74% 58%;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    object-position: 58% 54% !important;
    padding: 12px 10px 44px 16px !important;
    transform: scale(1.10) !important;
    transform-origin: 58% 54%;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    object-position: 74% 58% !important;
    padding: 18px 10px 38px 10px !important;
    transform: scale(0.94) !important;
    transform-origin: 74% 58%;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    object-position: center 54% !important;
    padding: 18px 12px 50px 12px !important;
    transform: scale(1.08) !important;
    transform-origin: center 54%;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    object-position: center 56% !important;
    padding: 18px 12px 48px 12px !important;
    transform: scale(0.96) !important;
    transform-origin: center 56%;
  }
}

/* ==========================================================
   LOTE 228 · REVEAL INDEPENDIENTE + CENTRADO VISUAL
   ----------------------------------------------------------
   1. MATERIA centrada vertical/horizontalmente.
   2. UMBRAL vuelve casi al tamaño del Lote 225 (-5%) y centrado.
   3. Hover solo nace desde la franja inferior/trigger.
   4. Cada card funciona de forma totalmente independiente.
   ========================================================== */

/* Desactivar apertura por hover/focus heredada del card completo. */
.pi-vm-v2 .vm-art-reveal-card:hover .vm-art-reveal-panel,
.pi-vm-v2 .vm-art-reveal-card:focus-within .vm-art-reveal-panel {
  transform: translateY(calc(100% - var(--vm-art-reveal-tab)));
  box-shadow: none;
}

.pi-vm-v2 .vm-art-reveal-card:hover .vm-art-reveal-trigger__arrow,
.pi-vm-v2 .vm-art-reveal-card:focus-within .vm-art-reveal-trigger__arrow {
  transform: rotate(0deg);
}

/* Solo clases explícitas abren: hover intencional o click fijado. */
.pi-vm-v2 .vm-art-reveal-card.is-hovered .vm-art-reveal-panel,
.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-panel {
  transform: translateY(0);
  box-shadow: 0 -14px 34px rgba(0,0,0,.035);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.pi-vm-v2 .vm-art-reveal-card.is-hovered .vm-art-reveal-trigger__arrow,
.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-trigger__arrow {
  transform: rotate(180deg);
}

/* Estado cerrado: franja translúcida. */
.pi-vm-v2 .vm-art-reveal-card:not(.is-hovered):not(.is-revealed) .vm-art-reveal-panel {
  background: rgba(255,255,255,.67);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* MATERIA · mismo tamaño del Lote 227, pero centrado exacto en el card. */
.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media {
  display: grid !important;
  place-items: center !important;
}

.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 14px 14px 48px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(1.12) !important;
  transform-origin: center center !important;
}

/* UMBRAL · recuperar escala previa y reducir solo ~5%; centrado real. */
.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media {
  display: grid !important;
  place-items: center !important;
}

.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 12px 14px 46px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    padding: 12px 12px 46px !important;
    transform: scale(1.10) !important;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    padding: 12px 12px 44px !important;
    transform: scale(1.06) !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    padding: 18px 12px 54px !important;
    transform: scale(1.08) !important;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    padding: 18px 12px 52px !important;
    transform: scale(1.04) !important;
  }
}

/* ==========================================================
   LOTE 229 · IMÁGENES FIT + REVEAL FIJO POR HOVER
   ----------------------------------------------------------
   - MATERIA y UMBRAL: centrados real horizontal/vertical.
   - Sin escalado que pueda sacar la imagen fuera del card.
   - Mantiene la franja inferior superpuesta/translúcida.
   ========================================================== */

.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media,
.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* MATERIA · protagonista, pero siempre contenida. */
.pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* UMBRAL · conserva gran presencia, pero cabe entero dentro del card. */
.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
  width: 91% !important;
  height: 91% !important;
  max-width: 91% !important;
  max-height: 91% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    width: 84% !important;
    height: 84% !important;
    max-width: 84% !important;
    max-height: 84% !important;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    width: 89% !important;
    height: 89% !important;
    max-width: 89% !important;
    max-height: 89% !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--material .vm-art-reveal-card__media img {
    width: 84% !important;
    height: 84% !important;
    max-width: 84% !important;
    max-height: 84% !important;
  }

  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
  }
}

/* Solo los estados fijados abren la capa. El hover se convierte en
   fijado desde JS al entrar en la franja inferior. */
.pi-vm-v2 .vm-art-reveal-card.is-hovered .vm-art-reveal-panel {
  transform: translateY(calc(100% - var(--vm-art-reveal-tab))) !important;
  box-shadow: none !important;
}

.pi-vm-v2 .vm-art-reveal-card.is-hovered .vm-art-reveal-trigger__arrow {
  transform: rotate(0deg) !important;
}

.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-panel {
  transform: translateY(0) !important;
  box-shadow: 0 -14px 34px rgba(0,0,0,.035) !important;
  background: rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

.pi-vm-v2 .vm-art-reveal-card.is-revealed .vm-art-reveal-trigger__arrow {
  transform: rotate(180deg) !important;
}

/* ==========================================================
   LOTE 230 · UMBRAL · +30 PX APROX. + ALINEACIÓN BOTTOM
   ----------------------------------------------------------
   Solo afecta a INTENCIÓN / EL UMBRAL.
   MATERIA queda exactamente como en Lote 229.
   ========================================================== */

.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
}

.pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
  width: 97% !important;
  height: 97% !important;
  max-width: 97% !important;
  max-height: 97% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  transform-origin: center bottom !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    width: 95% !important;
    height: 95% !important;
    max-width: 95% !important;
    max-height: 95% !important;
    object-position: center bottom !important;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-card--threshold .vm-art-reveal-card__media img {
    width: 94% !important;
    height: 94% !important;
    max-width: 94% !important;
    max-height: 94% !important;
    object-position: center bottom !important;
  }
}

/* ==========================================================
   LOTE 231 · FLECHAS REVEAL · COLOR VIVO
   ----------------------------------------------------------
   MATERIA + INTENCIÓN
   Las flechas ↑ / ↓ usan el mismo color vivo dinámico
   de Visual Marketing.
   ========================================================== */

.pi-vm-v2 .vm-art-reveal-trigger__arrow {
  color: var(--pi-brand-live-color, #e3063b) !important;
}

/* ==========================================================
   LOTE 232 · UNIVERSO + LENGUAJE ARTÍSTICO
   ----------------------------------------------------------
   - Surrealismo: copy más corto y con más aire.
   - Blanco infinito: microcopy centrado, editorial y fino.
   ========================================================== */

.pi-vm-v2 .vm-art-universe-copy {
  width: min(76%, 430px);
  margin: 0 auto;
  text-align: center;
}

.pi-vm-v2 .vm-art-universe-copy h3 {
  margin: 0 0 14px;
}

.pi-vm-v2 .vm-art-universe-copy p {
  max-width: 46ch;
  margin: 0 auto;
  color: rgba(17,17,17,.58);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-art-universe-copy {
    width: min(82%, 360px);
  }

  .pi-vm-v2 .vm-art-universe-copy p {
    font-size: 10px;
    line-height: 1.46;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-art-universe-copy {
    width: min(88%, 520px);
  }

  .pi-vm-v2 .vm-art-universe-copy p {
    font-size: 14px;
    line-height: 1.55;
  }
}

/* ==========================================================
   LOTE 233 · PORTFOLIO · JERARQUÍA EDITORIAL + NAV SIN NÚMEROS
   ========================================================== */

.pi-vm-v2 .vm-portfolio-slidebar > .vm-portfolio-context-title {
  justify-self: start;
  text-align: left;
}

.pi-vm-v2 .vm-portfolio-context-title strong {
  margin-right: .4rem;
  color: var(--pi-brand-live-color, #e3063b);
}

.pi-vm-v2 .vm-portfolio-context-separator {
  display: inline-block;
  margin: 0 .55rem;
  color: rgba(17,17,17,.36);
  font-weight: 400;
}

.pi-vm-v2 .vm-portfolio-dots button {
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  padding: 0 14px;
}

.pi-vm-v2 .vm-portfolio-dots button strong {
  display: block;
  width: 100%;
  text-align: left;
}

.pi-vm-v2 .vm-portfolio-dots button::after {
  height: 1px;
}

.pi-vm-v2 .vm-portfolio-dots button:hover {
  color: #111;
}

.pi-vm-v2 .vm-portfolio-dots button:hover::after {
  transform: scaleX(1);
}

.pi-vm-v2 .vm-portfolio-dots button.is-active::after {
  height: 2px;
  transform: scaleX(1);
}

.pi-vm-v2 .vm-portfolio-counter {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-portfolio-dots button {
    padding: 0 10px;
  }

  .pi-vm-v2 .vm-portfolio-dots button strong {
    font-size: 9px;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-portfolio-dots button {
    flex: 0 0 auto;
    min-width: 138px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 14px;
    text-align: left;
  }

  .pi-vm-v2 .vm-portfolio-dots button strong {
    display: block !important;
    overflow: visible;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: clip;
    white-space: nowrap;
  }

  .pi-vm-v2 .vm-portfolio-slidebar > .vm-portfolio-context-title {
    justify-self: start;
    text-align: left;
  }
}

/* ==========================================================
   LOTE 234 · PORTFOLIO · FIRMA EDITORIAL MAESTRA DE CAMPAÑA
   ----------------------------------------------------------
   Estructura fija en los 6 capítulos:

   03 · PORTFOLIO / [CAPÍTULO]              VISUAL MARKETING
   ----------------------------------------------------------
   CAMPAÑA DE MARCA · EL UMBRAL · 2026      ENTRE ESTAR Y SER VISTO.
   ========================================================== */

.pi-vm-v2 .vm-portfolio-slide {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.pi-vm-v2 .vm-portfolio-slidebar__balance {
  display: block;
  min-width: 1px;
  min-height: 1px;
}

.pi-vm-v2 .vm-portfolio-projectmeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  min-height: clamp(42px, 5.2vh, 58px);
  padding: clamp(14px, 1.7vh, 18px) 0 0;
  box-sizing: border-box;
}

.pi-vm-v2 .vm-portfolio-projectmeta p {
  margin: 0;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .145em;
  text-transform: uppercase;
  text-wrap: balance;
}

.pi-vm-v2 .vm-portfolio-projectmeta__identity {
  justify-self: start;
  text-align: left;
  color: rgba(17,17,17,.52);
  font-weight: 500;
}

.pi-vm-v2 .vm-portfolio-projectmeta__identity strong {
  color: rgba(17,17,17,.82);
  font-weight: 600;
}

.pi-vm-v2 .vm-portfolio-projectmeta__identity span {
  display: inline-block;
  margin: 0 .34rem;
  color: rgba(17,17,17,.28);
  font-weight: 400;
}

.pi-vm-v2 .vm-portfolio-projectmeta__claim {
  justify-self: end;
  text-align: right;
  color: rgba(17,17,17,.78);
  font-weight: 540;
}

.pi-vm-v2 .vm-portfolio-content {
  padding-top: clamp(18px, 2.35vh, 28px);
}

@media (min-width: 1200px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    transform: translateY(-6px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    transform: none;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta {
    gap: 24px;
    min-height: 42px;
    padding-top: 12px;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta p {
    font-size: 8.5px;
    letter-spacing: .12em;
  }
}

.pi-vm-v2 .vm-portfolio-content--artdirection {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding-top: clamp(12px, 1.65vh, 18px);
}

.pi-vm-v2 .vm-artdirection-board {
  height: 100%;
}

.pi-vm-v2 .vm-artdirection-intro {
  display: none !important;
}

.pi-vm-v2 .vm-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 900px) and (max-height: 820px) {
  .pi-vm-v2 .vm-portfolio-projectmeta {
    min-height: 34px;
    padding-top: 9px;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta p {
    font-size: 8px;
  }

  .pi-vm-v2 .vm-portfolio-content--artdirection {
    padding-top: 9px;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 .vm-portfolio-slide {
    grid-template-rows: auto auto auto;
  }

  .pi-vm-v2 .vm-portfolio-slidebar__balance {
    display: none;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta {
    grid-template-columns: 1fr;
    gap: 7px;
    min-height: 0;
    padding: 14px 0 4px;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta p {
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: .115em;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta__identity {
    justify-self: start;
    max-width: 100%;
  }

  .pi-vm-v2 .vm-portfolio-projectmeta__claim {
    justify-self: end;
    max-width: 100%;
    text-align: right;
  }

  .pi-vm-v2 .vm-portfolio-content {
    padding-top: 22px;
  }

  .pi-vm-v2 .vm-portfolio-content--artdirection {
    display: block;
    padding: 22px 0 12px;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 242 · CASO DE ESTUDIO · 4 CAPÍTULOS
   01 ORIGEN · 02 DIRECCIÓN · 03 FILM · 04 ACTIVACIÓN
   ========================================================== */

.pi-vm-v2 #portfolio .vm-portfolio-dots {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

/* 03 · PRODUCCIÓN AUDIOVISUAL CON IA */
.pi-vm-v2 .vm-portfolio-content--film {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 2.22fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: center;
  min-height: 0;
}

.pi-vm-v2 .vm-film-intro {
  align-self: center;
  min-width: 0;
}

.pi-vm-v2 .vm-film-intro h2 {
  margin: 0 0 22px;
  color: #111;
  font-size: clamp(42px, 4.8vw, 72px);
  font-weight: 430;
  line-height: .96;
  letter-spacing: -.05em;
}

.pi-vm-v2 .vm-film-intro h2 span {
  color: rgba(17,17,17,.46);
  font-weight: 360;
}

.pi-vm-v2 .vm-film-intro > p:last-child {
  max-width: 40ch;
  margin: 0;
  color: #55504c;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
}

.pi-vm-v2 .vm-film-stage {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-self: center;
  background: #050505;
  overflow: hidden;
}

.pi-vm-v2 .vm-film-stage__frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 46px);
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  background: #050505;
}

.pi-vm-v2 .vm-film-stage__eyebrow {
  margin-bottom: auto;
  color: var(--pi-brand-live-color, #e3063b);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pi-vm-v2 .vm-film-stage__frame strong {
  margin-bottom: 8px;
  font-size: clamp(22px, 2.25vw, 36px);
  font-weight: 430;
  letter-spacing: -.035em;
}

.pi-vm-v2 .vm-film-stage__frame > span:last-child {
  color: rgba(255,255,255,.54);
  font-size: 12px;
  line-height: 1.5;
}

/* 04 · ACTIVACIÓN DE CAMPAÑA */
.pi-vm-v2 .vm-portfolio-content--activation {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 2.1fr);
  gap: clamp(34px, 4.5vw, 76px);
  align-items: center;
  min-height: 0;
}

.pi-vm-v2 .vm-activation-copy h2 {
  margin: 0 0 22px;
  color: #111;
  font-size: clamp(42px, 4.9vw, 76px);
  font-weight: 430;
  line-height: .95;
  letter-spacing: -.05em;
}

.pi-vm-v2 .vm-activation-copy h2 span {
  color: var(--pi-brand-live-color, #e3063b);
}

.pi-vm-v2 .vm-activation-copy > p:last-child {
  max-width: 42ch;
  margin: 0;
  color: #55504c;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
}

.pi-vm-v2 .vm-activation-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid rgba(0,0,0,.14);
  border-left: 1px solid rgba(0,0,0,.14);
}

.pi-vm-v2 .vm-activation-card {
  min-width: 0;
  min-height: clamp(150px, 17vh, 190px);
  padding: clamp(20px, 2vw, 30px);
  box-sizing: border-box;
  border-right: 1px solid rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(0,0,0,.14);
  background: #fff;
}

.pi-vm-v2 .vm-activation-card > span {
  display: block;
  margin-bottom: clamp(24px, 4vh, 44px);
  color: var(--pi-brand-live-color, #e3063b);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

.pi-vm-v2 .vm-activation-card strong {
  display: block;
  margin-bottom: 8px;
  color: #111;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .08em;
}

.pi-vm-v2 .vm-activation-card p {
  max-width: 34ch;
  margin: 0;
  color: rgba(17,17,17,.60);
  font-size: 11px;
  line-height: 1.48;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pi-vm-v2 .vm-portfolio-content--film,
  .pi-vm-v2 .vm-portfolio-content--activation {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 2.2fr);
    gap: 28px;
  }

  .pi-vm-v2 .vm-film-intro h2,
  .pi-vm-v2 .vm-activation-copy h2 {
    font-size: clamp(34px, 4vw, 50px);
  }

  .pi-vm-v2 .vm-activation-card {
    min-height: 132px;
    padding: 16px;
  }
}

@media (max-width: 767.98px) {
  .pi-vm-v2 #portfolio .vm-portfolio-dots {
    display: flex;
  }

  .pi-vm-v2 .vm-portfolio-content--film,
  .pi-vm-v2 .vm-portfolio-content--activation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pi-vm-v2 .vm-film-intro h2,
  .pi-vm-v2 .vm-activation-copy h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .pi-vm-v2 .vm-activation-board {
    grid-template-columns: 1fr;
  }

  .pi-vm-v2 .vm-activation-card {
    min-height: 128px;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 243
   CASO DE ESTUDIO · SLIDE 01 · CENTRADO VERTICAL REAL
   ----------------------------------------------------------
   El nav inferior es position:absolute, por lo que hasta ahora
   el contenido del 01 se centraba respecto a toda la altura del
   slide, incluyendo el espacio ocupado visualmente por el nav.

   Reservamos en el propio content la huella del nav:
   64 px + separación inferior del sistema.

   Resultado:
   - texto + imagen suben como un único bloque;
   - quedan centrados en el área ÚTIL visible;
   - no se toca tamaño, escala ni alineación horizontal;
   - Dirección de arte y resto de slides quedan intactos.
   ========================================================== */

@media (min-width: 768px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    transform: none !important;
    padding-bottom: calc(64px + var(--vm-portfolio-bottom)) !important;
  }
}

/* Móvil conserva su flujo natural. */
@media (max-width: 767.98px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--concept {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================
   PUBLIMPACTO · LOTE 244
   CASO DE ESTUDIO · SLIDES 03 + 04
   ----------------------------------------------------------
   - centrado vertical real en el área útil;
   - columna editorial siempre alineada a la izquierda;
   - vídeo ~8% más pequeño;
   - no se modifica el slide 02 ni el motor JS.
   ========================================================== */

@media (min-width: 768px) {

  /* Reservamos la huella del nav inferior, igual que en el slide 01. */
  .pi-vm-v2 #portfolio .vm-portfolio-content--film,
  .pi-vm-v2 #portfolio .vm-portfolio-content--activation {
    padding-bottom: calc(64px + var(--vm-portfolio-bottom)) !important;
    align-items: center !important;
  }

  /* 03 · Producción audiovisual: copy completamente a la izquierda. */
  .pi-vm-v2 #portfolio .vm-film-intro,
  .pi-vm-v2 #portfolio .vm-film-intro *,
  .pi-vm-v2 #portfolio .vm-film-intro .vm-portfolio-overline {
    text-align: left !important;
  }

  .pi-vm-v2 #portfolio .vm-film-intro {
    justify-self: start !important;
    align-self: center !important;
  }

  /* Vídeo ligeramente más pequeño y centrado dentro de su columna. */
  .pi-vm-v2 #portfolio .vm-film-stage {
    width: 92% !important;
    max-width: 92% !important;
    justify-self: center !important;
    align-self: center !important;
  }

  /* 04 · Activación: copy completamente a la izquierda. */
  .pi-vm-v2 #portfolio .vm-activation-copy,
  .pi-vm-v2 #portfolio .vm-activation-copy *,
  .pi-vm-v2 #portfolio .vm-activation-copy .vm-portfolio-overline {
    text-align: left !important;
  }

  .pi-vm-v2 #portfolio .vm-activation-copy {
    justify-self: start !important;
    align-self: center !important;
  }

  .pi-vm-v2 #portfolio .vm-activation-board {
    align-self: center !important;
  }
}

/* Móvil: flujo natural y vídeo a ancho completo. */
@media (max-width: 767.98px) {
  .pi-vm-v2 #portfolio .vm-portfolio-content--film,
  .pi-vm-v2 #portfolio .vm-portfolio-content--activation {
    padding-bottom: 0 !important;
  }

  .pi-vm-v2 #portfolio .vm-film-intro,
  .pi-vm-v2 #portfolio .vm-film-intro *,
  .pi-vm-v2 #portfolio .vm-activation-copy,
  .pi-vm-v2 #portfolio .vm-activation-copy * {
    text-align: left !important;
  }

  .pi-vm-v2 #portfolio .vm-film-stage {
    width: 100% !important;
    max-width: 100% !important;
  }
}