/* =========================================================

   POSTS CAROUSEL - Material Design - Version 1.3.8

   Desktop: Grid 3 columnas con hover effect

   Mobile: Slider Material Design

========================================================= */



/* ---- VARIABLES CSS ---- */

.posts-carousel {

  --card-gap: 24px; /* Override via inline style */

  --transition-speed: 0.3s;

  --elevation-1: 0 2px 4px rgba(0, 0, 0, 0.1);

  --elevation-2: 0 4px 8px rgba(0, 0, 0, 0.12);

  --elevation-3: 0 8px 16px rgba(0, 0, 0, 0.15);

  --elevation-4: 0 12px 24px rgba(0, 0, 0, 0.18);

}



/* ---- CONTENEDOR PRINCIPAL ---- */

.posts-carousel {

  position: relative;

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 40px 20px;

}



.posts-carousel--material {

  padding: 60px 20px;

}



/* ---- WRAPPER ---- */

.pc-wrapper {

  position: relative;

  width: 100%;

}



/* ---- CONTAINER ---- */

.pc-container {

  position: relative;

  width: 100%;

}



/* ---- GRID (Desktop) ---- */

/* Contenedor de filas */

.pc-grid {

  display: flex;

  flex-direction: column;

  gap: var(--card-gap);

  width: 100%;

}



/* Cada fila con flexbox para efecto squeeze */

.pc-row {

  display: flex;

  gap: var(--card-gap);

  width: 100%;

  align-items: stretch;

}



/* ---- CARD MATERIAL DESIGN ---- */

.pc-card {

  position: relative;

  background: #fff;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: var(--elevation-1);

  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;

  flex-direction: column;

  min-height: var(--card-height, 450px);

  flex: 1 1 0;

}



/* ---- CARD IMAGE BACKGROUND (full) ---- */

.pc-card__image-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  z-index: 0;

  transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

}



/* Overlay gradient */

.pc-card__image-bg::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(0, 0, 0, 0.9) 0%,

    rgba(0, 0, 0, 0.5) 40%,

    rgba(0, 0, 0, 0.2) 70%,

    transparent 100%

  );

  z-index: 1;

}



/* ---- CATEGORY BADGE ---- */

.pc-card__badge {

  position: absolute;

  top: 20px;

  left: 20px;

  z-index: 10;

  background: var(--wp--preset--color--contrast-4);

  color: #fff;

  font-size: 13px;

  font-weight: 600;

  text-transform: capitalize;

  letter-spacing: 0.5px;

  padding: 8px 16px;

  border-radius: 20px;

  transition: all 0.2s ease;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}



.pc-card__badge:hover {

  background: #402753;

}



/* ---- FAVORITE BUTTON (HEART) ---- */

.pc-card__favorite {

  position: absolute;

  top: 16px;

  right: 16px !important;

  left: auto !important;

  width: 44px;

  height: 44px;

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(8px);

  border: none;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

  transition: all 0.2s ease;

  color: #333;

}



.pc-card__favorite:hover {

  background: #fff;

  transform: scale(1.1);

  color: var(--wp--preset--color--secondary);

}



.pc-card__favorite:active {

  transform: scale(0.95);

}



.pc-card__favorite.is-active {

  background: var(--wp--preset--color--secondary);

  color: #fff;

}



.pc-card__favorite.is-active svg path {

  fill: currentColor;

}



/* ---- CARD LINK ---- */

.pc-card__link {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  flex: 1;

  text-decoration: none;

  color: inherit;

  min-height: 100%;

}



/* ---- CARD CONTENT ---- */

.pc-card__content {

  padding: 24px;

  color: #fff;

  display: flex;

  flex-direction: column;

  gap: 12px;

  justify-content: center;

  flex: 1;

}



/* Overlay variant: Center title/excerpt, button stays at bottom */

