* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'samsungsharpsans', sans-serif;

  background-color: #000; /* cor de fundo */

  background-image: url("././img/textura.png") !important; /* imgm de fundo */

background-position: center center;

background-size: contain;

    color: #fff;

    overflow-x: hidden;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Responsive imgs and media */

img, video {

    max-width: 100%;

    height: auto;

}



/* Touch-friendly buttons */

.cta-button,

.plano-button,

.social-icon {



    min-height: 44px;

    min-width: 44px;

    

}



.social-icon{

    width: 55px;





}



.social-icons{

  gap: 30px ;

     padding-top: 20px;

     padding-bottom: 40px;



}

.plano-button{

width: 80%;

}





.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 20px;

}



/* Hero Video Section */

.hero-video {

    height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;



}



.hero-video-bg {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    transform: translate(-50%, -50%);

  

    z-index: 1;

    object-fit: cover;

}



/* Hero Banner */

.hero-banner {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    background: rgba(0, 0, 0, 0.7);

    padding: 15px 0;

    z-index: 10;

    text-align: center;

}



.hero-banner p {

    color: #fff;

    font-size: 18px;

    font-weight: 400;

    letter-spacing: 2px;

    margin: 0;

    text-transform: uppercase;

}



/* Scroll Down Arrow */

.scroll-arrow {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    cursor: pointer;

}



.arrow-icon {

    width: 40px;

    height: 40px;

    filter: brightness(0) invert(1);

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px);

    }

    60% {

        transform: translateY(-5px);

    }

}



/* Phone mockup styles */

.phone-mockup {



    background: transparent;

    border-radius: 0;

    padding: 0;

    position: relative;

    box-shadow: none;

 

}



body .celular{



    display: flex;

    align-content: center !important;

    justify-content: center !important

}



.phone-screen {

    width: 100%;

    height: 100%;

    background: transparent;

    border-radius: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: visible;

}



.invitation-preview {

    width: 100%;

    height: 100%;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.phone-video {

width: 100%;

    object-fit: contain;

    border-radius: 0;



}



.invitation-img {

    width: 80%;

    height: 80%;

    object-fit: contain;

    border-radius: 0;



}







.exclusivo-section .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}



.content-right{

    text-align: center;

}





.span{

       font-family: 'samsungsharpsans', 'sans-serif';

  

}



.content-right p {

    font-size: 18px;

    color: #ccc;

    margin-bottom: 40px;

    line-height: 1.6;

}



.cta-button {

    display: inline-block;

    background: linear-gradient(145deg, #ef6170, #d44d5c);

    color: #fff;

    padding: 18px 40px;

    border-radius: 150px;

    text-decoration: none;

    font-weight: 600;

    font-size: 16px;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    box-shadow: 0 8px 25px rgba(239, 97, 112, 0.3);

}



.cta-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 35px rgba(239, 97, 112, 0.4);

}



/* Detalhes Section */

.detalhes-section {

    padding: 100px 0;

    padding-bottom: 0px ;

    padding-bottom: 0px;



}



.detalhes-section .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 60px;

}



.detalhes-section h2 {

    font-size: 48px;

 

    color: #ca8f93;

    margin-bottom: 40px;



}



.features-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

    

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 20px;

    color: #ca8f93;

    font-size: 16px;

    font-weight: 300;

}



