@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 {background: #fdfcf9;border-bottom: 1px solid #eee;padding: 30px 0;} 
.ma .container { 
    display: flex; 
} 
.ma-t {font-weight: bold;color: #18344e;hyphens: auto; overflow-wrap: break-word; font-size: 48px;line-height: 1.2;} 
.ma-tp {font-size: 22px; margin-top: 25px; color: #4a5568; font-weight: 300; line-height: 1.6;}
.ma-t span { 
    color: #2ba272; 
} 
.maa {    
    width: 100%;
    max-width: 800px;
    /* margin-top: 50px; */
    margin: 0 auto;
    background: #fdfcf9;
    padding: 60px 0;
    text-align: center;
} 
.logo { 
    margin-bottom: 50px; 
    width: 250px; 
} 
.logo img { 
    width: 100%; 
} 
.ma-d { 
    margin: 30px 0 10px; 
    text-align: center; 
} 
.ma-d a {margin-bottom: 10px;background: #2ba272;color: #fff;padding: 25px 60px;font-size: 22px;border-radius: 50px;display: inline-block;font-weight: bold;text-decoration: none;} 
.ma-d a::before { 
    content: ''; 
    width: 18px; 
    height: 18px; 
    background-size: cover; 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 10px; 
} 
.ma-d span { 
    display: block; 
    font-size: 16px; 
} 
.mab { 
    /* background: url(images/logo.png) no-repeat right; */ 
    /* background-size: contain; */ 
    /* width: 100%; */ 
} 
 
.kom {padding: 100px 0;background: #FFF;} 
.kom-t {margin-bottom: 100px;color: #4a5568;font-size: 38px;width: 800px;margin: 0 auto 60px;text-align: center;font-weight: bold;max-width: 100%;} 
.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;font-size: 20px;line-height: 1.8;max-width: 100%;margin: auto;color: #2d3748;text-align: left;} 
.kom-c span { 
    display: inline-block; 
    background: #FFF; 
    color: #2a3639; 
    padding: 3px 10px; 
    margin-top: 2px; 
} 
 
.das {padding: 100px 0;background: url(images/rhc.png) bottom no-repeat;background-size: cover;background-color: #f7fafc;overflow: hidden;} 
.das .container, 
.dbs .container {display: flex;align-items: center;align-items: center;gap: 60px;flex-wrap: wrap;} 
.dasa { 
    width: 300px; 
    flex: none; 
} 
.dasa img { 
    width: 100%; 
} 
.dasb { 
    padding-left: 90px; 
} 
.dasm {
    padding: 100px 0;
    background: #fff;
}
.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; 
    margin-top: 40px; 
    font-size: 20px; color: #718096; text-decoration: line-through;
} 
.dmcx {font-size: 56px;margin: 10px 0;color: #2ba272;font-weight: bold;} 
.dbsb .ma-d { 
    margin-top: 15px; 
    text-align: inherit; 
} 
.sag {padding: 100px 0;background: #2B383B;color: #fff;} 
.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: #1a202c;color: #fff;} 
.star {padding: 120px 0;background: #fdfcf9;text-align: center;} 
.star h2 {font-size: 42px; font-weight: bold; line-height: 1.2; color: #18344e;}
.star .dmaa { 
    margin: auto; 
} 
.star-t { 
    color: #18344e; 
    font-size: 43px; 
    text-align: center; 
    font-weight: bold; 
} 
.star .ma-d {/* margin-bottom: 119px; */} 

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); 
} 
 
.prth {
    padding: 80px 0; 
    background: #f7fafc;
}
.tageg {
    padding: 100px 0; background: #fff; border-top: 1px solid #edf2f7;
}
.tageg .container {
    display: flex;
    gap: 60px;
    margin: auto;
    flex-wrap: wrap;
}
.tageg .container > div {
    flex: 1;
    /* min-width: 280px; */
}
.tageg .container > div:nth-child(2) {
    border-left: 2px solid #edf2f7;
    padding-left: 40px;
}
.dasm-box {
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    gap: 30px;
    width: 900px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}
.dasm-box > div {
    padding: 30px;
    border: 1px solid #edf2f7;
    border-radius: 15px;
    background: #fdfcf9;
    text-align: center;
    flex: none;
    width: calc(25% - (30px * 3 / 4));
    min-width: 200px;
}
.dasb-i {padding-bottom: 160%;width: 100%;height: 0;background-size: cover;background-position: center;margin-bottom: 20px;}
 
.ptable {
    width: 100%;
    border-collapse: collapse;
    /* min-width: 600px; */
    table-layout: fixed;
    word-break: break-word;
}
.ptable thead th {
    padding: 25px;
    background: #2b383b; 
    color: #fff; 
    text-align: left;
}

#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); 

} 
.sb-s { 
    background: url(images/val.png) no-repeat; 
    width: 140px; 
    height: 22px; 
    background-size: contain; 
    margin: 30px auto 0; 
} 

@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%;padding: 30px 0;} 
    .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: 640px) {
    .ma-t {
        font-size: 30px;
    }
    .ma-tp {
        font-size: 17px;
    }
    .dmcx {
        font-size: 35px;
    }
    .ma-d a {
        font-size: 18px;
        padding: 17px 30px;
    }
    .star h2 {
        font-size: 33px;
    }
}
@media (max-width: 580px) { 
    .kom-b { 
        flex-direction: column; 
    } 
    .kom-b > div { 
        margin: auto; 
    } 
    .kom-b > div:nth-child(2) { 
        margin: 90px auto 0; 
    } 
    .dasm-box {
        gap: 20px;
    }
    .dasm-box > div {
        padding: 20px;
    }
    .ptable tbody td {
        padding: 20px 15px !important;
    }
} 
@media (max-width: 480px) { 
    .ha {  
        font-size: 18px; 
    } 
    .countdown-container { 
        zoom: .8; 
    } 

    .tageg .container > div {
        width: 100%;
        flex: none;
        padding: 0 !important;
        border: 0 !important;
    }
} 

/* ==========================================================================
   BARRA DE URGENCIA - THE SOMATIC INSTITUTE
   ========================================================================== */
.promo-bar-somatic {
    background-color: #2ba272;
    color: #ffffff;
    padding: 12px 0;
    text-align: center;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.promo-container-somatic {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.promo-text-somatic {
    font-size: 14px;
    font-weight: 400; /* Corresponde a tu Outfit-Medium */
    text-transform: uppercase;
    letter-spacing: 1px;
}

#countdown-somatic {
    font-size: 22px;
    font-weight: bold; /* Corresponde a tu Outfit-ExtraBold */
    background: rgba(0,0,0,0.15);
    padding: 4px 12px;
    border-radius: 8px;
    min-width: 110px;
    display: inline-block;
    line-height: 1;
}

/* Responsivo para móviles */
@media (max-width: 640px) {
    .promo-container-somatic {
        gap: 8px;
    }
    .promo-text-somatic {
        font-size: 11px;
    }
    #countdown-somatic {
        font-size: 18px;
        min-width: 90px;
        padding: 3px 8px;
    }}