.elementor-10 .elementor-element.elementor-element-eb82cdc{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:2;}.elementor-10 .elementor-element.elementor-element-eb82cdc:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-eb82cdc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://djlukinha.com.br/wp-content/uploads/2025/10/capasite.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-665cd93{--spacer-size:9px;}.elementor-10 .elementor-element.elementor-element-3d01341{--display:flex;--min-height:56vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--margin-top:-41px;--margin-bottom:0px;--margin-left:23px;--margin-right:-156px;}.elementor-10 .elementor-element.elementor-element-3d01341.e-con{--align-self:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-10 .elementor-element.elementor-element-63e4f51{width:var( --container-widget-width, 25% );max-width:25%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -73px;padding:0px 0px 0px 0px;--container-widget-width:25%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-63e4f51.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-63e4f51 img{width:61%;}.elementor-10 .elementor-element.elementor-element-b368314{--spacer-size:35px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-9cf879f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:left;}.elementor-10 .elementor-element.elementor-element-9cf879f.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-9cf879f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-b16dbaf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-b16dbaf .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-d116d23{--spacer-size:25px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-be2cf89 .elementor-button{background-color:#346cbb;font-family:"Poppins", Sans-serif;font-size:22px;font-weight:500;box-shadow:0px 0px 10px 0px rgba(61.484565217391314, 129.2930822306238, 215.9, 0.5);border-radius:50px 50px 50px 50px;padding:15px 15px 15px 15px;}.elementor-10 .elementor-element.elementor-element-be2cf89{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-be2cf89 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-be2cf89 .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-10 .elementor-element.elementor-element-700aa22{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--z-index:2;}.elementor-10 .elementor-element.elementor-element-700aa22:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-700aa22 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://djlukinha.com.br/wp-content/uploads/2025/10/capasite.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-6d21ca8{--spacer-size:50px;}.elementor-10 .elementor-element.elementor-element-bbff2f4{width:var( --container-widget-width, 30% );max-width:30%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -68px;padding:0px 0px 0px 0px;--container-widget-width:30%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-bbff2f4.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-bbff2f4 img{width:61%;}.elementor-10 .elementor-element.elementor-element-140aef9{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:left;}.elementor-10 .elementor-element.elementor-element-140aef9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-140aef9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-3f16a32{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-3f16a32 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:10px;font-weight:600;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-6dada12 .elementor-button{background-color:#346cbb;font-family:"Poppins", Sans-serif;font-size:22px;font-weight:500;box-shadow:0px 0px 10px 0px rgba(61.484565217391314, 129.2930822306238, 215.9, 0.5);border-radius:50px 50px 50px 50px;padding:15px 15px 15px 15px;}.elementor-10 .elementor-element.elementor-element-6dada12{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-6dada12 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-6dada12 .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-10 .elementor-element.elementor-element-e5331d1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-7592050{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-38px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:64px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-fe81bea .elementor-button{background-color:#346cbb;font-family:"Poppins", Sans-serif;font-size:22px;font-weight:500;box-shadow:0px 0px 10px 0px rgba(61.484565217391314, 129.2930822306238, 215.9, 0.5);border-radius:50px 50px 50px 50px;padding:15px 15px 15px 15px;}.elementor-10 .elementor-element.elementor-element-fe81bea{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-fe81bea .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-fe81bea .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-10 .elementor-element.elementor-element-69e84da{--display:flex;--min-height:692px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-3629f7b{margin:-127px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-e04b85f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:102px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-9cad7c5 .elementor-heading-title{color:#E7EBEC;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-79da7b1{font-family:"Poppins", Sans-serif;font-size:35px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-f5983bb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-fd4f8e7 .elementor-button{background-color:#346cbb;font-family:"Poppins", Sans-serif;font-size:22px;font-weight:500;box-shadow:0px 0px 10px 0px rgba(61.484565217391314, 129.2930822306238, 215.9, 0.5);border-radius:50px 50px 50px 50px;padding:15px 15px 15px 15px;}.elementor-10 .elementor-element.elementor-element-fd4f8e7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-fd4f8e7 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-fd4f8e7 .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-10 .elementor-element.elementor-element-5ee0b86{--spacer-size:100px;}.elementor-10 .elementor-element.elementor-element-028dd54{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-b640f74{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-572f239{--spacer-size:30px;}.elementor-10 .elementor-element.elementor-element-a3e6a3e.elementor-element{--align-self:center;}.elementor-10 .elementor-element.elementor-element-dfe2945{--spacer-size:50px;}.elementor-10 .elementor-element.elementor-element-33401a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-af08c9a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-3d8951e{width:100%;max-width:100%;}.elementor-10 .elementor-element.elementor-element-3d8951e.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}body.elementor-page-10:not(.elementor-motion-effects-element-type-background), body.elementor-page-10 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-69e84da{--width:50%;}.elementor-10 .elementor-element.elementor-element-e04b85f{--width:50%;}.elementor-10 .elementor-element.elementor-element-b640f74{--width:89%;}}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-eb82cdc:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-eb82cdc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://djlukinha.com.br/wp-content/uploads/2025/10/mobile-capa.jpg");}.elementor-10 .elementor-element.elementor-element-3d01341{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-63e4f51{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-9cf879f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 131px) 0px;text-align:center;}.elementor-10 .elementor-element.elementor-element-9cf879f .elementor-heading-title{font-size:24px;}.elementor-10 .elementor-element.elementor-element-b16dbaf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-d116d23{--spacer-size:0px;}.elementor-10 .elementor-element.elementor-element-700aa22:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-700aa22 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://djlukinha.com.br/wp-content/uploads/2025/10/mobile-capa.jpg");}.elementor-10 .elementor-element.elementor-element-6d21ca8{--spacer-size:12px;}.elementor-10 .elementor-element.elementor-element-bbff2f4{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-140aef9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 131px) 0px;text-align:center;}.elementor-10 .elementor-element.elementor-element-140aef9 .elementor-heading-title{font-size:24px;}.elementor-10 .elementor-element.elementor-element-3f16a32{margin:-136px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-10 .elementor-element.elementor-element-3f16a32 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-6dada12 .elementor-button{font-size:17px;}.elementor-10 .elementor-element.elementor-element-e5331d1{--z-index:0;}.elementor-10 .elementor-element.elementor-element-b4ca492{z-index:3;}.elementor-10 .elementor-element.elementor-element-7592050{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-10 .elementor-element.elementor-element-fe81bea{width:100%;max-width:100%;margin:18px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10 .elementor-element.elementor-element-fe81bea.elementor-element{--align-self:center;}.elementor-10 .elementor-element.elementor-element-fe81bea .elementor-button{font-size:17px;}.elementor-10 .elementor-element.elementor-element-69e84da{--margin-top:-41px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-3629f7b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-10 .elementor-element.elementor-element-e04b85f{--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-fd4f8e7 .elementor-button{font-size:17px;}.elementor-10 .elementor-element.elementor-element-5ee0b86{--spacer-size:4px;}}/* Start custom CSS for image, class: .elementor-element-63e4f51 *//* MOBILE / iPhone — força 1 coluna e centraliza tudo */
@media (max-width: 767.98px){
  .site-footer .site-footer__grid{
    display: grid;
    grid-template-columns: 1fr !important;   /* empilha */
    gap: 16px;
    justify-items: center !important;
    text-align: center !important;
  }

  /* Logo centralizada e menor */
  .site-footer .footer-left .footer-logo{
    max-height: 44px !important;
    margin: 0 auto !important;
    display: block;
  }

  /* Bloco central: quebra garantida do slogan */
  .site-footer .footer-center{ text-align: center !important; }
  .site-footer .footer-brand{
    margin: 0 0 6px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
  .site-footer .footer-brand .brand-slogan{
    display: block !important;   /* “Fazemos Valer a Pena” na 2ª linha */
    font-weight: 600;
    margin-top: 2px;
  }
  .site-footer .footer-byline{
    margin: 0 !important;
    max-width: 260px;
    margin-left: auto; margin-right: auto;
  }

  /* Redes: título e ícones centralizados, um abaixo do outro */
  .site-footer .footer-right{ text-align: center !important; }
  .site-footer .footer-social-title{
    margin: 0 0 8px !important;
    line-height: 1.2;
  }
  .site-footer .footer-social{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: max-content;
    margin: 0 auto !important;   /* fica exatamente sob o título */
  }
  .site-footer .footer-social a{
    width: 34px !important;
    height: 34px !important;
  }

  /* Folga pra não colidir com o botão flutuante do WhatsApp */
  .site-footer{ padding-bottom: 72px !important; }
}

/* Safari iOS tende a mexer no tamanho do texto; fixa o ajuste */
html{ -webkit-text-size-adjust: 100%; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-eb82cdc *//* ==============================
   HERO (#hero) — base desktop
   ============================== */
#hero{
  --azul1:#61B3FF;
  --azul2:#9CD9FF;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 5vw, 72px);
  z-index: 1;
}

/* Overlay p/ leitura + gradiente no rodapé */
#hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.62) 20%,
      rgba(0,0,0,.30) 44%,
      rgba(0,0,0,0)   64%),
    radial-gradient(60% 80% at 18% 22%, rgba(97,179,255,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
#hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #0D0D0D 85%);
  pointer-events:none;
}

/* Camadas corretas e alinhamento */
#hero .elementor-container,
#hero .elementor-column,
#hero .elementor-widget-container{ position:relative; z-index:1; overflow:visible; }
#hero > .elementor-container{ align-items:center; }

/* Largura da coluna de texto (esquerda) */
#hero .elementor-column:first-child{ max-width: clamp(560px, 54vw, 900px); }

/* Headline principal (use ID #titulo-20anos OU classe .headline-principal) */
#hero #titulo-20anos .elementor-heading-title,
#hero .headline-principal .elementor-heading-title{
  font-size: clamp(32px, 6.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  text-shadow: 0 2px 4px rgba(0,0,0,.45), 0 0 18px rgba(97,179,255,.16);
}

/* Subtítulo / parágrafos */
#hero p{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
  margin: 0 0 clamp(18px, 2vw, 24px);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Destaque em “inesquecíveis” */
.hero-keyword{
  position: relative; white-space: nowrap;
  background: linear-gradient(90deg, var(--azul1), var(--azul2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(97,179,255,.22);
  box-shadow: inset 0 -0.34em 0 rgba(97,179,255,.20);
}

/* Botão WhatsApp — adicione a classe `btn-wpp` no widget */
.btn-wpp .elementor-button{
  --btnA:#347DFF; --btnB:#61B3FF; --glow:rgba(97,179,255,.45);
  display:inline-flex; align-items:center; gap:.6em;
  padding: clamp(12px,1.2vw,16px) clamp(18px,2vw,24px);
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  background: linear-gradient(180deg, var(--btnA), var(--btnB));
  color:#fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 0 var(--glow);
  transition: transform .2s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-wpp .elementor-button .elementor-button-icon,
.btn-wpp .elementor-button i,
.btn-wpp .elementor-button svg{
  color:#fff; fill:currentColor; transition: transform .25s ease;
}
@keyframes pulseGlow{
  0%{ box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 0 0 var(--glow); }
  70%{ box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 0 16px rgba(97,179,255,0); }
  100%{ box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 0 0 rgba(97,179,255,0); }
}
.btn-wpp .elementor-button:hover{ transform: translateY(-2px); animation: pulseGlow 1.8s ease-out 1; }
.btn-wpp .elementor-button:hover .elementor-button-icon{ transform: translateY(-1px) rotate(-8deg) scale(1.05); }
.btn-wpp .elementor-button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.15), 0 0 0 6px rgba(97,179,255,.35);
}

/* ===== Ajustes desktop (mantidos) ===== */
@media (max-width:1440px){
  #hero #titulo-20anos .elementor-heading-title{ font-size: clamp(38px, 5.8vw, 66px) !important; }
}
@media (max-width:1280px){
  #hero #titulo-20anos .elementor-heading-title{ font-size: clamp(34px, 5.2vw, 58px) !important; }
}

/* Headline com limite mais suave */
#hero #titulo-20anos .elementor-heading-title,
#hero .headline-principal .elementor-heading-title{
  font-size: clamp(24px, 4.0vw, 55px) !important;
  line-height: 0.9!important;
  letter-spacing: -.02em;
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

/* texto à esquerda um pouco mais enxuto para não “gritar” */
#hero .elementor-column:first-child{
  max-width: clamp(520px, 48vw, 760px) !important;
}

/* destaque “inesquecíveis” mais fino */
.hero-keyword{
  box-shadow: inset 0 -0.24em 0 rgba(97,179,255,.18) !important;
  text-shadow: 0 0 10px rgba(97,179,255,.18) !important;
}

@media (max-width:1440px){
  #hero #titulo-20anos .elementor-heading-title,
  #hero .headline-principal .elementor-heading-title{
    font-size: clamp(32px, 4.6vw, 68px) !important;
  }
  #hero .elementor-column:first-child{ max-width: clamp(500px, 50vw, 720px) !important; }
}
@media (max-width:1280px){
  #hero #titulo-20anos .elementor-heading-title,
  #hero .headline-principal .elementor-heading-title{
    font-size: clamp(30px, 4.2vw, 62px) !important;
  }
}

