@font-face { 

    font-family: 'Outfit'; 

    src: url(fonts/Outfit-ExtraBold.ttf); 

    font-weight: bold; 

} 

@font-face { 

    font-family: 'Outfit'; 

    src: url(fonts/Outfit-Regular.ttf); 

    font-weight: 300; 

} 

@font-face { 

    font-family: 'Outfit'; 

    src: url(fonts/Outfit-Medium.ttf); 

    font-weight: 400; 

} 

 

html, body, div, span, applet, object, iframe, 

h1, h2, h3, h4, h5, h6, p, blockquote, pre, 

a, abbr, acronym, address, big, cite, code, 

del, dfn, em, img, ins, kbd, q, s, samp, 

small, strike, strong, sub, sup, tt, var, 

b, u, i, center, 

dl, dt, dd, ol, ul, li, 

fieldset, form, label, legend, 

table, caption, tbody, tfoot, thead, tr, th, td, 

article, aside, canvas, details, embed,  

figure, figcaption, footer, header, hgroup,  

menu, nav, output, ruby, section, summary, 

time, mark, audio, video { 

    margin: 0; 

    padding: 0; 

    border: 0; 

    font-size: 100%; 

    font: inherit; 

    vertical-align: baseline; 

} 

article, aside, details, figcaption, figure,  

footer, header, hgroup, menu, nav, section { 

    display: block; 

} 

body { 

    line-height: 1.14; 

} 

ol, ul { 

    list-style: none; 

} 

blockquote, q { 

    quotes: none; 

} 

blockquote:before, blockquote:after, 

q:before, q:after { 

    content: ''; 

    content: none; 

} 

table { 

    border-collapse: collapse; 

    border-spacing: 0; 

} 

a { 

    text-decoration: none; 

} 

p { 

    margin: 15px 0; 

} 

img { 

    height: auto; 

    max-width: 100%; 

} 

*,*::before, *::after { 

    box-sizing: border-box; 

} 

 

body { 

    font-family: 'Outfit', 'Arial', sans-serif; 

    color: #18344e; 

    font-weight: 300; 

} 

 

header { 

    background: #2b383b; 

    color: #FFF; 

    overflow: hidden; 

} 

 

.container { 

    width: 1100px; 

    max-width: 100%; 

    margin: auto; 

    padding-left: 15px; 

    padding-right: 15px; 

} 

 

.ha { 

    display: flex; 

    align-items: center; 

    padding: 15px 0; 

    font-size: 22px; 

    justify-content: space-between; 

    width: 750px; 

    max-width: 100%; 

    margin: auto; 

} 

.haf { 

  font-weight: bold; 

} 

.countdown-container { 

  display: flex; 

  gap: 15px; /* Espacio entre los cuadros */ 

  margin-left: 15px; 

} 

 

.time-box { 

  background-color: #f5f0e6; /* Color crema de las cajas */ 

  padding: 12px 20px; 

  border-radius: 10px; 

  display: flex; 

  flex-direction: column; 

  align-items: center; 

  min-width: 50px; 

} 

 

.number { 

  font-weight: 800; 

  color: #2b383b; 

  font-size: 27px; 

  line-height: 20px; 

} 

 

.label { 

  font-size: 12px; 

  color: #2c3437; 

  margin-top: 5px; 

} 

 

main { 

} 

.ma { 

    padding: 50px 0 150px; 

    background: url(images/imgth.png) no-repeat right #f1eadd; 

    background-size: 55%; 

} 

.ma .container { 

    display: flex; 

} 

.ma-t { 

    font-size: 43px; 

    font-weight: bold; 

    color: #18344e; 

    line-height: 45px; 

    hyphens: auto; 

   

  /* 2. Asegura que las palabras largas rompan la línea si es necesario */ 

    overflow-wrap: break-word; 

   

  /* 3. (Opcional) Justifica el texto para que el efecto sea más visible */ 

    /* text-align: justify; */ 

} 

.ma-t span { 

    color: #2ba272; 

} 

.maa { 

    width: 430px; 

    margin-top: 50px; 

} 