.feature-icon {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.feature-icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.feature-icon.confirma-presenca img {

    width: 60px;

    height: 60px;

}



.feature-icon.lista-presentes img {

    width: 56px;

    height: 56px;

}



.feature-icon.animacao-abertura img {

    width: 56px;

    height: 56px;

}



.feature-icon.musica-personalizada img {

    width: 54px;

    height: 54px;

}



.feature-icon.dress-code img {

    width: 56px;

    height: 56px;

}



.feature-icon.galeria-fotos img {

    width: 54px;

    height: 54px;

}



.laura-invitation {

    width: 100%;

    height: 100%;

    background: transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    overflow: visible;

}



.section-button {

    text-align: center;

    margin-top: 20px;

}



/* Premium World Section */

.premium-world-section {

    padding: 100px 0;

    padding-bottom: 0px ;



    text-align: center;

}



.premium-world-section h2 {

    font-size: 64px;



    color: #ca8f93;

    margin-bottom: 10px;

    letter-spacing: 3px;

}



.premium-world-section h3 {



    font-size: 48px;

  

    color: #ca8f93;

    margin-bottom: 40px;

    letter-spacing: 5px;

}



.premium-world-section p {

    font-size: 16px;

    color: #ccc;

    line-height: 1.8;

    max-width: 800px;

    text-align: center;

    margin: 0 auto 60px;

}



.world-map {

    width: 600px;

    height: 300px;



    margin: 0 auto;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: black;

}



.mapa {



    width: 100%;

    height: 100%;



}



/* Depoimentos Section */

.depoimentos-section {

    padding: 100px 0;

    padding-bottom: 0px ;



    text-align: center;

}



.depoimentos-section h2 {

    font-size: 48px;

 

    color: #ca8f93;

    margin-bottom: 20px;

    letter-spacing: 2px;

}



.depoimentos-section p {

    font-size: 18px;

    color: #ccc;

    margin-bottom: 60px;

}



.video-testimonials {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-bottom: 60px;

}



.video-mockup {

    width: 200px;

    height: 350px;

    background: #333;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}



.testimonial-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 18px;

}



.testimonial-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 18px;

}



.play-button {

    width: 60px;

    height: 60px;

    background: rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: #000;

    cursor: pointer;

}



.client-testimonials {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-bottom: 40px;

    max-width: 1000px;

    margin-left: auto;

    margin-right: auto;

}



.testimonial {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    max-width: 300px;

}



.testimonial-avatar {

    margin-bottom: 15px;

}



.avatar-img {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #ca8f93;

    box-shadow: 0 4px 12px rgba(202, 143, 147, 0.3);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.avatar-img:hover {

    transform: scale(1.05);

    box-shadow: 0 6px 20px rgba(202, 143, 147, 0.4);

}



.testimonial-content {

    text-align: center;

}



.testimonial-name {

    font-size: 18px;

    font-weight: 600;

    color: #fff;

    margin-bottom: 5px;

}



.testimonial-country {

    font-size: 14px;

    color: #ca8f93;

    margin-bottom: 15px;

    font-weight: 300;

}



.testimonial-text {

    font-size: 14px;

    color: #fff;

    line-height: 1.5;

    font-weight: 300;

    max-width: 250px;

}



.see-more-section {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 40px;

}



.see-more-icon {

    font-size: 20px;

    color: #ca8f93;

}



.see-more {

    color: #ca8f93;

    text-decoration: none;

    font-size: 16px;

    font-weight: 300;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Como Funciona Section */

.como-funciona-section {

    padding: 100px 0;

    padding-bottom: 0px ;



    text-align: center;

}



.como-funciona-section h2 {

    font-size: 48px;



    color: #ca8f93;

    margin-bottom: 60px;

    letter-spacing: 2px;

}



.steps {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    margin-bottom: 20px;

}



.step {

    text-align: center;

}



.step-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    margin: 0 auto 20px;

    color: #000;

}



.step p {

    font-size: 16px;

    color: #fff;

    font-weight: 300;

    line-height: 1.4;

}



/* Planos Section */

.planos-section {

    padding: 100px 0;

    padding-bottom: 0px ;



    text-align: center;

}



.planos-section h2 {

    font-size: 48px;

 

    color: #ca8f93;

    margin-bottom: 60px;

    letter-spacing: 2px;

}



.planos-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

    max-width: 1000px;

    margin: 0 auto;

  



}



.plano-card {

    background: #111;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

    border: 1px solid #333;

        max-width: 300px;

}



.plano-card.premium {

    border: 2px solid #ca8f93;

 

        box-shadow: 0 8px 25px rgba(239, 97, 112, 0.3);

}



.plano-card h3 {

    font-size: 32px;

    font-weight: 300;

    color: #ca8f93;

    margin-bottom: 20px;

}



.plano-card p {

    font-size: 16px;

    color: #ccc;

    line-height: 1.6;

    margin-bottom: 30px;

}



.plano-button {

    color: #fff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    border: 2px solid #ca8f93;

    padding: 12px 24px;

    border-radius: 8px;

    display: inline-block;

    transition: all 0.3s ease;

}



/* Galeria Section */

.galeria-section {

    padding: 100px 0;

    padding-bottom: 0px ;



    text-align: center;

}



.galeria-section h2 {

    font-size: 48px;



    color: #ca8f93;

    margin-bottom: 20px;

    letter-spacing: 2px;

}



