/* ===========================
   PORTAFOLIO: Mapa ubicaciones (AISLADO)
   =========================== */

.pf-locs{
  margin-top: 6px;
  margin-bottom: 18px;
}

.pf-locs__wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 980px){
  .pf-locs__wrap{ grid-template-columns: 1fr; }
}

/* Card izquierda (glow + borde) */
.pf-locs__card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,16,28,.72), rgba(10,14,24,.35));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
}

/* Glow suave animado */
.pf-locs__card::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: conic-gradient(from 180deg,
    rgba(74,163,255,0),
    rgba(74,163,255,.18),
    rgba(139,92,246,.16),
    rgba(255,79,216,.16),
    rgba(74,163,255,0)
  );
  filter: blur(26px);
  opacity: .38;
  animation: pfLocSpin 11s linear infinite;
}

@keyframes pfLocSpin{ to{ transform: rotate(360deg); } }

.pf-locs__map{
  position: relative;
  z-index: 2;
  min-height: 260px;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* “Mapa” abstracto tipo México (sin imagen) */
.pf-locs__map::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 22px;
  background:
    radial-gradient(260px 220px at 25% 40%, rgba(74,163,255,.18), transparent 60%),
    radial-gradient(240px 220px at 70% 65%, rgba(255,79,216,.14), transparent 62%),
    radial-gradient(280px 260px at 50% 50%, rgba(139,92,246,.12), transparent 65%),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

/* Silueta “Mexico-like” (abstracta) */
.pf-locs__map::after{
  content:"";
  position:absolute;
  width: min(420px, 90%);
  height: 210px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  filter: blur(.0px);
  opacity: .9;

  /* recorte abstracto para parecer mapa */
  clip-path: polygon(
    10% 22%, 22% 18%, 35% 22%, 44% 30%, 52% 26%, 60% 34%, 68% 30%,
    76% 40%, 72% 52%, 78% 64%, 70% 74%, 58% 70%, 50% 78%, 40% 72%,
    30% 80%, 18% 72%, 14% 60%, 20% 48%, 12% 38%
  );
}

.pf-locs__hint{
  position:absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(234,240,255,.70);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

/* ========= Pins ========= */

.pf-pin{
  position: absolute;
  z-index: 4;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
}

/* Dot (pin) */
.pf-pin__dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: block;
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
  box-shadow: 0 0 18px rgba(74,163,255,.22), 0 0 26px rgba(255,79,216,.16);
  border: 1px solid rgba(255,255,255,.22);
  position: relative;
}

/* pulso */
.pf-pin__dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  opacity: .0;
  animation: pfPulse 2.2s ease-in-out infinite;
}

@keyframes pfPulse{
  0%{ transform: scale(.85); opacity: .0; }
  35%{ opacity: .55; }
  100%{ transform: scale(1.4); opacity: 0; }
}

/* Label */
.pf-pin__label{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(234,240,255,.92);

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  transform-origin: left center;
  transition: .18s ease;
}

.pf-pin:hover .pf-pin__label{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(2px);
}

/* Posiciones (ajustables) */
.pf-pin--cdmx{ left: 56%; top: 46%; }
.pf-pin--apizaco{ left: 58%; top: 52%; }
.pf-pin--tlaxcala{ left: 60%; top: 56%; }
.pf-pin--veracruz{ left: 71%; top: 62%; }

/* Texto derecha */
.pf-locs__text{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,24,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 18px;
}

.pf-locs__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}

.pf-chip{
  display:inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.78);
  font-size: 13px;
}

.pf-locs__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce){
  .pf-locs__card::before,
  .pf-pin__dot::after{
    animation: none !important;
  }
}

/* ===============================
   PORTAFOLIO – HOVER CARDS (AISLADO)
   =============================== */

.pf-hover-section{
  margin: 34px 0 40px; /* separación mapa ↑ y proyectos ↓ */
}

.pf-hover-title{
  text-align: center;
  margin-bottom: 16px;
  font-weight: 1000;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .2px;
}

/* Centrado */
.pf-hover-wrapper{
  display: flex;
  justify-content: center;
}

/* Card principal */
.pf-hover-card{
  width: 280px;
  height: 260px;
  border-radius: 12px;
  background: #0b0f1a;
  display: flex;
  gap: 6px;
  padding: .5em;

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(74,163,255,.15),
    0 18px 60px rgba(0,0,0,.6);
}

