/* Firekworks v11: pila rotatoria, centrada y sin contenedores fantasma. */

/* Conserva la corrección de títulos largos de las tarjetas de sectores. */
#sectores .project-card .project-card-content,
#sectores .project-card-content {
  left: clamp(24px, 2.35vw, 30px) !important;
  right: clamp(24px, 2.35vw, 30px) !important;
  width: auto !important;
  max-width: none !important;
  overflow: hidden !important;
}

#sectores .project-card-content strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

#sectores .project-card[href="/restaurantes/"] .project-card-content strong {
  font-size: clamp(1.78rem, 2.25vw, 2.34rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
}

/*
 * Del contenido al cliente.
 * Las cuatro tarjetas viven en una pila circular: front -> left -> back -> right.
 * Cada cambio de paso recoloca toda la pila y no solo la tarjeta activa.
 */
#sistema,
#sistema .method-wheel,
#sistema .method-stage,
#sistema .method-visual,
#sistema .method-card {
  overflow: visible !important;
  contain: none !important;
}

#sistema .method-wheel {
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#sistema .method-wheel::before,
#sistema .method-wheel::after,
#sistema .method-card::before,
#sistema .method-card::after {
  display: none !important;
  content: none !important;
}

#sistema .method-stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 460px !important;
  height: 460px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#sistema .method-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  min-height: 0 !important;
  height: 460px !important;
  margin: 0 auto !important;
  isolation: isolate !important;
  perspective: 1100px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#sistema .method-card {
  --stack-x: 0px;
  --stack-y: 34px;
  --stack-scale: .83;
  --stack-rotate: 0deg;
  --stack-opacity: .18;
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: min(100%, 610px) !important;
  height: 460px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  isolation: isolate !important;
  visibility: visible !important;
  opacity: var(--stack-opacity) !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
  transform:
    translate(-50%, -50%)
    translate3d(var(--stack-x), var(--stack-y), 0)
    rotate(var(--stack-rotate))
    scale(var(--stack-scale)) !important;
  filter: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition:
    transform .62s cubic-bezier(.22, 1, .36, 1),
    opacity .48s ease !important;
  will-change: transform, opacity;
}

/*
 * Distribución circular. La tarjeta frontal pisa a las otras tres;
 * izquierda y derecha dejan ver sus bordes y la profunda asoma por abajo.
 */
#sistema .method-card[data-stack-slot="front"] {
  --stack-x: 0px;
  --stack-y: 0px;
  --stack-scale: 1;
  --stack-rotate: 0deg;
  --stack-opacity: 1;
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: pointer;
}

#sistema .method-card[data-stack-slot="right"] {
  --stack-x: 92px;
  --stack-y: 20px;
  --stack-scale: .91;
  --stack-rotate: 4.2deg;
  --stack-opacity: .42;
  z-index: 9 !important;
}

#sistema .method-card[data-stack-slot="back"] {
  --stack-x: 24px;
  --stack-y: 42px;
  --stack-scale: .83;
  --stack-rotate: 1.2deg;
  --stack-opacity: .20;
  z-index: 3 !important;
}

#sistema .method-card[data-stack-slot="left"] {
  --stack-x: -92px;
  --stack-y: 24px;
  --stack-scale: .89;
  --stack-rotate: -4.6deg;
  --stack-opacity: .34;
  z-index: 7 !important;
}

/* Respaldo de primer render antes de que el controlador asigne la pila. */
#sistema .method-card.active:not([data-stack-slot]),
#sistema .method-card[data-offset="0"]:not([data-stack-slot]) {
  --stack-x: 0px;
  --stack-y: 0px;
  --stack-scale: 1;
  --stack-rotate: 0deg;
  --stack-opacity: 1;
  z-index: 20 !important;
  pointer-events: auto !important;
}

#sistema .method-card:not(.active),
#sistema .method-card[aria-hidden="true"] {
  pointer-events: none !important;
  visibility: visible !important;
}