.posts-carousel--overlay .pc-card__content {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



/* Centered text wrapper */

.posts-carousel--overlay .pc-card__text-wrapper {

  display: flex;

  flex-direction: column;

  gap: 12px;

  text-align: center;

  align-items: center;

}



/* Title and excerpt inside wrapper - inherit gap */

.posts-carousel--overlay .pc-card__title,

.posts-carousel--overlay .pc-card__divider,

.posts-carousel--overlay .pc-card__excerpt {

  margin: 0;

}



/* Button - position absolute at bottom */

.posts-carousel--overlay .pc-card__button {

  position: absolute;

  bottom: 24px;

  left: auto;

  right: 24px;

  margin: 0;

}



.pc-card__title {

  font-family: 'Satoshi', sans-serif;

  font-size: 20px;

  font-weight: 900;

  line-height: 26px;

  letter-spacing: 0;

  color: #fff;

  margin: 0;

}



.pc-card__excerpt {

  font-family: 'Satoshi', sans-serif;

  font-size: 15px;

  font-weight: 500;

  line-height: 23px;

  letter-spacing: 0;

  color: rgba(255, 255, 255, 0.9);

  margin: 0;

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.pc-card__cta {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  margin-top: auto;

  transition: gap var(--transition-speed) ease;

}



.pc-card__cta svg {

  width: 16px;

  height: 16px;

  transition: transform var(--transition-speed) ease;

}



/* =========================================================

   HOVER EFFECTS (Desktop Only)

========================================================= */



/* Efecto ZOOM - Agrandar card simple */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-zoom .pc-card:hover {

    transform: scale(1.05);

    box-shadow: var(--elevation-4);

    z-index: 10;

  }



  .posts-carousel.hover-zoom .pc-card:hover .pc-card__image-bg {

    transform: scale(1.1);

  }

}



/* Efecto SQUEEZE - Crece y empuja/achica las demás (solo en la misma fila) */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-squeeze .pc-card:hover {

    flex: 1.5 1 0;

    box-shadow: var(--elevation-4);

    z-index: 10;

  }



  .posts-carousel.hover-squeeze .pc-card:hover .pc-card__image-bg {

    transform: scale(1.08);

  }



  /* Las demás cards EN LA MISMA FILA se achican */

  .posts-carousel.hover-squeeze .pc-row:hover .pc-card:not(:hover) {

    flex: 0.75 1 0;

  }

}



/* Efecto LIFT - Elevar card */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-lift .pc-card:hover {

    transform: translateY(-16px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    z-index: 10;

  }



  .posts-carousel.hover-lift .pc-card:hover .pc-card__image-bg {

    transform: scale(1.05);

  }

}



/* Efecto GLOW - Resaltar bordes */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-glow .pc-card {

    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),

                box-shadow 0.4s ease;

  }



  .posts-carousel.hover-glow .pc-card:hover {

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5),

                0 0 30px rgba(255, 255, 255, 0.4),

                0 8px 24px rgba(0, 0, 0, 0.4);

    z-index: 10;

  }



  .posts-carousel.hover-glow .pc-card:hover .pc-card__image-bg {

    transform: scale(1.05);

  }

}



/* Efecto TILT - Inclinación 3D */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-tilt .pc-card {

    perspective: 1000px;

  }



  .posts-carousel.hover-tilt .pc-card:hover {

    transform: rotateY(5deg) rotateX(-2deg);

    box-shadow: var(--elevation-4);

    z-index: 10;

  }



  .posts-carousel.hover-tilt .pc-card:hover .pc-card__image-bg {

    transform: scale(1.05);

  }

}



/* Efecto FADE - Desvanecer las demás */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-fade .pc-card {

    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),

                opacity 0.4s ease;

  }



  .posts-carousel.hover-fade .pc-card:hover {

    transform: scale(1.05);

    box-shadow: var(--elevation-4);

    z-index: 10;

    opacity: 1;

  }



  .posts-carousel.hover-fade .pc-grid:hover .pc-card:not(:hover) {

    opacity: 0.4;

  }



  .posts-carousel.hover-fade .pc-card:hover .pc-card__image-bg {

    transform: scale(1.08);

  }

}



/* Efecto SLIDE - Deslizar hacia arriba */

@media (hover: hover) and (pointer: fine) {

  .posts-carousel.hover-slide .pc-card {

    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

  }



  .posts-carousel.hover-slide .pc-card:hover {

    transform: translateY(-20px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);

    z-index: 10;

  }



  .posts-carousel.hover-slide .pc-card:hover .pc-card__image-bg {

    transform: scale(1.1);

  }

}



/* =========================================================

   MOBILE SLIDER (Oculto en Desktop)

========================================================= */



/* Asegurar que dots y arrows estén ocultos en desktop (769px+) */

@media (min-width: 769px) {

  .pc-dots,

  .pc-arrow,

  .pc-arrow--prev,

  .pc-arrow--next,

  .pc-arrow--bottom {

    display: none !important;

  }



  /* Use desktop-specific card height */

  .pc-card {

    min-height: var(--card-height-desktop, 450px);

  }



  .posts-carousel--overlay-split .pc-card {

    min-height: var(--card-height-desktop, 500px);

  }

}



