.elementor-38196 .elementor-element.elementor-element-c92f1f9{--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-38196 .elementor-element.elementor-element-5673826{--display:flex;--min-height:0px;--margin-top:-10px;--margin-bottom:-391px;--margin-left:-10px;--margin-right:-10px;--padding-top:-11px;--padding-bottom:-11px;--padding-left:-11px;--padding-right:-11px;}:root{--page-title-display:none;}@media(min-width:769px){.elementor-38196 .elementor-element.elementor-element-c92f1f9{--content-width:100%;}.elementor-38196 .elementor-element.elementor-element-5673826{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-08f6ba6 *//* CALENDÁRIO 2027 – VERSÃO 3b (carrossel em arcos, imagens inteiras + selos de confiança)
   Cole em Elementor > CSS personalizado. Sem tags <style>.
   Para trocar a identidade visual, altere apenas as cores/variáveis do bloco .cfx abaixo. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.cfx{
  /* ===== CORES (ajuste aqui para combinar com o site Consagrados de Fátima) ===== */
  --c-principal:#14306B;      /* títulos e detalhes principais */
  --c-destaque:#B8893A;       /* dourado: bordas, ícones */
  --c-destaque-claro:#E3C77A; /* dourado claro: botão */
  --c-destaque-escuro:#8A6A1F;
  --c-creme:#FBF6EA;          /* caixa de texto */
  --c-suave:#F1F5FB;          /* fundo da seção 3 */
  --c-texto:#1F2A44;

  /* ===== MEDIDAS ===== */
  --topo:66px;        /* altura do cabeçalho do site no mobile */
  --h-titulo:84px;
  --h-btn:56px;
  --gap-slides:14px;
  --H:clamp(260px,calc(100vh - 252px),460px);
  --Hs:calc(var(--H) - 28px);
  --sw:min(calc(var(--Hs)*.8),76vw);   /* largura do slide (arco) */

  font-family:'Lora',Georgia,'Times New Roman',serif;
  font-size:17px;line-height:1.65;color:var(--c-texto);
  width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;
  background:#fff;
}
@supports (height:100svh){
  .cfx{--H:clamp(260px,calc(100svh - 252px),460px)}
}
.cfx *,.cfx *::before,.cfx *::after{box-sizing:border-box}
.cfx h1,.cfx h2,.cfx p,.cfx ul{margin:0;padding:0}
.cfx a{text-decoration:none}
.cfx img{max-width:100%}
.cfx p,.cfx li,.cfx a,.cfx strong,.cfx span{font-family:'Lora',Georgia,'Times New Roman',serif}
.cfx h1,.cfx h2{font-family:'Cinzel',Georgia,serif;font-weight:700;color:var(--c-principal)}
.cfx h2{font-size:clamp(1.3rem,5vw,1.9rem);line-height:1.25;text-align:center;margin-bottom:20px}

/* ---------- Botão ---------- */
.cfx a.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--h-btn);padding:8px 24px;border-radius:6px;
  background:linear-gradient(180deg,var(--c-destaque-claro),var(--c-destaque));
  color:var(--c-principal);font-weight:700;font-size:.98rem;line-height:1.25;
  text-transform:uppercase;letter-spacing:.05em;
  box-shadow:0 2px 0 #9C7A2C,0 8px 20px rgba(20,48,107,.22);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cfx a.btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 #9C7A2C,0 12px 24px rgba(20,48,107,.26);color:var(--c-principal)}
.cfx a.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #9C7A2C}
.cfx a:focus-visible,.cfx button:focus-visible{outline:3px solid var(--c-principal);outline-offset:3px}

/* ---------- 1. HERO ---------- */
.cfx .hero{
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 16px 40px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 42%,rgba(227,199,122,.24),transparent 70%),
    linear-gradient(180deg,#E3ECF8 0%,#F5F8FD 70%,#FFFFFF 100%);
}
.cfx .titulo{min-height:var(--h-titulo);display:flex;flex-direction:column;justify-content:center;text-align:center}
.cfx .titulo::after{content:"";display:block;width:72px;height:2px;background:var(--c-destaque);margin:10px auto 0}
.cfx .sobre{font-style:italic;font-size:1rem;color:var(--c-destaque-escuro);margin-bottom:2px}
.cfx h1{font-size:clamp(1.55rem,7.4vw,3rem);letter-spacing:.02em;line-height:1.15;color:var(--c-principal)}

/* Carrossel em arcos (janelas de igreja) */
.cfx .carrossel{position:relative;width:100%;height:calc(var(--sw)*1.25 + 28px)}
.cfx .faixa{
  position:relative;display:flex;align-items:center;gap:var(--gap-slides);
  height:calc(100% - 28px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cfx .faixa::-webkit-scrollbar{display:none}
.cfx .faixa::before,.cfx .faixa::after{content:"";flex:0 0 calc((100% - var(--sw))/2 - var(--gap-slides))}
.cfx .slide{
  flex:0 0 var(--sw);width:var(--sw);aspect-ratio:4/5;margin:0;position:relative;overflow:hidden;cursor:pointer;
  scroll-snap-align:center;background:linear-gradient(180deg,#EAF1FA,#F7F9FD);border:1.5px solid var(--c-destaque);
  border-radius:calc(var(--sw)/2) calc(var(--sw)/2) 14px 14px;
  transform:scale(.88);opacity:.55;transition:transform .35s ease,opacity .35s ease,box-shadow .35s ease;
}
.cfx .slide.ativo{transform:none;opacity:1;cursor:default;box-shadow:0 12px 30px rgba(20,48,107,.25)}
.cfx .slide img{
  /* imagem inteira (sem corte), centralizada dentro do arco */
  position:absolute;display:block;object-fit:contain;object-position:center;
  left:calc(var(--sw)*.08);top:calc(var(--sw)*.24);
  width:calc(100% - var(--sw)*.16);height:calc(100% - var(--sw)*.29);
  filter:drop-shadow(0 6px 10px rgba(20,48,107,.28));
}

.cfx .seta{
  position:absolute;top:calc(50% - 14px);z-index:3;transform:translateY(-50%);width:30px;height:30px;padding:0;border-radius:50%;
  background:rgba(20,48,107,.85);border:1px solid var(--c-destaque);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.cfx .seta svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cfx .seta.ant{left:2px}.cfx .seta.prox{right:2px}
.cfx .pontos{position:absolute;left:0;right:0;bottom:0;height:28px;display:flex;justify-content:center;align-items:center;gap:2px}
.cfx .pontos button{display:grid;place-items:center;width:20px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.cfx .pontos button::after{content:"";width:8px;height:8px;border-radius:999px;background:rgba(20,48,107,.28);transition:width .25s ease,background .25s ease}
.cfx .pontos button[aria-current="true"]::after{width:20px;background:var(--c-destaque)}

/* Caixa de texto (logo abaixo do botão) */
.cfx .caixa{
  margin-top:10px;padding:22px 20px 24px;border-radius:10px;background:var(--c-creme);
  border:1px solid rgba(184,137,58,.55);border-top:3px solid var(--c-destaque);
  box-shadow:0 8px 28px rgba(20,48,107,.12);color:var(--c-texto);
}
.cfx .caixa h2{text-align:left;font-size:1.2rem;margin-bottom:14px}
.cfx .caixa p{margin-bottom:14px}
.cfx .caixa p:last-of-type{margin-bottom:20px}
.cfx .caixa strong{color:var(--c-principal)}

/* Selos de confiança */
.cfx .selos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
.cfx .selo{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.9);border:1px solid rgba(20,48,107,.2);
  color:var(--c-principal);font-size:.78rem;font-weight:700;line-height:1.3;
}
.cfx a.selo:hover{border-color:var(--c-destaque)}
.cfx .selo svg{width:14px;height:14px;flex:0 0 14px;stroke:var(--c-destaque-escuro);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. A MENSAGEM DE FÁTIMA ---------- */
.cfx .sec{padding:56px 20px}
.cfx .sec.suave{background:var(--c-suave)}
.cfx .miolo{max-width:720px;margin:0 auto}
.cfx .miolo p{margin-bottom:1em}
.cfx .miolo p:last-child{margin-bottom:0}
.cfx .ornamento{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 18px;max-width:240px;color:var(--c-destaque-escuro)}
.cfx .ornamento::before,.cfx .ornamento::after{content:"";flex:1;height:1px;background:var(--c-destaque)}
.cfx .ornamento svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- Barra fixa ---------- */
.cfx .barra{
  position:fixed;left:0;right:0;bottom:0;z-index:999;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(20,48,107,.97);border-top:1px solid var(--c-destaque);
  transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;
}
.cfx .barra.visivel{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
.cfx .barra a.btn{min-height:50px}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  .cfx{--topo:0px;--H:min(72vh,600px)}
  .cfx .hero{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:"t t" "c x" "c b" "c s";grid-template-rows:auto auto auto 1fr;
    column-gap:48px;row-gap:20px;padding:40px max(32px,calc((100% - 1160px)/2)) 64px;
  }
  .cfx .titulo{grid-area:t;min-height:0;margin-bottom:8px}
  .cfx .carrossel{grid-area:c;align-self:start}
  .cfx .caixa{grid-area:x;margin-top:60px;align-self:start;padding:28px 28px 30px}
  .cfx .hero > a.btn{grid-area:b;align-self:start}
  .cfx .selos{grid-area:s;align-self:start;justify-content:flex-start}
  .cfx .caixa .btn-caixa{display:none}
  .cfx .sec{padding:76px 32px}
  .cfx .barra{display:none}
}

@media (prefers-reduced-motion:reduce){
  .cfx *,.cfx *::before,.cfx *::after{transition:none!important;scroll-behavior:auto!important}
}/* End custom CSS */