/* ============================================================
   PCX Hover Tabs
   colA (30%): lista de títulos.
   colB (70%): colB1 (wysiwyg + botón, top) 50% + colB2 (imagen) 50%.
   Sin imagen en el ítem activo -> colB1 ocupa el 100% de colB.
============================================================ */
.pcx-hover-tabs{
  color:#fff;
}

.pcx-hover-tabs__eyebrow{
  margin:0 0 32px;
  font-size:clamp(18px,2vw,22px);
  font-style:italic;
  color:rgba(255,255,255,.9);
}

.pcx-hover-tabs__body{
  display:flex;
  align-items:stretch;
  gap:48px;
}

/* ---------- colA: lista de títulos ---------- */
.pcx-hover-tabs__list{
  width: 30%;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
}

.pcx-hover-tabs__item{
  position:relative;
  padding:10px 0;
  font:800 clamp(20px,2.6vw,28px)/1.2 "Archivo Black",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  cursor:pointer;
  opacity:.85;
  transition:opacity .3s ease;
}

.pcx-hover-tabs__item:hover,
.pcx-hover-tabs__item:focus-visible,
.pcx-hover-tabs__item.is-active{
  opacity:1;
}

.pcx-hover-tabs__item:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

/* flecha que señala el ítem activo, flota en el gutter hacia colB */
.pcx-hover-tabs__item::after{
  content:"";
  position:absolute;
  top:17px;
  right:-0;
  width:10px;
  height:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cpath d='M0 0.155758L0 1.6206C0 1.72021 0.0488282 1.81396 0.128906 1.87255L7.77734 7.42138L0.128906 12.9702C0.0488282 13.0288 0 13.1226 0 13.2222L0 14.687C0 14.814 0.144531 14.8882 0.248047 14.814L9.74219 7.92724C10.0859 7.67724 10.0859 7.16552 9.74219 6.91748L0.248047 0.0307579C0.144531 -0.0454149 0 0.0288048 0 0.155758Z' fill='white'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s ease, transform .3s ease;
}

.pcx-hover-tabs__item.is-active::after{
  opacity:1;
  transform:translateX(0);
}

/* ---------- colB ---------- */
.pcx-hover-tabs__col-b{
  width: 70%;
  display:flex;
  align-items:stretch;
  gap:40px;
}

.pcx-hover-tabs__col-b1{
  flex:0 0 calc(30% - 20px);
  max-width:calc(30% - 20px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:flex-basis .5s ease, max-width .5s ease;
}

.pcx-hover-tabs__col-b2{
  position:relative;
  flex:0 0 calc(70% - 20px);
  max-width:calc(70% - 20px);
  opacity:1;
  transition:flex-basis .5s ease, max-width .5s ease, opacity .4s ease;
}

/* sin imagen en el ítem activo: colB1 toma el 100% de colB */
.pcx-hover-tabs__col-b--no-image .pcx-hover-tabs__col-b1{
  flex-basis:100%;
  max-width:100%;
}

.pcx-hover-tabs__col-b--no-image .pcx-hover-tabs__col-b2{
  flex-basis:0%;
  max-width:0%;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}

/* ---------- colB1: panels (wysiwyg + botón) apilados con crossfade ---------- */
.pcx-hover-tabs__panels{
  display:grid;
}

.pcx-hover-tabs__panel{
  grid-area:1/1;
  align-self:start;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s ease;
}

.pcx-hover-tabs__panel.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

.pcx-hover-tabs__text{
  font:400 16px/1.5 "Inter",system-ui,sans-serif;
  color:#fff;
  max-width: 80%;
}

.pcx-hover-tabs__text p{
  margin:0 0 12px;
}

.pcx-hover-tabs__text p:last-child{
  margin-bottom:0;
}

.pcx-hover-tabs__text strong{
  color:#fff;
}

.pcx-hover-tabs__button{
  display:inline-block;
  align-self:flex-start;
  margin-top:24px;
  padding:14px 28px;
  border-radius:100px;
  border:1px solid #fff;
  color:#fff;
  font:700 12px/1 "Glacial Indifference",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .25s ease, color .25s ease;
}

.pcx-hover-tabs__button:hover{
  background:#fff;
  color:#111;
}

/* ---------- colB2: imagen con crossfade, altura = fila (colA / colB1) ---------- */
.pcx-hover-tabs__images{
  position:relative;
  width:100%;
  height:100%;
  min-height:220px;
  display:grid;
  grid-template-rows:1fr;
  grid-template-columns:1fr;
  border-radius:24px;
  overflow:hidden;
}

.pcx-hover-tabs__image{
  grid-area:1/1;
  width:100%;
  height:100%;
  min-height: 400px;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .5s ease;
}

.pcx-hover-tabs__image.is-active{
  opacity:1;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width:1024px){
  .pcx-hover-tabs__body{
    flex-direction:column;
    gap:24px;
  }

  .pcx-hover-tabs__list{
    flex:1 1 auto;
    max-width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    gap:16px 28px;
  }

  .pcx-hover-tabs__item::after{
    display:none;
  }

  .pcx-hover-tabs__col-b{
    flex:1 1 auto;
    max-width:100%;
    flex-direction:column;
    gap:24px;
  }

  .pcx-hover-tabs__col-b1,
  .pcx-hover-tabs__col-b2{
    flex-basis:auto;
    max-width:100%;
  }

  .pcx-hover-tabs__images{
    min-height:260px;
  }
}

@media (prefers-reduced-motion:reduce){
  .pcx-hover-tabs,
  .pcx-hover-tabs *{
    transition:none !important;
  }
}