/* =========================================================

   RESPONSIVE - TABLET

========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  .pc-row {

    gap: calc(var(--card-gap) * 0.75);

  }



  .posts-carousel--material {

    padding: 40px 20px;

  }

}



/* Desktop - asegurar estructura correcta */

@media (min-width: 1025px) {

  /* Grid contiene filas */

  .pc-grid {

    display: flex !important;

    flex-direction: column;

  }



  /* Filas con flexbox horizontal */

  .pc-row {

    display: flex !important;

  }



  /* Cards distribuidas equitativamente en la fila */

  .pc-card {

    flex: 1 1 0;

  }



  /* Para squeeze, permitir que crezca sin límite de ancho */

  .posts-carousel.hover-squeeze .pc-card:hover {

    max-width: none;

  }

}



/* =========================================================

   RESPONSIVE - MOBILE (Activar Slider SOLO en mobile)

========================================================= */

@media (max-width: 768px) {

  /* Wrapper con layout vertical */

  .pc-wrapper {

    display: flex;

    flex-direction: column;

    gap: 16px;

  }



  /* En mobile, aplanar las filas - que .pc-row no contenga, solo pase las cards */

  .pc-row {

    display: contents;

  }



  /* Cambiar de grid a slider SOLO en mobile */

  .pc-grid {

    display: flex !important;

    flex-direction: row !important;

    gap: 0;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding: 10px 0;

    margin: 0;

  }



  /* Ocultar scrollbar */

  .pc-grid::-webkit-scrollbar {

    display: none;

  }



  /* Cards en slider - una card a la vez */

  .pc-card {

    flex: 0 0 100% !important;

    scroll-snap-align: start;

    scroll-snap-stop: always;

  }



  /* ===== VARIANTE 1: Botones a los lados (70% ancho) ===== */

  .arrows-sides .pc-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    overflow: visible;

  }



  .arrows-sides .pc-grid {

    width: 70%;

    flex-shrink: 0;

  }



  .arrows-sides .pc-arrow {

    display: flex;

    position: relative;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    z-index: 20;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;

    flex-shrink: 0;

  }



  .arrows-sides .pc-arrow--prev {

    background: var(--wp--preset--color--secondary);

    border: 2px solid var(--wp--preset--color--secondary);

    color: #fff;

    order: -1;

  }



  .arrows-sides .pc-arrow--next {

    background: #fff;

    border: 2px solid var(--wp--preset--color--secondary);

    color: var(--wp--preset--color--secondary);

    order: 1;

  }



  /* ===== VARIANTE 2: Botones encima de la imagen ===== */

  .arrows-overlay .pc-container {

    position: relative;

    overflow: visible;

  }



  .arrows-overlay .pc-grid {

    width: 100%;

  }



  .arrows-overlay .pc-arrow {

    display: flex;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;

    height: 48px;

    border-radius: 50%;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    z-index: 20;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;

  }



  .arrows-overlay .pc-arrow--prev {

    left: 12px;

    background: var(--wp--preset--color--secondary);

    border: 2px solid var(--wp--preset--color--secondary);

    color: #fff;

  }



  .arrows-overlay .pc-arrow--next {

    right: 12px;

    background: #fff;

    border: 2px solid var(--wp--preset--color--secondary);

    color: var(--wp--preset--color--secondary);

  }



  .arrows-overlay .pc-arrow:active {

    transform: translateY(-50%) scale(0.9);

  }



  /* ===== VARIANTE 2: Ajuste para VERTICAL CARDS ===== */

  .posts-carousel--vertical.arrows-overlay .pc-arrow {

    /* Posicionar respecto a la imagen, no al contenedor completo */

    top: 140px; /* Mitad de la altura de la imagen (280px / 2) */

  }



  /* ===== VARIANTE 3: Botones al lado de los dots ===== */

  .arrows-bottom .pc-container {

    overflow: visible;

  }



  .arrows-bottom .pc-grid {

    width: 100%;

  }



  .arrows-bottom .pc-arrow {

    display: none; /* Se mostrarán en el footer junto a dots */

  }



  .arrows-bottom .pc-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

  }



  .arrows-bottom .pc-arrow--bottom {

    display: flex;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    z-index: 20;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    transition: all 0.2s ease;

    flex-shrink: 0;

    border: none;

  }



  .arrows-bottom .pc-arrow--prev.pc-arrow--bottom {

    background: var(--wp--preset--color--secondary);

    border: 2px solid var(--wp--preset--color--secondary);

    color: #fff;

    order: -1;

  }



  .arrows-bottom .pc-arrow--next.pc-arrow--bottom {

    background: #fff;

    border: 2px solid var(--wp--preset--color--secondary);

    color: var(--wp--preset--color--secondary);

    order: 1;

  }



  /* Estilos comunes para todos los botones */

  .pc-arrow--prev:hover {

    background: #d97a74;

    border-color: #d97a74;

  }



  .pc-arrow--next:hover {

    background: #f9f9f9;

  }



  .pc-arrow:active {

    transform: scale(0.9);

  }



  .pc-arrow:disabled {

    opacity: 0.3;

    pointer-events: none;

  }



  /* Dots de paginación */

  .pc-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 0;

    margin: 0;

  }



  .pc-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    border: 2px solid #bdbdbd;

    background: transparent;

    cursor: pointer;

    padding: 0;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  }



  .pc-dot.is-active {

    width: 24px;

    border-radius: 4px;

    background: var(--wp--preset--color--secondary);

    border-color: var(--wp--preset--color--secondary);

  }



  /* Ajustes de contenido en mobile */

  .posts-carousel--material {

    padding: 30px 0;

  }



  .pc-card__content {

    padding: 20px;

    left: auto !important;

  }



  .pc-card__title {

    font-size: 22px !important;

    line-height: 26px !important;

  }



  .pc-card__excerpt {

    font-size: 18px;

    -webkit-line-clamp: 4;

    line-height: 25px;

  }



  .pc-card__badge {

    top: 16px;

    left: 16px;

    font-size: 12px;

    padding: 6px 12px;

  }



  .pc-card__price {

    font-size: 18px;

  }



  .pc-card__button {

    padding: 8px 16px;

    font-size: 18px !important;

    margin-top: 30px;

    left: auto !important;

  }



  .pc-card__favorite {

    width: 40px;

    height: 40px;

    top: 12px;

    right: 12px !important;

  }

}