.galeria-section p {

    font-size: 18px;

    color: #ccc;

    margin-bottom: 60px;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 40px;

    max-width: 800px;

    margin: 0 auto;

}



.gallery-phone img {

    width: 150px;

    height: 300px;

    margin: 0 auto;

}



.gallery-invitation {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: 600;

    color: #fff;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}





/* Destaques Exclusivos Section */

.destaques-section {

    padding: 100px 0;

    padding-bottom: 0px ;



    text-align: center;

    position: relative;

    overflow: hidden;

}



.destaques-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 20% 20%, rgba(202, 143, 147, 0.05) 0%, transparent 50%),

                radial-gradient(circle at 80% 80%, rgba(202, 143, 147, 0.05) 0%, transparent 50%);

    pointer-events: none;

}



.destaques-section h2 {

    font-size: 48px;



    color: #ca8f93;

    margin-bottom: 60px;

    letter-spacing: 3px;

    font-family: 'Times New Roman', serif;

}



.destaques-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

    max-width: 1000px;

    margin: 0 auto 60px;

}



.destaque-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    text-align: left;

    padding: 30px;

    background: rgba(202, 143, 147, 0.05);

    border-radius: 15px;

    border: 1px solid rgba(202, 143, 147, 0.1);

    transition: all 0.3s ease;

}



.destaque-item:hover {

    background: rgba(202, 143, 147, 0.1);

    transform: translateY(-5px);

}



.destaque-icon {

    font-size: 32px;

    color: #ca8f93;

    flex-shrink: 0;

    width: 50px;

    text-align: center;

}



.destaque-content h3 {

    font-size: 18px;

    font-weight: 600;

    color: #ca8f93;

    margin-bottom: 10px;

    line-height: 1.4;

}



.destaque-content p {

    font-size: 14px;

    color: #fff;

    line-height: 1.6;

    font-weight: 300;

}



.slogan {

    margin: 60px 0 40px;

}



.slogan h4 {

    font-size: 32px;

    font-weight: 300;

    color: #ca8f93;

    font-family: 'Times New Roman', serif;

    letter-spacing: 2px;

    line-height: 1.3;

}



.cta-section {

    margin-bottom: 60px;

}



.social-section {

    text-align: center;

}



.social-section p {

    font-size: 14px;

    color: #fff;

    margin-bottom: 20px;

    font-weight: 300;

    letter-spacing: 1px;

}



.social-icons {

    display: flex;

    justify-content: center;

    gap: 20px;

}



.social-icon {

    font-size: 24px;

    color: #fff;

    text-decoration: none;

    transition: all 0.3s ease;

    opacity: 0.8;

}



.social-icon:hover {

    opacity: 1;

    transform: scale(1.1);

}



/* Responsive Design */

@media (max-width: 768px) {

    .planos-grid{

        display: flex;

        align-items: center;

        flex-direction: column;

    }

    .container {

        padding: 40px 20px;

    }

    

    .hero-banner p {

        font-size: 16px;

        letter-spacing: 1px;

    }

    

    .exclusivo-section .container,

    .detalhes-section .container {

        grid-template-columns: 1fr;

        gap: 10px;



        text-align: center;

    }

    

    .content-right h2,

    .detalhes-section h2,

    .premium-world-section h2, body h2 {

     

        font-size: 32px;

    }

    

    .premium-world-section h3 {

        font-size: 28px;

    }

    

    .world-map {

        width: 100%;

        max-width: 550px;

        height: 275px;

    }

    

    .steps {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    

    .planos-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }

    

    .video-testimonials {

        flex-direction: column;

        align-items: center;

        gap: 30px;

    }

    

    .client-testimonials {

        flex-direction: column;

        gap: 30px;

        align-items: center;

    }

    

    .testimonial {

        max-width: 100%;

        padding: 20px;

        background: rgba(202, 143, 147, 0.05);

        border-radius: 15px;

        border: 1px solid rgba(202, 143, 147, 0.1);

    }

    

    .destaques-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    

    .destaques-section h2 {

        font-size: 36px;

    }

    

    .slogan h4 {

        font-size: 24px;

    }



    .invitation-preview video{

    height: 500px;

    }

        .feature-item {

       

     align-items: center;

        justify-content: center;

        flex-direction: column;

            gap: 0px;

    }



    .features-list {



     align-items: center;

        justify-content: center;}

}