/* Columnas */
.pf-hover-card p{
  height: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: all .45s ease;
  background: rgba(12,16,28,.85);
  border: 1px solid rgba(255,90,145,.65);

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Hover expansión */
.pf-hover-card p:hover{
  flex: 4;
  border-color: rgba(74,163,255,.9);
  box-shadow:
    inset 0 0 18px rgba(74,163,255,.25),
    0 0 26px rgba(255,79,216,.18);
}

/* Texto */
.pf-hover-card p span{
  min-width: 14em;
  padding: .5em;
  text-align: center;
  transform: rotate(-90deg);
  transition: all .45s ease;
  text-transform: uppercase;

  font-weight: 900;
  letter-spacing: .18em;

  background: linear-gradient(
    90deg,
    var(--blue),
    var(--purple),
    var(--pink)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Texto en hover */
.pf-hover-card p:hover span{
  transform: rotate(0);
}

/* Mobile */
@media (max-width: 768px){
  .pf-hover-card{
    width: 100%;
    max-width: 360px;
    height: 220px;
  }
}

/* =========================
   PORTAFOLIO: Tipos (split hover card)
========================= */
.pf-types{
  padding: 22px !important;
  margin-top: 18px !important;     /* separación arriba (mapa) */
  margin-bottom: 22px !important;  /* separación abajo (siguientes cards) */
}

.pf-types__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.4px;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  text-align: center;
}

.pf-types__sub{
  margin: 8px 0 14px;
  text-align: center;
  color: rgba(234,240,255,.68);
  font-size: .98rem;
}

.pf-splitcard{
  width: min(780px, 100%);
  margin: 0 auto;
  height: 260px;
  border-radius: 18px;
  background: rgba(10,14,24,.35);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  gap: 10px;
  padding: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

.pf-pane{
  height: 100%;
  flex: 1;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,10,18,.35);
  transition: flex .55s ease, border-color .35s ease, filter .35s ease;
  position: relative;
  overflow: hidden;
}

.pf-pane:nth-child(1){ border-color: rgba(74,163,255,.55); }
.pf-pane:nth-child(2){ border-color: rgba(139,92,246,.55); }
.pf-pane:nth-child(3){ border-color: rgba(255,79,216,.55); }

.pf-pane:hover,
.pf-pane:focus{
  flex: 4;
  outline: none;
  filter: brightness(1.05);
}

.pf-pane__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  position: relative;
}

/* Texto vertical (cuando está “cerrado”) */
.pf-pane__label{
  min-width: 16em;
  text-align: center;
  transform: rotate(-90deg);
  transition: transform .55s ease, opacity .25s ease;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 1000;
  color: rgba(234,240,255,.72);
  user-select: none;
}

/* Contenido real (aparece en hover) */
.pf-pane__content{
  position: absolute;
  inset: 0;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

.pf-pane__content h3{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 1000;
}

.pf-pane__content p{
  margin: 0;
  color: rgba(234,240,255,.72);
  line-height: 1.55;
}

/* Cuando se abre: escondemos vertical y mostramos info */
.pf-pane:hover .pf-pane__label,
.pf-pane:focus .pf-pane__label{
  opacity: 0;
  transform: rotate(-90deg) translateY(10px);
}

.pf-pane:hover .pf-pane__content,
.pf-pane:focus .pf-pane__content{
  opacity: 1;
  transform: translateY(0);
}

/* Glow suave FVCKHAL por panel */
.pf-pane::before{
  content:"";
  position:absolute;
  inset:-60%;
  opacity:.0;
  transition: opacity .35s ease;
  filter: blur(26px);
}
.pf-pane:nth-child(1)::before{ background: conic-gradient(from 180deg, rgba(74,163,255,0), rgba(74,163,255,.28), rgba(74,163,255,0)); }
.pf-pane:nth-child(2)::before{ background: conic-gradient(from 180deg, rgba(139,92,246,0), rgba(139,92,246,.26), rgba(139,92,246,0)); }
.pf-pane:nth-child(3)::before{ background: conic-gradient(from 180deg, rgba(255,79,216,0), rgba(255,79,216,.24), rgba(255,79,216,0)); }

.pf-pane:hover::before,
.pf-pane:focus::before{ opacity: .8; }

/* Mobile: apila bonito */
@media (max-width: 980px){
  .pf-splitcard{
    height: auto;
    flex-direction: column;
  }
  .pf-pane{
    height: 92px;
    flex: unset;
  }
  .pf-pane:hover,
  .pf-pane:focus{
    flex: unset;
    height: 190px;
  }
  .pf-pane__label{
    transform: none;
    min-width: 0;
    letter-spacing: .18em;
  }
}

/* =========================
   PORTAFOLIO: Videos grid
========================= */
.pf-videos .h2 { margin-bottom: 6px; }
.pf-videos .p  { margin-top: 0; color: rgba(234,240,255,.72); }

.pf-videos__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.pf-video{
  border-radius: 16px;
  background: rgba(10,14,24,.35);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.pf-video__frame{
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

.pf-video__media{
  width: 100%;
  height: 210px;
  display: block;
  object-fit: cover;
  border: 0;
}

.pf-video__body{
  padding: 14px;
}

.pf-video__title{
  margin: 10px 0 6px;
  font-weight: 1000;
  font-size: 1.05rem;
  line-height: 1.25;
}

.pf-video__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 980px){
  .pf-videos__grid{ grid-template-columns: 1fr; }
  .pf-video__media{ height: 220px; }
}