:root{
  --bg:#F9EEE6;
  --paper:#FFF8F2;
  --paper2:#FFF3EB;
  --brown:#3A2418;
  --brown2:#5A3A2A;
  --terracotta:#B45D42;
  --terracotta2:#C96945;
  --gold:#C69B4A;
  --gold2:#D8A247;
  --line:rgba(198,155,74,.25);
  --shadow:0 24px 68px rgba(58,36,24,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--brown);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}
.container{width:min(1180px,92%);margin:0 auto}
.hidden{display:none}

.hero-content{
  text-align:center;
  position:relative;
  z-index:2;
  max-width:760px;
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:34px 0 52px;
  background:#F9EEE6;
}
.brand-logo{
  width:min(430px,78vw) !important;
  max-width:430px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto 26px !important;
  mix-blend-mode:normal;
  background:transparent !important;
}

.footer-logo{
  width:min(430px,78vw) !important;
  max-width:430px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto 18px !important;
  mix-blend-mode:normal;
  background:transparent !important;
}
h1{
  font-family:"Montserrat",sans-serif;font-size:clamp(2.15rem,4.5vw,4.35rem);
  line-height:1.08;letter-spacing:-.052em;margin:0 0 18px;color:var(--brown);
}
.subtitle{font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.55;max-width:720px;margin:0 auto 28px;color:var(--brown2)}
.lead-form{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 28px}
.lead-form input{
  width:230px;padding:16px 18px;border-radius:14px;border:1px solid rgba(58,36,24,.14);
  background:rgba(255,255,255,.75);font-size:1rem;outline:none;color:var(--brown);
  box-shadow:0 12px 30px rgba(58,36,24,.06);
}
.lead-form input:focus{border-color:var(--gold)}
.lead-form button{
  border:0;border-radius:14px;padding:16px 27px;background:linear-gradient(135deg,var(--terracotta2),#A84D35);
  color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;box-shadow:0 18px 38px rgba(180,93,66,.25)
}
.promise-row{display:flex;justify-content:center;gap:58px;flex-wrap:wrap;margin-top:24px}
.promise-row div{display:flex;align-items:center;gap:12px;text-align:left;font-size:.95rem;color:var(--brown2)}
.promise-row span{
  width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:1.18rem
}
.circle-lines,.footer-lines{
  position:absolute;border:1px solid rgba(198,155,74,.18);border-radius:50%;pointer-events:none
}
.circle-lines{width:520px;height:520px;top:86px}
.circle-left{left:-275px}.circle-right{right:-275px}

.hero-photos{
  position:absolute;
  z-index:1;
  top:30%;
  width:330px;
  display:grid;
  gap:18px;
}

.hero-photos.left{left:26px}

.hero-photos.right{right:26px}

.photo{
  height:205px;
  margin:0;
  border-radius:32px;
  background-size:cover;
  background-position:center;
  border:7px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
}

.travel{background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80")}
.baptism{background-image:url("https://images.unsplash.com/photo-1515488764276-beab7607c1e6?auto=format&fit=crop&w=900&q=80")}
.dinner{background-image:url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=900&q=80")}
.graduation{background-image:url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=900&q=80")}

section{padding:56px 0}
.pain,.why{padding-top:24px}
.pain,.moments,.why{background:linear-gradient(180deg,#fff2eb,#f9eee6)}
.pain-layout,.why-layout{display:grid;grid-template-columns:285px 1fr;gap:42px;align-items:center}
.section-side-title h2,.center-title h2,.story-card h2,.memory-card h2{
  font-family:"Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.015em;color:var(--brown);line-height:1.08
}
.section-side-title h2{font-size:clamp(1.85rem,3vw,2.75rem);margin:0}
.round{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:0;flex-shrink:0;font-size:2rem;font-weight:800}
.round.filled{background:var(--terracotta);color:#fff}
.round.heart{border:1px solid var(--terracotta);color:var(--terracotta)}
.pain-cards,.why-cards{
  display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.32)
}
.pain-cards article,.why-cards article{
  padding:26px 18px;
  text-align:center;
  border-right:1px solid var(--line);
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.pain-cards article:last-child,.why-cards article:last-child{border-right:0}
.pain-cards span,.why-cards span{
  font-size:1.7rem;
  display:block;
  margin-bottom:12px;
  line-height:1;
}
.pain-cards p,.why-cards p{
  margin:0;
  color:var(--brown2);
  font-size:.96rem;
  line-height:1.45;
}
.pain-cards article:last-child,.why-cards article:last-child{border-right:0}
.pain-close{text-align:center;font-size:1.34rem;line-height:1.45;margin:34px 0 0}
.pain-close strong{color:var(--terracotta)}

.solution{background:var(--bg)}
.center-title{text-align:center;margin-bottom:40px}
.center-title h2{font-size:clamp(2rem,4vw,3.55rem);margin:0 0 10px}
.center-title p{margin:0;color:var(--brown2);font-size:1.15rem}
.journey{display:grid;grid-template-columns:.85fr 1.05fr .85fr 1.05fr .85fr 1.05fr;gap:16px;align-items:stretch}
.phone{background:#121212;border-radius:32px;padding:10px;box-shadow:var(--shadow);min-width:0}
.screen{height:330px;border-radius:24px;background:#fff8f2;padding:18px;overflow:hidden}
.notch{width:58px;height:7px;border-radius:20px;background:#24150e;margin:0 auto 20px}
.screen small{display:block;color:var(--gold);font-size:.9rem}
.screen h3,.screen h4{font-family:"Montserrat",sans-serif;margin:8px 0;color:var(--brown);line-height:1.08}
.screen p{color:var(--gold);margin:0 0 18px}
.line{height:30px;background:#eadbd0;border-radius:14px;margin:12px 0}.line.short{width:70%}
.app-icons{display:flex;justify-content:center;gap:14px;margin:13px 0}.app-icons i{width:28px;height:28px;border-radius:50%;background:#e9dbd0}
.screen-img,.gallery span,.timeline-card{
  background-size:cover;background-position:center;border-radius:16px;
}
.screen-img{height:106px;margin-bottom:14px}
.img-dinner{background-image:url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=500&q=80")}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gallery span{height:91px}
.g1{background-image:url("https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=350&q=80")}
.g2{background-image:url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=350&q=80")}
.g3{background-image:url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=350&q=80")}
.g4{background-image:url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=350&q=80")}
.feature{
  background:rgba(255,255,255,.52);border:1px solid rgba(198,155,74,.18);border-radius:28px;
  padding:28px 24px;box-shadow:0 12px 32px rgba(58,36,24,.06)
}
.feature strong{
  display:inline-block;background:var(--terracotta);color:#fff;border-radius:999px;padding:9px 22px;
  text-transform:uppercase;letter-spacing:.11em;font-family:"Montserrat",sans-serif;font-size:.88rem;margin-bottom:20px
}
.feature strong.gold{background:var(--gold)}
.feature ul,.story-card ul,.memory-card ul{list-style:none;margin:0;padding:0}
.feature li{font-size:1.04rem;margin:18px 0;color:var(--brown2)}
.feature li:before,.story-card li:before,.memory-card li:before{content:"✦";color:var(--gold);margin-right:10px}
.phrase{text-align:center;font-size:1.38rem;margin:38px 0 0}.phrase strong{color:var(--gold)}

.moments .center-title{margin-bottom:28px}
.moments-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:14px}
.moments-grid>div{text-align:center}
.moment{height:106px;margin:0 0 10px;border-radius:18px;background-size:cover;background-position:center;box-shadow:var(--shadow);border:5px solid rgba(255,255,255,.58)}
.moments-grid p{font-weight:700;font-size:.9rem;margin:0;color:var(--brown)}
.m-travel{background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=400&q=80")}
.m-baptism{background-image:url("https://images.unsplash.com/photo-1515488764276-beab7607c1e6?auto=format&fit=crop&w=400&q=80")}
.m-birthday{background-image:url("https://images.unsplash.com/photo-1464349153735-7db50ed83c84?auto=format&fit=crop&w=400&q=80")}
.m-wedding{background-image:url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=400&q=80")}
.m-grad{background-image:url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=400&q=80")}
.m-dinner{background-image:url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=400&q=80")}
.m-family{background-image:url("https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=400&q=80")}
.m-friends{background-image:url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=400&q=80")}
.m-corp{background-image:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=400&q=80")}
.moments-close{text-align:center;font-size:1.18rem;margin:32px 0 0;color:var(--brown2)}.moments-close strong{color:var(--terracotta)}

.story-memory{background:#fff8f2}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.story-card,.memory-card{
  background:rgba(249,238,230,.72);border:1px solid rgba(198,155,74,.18);border-radius:32px;
  padding:42px;box-shadow:0 12px 32px rgba(58,36,24,.05);position:relative;overflow:hidden
}
.story-card h2,.memory-card h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:0 0 22px}
.story-card p,.memory-card p{color:var(--brown2);font-size:1.03rem}
.story-card li,.memory-card li{margin:11px 0;color:var(--brown2)}
.infinity-mark{display:none}
.memory-card{display:grid;grid-template-columns:1.2fr 210px;gap:24px;align-items:center}
.memory-phone{width:210px}.memory-list{height:350px}.timeline-card{height:74px;margin:12px 0}
.t1{background-image:url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=400&q=80")}
.t2{background-image:url("https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=400&q=80")}
.t3{background-image:url("https://images.unsplash.com/photo-1527529482837-4698179dc6ce?auto=format&fit=crop&w=400&q=80")}
.less{margin-top:24px}.less strong{color:var(--terracotta)}


.why-layout{
  grid-template-columns:330px 1fr;
  gap:36px;
  align-items:center;
}
.why-cards{
  grid-template-columns:1fr 1fr 1fr 1fr 1.35fr;
}
.why-cards article{
  min-height:132px;
}
.why{
  padding-bottom:18px;
}

.why-close{text-align:center;max-width:850px;margin:34px auto 0;color:var(--brown2);font-size:1.18rem;line-height:1.55}.why-close strong{color:var(--brown)}

.final{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  text-align:center;
  padding:18px 0 56px;
}

.footer-form{margin-bottom:0}.footer-lines{width:460px;height:460px;bottom:-320px}.footer-lines.left{left:-130px}.footer-lines.right{right:-130px}

@media(max-width:1180px){
  .hero-photos{display:none}
  .journey{grid-template-columns:1fr 1fr}
  .moments-grid{grid-template-columns:repeat(3,1fr)}
  .pain-cards,.why-cards{grid-template-columns:1fr 1fr}
  .pain-cards article:nth-child(2n),.why-cards article:nth-child(2n){border-right:0}
}
@media(max-width:820px){
  section{padding:56px 0}
  .hero{padding:42px 0 46px}
  .brand-logo{width:min(340px,88vw)}
  .lead-form{display:grid;width:min(420px,100%)}
  .lead-form input,.lead-form button{width:100%}
  .promise-row{display:grid;gap:18px}
  .pain-layout,.why-layout,.split{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .phone{max-width:240px;margin:0 auto}
  .pain-cards,.why-cards{grid-template-columns:1fr}
    .pain-cards article:last-child,.why-cards article:last-child{border-bottom:0}
  .moments-grid{grid-template-columns:repeat(2,1fr)}
  .memory-card{grid-template-columns:1fr}
  .memory-phone{width:220px;margin:0 auto}
}


.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.social-btn i{
  font-size:18px;
}


/* Ajustes finais CONVIVIX V4:
   - Fundo do hero/final igual ao fundo da logo (#F9EEE6)
   - Logo principal centralizada e alta
   - Fotos laterais abaixadas sem sobrepor título/texto
*/
@media (min-width:1181px){
  .hero-content{
    padding-top:0;
  }

  .hero h1{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  .hero .subtitle{
    max-width:690px;
  }

  .hero-photos{
    top:30%;
  }
}

@media (min-width:1181px) and (max-width:1320px){
  .hero-photos{
    width:300px;
    top:32%;
  }

  .photo{
    height:190px;
  }

  .hero-photos.left{left:12px}
  .hero-photos.right{right:12px}
}

@media (max-width:820px){
  .brand-logo{
    width:min(340px,88vw) !important;
    max-width:340px !important;
  }

  .footer-logo{
    width:min(340px,88vw) !important;
    max-width:340px !important;
  }
}


/* ============================================================
   CONVIVIX — TÍTULOS LATERAIS COM ÍCONE — CORREÇÃO FINAL
   styles.css fica na RAIZ. assets/ tem apenas a logo.
   ============================================================ */

/* Desktop: coluna esquerda mais larga para caber o título */
@media (min-width: 901px) {

  .pain,.why {
    padding-top: 24px !important;
  }

  /* Grid: coluna esquerda com 340px de largura fixa */
  .pain-layout,
  .why-layout {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 32px !important;
    align-items: center !important;
  }

  /* Título lateral: ícone à esquerda + texto à direita, em linha */
  .section-side-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
  }

  /* Ícone circular: não encolhe, centralizado verticalmente */
  .section-side-title .round {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* Texto do título: ocupa o restante da coluna (340 - 58 - 18 gap = ~264px) */
  .section-side-title h2 {
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.05 !important;
    font-size: clamp(1.75rem, 2.4vw, 2.4rem) !important;
    letter-spacing: .01em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Cards: colunas flexíveis para caber o texto longo */
  .pain-cards,
  .why-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-self: center !important;
  }

  .pain-cards article,
  .why-cards article {
    padding: 22px 14px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}

/* Mobile: ícone em cima, depois título */
@media (max-width: 900px) {
  .section-side-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .section-side-title .round {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  .section-side-title h2 {
    flex: 1 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }
}

.pain-cards p,.why-cards p{
  max-width:170px;
  font-size:0.92rem;
  line-height:1.35;
  margin:0 auto;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

.phone{width:175px;flex-shrink:0}
.journey{grid-template-columns:175px 1fr 175px 1fr 175px 1fr;align-items:center}
.screen{height:320px}

/* ============================================================
   CORREÇÃO FINAL — TELAS DE CELULAR RESPONSIVAS (VERSÃO 2)
   Escopo: só mockups (.journey + .memory-card)
   Desktop grande = mantém o visual horizontal
   Tela média = quebra em 2 colunas automaticamente
   Celular = vertical
   ============================================================ */

@media (max-width: 1180px) {
  .journey {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
    gap: 22px !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .journey .phone {
    width: min(175px, 42vw) !important;
    max-width: 175px !important;
  }

  .journey-card {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  .journey {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .journey .phone {
    width: min(210px, 76vw) !important;
    max-width: 210px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .journey-card {
    width: min(300px, 88vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Memórias que ganham vida — evita corte do celular */
.memory-card {
  overflow: hidden !important;
}

.memory-phone {
  width: clamp(150px, 22vw, 230px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: center !important;
}

@media (max-width: 1180px) {
  .memory-card {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) !important;
    gap: 22px !important;
    align-items: center !important;
  }
}

@media (max-width: 760px) {
  .memory-card {
    grid-template-columns: 1fr !important;
  }

  .memory-phone {
    width: min(220px, 76vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* MEMÓRIAS QUE GANHAM VIDA — MOCKUP DESCE
   Correção isolada: só impede a tela de celular de ficar por cima do texto.
   O restante do site permanece inalterado. */
@media (max-width: 1180px){
  .memory-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
    align-items:start !important;
    overflow:visible !important;
  }

  .memory-card > *{
    min-width:0 !important;
  }

  .memory-phone{
    position:relative !important;
    order:2 !important;
    width:min(230px, 72vw) !important;
    max-width:230px !important;
    margin:12px auto 0 auto !important;
    justify-self:center !important;
    align-self:center !important;
    transform:none !important;
  }
}
/* FIM MEMÓRIAS MOCKUP DESCE */