#sistema .method-card img {
  display: block !important;
  width: 100% !important;
  max-width: 610px !important;
  height: auto !important;
  max-height: 460px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: 50% 50% !important;
  transition: filter .52s ease, opacity .48s ease !important;
  will-change: filter, opacity;
}

#sistema .method-card[data-stack-slot="front"] img,
#sistema .method-card.active:not([data-stack-slot]) img {
  filter:
    brightness(1.055)
    saturate(1.06)
    drop-shadow(0 24px 46px rgba(0, 0, 0, .34))
    drop-shadow(0 0 18px rgba(41, 231, 205, .24)) !important;
}

#sistema .method-card[data-stack-slot="right"] img {
  filter:
    brightness(.68)
    saturate(.78)
    blur(1.1px)
    drop-shadow(0 22px 40px rgba(0, 0, 0, .31)) !important;
}

#sistema .method-card[data-stack-slot="left"] img {
  filter:
    brightness(.61)
    saturate(.72)
    blur(1.45px)
    drop-shadow(0 20px 38px rgba(0, 0, 0, .29)) !important;
}

#sistema .method-card[data-stack-slot="back"] img {
  filter:
    brightness(.50)
    saturate(.62)
    blur(2.35px)
    drop-shadow(0 18px 34px rgba(0, 0, 0, .27)) !important;
}

#sistema .method-card > :not(img),
#sistema .method-card:hover > :not(img),
#sistema .method-card:focus-within > :not(img) {
  transform: none !important;
}

/*
 * El hover solo afecta a la tarjeta frontal y queda desactivado mientras rota.
 * Al ir a la flecha, la tarjeta vuelve a su escala normal antes del cambio.
 */
@media (hover: hover) and (pointer: fine) {
  #sistema .method-wheel:not(.is-stack-rotating) .method-visual:hover .method-card[data-stack-slot="front"],
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:hover,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:focus-visible,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:focus-within {
    z-index: 24 !important;
    transform:
      translate(-50%, calc(-50% - 8px))
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(1.032) !important;
  }

  #sistema .method-wheel:not(.is-stack-rotating) .method-visual:hover .method-card[data-stack-slot="front"] img,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:hover img,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:focus-visible img,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:focus-within img {
    transform: translateZ(0) scale(1) !important;
    filter:
      brightness(1.11)
      saturate(1.10)
      contrast(1.02)
      drop-shadow(0 29px 50px rgba(0, 0, 0, .40))
      drop-shadow(0 0 30px rgba(41, 231, 205, .42)) !important;
  }
}

/* Toda la pila gira; el nuevo frente gana luz al imponerse. */
#sistema .method-wheel.is-stack-rotating .method-card {
  pointer-events: none !important;
  transition:
    transform .64s cubic-bezier(.16, 1, .30, 1),
    opacity .52s ease !important;
}

#sistema .method-wheel.is-stack-rotating .method-card.is-stack-incoming {
  transition-timing-function: cubic-bezier(.14, 1, .28, 1), ease !important;
}

#sistema .method-wheel.is-stack-rotating .method-card.is-stack-outgoing {
  transition-timing-function: cubic-bezier(.40, 0, .24, 1), ease !important;
}

#sistema .method-wheel.is-stack-rotating .method-card.is-stack-incoming img {
  animation: fw-method-v11-front-confirm .64s cubic-bezier(.16, 1, .30, 1) both !important;
}

@keyframes fw-method-v11-front-confirm {
  0% {
    filter:
      brightness(.68)
      saturate(.78)
      blur(1.1px)
      drop-shadow(0 22px 40px rgba(0, 0, 0, .31));
  }
  58% {
    filter:
      brightness(1.15)
      saturate(1.12)
      blur(0)
      drop-shadow(0 28px 50px rgba(0, 0, 0, .39))
      drop-shadow(0 0 28px rgba(41, 231, 205, .38));
  }
  100% {
    filter:
      brightness(1.055)
      saturate(1.06)
      blur(0)
      drop-shadow(0 24px 46px rgba(0, 0, 0, .34))
      drop-shadow(0 0 18px rgba(41, 231, 205, .24));
  }
}

