/* ================================================================
   FASE F2 — Laterais com vida: três utilitários para aplicar por
   secção no editor do Odoo (campo "classes CSS" da secção).
   Nenhum altera conteúdo; apagar a classe reverte a secção.
   ================================================================ */

/* Tratamento 1: marca d'água do símbolo E na margem (usar em faixas
   de cor escura já configuradas como largura total) */
#wrapwrap #wrap section.ec-marca-e{position:relative;overflow:hidden}
#wrapwrap #wrap section.ec-marca-e::after{
  content:"E";position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:520px;line-height:1;
  color:rgba(245,250,251,.05);z-index:0;pointer-events:none;user-select:none}
#wrapwrap #wrap section.ec-marca-e.ec-clara::after{color:rgba(14,60,57,.045)}
#wrapwrap #wrap section.ec-marca-e.ec-esq::after{right:auto;left:-60px}
#wrapwrap #wrap section.ec-marca-e > *{position:relative;z-index:1}

/* Tratamento 2: ilustração/imagem da própria secção a sangrar pela margem
   (aplicar a classe na secção; a primeira imagem da secção sangra) */
@media (min-width:1100px){
  #wrapwrap #wrap section.ec-sangra-esq{overflow:visible}
  #wrapwrap #wrap section.ec-sangra-esq .row > div:first-child img{
    margin-left:calc((100vw - 100%)/-2 + 24px);max-width:calc(100% + (100vw - 100%)/2 - 24px)}
  #wrapwrap #wrap section.ec-sangra-dir .row > div:last-child img{
    margin-right:calc((100vw - 100%)/-2 + 24px);max-width:calc(100% + (100vw - 100%)/2 - 24px)}
}

/* Tratamento 3: formas orgânicas suaves nas margens (fundos claros) */
#wrapwrap #wrap section.ec-blobs{position:relative;overflow:hidden}
#wrapwrap #wrap section.ec-blobs::before{
  content:"";position:absolute;width:420px;height:420px;left:-180px;bottom:-180px;border-radius:50%;
  background:radial-gradient(circle,#DDEBE7 0 60%,transparent 61%);z-index:0;pointer-events:none}
#wrapwrap #wrap section.ec-blobs::after{
  content:"";position:absolute;width:340px;height:340px;right:-150px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,#F4E4E3 0 60%,transparent 61%);z-index:0;pointer-events:none}
#wrapwrap #wrap section.ec-blobs > *{position:relative;z-index:1}
@media (min-width:1100px) and (max-width:1199px){
  #wrapwrap #wrap section.ec-sangra-esq .row > div:first-child img,#wrapwrap #wrap section.ec-sangra-dir .row > div:last-child img{margin-left:auto!important;margin-right:auto!important;width:auto!important;max-width:100%!important}
}
@media (min-width:1200px) and (max-width:1439px){
  #wrapwrap #wrap section.ec-sangra-esq .row > div:first-child img{margin-left:calc((100vw - 1200px)/-2)!important;width:calc(100% + (100vw - 1200px)/2)!important;max-width:none!important}
  #wrapwrap #wrap section.ec-sangra-dir .row > div:last-child img{margin-right:calc((100vw - 1200px)/-2)!important;width:calc(100% + (100vw - 1200px)/2)!important;max-width:none!important}
}
@media (min-width:1440px){
  #wrapwrap #wrap section.ec-sangra-esq .row > div:first-child img{margin-left:calc((100vw - 1320px)/-2)!important;width:calc(100% + (100vw - 1320px)/2)!important;max-width:none!important}
  #wrapwrap #wrap section.ec-sangra-dir .row > div:last-child img{margin-right:calc((100vw - 1320px)/-2)!important;width:calc(100% + (100vw - 1320px)/2)!important;max-width:none!important}
}