/* Encontro das Deusas, RED0_001_SITE_RETIRO, retiro.css
   Sobre o retiro, Os Três Portais, O que você vai viver e Como serão os dias. */
/* sobre */
.sobre .g{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.sobre .foto{aspect-ratio:4/5}.sobre .foto img{width:100%;height:100%;object-fit:cover}
.temas{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}
.temas span{border:1px solid rgba(110,90,153,.35);color:var(--lilas-esc);border-radius:999px;padding:7px 16px;font-size:.86rem}
.destaque{font-family:var(--serif);font-size:1.7rem;font-style:italic;color:var(--ameixa);line-height:1.35;border-left:2px solid var(--lilas);padding-left:24px;margin-top:30px}

/* portais */
.portais{background:#1d1729;color:#e7e1f0;overflow:hidden}
.portais .bgp{position:absolute;inset:-10% 0;background:url(../../imagens/o-retiro/os-tres-portais/portais-ritual-velas.webp) center/cover;opacity:.18}
.portais .wrap{position:relative}
.portais h2{color:#fff}.portais h2 b{color:var(--lilas-cl)}.portais .rot{color:var(--lilas-cl)}
.portais .lead{color:rgba(231,225,240,.75)}
.trilha{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:70px;position:relative}
.trilha:before{content:"";position:absolute;top:90px;left:16%;right:16%;height:1px;background:linear-gradient(90deg,transparent,var(--ouro),transparent);transform:scaleX(0);transition:transform 2s .4s}
.trilha.on:before{transform:scaleX(1)}
.portal{text-align:center;padding:0 10px}
.arco{width:150px;height:180px;margin:0 auto 30px;position:relative}
.arco svg{width:100%;height:100%;overflow:visible}
.arco path{fill:none;stroke:var(--ouro);stroke-width:1.2;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 2s cubic-bezier(.6,0,.2,1)}
.arco .luz{fill:url(#gl);opacity:0;transition:opacity 1.6s}
.portal.on path{stroke-dashoffset:0}.portal.on .luz{opacity:1}
.arco .n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:30px;font-family:var(--serif);font-size:3rem;font-style:italic;color:var(--lilas-cl);opacity:0;transition:opacity 1.2s 1s}
.portal.on .n{opacity:1}
.portal h3{font-size:1.9rem;color:#fff;font-style:italic}
.portal p{color:rgba(231,225,240,.75);margin-top:12px;font-size:.98rem}
.portal .t{font-family:var(--serif);font-style:italic;color:var(--lilas-cl);font-size:1.2rem;margin-top:16px}

/* viver */
.viver{background:var(--areia2)}
.viver .cab{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:60px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--branco);border-radius:4px;overflow:hidden;transition:transform .6s,box-shadow .6s}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(46,36,64,.35)}
.card .im{aspect-ratio:4/3;overflow:hidden}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.card:hover .im img{transform:scale(1.07)}
.card .tx{padding:26px 26px 30px}
.card h3{font-size:1.55rem;color:var(--ameixa)}
.card p{color:var(--suave);font-size:.95rem;margin-top:8px}
.nota{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--lilas-esc);margin-top:60px}

/* dias */
.dias{background:var(--lavanda)}
.dias .g{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;border-radius:4px;overflow:hidden}
.periodo{position:relative;min-height:520px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 34px;overflow:hidden}
.periodo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s}
.periodo:hover img{transform:scale(1.06)}
.periodo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,36,64,0) 25%,rgba(46,36,64,.88))}
.periodo>*:not(img){position:relative;z-index:2}
.periodo .h{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lilas-cl)}
.periodo h3{font-size:2.4rem;font-style:italic;margin:6px 0 12px}
.periodo p{font-size:.96rem;color:rgba(255,255,255,.88)}
.chegada{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;margin-top:50px;background:var(--branco);padding:36px 40px;border-radius:4px}
.chegada .c{font-family:var(--serif);font-style:italic;font-size:2rem;color:var(--lilas-esc);line-height:1.1}
.opc{text-align:center;margin-top:40px;font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ameixa)}