/* =================================================================
   HERO — MOBILE CLEAN (≤1024px)
   - empilha: Título → Subheadline (.subheadline) → Botão (.btn-wpp)
   - centraliza tudo
   - “casamentos e eventos,” em uma linha; quebra após “eventos,”
   - botão 20px abaixo do subtexto
   ================================================================= */
@media (max-width:1024px){

  /* seção empilhada e centralizada */
  #hero > .elementor-container,
  #hero > .e-con{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  /* 1ª coluna (texto) primeiro; imagem depois */
  #hero > :where(.elementor-container, .e-con) > :first-child{
    order:1 !important;
    width:100% !important;
    max-width:720px !important;
  }
  #hero > :where(.elementor-container, .e-con) > :last-child{
    order:2 !important;
    width:100% !important;
  }

  /* widgets da coluna de TEXTO com gap = 20px */
  #hero > :where(.elementor-container) > :first-child > .elementor-widget-wrap,
  #hero > :where(.e-con) > .e-con-inner:first-child{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:20px !important;  /* Título ↔ Subheadline ↔ Botão */
  }

  /* reset: evita sobreposição no iPhone */
  #hero .elementor-column:first-child
  :is(.elementor-widget, .elementor-heading-title, .elementor-widget-text-editor){
    position:static !important;
    transform:none !important;
    margin:0 !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  }

  /* centraliza textos */
  #hero :is(h1,h2,h3,h4,h5,h6,p,.elementor-heading-title){
    text-align:center !important;
  }

  /* respiro do TÍTULO principal */
  #hero #titulo-20anos .elementor-heading-title{
    margin:0 0 20px !important;
  }

  /* SUBHEADLINE: menor (widget deve ter classe .subheadline) */
  #hero .subheadline .elementor-heading-title{
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.35 !important;
    margin:0 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* quebra só no mobile e “eventos,” em uma linha */
  .br-mobile{ display:block !important; }        /* quebra após “eventos,” */
  .nowrap-m{ white-space:nowrap !important; }    /* “casamentos e eventos,” em 1 linha */

  /* BOTÃO logo abaixo do subtexto com 20px */
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important;
    justify-content:center !important;
  }
  #hero .btn-wpp .elementor-button{
    margin:20px 0 0 !important;
  }
}
/* ===== HERO — MOBILE: título → subheadline → botão → (depois) foto ===== */
@media (max-width:1024px){

  /* 1) Torna o container do hero um GRID de 1 coluna com espaçamento fixo */
  #hero > .elementor-container,
  #hero > .e-con{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    row-gap: 20px !important;            /* respiro entre os blocos */
    align-items: start !important;
    justify-items: center !important;
  }

  /* 2) “Achata” as colunas/wraps para que CADA widget vire item do grid */
  #hero > .elementor-container > .elementor-column,
  #hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
  #hero > .e-con > .e-con-inner,
  #hero > .e-con > .e-con-inner > .elementor-widget-wrap{
    display: contents !important;
  }

  /* 3) Ordem explícita dos widgets no grid */
  #hero #titulo-20anos{ grid-row: 1 !important; }
  #hero .subheadline{  grid-row: 2 !important; }
  #hero .btn-wpp{      grid-row: 3 !important; justify-self: center !important; }
  /* a(s) imagem(ns) do hero caem depois naturalmente (grid-row: auto) */

  /* 4) Reset de posicionamento e centralização de textos */
  #hero .elementor-column:first-child
  :is(.elementor-widget, .elementor-heading-title, .elementor-widget-text-editor){
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    text-align: center !important;
  }

  /* 5) Tipografia e espaçamentos */
  #hero #titulo-20anos .elementor-heading-title{
    line-height: 1.05 !important;
    margin: 0 !important;               /* o row-gap dá o respiro de 20px */
  }
  #hero .subheadline .elementor-heading-title{
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* 6) Quebra controlada da subheadline */
  .br-mobile{ display: block !important; }        /* quebra após “eventos,” */
  .nowrap-m{ white-space: nowrap !important; }    /* “casamentos e eventos,” em 1 linha */

  /* 7) Botão sem margens extras (fica 20px abaixo por causa do row-gap) */
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important; justify-content:center !important;
  }
  #hero .btn-wpp .elementor-button{ margin: 0 !important; }
}
/* ===== HERO — MOBILE ORDEM CERTA (≤1024px) ===== */
@media (max-width:1024px){

  /* 0) Seção empilhada em coluna */
  #hero > .elementor-container,
  #hero > .e-con{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  /* 1) Coluna de TEXTO vem primeiro; coluna da FOTO depois */
  #hero > .elementor-container > .elementor-column:first-child,
  #hero > .e-con > .e-con-inner:first-child{
    order:1 !important;
    width:100% !important;
    max-width:720px !important;
  }
  #hero > .elementor-container > .elementor-column:last-child,
  #hero > .e-con > .e-con-inner:last-child{
    order:4 !important;              /* foto fica por último */
    width:100% !important;
  }

  /* 2) Dentro da coluna de TEXTO: empilha com gap=20px */
  #hero > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
  #hero > .e-con > .e-con-inner:first-child > .elementor-widget-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:20px !important;             /* Título ↔ Subheadline ↔ Botão */
  }

  /* 3) Ordem explícita dos widgets */
  #hero #titulo-20anos{ order:1 !important; }   /* TÍTULO */
  #hero .subheadline{  order:2 !important; }   /* SUBTEXTO */
  #hero .btn-wpp{      order:3 !important; }   /* BOTÃO */

  /* 4) Reset de posição para evitar sobreposição */
  #hero .elementor-column:first-child
  :is(.elementor-widget, .elementor-heading-title, .elementor-widget-text-editor){
    position:static !important;
    transform:none !important;
    margin:0 !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  }

  /* 5) Centralização de textos */
  #hero :is(h1,h2,h3,h4,h5,h6,p,.elementor-heading-title){
    text-align:center !important;
  }

  /* 6) Subheadline menor e sem quebras ruins */
  #hero .subheadline .elementor-heading-title{
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.35 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    margin: 0 !important;            /* gap cuida do respiro */
  }

  /* 7) Quebra controlada da subheadline (se usar os spans no HTML) */
  .br-mobile{ display:block !important; }       /* quebra após “eventos,” */
  .nowrap-m{ white-space:nowrap !important; }   /* “casamentos e eventos,” em 1 linha */

  /* 8) Botão: centralizado e sem margens extras (fica 20px pelo gap) */
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important; justify-content:center !important;
  }
  #hero .btn-wpp .elementor-button{ margin:0 !important; }
}