@media (max-width: 480px) {

    .container {

        padding: 0 15px;

    }

    

    .hero-banner p {

        font-size: 14px;

        letter-spacing: 0.5px;

    }

    

    .content-right h2,

    .detalhes-section h2,

    .premium-world-section h2, body h2 {

     

        font-size: 24px;

    }

    

    .premium-world-section h3 {

        font-size: 20px;

    }

    

    .world-map {

        width: 100%;

        max-width: 350px;

        height: 175px;

    }

    

    .steps {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 15px;

    }

    

    .avatar-img {

        width: 60px;

        height: 60px;

    }

    

    .feature-icon {

        width: 60px;

        height: 60px;

    }

    

    .feature-icon.confirma-presenca img {

        width: 42px;

        height: 42px;

    }

    

    .feature-icon.lista-presentes img,

    .feature-icon.animacao-abertura img,

    .feature-icon.dress-code img {

        width: 40px;

        height: 40px;

    }

    

    .feature-icon.musica-personalizada img,

    .feature-icon.galeria-fotos img {

        width: 38px;

        height: 38px;

    }

    

    .destaques-section h2 {

        font-size: 28px;

    }

    

    .slogan h4 {

        font-size: 20px;

    }

    

    .destaque-item {

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }







            .invitation-preview video{

    height: 480px;

    }

    

}







@font-face {

    font-family: samsungsharpsans;

    src: url("./tipografia/samsungsharpsans.otf");

}



@font-face {

    font-family: samsungsharpsans-b;

    src: url("./tipografia/samsungsharpsans-bold.otf");

}



@font-face {

    font-family: theseasons;

    src: url("./tipografia/theseasons-reg.otf");

}



.convitepremium{

    font-family: 'theseasons', serif !important;  

    font-size: 3.5rem !important;

    letter-spacing: 0 !important;

    font-weight: bold !important;

}





@media (max-width: 768px) {

  .features-list {

    display: grid;                                   /* muda p/ grid só no responsivo */

    grid-template-columns: repeat(2, minmax(0, 1fr));/* 2 colunas iguais */

    gap: 20px;                                       /* espaço entre os itens */

    justify-items: center;        

    padding-bottom: 60px;                   /* centraliza cada card */

  }



  .feature-item {

    width: 100%;             /* garante que o card ocupe a célula inteira */

    max-width: 360px;        /* opcional: limita a largura do card */

    /* mantém sua organização interna (ícone em cima, texto embaixo) */

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;               /* ajuste fino vertical dentro do card */

  }

}





 h2 {

    font-size: 48px;

 

    color: #ca8f93;

    margin-bottom: 20px;

 

 

}





.video-testimonials {

  display: flex;

  justify-content: center;

  gap: 40px;

  margin-bottom: 60px;

}



.video-mockup {

  width: 200px;

  height: 350px;

  background: linear-gradient(145deg, #ff8fb4, #ff5c9a); /* rosa degradê */

  border-radius: 20px;

  padding: 8px; /* cria uma borda de “moldura” rosa */

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  box-shadow: 0 6px 20px rgba(255, 92, 154, 0.4); /* glow rosado */

}



.video-mockup video {

  width: 100%;

  height: 100%;

  border-radius: 14px; /* arredonda só o vídeo dentro do mockup */

  object-fit: cover;

}





a{

text-decoration: none;

color: white;

}



.step h3{

color: #ca8f93;

padding-bottom: 10px;

font-weight: bold !important;

}



.step p{

font-size: 0.9rem;

padding-bottom: 20px;

font-weight: bold !important;

}





.experiencia{

    padding-top: 20px;

color: #ca8f93;

}





.exemplo{

margin-top: 20px !important;

}



footer{

    color: #000;

    padding: 20px;

    background-color: #ca8f93;

}



.visually-hidden {

    position: absolute;

    left: -9999px;

    top: auto;

    width: 1px;

    height: 1px;

    overflow: hidden;

}


.hero-video-bg { transition: filter .35s ease; }
.hero-video-bg.loading { filter: brightness(0.9); }


.zapcontainer.hero-banner{
    top: auto;
bottom: 0 !important;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;

}

.zapcontainer p{
    color: #ca8f93;

text-decoration: none;

}

.zapicon{
    width: 48px;

}