/* Flechas estables en escritorio; se conserva la disposición inferior en móvil. */
@media (min-width: 641px) {
  #sistema .method-arrow {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  #sistema .method-dots {
    bottom: 24px !important;
  }
}

#sistema .method-arrow:hover,
#sistema .method-arrow:focus-visible {
  transform: scale(1.08) !important;
}

#sistema .method-arrow:active,
#sistema .method-arrow.is-pressed {
  transform: scale(.92) !important;
}

@media (max-width: 920px) {
  #sectores .project-card[href="/restaurantes/"] .project-card-content strong {
    font-size: clamp(1.75rem, 4.3vw, 2.24rem) !important;
  }

  #sistema .method-stage {
    min-height: 410px !important;
    height: 410px !important;
  }

  #sistema .method-visual {
    width: min(100%, 540px) !important;
    height: 410px !important;
  }

  #sistema .method-card {
    width: min(100%, 500px) !important;
    height: 410px !important;
  }

  #sistema .method-card img {
    max-width: 500px !important;
    max-height: 410px !important;
  }

  #sistema .method-card[data-stack-slot="right"] { --stack-x: 72px; --stack-y: 18px; }
  #sistema .method-card[data-stack-slot="left"] { --stack-x: -72px; --stack-y: 21px; }
  #sistema .method-card[data-stack-slot="back"] { --stack-x: 20px; --stack-y: 36px; }
}

@media (max-width: 700px) {
  #sectores .project-card .project-card-content,
  #sectores .project-card-content {
    left: 22px !important;
    right: 22px !important;
  }

  #sectores .project-card[href="/restaurantes/"] .project-card-content strong {
    font-size: clamp(1.86rem, 8.9vw, 2.42rem) !important;
  }

  #sistema .method-stage {
    min-height: 332px !important;
    height: 332px !important;
  }

  #sistema .method-visual {
    width: min(100%, 334px) !important;
    height: 302px !important;
  }

  #sistema .method-card {
    top: 50% !important;
    width: min(100%, 292px) !important;
    height: 292px !important;
  }

  #sistema .method-card img {
    max-width: 292px !important;
    max-height: 292px !important;
  }

  #sistema .method-card[data-stack-slot="right"] {
    --stack-x: 42px;
    --stack-y: 14px;
    --stack-scale: .91;
    --stack-rotate: 3.6deg;
    --stack-opacity: .38;
  }

  #sistema .method-card[data-stack-slot="left"] {
    --stack-x: -42px;
    --stack-y: 17px;
    --stack-scale: .89;
    --stack-rotate: -3.9deg;
    --stack-opacity: .30;
  }

  #sistema .method-card[data-stack-slot="back"] {
    --stack-x: 12px;
    --stack-y: 27px;
    --stack-scale: .84;
    --stack-opacity: .16;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sistema .method-card,
  #sistema .method-card img,
  #sistema .method-arrow {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/*
 * Firekworks v12 — corrección final del carrusel del método.
 *
 * 1. El brillo ya no se calcula sobre el lienzo completo del PNG/WebP.
 * 2. La pila deja de ser circular: en el paso 1 no existe tarjeta izquierda
 *    y en el paso 4 no existe tarjeta derecha.
 * 3. La tarjeta que entra al frente conserva opacidad completa durante el giro.
 */

#sistema .method-wheel,
#sistema .method-stage,
#sistema .method-visual,
#sistema .method-card,
#sistema .method-card img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* El halo se dibuja como una elipse independiente, nunca como una caja. */
#sistema .method-visual::before {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 0;
  width: min(72%, 430px);
  aspect-ratio: 1 / .78;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  opacity: .16;
  background: radial-gradient(ellipse at center,
    rgba(41, 231, 205, .24) 0%,
    rgba(41, 231, 205, .09) 38%,
    rgba(39, 145, 213, .035) 56%,
    transparent 74%);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  transition: opacity .26s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  #sistema .method-wheel:not(.is-stack-rotating) .method-visual:hover::before {
    opacity: .25;
    transform: translate(-50%, -51%) scale(1.06);
  }
}