@media (max-width:980px){
  .sobre .g,.viver .cab{grid-template-columns:1fr;gap:44px}
  .cards{grid-template-columns:1fr 1fr}
  .dias .g{grid-template-columns:1fr}
  .periodo{min-height:380px}
  .trilha{grid-template-columns:1fr;gap:60px}.trilha:before{display:none}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .chegada{grid-template-columns:1fr;gap:14px;padding:28px}
}
@media (prefers-reduced-motion:reduce){
  .arco path{stroke-dashoffset:0}.arco .luz,.arco .n{opacity:1}
}

/* ===== etapa 1 ===== */
/* Sobre: cada selo troca suave para lilás claro, um após o outro, uma vez só, e fica assim */
.temas span{transition:background .6s ease,border-color .6s ease}
.on .temas span{background:var(--lilas-cl);border-color:var(--lilas);transition-delay:.8s}
.on .temas span:nth-child(2){transition-delay:1.4s}
.on .temas span:nth-child(3){transition-delay:2s}
.on .temas span:nth-child(4){transition-delay:2.6s}
.on .temas span:nth-child(5){transition-delay:3.2s}
/* Portais: colunas mais largas */
.portais .wrap{max-width:1320px}
.trilha{gap:40px}
.portal{padding:0}
/* O que você vai viver: esfumado branco embaixo da foto e um card em destaque por vez */
.card .im{position:relative}
.card .im:after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(180deg,rgba(255,253,250,0),var(--branco));pointer-events:none}
.card .im img{transition:transform 1.2s,filter .9s}
.card h3{transform-origin:left center;transition:transform .7s}
.cards.vivo .card .im img{filter:saturate(.45)}
.cards.vivo .card.ativo .im img{filter:none}
.cards.vivo .card.ativo{transform:translateY(-10px);box-shadow:0 30px 60px -30px rgba(46,36,64,.35)}
.cards.vivo .card.ativo h3{transform:scale(1.07)}
/* Como serão os dias: carrossel */
.cdias{margin-top:60px}
.cdias .janela{overflow:hidden;border-radius:4px}
.cdias .trilho{display:flex;gap:14px;will-change:transform}
.cdias .periodo{flex:0 0 calc((100% - 28px)/3)}
.cctrl{display:flex;justify-content:center;gap:14px;margin-top:26px}
.cctrl button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(110,90,153,.45);background:var(--branco);color:var(--lilas-esc);font-size:1.05rem;cursor:pointer;transition:background .4s,color .4s}
.cctrl button:hover{background:var(--lilas-esc);color:#fff}
@media (max-width:980px){.cdias .periodo{flex-basis:calc((100% - 14px)/2)}}
@media (max-width:640px){.cdias .periodo{flex-basis:100%}}

/* ===== etapa 1b ===== */
/* Sobre: foto em arco, com borda branca, sombra e moldura dourada deslocada atrás */
.sobre .moldura{position:relative}
.sobre .moldura:before{content:"";position:absolute;inset:0;border:1px solid var(--ouro);border-radius:999px 999px 6px 6px;opacity:0;transform:none;transition:transform 1.8s cubic-bezier(.2,.7,.2,1) 1s,opacity 1.2s ease 1s}
.sobre .moldura:has(.on):before{opacity:1;transform:translate(20px,20px)}
.sobre .moldura .foto{position:relative;z-index:1;border:10px solid var(--branco);border-radius:999px 999px 6px 6px;box-shadow:0 34px 60px -30px rgba(46,36,64,.5)}
/* Sobre: selos com letra mais firme; ao trocar, letra ameixa escuro e 1 px maior */
.temas span{font-weight:500;transition:background .6s ease,border-color .6s ease,color .6s ease,font-size .6s ease}
.on .temas span{color:#1d1729;font-size:calc(.86rem + 1px)}
/* Portais: pontos dourados caindo devagar, brilhando */
.brilhos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.brilhos i{position:absolute;top:-10px;width:3px;height:3px;border-radius:50%;background:#ecdcb4;box-shadow:0 0 6px 2px rgba(200,169,110,.55);opacity:0;animation:cai linear infinite}
@keyframes cai{0%{transform:translateY(0);opacity:0}10%{opacity:.9}50%{opacity:.35}70%{opacity:.85}100%{transform:translateY(110vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.brilhos{display:none}}
@media (max-width:640px){.sobre .moldura:has(.on):before{transform:translate(12px,12px)}}