/* ===== HERO — MOBILE ORDEM: LOGO → TÍTULO → SUB → BOTÃO → FOTO ===== */
@media (max-width:1024px){

  /* 1) Container vira grid de 1 coluna com respiro fixo */
  #hero > .elementor-container,
  #hero > .e-con{
    display:grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;       /* espaço entre os blocos */
    align-items:start !important;
    justify-items:center !important;
  }

  /* 2) Achata colunas/wraps: cada WIDGET vira item do grid */
  #hero > .elementor-container > .elementor-column,
  #hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
  #hero > .e-con > .e-con-inner,
  #hero > .e-con > .e-con-inner > .elementor-widget-wrap{
    display:contents !important;
  }

  /* 3) Ordem explícita dos widgets */
  #hero .logo-hero{     grid-row: 1 !important; }   /* LOGO */
  #hero #titulo-20anos{ grid-row: 2 !important; }   /* TÍTULO */
  #hero .subheadline{   grid-row: 3 !important; }   /* SUBTEXTO */
  #hero .btn-wpp{       grid-row: 4 !important; }   /* BOTÃO */
  /* a(s) imagens/foto virão depois naturalmente (grid-row: auto) */

  /* 4) Reset geral pra não ter sobreposição/offsets no iPhone */
  #hero :is(.elementor-widget, .elementor-widget-wrap, .elementor-heading-title){
    position:static !important;
    transform:none !important;
    margin:0 !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    z-index:auto !important;
  }

  /* 5) Centralização de textos e do botão */
  #hero :is(h1,h2,h3,h4,h5,h6,p,.elementor-heading-title){
    text-align:center !important;
  }
  #hero .btn-wpp,
  #hero .btn-wpp .elementor-widget-container,
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }
  #hero .btn-wpp .elementor-button{ margin:0 !important; }

  /* 6) Tipografia da subheadline (menor e sem quebras ruins) */
  #hero .subheadline .elementor-heading-title{
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.35 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* 7) Ajuste fino da LOGO */
  #hero .logo-hero{
    text-align:center !important;
    z-index:2 !important;
  }
  #hero .logo-hero img{
    display:block !important;
    width: clamp(160px, 46vw, 240px) !important;
    height:auto !important;
    margin:0 auto !important;
  }

  /* 8) Remover spacers do Elementor no mobile */
  #hero .elementor-spacer,
  #hero .elementor-widget-spacer{
    display:none !important; height:0 !important; min-height:0 !important;
  }

  /* 9) Quebra controlada do subtexto (se usar no HTML) */
  .br-mobile{ display:block !important; }      /* quebra após “eventos,” */
  .nowrap-m{ white-space:nowrap !important; }  /* “casamentos e eventos,” em 1 linha */
}
/* ===== MOBILE: respiro extra abaixo do botão (afasta da foto) ===== */
@media (max-width:1024px){
  /* mantém gaps gerais enxutos entre os textos */
  #hero > .elementor-container,
  #hero > .e-con{
    row-gap: 14px !important;  /* título ↔ logo ↔ sub ↔ botão */
  }

  /* cria espaço só ENTRE o botão e a foto */
  #hero .btn-wpp{
    margin-bottom: clamp(28px, 6vw, 56px) !important; /* ajuste fino aqui */
  }

  /* garante centralização do botão */
  #hero .btn-wpp,
  #hero .btn-wpp .elementor-widget-container,
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }
  #hero .btn-wpp .elementor-button{
    margin:0 auto !important;
    width:auto !important;
  }
}
/* ===== MOBILE: aumentar TÍTULO e SUBHEADLINE ===== */
@media (max-width:1024px){
  /* TÍTULO (#titulo-20anos) – um pouco maior e compacto */
  #hero #titulo-20anos .elementor-heading-title{
    /* antes algo como clamp(24px, 4.0vw, 55px) */
    font-size: clamp(22px, 6.2vw, 34px) !important;
    line-height: 1.08 !important;          /* segura as quebras */
    letter-spacing: -.01em;
  }

  /* SUBHEADLINE (.subheadline) – segundo texto um pouco maior também */
  #hero .subheadline .elementor-heading-title{
    /* antes ~ clamp(15px, 4.2vw, 20px) */
    font-size: clamp(16px, 4.8vw, 22px) !important;
    line-height: 1.35 !important;
  }

  /* opcional: dá um leve respiro entre título e logo/subheadline */
  #hero #titulo-20anos .elementor-heading-title{ margin-bottom: 18px !important; }
}
/* ===== MOBILE: reduzir espaços entre textos e botão ===== */
@media (max-width:1024px){
  /* empilhamentos: troca o gap/row-gap para ~14–16px */
  #hero > .elementor-container,
  #hero > .e-con{
    row-gap: 16px !important;            /* antes: 18–20px */
  }
  #hero > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
  #hero > .e-con > .e-con-inner:first-child > .elementor-widget-wrap{
    gap: 16px !important;                /* Título ↔ Sub ↔ Botão */
  }

  /* zera margens extras dos widgets de texto (gap cuida do respiro) */
  #hero #titulo-20anos .elementor-heading-title,
  #hero .subheadline .elementor-heading-title{
    margin: 0 !important;
  }

  /* botão: grudadinho no subtexto (sem margem-top) */
  #hero .btn-wpp .elementor-button{
    margin-top: 0 !important;
  }

  /* mas deixa um respiro controlado ANTES da foto */
  #hero .btn-wpp{
    margin-bottom: clamp(22px, 5vw, 40px) !important; /* antes estava mais alto */
  }

  /* garantia de centralização do botão */
  #hero .btn-wpp,
  #hero .btn-wpp .elementor-widget-container,
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }
}
/* ===== HERO — MOBILE: reset de margens + gaps consistentes ===== */
@media (max-width:1024px){
  /* knobs */
  #hero{
    --gap-entre-itens: 14px;     /* título ↔ logo ↔ sub ↔ botão */
    --gap-apos-botao: 32px;      /* espaço entre botão e foto */
  }

  /* empilha e centraliza (mesmo se houver grid em blocos anteriores) */
  #hero > :is(.elementor-container, .e-con){
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    row-gap: var(--gap-entre-itens) !important;
  }

  /* gap entre Título / Sub / Botão dentro da coluna de texto */
  #hero > :is(.elementor-container, .e-con) > :first-child > :is(.elementor-widget-wrap, .e-con-inner){
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap: var(--gap-entre-itens) !important;
  }

  /* RESET — tira todas as margens automáticas do Elementor dentro do hero */
  #hero :is(.elementor-widget, .elementor-widget-container, .elementor-heading-title, p){
    margin:0 !important;
  }
  #hero .elementor-widget-spacer{ display:none !important; height:0 !important; min-height:0 !important; }

  /* BOTÃO — nada de margem extra; espaço vem da var --gap-apos-botao */
  #hero .btn-wpp{ margin: 0 0 var(--gap-apos-botao) 0 !important; }
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important; justify-content:center !important; align-items:center !important;
    text-align:center !important;
  }
  /* mais específico que qualquer regra anterior */
  #hero .btn-wpp.elementor-widget .elementor-button{
    margin:0 !important; align-self:center !important; width:auto !important;
  }
}
/* ===== HERO — MOBILE (forçar ordem global por GRID) ===== */
@media (max-width:1024px){

  /* 1) Container principal do hero vira GRID de 1 coluna */
  #hero > .elementor-container,
  #hero > .e-con{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    row-gap: var(--gap-entre-itens, 14px) !important;
    align-items: start !important;
    justify-items: center !important;
  }

  /* 2) “Achata” as colunas/wraps: cada WIDGET vira um item do GRID */
  #hero > .elementor-container > .elementor-column,
  #hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
  #hero > .e-con > .e-con-inner,
  #hero > .e-con > .e-con-inner > .elementor-widget-wrap{
    display: contents !important;
  }

  /* 3) ORDEM EXPLÍCITA — LOGO → TÍTULO → SUB → BOTÃO → (foto) */
  #hero .logo-hero{     grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; }
  #hero #titulo-20anos{ grid-column: 1 !important; grid-row: 2 !important; order: 0 !important; }
  #hero .subheadline{   grid-column: 1 !important; grid-row: 3 !important; order: 0 !important; }
  #hero .btn-wpp{       grid-column: 1 !important; grid-row: 4 !important; order: 0 !important; }

  /* 4) Qualquer OUTRA imagem (a foto) vem depois */
  #hero .elementor-widget-image:not(.logo-hero){
    grid-column: 1 !important; grid-row: 5 !important;
  }

  /* 5) Centralização garantida e reset de margens teimosas */
  #hero :is(.logo-hero, #titulo-20anos, .subheadline, .btn-wpp){
    align-self: center !important;
    justify-self: center !important;
  }
  #hero :is(.elementor-widget, .elementor-widget-container, .elementor-heading-title, p){
    margin: 0 !important;
  }

  /* 6) Espaço entre botão e foto (ajuste aqui se quiser) */
  #hero .btn-wpp{ margin-bottom: var(--gap-apos-botao, 32px) !important; }

  /* 7) Botão central */
  #hero .btn-wpp .elementor-button-wrapper{
    display:flex !important; justify-content:center !important; align-items:center !important;
  }
  #hero .btn-wpp .elementor-button{ margin:0 !important; }
}
/* ===== FIX: logo antes do título no mobile ===== */
@media (max-width:1024px){
  /* se a logo tiver classe .logo-hero (recomendado) */
  #hero .logo-hero{
    order: 0 !important;              /* em layouts flex */
    grid-row: 1 !important;           /* em layouts grid */
    grid-column: 1 !important;
  }

  /* garante o título DEPOIS da logo */
  #hero #titulo-20anos{
    order: 1 !important;
    grid-row: 2 !important;
  }

  /* fallback caso a logo não tenha classe:
     pega o PRIMEIRO widget de imagem do hero e trata como logo */
  #hero .elementor-widget-image:first-of-type:not(.logo-hero){
    order: 0 !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
  }
}
/* ===== HERO — MOBILE: espaçamento enxuto e consistente ===== */
@media (max-width:1024px){
  /* knobs de espaçamento */
  #hero{
    --gap-itens: 10px;          /* Título ↔ Sub ↔ Botão */
    --gap-botao-foto: 34px;     /* Botão → Foto */
  }

  /* aplica o mesmo gap, seja flex ou grid */
  #hero > :is(.elementor-container, .e-con){
    row-gap: var(--gap-itens) !important;
  }
  #hero > :is(.elementor-container, .e-con) > :first-child > :is(.elementor-widget-wrap, .e-con-inner){
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap: var(--gap-itens) !important;
  }

  /* zera margens nativas dos headings/widgets no mobile */
  #hero :is(.elementor-widget, .elementor-widget-container){ margin:0 !important; }
  #hero :is(h1,h2,h3,h4,h5,h6).elementor-heading-title,
  #hero #titulo-20anos .elementor-heading-title,
  #hero .subheadline .elementor-heading-title{ margin:0 !important; }

  /* botão sem margem em cima; respiro só antes da foto */
  #hero .btn-wpp .elementor-button{ margin:0 !important; }
  #hero .btn-wpp{ margin:0 0 var(--gap-botao-foto) 0 !important; }

  /* (opcional) título um pouco mais “compacto” */
  #hero #titulo-20anos .elementor-heading-title{ line-height:1.06 !important; }
}
/* ===== MOBILE: aproximar botão do início da seção + cobrir linha ===== */
@media (max-width:1024px){

  /* 1) Instagram (seção anterior): tira respiros e evita vãos */
  #instagram,
  #instagram > .elementor-container,
  #instagram > .e-con{
    margin-bottom: 0 !important;
    padding-bottom: clamp(4px, 1.2vw, 8px) !important;  /* um respiro mínimo */
  }
  #instagram .elementor-widget-spacer{
    display:none !important; height:0 !important; min-height:0 !important;
  }

  /* 2) Quem sou: puxa um tico pra cima e mantém topo curto */
  #quem-sou{
    margin-top: -8px !important;                         /* aproxima do botão */
    padding-top: clamp(6px, 1.2vw, 10px) !important;     /* conteúdo não cola */
  }

  /* 3) Fade do topo mais alto e mais “forte” para tampar a linha */
  #quem-sou::before{
    /* levanta e alonga o gradiente */
    top: calc(-1 * min(36vw, 260px)) !important;
    height: min(62vw, 380px) !important;

    /* escurece um pouco antes para disfarçar qualquer costura */
    background:
      radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.82) 42%,
        #0D0D0D 100%
      ) !important;

    z-index: 0 !important;   /* atrás do conteúdo, mas acima do fundo */
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-700aa22 *//* ==============================
   HERO (#hero) — base desktop
   ============================== */
#heromobile{
  --azul1:#61B3FF;
  --azul2:#9CD9FF;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 5vw, 72px);
  z-index: 1;
}