/* =========================================================

   RESPONSIVE - MOBILE SMALL

========================================================= */

@media (max-width: 480px) {

  .pc-arrow {

    width: 36px;

    height: 36px;

  }



  .pc-arrow svg {

    width: 20px;

    height: 20px;

  }



  .pc-card__content {

    padding: 16px;

  }



  .pc-card__title {

    font-size: 16px;

  }



  .pc-card__badge {

    top: 12px;

    left: 12px;

    font-size: 11px;

    padding: 6px 12px;

  }



  .pc-card__price {

    font-size: 16px;

  }



  .pc-card__favorite {

    width: 36px;

    height: 36px;

  }

}



/* =========================================================

   ACCESSIBILITY

========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pc-grid {

    scroll-behavior: auto;

  }



  .pc-card,

  .pc-card__image img,

  .pc-arrow,

  .pc-dot,

  .pc-card__cta {

    transition: none;

  }

}



/* Focus visible para navegación con teclado */

.pc-arrow:focus-visible,

.pc-dot:focus-visible,

.pc-card:focus-visible {

  outline: 3px solid var(--wp--preset--color--primary);

  outline-offset: 4px;

}



/* =========================================================

   LOADING STATE

========================================================= */

.pc-card.is-loading .pc-card__image {

  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);

  background-size: 400% 100%;

  animation: shimmer 1.6s infinite linear;

}



@keyframes shimmer {

  0% { background-position: 100% 0; }

  100% { background-position: -100% 0; }

}



/* =========================================================

   ELEMENTOS ADICIONALES DEL CARD DEFAULT

========================================================= */



/* Divider line */

.pc-card__divider {

  width: 50%;

  height: 2px;

  background: rgba(255, 255, 255, 0.8);

  margin: 4px 0;

}



/* Meta Line (Duration | Price or Location | Price) */

.pc-card__meta-line {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  font-weight: 400;

  line-height: 100%;

  letter-spacing: 0;

  color: rgba(255, 255, 255, 0.9);

  margin: 8px 0;

  flex-wrap: wrap;

}



.pc-card__meta-item {

  display: flex;

  align-items: center;

  gap: 6px;

}



.pc-card__meta-item svg {

  flex-shrink: 0;

  width: 18px;

  height: 18px;

}



.pc-card__meta-separator {

  color: rgba(255, 255, 255, 0.5);

  font-weight: 300;

}



/* Legacy Location (for backward compatibility) */

.pc-card__location {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.85);

}



.pc-card__location svg {

  flex-shrink: 0;

  width: 16px;

  height: 16px;

}



/* Legacy Price (for backward compatibility) */

.pc-card__price {

  font-family: 'Satoshi', sans-serif;

  font-size: 20px;

  font-weight: 900;

  line-height: 100%;

  letter-spacing: 0;

  color: #fff;

  margin: 4px 0;

}



