/*
  CF2 CAROUSEL — CSS v3
  NOTA: Si el tema no carga Google Fonts, añade este @import al inicio de tu tema:
  @import url('https://fonts.googleapis.com/css2?family=Allura&family=Cinzel&family=Cinzel+Decorative&family=Crimson+Text&family=Dancing+Script&family=Didact+Gothic&family=Great+Vibes&family=Italianno&family=Lora&family=Merriweather&family=Montserrat&family=Open+Sans&family=PT+Sans&family=Parisienne&family=Pinyon+Script&family=Playfair+Display&family=Poppins&family=Raleway&family=Roboto&family=Sacramento&family=Vollkorn&display=swap');
*/

/* ── Variables ── */
#cf2-carousel-root {
  --cf2-w:            320px;
  --cf2-h:            370px;
  --cf2-gap:          48px;
  --cf2-scale-side:   0.82;
  --cf2-opacity-side: 0.55;
  --cf2-tz-side:      -90px;
  --cf2-duration:     480ms;
  --cf2-ease:         cubic-bezier(0.45, 0, 0.15, 1);
  --cf2-btn-bg:       rgba(255,255,255,0.88);
  --cf2-btn-hover:    rgba(255,255,255,1);
  --cf2-btn-shadow:   0 4px 20px rgba(0,0,0,0.13);
  --cf2-dot-off:      rgba(0,0,0,0.18);
  --cf2-dot-on:       #2a2a2a;
  --cf2-ui-font:      'Raleway', sans-serif;
}

/* ── Contenedor ── */
.cf2-carousel {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 0 52px;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ── Stage 3D ── */
.cf2-stage {
  position: relative;
  width: 100%;
  height: var(--cf2-h);
  perspective: 1200px;
  perspective-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══ SLIDES ══ */
.cf2-slide {
  position: absolute;
  width: var(--cf2-w);
  height: var(--cf2-h);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  will-change: transform, opacity;
  transition:
    transform  var(--cf2-duration) var(--cf2-ease),
    opacity    var(--cf2-duration) var(--cf2-ease),
    box-shadow var(--cf2-duration) var(--cf2-ease);
  transform: translateX(0) scale(0.7) translateZ(-160px);
  opacity: 0;
  pointer-events: none;
}
.cf2-slide.is-center {
  transform: translateX(0) scale(1) translateZ(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10);
}
.cf2-slide.is-left {
  transform:
    translateX(calc(-1 * (var(--cf2-w) * var(--cf2-scale-side) + var(--cf2-gap))))
    scale(var(--cf2-scale-side))
    translateZ(var(--cf2-tz-side))
    rotateY(6deg);
  opacity: var(--cf2-opacity-side);
  pointer-events: auto;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.cf2-slide.is-right {
  transform:
    translateX(calc(var(--cf2-w) * var(--cf2-scale-side) + var(--cf2-gap)))
    scale(var(--cf2-scale-side))
    translateZ(var(--cf2-tz-side))
    rotateY(-6deg);
  opacity: var(--cf2-opacity-side);
  pointer-events: auto;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.cf2-slide.is-hidden {
  transform: translateX(0) scale(0.65) translateZ(-200px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.cf2-slide.is-left:hover,
.cf2-slide.is-right:hover {
  opacity: calc(var(--cf2-opacity-side) + 0.2);
}

/* ══ TARJETA TIPOGRÁFICA ══ */
.cf2-font-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  box-sizing: border-box;
  position: relative;
  background: var(--cf2-card-bg, #f5ede0);
  overflow: hidden;
}
.cf2-font-card::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  top: -70px;
  right: -70px;
  pointer-events: none;
}
.cf2-font-card::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  bottom: -55px;
  left: -45px;
  pointer-events: none;
}

.cf2-card-badge {
  font-family: var(--cf2-ui-font);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.cf2-card-divider {
  width: 40px;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 12px auto;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.cf2-card-divider--wide {
  width: 60px;
}

.cf2-card-title {
  font-size: 44px;
  line-height: 1.1;
  text-align: center;
  color: #1a1a1a;
  position: relative;
  z-index: 1;
  margin: 0;
}

.cf2-card-subtitle {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-align: center;
  color: rgba(0,0,0,0.60);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  margin: 0;
}

.cf2-card-text {
  font-size: 15px;
  line-height: 1.75;
  text-align: center;
  color: rgba(0,0,0,0.48);
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 230px;
}

/* ══ BOTONES ══ */
.cf2-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--cf2-btn-bg);
  box-shadow: var(--cf2-btn-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background  200ms ease,
    transform   200ms ease,
    box-shadow  200ms ease;
  padding: 0;
  color: #2a2a2a;
  line-height: 1;
}
.cf2-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}
.cf2-btn--prev { left: 8px; }
.cf2-btn--next { right: 8px; }
.cf2-btn:hover {
  background: var(--cf2-btn-hover);
  box-shadow: 0 6px 28px rgba(0,0,0,0.18);
  transform: translateY(-50%) scale(1.06);
}
.cf2-btn:active {
  transform: translateY(-50%) scale(0.96);
}
.cf2-carousel.is-animating .cf2-btn {
  pointer-events: none;
}

/* ══ DOTS ══ */
.cf2-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 20;
}
.cf2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cf2-dot-off);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    background 300ms ease,
    width      300ms ease;
}
.cf2-dot.is-active {
  background: var(--cf2-dot-on);
  width: 20px;
  border-radius: 3px;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 700px) {
  #cf2-carousel-root {
    --cf2-w:            260px;
    --cf2-h:            310px;
    --cf2-gap:          14px;
    --cf2-scale-side:   0.78;
    --cf2-tz-side:      -70px;
    --cf2-opacity-side: 0.45;
  }
  .cf2-card-title    { font-size: 36px; }
  .cf2-card-subtitle { font-size: 17px; letter-spacing: 0.11em; }
  .cf2-card-text     { font-size: 11.5px; }
  .cf2-btn           { width: 36px; height: 36px; }
  .cf2-btn svg       { width: 15px; height: 15px; }
  .cf2-btn--prev     { left: 4px; }
  .cf2-btn--next     { right: 4px; }
}
@media (max-width: 420px) {
  #cf2-carousel-root {
    --cf2-w:            220px;
    --cf2-h:            320px;
    --cf2-gap:          14px;
    --cf2-scale-side:   0.72;
    --cf2-opacity-side: 0.35;
    --cf2-tz-side:      -55px;
  }
  .cf2-card-title    { font-size: 30px; }
  .cf2-card-subtitle { font-size: 14px; }
  .cf2-font-card     { padding: 28px 18px; }
}