/**
 * Pro Effects — Icon Capsule
 *
 * Layouts:
 *   [data-pe-capsule-layout="inline"]    → icon junto al texto (markup nativo).
 *   [data-pe-capsule-layout="separated"] → DOS cajas independientes con gap.
 *
 * Hover Animation (data-pe-capsule-anim):
 *   "none"  → sin animacion.
 *   "slide" → icon se desliza hacia su lado (data-pe-capsule-dir = left|right).
 *             Combina con stretch en INLINE.
 *   "cube"  → ROTACION 3D DE CUBO. JS construye .pe-capsule-cube-container >
 *             .pe-capsule-cube > .pe-capsule-cube-face × 2. El cube parent rota
 *             rotateX(90deg) en hover. Por geometria, la face front sube a top
 *             y la bottom sube a front. Profundidad del cubo = btn height / 2.
 */

/* ─── Base ────────────────────────────────────────────────────────────────── */
.elementor-button.pe-capsule-active .elementor-button-content-wrapper {
  align-items: center !important;
  flex-wrap: nowrap;
}

/* Icon color idle/hover */
.elementor-button.pe-capsule-active[style*="--pe-capsule-icon-color"] .elementor-button-icon,
.elementor-button.pe-capsule-active[style*="--pe-capsule-icon-color"] .elementor-button-icon svg {
  color: var(--pe-capsule-icon-color);
  fill:  var(--pe-capsule-icon-color);
}
.elementor-button.pe-capsule-active[style*="--pe-capsule-icon-color-hover"]:hover .elementor-button-icon,
.elementor-button.pe-capsule-active[style*="--pe-capsule-icon-color-hover"]:hover .elementor-button-icon svg {
  color: var(--pe-capsule-icon-color-hover);
  fill:  var(--pe-capsule-icon-color-hover);
}

/* ─── SEPARATED layout: dos cajas independientes ─────────────────────────── */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"] {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: inline-flex;
  align-items: stretch;
}
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"]
  .elementor-button-content-wrapper {
  gap: 10px;
  align-items: stretch !important;
}

/* Text capsule (recibe el look del button original) */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"]
  .elementor-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pe-capsule-btn-bg, transparent);
  background-image: var(--pe-capsule-btn-bg-img, none);
  padding: var(--pe-capsule-btn-pad, 0.5em 1em);
  border-radius: var(--pe-capsule-btn-radius, 999px);
  box-shadow: var(--pe-capsule-btn-shadow, none);
  color: var(--pe-capsule-btn-color, inherit);
  flex: 0 0 auto;
}

/* Icon capsule (cuadrado JS-driven width=height) */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"]
  .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pe-capsule-icon-bg, var(--pe-capsule-btn-bg, transparent));
  border-radius: var(--pe-capsule-icon-radius, 12px);
  line-height: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0;
}
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"]
  .elementor-button-icon svg {
  fill: currentColor;
}
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"][style*="--pe-capsule-icon-bg-hover"]:hover
  .elementor-button-icon {
  background-color: var(--pe-capsule-icon-bg-hover);
}

/* ─── ANIM: SLIDE (icon shifts to its side) ──────────────────────────────── */
.elementor-button.pe-capsule-active[data-pe-capsule-anim="slide"] .elementor-button-icon {
  transition: background-color var(--pe-capsule-duration, 0.4s) ease,
              transform        var(--pe-capsule-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.elementor-button.pe-capsule-active[data-pe-capsule-anim="slide"][data-pe-capsule-dir="right"]:hover
  .elementor-button-icon {
  transform: translateX(var(--pe-capsule-translate, 6px));
}
.elementor-button.pe-capsule-active[data-pe-capsule-anim="slide"][data-pe-capsule-dir="left"]:hover
  .elementor-button-icon {
  transform: translateX(calc(var(--pe-capsule-translate, 6px) * -1));
}

/* SLIDE + stretch — solo en INLINE layout. */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="inline"][data-pe-capsule-anim="slide"][data-pe-capsule-stretch="yes"] {
  transition: padding-right var(--pe-capsule-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1),
              padding-left  var(--pe-capsule-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.elementor-button.pe-capsule-active[data-pe-capsule-layout="inline"][data-pe-capsule-anim="slide"][data-pe-capsule-stretch="yes"][data-pe-capsule-dir="right"]:hover {
  padding-right: calc(var(--pe-capsule-base-pad-right, 0px) + var(--pe-capsule-translate, 6px));
}
.elementor-button.pe-capsule-active[data-pe-capsule-layout="inline"][data-pe-capsule-anim="slide"][data-pe-capsule-stretch="yes"][data-pe-capsule-dir="left"]:hover {
  padding-left: calc(var(--pe-capsule-base-pad-left, 0px) + var(--pe-capsule-translate, 6px));
}

/* ─── ANIM: 3D CUBE ROTATION ─────────────────────────────────────────────── */
/* Con animType=cube, JS construye:
 *   <a> → .pe-capsule-cube-container → .pe-capsule-cube → 2 faces
 * Y mide la altura del <a> seteandola como --pe-capsule-cube-height.
 *
 * El cube parent rota +90° en hover. Front face (translateZ +h/2) y bottom
 * face (rotateX -90 translateZ +h/2) intercambian posiciones por geometria.
 *
 * Para INLINE: el <a> tenía bg/padding/radius. Lo strippeamos del <a> y lo
 * aplicamos a CADA face para que cada cara del cubo se vea como el button
 * original (igual que ya hacemos para text capsule en Separated).
 */

/* INLINE + CUBE: strippear bg/padding/radius del <a>. Aplicar a las faces. */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="inline"][data-pe-capsule-anim="cube"] {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

.elementor-button.pe-capsule-active[data-pe-capsule-layout="inline"][data-pe-capsule-anim="cube"]
  .pe-capsule-cube-face {
  background-color: var(--pe-capsule-btn-bg, transparent);
  background-image: var(--pe-capsule-btn-bg-img, none);
  padding: var(--pe-capsule-btn-pad, 0.5em 1em);
  border-radius: var(--pe-capsule-btn-radius, 999px);
  box-shadow: var(--pe-capsule-btn-shadow, none);
  color: var(--pe-capsule-btn-color, inherit);
}

/* Cube container — perspective wrapper. inline-block para no colapsar. */
.pe-capsule-cube-container {
  display: inline-block;
  position: relative;
  perspective: var(--pe-capsule-cube-perspective, 800px);
}

/* Cube — el rotador. Hereda dimensiones de la front face (normal flow).
 * El sentido de rotacion en hover depende del data-dir del container. */
.pe-capsule-cube {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform var(--pe-capsule-duration, 0.4s) cubic-bezier(0.65, 0, 0.35, 1);
  transform: rotateX(0deg);
  will-change: transform;
}
/* Direction Up: rotateX +90 → la "bottom face" sube a posicion front */
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"]:hover
  .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube {
  transform: rotateX(90deg);
}
/* Direction Down: rotateX -90 → la cara que esta arriba (rotateX +90) baja a front */
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"]:hover
  .pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube {
  transform: rotateX(-90deg);
}

/* Front face — NORMAL FLOW. Define el tamaño del cubo. */
.pe-capsule-cube-face--front {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px)));
}