/* Button */

.pc-card__button {

  padding: 10px 20px;

  background: var(--wp--preset--color--secondary);

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  border: none;

  border-radius: 24px;

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.2s ease;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  align-self: flex-start;

  margin-top: 8px;

}



.pc-card__button:hover {

  background: #d97a74;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.pc-card__button:active {

  transform: translateY(0);

}



/* =========================================================

   VARIACIONES DE COLOR - BOTONES

========================================================= */



/* Botón variación Primary (Rosa var(--wp--preset--color--secondary)) - DEFAULT */

.pc-card__button--primary {

  background: var(--wp--preset--color--secondary);

  color: #fff;

}



.pc-card__button--primary:hover {

  background: #d97a74;

}



/* Botón variación Secondary (Morado var(--wp--preset--color--contrast-4)) */

.pc-card__button--secondary {

  background: var(--wp--preset--color--contrast-4);

  color: #fff;

}



.pc-card__button--secondary:hover {

  background: #402753;

}



/* Botón variación White (Blanco con texto negro) */

.pc-card__button--white {

  background: #fff;

  color: #000;

  border: 2px solid #fff;

}



.pc-card__button--white:hover {

  background: rgba(255, 255, 255, 0.9);

  color: #000;

}



/* Botón variación Gold (Dorado var(--wp--preset--color--contrast-1)) */

.pc-card__button--gold {

  background: var(--wp--preset--color--contrast-1);

  color: #fff;

}



.pc-card__button--gold:hover {

  background: #b88f25;

}



/* Botón variación Dark (Negro #1A1A1A) */

.pc-card__button--dark {

  background: #1A1A1A;

  color: #fff;

}



.pc-card__button--dark:hover {

  background: #2d2d2d;

}



/* Botón variación Transparent (Transparente con borde blanco) */

.pc-card__button--transparent {

  background: transparent;

  color: #fff;

  border: 2px solid #fff;

  backdrop-filter: blur(4px);

}



.pc-card__button--transparent:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: #fff;

}



/* Botón variación Read More (Texto en negrita sin fondo) */

.pc-card__button--read-more {

  background: transparent;

  /* color: var(--wp--preset--color--primary); */

  font-weight: 700;

  padding: 0;

  box-shadow: none;

  border: none;

  font-size: 14px;

}



.pc-card__button--read-more:hover {

  background: transparent;

  color: #1565c0;

  transform: none;

  box-shadow: none;

}



/* Botón variación Line Arrow (Línea superior + Texto Rosa + Flecha) */

.pc-card__button--line-arrow {

  background: transparent;

  color: var(--wp--preset--color--secondary);

  font-weight: 600;

  padding: 16px 0 0 0;

  box-shadow: none;

  border: none;

  border-radius: 0;

  font-size: 14px;

  display: flex;

  align-items: center;

  gap: 8px;

  position: relative;

}



.pc-card__button--line-arrow::before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  height: 2px;

  background: var(--wp--preset--color--secondary);

  transition: background 0.3s ease;

}



.pc-card__button--line-arrow::after {

  content: '>';

  font-size: 16px;

  font-weight: 700;

  transition: transform 0.3s ease;

}



.pc-card__button--line-arrow:hover {

  background: transparent;

  color: #d97a74;

  transform: none;

  box-shadow: none;

}



.pc-card__button--line-arrow:hover::before {

  background: #d97a74;

}



.pc-card__button--line-arrow:hover::after {

  transform: translateX(4px);

}



/* =========================================================

   VARIACIONES DE COLOR - BADGES/ETIQUETAS

========================================================= */



/* Badge variación Primary (Rosa var(--wp--preset--color--secondary)) */

.pc-card__badge--primary {

  background: var(--wp--preset--color--secondary);

  color: #fff;

}



.pc-card__badge--primary:hover {

  background: #d97a74;

}



/* Badge variación Secondary (Morado var(--wp--preset--color--contrast-4)) - DEFAULT */

.pc-card__badge--secondary {

  background: var(--wp--preset--color--contrast-4);

  color: #fff;

}



.pc-card__badge--secondary:hover {

  background: #402753;

}



/* Badge variación White (Blanco con texto negro) */

.pc-card__badge--white {

  background: #fff;

  color: #000;

}



.pc-card__badge--white:hover {

  background: rgba(255, 255, 255, 0.9);

}



/* Badge variación Gold (Dorado var(--wp--preset--color--contrast-1)) */

.pc-card__badge--gold {

  background: var(--wp--preset--color--contrast-1);

  color: #fff;

}