#sistema .method-card {
  --stack-x: 0px;
  --stack-y: 0px;
  --stack-scale: 1;
  --stack-rotate: 0deg;
  --stack-opacity: 0;
  transition:
    transform .66s cubic-bezier(.16, 1, .30, 1),
    opacity .42s ease !important;
}

/* Frente */
#sistema .method-card[data-stack-slot="front"] {
  --stack-x: 0px;
  --stack-y: 0px;
  --stack-scale: 1;
  --stack-rotate: 0deg;
  --stack-opacity: 1;
  z-index: 30 !important;
  pointer-events: auto !important;
}

/* Lado derecho: solo tarjetas posteriores al paso activo. */
#sistema .method-card[data-stack-slot="right-1"] {
  --stack-x: 92px;
  --stack-y: 18px;
  --stack-scale: .91;
  --stack-rotate: 4.2deg;
  --stack-opacity: .34;
  z-index: 18 !important;
}

#sistema .method-card[data-stack-slot="right-2"] {
  --stack-x: 126px;
  --stack-y: 31px;
  --stack-scale: .84;
  --stack-rotate: 6.4deg;
  --stack-opacity: .20;
  z-index: 12 !important;
}

#sistema .method-card[data-stack-slot="right-3"] {
  --stack-x: 151px;
  --stack-y: 43px;
  --stack-scale: .78;
  --stack-rotate: 8deg;
  --stack-opacity: .11;
  z-index: 6 !important;
}

/* Lado izquierdo: solo tarjetas anteriores al paso activo. */
#sistema .method-card[data-stack-slot="left-1"] {
  --stack-x: -92px;
  --stack-y: 18px;
  --stack-scale: .91;
  --stack-rotate: -4.2deg;
  --stack-opacity: .34;
  z-index: 18 !important;
}

#sistema .method-card[data-stack-slot="left-2"] {
  --stack-x: -126px;
  --stack-y: 31px;
  --stack-scale: .84;
  --stack-rotate: -6.4deg;
  --stack-opacity: .20;
  z-index: 12 !important;
}

#sistema .method-card[data-stack-slot="left-3"] {
  --stack-x: -151px;
  --stack-y: 43px;
  --stack-scale: .78;
  --stack-rotate: -8deg;
  --stack-opacity: .11;
  z-index: 6 !important;
}

/*
 * Nunca se aplica brillo, contraste ni drop-shadow al lienzo completo del asset.
 * Esos filtros iluminaban también píxeles semitransparentes del canvas y revelaban
 * el rectángulo exterior. La profundidad depende de posición, escala y opacidad.
 */
#sistema .method-card img,
#sistema .method-card[data-stack-slot] img,
#sistema .method-card.active img,
#sistema .method-card:hover img,
#sistema .method-card:focus-visible img,
#sistema .method-card:focus-within img,
#sistema .method-wheel.is-stack-rotating .method-card img,
#sistema .method-wheel.is-stack-rotating .method-card.is-stack-incoming img,
#sistema .method-wheel.is-stack-rotating .method-card.is-stack-outgoing img {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* El hover eleva el asset sin iluminar su caja de píxeles. */
@media (hover: hover) and (pointer: fine) {
  #sistema .method-wheel:not(.is-stack-rotating) .method-visual:hover .method-card[data-stack-slot="front"],
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:hover,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:focus-visible,
  #sistema .method-wheel:not(.is-stack-rotating) .method-card[data-stack-slot="front"]:focus-within {
    z-index: 34 !important;
    transform:
      translate(-50%, calc(-50% - 8px))
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(1.032) !important;
    filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/*
 * La entrante se vuelve opaca antes de avanzar y ya no arranca oscura o borrosa.
 * La saliente sí pierde profundidad al colocarse detrás, pero sin parpadeos.
 */
#sistema .method-wheel.is-stack-rotating .method-card {
  transition:
    transform .66s cubic-bezier(.16, 1, .30, 1),
    opacity .40s ease !important;
}

#sistema .method-wheel.is-stack-rotating .method-card.is-stack-incoming {
  opacity: 1 !important;
  transition:
    transform .66s cubic-bezier(.14, 1, .28, 1),
    opacity .08s linear !important;
}