/* Overlay p/ leitura + gradiente no rodapé */
#heromobile::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.62) 20%,
      rgba(0,0,0,.30) 44%,
      rgba(0,0,0,0)   64%),
    radial-gradient(60% 80% at 18% 22%, rgba(97,179,255,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
#heromobile::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #0D0D0D 85%);
  pointer-events:none;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b4ca492 *//* Força o texto do feed do Instagram a ficar branco */
#sb_instagram .sbi_item,
#sb_instagram .sbi_caption,
#sb_instagram .sbi_username,
#sb_instagram .sbi_bio,
#sb_instagram p,
#sb_instagram a {
  color: white !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e5331d1 *//* ---------------------------------------------------------
   Transições FULL-WIDTH
   - ::before: fade do HERÓI -> esta seção + glow neutro sutil
   - ::after : fade desta seção -> Depoimentos (#000000)
   --------------------------------------------------------- */

/* Topo: encontra o herói (e aplica um glow neutro bem fraco) */
#quem-sou2::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;                  /* ocupa toda a tela */
  top:-110px;
  height:160px;
  background:
    radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.85) 0%, #0D0D0D 75%, #0D0D0D 100%);
  pointer-events:none;
  z-index:-1;
}

/* Base: encontra a próxima seção (Depoimentos) em #000000 */
#quem-sou2::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;                  
  bottom:-2600px;                  /* cobre qualquer linha entre as seções */
  height:290px;
  background: linear-gradient(
    to bottom,
    rgba(13,13,13,0) 10%,
    var(--bg-next) 80%,
    var(--bg-next) 100%
  );
  pointer-events:none;
  z-index:-1;
}
/* =========================================================
   Seção "Quem é o DJ Lukinha" – pronto para encontrar #000
   (container de Depoimentos)
   ========================================================= */

/* Seção base */
#quem-sou2 {
  --gutter: clamp(24px, 3vw, 48px);
  --bg-next: #000000;            /* cor da seção de Depoimentos */
  position: relative;
  isolation: isolate;            /* z-index próprio para os pseudo-elementos */
  overflow: visible;
  background-color: #0D0D0D;     /* fundo desta seção */
  padding: clamp(56px, 8vw, 20px) 0;
}
/* ===== Quem Sou (transições full-width) — MOBILE FIX ===== */
@media (max-width:1024px){
  /* garante contexto e que nada corte os pseudo-elementos */
  #quem-sou2{
    position: relative;
    isolation: isolate;
    overflow: visible;
    --bg-next: #000;                        /* seção seguinte (Depoimentos) */
  }

  /* Fade vindo do HERO para esta seção */
  #quem-sou2::before{
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* aproxima e reduz no mobile */
    top: clamp(-80px, -12vw, -36px);
    height: clamp(110px, 18vw, 180px);
    background:
      radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.85) 0%, #0D0D0D 75%, #0D0D0D 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* Fade desta seção para a PRÓXIMA (Depoimentos) */
  #quem-sou2::after{
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* nada de -2600px; encosta no rodapé da seção e cobre o encontro */
    bottom: -1px;
    height: clamp(140px, 24vw, 220px);
    background: linear-gradient(
      to bottom,
      rgba(13,13,13,0) 0%,
      var(--bg-next) 75%,
      var(--bg-next) 100%
    );
    pointer-events: none;
    z-index: -1;
  }

  /* padding mais enxuto no mobile para o conteúdo não “grudar” */
  #quem-sou2{
    padding-top: clamp(36px, 7vw, 56px);
    padding-bottom: clamp(28px, 6vw, 48px);
  }
}