.logo { 

    margin-bottom: 50px; 

    width: 250px; 

} 

.logo img { 

    width: 100%; 

} 

.ma-d { 

    margin: 30px 0 10px; 

    text-align: center; 

} 

.ma-d a { 

    background: #2ba272; 

    color: #FFF; 

    border-radius: 50px; 

    padding: 19px; 

    font-weight: bold; 

    display: inline-block; 

    margin-bottom: 10px; 

    font-size: 19px; 

} 

.ma-d a::before { 

    content: ''; 

    width: 18px; 

    height: 18px; 

    background: url(images/icodw.png); 

    background-size: cover; 

    display: inline-block; 

    vertical-align: middle; 

    margin-right: 10px; 

} 

.ma-d span { 

    display: block; 

    font-size: 16px; 

} 

.mab { 

    /* background: url(images/imgth.png) no-repeat right; */ 

    /* background-size: contain; */ 

    /* width: 100%; */ 

} 

 

.kom { 

    padding: 100px 0; 

    background: #2B383B; 

    background: linear-gradient(180deg, rgba(43, 56, 59, 1) 18%, rgba(25, 31, 32, 1) 100%); 

} 

.kom-t { 

    color: #FFF; 

    font-size: 35px; 

    text-align: center; 

    font-weight: bold; 

    margin-bottom: 100px; 

} 

.kom-b { 

    display: flex; 

    width: 800px; 

    margin: auto; 

    max-width: 100%; 

    gap: 30px; 

} 

.kom-b > div { 

    background: #FFF; 

    padding: 20px; 

    border-radius: 35px; 

    text-align: center; 

    color: #2b383b; 

    position: relative; 

    padding-top: 200px; 

    width: 33.33333333%; 

    padding-bottom: 30px; 

    flex: none; 

} 

.kb-i { 

    width: 200px; 

    height: 240px; 

    position: absolute; 

    background-size: contain; 

    background-position: top center; 

    background-repeat: no-repeat; 

    top: -60px; 

    left: 0; 

    right: 0; 

    margin: auto; 

} 

.kb-t { 

    font-weight: 400; 

    line-height: 20px; 

    padding: 0 20px; 

} 

.kom-c { 

    color: #FFF; 

    text-align: center; 

    width: 800px; 

    max-width: 100%; 

    margin: 40px auto 0; 

    font-size: 20px; 

    font-weight: 400; 

} 

.kom-c span { 

    display: inline-block; 

    background: #FFF; 

    color: #2a3639; 

    padding: 3px 10px; 

    margin-top: 2px; 

} 

 

.das { 

    padding: 120px 0 180px; 

    background: url(images/rhc.png) bottom no-repeat; 

    background-size: cover; 

    background-color: #f6f0e4; 

} 

.das .container, 

.dbs .container { 

    display: flex; 

    align-items: center; 

} 

.dasa { 

    width: 300px; 

    flex: none; 

} 

.dasa img { 

    width: 100%; 

} 

.dasb { 

    padding-left: 90px; 

} 

.d-t { 

    font-size: 33px; 

    font-weight: bold; 

    margin-bottom: 20px; 

} 

.d-t span { 

    color: #2ba272; 

} 

.dul li { 

    margin: 18px 0; 

    position: relative; 

    padding-left: 33px; 

    font-size: 18px; 

} 

.dul li::before { 

    content: ''; 

    width: 19px; 

    height: 18px; 

    background: url(images/icocheck.png); 

    background-size: cover; 

    display: inline-block; 

    position: absolute; 

    left: 0; 

} 

.dbs { 

    background: #f6f0e4; 

    position: relative; 

} 

.dbs::before { 

    content: ''; 

    background-image:url(images/wdi.png); 

    background-position: right; 

    background-repeat: no-repeat; 

    background-size: 100%; 

    display: block; 

    width: 900px; 

    height: 970px; 

    position: absolute; 

    right: 0; 

    top: -180px; 

} 

.dbsb { 

    width: 500px; 

    padding: 100px 0; 

} 