.pc-card__badge--gold:hover {

  background: #b88f25;

}



/* Badge variación Dark (Negro #1A1A1A) */

.pc-card__badge--dark {

  background: #1A1A1A;

  color: #fff;

}



.pc-card__badge--dark:hover {

  background: #2d2d2d;

}



/* Badge variación Transparent (Transparente con borde blanco) */

.pc-card__badge--transparent {

  background: transparent;

  color: #fff;

  border: 2px solid #fff;

  backdrop-filter: blur(4px);

}



.pc-card__badge--transparent:hover {

  background: rgba(255, 255, 255, 0.1);

}



/* =========================================================

   ALINEACIÓN DE CONTENIDO

========================================================= */



/* Alineación de Texto - Izquierda (default) */

.text-align-left .pc-card__content {

  text-align: left;

}



.text-align-left .pc-card__title,

.text-align-left .pc-card__excerpt,

.text-align-left .pc-card__location,

.text-align-left .pc-card__price {

  text-align: left;

}



.text-align-left .pc-card__divider {

  align-self: flex-start;

}



.text-align-left .pc-card__location {

  justify-content: flex-start;

}



/* Alineación de Texto - Centro */

.text-align-center .pc-card__content {

  text-align: center;

}



.text-align-center .pc-card__title,

.text-align-center .pc-card__excerpt,

.text-align-center .pc-card__location,

.text-align-center .pc-card__price {

  text-align: center;

}



.text-align-center .pc-card__divider {

  align-self: center;

}



.text-align-center .pc-card__location {

  justify-content: center;

}



/* Alineación de Texto - Derecha */

.text-align-right .pc-card__content {

  text-align: right;

}



.text-align-right .pc-card__title,

.text-align-right .pc-card__excerpt,

.text-align-right .pc-card__location,

.text-align-right .pc-card__price {

  text-align: right;

}



.text-align-right .pc-card__divider {

  align-self: flex-end;

}



.text-align-right .pc-card__location {

  justify-content: flex-end;

}



/* Alineación de Botón - Izquierda (default) */

.button-align-left .pc-card__button {

  align-self: flex-start;

}



/* Alineación de Botón - Centro */

.button-align-center .pc-card__button {

  align-self: center;

}



/* Alineación de Botón - Derecha */

.button-align-right .pc-card__button {

  align-self: flex-end;

}



/* =========================================================

   VERTICAL CARD STYLE - Image Top, Content Bottom

========================================================= */



/* Card Vertical: Override default styles */

.posts-carousel--vertical .pc-card {

  background: #fff;

  min-height: auto;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



/* Image Wrapper (top section) */

.posts-carousel--vertical .pc-card__image-wrapper {

  position: relative;

  width: 100%;

  height: 280px;

  padding: 12px 12px 0 12px; /* Padding around image (no bottom padding) */

  flex-shrink: 0;

  box-sizing: border-box;

}



.posts-carousel--vertical .pc-card__image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 12px; /* Same as card border-radius */

  transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

  overflow: hidden;

}



/* Hover effect on image */

.posts-carousel--vertical .pc-card:hover .pc-card__image {

  transform: scale(1.05);

}



/* Badge on Image (top left) */

.posts-carousel--vertical .pc-card__badge {

  position: absolute;

  top: 24px; /* 12px padding + 12px inside */

  left: 24px; /* 12px padding + 12px inside */

  z-index: 2;

}



/* Favorite Button on Image (top right) */

.posts-carousel--vertical .pc-card__favorite {

  position: absolute;

  top: 24px; /* 12px padding + 12px inside */

  right: 24px; /* 12px padding + 12px inside */

  z-index: 2;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(8px);

  color: #333;

  border: none;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}



.posts-carousel--vertical .pc-card__favorite:hover {

  background: var(--wp--preset--color--secondary);

  color: #fff;

  transform: scale(1.1);

}



.posts-carousel--vertical .pc-card__favorite svg {

  width: 22px;

  height: 22px;

}



/* Content Section (bottom) */