/* Segurança: evita barra horizontal causada pelos faders em 100vw */
html, body{ overflow-x:hidden; }
#quem-sou2{ overflow-x: clip; }
/* ===== Transição do #quem-sou2 no MOBILE (≤1024px) ===== */
@media (max-width:1024px){
  #quem-sou2{
    position: relative;
    isolation: isolate;
    overflow: visible;
    background:#0D0D0D;
    /* remove linha fina entre seções */
    margin-top:-1px;
  }

  /* Fade vindo do HERO: começa MAIS ALTO e fica MAIS ALTO no mobile */
  #quem-sou2::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    /* puxa pra cima e aumenta a altura do gradiente */
    top: calc(-1 * min(24vw, 160px));
    height: min(46vw, 280px);
    background:
      radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
      /* fade do hero (quase transparente no topo → #0D0D0D) */
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 55%, #0D0D0D 100%);
    pointer-events:none;
    z-index:0; /* atrás do conteúdo, mas acima do fundo */
  }

  /* Fade desta seção para a PRÓXIMA (#000 dos Depoimentos) */
  #quem-sou2::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    bottom:-1px; /* encosta na base da seção */
    height: min(28vw, 220px);
    background: linear-gradient(
      to bottom,
      rgba(13,13,13,0) 0%,
      #000 75%,
      #000 100%
    );
    pointer-events:none;
    z-index:0;
  }

  /* segurança contra scroll horizontal por causa do 100vw */
  html, body{ overflow-x:hidden; }
  #quem-sou2{ overflow-x: clip; }
}
/* ===== FIX MOBILE (Instagram/Quem-sou) – evitar faixa clara no meio ===== */
@media (max-width:1024px){
  /* garanta contexto */
  #instagram, #quem-sou2{
    position: relative;
    isolation: isolate;
  }

  /* Se você tiver um fade no final do bloco do Instagram, faça assim: */
  #instagram::after{
    content:"";
    position:absolute;
    /* full-bleed sem costura */
    inset-inline: 50% 50%;
    margin-inline: -50vw;
    bottom:-1px;
    height: clamp(120px, 22vw, 200px);
    background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, #0D0D0D 75%, #0D0D0D 100%);
    background-repeat: no-repeat;
    pointer-events:none;
    z-index:0;
    transform:none; /* importante para não dividir ao meio */
  }

  /* Quem-sou: topo (fade vindo do hero) */
  #quem-sou2::before{
    left:auto; right:auto; transform:none;   /* remove o translateX */
    inset-inline: 50% 50%;
    margin-inline: -50vw;
    top: calc(-1 * min(24vw, 160px));
    height: min(46vw, 280px);
    width:auto;
    background:
      radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 55%, #0D0D0D 100%);
    background-repeat: no-repeat;
    pointer-events:none;
    z-index:0;
  }

  /* Quem-sou: base (fade para a próxima seção preta) */
  #quem-sou2::after{
    left:auto; right:auto; transform:none;
    inset-inline: 50% 50%;
    margin-inline: -50vw;
    bottom:-1px;
    height: min(28vw, 220px);
    width:auto;
    background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, #000 75%, #000 100%);
    background-repeat: no-repeat;
    pointer-events:none;
    z-index:0;
  }

  /* segurança extra contra rolagem horizontal */
  html, body{ overflow-x:hidden; }
  #instagram, #quem-sou2{ overflow-x: clip; }
}
/* ===== MOBILE: tampar a linha entre Instagram → Quem Sou ===== */
@media (max-width:1024px){

  /* 1) Instagram: cria um fade no RODAPÉ, por cima da junção */
  #instagram{
    position: relative !important;
    isolation: isolate !important;
    background:#0D0D0D !important;            /* garante base igual */
  }
  #instagram::after{
    content:"";
    position:absolute;
    left:50%; transform:translateX(-50%);
    width:100vw;
    bottom:-1px;                               /* sobrepõe 1px a próxima seção */
    height:min(28vw, 180px);
    background:linear-gradient(
      to bottom,
      rgba(13,13,13,0) 0%,
      #0D0D0D 70%,
      #0D0D0D 100%
    );
    pointer-events:none;
    z-index:2;                                 /* acima do fundo do #instagram */
  }

  /* 2) Quem Sou: encosta e mantém o fade do TOPO */
  #quem-sou{
    position: relative !important;
    isolation: isolate !important;
    margin-top:-1px !important;                /* sobreposição anti-hairline */
    background:#0D0D0D !important;
  }
  #quem-sou::before{
    content:"";
    position:absolute;
    left:50%; transform:translateX(-50%);
    width:100vw;
    top:calc(-1 * min(34vw, 240px));           /* sobe mais o gradiente */
    height:min(60vw, 360px);                   /* e alonga um pouco */
    background:
      radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
      linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.82) 40%,
        #0D0D0D 100%
      );
    pointer-events:none;
    z-index:1;                                  /* fica atrás do conteúdo */
  }

  /* 3) Segurança contra barras horizontais pelo 100vw */
  html, body{ overflow-x:hidden; }
  #instagram, #quem-sou{ overflow-x:clip; }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-fe81bea *//* ===== MOBILE: tampar a linha entre Instagram → Quem Sou ===== */
@media (max-width:1024px){

  /* 1) Instagram: cria um fade no RODAPÉ, por cima da junção */
  #instagram{
    position: relative !important;
    isolation: isolate !important;
    background:#0D0D0D !important;            /* garante base igual */
  }
  #instagram::after{
    content:"";
    position:absolute;
    left:50%; transform:translateX(-50%);
    width:100vw;
    bottom:-1px;                               /* sobrepõe 1px a próxima seção */
    height:min(28vw, 180px);
    background:linear-gradient(
      to bottom,
      rgba(13,13,13,0) 0%,
      #0D0D0D 70%,
      #0D0D0D 100%
    );
    pointer-events:none;
    z-index:2;                                 /* acima do fundo do #instagram */
  }

  /* 2) Quem Sou: encosta e mantém o fade do TOPO */
  #quem-sou{
    position: relative !important;
    isolation: isolate !important;
    margin-top:-1px !important;                /* sobreposição anti-hairline */
    background:#0D0D0D !important;
  }
  #quem-sou::before{
    content:"";
    position:absolute;
    left:50%; transform:translateX(-50%);
    width:100vw;
    top:calc(-1 * min(34vw, 240px));           /* sobe mais o gradiente */
    height:min(60vw, 360px);                   /* e alonga um pouco */
    background:
      radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
      linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.82) 40%,
        #0D0D0D 100%
      );
    pointer-events:none;
    z-index:1;                                  /* fica atrás do conteúdo */
  }

  /* 3) Segurança contra barras horizontais pelo 100vw */
  html, body{ overflow-x:hidden; }
  #instagram, #quem-sou{ overflow-x:clip; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e04b85f *//* =========================================================
   AJUSTES SOBRE O TEXTO (card + aproximação + tipografia)
   ========================================================= */

/* Usa as mesmas cores do glow da foto */
#quem-sou{
  --acc1: #ff3c3c;   /* vermelho do glow */
  --acc2: #50b4ff;   /* azul do glow */
}

/* Card do texto com borda gradiente + leve glow */
#quem-sou .col-texto{
  position: relative;
  max-width: 65ch;
  padding: clamp(20px, 2.2vw, 32px) clamp(22px, 2.4vw, 36px);
  border-radius: clamp(14px, 1.2vw, 22px);
  border: 1px solid transparent;
  background:
    linear-gradient(#0D0D0D, #0D0D0D) padding-box,
    linear-gradient(135deg, rgba(255,60,60,.85), rgba(80,180,255,.85)) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 12px 38px rgba(0,0,0,.45),
    0 0 36px rgba(255,60,60,.08),
    0 0 36px rgba(80,180,255,.07);
  isolation: isolate; /* garante efeitos corretos dos pseudo-elementos */
}

/* Conector sutil "foto → texto" (aproximação visual) */
#quem-sou .col-texto::after{
  content:"";
  position:absolute;
  left: calc(-1 * clamp(48px, 6vw, 120px)); /* invade o espaço entre a foto e o texto */
  top: 50%;
  transform: translateY(-50%);
  width: clamp(48px, 6vw, 120px);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,60,60,0) 0%,
    rgba(255,60,60,.70) 40%,
    rgba(80,180,255,.70) 100%);
  filter:
    drop-shadow(0 0 14px rgba(255,60,60,.35))
    drop-shadow(0 0 14px rgba(80,180,255,.25));
  pointer-events:none;
  opacity:.9;
}