.dmaa { 

    width: 300px; 

} 

.dmc { 

    font-weight: bold; 

    color: #555555; 

    text-decoration: line-through; 

    font-size: 23px; 

    margin-top: 40px; 

} 

.dmcx { 

    font-weight: bold; 

    font-size: 43px; 

    color: #2ba272; 

} 

.dbsb .ma-d { 

    margin-top: 15px; 

    text-align: inherit; 

} 

.sag { 

    padding: 100px 0; 

    background: #2B383B; 

    background: linear-gradient(180deg, rgba(43, 56, 59, 1) 18%, rgba(25, 31, 32, 1) 100%); 

} 

.sag-t, .mob-t { 

    color: #FFF; 

    font-size: 35px; 

    font-weight: bold; 

    text-align: center; 

    margin-bottom: 60px; 

} 

#sag-b { 

    width: 700px; 

    margin: auto; 

    max-width: 100%; 

} 

#sag-b .item { 

    background: #f6f0e4; 

    padding: 30px 45px; 

    border-radius: 30px; 

    display: inline-block; 

} 

.sb-a { 

    display: flex; 

    align-items: center; 

    margin-bottom: 15px; 

    font-size: 20px; 

} 

.sb-a span:nth-child(1) { 

    background: #c14f95; 

    border-radius: 50%; 

    display: inline-block; 

    color: #FFF; 

    width: 55px; 

    height: 55px; 

    line-height: 55px; 

    text-align: center; 

    font-weight: bold; 

    font-size: 28px; 

    margin-right: 15px; 

    flex: none; 

} 

.sb-c { 

    font-size: 14px; 

    font-weight: 400; 

    line-height: 16px; 

} 

.sb-s { 

    background: url(images/val.png) no-repeat; 

    width: 140px; 

    height: 22px; 

    background-size: contain; 

    margin: 30px auto 0; 

} 

#sag-b .owl-dots { 

    margin: 50px 0 0; 

    text-align: center; 

} 

#sag-b .owl-dots .owl-dot.active span { 

    background: #FFF; 

} 

#sag-b .owl-dots .owl-dot span { 

    background: #464a49; 

} 

.gzg { 

    background: url(images/rhc.png) #f6f0e4 no-repeat; 

} 

.gzg .container { 

    display: flex; 

    padding-top: 200px; 

    padding-bottom: 200px; 

    align-items: center; 

    width: 800px; 

} 

.gz-t { 

    font-weight: bold; 

    font-size: 33px; 

    color: #18344e; 

    margin-bottom: 30px; 

} 

.gz-t span { 

    color: #2ba272; 

} 

.gz-c { 

    font-size: 18px; 

    line-height: 24px; 

    font-weight: 400; 

} 

.gza { 

    width: 250px; 

    flex: none; 

} 

.gzb { 

    padding-left: 100px; 

} 

.ul-faq { 

    padding: 0; 

    list-style: none; 

    width: 500px; 

    margin: auto; 

    max-width: 100%; 

} 

.ebl-t, .ebl-c { 

    display: flex; 

    justify-content: space-between; 

    padding: 20px 25px; 

    cursor: pointer; 

    background: #2ba272; 

    border-radius: 15px; 

    margin: 15px 0; 

    color: #FFF; 

    font-weight: 400; 

    font-size: 20px; 

    display: flex; 

    align-items: center; 

} 

.ebl-t i { 

    background: url(images/ardown.png) center no-repeat; 

    width: 13px; 

    height: 7px; 

    display: inline-block; 

    background-size: contain; 

} 

.act .ebl-t i { 

    background: url(images/icoclose.png) center no-repeat; 

    background-size: contain; 

    height: 12px; 

} 

.ebl-c { 

    display: none; 

    background: #FFF; 

    color: inherit; 

    font-size: 17px; 

} 

 

.mob { 

    padding: 100px 0; 

    background: #2B383B; 

    background: linear-gradient(180deg, rgba(43, 56, 59, 1) 18%, rgba(25, 31, 32, 1) 100%); 

} 