.posts-carousel--vertical .pc-card__link {

  position: relative;

  z-index: 1;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.posts-carousel--vertical .pc-card__content {

  position: relative;

  padding: 24px;

  background: #fff;

  display: flex;

  flex-direction: column;

  gap: 12px;

  flex: 1;

}



/* Typography */

.posts-carousel--vertical .pc-card__title {

  color: #1a1a1a;

  font-size: 1.25rem;

  font-weight: 700;

  line-height: 1.3;

  margin: 0;

}



.posts-carousel--vertical .pc-card__excerpt {

  color: #666;

  font-size: 0.95rem;

  line-height: 1.6;

  margin: 0;

}



.posts-carousel--vertical .pc-card__divider {

  height: 1px;

  background: #e0e0e0;

  margin: 8px 0;

}



.posts-carousel--vertical .pc-card__location,

.posts-carousel--vertical .pc-card__price {

  color: #666;

  font-size: 0.9rem;

}



.posts-carousel--vertical .pc-card__button {

  margin-top: auto;

}



/* Meta Line - Black text for vertical */

.posts-carousel--vertical .pc-card__meta-line {

  color: #333;

}



.posts-carousel--vertical .pc-card__meta-item {

  color: #333;

}



.posts-carousel--vertical .pc-card__meta-separator {

  color: #999;

}



.posts-carousel--vertical .pc-card__meta-item svg {

  color: #666;

}



/* Hover Effects - Vertical Cards */

.posts-carousel--vertical.hover-lift .pc-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--elevation-4);

}



.posts-carousel--vertical.hover-zoom .pc-card:hover {

  transform: scale(1.02);

  box-shadow: var(--elevation-3);

}



.posts-carousel--vertical.hover-glow .pc-card:hover {

  box-shadow: 0 0 20px rgba(231, 140, 133, 0.3);

}



/* Responsive */

@media (max-width: 768px) {

  .posts-carousel--vertical .pc-card__image-wrapper {

    height: 220px;

  }



  .posts-carousel--vertical .pc-card__content {

    padding: 20px;

  }



  .posts-carousel--vertical .pc-card__title {

    font-size: 1.1rem;

  }

}



/* =========================================================

   OVERLAY-SPLIT CARD STYLE - Badge top, Title/Excerpt middle, Meta/Button 50-50 bottom

========================================================= */



/* Overlay Split: Full image background with 50/50 bottom layout */

.posts-carousel--overlay-split .pc-card {

  position: relative;

  background: #fff;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  min-height: var(--card-height, 500px);

}



/* Image Background - Full card height */

.posts-carousel--overlay-split .pc-card__image-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  z-index: 0;

  transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

}



/* Hover zoom on image */

.posts-carousel--overlay-split .pc-card:hover .pc-card__image-bg {

  transform: scale(1.05);

}



/* Overlay gradient - Darker at bottom for better text readability */

.posts-carousel--overlay-split .pc-card__image-bg::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(0, 0, 0, 0.95) 0%,

    rgba(0, 0, 0, 0.7) 30%,

    rgba(0, 0, 0, 0.4) 60%,

    rgba(0, 0, 0, 0.2) 80%,

    transparent 100%

  );

  z-index: 1;

}



/* Badge at top */

.posts-carousel--overlay-split .pc-card__badge {

  position: absolute;

  top: 20px;

  left: 20px;

  z-index: 10;

}



/* Favorite button at top right */

.posts-carousel--overlay-split .pc-card__favorite {

  position: absolute;

  top: 16px;

  right: 16px;

  z-index: 10;

}



/* Card Link - Full height */

.posts-carousel--overlay-split .pc-card__link {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  flex: 1;

  text-decoration: none;

  color: inherit;

  min-height: 100%;

}



/* Content wrapper */

.posts-carousel--overlay-split .pc-card__content {

  padding: 24px;

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  gap: 2px;

}



/* Title and Excerpt section */

.posts-carousel--overlay-split .pc-card__title {

  font-family: 'Satoshi', sans-serif;

  font-size: 20px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0;

  color: #fff;

  margin: 0;

  max-width: 80%;

}



.posts-carousel--overlay-split .pc-card__excerpt {

  font-family: 'Satoshi', sans-serif;

  font-size: 15px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 0;

  color: rgba(255, 255, 255, 0.95);

  margin: 0;

  max-width: 80%;

}



/* 50/50 Bottom Layout Container */

.posts-carousel--overlay-split .pc-card__bottom-split {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-end;

  gap: 20px;

  width: 100%;

}



/* Left 50% - Meta Info (Location, Price, Duration) */

.posts-carousel--overlay-split .pc-card__meta-info {

  flex: 0 1 100%;

  display: flex;

  flex-direction: column;

  gap: 8px;

  align-items: flex-start;

}



.posts-carousel--overlay-split .pc-card__meta-line {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.95);

  font-size: 12px;

  font-weight: 400;

  line-height: 100%;

  letter-spacing: 0;

}



.posts-carousel--overlay-split .pc-card__meta-item {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 20px;

  font-weight: 700;

  line-height: 100%;

  letter-spacing: 0;

  vertical-align: middle;

  color: rgba(255, 255, 255, 0.95);

}