/* Título com realce sutil + sublinhado de energia */
#quem-sou h2{
  color:#fff;
  text-shadow:
    0 0 24px rgba(255,60,60,.12),
    0 0 24px rgba(80,180,255,.10);
}
#quem-sou h2::after{
  content:"";
  display:block;
  width: clamp(96px, 25%, 180px);
  height: 2px;
  margin-top: clamp(10px, .9vw, 14px);
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  filter:
    drop-shadow(0 0 10px rgba(255,60,60,.35))
    drop-shadow(0 0 10px rgba(80,180,255,.28));
  opacity:.85;
}

/* Texto: corrige o clamp (antes min>max) e melhora leitura */
#quem-sou p{
  font-size: clamp(16px, 1.1vw, 19px);  /* CORRIGIDO */
  line-height: 1.5;
  opacity: .92;
}
#quem-sou p + p{ margin-top: .8em; }

/* --------------------------
   Responsivo
   -------------------------- */
@media (max-width: 1024px){
  #quem-sou .col-texto::after{
    left: calc(-1 * clamp(36px,4.5vw,80px));
    width: clamp(36px,4.5vw,80px);
    opacity:.75;
  }
}

@media (max-width: 767px){
  /* em mobile, simplifica: borda sólida e sem conector */
  #quem-sou .col-texto{
    padding: 20px 18px;
    background: #0D0D0D;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 10px 32px rgba(0,0,0,.35);
    border-radius: 14px;
  }
  #quem-sou .col-texto::after{ display:none; }
  #quem-sou h2::after{ width: 36%; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7592050 *//* =========================================================
   Seção "Quem é o DJ Lukinha" – integra com Depoimentos (#000)
   ========================================================= */

/* Seção base */
#quem-sou {
  --gutter: clamp(24px, 3vw, 48px);
  --bg-next: #000000; /* cor da seção seguinte */

  /* PALETA – força azuis (independe das cores globais) */
  --acc1: #61B3FF;   /* azul principal */
  --acc2: #9CD9FF;   /* azul claro de realce */

  position: relative;
  isolation: isolate;
  overflow: visible;
  background-color: #0D0D0D;
  padding: clamp(56px, 8vw, 20px) 0;
}

/* Nada corta pseudos da foto/card */
#quem-sou .elementor-container,
#quem-sou .elementor-column,
#quem-sou .e-con,
#quem-sou .col-texto,
#quem-sou .col-texto .elementor-widget-container{
  overflow: visible !important;
}

/* ===== Distribuição do texto (mais largura/respiro) ===== */
#quem-sou .col-texto{
  max-width: clamp(50ch, 50vw, 78ch);  /* antes 65ch */
}

/* Tipografia fluida */
#quem-sou h2{
  font-size: clamp(28px, 3.0vw, 64px);
  line-height: 1.15;
  margin-bottom: var(--gutter);
}
/* título com sublinhado azul (sutil) */
#quem-sou h2::after{
  content:"";
  display:block;
  width: clamp(110px, 26%, 190px);
  height: 2px;
  margin-top: clamp(10px, .9vw, 14px);
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  opacity:.85;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--acc1) 30%, transparent));
}

#quem-sou p{
  /* CORRIGIDO + um pouco maior p/ telas grandes */
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  opacity:.92;
}

/* =========================================================
   FOTO – wrapper com ID ou classe "wrap-foto"
   ========================================================= */
:is(#wrap-foto, .wrap-foto){
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-block;
  z-index: 2;
}

/* Glow AZUL multilayer (sem verde) */
:is(#wrap-foto, .wrap-foto)::before{
  content:"";
  position:absolute;
  inset:-12% -14% -14% -10%;
  background:
    radial-gradient(58% 60% at 36% 28%, color-mix(in srgb, var(--acc1) 42%, transparent), transparent 68%),
    radial-gradient(50% 52% at 68% 78%, color-mix(in srgb, var(--acc2) 32%, transparent), transparent 72%),
    radial-gradient(45% 55% at 60% 12%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(30px) saturate(1.06);
  opacity:.95;
  z-index:0;
  pointer-events:none;
  /* limita o campo do glow para não “pintar” demais o fundo */
  -webkit-mask: radial-gradient(70% 70% at 40% 40%, #000 0 60%, transparent 78%);
          mask: radial-gradient(70% 70% at 40% 40%, #000 0 60%, transparent 78%);
}

/* Chão elíptico com contatos sob as pernas */
:is(#wrap-foto, .wrap-foto)::after{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  bottom:-7%;
  height:clamp(26px, 6.6vw, 68px);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.58), transparent 72%),
    radial-gradient(42% 120% at 34% 18%, rgba(0,0,0,.46), transparent 70%),
    radial-gradient(42% 120% at 66% 18%, rgba(0,0,0,.46), transparent 70%),
    radial-gradient(40% 110% at 50% 0%, color-mix(in srgb, var(--acc1) 20%, transparent), transparent 75%),
    radial-gradient(40% 110% at 50% 0%, color-mix(in srgb, var(--acc2) 17%, transparent), transparent 85%);
  filter: blur(22px);
  opacity:.9;
  z-index:-1;
  pointer-events:none;
}

/* Halo/contorno da PNG (realça o recorte) */
:is(#wrap-foto, .wrap-foto) img{
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  transition: transform .25s ease, filter .35s ease;
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.50))
    drop-shadow(0 0 12px color-mix(in srgb, var(--acc1) 26%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--acc2) 22%, transparent));
}
:is(#wrap-foto, .wrap-foto):hover img{ transform: translateY(-2px); }

/* =========================================================
   CARD DO TEXTO – recebe luz + traço conector (em azul)
   ========================================================= */
#quem-sou .col-texto{
  position: relative;
  z-index: 3;
  padding: clamp(20px, 2.2vw, 32px) clamp(22px, 2.4vw, 36px);
  border-radius: clamp(14px, 1.2vw, 22px);
  border: 1px solid transparent;
  background:
    linear-gradient(#0D0D0D, #0D0D0D) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--acc1) 85%, transparent),
      color-mix(in srgb, var(--acc2) 85%, transparent)) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 12px 38px rgba(0,0,0,.45),
    0 0 36px color-mix(in srgb, var(--acc1) 9%, transparent),
    0 0 36px color-mix(in srgb, var(--acc2) 8%, transparent);
}

/* luz batendo na lateral do card */
#quem-sou .col-texto::before{
  content:"";
  position:absolute;
  left:-22px; top:10%; bottom:10%;
  width:clamp(10px, 2.6vw, 28px);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--acc1) 30%, transparent),
    color-mix(in srgb, var(--acc2) 28%, transparent));
  filter: blur(22px);
  opacity:.30;
  z-index:-1;
  pointer-events:none;
}

/* traço conector foto → card (agora todo azul) */
#quem-sou .col-texto::after{
  content:"";
  position:absolute;
  left: calc(-1 * clamp(48px, 6vw, 120px));
  top: 52%;
  transform: translateY(-50%);
  width: clamp(48px, 6vw, 120px);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    color-mix(in srgb, var(--acc1) 75%, transparent) 40%,
    color-mix(in srgb, var(--acc2) 75%, transparent) 100%);
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--acc1) 35%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--acc2) 25%, transparent));
  opacity:.92;
  pointer-events:none;
}

/* ---------------------------------------------------------
   Transições FULL-WIDTH
   --------------------------------------------------------- */
/* Topo: fade do HERÓI -> esta seção */
#quem-sou::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  top:-110px;
  height:0px;
  background:
    radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.02), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.85) 0%, #0D0D0D 75%, #0D0D0D 100%);
  pointer-events:none;
  z-index:-1;
}
/* Base: fade desta seção -> Depoimentos (#000) */
#quem-sou::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  bottom:-1px;
  height:190px;
  background: linear-gradient(
    to bottom,
    rgba(13,13,13,0) 0%,
    var(--bg-next) 80%,
    var(--bg-next) 100%
  );
  pointer-events:none;
  z-index:-1;
}