#sistema .method-wheel.is-stack-rotating .method-card.is-stack-outgoing {
  transition:
    transform .66s cubic-bezier(.34, 0, .22, 1),
    opacity .44s ease !important;
}

/* Anula explícitamente la animación de confirmación luminosa de v11. */
#sistema .method-card.is-stack-incoming,
#sistema .method-card.is-stack-outgoing,
#sistema .method-card.is-step-entering-forward,
#sistema .method-card.is-step-entering-back {
  animation: none !important;
}

@media (max-width: 920px) {
  #sistema .method-card[data-stack-slot="right-1"] { --stack-x: 72px; --stack-y: 17px; }
  #sistema .method-card[data-stack-slot="right-2"] { --stack-x: 98px; --stack-y: 28px; }
  #sistema .method-card[data-stack-slot="right-3"] { --stack-x: 116px; --stack-y: 38px; }
  #sistema .method-card[data-stack-slot="left-1"] { --stack-x: -72px; --stack-y: 17px; }
  #sistema .method-card[data-stack-slot="left-2"] { --stack-x: -98px; --stack-y: 28px; }
  #sistema .method-card[data-stack-slot="left-3"] { --stack-x: -116px; --stack-y: 38px; }
}

@media (max-width: 700px) {
  #sistema .method-visual::before {
    width: 82%;
    filter: blur(16px);
  }

  #sistema .method-card[data-stack-slot="right-1"] {
    --stack-x: 41px;
    --stack-y: 13px;
    --stack-scale: .91;
    --stack-rotate: 3.5deg;
    --stack-opacity: .31;
  }

  #sistema .method-card[data-stack-slot="right-2"] {
    --stack-x: 57px;
    --stack-y: 22px;
    --stack-scale: .84;
    --stack-rotate: 5.3deg;
    --stack-opacity: .17;
  }

  #sistema .method-card[data-stack-slot="right-3"] {
    --stack-x: 69px;
    --stack-y: 30px;
    --stack-scale: .78;
    --stack-rotate: 6.8deg;
    --stack-opacity: .09;
  }

  #sistema .method-card[data-stack-slot="left-1"] {
    --stack-x: -41px;
    --stack-y: 13px;
    --stack-scale: .91;
    --stack-rotate: -3.5deg;
    --stack-opacity: .31;
  }

  #sistema .method-card[data-stack-slot="left-2"] {
    --stack-x: -57px;
    --stack-y: 22px;
    --stack-scale: .84;
    --stack-rotate: -5.3deg;
    --stack-opacity: .17;
  }

  #sistema .method-card[data-stack-slot="left-3"] {
    --stack-x: -69px;
    --stack-y: 30px;
    --stack-scale: .78;
    --stack-rotate: -6.8deg;
    --stack-opacity: .09;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sistema .method-card,
  #sistema .method-card img,
  #sistema .method-visual::before {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/*
 * Firekworks v13 — elimina la caja residual visible en reposo.
 *
 * La hoja de interacciones antigua aplica a `.method-card.active` un filtro y
 * una sombra con mayor especificidad que la regla genérica de v12. Al pasar el
 * cursor, la regla de hover de v12 sí ganaba la cascada; por eso el rectángulo
 * desaparecía únicamente durante el hover. Esta capa neutraliza expresamente
 * el estado activo normal sin modificar la animación, la pila ni el hover.
 */

#sistema .method-card.active,
#sistema .method-card.active[data-stack-slot="front"],
#sistema .method-wheel:not(.is-stack-rotating) .method-card.active[data-stack-slot="front"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Ningún halo rectangular heredado puede quedar detrás de la tarjeta frontal. */
#sistema .method-card.active::before,
#sistema .method-card.active::after,
#sistema .method-card.active[data-stack-slot="front"]::before,
#sistema .method-card.active[data-stack-slot="front"]::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* El propio lienzo del asset permanece completamente neutro en reposo. */
#sistema .method-card.active img,
#sistema .method-card.active[data-stack-slot="front"] img {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}