<div class="metaforas-embed-container" id="metaforas-embed-container">
  <div class="metaforas-embed-wrapper">
    <div class="metaforas-embed-loader" id="metaforas-embed-loader" aria-live="polite" role="status">
      <div class="metaforas-embed-spinner" aria-hidden="true"></div>
      <p>Carregando Metáforas Terapêuticas...</p>
    </div>

    <iframe
      class="metaforas-embed-iframe"
      id="metaforas-embed-iframe"
      src="https://SEU-PROJETO.lovable.app"
      title="1500 Metáforas Terapêuticas Ilustradas"
      loading="lazy"
      allow="fullscreen; clipboard-read; clipboard-write; autoplay; encrypted-media"
      referrerpolicy="no-referrer-when-downgrade"
    ></iframe>
  </div>
</div><style>/* ====== ESCOPADO: Metáforas Embed ====== */

/* Reset leve dentro do container para evitar conflitos */
.metaforas-embed-container, 
.metaforas-embed-container * {
  box-sizing: border-box;
}

/* Container principal */
.metaforas-embed-container {
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  clear: both;
}

/* Wrapper com proporção (4:3 padrão) */
.metaforas-embed-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 = 75% */
  overflow: hidden;
}

/* Iframe responsivo, rolagem habilitada */
.metaforas-embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Loader */
.metaforas-embed-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.metaforas-embed-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: metaforas-spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes metaforas-spin {
  to { transform: rotate(360deg); }
}

/* Quando carregado, esconda o loader */
.metaforas-embed-container.metaforas-embed-loaded .metaforas-embed-loader {
  display: none;
}

/* Responsividade – ajuste de altura relativa em telas menores */
@media (max-width: 768px) {
  .metaforas-embed-container {
    margin: 10px;
    border-radius: 6px;
  }
  .metaforas-embed-wrapper {
    padding-bottom: 100%; /* 1:1 em tablets/celulares */
  }
}

@media (max-width: 480px) {
  .metaforas-embed-wrapper {
    padding-bottom: 125%; /* mais alto em telas muito pequenas */
  }
}</style> <script type="litespeed/javascript">(function(){function onReady(fn){if(document.readyState==='loading'){document.addEventListener('DOMContentLiteSpeedLoaded',fn,{once:!0})}else{fn()}}
onReady(function(){var container=document.getElementById('metaforas-embed-container');var iframe=document.getElementById('metaforas-embed-iframe');var wrapper=iframe?iframe.parentElement:null;if(!container||!iframe||!wrapper)return;function adjustRatio(){var w=window.innerWidth||document.documentElement.clientWidth;if(w<=480){wrapper.style.paddingBottom='125%'}else if(w<=768){wrapper.style.paddingBottom='100%'}else{wrapper.style.paddingBottom='75%'}}
iframe.addEventListener('load',function(){container.classList.add('metaforas-embed-loaded')},{once:!0});adjustRatio();window.addEventListener('resize',adjustRatio)})})()</script>