.posts-carousel--overlay-split .pc-card__meta-item svg {

  width: 18px;

  height: 18px;

  opacity: 0.9;

}



.posts-carousel--overlay-split .pc-card__meta-item--location {

  font-size: 12px;

  font-weight: 400;

  line-height: 100%;

  letter-spacing: 0;

}



.posts-carousel--overlay-split .pc-card__meta-item--price {

  font-size: 20px;

  font-weight: 900;

  line-height: 100%;

  letter-spacing: 0;

}



.posts-carousel--overlay-split .pc-card__meta-separator {

  color: rgba(255, 255, 255, 0.5);

  font-weight: 400;

}



.posts-carousel--overlay-split .pc-card__location {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  font-weight: 400;

  line-height: 100%;

  letter-spacing: 0;

  color: rgba(255, 255, 255, 0.95);

}



.posts-carousel--overlay-split .pc-card__location svg {

  width: 18px;

  height: 18px;

  opacity: 0.9;

}



.posts-carousel--overlay-split .pc-card__price {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 20px;

  font-weight: 900;

  line-height: 100%;

  letter-spacing: 0;

  color: rgba(255, 255, 255, 0.95);

}



.posts-carousel--overlay-split .pc-card__price svg {

  width: 18px;

  height: 18px;

  opacity: 0.9;

}



.posts-carousel--overlay-split .pc-card__price strong {

  font-weight: 700;

  color: #fff;

}



/* Right 50% - CTA Button */

.posts-carousel--overlay-split .pc-card__button-wrapper {

  flex: 0 1 50%;

  display: flex;

  justify-content: flex-end;

  align-items: flex-end;

}



.posts-carousel--overlay-split .pc-card__button {

  white-space: nowrap;

  min-width: fit-content;

  align-self: flex-end;

  margin-left: auto;

}



/* Text alignment overrides for overlay-split */

.posts-carousel--overlay-split.text-align-center .pc-card__title,

.posts-carousel--overlay-split.text-align-center .pc-card__excerpt {

  text-align: center;

}



.posts-carousel--overlay-split.text-align-right .pc-card__title,

.posts-carousel--overlay-split.text-align-right .pc-card__excerpt {

  text-align: right;

}



.posts-carousel--overlay-split.text-align-center .pc-card__meta-info {

  align-items: center;

}



.posts-carousel--overlay-split.text-align-right .pc-card__meta-info {

  align-items: flex-end;

}



/* Button alignment for overlay-split - Works via flex on wrapper */

.posts-carousel--overlay-split.button-align-left .pc-card__button-wrapper {

  justify-content: flex-start;

}



.posts-carousel--overlay-split.button-align-center .pc-card__button-wrapper {

  justify-content: center;

}



.posts-carousel--overlay-split.button-align-right .pc-card__button-wrapper {

  justify-content: flex-end;

}



/* Hover Effects - Overlay Split Cards */

.posts-carousel--overlay-split.hover-lift .pc-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--elevation-4);

}



.posts-carousel--overlay-split.hover-zoom .pc-card:hover {

  transform: scale(1.02);

  box-shadow: var(--elevation-3);

}



.posts-carousel--overlay-split.hover-glow .pc-card:hover {

  box-shadow: 0 0 20px rgba(231, 140, 133, 0.3);

}



.posts-carousel--overlay-split.hover-tilt .pc-card:hover {

  transform: perspective(1000px) rotateX(2deg) rotateY(2deg);

}



/* Responsive - Mobile adjustments for overlay-split */

@media (max-width: 768px) {

  .posts-carousel--overlay-split .pc-card__bottom-split {

    flex-direction: row;

    align-items: end;

    gap: 16px;

  }



  .posts-carousel--overlay-split .pc-card__meta-info,

  .posts-carousel--overlay-split .pc-card__button-wrapper {

    width: 100%;

  }



  .posts-carousel--overlay-split .pc-card__button-wrapper {

    justify-content: flex-start;

  }



  .posts-carousel--overlay-split .pc-card__button {

    width: 100%;

    text-align: center;

  }



  .posts-carousel--overlay-split .pc-card__title {

    font-size: 16px;

  }



  .posts-carousel--overlay-split .pc-card__excerpt {

    font-size: 12px;

  }



  .posts-carousel--overlay-split .pc-card__meta-item {

    font-size: 16px;

  }



  .posts-carousel--overlay-split .pc-card__content {

    padding: 20px;

    gap: 6px;

  }

}