/* ========================================================================
   Anexo 5 — Matches Virtuais (Premium Corporate Design)
   ======================================================================== */

/* Section container with premium background */
.macro-p-a05 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f7fb 0%, #eef4fa 100%);
  --macro-p-a05-text-strong: var(--confut-color-azul-escuro, #0a2647);
  --macro-p-a05-text-body: rgba(10, 38, 71, 0.9);
  --macro-p-a05-text-emphasis: var(--confut-color-verde-musgo, #0e665d);
}

/* Subtle radial gradients for depth */
.macro-p-a05::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 800px 600px at 20% 50%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 700px 500px at 80% 60%, rgba(255, 255, 255, 0.3), transparent 65%),
    radial-gradient(ellipse 600px 400px at 50% 30%, rgba(240, 240, 240, 0.5), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Ultra-subtle dotted texture pattern (bottom-left) */
.macro-p-a05::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 50%;
  background-image: radial-gradient(circle, rgba(180, 180, 180, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 1;
}

/* Container positioning */
.macro-p-a05 .container {
  position: relative;
  z-index: 2;
}

/* Text colors aligned to DESIGN.md: azul escuro for hierarchy, verde musgo for emphasis. */
body.macro-patrocinio-page .macro-patrocinio-shell > section.macro-p-a05 .macro-p-h2,
body.macro-patrocinio-page .macro-patrocinio-shell > section.macro-p-a05 #patrocinio-a05-heading {
  color: var(--macro-p-a05-text-strong) !important;
}

body.macro-patrocinio-page .macro-patrocinio-shell > section.macro-p-a05 .macro-p-body {
  color: var(--macro-p-a05-text-body) !important;
}

body.macro-patrocinio-page .macro-patrocinio-shell > section.macro-p-a05 .macro-p-body strong {
  color: var(--macro-p-a05-text-emphasis) !important;
  font-weight: 800;
}

/* Visual column with light beams */
.macro-p-a05__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0 1.25rem;
  z-index: 3;
}

/* Light beam 1 - Main curved beam from laptop to text */
.macro-p-a05__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 140%;
  height: 2px;
  left: 10%;
  top: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(21, 154, 140, 0.12) 25%,
    rgba(21, 154, 140, 0.10) 50%,
    rgba(21, 154, 140, 0.08) 75%,
    transparent 100%
  );
  border-radius: 50%;
  transform: rotate(-3deg);
  filter: blur(8px);
  pointer-events: none;
}

/* Light beam 2 - Secondary curved beam */
.macro-p-a05__visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 120%;
  height: 2px;
  left: 15%;
  top: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(21, 154, 140, 0.10) 30%,
    rgba(21, 154, 140, 0.08) 60%,
    transparent 100%
  );
  border-radius: 50%;
  transform: rotate(2deg);
  filter: blur(10px);
  pointer-events: none;
}

/* Laptop ambient glow - soft teal emphasis */
.macro-p-tablet-frame {
  position: relative;
  z-index: 4;
  border-radius: 22px;
  padding: 14px;
  transform-origin: center center;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: none !important;
  filter: none !important;
}

/* Soft teal ambient glow behind laptop */
.macro-p-tablet-frame::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(21, 154, 140, 0.15),
    rgba(21, 154, 140, 0.08) 40%,
    transparent 70%
  );
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

/* Soft layered shadow for depth */
.macro-p-tablet-frame::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 10%;
  right: 10%;
  height: 40px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 50%,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.04) 50%,
    transparent 80%
  );
  filter: blur(15px);
  z-index: -1;
  pointer-events: none;
}

/* PNG L5 transparente: sem sombra/filter no render (halo de CSS lê como fundo sólido). */
.macro-p-tablet-frame__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.macro-p-tablet-frame .macro-p-ph {
  width: 100%;
  border-radius: 14px;
  display: block;
}

/* Light node 1 - near laptop */
.macro-p-a05 .col-md-6:first-child {
  position: relative;
}

.macro-p-a05 .col-md-6:first-child::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(21, 154, 140, 0.25);
  border-radius: 50%;
  top: 48%;
  right: 25%;
  filter: blur(4px);
  z-index: 2;
  pointer-events: none;
}

/* Light node 2 - mid-section */
.macro-p-a05 .col-md-6:first-child::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(21, 154, 140, 0.20);
  border-radius: 50%;
  top: 62%;
  right: 15%;
  filter: blur(3px);
  z-index: 2;
  pointer-events: none;
}

/* Light node 3 - near text area */
.macro-p-a05 .col-md-6:last-child {
  position: relative;
}

.macro-p-a05 .col-md-6:last-child::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(21, 154, 140, 0.18);
  border-radius: 50%;
  top: 35%;
  left: -5%;
  filter: blur(3px);
  z-index: 2;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .macro-p-a05__visual::before,
  .macro-p-a05__visual::after {
    display: none;
  }
  
  .macro-p-a05 .col-md-6:first-child::before,
  .macro-p-a05 .col-md-6:first-child::after,
  .macro-p-a05 .col-md-6:last-child::before {
    display: none;
  }
}