/* -------------------- Responsivo -------------------- */
@media (max-width:1024px){
  #quem-sou .col-texto{ max-width: clamp(48ch, 56vw, 72ch); }
  :is(#wrap-foto, .wrap-foto)::before{ filter: blur(26px); }
  :is(#wrap-foto, .wrap-foto)::after { filter: blur(16px); opacity:.82; }
  #quem-sou .col-texto::before{ filter: blur(18px); opacity:.22; }
  #quem-sou::before{ top:-80px; height:120px; }
  #quem-sou::after { height:120px; }
}
@media (max-width:767px){
  #quem-sou { text-align: center; }
  #quem-sou .col-texto{ margin: 0 auto; max-width: 64ch; }
  :is(#wrap-foto, .wrap-foto)::after{ display:none; } /* sem chão no mobile */
  #quem-sou .col-texto::before,
  #quem-sou .col-texto::after{ display:none; }
  :is(#wrap-foto, .wrap-foto)::before { filter: blur(24px); opacity: .8; }
  #quem-sou::before{ top:-60px; height:96px; }
  #quem-sou::after { height:96px; }
}
/* ===== FIX: faixa azul “vazando” do glow da foto ===== */
:is(#wrap-foto, .wrap-foto)::before{
  /* restringe o tamanho e a área do glow */
  inset:-6% -10% -8% -10%;
  background:
    radial-gradient(closest-side at 42% 58%, rgba(97,179,255,.40), transparent 65%),
    radial-gradient(closest-side at 68% 78%, rgba(156,217,255,.28), transparent 72%),
    radial-gradient(closest-side at 55% 18%, rgba(255,255,255,.05), transparent 70%);
  filter: blur(26px) saturate(1.02);
  opacity:.92;
  pointer-events:none;
  z-index:0;
  /* máscara limita o glow e impede “faixa” nas bordas */
  -webkit-mask: radial-gradient(85% 85% at 45% 60%, #000 0 62%, transparent 63%);
          mask: radial-gradient(85% 85% at 45% 60%, #000 0 62%, transparent 63%);
  mix-blend-mode: normal;
}

/* ===== Suaviza a luz lateral do card (pode parecer faixa) ===== */
#quem-sou .col-texto::before{
  width: clamp(8px, 1.6vw, 18px);
  filter: blur(16px);
  opacity:.18;
}

/* ===== Encurta o traço conector (se estiver longo demais) ===== */
#quem-sou .col-texto::after{
  left: calc(-1 * clamp(36px, 4vw, 80px));
  width: clamp(36px, 4vw, 80px);
  opacity:.75;
}

/* OPCIONAL: se quiser tirar completamente o sublinhado do título
#quem-sou h2::after{ display:none; }
*/
/* ===== Alinhamento geral no container (Elementor já é flex) ===== */
#quem-sou > .elementor-container,
#quem-sou > .e-con{
  align-items: center;           /* centraliza foto e card na altura */
}

/* ===== Ajuste fino: ERGUER a foto (recomendado) ===== */
#quem-sou{ --foto-nudge: clamp(-8px, -1.4vw, -36px); } /* valor negativo = sobe */
:is(#wrap-foto, .wrap-foto){
  transform: translateY(var(--foto-nudge));
}

/* manter o conector no meio do card */
#quem-sou .col-texto::after{ top: 50%; }

/* ===== Responsivo: reseta no mobile ===== */
@media (max-width: 1024px){
  #quem-sou{ --foto-nudge: -6px; }
}
@media (max-width: 767px){
  #quem-sou{ --foto-nudge: 0px; }         /* não mexe no mobile */
}

/* ===== OPCIONAL (use em vez do bloco da foto): DESCER o card ===== */
/*
#quem-sou{ --card-nudge: clamp(8px, 1.2vw, 28px); }   /* positivo = desce * /
#quem-sou .col-texto{ position: relative; top: var(--card-nudge); }
#quem-sou .col-texto::after{ top: calc(50% - var(--card-nudge)/2); }  /* mantém o conector alinhado */
/* @media (max-width: 767px){ #quem-sou{ --card-nudge: 0px; } } 
*/
/* ===== HERO — MOBILE: LOGO → TÍTULO → SUB → BOTÃO (ordem fixa) ===== */
@media (max-width:1024px){
  /* garante que o wrap da 1ª coluna é flex em coluna */
  #hero > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
  #hero > .e-con > .e-con-inner:first-child > .elementor-widget-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }

  /* ordem explícita dos widgets de texto */
  #hero .logo-hero{     order: 1 !important; }  /* LOGO primeiro */
  #hero #titulo-20anos{ order: 2 !important; }  /* TÍTULO */
  #hero .subheadline{   order: 3 !important; }  /* SUBTEXTO */
  #hero .btn-wpp{       order: 4 !important; }  /* BOTÃO */

  /* qualquer outro widget que esteja nessa coluna vai pro fim */
  #hero .elementor-column:first-child > .elementor-widget:not(.logo-hero):not(#titulo-20anos):not(.subheadline):not(.btn-wpp){
    order: 5 !important;
  }
}
/* MOBILE: suaviza a transição do HERO -> #quem-sou2 */
@media (max-width:1024px){
  #quem-sou2{
    position: relative;
    isolation: isolate;
    background:#0D0D0D;
    margin-top:-1px;                /* mata linha fina entre seções */
    overflow-x: clip;               /* evita scroll horizontal */
  }

  /* Fade do topo: sobe mais e cobre melhor o encontro */
  #quem-sou2::before{
    content:"";
    position:absolute;
    left:0;                         /* evita subpixel do translateX */
    right:0;
    top: calc(-1 * max(22vw, 140px));
    height: max(46vw, 240px);       /* mais alto no mobile */
    background:
      /* só um fade limpo: transparente -> #0D0D0D */
      linear-gradient(to bottom,
        rgba(13,13,13,0) 0%,
        rgba(13,13,13,.62) 55%,
        #0D0D0D 100%);
    pointer-events:none;
    z-index:0;
  }

  /* (opcional) base dessa seção -> próxima (preto) já estava OK */
  #quem-sou2::after{
    left:0; right:0;                /* mesmo ajuste de bordas */
  }
}
/* ===== QUEM SOU — MOBILE (≤1024px): fade do HERO e início da foto ===== */
@media (max-width:1024px){

  /* base da seção + sem scroll horizontal */
  #quem-sou2{
    position:relative;
    isolation:isolate;
    background:#0D0D0D;
    margin-top:-1px;                /* mata linha fina do encontro */
    padding-top: clamp(18px, 4vw, 28px) !important;  /* sobe tudo um pouco */
    overflow-x: clip;
  }

  /* FADE vindo do hero: mais alto e mais suave */
  #quem-sou2::before{
    content:"";
    position:absolute;
    left:0; right:0;                /* evita sub-pixel do translateX */
    top: -22vw;                     /* sobe o fade (ajuste fino aqui) */
    height: 34vw;                   /* altura do fade (ajuste fino) */
    background: linear-gradient(
      to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,.55) 60%,
      #0D0D0D 100%
    );
    pointer-events:none;
    z-index:0;                      /* atrás do conteúdo */
  }
/* ===== QUEM SOU — mobile: ver laterais do cartão + encostar na foto ===== */
@media (max-width: 1024px){

  /* 1) tira os paddings horizontais dos wrappers do Elementor */
  #quem-sou,
  #quem-sou > .elementor-container,
  #quem-sou > .e-con,
  #quem-sou > .elementor-container > .elementor-column,
  #quem-sou > .e-con > .e-con-inner,
  #quem-sou > .elementor-container > .elementor-column > .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) largura/centralização do cartão (ver as laterais do contorno) */
  #quem-sou .col-texto{
    width: min(92vw, 700px) !important;  /* ~92% da tela */
    margin-left: auto !important;
    margin-right: auto !important;
    /* aproxima do título */
    margin-top: clamp(8px, 2.5vw, 14px) !important;
  }

  /* 3) reduzir os respiros entre os blocos acima */
  /* foto → título */
  :is(#wrap-foto, .wrap-foto){
    margin-bottom: clamp(6px, 1.8vw, 10px) !important;
  }
  /* título → cartão */
  #quem-sou h2{
    margin-bottom: clamp(8px, 2.2vw, 12px) !important;
  }

  /* 4) dar um pouquinho mais de contraste na borda do cartão no mobile (opcional) */
  #quem-sou .col-texto{
    border-color: rgba(97,179,255,.26) !important;           /* sutilmente mais visível */
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03) inset,
      0 10px 32px rgba(0,0,0,.45),
      0 0 28px rgba(97,179,255,.10),
      0 0 28px rgba(156,217,255,.08) !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-57e98cd *//* Painel com borda em degradê + brilho externo */
.depoimentosd__panel{
  position: relative;
  border-radius: 26px;
  /* largura do bloco central com respiro nas laterais */
  max-width: min(1240px, 94vw);
  margin: clamp(1rem, 3vw, 2rem) auto;
  padding: clamp(1.25rem, 3vw, 2rem);

  /* truque do “duplo background” para criar borda em gradiente */
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0f14, #0b0f14) padding-box,
    linear-gradient(120deg, #4cc9ff, #3b82f6, #6366f1) border-box;

  /* leve brilho interno + sombra externa */
  box-shadow:
    0 0 0 1px rgba(99,102,241,.28) inset,
    0 18px 60px rgba(59,130,246,.25),
    0 0 120px rgba(99,102,241,.22);
}

/* Glow “de fora” (nebulosa), sem cortar nas bordas */
.depoimentosd__panel::after{
  content:"";
  position:absolute; inset:-16px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(56,189,248,.45), transparent 60%),
    radial-gradient(60% 40% at 50% 100%, rgba(99,102,241,.30), transparent 60%);
  filter: blur(22px);
  z-index: -1;
}