/* Bottom/Top face — ABSOLUTE encima del front, mismo tamaño.
 * Su POSICION 3D depende del data-dir del container:
 *   data-dir="up"   → la 2a cara esta posicionada ABAJO (rotateX -90).
 *                      Cuando el cube rota +90, esta cara sube a front.
 *   data-dir="down" → la 2a cara esta posicionada ARRIBA (rotateX +90).
 *                      Cuando el cube rota -90, esta cara baja a front. */
.pe-capsule-cube-face--bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
}
.pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px)));
}
.pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube-face--bottom {
  transform: rotateX(90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px)));
}

/* ─── CUBE + Faces Scale Effect (opcional) ───────────────────────────────── */
/* Cuando data-pe-capsule-cube-scale="yes", agregamos scale a las caras
 * DURANTE la rotacion del cubo. Front pasa de scale 1 a scale min mientras
 * sale. La 2a cara pasa de scale min a 1 mientras llega al frente. Usamos
 * 0.65 (no 0) para que las caras sigan siendo visibles y el cube 3D se note. */
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"][data-pe-capsule-cube-scale="yes"]
  .pe-capsule-cube-face--front {
  transition: transform var(--pe-capsule-duration, 0.4s) cubic-bezier(0.65, 0, 0.35, 1);
  transform: translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px))) scale(1);
}
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"][data-pe-capsule-cube-scale="yes"]:hover
  .pe-capsule-cube-face--front {
  transform: translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px)))
             scale(var(--pe-capsule-cube-scale-min, 0.65));
}
/* Bottom face (segunda cara) — el rotateX depende del dir, mismo patron que arriba */
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"][data-pe-capsule-cube-scale="yes"]
  .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
  transition: transform var(--pe-capsule-duration, 0.4s) cubic-bezier(0.65, 0, 0.35, 1);
  transform: rotateX(-90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px)))
             scale(var(--pe-capsule-cube-scale-min, 0.65));
}
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"][data-pe-capsule-cube-scale="yes"]:hover
  .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px))) scale(1);
}
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"][data-pe-capsule-cube-scale="yes"]
  .pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube-face--bottom {
  transition: transform var(--pe-capsule-duration, 0.4s) cubic-bezier(0.65, 0, 0.35, 1);
  transform: rotateX(90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px)))
             scale(var(--pe-capsule-cube-scale-min, 0.65));
}
.elementor-button.pe-capsule-active[data-pe-capsule-anim="cube"][data-pe-capsule-cube-scale="yes"]:hover
  .pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube-face--bottom {
  transform: rotateX(90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2 + var(--pe-capsule-cube-gap, 0px))) scale(1);
}

/* IMPORTANTE: cuando el cube esta activo en SEPARATED, las faces deben
 * preservar el flex layout del content-wrapper (text capsule + icon box).
 * align-items center para verticalidad, no stretch (rompe el cubo). */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"][data-pe-capsule-anim="cube"]
  .elementor-button-content-wrapper {
  align-items: center !important;
}

/* Cuando cube esta activo, el <a> NO usa display:inline-flex (que serviria al
 * Separated normal). El cube container hace el layout de su contenido. */
.elementor-button.pe-capsule-active[data-pe-capsule-layout="separated"][data-pe-capsule-anim="cube"] {
  display: inline-block;
}

/* ─── No-icon edge case ──────────────────────────────────────────────────── */
.elementor-button.pe-capsule-active[data-pe-capsule-no-icon="yes"]
  .elementor-button-icon { display: none; }

/* ─── Reduced motion bail-out ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-capsule-active .elementor-button-icon,
  .elementor-button.pe-capsule-active .pe-capsule-cube {
    transition: background-color 0.2s ease;
    transform: none !important;
  }
}