/*
 * Shared header shell for LlataRoch interactive widgets.
 * Axo, Todopoderoso and Bio Interactiva use the same internal frame.
 */

.ax-header,
.tp-header,
.fd-header {
  position: relative !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(23, 77, 143, .5), transparent 54%),
    linear-gradient(150deg, rgba(8, 48, 96, .98) 0%, rgba(2, 26, 60, .99) 44%, rgba(1, 17, 38, 1) 100%) !important;
  box-shadow: inset 0 -2px 0 rgba(210, 159, 87, .78) !important;
}

.ax-header::before,
.tp-header::before,
.fd-header::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
  border: 2px solid #d9a957;
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 2px rgba(1, 23, 51, .78),
    inset 0 0 0 3px rgba(244, 205, 133, .5),
    0 8px 20px rgba(1, 23, 51, .2);
}

.ax-header > *,
.tp-header > *,
.fd-header > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .ax-card,
  .tp-card,
  .fd-card {
    border-radius: 28px !important;
  }

  .ax-header::before,
  .tp-header::before,
  .fd-header::before {
    inset: 8px;
    border-radius: 20px;
  }

  .ax-stage::after {
    left: 20% !important;
    right: 20% !important;
    bottom: 142px !important;
    height: 26px !important;
  }
}