/* Título: deixa o peso e a leitura impecáveis no preto */
.depoimentosd__title{
  letter-spacing: -.01em;
}
.depoimentosd__title--grad{
  background: linear-gradient(90deg, #22d3ee 0%, #60a5fa 40%, #6366f1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pill da nota: micro respiro e brilho sutil */
.depoimentosd__ratingpill{
  gap: .6rem;
  box-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.depoimentosd__stars svg{ width: 19px; height: 19px; }

/* Card “EXCELENTE” com fundo fosco e borda suave, bem legível no escuro */
.depoimentosd__summary{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  color: #e7eaf0;
}
.depoimentosd__base{ color: #aab0b9; }


/* Escurece cartões e textos do Trustindex (quando não é iframe) */
.depoimentosd__widget [class*="ti-"]{ color:#e5e7eb; }
.depoimentosd__widget .ti-review, 
.depoimentosd__widget .ti-box,
.depoimentosd__widget .ti-card,
.depoimentosd__widget .ti-review-item,
.depoimentosd__widget .ti-review-card{
  background:#0f1318 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:16px !important;
}
.depoimentosd__widget .ti-star, 
.depoimentosd__widget .ti-star svg{
  color:#fbbf24 !important; fill:#fbbf24 !important;
}
.depoimentosd__widget a{ color:#93c5fd !important; }


/* Mantém o resumo e o carrossel alinhados pela primeira linha */
.depoimentosd__grid{ align-items: start; }

/* Em telas médias, dá um pouco mais de respiro à direita do resumo */
@media (min-width: 900px) and (max-width: 1180px){
  .depoimentosd__grid{ gap: clamp(1rem, 3vw, 1.5rem); }
}

/* Em mobile, mostrar o Trustindex primeiro (você já usa isso, reforço aqui) */
@media (max-width: 900px){
  .depoimentosd__summary{ order: 2; }
  .depoimentosd__widget{ order: 1; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-78e2530 *//* Ajuste do título acima do player */
.playlist-title {
  text-align: center;
  font-size: 1.5rem;            /* um pouco menor */
  font-weight: 500;             /* menos pesado que bold */
  color: #eaeaea;               /* branco suave, não puro */
  margin-bottom: 16px;          /* espaço menor entre título e player */
  line-height: 1.4;
}

/* Destaque verde apenas no nome Spotify */
.playlist-title .spotify {
  color: #1DB954;
}

/* Ícone musical em harmonia */
.playlist-title i {
  color: #1DB954;
  margin-right: 6px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6b8c2f7 *//* Caixa com “cara de Spotify” */
.spotify-box{
  --radius:16px;
  --pad:16px;
  background: #121212;                 /* fundo escuro do Spotify */
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  padding:var(--pad);
  max-width:840px;
  margin:24px auto;
}

/* O iframe do player */
.spotify-box iframe[src*="open.spotify.com"]{
  display:block;
  width:100% !important;
  height:clamp(180px, 42vw, 352px) !important; /* ajuste se for faixa/álbum */
  border:0 !important;
  border-radius:12px;
  overflow:hidden;
}

/* (Opcional) leve ajuste em modo escuro do SO */
@media (prefers-color-scheme: dark){
  .spotify-box{ background:#0f0f0f; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a3e6a3e */.spotify-btn {
  display: inline-block;
  background: #1DB954;
  color: #fff;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.spotify-btn:hover {
  background: #1ed760;
  transform: scale(1.05);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33401a1 *//* Escopo do componente */
.sa-loc{
  /* Variáveis locais (evita conflito com tema/kit) */
  --loc-bg:#000; 
  --loc-card:#000; 
  --loc-line:#2d6efc;
  --loc-txt:#fff; 
  --loc-muted:#b7b7c2; 
  --loc-accent:#2d6efc; 
  --loc-green:#33d17a;
  color:var(--loc-txt);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
}

/* Card */
.sa-loc .loc-card{
  color:var(--loc-txt);
  background:var(--loc-card);
  border:1.5px solid var(--loc-line);
  border-radius:16px;
  padding:20px;
  max-width:1100px;
  margin:24px auto;
  box-shadow:0 6px 30px rgba(0,0,0,.35);
  box-sizing:border-box;
}

/* Cabeçalho */
.sa-loc .loc-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.sa-loc .loc-title{ display:flex; align-items:center; gap:14px; }
.sa-loc .loc-avatar{
  width:64px; height:64px; border-radius:12px; object-fit:cover;
  border:2px solid var(--loc-accent);
}
.sa-loc .loc-name{ font-size:1.35rem; margin:0; color:var(--loc-txt); }
.sa-loc .loc-rating{ font-size:.95rem; color:var(--loc-muted); }
.sa-loc .stars{ color:#ffd166; margin-right:6px; letter-spacing:1px; }
.sa-loc .score{ color:var(--loc-txt); font-weight:600; }
.sa-loc .badge{ padding:6px 10px; border-radius:999px; font-size:.8rem; border:1px solid currentColor; }
.sa-loc .badge-open{ color:var(--loc-green); }

/* Grid */
.sa-loc .loc-grid{ 
  display:grid; 
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); 
  gap:18px; 
}

/* Mapa (wrapper para cortar o iframe) */
.sa-loc .loc-map{
  overflow:hidden; 
  border-radius:12px;
}
.sa-loc .loc-map iframe{
  width:100%;
  height:clamp(260px, 38vw, 360px);
  border:0; 
  display:block;
}

.sa-loc .loc-info{ display:flex; flex-direction:column; gap:14px; }
.sa-loc .info-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sa-loc .info-list li{ color:var(--loc-muted); line-height:1.45; }
.sa-loc .info-list strong{ color:var(--loc-txt); font-weight:600; margin-right:6px; }
.sa-loc .info-list a{ color:var(--loc-txt); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25); }
.sa-loc .info-list a:hover{ border-bottom-color:transparent; }

.sa-loc .text-green{ color:var(--loc-green); }

/* Botões */
.sa-loc .btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.sa-loc .btn{
  --btn-color: var(--loc-accent);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  background:#0f0f14; color:var(--loc-txt);
  text-decoration:none; border:1px solid var(--btn-color);
  transition:transform .2s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  font-size:.95rem;
}
.sa-loc .btn i{ font-size:1rem; line-height:1; }
.sa-loc .btn:hover{
  background:var(--btn-color);
  border-color:var(--btn-color);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transform:translateY(-2px);
}
.sa-loc .btn:active{ transform:scale(.98); }
.sa-loc .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(45,110,252,.35); }

/* Cores por ação */
.sa-loc .btn--whats{ --btn-color:#25D366; }
.sa-loc .btn--insta{ --btn-color:#E4405F; }
.sa-loc .btn--routes,
.sa-loc .btn--site,
.sa-loc .btn--call{ --btn-color:#2d6efc; }
.sa-loc .btn--save{ --btn-color:#6c757d; }

/* Acessibilidade */
.sa-loc .visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  padding:0; border:0; height:1px; width:1px; overflow:hidden; white-space:nowrap;
}

/* Responsivo */
@media (max-width: 900px){
  .sa-loc .loc-grid{ grid-template-columns:1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3d8951e *//* MOBILE / iPhone — força 1 coluna e centraliza tudo */
@media (max-width: 767.98px){
  .site-footer .site-footer__grid{
    display: grid;
    grid-template-columns: 1fr !important;   /* empilha */
    gap: 16px;
    justify-items: center !important;
    text-align: center !important;
  }

  /* Logo centralizada e menor */
  .site-footer .footer-left .footer-logo{
    max-height: 44px !important;
    margin: 0 auto !important;
    display: block;
  }

  /* Bloco central: quebra garantida do slogan */
  .site-footer .footer-center{ text-align: center !important; }
  .site-footer .footer-brand{
    margin: 0 0 6px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
  .site-footer .footer-brand .brand-slogan{
    display: block !important;   /* “Fazemos Valer a Pena” na 2ª linha */
    font-weight: 600;
    margin-top: 2px;
  }
  .site-footer .footer-byline{
    margin: 0 !important;
    max-width: 260px;
    margin-left: auto; margin-right: auto;
  }

  /* Redes: título e ícones centralizados, um abaixo do outro */
  .site-footer .footer-right{ text-align: center !important; }
  .site-footer .footer-social-title{
    margin: 0 0 8px !important;
    line-height: 1.2;
  }
  .site-footer .footer-social{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: max-content;
    margin: 0 auto !important;   /* fica exatamente sob o título */
  }
  .site-footer .footer-social a{
    width: 34px !important;
    height: 34px !important;
  }

  /* Folga pra não colidir com o botão flutuante do WhatsApp */
  .site-footer{ padding-bottom: 72px !important; }
}

/* Safari iOS tende a mexer no tamanho do texto; fixa o ajuste */
html{ -webkit-text-size-adjust: 100%; }/* End custom CSS */