.star { 

    padding: 150px 0; 

    background: url(images/shtc.png) top center no-repeat #f1eadc; 

} 

.star .dmaa { 

    margin: auto; 

} 

.star-t { 

    color: #18344e; 

    font-size: 43px; 

    text-align: center; 

    font-weight: bold; 

} 

.star .ma-d { 

    margin-bottom: 119px; 

} 

.star img { 

    /* height: 50px; */ 

} 

footer { 

  background: #2b383b; 

  color: #FFF; 

  padding: 30px 0; 

  font-size: 15px; 

  text-align: center; 

} 

 

/* Clase base para configurar la duración y el modo de relleno */ 

.fade-item { 

  opacity: 0; 

  transition: none; /* Evita conflictos antes de la animación */ 

} 

 

/* --- Keyframes --- */ 

 

@keyframes fadeInFromLeft { 

  from { opacity: 0; transform: translateX(-150px); } 

  to { opacity: 1; transform: translateX(0); } 

} 

 

@keyframes fadeInFromRight { 

  from { opacity: 0; transform: translateX(150px); } 

  to { opacity: 1; transform: translateX(0); } 

} 

 

@keyframes fadeInFromTop { 

  from { opacity: 0; transform: translateY(-150px); } 

  to { opacity: 1; transform: translateY(0); } 

} 

 

@keyframes fadeInFromBottom { 

  from { opacity: 0; transform: translateY(150px); } 

  to { opacity: 1; transform: translateY(0); } 

} 

 

/* --- Clases de Dirección --- */ 

 

.fade-left.active   { animation: fadeInFromLeft 0.8s ease-out forwards; } 

.fade-right.active  { animation: fadeInFromRight 0.8s ease-out forwards; } 

.fade-top.active    { animation: fadeInFromTop 0.8s ease-out forwards; } 

.fade-bottom.active { animation: fadeInFromBottom 0.8s ease-out forwards; } 

 

 

 

#backtop { 

    position: fixed; 

    right: 20px; 

    z-index: 999; 

    bottom: 80px; 

    height: 40px; 

    width: 40px; 

    border-radius: 10px; 

    cursor: pointer; 

    display: none; 

} 

#backtop { 

    background: url(images/ardown.png) center no-repeat #2ba272; 

    bottom: 20px; 

    transform: rotate(180deg); 

} 

 

 

@media (max-width: 1024px) { 

    .kom-b { 

        flex-wrap: wrap; 

        justify-content: center; 

    } 

    .kom-b > div { 

        width: 250px; 

        flex: none; 

    } 

    .kom-b > div:nth-child(3) { 

        margin-top: 80px; 

    } 

} 

@media (max-width: 720px) { 

    .ma { 

        background-image: none; 

    } 

      .ma .container { 

        display: block; 

      } 

    .maa { 

        width: 100%; 

    } 

    .das .container, .dbs .container { 

        flex-direction: column; 

    } 

    .dasb { 

        padding-left: 0; 

    } 

    .dbsb { 

        padding-top: 20px; 

        width: 100%; 

        /* padding-bottom: 300px; */ 

    } 

    .dbs::before { 

        position: relative; 

        width: 100%; 

        background-size: cover; 

        height: 510px; 

        top: 0; 

        background-position: center; 

        display: none; 

    } 

    .dasa { 

        margin-bottom: 40px; 

    } 

    .das { 

        padding-bottom: 50px; 

    } 

    .gza { 

        width: 200px; 

        margin-bottom: 50px; 

    } 

    .gzb { 

        padding-left: 0; 

    } 

    .gzg .container { 

        flex-direction: column; 

        padding-top: 100px; 

        padding-bottom: 100px; 

    } 

} 

@media (max-width: 580px) { 

    .kom-b { 

        flex-direction: column; 

    } 

    .kom-b > div { 

        margin: auto; 

    } 

    .kom-b > div:nth-child(2) { 

        margin: 90px auto 0; 

    } 

     

} 

@media (max-width: 480px) { 

    .ha {  

        font-size: 18px; 

    } 

    .countdown-container { 

        zoom: .8; 

    } 

}